/* Multi-page components: About, Services, Contact, FAQ */

function PageBanner({ eyebrow, title, subtitle, image }) {
  return (
    <section className="page-banner" style={{ position: "relative", minHeight: 440, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", marginTop: 80 }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: `url('${image}')`, backgroundSize: "cover", backgroundPosition: "center" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(rgba(31,31,33,0.55), rgba(31,31,33,0.85))" }} />
      <CornerOrnaments />
      <div style={{ position: "relative", textAlign: "center", padding: "80px 24px", maxWidth: 900 }}>
        {eyebrow && <p className="eyebrow-serif">{eyebrow}</p>}
        <h1 className="f-display" style={{ fontSize: "clamp(32px,4.2vw,56px)", margin: "14px 0 18px", color: "var(--paper)" }}>{title}</h1>
        <span className="dbl-rule" />
        {subtitle && <p className="f-serif-it" style={{ fontSize: 18, color: "rgba(243,237,224,.85)", marginTop: 20, lineHeight: 1.7 }}>{subtitle}</p>}
      </div>
    </section>
  );
}

function TextSection({ eyebrow, title, children, narrow = false, bg = "var(--bg)" }) {
  return (
    <section className="section" style={{ background: bg }}>
      <div className={narrow ? "section-narrow" : "section-wide"}>
        <Reveal>
          {eyebrow && <p className="eyebrow-serif">{eyebrow}</p>}
          {title && (
            <>
              <h2 className="f-display" style={{ fontSize: "clamp(28px,3.2vw,44px)", margin: "14px 0 18px" }}>{title}</h2>
              <span className="dbl-rule" />
            </>
          )}
          <div style={{ marginTop: title ? 24 : 0 }}>{children}</div>
        </Reveal>
      </div>
    </section>
  );
}

