// Sections : Nav, Hero, Manifesto, Services, Portfolio, Process, Locations, FAQ, Devis, Footer

const { useState, useEffect, useRef } = React;

// ------- Reveal-on-scroll hook -------
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in")),
      { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ------- WhatsApp icon -------
const WhatsappIcon = ({ size = 16 }) =>
<svg viewBox="0 0 32 32" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M16 0C7.16 0 0 7.16 0 16c0 2.82.74 5.5 2.04 7.84L0 32l8.34-2.18C10.6 31.28 13.22 32 16 32c8.84 0 16-7.16 16-16S24.84 0 16 0zm0 29.34c-2.62 0-5.1-.68-7.24-1.92l-.52-.3-5.18 1.36 1.38-5.06-.34-.54C2.74 20.66 2 18.38 2 16 2 8.28 8.28 2 16 2s14 6.28 14 14-6.28 13.34-14 13.34zm7.78-10.06c-.42-.22-2.52-1.24-2.92-1.38-.4-.14-.68-.22-.96.22-.28.42-1.1 1.38-1.36 1.66-.24.28-.5.32-.92.1-2.5-1.24-4.14-2.22-5.78-5.04-.44-.74.44-.7 1.24-2.32.14-.28.06-.52-.04-.74-.1-.22-.96-2.32-1.32-3.18-.34-.84-.7-.72-.96-.74h-.82c-.28 0-.74.1-1.12.52-.38.42-1.48 1.44-1.48 3.52s1.52 4.08 1.72 4.36c.22.28 2.98 4.54 7.22 6.36 1 .44 1.78.7 2.4.9.98.32 1.86.28 2.56.18.78-.12 2.52-1.04 2.88-2.04.34-1 .34-1.86.24-2.02-.1-.18-.38-.28-.8-.5z" />
  </svg>;

// ------- Instagram icon -------
const InstagramIcon = ({ size = 16 }) =>
<svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.2" cy="6.8" r="1" fill="currentColor" stroke="none" />
  </svg>;


const WHATSAPP_URL = "https://wa.me/33613481628?text=Bonjour%20Nova%20Studio%2C%20j'aimerais%20\u00e9changer%20au%20sujet%20d'un%20mariage.";

// ------- TOP STRIP -------
function TopStrip() {
  return (
    <div className="topstrip">
      <div className="topstrip-label">
        <span className="dot" />
        Réservations 2026 ouvertes
      </div>
      <div className="topstrip-ctas">
        <a
          className="topstrip-wa"
          href={WHATSAPP_URL}
          target="_blank"
          rel="noopener"
          aria-label="WhatsApp">
          
          <WhatsappIcon size={14} />
          <span>WhatsApp</span>
        </a>
        <a className="topstrip-cta" href="#contact">
          Demander un devis
          <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>);

}

// ------- NAV -------
function Nav({ onDevis }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 60);
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => {document.body.style.overflow = "";};
  }, [menuOpen]);
  const close = () => setMenuOpen(false);
  const LINKS = [
  ["#manifeste", "Manifeste"],
  ["#univers", "Accompagnement"],
  ["#processus", "Méthode"],
  ["#lieux", "Lieux"],
  ["#faq", "FAQ"]];

  return (
    <header className={"nav " + (scrolled ? "scrolled" : "") + (menuOpen ? " menu-open" : "")}>
      <div className="nav-inner">
        <a href="#top" className="brand" aria-label="Nova Studio" onClick={close}>
          <img src="assets/nova-logo.png" alt="Nova Studio" className="brand-logo" />
        </a>
        <nav className="nav-links">
          {LINKS.map(([href, label]) => <a key={href} href={href}>{label}</a>)}
        </nav>
        <div className="nav-actions">
          <a
            href={WHATSAPP_URL}
            target="_blank"
            rel="noopener"
            className="icon-btn wa"
            aria-label="Contacter via WhatsApp"
            title="WhatsApp">
            
            <WhatsappIcon size={16} />
          </a>
          <a href="#contact" className="cta-solid" onClick={onDevis}>
            <span>Demander un devis</span>
            <span className="arrow" aria-hidden="true">→</span>
          </a>
        </div>
        <div className="nav-mobile">
          <a href={WHATSAPP_URL} target="_blank" rel="noopener" className="cta-phone" aria-label="Contacter via WhatsApp">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M6.5 3h3l1.5 5-2 1.5a12 12 0 005.5 5.5l1.5-2 5 1.5v3a2 2 0 01-2 2A16 16 0 014.5 5a2 2 0 012-2z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
            </svg>
            <span>Appeler</span>
          </a>
          <button
            className={"hamburger " + (menuOpen ? "open" : "")}
            onClick={() => setMenuOpen((v) => !v)}
            aria-label={menuOpen ? "Fermer le menu" : "Ouvrir le menu"}
            aria-expanded={menuOpen}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      <div className={"mobile-menu " + (menuOpen ? "open" : "")}>
        <nav className="mobile-menu-links">
          {LINKS.map(([href, label]) =>
          <a key={href} href={href} onClick={close}>{label}</a>
          )}
        </nav>
        <div className="mobile-menu-cta">
          <a href="#contact" className="mm-devis" onClick={close}>Demander un devis <span aria-hidden="true">→</span></a>
          <a href={WHATSAPP_URL} target="_blank" rel="noopener" className="mm-wa" onClick={close}>
            <WhatsappIcon size={16} /> WhatsApp
          </a>
        </div>
      </div>
    </header>);

}

