/* Good Time Coffee — shared building blocks (L'OR-inspired luxe) */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Icons ---------- */
const Icon = {
  Search: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
  Bag: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M5 8h14l-1.2 11.2A2 2 0 0 1 15.8 21H8.2a2 2 0 0 1-2-1.8L5 8Z"/><path d="M9 8V6a3 3 0 1 1 6 0v2"/></svg>,
  User: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>,
  Heart: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 10c0 5.65-7 10-7 10Z"/></svg>,
  Close: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>,
  Plus: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  Minus: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 12h14"/></svg>,
  Arrow: (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M5 12h14m-5-6 6 6-6 6"/></svg>,
  ArrowUp: (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M7 17 17 7M9 7h8v8"/></svg>,
  Star: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" {...p}><path d="m12 2 2.9 6.9 7.1.6-5.4 4.7 1.7 7.1-6.3-3.9-6.3 3.9 1.7-7.1L2 9.5l7.1-.6L12 2Z"/></svg>,
  Leaf: (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14Z"/><path d="M5 19c4-3 7-6 9-10"/></svg>,
  Bean: (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><ellipse cx="12" cy="12" rx="6" ry="9" transform="rotate(20 12 12)"/><path d="M9 5c2 4 2 10 0 14M15 5c-2 4-2 10 0 14"/></svg>,
  Menu: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
};

/* ---------- Product data — vrais produits Morandini Caffè (50% Arabica) ---------- */
const PRODUCTS = [
  { id: "p1", name: "Supercrema Capsules", line: "Supercrema", origin: "Morandini Caffè · Italie", family: "Capsules", roast: "Espresso", intensity: 8, arabica: 50, price: 18.80, weight: "10 caps", notes: ["Crema dense", "Cacao", "Rond"],          stock: 64,  rating: 4.8, accent: "#C2632A", img: "img-capsule" },
  { id: "p5", name: "Miscela Crema Grains", line: "Miscela Crema", origin: "Morandini Caffè · Italie", family: "Grains", roast: "Torréfié",  intensity: 8, arabica: 50, price: 17.80, weight: "1 kg",  notes: ["Cacao", "Fruits secs", "Crema"],         stock: 24,  rating: 4.9, accent: "#6E5A47", img: "img-grain" },
  { id: "p7", name: "Miscela Supercrema Grains", line: "Miscela Supercrema", origin: "Morandini Caffè · Italie", family: "Grains", roast: "Torréfié", intensity: 9, arabica: 50, price: 18.80, weight: "1 kg", notes: ["Crema intense", "Cacao", "Épices"], stock: 30, rating: 4.9, accent: "#C2632A", img: "img-grainsuper" },
  { id: "p8", name: "Miscela Oro Grains", line: "Miscela Oro", origin: "Morandini Caffè · Italie", family: "Grains", roast: "Torréfié", intensity: 7, arabica: 90, price: 22.90, weight: "1 kg", notes: ["Floral", "Miel", "Rond"], stock: 18, rating: 5.0, accent: "#C8A24A", img: "img-grainoro" },
  { id: "p9", name: "Maxima Dosettes", line: "Maxima", origin: "Morandini Caffè · Italie", family: "Dosettes", roast: "Espresso", intensity: 8, arabica: 100, price: 79.50, weight: "150 dosettes", notes: ["100% Arabica", "ESE 44mm", "Rond"], stock: 20, rating: 4.9, accent: "#B89150", img: "img-maxima" },
  { id: "p10", name: "Miscela Crema Dosettes", line: "Miscela Crema", origin: "Morandini Caffè · Italie", family: "Dosettes", roast: "Espresso", intensity: 7, arabica: 50, price: 75.00, weight: "150 dosettes", notes: ["ESE 44mm", "Cacao", "Doux"], stock: 40, rating: 4.7, accent: "#6E5A47", img: "img-dosettebox" },
];

/* ---------- Currency helper ---------- */
const fmt = (n) => new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(n);

/* ---------- Intensity meter ---------- */
function Intensity({ value = 0, max = 10, color = "var(--gold)" }) {
  if (!value) return null;
  return (
    <span className="intensity" title={`Intensité ${value}/${max}`}>
      {Array.from({ length: max }).map((_, i) => (
        <i key={i} className={i < value ? "on" : ""} style={i < value ? { background: color } : undefined}/>
      ))}
    </span>
  );
}

/* ---------- Navbar ---------- */
function Navbar({ onNav, view, cartCount, onOpenCart }) {
  const links = [
    { id: "home",    label: "Accueil" },
    { id: "shop",    label: "Boutique" },
    { id: "page:faq",     label: "FAQ" },
    { id: "page:contact", label: "Contact" },
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: "color-mix(in srgb, var(--bg) 85%, transparent)",
      backdropFilter: "blur(14px)",
      borderBottom: "1px solid var(--line)",
    }}>
      {/* Announcement bar */}
      <div style={{ background: "var(--gold)", color: "var(--on-gold)" }}>
        <div className="container row" style={{ height: 32, justifyContent: "center", gap: 40, fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase" }}>
          <span>Livraison offerte dès 30 €</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Paiement sécurisé</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Expédié sous 48h</span>
        </div>
      </div>

      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", height: 84 }}>
        <div className="row gap-4" style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)" }}>
        </div>

        {/* Wordmark */}
        <a onClick={() => onNav("home")} style={{ cursor: "pointer", textAlign: "center" }}>
          <div className="display" style={{ fontSize: 30, lineHeight: 1, fontWeight: 500, letterSpacing: "0.02em" }}>
            Coffee<span style={{ color: "var(--gold)" }}>·</span>For
          </div>
          <div className="tracked" style={{ fontSize: 9, letterSpacing: "0.5em", marginTop: 4, color: "var(--gold)" }}>
            YOU
          </div>
        </a>

        <div className="row gap-3" style={{ justifyContent: "flex-end" }}>
          <button title="Rechercher" style={iconBtn}><Icon.Search/></button>
          <button title="Compte" style={iconBtn}><Icon.User/></button>
          <button title="Favoris" style={iconBtn}><Icon.Heart/></button>
          <button title="Panier" onClick={onOpenCart} style={{ ...iconBtn, position: "relative" }}>
            <Icon.Bag/>
            {cartCount > 0 && (
              <span style={{
                position: "absolute", top: 0, right: 0,
                minWidth: 16, height: 16, padding: "0 4px",
                background: "var(--gold)", color: "var(--on-gold)",
                borderRadius: 999, fontSize: 10, fontFamily: "var(--font-sans)", fontWeight: 500,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>{cartCount}</span>
            )}
          </button>
        </div>
      </div>

      {/* Secondary nav */}
      <div style={{ borderTop: "1px solid var(--line)" }}>
        <div className="container row" style={{ height: 48, justifyContent: "center", gap: 44 }}>
          {links.map(l => (
            <a key={l.id} onClick={() => onNav(l.id)}
              className="tracked"
              style={{
                cursor: "pointer", fontSize: 11,
                color: view === l.id ? "var(--gold)" : "var(--text-dim)",
                position: "relative", paddingBottom: 14, paddingTop: 14,
                borderBottom: view === l.id ? "1px solid var(--gold)" : "1px solid transparent",
                transition: "color 160ms",
              }}>
              {l.label}
            </a>
          ))}
        </div>
      </div>
    </header>
  );
}

const iconBtn = {
  width: 38, height: 38, borderRadius: 2, display: "inline-flex",
  alignItems: "center", justifyContent: "center", color: "var(--text)",
  transition: "color 160ms",
};

/* ---------- Footer (always deep noir + gold) ---------- */
function Footer({ onNav }) {
  const ivory = "rgba(242,236,224,";
  const go = (label) => {
    const key = (window.PAGE_ROUTES || {})[label];
    if (key && onNav) onNav("page:" + key);
  };
  return (
    <footer style={{ background: "var(--footer-bg)", color: "#F2ECE0", padding: "var(--s-9) 0 var(--s-6)", marginTop: "var(--s-9)" }}>
      <div className="container">
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
          <div className="display" style={{ fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 0.95, color: "#F2ECE0" }}>
            Le café Morandini,<br/><em style={{ color: "var(--gold)" }}>chez vous.</em>
          </div>
          <button className="btn btn-primary" onClick={() => onNav && onNav("shop")}>Voir la boutique <Icon.Arrow/></button>
        </div>

        <div className="gold-rule" style={{ marginBottom: 48 }}/>

        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48 }}>
          <div>
            <div className="tracked" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 18 }}>Newsletter</div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: ivory + "0.65)", maxWidth: 320, margin: "0 0 18px" }}>
              Inscrivez-vous et bénéficiez de 30 % sur votre première commande.
            </p>
            <div className="row" style={{ borderBottom: "1px solid " + ivory + "0.3)", paddingBottom: 8 }}>
              <input className="input" placeholder="email@exemple.com" style={{ background: "transparent", border: "none", color: "#F2ECE0", padding: 0, height: 36 }}/>
              <button style={{ color: "var(--gold)" }}><Icon.Arrow/></button>
            </div>
          </div>

          {[
            { t: "Boutique", l: ["Capsules", "Dosettes", "Café en grain"] },
            { t: "Aide",     l: ["FAQ", "Compatibilité", "Livraison", "Contact"] },
            { t: "Légal",    l: ["CGV", "Confidentialité", "Mentions"] },
          ].map(col => (
            <div key={col.t}>
              <div className="tracked" style={{ fontSize: 11, color: "var(--gold)", marginBottom: 18 }}>{col.t}</div>
              <div className="col gap-3">
                {col.l.map(i => <a key={i} onClick={() => col.t === "Boutique" ? onNav && onNav("shop") : go(i)} style={{ fontSize: 13, color: ivory + "0.7)", cursor: "pointer" }}>{i}</a>)}
              </div>
            </div>
          ))}
        </div>

        <div className="row" style={{ justifyContent: "space-between", paddingTop: 32, marginTop: 64, borderTop: "1px solid " + ivory + "0.15)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: ivory + "0.45)" }}>
          <span>© 2026 Coffee For You</span>
          <span>Torréfié à Pantin · France</span>
          <span>Mastercard · Visa · PayPal</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, PRODUCTS, fmt, Navbar, Footer, Intensity });
