/* Good Time Espresso — Content pages (footer links) */

const PAGES = {
  /* === LA MAISON === */
  recyclage: {
    eyebrow: "La Maison",
    title: ["Le", "recyclage", "facile."],
    intro: "Capsules compostables, dosettes en papier, sachets en carton : chaque format a sa filière. Voici comment bien trier.",
    photo: "photo-beans",
    blocks: [
      { h: "Capsules compostables", p: "Nos capsules Supercrema sont 100 % compostables. Videz-les si besoin et déposez-les dans votre bac à biodéchets ou composteur, selon les consignes de votre commune." },
      { h: "Dosettes ESE", p: "La dosette en papier filtre et le marc se compostent ou rejoignent les biodéchets. Le sachet individuel se trie selon sa matière (papier/plastique)." },
      { h: "3 gestes simples", list: ["Videz le marc dans votre composteur ou bac à biodéchets.", "Compostez la capsule ou la dosette compostable.", "Déposez étuis et sachets carton dans le tri papier."] },
    ],
    cta: { label: "Une question ? Contactez-nous", to: "contact" },
  },
  durabilite: {
    eyebrow: "La Maison",
    title: ["Un café", "durable,", "à chaque tasse."],
    intro: "Du grain à la capsule, nous privilégions des choix responsables.",
    photo: "photo-cup",
    stats: [["100%", "capsules compostables"], ["50%", "Arabica"], ["FSC", "étuis carton certifiés"], ["IT", "torréfaction italienne"]],
    blocks: [
      { h: "Des capsules compostables", p: "La gamme Supercrema est conditionnée en capsules 100 % compostables, pour réduire les déchets plastiques sans renoncer à la qualité en tasse." },
      { h: "Une torréfaction maîtrisée", p: "La Miscela Crema est torréfiée en Italie selon un profil dédié, pour révéler l'équilibre entre Arabica et Robusta." },
      { h: "Des emballages repensés", p: "Étuis et cartons en fibres certifiées FSC, encres respectueuses, et réduction continue du plastique sur la gamme." },
    ],
  },
  fabrication: {
    eyebrow: "La Maison",
    title: ["L'art de la", "fabrication."],
    intro: "De la sélection des grains à l'encapsulage, le savoir-faire Morandini Caffè.",
    photo: "photo-pour",
    blocks: [
      { h: "01 · Sélection", p: "Des grains Arabica et Robusta choisis à l'origine pour composer la Miscela Crema, équilibrée à 50% Arabica." },
      { h: "02 · Torréfaction", p: "Une torréfaction italienne lente et régulière, qui développe le corps et la crema sans amertume excessive." },
      { h: "03 · Assemblage", p: "L'équilibre entre douceur de l'Arabica et puissance du Robusta, pour un espresso rond et gourmand." },
      { h: "04 · Conditionnement", p: "Mouture et dosage précis, en capsules compostables, dosettes ESE ou sachets de grains pour préserver la fraîcheur." },
    ],
  },

  /* === SUPPORT === */
  faq: {
    eyebrow: "Support",
    title: ["Questions", "fréquentes."],
    intro: "Tout ce qu'il faut savoir sur nos cafés Morandini et vos commandes.",
    faq: [
      { q: "Vos capsules sont-elles compatibles Nespresso® ?", a: "Oui, les capsules Supercrema sont compatibles avec la plupart des machines Nespresso®* à système Original. *Marque tierce, sans lien avec Morandini Caffè." },
      { q: "Quelle est la composition de la Miscela Crema ?", a: "C'est un assemblage équilibré à 50% Arabica / 50% Robusta, torréfié en Italie. La douceur de l'Arabica et le corps du Robusta, pour une crema dense et persistante." },
      { q: "Quels formats proposez-vous ?", a: "La gamme existe en capsules compostables (Supercrema), en dosettes ESE 44mm et en café en grains (250 g et 1 kg)." },
      { q: "Quels sont les délais de livraison ?", a: "Vos commandes sont expédiées sous 48h. Comptez 2 à 4 jours ouvrés en France métropolitaine. Livraison offerte dès 30 €." },
      { q: "Puis-je modifier ou annuler mon abonnement ?", a: "Oui, à tout moment depuis votre espace client : changez la fréquence, mettez en pause ou annulez, sans frais ni engagement." },
      { q: "Les capsules sont-elles compostables ?", a: "Oui, les capsules Supercrema sont 100 % compostables. Videz le marc et déposez-les dans votre bac à biodéchets selon les consignes de votre commune." },
    ],
    cta: { label: "Contacter le support", to: "contact" },
  },
  compatibilite: {
    eyebrow: "Support",
    title: ["Compatibilité", "machines."],
    intro: "Chaque format s'adapte à votre équipement.",
    photo: "photo-three",
    table: [
      ["Machine Nespresso®* Original", "Capsules Supercrema", "Compatible"],
      ["Machine à dosettes ESE 44mm", "Dosettes Miscela Crema", "Compatible"],
      ["Machine à café en grains", "Grains Miscela Crema", "Optimal"],
      ["Moulin + cafetière", "Grains Miscela Crema", "Compatible"],
      ["Nespresso®* Vertuo", "—", "Non compatible"],
    ],
    note: "*Nespresso® est une marque tierce, sans lien avec Morandini Caffè. Vérifiez le système (Original/Vertuo) de votre machine avant commande.",
  },
  livraison: {
    eyebrow: "Support",
    title: ["Livraison &", "retours."],
    intro: "Rapide, suivie, et offerte dès 30 € d'achat.",
    photo: "photo-pour",
    cards: [
      { h: "Standard", sub: "2-4 jours ouvrés", p: "4,90 € — offerte dès 30 €. Suivi par email et SMS." },
      { h: "Express", sub: "24-48h", p: "8,90 € — commande avant 12h, livrée le lendemain en France métropolitaine." },
      { h: "Point relais", sub: "3-5 jours ouvrés", p: "3,50 € — plus de 6 000 points relais partout en France." },
      { h: "Retours", sub: "30 jours", p: "Retour gratuit sous 30 jours. Remboursement sous 14 jours après réception." },
    ],
  },
  contact: {
    eyebrow: "Support",
    title: ["Parlons", "café."],
    intro: "Notre équipe basée à Pantin vous répond du lundi au vendredi, 9h-18h.",
    contact: true,
  },

  /* === LÉGAL === */
  cgv:             { eyebrow: "Légal", title: ["Conditions", "de vente."], intro: "Les conditions générales régissant vos achats sur Coffee For You.", legal: true },
  confidentialite: { eyebrow: "Légal", title: ["Confidentialité."], intro: "Comment nous protégeons et utilisons vos données personnelles.", legal: true },
  cookies:         { eyebrow: "Légal", title: ["Cookies."], intro: "La gestion des cookies et traceurs sur notre site.", legal: true },
  mentions:        { eyebrow: "Légal", title: ["Mentions", "légales."], intro: "Informations légales relatives à l'éditeur du site.", legal: true },
};

