/* Page sections */
const { useState: uS, useEffect: uE, useCallback: uC, useRef: uR } = React;

function Navbar() {
  const [scrolled, setScrolled] = uS(false);
  uE(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const isHome = (window.PAGE || "home") === "home";
  const links = [
    { label: "Accueil", href: "/" },
    { label: "À propos", href: "/about" },
    {
      label: "Traiteur",
      children: [
        { label: "Buffet", href: "/buffet" },
        { label: "Brunch", href: "/brunch" },
        { label: "Boîte à lunch", href: "/boite-a-lunch" },
        { label: "Chef à domicile", href: "/chef-a-domicile" },
      ],
    },
    { label: "FAQ", href: "/faq" },
  ];
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a className="nav-mark nav-mark-img" href="/" aria-label="KG Delight accueil">
          <img src="/images/logo.png" alt="KG Delight — Traiteur événementiel" />
        </a>
        <ul className="nav-links">
          {links.map(l => (
            l.children ? (
              <li key={l.label} className="nav-group">
                <span className="nav-link nav-group-trigger">{l.label}</span>
                <ul className="nav-submenu">
                  {l.children.map(c => (
                    <li key={c.href}>
                      <a className="nav-link" href={c.href}>{c.label}</a>
                    </li>
                  ))}
                </ul>
              </li>
            ) : (
              <li key={l.href}>
                <a className="nav-link" href={l.href}>{l.label}</a>
              </li>
            )
          ))}
        </ul>
        <div className="nav-right">
          <a className="nav-phone" href="tel:+14388824226">438·882·4226</a>
          <a className="link-u" href="/contact">Contact</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const [i, setI] = uS(0);
  const n = HERO_SLIDES.length;
  const next = uC(() => setI(v => (v + 1) % n), [n]);
  const prev = uC(() => setI(v => (v - 1 + n) % n), [n]);
  uE(() => {
    const id = setInterval(next, 7500);
    return () => clearInterval(id);
  }, [next]);
  return (
    <section className="hero" id="hero">
      {HERO_SLIDES.map((s, idx) => (
        <div key={idx} className={`hero-slide ${idx === i ? "active" : ""}`}>
          <div className="bg" style={{ backgroundImage: `url('${s.image}')` }} />
          <div className="veil" />
        </div>
      ))}
      <CornerOrnaments />
      <div className="hero-content">
        <div className="hero-lockup hero-lockup-img">
          <img className="hero-logo" src="images/logo.png" alt="KG Delight — Traiteur événementiel" />
        </div>
        <p className="hero-caption">{HERO_SLIDES[i].caption}</p>
        <a className="btn btn-gold" href="#services">Découvrir</a>
      </div>
      <button className="hero-arrow left" onClick={prev} aria-label="Précédent"><Chevron dir="left" /></button>
      <button className="hero-arrow right" onClick={next} aria-label="Suivant"><Chevron dir="right" /></button>
      <div className="hero-dots">
        {HERO_SLIDES.map((_, idx) => (
          <button key={idx} className={`hero-dot ${idx === i ? "active" : ""}`} onClick={() => setI(idx)} aria-label={`Slide ${idx+1}`} />
        ))}
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section about" id="about">
      <span className="circle-pattern" style={{ width: 360, height: 360, bottom: -180, left: -180 }} />
      <span className="circle-pattern" style={{ width: 220, height: 220, top: -110, right: -110, opacity: .6 }} />
      <div className="section-wide about-grid">
        <Reveal>
          <p className="eyebrow-serif">Notre histoire</p>
          <h2 className="f-display" style={{ fontSize: "clamp(34px,3.8vw,52px)", margin: "14px 0 20px" }}>
            La vie est courte.<br/>Le temps est précieux.
          </h2>
          <span className="dbl-rule" />
          <p className="about-body">
            Il faut savoir immortaliser chaque instant précieux que vous pouvez passer avec vos proches.
            Quoi de mieux qu'un bon repas partagé avec vos êtres chers.
          </p>
          <p className="about-body" style={{ marginTop: -8 }}>
            Fondée en 2019 par <span style={{ color: "var(--paper)" }}>Kimberly Corvil</span>, diplômée de l'ITHQ,
            KG Delight est une entreprise spécialisée dans le domaine de la restauration qui vous offre
            de multiples possibilités pour vivre vos plus beaux moments — dans la Grande région de Montréal.
          </p>
          <div className="about-signature">Kimberly</div>
          <p className="eyebrow" style={{ marginTop: 10 }}>Fondatrice · Cheffe · ITHQ</p>
        </Reveal>
        <Reveal delay={160}>
          <div className="about-bento">
            {BENTO.map(b => (
              <div key={b.area} className="bento-cell img-reveal" style={{ gridArea: b.area }}>
                <div className="bg" style={{ backgroundImage: `url('${b.src}')` }} />
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Marquee() {
  const words = [
    { text: "TRAITEUR" }, { text: "Chef à domicile", alt: true },
    { text: "BRUNCH" }, { text: "Bouchées", alt: true },
    { text: "BUFFET" }, { text: "Grignotines", alt: true },
    { text: "CORPORATIF" }, { text: "Mariage", alt: true },
  ];
  const track = [...words, ...words];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {track.map((w, idx) => (
          <span key={idx} className={w.alt ? "alt" : ""}>
            {w.text}{" "}<span className="diamond-dot" />
          </span>
        ))}
      </div>
    </div>
  );
}

const SERVICE_SLUGS = {
  "01": "/chef-a-domicile",
  "02": "/brunch",
  "03": "/buffet",
  "04": "/boite-a-lunch",
};

const SERVICE_DETAILS = {
  "01": {
    included: ["Menu personnalisé 3 à 5 services", "Chef & commis en cuisine", "Dressage à l'assiette", "Mise en place & ménage"],
    min: "6 convives",
    price: "Sur devis",
  },
  "02": {
    included: ["Viennoiseries & pains frais", "Œufs, frittata, pommes de terre", "Plateau de charcuteries & fromages", "Fruits, yogourt, douceurs"],
    min: "10 personnes",
    price: "Dès 28$/pers.",
  },
  "03": {
    included: ["Entrées froides & salades", "Plats chauds (viande · poisson · végé)", "Riz, pâtes, légumes de saison", "Station de desserts"],
    min: "25 personnes",
    price: "Dès 42$/pers.",
  },
  "04": {
    included: ["Boîtes à lunch individuelles", "Tables de grignotines", "Bouchées 5 à 7", "Livraison au bureau"],
    min: "10 boîtes",
    price: "Dès 18$/pers.",
  },
};

function Services() {
  const [active, setActive] = uS(SERVICES[0].num);
  const current = SERVICES.find(s => s.num === active);
  const details = SERVICE_DETAILS[active];
  return (
    <section className="section services-v2" id="services">
      <HeadingBlock
        eyebrow="Ce que nous faisons"
        title="Nos services"
        subtitle="Quatre manières de recevoir, une seule signature. Chaque formule est bâtie avec vous — du menu à la logistique."
      />

      <div className="section-wide svc-wrap">
        {/* Left: feature image + number */}
        <Reveal className="svc-feature">
          <div className="svc-feature-img" key={active} style={{ backgroundImage: `url('${current.image}')` }}>
            <div className="svc-feature-veil" />
            <span className="svc-feature-num">{active}</span>
            <div className="svc-feature-meta">
              <p className="eyebrow-serif" style={{ color: "var(--gold)" }}>{current.tag}</p>
              <h3 className="f-display" style={{ fontSize: "clamp(28px,2.8vw,42px)", color: "var(--paper)", margin: "10px 0" }}>{current.title}</h3>
              <p className="f-serif-it" style={{ color: "rgba(243,237,224,.8)", fontSize: 17, lineHeight: 1.55, maxWidth: 420 }}>{current.blurb}</p>
            </div>
          </div>
        </Reveal>

        {/* Right: list + details */}
        <div className="svc-right">
          <ul className="svc-list">
            {SERVICES.map((s) => {
              const on = s.num === active;
              return (
                <li key={s.num} className={`svc-row ${on ? "on" : ""}`} onMouseEnter={() => setActive(s.num)} onClick={() => setActive(s.num)}>
                  <span className="svc-row-num">{s.num}</span>
                  <div className="svc-row-body">
                    <h4 className="svc-row-title">{s.title}</h4>
                    <p className="svc-row-tag">{s.tag}</p>
                  </div>
                  <span className="svc-row-arrow" aria-hidden>
                    <svg width="22" height="10" viewBox="0 0 22 10" fill="none" stroke="currentColor" strokeWidth="1"><path d="M0 5 H20 M15 1 L21 5 L15 9" /></svg>
                  </span>
                </li>
              );
            })}
          </ul>

          <div className="svc-details" key={active}>
            <div className="svc-details-row">
              <span className="eyebrow" style={{ color: "var(--paper-dim)" }}>Inclus</span>
              <div className="svc-includes">
                {details.included.map((x, i) => (
                  <span key={i} className="svc-chip">
                    <span className="svc-chip-dot" /> {x}
                  </span>
                ))}
              </div>
            </div>
            <div className="svc-details-foot svc-details-foot-cta">
              <a className="btn btn-gold svc-cta" href="/contact">Demander une soumission</a>
              <a className="link-u" style={{ marginLeft: 20 }} href={SERVICE_SLUGS[active]}>En savoir plus →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="section quote">
      <CornerOrnaments />
      <div className="section-narrow">
        <Reveal>
          <p className="eyebrow-serif">Quelques mots</p>
          <span className="dbl-rule" style={{ marginTop: 20 }} />
          <p className="body f-serif-it">"{QUOTE.body}"</p>
          <div className="sig">{QUOTE.sig}</div>
        </Reveal>
      </div>
    </section>
  );
}

function SignatureDish() {
  return (
    <section className="section signature-dish">
      <div className="section-wide sd-grid">
        <Reveal>
          <div className="sd-image" style={{ backgroundImage: "url('images/entree-bouchee.jpg')" }}>
            <div className="badge">
              <svg width="100" height="100" viewBox="0 0 100 100">
                <defs><path id="badgeCircle" d="M 50,50 m -36,0 a 36,36 0 1,1 72,0 a 36,36 0 1,1 -72,0" fill="none" /></defs>
                <text fontFamily="Montserrat" fontSize="8" letterSpacing="3" fill="#C9C3B0">
                  <textPath href="#badgeCircle">SIGNATURE · SIGNATURE · SIGNATURE · </textPath>
                </text>
              </svg>
              <svg style={{ position: "absolute" }} width="18" height="18" viewBox="0 0 10 10">
                <path d="M5 0 L6 4 L10 5 L6 6 L5 10 L4 6 L0 5 L4 4 Z" fill="#C9C3B0" />
              </svg>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p className="eyebrow-serif">Le plat signature</p>
          <h2 className="f-display" style={{ fontSize: "clamp(32px,3.4vw,48px)", margin: "14px 0 18px" }}>
            Croquettes <br/>
            <span className="f-serif-it" style={{ color: "var(--gold)", textTransform: "none", letterSpacing: 0, fontSize: ".7em" }}>
              à la brésilienne
            </span>
          </h2>
          <span className="dbl-rule" />
          <p className="about-body">
            Chapelure dorée, cœur moelleux, crevette tempura et mayo sriracha maison.
            Un plat qui revient à chaque table — parce qu'on nous le redemande, toujours.
          </p>
          <p className="about-body" style={{ marginTop: -8 }}>
            Servi en entrée au chef à domicile, en bouchées pour vos 5 à 7,
            ou en plat principal pour les réceptions intimes.
          </p>
          <a className="link-u" href="#contact" style={{ marginTop: 12 }}>Nous contacter</a>
        </Reveal>
      </div>
    </section>
  );
}

function Menu_UNUSED() {
  const [tab, setTab] = uS("chef");
  const sections = MENUS[tab];
  return (
    <section className="section menu" id="menu">
      <HeadingBlock
        eyebrow="Ce que l'on sert"
        title="From our menu"
        subtitle="Un point de départ, jamais une contrainte. Chaque menu est bâti autour de vos convives, vos goûts et vos allergies."
      />
      <div className="section-wide" style={{ marginTop: 40 }}>
        <div className="menu-tabs">
          {MENU_TABS.map(t => (
            <button
              key={t.key}
              className={`menu-tab ${tab === t.key ? "active" : ""}`}
              onClick={() => setTab(t.key)}
            >
              {t.label}
            </button>
          ))}
        </div>
        <Reveal key={tab}>
          <div className="menu-grid">
            {sections.map((s, idx) => (
              <div className="menu-section" key={idx}>
                <h4>{s.heading}</h4>
                {s.items.map((it, j) => (
                  <div className="menu-item" key={j}>
                    <div className="top">
                      <span className="name">{it.name}</span>
                      {it.note && <><span className="dots" /><span className="note">{it.note}</span></>}
                    </div>
                    {it.desc && <div className="desc">{it.desc}</div>}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </Reveal>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <a className="btn btn-gold" href="#reserve">Demander un devis</a>
        </div>
      </div>
    </section>
  );
}

function Chef() {
  return (
    <section className="section chef" id="chef">
      <div className="section-wide chef-grid">
        <Reveal>
          <div className="chef-img" style={{ backgroundImage: "url('images/chef-1.jpg')" }} />
        </Reveal>
        <Reveal delay={120}>
          <p className="eyebrow-serif">La fondatrice</p>
          <h2 className="f-display" style={{ fontSize: "clamp(30px,3.2vw,46px)", margin: "14px 0 16px" }}>
            Kimberly Corvil
          </h2>
          <span className="dbl-rule" />
          <p className="chef-body">
            Montréalaise, diplômée de l'Institut de tourisme et d'hôtellerie du Québec (ITHQ).
            Kimberly a fondé KG Delight en 2019 avec une conviction simple :
            un repas partagé est un souvenir qui ne s'efface pas.
          </p>
          <p className="chef-body" style={{ marginTop: -8 }}>
            De la formation rigoureuse de l'ITHQ aux cuisines des plus beaux événements de la Grande région de Montréal,
            elle bâtit chaque menu autour de ses clients — cuisine soignée, produits d'ici et service attentif,
            au gré des saisons québécoises.
          </p>
          <div className="chef-stats">
            <div className="chef-stat">
              <div className="num">07</div>
              <div className="lbl">Années<br/>de service</div>
            </div>
            <div className="chef-stat">
              <div className="num">250+</div>
              <div className="lbl">Événements<br/>livrés</div>
            </div>
            <div className="chef-stat">
              <div className="num">04</div>
              <div className="lbl">Formules<br/>sur mesure</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section className="section gallery" id="gallery">
      <HeadingBlock
        eyebrow="Quelques images"
        title="Our moments"
        subtitle="Des tables, des mains, des assiettes — l'essentiel de ce que l'on fait."
      />
      <div className="section-wide">
        <div className="gallery-grid">
          {GALLERY.map((src, idx) => (
            <Reveal key={idx} delay={(idx % 4) * 80}>
              <div className={`gallery-cell img-reveal ${idx === 1 || idx === 5 ? "" : ""}`}>
                <div className="bg" style={{ backgroundImage: `url('${src}')` }} />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Reserve_UNUSED() {
  const [form, setForm] = uS({
    name: "", email: "", phone: "",
    service: "chef", date: "", guests: "10", message: "",
  });
  const [submitted, setSubmitted] = uS(false);
  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section className="section reserve" id="reserve">
        <div className="section-narrow">
          <HeadingBlock
            eyebrow="Merci"
            title="Demande reçue"
            subtitle={`${form.name.split(" ")[0]}, nous revenons vers vous dans les 24h avec une proposition sur mesure.`}
          />
          <div className="reserve-success">
            <div className="t">À très bientôt</div>
            <div className="s">
              Un membre de l'équipe KG Delight vous contactera à {form.email || "votre adresse"} pour finaliser votre {MENU_TABS.find(t => t.key === form.service)?.label.toLowerCase()}.
            </div>
          </div>
          <div style={{ textAlign: "center", marginTop: 32 }}>
            <button className="btn" onClick={() => { setSubmitted(false); setForm({ name: "", email: "", phone: "", service: "chef", date: "", guests: "10", message: "" }); }}>
              Nouvelle demande
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section reserve" id="reserve">
      <HeadingBlock
        eyebrow="Parlons de votre événement"
        title="Book a table"
        subtitle="Un formulaire court — puis une conversation. Tous les détails se règlent ensemble."
      />
      <form className="reserve-form" onSubmit={submit}>
        <Reveal as="div" className="field">
          <label>Nom complet</label>
          <input type="text" required value={form.name} onChange={upd("name")} placeholder="Marie Tremblay" />
        </Reveal>
        <Reveal as="div" className="field" delay={60}>
          <label>Courriel</label>
          <input type="email" required value={form.email} onChange={upd("email")} placeholder="marie@exemple.ca" />
        </Reveal>
        <Reveal as="div" className="field">
          <label>Téléphone</label>
          <input type="tel" value={form.phone} onChange={upd("phone")} placeholder="514 555 0123" />
        </Reveal>
        <Reveal as="div" className="field" delay={60}>
          <label>Type de service</label>
          <select value={form.service} onChange={upd("service")}>
            {MENU_TABS.map(t => <option key={t.key} value={t.key}>{t.label}</option>)}
          </select>
        </Reveal>
        <Reveal as="div" className="field">
          <label>Date souhaitée</label>
          <input type="date" value={form.date} onChange={upd("date")} />
        </Reveal>
        <Reveal as="div" className="field" delay={60}>
          <label>Nombre de convives</label>
          <input type="number" min="1" value={form.guests} onChange={upd("guests")} />
        </Reveal>
        <Reveal as="div" className="field wide">
          <label>Message</label>
          <textarea rows="3" value={form.message} onChange={upd("message")} placeholder="Allergies, lieu, style de réception, budget approximatif…" />
        </Reveal>
        <div className="reserve-submit" style={{ gridColumn: "1 / -1" }}>
          <button className="btn btn-gold" type="submit">Envoyer la demande</button>
        </div>
      </form>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="site-footer">
      <div className="footer-mark footer-mark-img">
        <img src="/images/logo.png" alt="KG Delight — Traiteur événementiel" />
      </div>
      <div className="footer-info">
        Traiteur événementiel · Grand Montréal
      </div>
      <div className="footer-info">
        <a href="tel:+14388824226">438 882 4226</a>
        <span className="sep">·</span>
        <a href="mailto:info@kg-delight.com">info@kg-delight.com</a>
      </div>
      <div className="footer-links">
        <a href="/contact">Contact</a>
        <a href="https://www.instagram.com/kg.delight/" target="_blank" rel="noopener noreferrer">Instagram</a>
        <a href="/about">À propos</a>
        <a href="/faq">FAQ</a>
      </div>
      <div className="footer-copy">© {new Date().getFullYear()} KG Delight Inc · Tous droits réservés</div>
    </footer>
  );
}

Object.assign(window, { Navbar, Hero, About, Marquee, Services, Quote, SignatureDish, Chef, Gallery, Footer });