// ------- HERO -------
function Hero({ image }) {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 80);
    return () => clearTimeout(t);
  }, []);
  return (
    <section className={"hero " + (loaded ? "loaded" : "")} id="top" data-screen-label="01 Hero">
      <div className="hero-img" />
      <div className="hero-inner">
        <div className="hero-eyebrow eyebrow">Wedding planner · Sud de la France</div>
        <h1>
          Vous allez<br />
          <span className="it">vous dire OUI.</span><br />
          On s'occupe du reste.
        </h1>
        <div className="hero-meta">
          <p style={{ fontWeight: "600" }} className="hero-lead">Nova Studio crée des célébrations raffinées et immersives en Provence et sur la Côte d’Azur, pensées pour laisser une empreinte durable dans les souvenirs de chacun.</p>
          <div className="hero-cta-stack">
            <a href="#contact" className="btn-primary">
              Demander un devis
              <span aria-hidden="true">→</span>
            </a>
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener"
              className="btn-wa">
              
              <WhatsappIcon size={16} />
              WhatsApp
            </a>
          </div>
        </div>
      </div>
      <div className="scroll-cue">
        <span>Découvrir</span>
        <div className="line" />
      </div>
      <div className="photo-credit hero-credit">Photo by Léa Nivet / neashoot</div>
    </section>);

}

// ------- Ribbon marquee -------
function Ribbon() {
  const items = [
  "Mariages d'exception",
  "Cérémonie laïque",
  "Décor floral",
  "Coordination jour J",
  "Vin d'honneur & dîner",
  "Wedding design"];

  const seq = [...items, ...items, ...items];
  return (
    <div className="ribbon">
      <div className="ribbon-track">
        {seq.map((w, i) =>
        <span key={i}>
            {w}
          </span>
        )}
      </div>
    </div>);

}

// ------- MANIFESTO -------
function Manifesto() {
  const ref = useReveal();
  return (
    <section className="section manifesto" id="manifeste" data-screen-label="02 Manifeste">
      <div className="wrap">
        <div className="manifesto-grid">
          <div className="manifesto-text reveal" ref={ref}>
            <div className="eyebrow" style={{ marginBottom: 28, fontWeight: "500", fontSize: "15px" }}>
              <span style={{ marginRight: 16, opacity: .6, fontWeight: "500" }}>—  I</span>
              Manifeste
            </div>
            <h2 className="display">
              Des célébrations à votre image,<br />
              <em>pensées avec exigence.</em>
            </h2>
            <p>Nova Studio est né d’une envie simple : créer des événements qui se ressentent avant même de se raconter.</p>
            <p>Entre Méditerranée, architecture du Sud et esthétique intemporelle, nous imaginons des mariages et célébrations élégants, vivants et profondément personnels.</p>
            <p>On aime les expériences pensées avec soin, les lieux qui ont du caractère et les soirées qui donnent envie de prolonger la nuit.</p>
            <p>Nous croyons à la beauté discrète, aux ambiances sincères et aux événements qui ressemblent réellement à ceux qui les vivent.</p>
            <p>Basées à Marseille, nous accompagnons un nombre limité de projets chaque saison afin d’offrir une attention entière à chaque histoire.</p>
            <div className="signature">— Lucie &amp; Mina, Marseille</div>
          </div>
          <div className="manifesto-visual">
            <div className="tile tall" style={{ backgroundImage: `url(${IMG.manif1})` }} />
            <div className="tile" style={{ backgroundImage: `url(${IMG.manif2})` }} />
            <div className="tile" style={{ backgroundImage: `url(${IMG.manif3})` }} />
            <div className="photo-credit">Photo by Léa Nivet / neashoot</div>
          </div>
        </div>
      </div>
    </section>);

}