function CtaBand({ heading, body, href = "/contact", label = "Demander une soumission" }) {
  return (
    <section className="section" style={{ background: "var(--bg-4)" }}>
      <div className="section-narrow" style={{ textAlign: "center" }}>
        <Reveal>
          <h2 className="f-display" style={{ fontSize: "clamp(28px,3vw,40px)", margin: "0 0 16px" }}>{heading}</h2>
          <span className="dbl-rule" />
          {body && <p className="about-body" style={{ marginTop: 22, maxWidth: 640, marginLeft: "auto", marginRight: "auto" }}>{body}</p>}
          <div style={{ marginTop: 32 }}>
            <a className="btn btn-gold" href={href}>{label}</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ======================= ABOUT ======================= */
function AboutPage() {
  return (
    <>
      <Navbar />
      <PageBanner
        eyebrow="Notre histoire"
        title="La vie est courte. Le temps est précieux."
        subtitle="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."
        image="images/hero-2.png"
      />
      <TextSection eyebrow="Rencontrez Kimberly" title="La cheffe derrière KG Delight">
        <p className="about-body">
          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="about-body" style={{ marginTop: 16 }}>
          De la formation rigoureuse de l'ITHQ aux cuisines des plus beaux événements de la Grande région de Montréal,
          elle a bâti KG Delight autour d'une idée — offrir à chaque client une cuisine soignée, des produits d'ici
          et une expérience à la hauteur du moment qu'il célèbre.
        </p>
      </TextSection>

      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="section-wide">
          <HeadingBlock eyebrow="Ce qui nous définit" title="Nos valeurs" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 40, marginTop: 48 }}>
            <Reveal>
              <p className="eyebrow">Produits locaux</p>
              <h3 className="f-display" style={{ fontSize: 22, margin: "12px 0" }}>Fournisseurs d'ici</h3>
              <p className="about-body" style={{ fontSize: 15 }}>Des fournisseurs québécois chaque fois que c'est possible. Des saveurs qui parlent d'ici.</p>
            </Reveal>
            <Reveal delay={100}>
              <p className="eyebrow">Fait main</p>
              <h3 className="f-display" style={{ fontSize: 22, margin: "12px 0" }}>Cuisine soignée</h3>
              <p className="about-body" style={{ fontSize: 15 }}>Rien de sous-traité. Tout est préparé par notre équipe, avec le soin d'une cheffe formée à l'ITHQ.</p>
            </Reveal>
            <Reveal delay={200}>
              <p className="eyebrow">Service attentif</p>
              <h3 className="f-display" style={{ fontSize: 22, margin: "12px 0" }}>Un seul interlocuteur</h3>
              <p className="about-body" style={{ fontSize: 15 }}>Kimberly vous accompagne personnellement, du premier courriel au dernier plat servi.</p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section chef" id="chef">
        <div className="section-wide chef-grid">
          <Reveal>
            <div className="chef-img" style={{ backgroundImage: "url('images/chef-2.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).
              Son credo : recevoir comme on reçoit ses proches. Son terrain de jeu : la cuisine d'inspiration
              française, caribéenne et méditerranéenne, 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>

      <CtaBand heading="Planifions votre prochain événement" body="Parlez-nous de votre projet — nous vous répondons personnellement en moins de 48 h." />
      <Footer />
    </>
  );
}

/* ======================= SERVICE PAGES ======================= */
const SERVICE_PAGE_DATA = {
  buffet: {
    eyebrow: "Service",
    title: "Buffet",
    tagline: "Pour vos grandes tablées",
    subtitle: "Entrées fines, plats chauds, salades fraîches et desserts gourmands — un buffet qui transforme vos réceptions en véritables moments de partage.",
    image: "images/svc-buffet.jpg",
    image2: "images/dish-charcut.jpg",
    included: [
      "Menu personnalisé à votre événement",
      "Cuisine préparée à la main par notre équipe",
      "Dressage professionnel et plateaux de service",
      "Livraison dans la Grande région de Montréal",
      "Options végétariennes, véganes et sans allergènes sur demande",
    ],
    ideal: "Mariages, anniversaires marquants, baptêmes, réceptions familiales, événements corporatifs de 25 personnes et plus.",
    priceNote: "Dès 42$ / personne · minimum 25 convives",
    menuKey: "buffet",
  },
  brunch: {
    eyebrow: "Service",
    title: "Brunch",
    tagline: "Un dimanche qui devient un événement",
    subtitle: "Viennoiseries dorées, plats chauds réconfortants, fruits frais et boissons matinales — un brunch pour vos rassemblements les plus doux.",
    image: "images/svc-brunch.jpg",
    image2: "images/brunch-spread-1.jpg",
    included: [
      "Menu chaud et froid personnalisé",
      "Viennoiseries et pains préparés à la main",
      "Plateaux de fruits frais et produits laitiers",
      "Café, thé, jus et mimosas sur demande",
      "Service jusqu'à midi passé, livraison GRM",
    ],
    ideal: "Douches de bébé, douches nuptiales, matinées corporatives, rassemblements familiaux, brunchs de fête.",
    priceNote: "Dès 28$ / personne · minimum 10 convives",
    menuKey: "brunch",
  },
  "boite-a-lunch": {
    eyebrow: "Service",
    title: "Boîte à lunch",
    tagline: "Livrée prête à servir",
    subtitle: "Du repas de réunion au 5 à 7, la boîte à lunch KG Delight est livrée prête à servir — chaque portion scellée individuellement, pensée pour que vos invités se concentrent sur l'essentiel.",
    image: "images/svc-lunch.jpg",
    image2: "images/bouchees-sliders.jpg",
    included: [
      "Boîte individuelle scellée (sandwich ou plat principal, accompagnement, dessert)",
      "Options végétariennes, véganes et sans gluten sans supplément",
      "Étiquetage allergènes pour chaque boîte",
      "Livraison dans la Grande région de Montréal",
      "Commande minimum : 10 personnes",
    ],
    ideal: "Formations, conférences, réunions corporatives, journées d'équipe, lancements et tout événement où chaque invité mérite son propre repas soigné.",
    priceNote: "Dès 18$ / personne · minimum 10 boîtes",
    menuKey: "corpo",
  },
  "chef-a-domicile": {
    eyebrow: "Service",
    title: "Chef à domicile",
    tagline: "Votre cuisine, transformée en restaurant",
    subtitle: "Kimberly vient chez vous avec son savoir-faire — menu conçu à deux, préparation sur place, service à table. Vous recevez, nous cuisinons.",
    image: "images/svc-chef.jpg",
    image2: "images/plat-saumon-pistache.jpg",
    included: [
      "Menu sur mesure conçu avec vous (3 à 7 services)",
      "Achat des produits frais et locaux",
      "Cuisson et finition sur place dans votre cuisine",
      "Service à table par notre équipe",
      "Nettoyage de la cuisine avant notre départ",
    ],
    ideal: "Soupers intimes, anniversaires marquants, demandes en mariage, anniversaires de couple, célébrations privées de 2 à 12 convives.",
    priceNote: "Sur devis · à partir de 6 convives",
    menuKey: "chef",
  },
};

function ServicePage({ slug }) {
  const d = SERVICE_PAGE_DATA[slug];
  if (!d) return <>Service introuvable</>;
  const menu = MENUS[d.menuKey] || [];
  return (
    <>
      <Navbar />
      <PageBanner eyebrow={d.eyebrow} title={d.title} subtitle={d.subtitle} image={d.image} />

      <section className="section" style={{ background: "var(--bg)" }}>
        <div className="section-wide" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 60 }}>
          <Reveal>
            <p className="eyebrow-serif">{d.tagline}</p>
            <h2 className="f-display" style={{ fontSize: "clamp(26px,2.8vw,38px)", margin: "14px 0 18px" }}>Ce qui est inclus</h2>
            <span className="dbl-rule" />
            <ul style={{ listStyle: "none", padding: 0, marginTop: 28 }}>
              {d.included.map((item, i) => (
                <li key={i} style={{ padding: "12px 0", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "flex-start", gap: 14 }}>
                  <span style={{ width: 6, height: 6, background: "var(--gold)", borderRadius: "50%", marginTop: 10, flexShrink: 0 }} />
                  <span className="about-body" style={{ fontSize: 15 }}>{item}</span>
                </li>
              ))}
            </ul>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ backgroundImage: `url('${d.image2 || d.image}')`, backgroundSize: "cover", backgroundPosition: "center", minHeight: 360, borderRadius: 4 }} />
            <div style={{ marginTop: 28, padding: "24px 28px", border: "1px solid var(--border-gold)", background: "var(--bg-2)" }}>
              <p className="eyebrow" style={{ color: "var(--gold)" }}>Tarif indicatif</p>
              <p className="f-serif-it" style={{ fontSize: 18, marginTop: 10 }}>{d.priceNote}</p>
            </div>
          </Reveal>
        </div>
      </section>

      <TextSection eyebrow="Pour qui" title="Idéal pour" narrow bg="var(--bg-2)">
        <p className="about-body" style={{ fontSize: 17 }}>{d.ideal}</p>
      </TextSection>

      {menu.length > 0 && (
        <section className="section menu" style={{ background: "var(--bg)" }}>
          <HeadingBlock eyebrow="Un aperçu" title="Exemples du menu" subtitle="Un point de départ, jamais une contrainte. Chaque menu est bâti autour de vos convives." />
          <div className="section-wide" style={{ marginTop: 40 }}>
            <div className="menu-grid">
              {menu.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>
          </div>
        </section>
      )}

      <CtaBand heading={`Prêt à planifier votre ${d.title.toLowerCase()} ?`} body="Partagez-nous la date, le nombre de convives et vos préférences — nous vous préparons une soumission sur mesure." />
      <Footer />
    </>
  );
}

