/* Good Time Coffee — Home (L'OR-inspired), 3 variants: Onyx / Velours / Ivoire */

/* Featured = one product per line+family (no visual duplicates) */
const FEATURED = (() => {
  const seen = new Set();
  return PRODUCTS.filter(p => {
    const k = p.line + "·" + p.family;
    if (seen.has(k)) return false;
    seen.add(k);
    return true;
  });
})();

function HomeView({ onNav, addToCart, variant = "onyx" }) {
  if (variant === "velours") return <HomeVelours onNav={onNav} addToCart={addToCart}/>;
  if (variant === "ivoire")  return <HomeIvoire  onNav={onNav} addToCart={addToCart}/>;
  return <HomeOnyx onNav={onNav} addToCart={addToCart}/>;
}

/* ---------- Shared: luxe product card with capsule colour + intensity ---------- */
function ProductCard({ p, onNav, addToCart }) {
  const [hover, setHover] = useState(false);
  return (
    <div className="card" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ cursor: "pointer", overflow: "hidden", padding: 0, position: "relative" }}>
      {/* Capsule colour spine */}
      <div style={{ position: "absolute", top: 0, left: 0, bottom: 0, width: 3, background: p.accent, zIndex: 3 }}/>
      <div onClick={() => onNav("product:" + p.id)} className={`pack ${p.img}`} style={{ aspectRatio: "1/1", padding: 0, position: "relative" }}>
        <div style={{ position: "absolute", top: 14, left: 16, display: "flex", flexDirection: "column", gap: 8, zIndex: 2 }}>
        </div>
        <button onClick={(e) => { e.stopPropagation(); addToCart(p); }} style={{
          position: "absolute", bottom: 14, right: 14, zIndex: 2,
          width: 42, height: 42, borderRadius: "50%",
          background: "var(--gold)", color: "var(--on-gold)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          opacity: hover ? 1 : 0, transform: hover ? "translateY(0)" : "translateY(8px)",
          transition: "all 240ms ease",
        }}>
          <Icon.Plus/>
        </button>
      </div>
      <div style={{ padding: "18px 18px 20px" }} onClick={() => onNav("product:" + p.id)}>
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
          <span className="tracked" style={{ fontSize: 9.5, color: "var(--muted)" }}>{p.family} · {p.line}</span>
          <span className="chip" style={{ height: 20, fontSize: 8.5, padding: "0 8px" }}>{p.arabica}% Arabica</span>
        </div>
        <div className="display" style={{ fontSize: 26, lineHeight: 1.05, marginBottom: 6 }}>{p.name}</div>
        <div style={{ fontSize: 12, color: "var(--text-dim)", marginBottom: 14 }}>{p.notes.slice(0, 3).join(" · ")}</div>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "baseline", paddingTop: 14, borderTop: "1px solid var(--line)" }}>
          <span className="mono" style={{ fontSize: 14, color: "var(--text)" }}>{fmt(p.price)}</span>
          <span className="tracked" style={{ fontSize: 9.5, color: "var(--gold)" }}>{p.weight}</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- Shared: real product showcase strip (deduped) ---------- */
function CapsuleStrip({ onNav }) {
  const seen = new Set();
  const items = PRODUCTS.filter(p => {
    const key = p.line + "·" + p.family;
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 0, border: "1px solid var(--line)" }}>
      {items.map((p) => (
        <button key={p.id} onClick={() => onNav("product:" + p.id)} style={{
          position: "relative", display: "flex", flexDirection: "column",
          textAlign: "left", borderRight: "1px solid var(--line)", background: "var(--surface)",
        }}>
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: p.accent, zIndex: 2 }}/>
          <div className={`pack ${p.img}`} style={{ aspectRatio: "1/1" }}/>
          <div style={{ padding: "12px 14px 16px" }}>
            <div className="display" style={{ fontSize: 16, lineHeight: 1.05 }}>{p.family}</div>
            <div className="tracked" style={{ fontSize: 8.5, color: "var(--muted)", marginTop: 4 }}>{p.line}</div>
          </div>
        </button>
      ))}
    </div>
  );
}

/* ============================================================
   VARIANT 1 — ONYX (signature noir + or)
   ============================================================ */