// ------- SERVICES -------
function Services() {
  return (
    <section className="section services" id="univers" data-screen-label="03 Univers">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ fontWeight: "500" }}><span style={{ marginRight: 16, opacity: .6 }}>— II</span>Accompagnement</div>
            <h2 className="display section-title">Deux façons de<br /><em style={{ color: 'var(--taupe)', fontWeight: 300 }}>nous confier le oui.</em></h2>
          </div>
          <p className="lede">Que vous souhaitiez être accompagnés à chaque étape ou simplement profiter de votre journée en toute sérénité, nous proposons un accompagnement adapté à vos besoins, avec la même attention portée à chaque détail.</p>
        </div>
        <div className="universes">
          {UNIVERS.map((u) => <article key={u.n} className="universe">
              <div className="universe-media">
                <img src={u.image} alt={u.title} loading="lazy" />
                <span className="universe-num">{u.n}</span>
                <span className="photo-credit">Photo by Léa Nivet / neashoot</span>
              </div>
              <div className="universe-body">
                <h3 className="display">{u.title}</h3>
                <p>{u.desc}</p>
              </div>
            </article>)}
        </div>
      </div>
    </section>);

}

// ------- PORTFOLIO -------
function Portfolio() {
  return (
    <section className="section portfolio" id="realisations" data-screen-label="04 Réalisations">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span style={{ marginRight: 16, opacity: .6 }}>— III</span>Réalisations</div>
            <h2 className="display section-title">Des oui<br /><em style={{ color: 'var(--taupe)', fontWeight: 300, fontStyle: 'italic' }}>que l'on n'oublie pas.</em></h2>
          </div>
          <p className="lede">
            Quelques instants de mariages récents, parés par respect
            pour l'intimité des couples qui nous ont fait confiance.
          </p>
        </div>
        <div className="gallery gallery-3">
          {PORTFOLIO.map((p, i) =>
          <div className="card" key={i}>
              <img src={p.img} alt={p.title} loading="lazy" />
              <div className="meta">
                <h4>{p.title}</h4>
                <span>{p.place} · {p.year}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ------- PROCESS -------
function Process() {
  return (
    <section className="section process" id="processus" data-screen-label="05 Processus">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ fontWeight: "500" }}><span style={{ marginRight: 16, opacity: .6 }}>— IV</span>Méthode</div>
            <h2 className="display section-title">Une expérience pensée <em style={{ color: 'var(--taupe)', fontWeight: 300 }}>dans les moindres détails.</em></h2>
          </div>
          <p className="lede">
            De la première conversation au dernier verre partagé,
            nous vous accompagnons avec exigence, fluidité et sens du détail
            afin de créer un événement aussi élégant qu’inoubliable.
          </p>
        </div>
        <div className="steps">
          {PROCESS.map((s) =>
          <div className="step" key={s.n}>
              <div className="step-num">{s.n}<em>/ {s.suffix}</em></div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ------- LOCATIONS -------
function Locations() {
  return (
    <section className="section locations" id="lieux" data-screen-label="06 Lieux">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ fontWeight: "500" }}><span style={{ marginRight: 16, opacity: .6 }}>— V</span>Lieux</div>
            <h2 className="display section-title">Mariages en<br /><em style={{ color: 'var(--taupe)', fontWeight: 300 }}>Provence et Côte d'Azur.</em></h2>
          </div>
          <p className="lede">Notre carnet d’adresses rassemble des domaines privés, maisons de caractère et lieux confidentiels à travers le Sud de la France, sélectionnés pour leur charme, leur lumière et l’atmosphère unique qu’ils offrent à chaque célébration.



          </p>
        </div>
        <div className="places">
          {LIEUX.map((l, i) =>
          <div
            className="place"
            key={l.name}
            style={{
              background: `linear-gradient(155deg, ${l.palette.from} 0%, ${l.palette.to} 100%)`,
              color: "var(--cream)"
            }}>
            
              {l.img && <img className="place-photo" src={l.img} alt={l.name} loading="lazy" onError={(e) => {e.target.style.display = 'none';e.target.closest('.place').classList.remove('has-photo');}} onLoad={(e) => e.target.closest('.place').classList.add('has-photo')} />}
              <svg className="place-texture" viewBox="0 0 200 280" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <pattern id={`p-${i}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
                    <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(255,255,255,0.18)" strokeWidth="0.5" />
                  </pattern>
                </defs>
                <rect width="200" height="280" fill={`url(#p-${i})`} />
              </svg>
              <div className="place-meta">
                <div className="place-top">
                  <span className="place-coord">{l.coord}</span>
                  <span className="place-num">0{i + 1}</span>
                </div>
                <div>
                  <h3 className="place-name">{l.name}</h3>
                  <div className="place-tag">{l.tag}</div>
                  <div className="place-note">{l.note}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ------- FAQ -------
function FaqSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq" id="faq" data-screen-label="07 FAQ">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, fontWeight: "500" }}><span style={{ marginRight: 16, opacity: .6 }}>— VI</span>FAQ</div>
            <h2 className="display" style={{ fontSize: 'clamp(34px, 4.4vw, 60px)', lineHeight: 1.05, margin: 0, maxWidth: "450px" }}>
              Vos questions<br />
              <em style={{ color: 'var(--taupe)', fontWeight: 300, fontStyle: 'italic' }}>les plus fréquentes...</em>
            </h2>
            <p className="lede" style={{ marginTop: 28, maxWidth: '34ch' }}>Et si la réponse n'est pas ici, écrivez-nous. Nous répondons sous 24h, toujours en personne.</p>
          </div>
          <div className="faq-list">
            {FAQ.map((f, i) =>
            <div
              key={i}
              className={"faq-item " + (open === i ? "open" : "")}
              onClick={() => setOpen(open === i ? -1 : i)}>
              
                <div className="faq-q">
                  <span>{f.q}</span>
                  <span className="plus" />
                </div>
                <div className="faq-a">
                  <p>{f.a}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ------- DEVIS -------
function Devis() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", date: "", place: "", desc: "" });
  const [mode, setMode] = useState("Coordination Jour J");
  const [guests, setGuests] = useState("50 – 100");
  const [budget, setBudget] = useState("");
  const [presta, setPresta] = useState([]);
  const [status, setStatus] = useState("idle"); // idle | sending | sent | error

  const submit = async (e) => {
    e.preventDefault();
    // ⚠️ Remplacez VOTRE_ID par l'identifiant de votre formulaire Formspree
    // (voir https://formspree.io — créez un formulaire, copiez l'URL fournie).
    const ENDPOINT = "https://formspree.io/f/xjgdyovn";

    const payload = {
      "Accompagnement": mode,
      "Prénom & Nom": form.name,
      "Email": form.email,
      "Téléphone": form.phone,
      "Date envisagée": form.date,
      "Nombre d'invités": guests,
      "Budget": budget,
      "Lieu": form.place,
      "Prestataires": presta.join(", "),
      "Message": form.desc,
      _subject: `Nouvelle demande de devis — ${form.name || "Nova Studio"}`
    };

    // Tant que l'identifiant n'est pas configuré, on simule un envoi réussi.
    if (ENDPOINT.includes("VOTRE_ID")) {
      setStatus("sent");
      setTimeout(() => setStatus("idle"), 4500);
      return;
    }

    setStatus("sending");
    try {
      const res = await fetch(ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(payload)
      });
      if (res.ok) {
        setStatus("sent");
        setForm({ name: "", email: "", phone: "", date: "", place: "", desc: "" });
        setPresta([]);
        setBudget("");
        setTimeout(() => setStatus("idle"), 5000);
      } else {
        setStatus("error");
      }
    } catch (err) {
      setStatus("error");
    }
  };

  const sent = status === "sent";

  const togglePresta = (p) =>
  setPresta((cur) => cur.includes(p) ? cur.filter((x) => x !== p) : [...cur, p]);

  const pickMode = (m) => {setMode(m);setPresta([]);setBudget("");};

  const GUESTS = ["Moins de 50", "50 – 100", "100 – 150", "Plus de 150"];

  const MODES = ["Coordination Jour J", "Design de A à Z"];
  const PRESTA_BY_MODE = {
    "Coordination Jour J": ["Photographe", "Vidéaste", "DJ / Live Music", "Fleuriste", "Maquillage", "Officiant", "Transport invités"],
    "Design de A à Z": ["Décoration", "Art floral", "Papeterie", "Art de table", "Mobilier", "Lighting design", "Photographe", "Vidéaste", "DJ / Live Music", "Officiant", "Installation sur mesure"]
  };
  const PRESTA_LABEL = {
    "Coordination Jour J": "Prestataires déjà réservés",
    "Design de A à Z": "Prestataires souhaités"
  };
  const LIEU_LABEL = {
    "Coordination Jour J": "Lieu choisi",
    "Design de A à Z": "Lieu recherché"
  };
  const LIEU_PLACEHOLDER = {
    "Coordination Jour J": "Domaine, château, lieu déjà réservé…",
    "Design de A à Z": "Provence, domaine privé, bord de mer…"
  };
  const BUDGET_BY_MODE = {
    "Coordination Jour J": ["< 1 500 €", "1 500 – 2 500 €", "2 500 – 4 000 €", "4 000 € +"],
    "Design de A à Z": ["< 5 000 €", "5 000 – 10 000 €", "10 000 – 20 000 €", "20 000 – 40 000 €", "40 000 – 80 000 €", "80 000 € +"]
  };
  const BUDGET_LABEL = {
    "Coordination Jour J": "Budget coordination",
    "Design de A à Z": "Budget global estimé"
  };
  const INTRO_BY_MODE = {
    "Coordination Jour J": "Vous avez imaginé votre mariage, nous veillons à ce que tout se déroule avec fluidité. Partagez-nous les premières lignes de votre projet, et orchestrons ensemble un jour J serein.",
    "Design de A à Z": "De la première idée au dernier détail, nous imaginons et orchestrons l'intégralité de votre mariage. Partagez-nous les premières lignes de votre projet, et créons ensemble une célébration entièrement à votre image."
  };

  return (
    <section className="section devis" id="contact" data-screen-label="08 Devis">
      <div className="wrap">
        <div className="devis-grid">
          <div className="devis-intro">
            <div className="eyebrow" style={{ marginBottom: 18 }}><span style={{ marginRight: 16, opacity: .6 }}>— VIII</span>Devis</div>
            <h2 className="display">
              Imaginons une<br />
              célébration <em>à<br />
              votre image.</em>
            </h2>
            <p className="devis-lede">{INTRO_BY_MODE[mode]}</p>
          </div>

          <div className="devis-figure">
            <img src="assets/devis.jpg" alt="Détails de préparatifs — Nova Studio" loading="lazy" />
            <span className="photo-credit">Photo by Léa Nivet / neashoot</span>
          </div>

          <form className="form" onSubmit={submit}>
            <div className="mode-select">
              <span className="mode-label">Quel accompagnement ?</span>
              <div className="mode-track">
                {MODES.map((m) =>
                <button type="button" key={m}
                className={"mode-pill " + (mode === m ? "active" : "")}
                onClick={() => pickMode(m)}>{m}</button>
                )}
              </div>
            </div>

            <div className="form-row two">
              <div className="field">
                <label>Prénom &amp; Nom</label>
                <input
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  placeholder="Camille Dubois"
                  required />
              </div>
              <div className="field">
                <label>Email</label>
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder="camille@email.fr"
                  required />
              </div>
            </div>

            <div className="form-row two">
              <div className="field">
                <label>Téléphone</label>
                <input
                  value={form.phone}
                  onChange={(e) => setForm({ ...form, phone: e.target.value })}
                  placeholder="06 12 34 56 78" />
              </div>
              <div className="field">
                <label>Date envisagée</label>
                <input
                  value={form.date}
                  onChange={(e) => setForm({ ...form, date: e.target.value })}
                  placeholder="Été 2026" />
              </div>
            </div>

            <div className="field">
              <label>Nombre d'invités</label>
              <div className="chips">
                {GUESTS.map((g) =>
                <button type="button" key={g}
                className={"chip " + (guests === g ? "active" : "")}
                onClick={() => setGuests(g)}>{g}</button>
                )}
              </div>
            </div>

            <div className="field">
              <label>{BUDGET_LABEL[mode]}</label>
              <div className="chips">
                {BUDGET_BY_MODE[mode].map((b) =>
                <button type="button" key={b}
                className={"chip " + (budget === b ? "active" : "")}
                onClick={() => setBudget(b)}>{b}</button>
                )}
              </div>
            </div>

            <div className="field">
              <label>{LIEU_LABEL[mode]}</label>
              <input
                value={form.place}
                onChange={(e) => setForm({ ...form, place: e.target.value })}
                placeholder={LIEU_PLACEHOLDER[mode]} />
            </div>

            <div className="field">
              <label>{PRESTA_LABEL[mode]} <em className="field-hint">— plusieurs choix possibles</em></label>
              <div className="chips">
                {PRESTA_BY_MODE[mode].map((p) =>
                <button type="button" key={p}
                className={"chip " + (presta.includes(p) ? "active" : "")}
                onClick={() => togglePresta(p)}>{p}</button>
                )}
              </div>
            </div>

            <div className="field">
              <label>Message libre</label>
              <textarea
                value={form.desc}
                onChange={(e) => setForm({ ...form, desc: e.target.value })}
                placeholder="Parlez-nous de votre vision, de l'ambiance imaginée ou des détails importants…" />
            </div>

            <button className="submit" type="submit" disabled={status === "sending"}>
              {status === "sending" ? "Envoi en cours…" :
              status === "sent" ? "Merci — nous revenons vers vous sous 48h" :
              status === "error" ? "Une erreur est survenue — réessayer" :
              "Envoyer la demande"}
              <span>→</span>
            </button>
            <p className="legal">
              En envoyant ce formulaire, vous acceptez d'être recontacté·e par Nova Studio.
              Aucune donnée n'est transmise à des tiers.
            </p>
          </form>
        </div>
      </div>
    </section>);

}

// ------- FOOTER -------
function Footer() {
  return (
    <footer>
      <div className="wrap foot">
        <div className="foot-grid">
          <div className="foot-brand">
            <img src="assets/nova-logo.png" alt="Nova Studio" className="brand-logo foot-logo" />
            <p className="foot-tagline">Créateur d'Expériences Elégantes .</p>
            <p className="foot-sub">Weddings • Private Events • South of France</p>
          </div>
          <div className="foot-signature">
            <span className="foot-sig-line" aria-hidden="true"></span>
            <p>Pensé dans le<br /><em>Sud de la France.</em></p>
          </div>
          <div className="foot-contact">
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:contact@novastudio.events">contact@novastudio.events</a></li>
              <li><a className="foot-insta" href="https://www.instagram.com/novastudio.events" target="_blank" rel="noopener"><InstagramIcon size={18} /><span>@novastudio.events</span></a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© Nova Studio 2026 — Marseille</span>
          <span className="foot-bottom-links">
            <a href="mentions-legales.html">Mentions légales</a>
            <a href="confidentialite.html">Politique de confidentialité</a>
          </span>
        </div>
      </div>
    </footer>);}
Object.assign(window, {
  Nav, TopStrip, Hero, Ribbon, Manifesto, Services, Portfolio, Process, Locations, FaqSection, Devis, Footer
});