/* ======================= CONTACT ======================= */
const SERVICE_OPTIONS = ["Brunch", "Buffet", "Cocktail Dinatoire", "Chef-à-domicile", "Boîtes à lunch Corporative"];
const INSTALLATION_OPTIONS = ["Cuisine", "Réfrigérateur", "Évier", "Monte charge"];

function ContactPage() {
  const [form, setForm] = uS({
    name: "", company: "", phone: "", email: "",
    date: "", location: "", time: "",
    service: "", guests: "",
    installations: [],
    message: "",
  });
  const [submitted, setSubmitted] = uS(false);
  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const toggleInstall = (opt) => () =>
    setForm(f => ({
      ...f,
      installations: f.installations.includes(opt)
        ? f.installations.filter(x => x !== opt)
        : [...f.installations, opt],
    }));
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.phone || !form.date || !form.location || !form.time || !form.service || !form.guests) return;
    const subject = `Demande de soumission — ${form.service}`;
    const body =
      `Nom complet : ${form.name}\n` +
      `Entreprise : ${form.company || "—"}\n` +
      `Téléphone : ${form.phone}\n` +
      `Courriel : ${form.email}\n` +
      `Date de l'événement : ${form.date}\n` +
      `Lieu : ${form.location}\n` +
      `Heure de début : ${form.time}\n` +
      `Type de service : ${form.service}\n` +
      `Nombre de personnes : ${form.guests}\n` +
      `Installations sur place : ${form.installations.length ? form.installations.join(", ") : "—"}\n\n` +
      `Message : ${form.message || "—"}`;
    window.location.href = `mailto:info@kg-delight.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSubmitted(true);
  };
  return (
    <>
      <Navbar />
      <PageBanner
        eyebrow="Planifions votre événement"
        title="Parlez-nous de votre projet"
        subtitle="Date, nombre d'invités, type de service souhaité — Kimberly vous répond personnellement en moins de 48 h."
        image="images/hero-4.png"
      />

      <section className="section" style={{ background: "var(--bg)" }}>
        <div className="section-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60 }}>
          <Reveal>
            <p className="eyebrow-serif">Coordonnées</p>
            <h2 className="f-display" style={{ fontSize: "clamp(24px,2.6vw,34px)", margin: "14px 0 18px" }}>Rejoignez-nous</h2>
            <span className="dbl-rule" />
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 20 }}>
              <div>
                <p className="eyebrow">Courriel</p>
                <a className="link-u" href="mailto:info@kg-delight.com" style={{ fontSize: 17, marginTop: 6, display: "inline-block" }}>info@kg-delight.com</a>
              </div>
              <div>
                <p className="eyebrow">Téléphone</p>
                <a className="link-u" href="tel:+14388824226" style={{ fontSize: 17, marginTop: 6, display: "inline-block" }}>438 882 4226</a>
              </div>
              <div>
                <p className="eyebrow">Zone desservie</p>
                <p className="about-body" style={{ fontSize: 15, marginTop: 6 }}>Grande région de Montréal — Montréal, Laval, Rive-Nord et Rive-Sud.</p>
              </div>
              <div>
                <p className="eyebrow">Délai de réponse</p>
                <p className="about-body" style={{ fontSize: 15, marginTop: 6 }}>Moins de 48 h en semaine.</p>
              </div>
              <div>
                <p className="eyebrow">Instagram</p>
                <a className="link-u" href="https://www.instagram.com/kg.delight/" target="_blank" rel="noopener noreferrer" style={{ fontSize: 17, marginTop: 6, display: "inline-block" }}>@kg.delight</a>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            {submitted ? (
              <div style={{ padding: 32, border: "1px solid var(--border-gold)", background: "var(--bg-2)" }}>
                <p className="eyebrow-serif">Demande envoyée</p>
                <h3 className="f-display" style={{ fontSize: 24, margin: "12px 0" }}>Merci !</h3>
                <p className="about-body">Votre courriel vient de s'ouvrir. Dès que vous l'envoyez, nous revenons vers vous dans les 48 h.</p>
              </div>
            ) : (
              <form className="reserve-form" onSubmit={submit} style={{ gridTemplateColumns: "1fr 1fr" }}>
                <div className="field"><label>Nom complet *</label><input type="text" required value={form.name} onChange={upd("name")} placeholder="Marie Tremblay" /></div>
                <div className="field"><label>Entreprise (si applicable)</label><input type="text" value={form.company} onChange={upd("company")} placeholder="—" /></div>
                <div className="field"><label>Téléphone *</label><input type="tel" required value={form.phone} onChange={upd("phone")} placeholder="514 555 0123" /></div>
                <div className="field"><label>Courriel *</label><input type="email" required value={form.email} onChange={upd("email")} placeholder="marie@exemple.ca" /></div>
                <div className="field"><label>Date de l'événement *</label><input type="date" required value={form.date} onChange={upd("date")} /></div>
                <div className="field"><label>Lieu de l'événement *</label><input type="text" required value={form.location} onChange={upd("location")} placeholder="Adresse ou ville" /></div>
                <div className="field"><label>Heure de début *</label><input type="time" required value={form.time} onChange={upd("time")} /></div>
                <div className="field"><label>Nombre de personnes *</label><input type="number" min="1" required value={form.guests} onChange={upd("guests")} placeholder="25" /></div>
                <div className="field wide">
                  <label>Type de service traiteur *</label>
                  <div className="field-choices">
                    {SERVICE_OPTIONS.map(opt => (
                      <label key={opt} className="choice">
                        <input type="radio" name="service" value={opt} required checked={form.service === opt} onChange={upd("service")} />
                        <span>{opt}</span>
                      </label>
                    ))}
                  </div>
                </div>
                <div className="field wide">
                  <label>Installations sur place</label>
                  <div className="field-choices">
                    {INSTALLATION_OPTIONS.map(opt => (
                      <label key={opt} className="choice">
                        <input type="checkbox" checked={form.installations.includes(opt)} onChange={toggleInstall(opt)} />
                        <span>{opt}</span>
                      </label>
                    ))}
                  </div>
                </div>
                <div className="field wide"><label>Message</label><textarea rows="4" value={form.message} onChange={upd("message")} placeholder="Allergies, style de réception, budget approximatif…" /></div>
                <div className="reserve-submit" style={{ gridColumn: "1 / -1" }}>
                  <button className="btn btn-gold" type="submit">Envoyer ma demande</button>
                </div>
              </form>
            )}
          </Reveal>
        </div>
      </section>

      <Footer />
    </>
  );
}

/* ======================= FAQ ======================= */
const FAQ_ITEMS = [
  {
    q: "Quelle est votre zone de livraison ?",
    a: "Nous desservons la Grande région de Montréal : Montréal, Laval, Rive-Nord et Rive-Sud. Pour les événements hors zone, contactez-nous — nous étudions chaque demande.",
  },
  {
    q: "Combien de temps à l'avance dois-je réserver ?",
    a: "Minimum 2 semaines pour la plupart des services. Pour les mariages et grands événements (50 invités et plus), nous recommandons 4 à 8 semaines afin de bien planifier menus et logistique.",
  },
  {
    q: "Avez-vous des options végétariennes, véganes ou sans allergènes ?",
    a: "Oui, chaque menu s'adapte. Indiquez-nous les restrictions alimentaires de vos invités (végé, végane, sans gluten, allergies) et nous ajustons sans supplément dans la majorité des cas.",
  },
  {
    q: "Y a-t-il un montant ou nombre minimum de commande ?",
    a: "Ça varie selon le service. Boîte à lunch : à partir de 10 personnes. Buffet : à partir de 25 personnes. Chef à domicile : à partir de 2 convives. Brunch : selon le format choisi.",
  },
  {
    q: "Les menus sont-ils personnalisables ?",
    a: "Absolument. Chaque événement est unique — nous bâtissons le menu avec vous, à partir de vos goûts, du thème de votre réception et de la saison.",
  },
  {
    q: "Comment se passe le paiement ?",
    a: "Un acompte est demandé à la réservation pour confirmer votre date. Le solde est payable avant l'événement. Nous acceptons les virements Interac et les cartes de crédit.",
  },
];

function FaqItem({ q, a, idx }) {
  const [open, setOpen] = uS(idx === 0);
  return (
    <Reveal delay={idx * 60}>
      <div style={{ borderBottom: "1px solid var(--border)", padding: "28px 0" }}>
        <button onClick={() => setOpen(o => !o)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", textAlign: "left", padding: 0 }}>
          <h3 className="f-display" style={{ fontSize: "clamp(18px,2vw,24px)", color: "var(--paper)" }}>{q}</h3>
          <span style={{ color: "var(--gold)", fontSize: 26, marginLeft: 24, transition: "transform .3s", transform: open ? "rotate(45deg)" : "none" }}>+</span>
        </button>
        {open && <p className="about-body" style={{ marginTop: 18, fontSize: 16, maxWidth: 820 }}>{a}</p>}
      </div>
    </Reveal>
  );
}

function FaqPage() {
  return (
    <>
      <Navbar />
      <PageBanner
        eyebrow="Aide"
        title="Foire aux questions"
        subtitle="Les réponses aux questions qu'on nous pose le plus souvent. Si la vôtre n'y est pas, écrivez-nous — nous y répondrons avec plaisir."
        image="images/hero-3.png"
      />
      <section className="section" style={{ background: "var(--bg)" }}>
        <div className="section-narrow">
          {FAQ_ITEMS.map((f, i) => <FaqItem key={i} idx={i} q={f.q} a={f.a} />)}
        </div>
      </section>
      <CtaBand heading="Une autre question ?" body="Écrivez-nous directement — Kimberly vous répond personnellement en moins de 48 h." label="Nous contacter" />
      <Footer />
    </>
  );
}

Object.assign(window, { PageBanner, TextSection, CtaBand, AboutPage, ServicePage, ContactPage, FaqPage, SERVICE_PAGE_DATA });