/* Maps footer labels → page keys (also used by Navbar etc.) */
const PAGE_ROUTES = {
  "Recyclage": "recyclage",
  "Durabilité": "durabilite",
  "L'art de la fabrication": "fabrication",
  "FAQ": "faq",
  "Compatibilité": "compatibilite",
  "Livraison": "livraison",
  "Contact": "contact",
  "CGV": "cgv",
  "Confidentialité": "confidentialite",
  "Cookies": "cookies",
  "Mentions": "mentions",
};

function ContentPage({ pageKey, onNav }) {
  const d = PAGES[pageKey];
  const [open, setOpen] = useState(0);
  if (!d) return null;

  return (
    <div className="fade-up">
      {/* Header */}
      <section style={{ padding: "72px 0 48px", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>— {d.eyebrow}</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 104px)", margin: 0, lineHeight: 0.96, maxWidth: 1000 }}>
            {d.title.map((w, i) => (
              <React.Fragment key={i}>
                {i === 1 ? <span className="display-italic" style={{ color: "var(--gold)" }}>{w}</span> : w}{" "}
              </React.Fragment>
            ))}
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text-dim)", maxWidth: 620, marginTop: 28 }}>{d.intro}</p>
        </div>
      </section>

      <section style={{ padding: "64px 0 40px" }}>
        <div className="container">

          {/* Stats */}
          {d.stats && (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--line-strong)", borderBottom: "1px solid var(--line-strong)", marginBottom: 64 }}>
              {d.stats.map(([k, v], i) => (
                <div key={k} style={{ padding: "40px 24px", borderLeft: i ? "1px solid var(--line)" : "none", textAlign: "center" }}>
                  <div className="display" style={{ fontSize: 52, color: "var(--gold)", lineHeight: 1 }}>{k}</div>
                  <div className="tracked" style={{ fontSize: 9.5, color: "var(--muted)", marginTop: 10 }}>{v}</div>
                </div>
              ))}
            </div>
          )}

          {/* Two-column: photo + blocks */}
          {d.blocks && (
            <div style={{ display: "grid", gridTemplateColumns: d.photo ? "0.85fr 1.15fr" : "1fr", gap: 64, alignItems: "flex-start" }}>
              {d.photo && <div className={`photo ${d.photo}`} style={{ aspectRatio: "4/5", position: "sticky", top: 200 }}/>}
              <div className="col gap-6">
                {d.blocks.map((b, i) => (
                  <div key={i} style={{ paddingBottom: 28, borderBottom: i < d.blocks.length - 1 ? "1px solid var(--line)" : "none" }}>
                    <h2 className="display" style={{ fontSize: 30, margin: "0 0 14px" }}>{b.h}</h2>
                    {b.p && <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text-dim)", margin: 0 }}>{b.p}</p>}
                    {b.list && (
                      <ol className="col gap-3" style={{ margin: 0, padding: 0, listStyle: "none", counterReset: "step" }}>
                        {b.list.map((li, j) => (
                          <li key={j} className="row gap-3" style={{ alignItems: "flex-start" }}>
                            <span className="mono" style={{ color: "var(--gold)", fontSize: 13, marginTop: 2 }}>{String(j + 1).padStart(2, "0")}</span>
                            <span style={{ fontSize: 15, lineHeight: 1.6, color: "var(--text-dim)" }}>{li}</span>
                          </li>
                        ))}
                      </ol>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* FAQ accordion */}
          {d.faq && (
            <div style={{ maxWidth: 880 }}>
              {d.faq.map((f, i) => (
                <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
                  <button onClick={() => setOpen(open === i ? -1 : i)} className="row" style={{ width: "100%", justifyContent: "space-between", padding: "24px 0", textAlign: "left", gap: 24 }}>
                    <span className="display" style={{ fontSize: 22, color: open === i ? "var(--gold)" : "var(--text)" }}>{f.q}</span>
                    <span style={{ color: "var(--gold)", flexShrink: 0, transform: open === i ? "rotate(45deg)" : "none", transition: "transform 200ms" }}><Icon.Plus/></span>
                  </button>
                  {open === i && <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text-dim)", margin: "0 0 24px", maxWidth: 700 }}>{f.a}</p>}
                </div>
              ))}
            </div>
          )}

          {/* Compatibility table */}
          {d.table && (
            <div style={{ border: "1px solid var(--line)" }}>
              <div className="row" style={{ background: "var(--surface)", padding: "16px 24px", borderBottom: "1px solid var(--line-strong)" }}>
                {["Équipement", "Formats compatibles", "Statut"].map((h, i) => (
                  <span key={h} className="tracked" style={{ fontSize: 9.5, color: "var(--gold)", flex: i === 1 ? 1.4 : 1 }}>{h}</span>
                ))}
              </div>
              {d.table.map((row, i) => (
                <div key={i} className="row" style={{ padding: "20px 24px", borderBottom: i < d.table.length - 1 ? "1px solid var(--line)" : "none" }}>
                  <span style={{ flex: 1, fontSize: 14, color: "var(--text)" }}>{row[0]}</span>
                  <span style={{ flex: 1.4, fontSize: 14, color: "var(--text-dim)" }}>{row[1]}</span>
                  <span style={{ flex: 1 }}>
                    <span className="chip" style={row[2] === "Optimal" ? { background: "var(--gold)", color: "var(--on-gold)", borderColor: "var(--gold)" } : row[2] === "Non compatible" ? { opacity: 0.5 } : {}}>{row[2]}</span>
                  </span>
                </div>
              ))}
            </div>
          )}
          {d.note && <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 20, maxWidth: 700 }}>{d.note}</p>}

          {/* Cards (livraison) */}
          {d.cards && (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
              {d.cards.map((c, i) => (
                <div key={i} className="card" style={{ padding: 32 }}>
                  <div className="row" style={{ justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
                    <span className="display" style={{ fontSize: 30 }}>{c.h}</span>
                    <span className="tracked" style={{ fontSize: 9.5, color: "var(--gold)" }}>{c.sub}</span>
                  </div>
                  <p style={{ fontSize: 14, lineHeight: 1.65, color: "var(--text-dim)", margin: 0 }}>{c.p}</p>
                </div>
              ))}
            </div>
          )}

          {/* Contact */}
          {d.contact && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "flex-start" }}>
              <div className="col gap-5">
                {[["Email", "bonjour@goodtime.coffee"], ["Téléphone", "+33 1 84 80 00 00"], ["Atelier", "14 rue de la Torréfaction, 93500 Pantin"], ["Horaires", "Lun-Ven · 9h-18h"]].map(([k, v]) => (
                  <div key={k} style={{ paddingBottom: 20, borderBottom: "1px solid var(--line)" }}>
                    <div className="tracked" style={{ fontSize: 9.5, color: "var(--gold)", marginBottom: 8 }}>{k}</div>
                    <div className="display" style={{ fontSize: 24 }}>{v}</div>
                  </div>
                ))}
              </div>
              <div className="card" style={{ padding: 36 }}>
                <div className="display" style={{ fontSize: 28, marginBottom: 24 }}>Écrivez-nous</div>
                <div className="col gap-4">
                  <input className="input" placeholder="Votre nom"/>
                  <input className="input" placeholder="Votre email"/>
                  <textarea className="input" placeholder="Votre message" style={{ height: 120, padding: 14, resize: "none" }}/>
                  <button className="btn btn-primary" style={{ width: "100%" }}>Envoyer <Icon.Arrow/></button>
                </div>
              </div>
            </div>
          )}

          {/* Legal placeholder */}
          {d.legal && (
            <div style={{ maxWidth: 760 }}>
              {["Objet", "Article 1 — Champ d'application", "Article 2 — Commandes", "Article 3 — Prix et paiement", "Article 4 — Données personnelles"].map((h, i) => (
                <div key={i} style={{ marginBottom: 36 }}>
                  <h2 className="display" style={{ fontSize: 24, margin: "0 0 12px", color: "var(--gold)" }}>{h}</h2>
                  <p style={{ fontSize: 14, lineHeight: 1.75, color: "var(--text-dim)", margin: 0 }}>
                    Coffee For You, SAS au capital de 50 000 €, immatriculée au RCS de Bobigny.
                    Le présent document définit les modalités applicables. Pour toute question, contactez notre
                    service client. Texte d'exemple — à compléter avec vos conditions réelles.
                  </p>
                </div>
              ))}
            </div>
          )}

          {/* CTA */}
          {d.cta && (
            <div style={{ marginTop: 56, paddingTop: 40, borderTop: "1px solid var(--line)" }}>
              <button className="btn btn-primary" onClick={() => onNav(d.cta.to)}>{d.cta.label} <Icon.Arrow/></button>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PAGES, PAGE_ROUTES, ContentPage });