function HomeOnyx({ onNav, addToCart }) {
  return (
    <div className="fade-up">
      {/* HERO */}
      <section style={{ padding: "0 var(--s-6)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 48, alignItems: "center", minHeight: "78vh" }}>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: 40, paddingBottom: 40 }}>
            <div className="eyebrow" style={{ marginBottom: 28 }}>Morandini Caffè · 50% Arabica</div>
            <h1 className="display" style={{ fontSize: "clamp(56px, 7vw, 104px)", margin: 0, fontWeight: 500 }}>
              Le café <span className="display-italic" style={{ color: "var(--gold)" }}>Morandini</span>, chez vous.
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-dim)", maxWidth: 460, margin: "28px 0 36px" }}>
              Capsules, dosettes et café en grains, torréfiés en Italie.
              Un café d'exception à la crema dense — simplement.
            </p>
            <div className="row gap-3">
              <button className="btn btn-primary" onClick={() => onNav("shop")}>Découvrir la gamme <Icon.Arrow/></button>
              <button className="btn btn-ghost" onClick={() => onNav("page:contact")}>Nous contacter</button>
            </div>
            <div className="row gap-6" style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
              {[["50%", "Arabica"], ["100%", "compostable"], ["48h", "torréfié & expédié"]].map(([k, v]) => (
                <div key={k}>
                  <div className="display" style={{ fontSize: 32, color: "var(--gold)" }}>{k}</div>
                  <div className="tracked" style={{ fontSize: 9.5, color: "var(--muted)", marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="img-accueil2" style={{ width: "100%", aspectRatio: "1400 / 760", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundColor: "var(--bg)", borderRadius: 2 }}/>
        </div>
      </section>

      {/* Capsule colour world */}
      <section style={{ padding: "120px 0 80px" }}>
        <div className="container">
          <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>— La gamme</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: 0 }}>
                Trois formats, <span className="display-italic" style={{ color: "var(--gold)" }}>un caractère</span>.
              </h2>
            </div>
            <button className="btn btn-ghost" onClick={() => onNav("shop")}>Toute la gamme</button>
          </div>
          <CapsuleStrip onNav={onNav}/>
        </div>
      </section>

      {/* Feature — Supercrema capsules */}
      <section style={{ background: "linear-gradient(135deg, #1A1310 0%, #241A14 55%, #15100D 100%)", color: "var(--text)", padding: "120px 0", position: "relative", overflow: "hidden" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div className="pack img-accueil" style={{ aspectRatio: "4/5", backgroundSize: "contain" }}/>
          <div>
            <div className="eyebrow" style={{ color: "var(--gold-soft)", marginBottom: 18 }}>— Café en grains</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 5.5vw, 84px)", margin: "0 0 24px" }}>
              Trois <span className="display-italic" style={{ color: "var(--gold-soft)" }}>assemblages</span>.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "rgba(242,236,224,0.85)", maxWidth: 440, marginBottom: 32 }}>
              Miscela Supercrema, Miscela Oro et Miscela Crema — trois caractères,
              du plus corsé au plus rond. Des grains torréfiés en Italie, en
              sachet 1 kg, pour les amateurs et les professionnels.
            </p>
            <div className="row gap-5" style={{ marginBottom: 36 }}>
              <div><div className="display" style={{ fontSize: 40, color: "var(--gold-soft)" }}>1 kg</div><div className="tracked" style={{ fontSize: 9.5, opacity: 0.7, marginTop: 4 }}>format pro</div></div>
              <div style={{ width: 1, alignSelf: "stretch", background: "rgba(242,236,224,0.25)" }}/>
              <div><div className="display" style={{ fontSize: 40, color: "var(--gold-soft)" }}>90%</div><div className="tracked" style={{ fontSize: 9.5, opacity: 0.7, marginTop: 4 }}>Arabica (Oro)</div></div>
            </div>
            <button className="btn btn-primary" onClick={() => onNav("shop")}>Voir les grains <Icon.Arrow/></button>
          </div>
        </div>
      </section>

      {/* Best sellers */}
      <section style={{ padding: "120px 0 80px" }}>
        <div className="container">
          <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: 0 }}>
              Les <span className="display-italic" style={{ color: "var(--gold)" }}>incontournables</span>.
            </h2>
            <button className="btn btn-link" onClick={() => onNav("shop")}>Tout voir</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {FEATURED.slice(0, 4).map((p) => <ProductCard key={p.id} p={p} onNav={onNav} addToCart={addToCart}/>)}
          </div>
        </div>
      </section>

      {/* Aluminium / craft block */}
      <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
          <div style={{ padding: "100px 56px 100px 0" }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>— Le savoir-faire</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 60px)", margin: "0 0 24px" }}>
              La <span className="display-italic" style={{ color: "var(--gold)" }}>Miscela Crema</span>
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text-dim)", marginBottom: 32, maxWidth: 460 }}>
              Un assemblage 60% Arabica / 40% Robusta sélectionné et torréfié
              en Italie pour une crema dense et persistante. Disponible en
              capsules compostables, dosettes ESE et café en grains.
            </p>
            <div className="col gap-3">
              {[["60% Arabica", "L'équilibre douceur & corps"], ["Compostable", "Capsules 100 % compostables"], ["2 formats", "Dosettes · grains"]].map(([k, v]) => (
                <div key={k} className="row gap-4" style={{ paddingBottom: 14, borderBottom: "1px solid var(--line)" }}>
                  <span className="display-italic" style={{ fontSize: 22, color: "var(--gold)", minWidth: 130 }}>{k}</span>
                  <span style={{ fontSize: 14, color: "var(--text-dim)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="pack img-cremaoriginal" style={{ minHeight: 560, backgroundSize: "contain" }}/>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   VARIANT 2 — VELOURS (espresso chaud, éditorial full-bleed)
   ============================================================ */
function HomeVelours({ onNav, addToCart }) {
  return (
    <div className="fade-up">
      {/* Full-bleed cover */}
      <section style={{ position: "relative", height: "90vh", overflow: "hidden" }}>
        <div className="photo photo-pour" style={{ position: "absolute", inset: 0, padding: 0 }}/>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,12,10,0.55) 0%, rgba(20,12,10,0.2) 40%, rgba(20,12,10,0.8) 100%)" }}/>
        <div className="container" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "56px var(--s-6)" }}>
          <div className="row" style={{ justifyContent: "space-between" }}>
            <span className="tracked" style={{ fontSize: 11, color: "var(--gold-soft)" }}>Vol. IV — Avril 2026</span>
            <span className="tracked" style={{ fontSize: 11, color: "rgba(242,236,224,0.8)" }}>Le rituel barista</span>
          </div>
          <div>
            <div className="display-italic" style={{ fontSize: "clamp(22px, 2.2vw, 34px)", color: "var(--gold-soft)", marginBottom: 16 }}>— Redécouvrez vos sens</div>
            <h1 className="display" style={{ fontSize: "clamp(72px, 12vw, 200px)", margin: 0, letterSpacing: "-0.02em", lineHeight: 0.9 }}>
              Dolce<br/><em style={{ color: "var(--gold)", fontWeight: 400 }}>Vita</em>
            </h1>
          </div>
          <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
            <p style={{ fontSize: 16, lineHeight: 1.55, maxWidth: 400, color: "rgba(242,236,224,0.88)", margin: 0 }}>
              La maîtrise italienne de la torréfaction intense, le charme et la
              chaleur d'un espresso corsé. À déguster en ristretto.
            </p>
            <button className="btn btn-primary" onClick={() => onNav("shop")}>Explorer la gamme <Icon.Arrow/></button>
          </div>
        </div>
      </section>

      {/* Capsule strip */}
      <section style={{ padding: "100px 0 80px" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16, textAlign: "center" }}>— La gamme</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: "0 0 48px", textAlign: "center" }}>
            Capsules, dosettes & <span className="display-italic" style={{ color: "var(--gold)" }}>grains</span>.
          </h2>
          <CapsuleStrip onNav={onNav}/>
        </div>
      </section>

      {/* Editorial pair */}
      <section style={{ padding: "60px 0 100px" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "6fr 6fr", gap: 64, alignItems: "center" }}>
          <div className="pack img-grain" style={{ aspectRatio: "4/5" }}/>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>— Miscela Crema</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 5.5vw, 80px)", margin: "0 0 24px", lineHeight: 0.96 }}>
              50% Arabica,<br/><em className="display-italic" style={{ color: "var(--gold)" }}>tout en équilibre</em>.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-dim)", marginBottom: 28 }}>
              Un assemblage 50% Arabica / 50% Robusta torréfié en Italie. La
              douceur de l'Arabica, le corps du Robusta, une crema dense et
              persistante — décliné en grains, dosettes et capsules.
            </p>
            <button className="btn btn-link" onClick={() => onNav("story")}>Découvrir le savoir-faire</button>
          </div>
        </div>
      </section>

      {/* Drop-cap manifesto */}
      <section style={{ background: "var(--surface)", padding: "100px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <p className="display" style={{ fontSize: 24, lineHeight: 1.5, color: "var(--text)", margin: 0, fontWeight: 400 }}>
            <span className="display-italic" style={{ fontSize: 108, lineHeight: 0.7, float: "left", marginRight: 14, color: "var(--gold)" }}>L</span>
            a crema dense et persistante n'est pas un détail. C'est la signature
            d'un assemblage juste — la promesse qu'à chaque tasse, le rituel
            sera tenu.
            <em style={{ color: "var(--gold)" }}> Voilà la Miscela Crema.</em>
          </p>
        </div>
      </section>

      {/* Selection */}
      <section style={{ padding: "100px 0 80px" }}>
        <div className="container">
          <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: 0 }}>
              La <span className="display-italic" style={{ color: "var(--gold)" }}>sélection</span>.
            </h2>
            <button className="btn btn-link" onClick={() => onNav("shop")}>Tout voir</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {FEATURED.slice(0, 4).map((p) => <ProductCard key={p.id} p={p} onNav={onNav} addToCart={addToCart}/>)}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   VARIANT 3 — IVOIRE (luxe clair, façon packaging)
   ============================================================ */
function HomeIvoire({ onNav, addToCart }) {
  return (
    <div className="fade-up">
      {/* Centered editorial hero */}
      <section style={{ padding: "100px 0 60px", textAlign: "center" }}>
        <div className="container" style={{ maxWidth: 980 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Maison de café · depuis 2018</div>
          <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 128px)", margin: 0, fontWeight: 500 }}>
            Le luxe d'un<br/><span className="display-italic" style={{ color: "var(--gold)" }}>geste simple</span>.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--text-dim)", maxWidth: 560, margin: "32px auto 40px" }}>
            Des capsules d'exception, une crema dorée, un rituel qui transforme
            chaque matin. Le café de qualité barista, chez vous.
          </p>
          <div className="row gap-3" style={{ justifyContent: "center" }}>
            <button className="btn btn-primary" onClick={() => onNav("shop")}>La boutique <Icon.Arrow/></button>
            <button className="btn btn-ghost" onClick={() => onNav("story")}>Notre histoire</button>
          </div>
        </div>
      </section>

      {/* Hero product showcase */}
      <section style={{ padding: "40px 0 100px" }}>
        <div className="container">
          <div className="pack img-arabica" style={{ aspectRatio: "21/9", borderRadius: 2, backgroundColor: "#FFFFFF" }}/>
        </div>
      </section>

      {/* Capsule strip */}
      <section style={{ padding: "0 0 100px" }}>
        <div className="container">
          <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40 }}>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 64px)", margin: 0 }}>
              Choisissez votre <span className="display-italic" style={{ color: "var(--gold)" }}>format</span>.
            </h2>
            <button className="btn btn-link" onClick={() => onNav("shop")}>Toute la gamme</button>
          </div>
          <CapsuleStrip onNav={onNav}/>
        </div>
      </section>

      {/* Stat strip */}
      <section style={{ borderTop: "1px solid var(--line-strong)", borderBottom: "1px solid var(--line-strong)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
          {[["50%", "Arabica"], ["100%", "compostable"], ["3", "formats au choix"], ["48h", "torréfié & expédié"]].map(([k, v], i) => (
            <div key={k} style={{ padding: "48px 24px", borderLeft: i ? "1px solid var(--line)" : "none", textAlign: "center" }}>
              <div className="display" style={{ fontSize: 56, color: "var(--gold)", lineHeight: 1 }}>{k}</div>
              <div className="tracked" style={{ fontSize: 10, color: "var(--muted)", marginTop: 10 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Products */}
      <section style={{ padding: "100px 0 80px" }}>
        <div className="container">
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 64px)", margin: "0 0 40px", textAlign: "center" }}>
            Nos <span className="display-italic" style={{ color: "var(--gold)" }}>signatures</span>.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {FEATURED.slice(0, 4).map((p) => <ProductCard key={p.id} p={p} onNav={onNav} addToCart={addToCart}/>)}
          </div>
        </div>
      </section>

      {/* Newsletter feature */}
      <section style={{ padding: "0 var(--s-6) 40px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", background: "var(--wine)", color: "var(--text)", padding: "80px 64px", textAlign: "center", borderRadius: 2 }}>
          <div className="eyebrow" style={{ color: "var(--gold-soft)", marginBottom: 18 }}>— Privilèges</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 64px)", margin: "0 0 16px" }}>
            −30 % sur votre <span className="display-italic" style={{ color: "var(--gold-soft)" }}>première commande</span>.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(242,236,224,0.8)", maxWidth: 480, margin: "0 auto 32px" }}>
            Inscrivez-vous à la newsletter et recevez nos nouveautés en avant-première,
            des offres réservées aux membres et les inspirations de nos baristas.
          </p>
          <div className="row gap-2" style={{ justifyContent: "center", maxWidth: 440, margin: "0 auto" }}>
            <input className="input" placeholder="email@exemple.com" style={{ background: "rgba(0,0,0,0.2)", borderColor: "rgba(242,236,224,0.3)", color: "var(--text)" }}/>
            <button className="btn btn-primary">Je m'inscris</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeView, HomeOnyx, HomeVelours, HomeIvoire, ProductCard, CapsuleStrip });