// Pages — Quiero.surf
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

// ---------------- HOME ----------------
function HomePage({ lang, go, wish, toggleWish, onOpen }) {
  const t = I18N[lang].home;
  // Uploaded Quiero atelier photography — each image maps to a product id
  const HERO = {
    a: { src: "img/lookbook-trio.jpg", pid: "guanacaste" },   // main hero
    b: { src: "img/olita-walk.jpg",    pid: "olita" },
    c: { src: "img/home-palm.jpg",     pid: "palma" },
    d: { src: "img/olita-hero.jpg",    pid: "olita" },
    e: { src: "img/home-action.jpg",   pid: "sol" },
  };

  return (
    <div className="page-enter">
      {/* Hero lookbook grid */}
      <section className="q-section tight">
        <div className="q-grid-hero-a" style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 8, marginBottom: 8 }}>
          <ImageBlock real realSrc={HERO.a.src} aspect="16/10" focus="center 40%" hoverZoom onClick={() => onOpen(HERO.a.pid)}>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, #00000055 100%)", pointerEvents: "none" }} />
            <div className="q-hero-overlay" style={{ position: "absolute", left: "clamp(16px,4vw,32px)", bottom: "clamp(16px,4vw,32px)", right: "clamp(16px,4vw,32px)", color: "#FBF7F2", maxWidth: 500, pointerEvents: "none" }}>
              <div className="micro" style={{ opacity: 0.9 }}>{t.eyebrow}</div>
              <h1 className="display" style={{ fontSize: "clamp(32px, 7vw, 88px)", lineHeight: 0.95, margin: "12px 0 0", fontWeight: 300 }}>
                {t.title1}<br/>
                <span className="script" style={{ fontSize: "1.15em", color: "#F2D9C8" }}>{t.title2}</span>{" "}
                <em style={{ fontStyle: "italic", fontWeight: 300 }}>{t.title3}</em>
              </h1>
            </div>
          </ImageBlock>
          <div className="q-grid-hero-rows" style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 8 }}>
            <ImageBlock real realSrc={HERO.b.src} aspect="auto" focus="center 30%" hoverZoom onClick={() => onOpen(HERO.b.pid)} style={{ aspectRatio: "auto", height: "100%" }} />
            <ImageBlock real realSrc={HERO.c.src} aspect="auto" focus="center" hoverZoom onClick={() => onOpen(HERO.c.pid)} style={{ aspectRatio: "auto", height: "100%" }} />
          </div>
        </div>
        <div className="q-grid-hero-b" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1.2fr", gap: 8 }}>
          <ImageBlock real realSrc={HERO.d.src} aspect="4/5" focus="center" hoverZoom onClick={() => onOpen(HERO.d.pid)} />
          <ImageBlock real realSrc={HERO.e.src} aspect="4/5" focus="center" hoverZoom onClick={() => onOpen(HERO.e.pid)} />
          <div style={{ background: "var(--sand)", padding: "clamp(22px,4vw,32px)", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 24 }}>
            <div>
              <SectionLabel align="left">N°01 · {t.eyebrow}</SectionLabel>
              <p className="display" style={{ fontSize: 28, lineHeight: 1.2, marginTop: 20, fontWeight: 300 }}>{t.sub}</p>
              <p className="script" style={{ fontSize: 32, color: "var(--terracotta)", marginTop: 16 }}>Nosara, Costa Rica.</p>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn primary" onClick={() => go("shop")}>{t.cta} <Icon name="arrow-right" size={14} /></button>
              <button className="btn ghost" onClick={() => go("story")}>{t.ctaStory}</button>
            </div>
          </div>
        </div>
      </section>

      {/* Lookbook section: product grid */}
      <section className="q-section">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <SectionLabel>{t.sectionLabel}</SectionLabel>
          <h2 className="display" style={{ fontSize: "clamp(48px, 6vw, 96px)", fontWeight: 300, margin: "16px 0 0", letterSpacing: "-0.02em" }}>
            <em style={{ fontStyle: "italic" }}>{t.sectionTitle}</em>
          </h2>
          <div className="script" style={{ fontSize: 28, color: "var(--terracotta)", marginTop: 4 }}>Summer ’26</div>
        </div>

        <div className="q-grid-3 lookbook" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48, rowGap: 80 }}>
          {PRODUCTS.slice(0, 6).map((p, i) => (
            <ProductCard
              key={p.id}
              p={p}
              lang={lang}
              onOpen={onOpen}
              wishOn={wish.includes(p.id)}
              onWish={() => toggleWish(p.id)}
              big={i === 0 || i === 4}
            />
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 64 }}>
          <button className="btn ghost" onClick={() => go("shop")}>
            {lang === "en" ? "Shop all 12 pieces" : "Ver las 12 piezas"} <Icon name="arrow-right" size={14} />
          </button>
        </div>
      </section>

      {/* Manifesto split */}
      <section className="q-section">
        <div className="q-grid-2 split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <SectionLabel align="left">{t.manifestoLabel}</SectionLabel>
            <h3 className="display" style={{ fontSize: "clamp(44px, 5vw, 84px)", lineHeight: 0.95, fontWeight: 300, margin: "20px 0 24px" }}>
              <em style={{ fontStyle: "italic" }}>{t.manifestoTitle}</em>
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--ink-60)", maxWidth: 480 }}>{t.manifestoBody}</p>
            <p className="script" style={{ fontSize: 30, color: "var(--terracotta)", marginTop: 16 }}>{t.manifestoBody2}</p>
            <button className="btn" style={{ marginTop: 28 }} onClick={() => go("story")}>
              {t.ctaDesigner}
            </button>
          </div>
          <div>
            <ImageBlock
              real
              realSrc="img/home-daisy.jpg"
              aspect="4/5"
              focus="center"
              hoverZoom
              onClick={() => onOpen("luna")}
            />
          </div>
        </div>
      </section>

      {/* Values strip */}
      <section className="q-values-wrap" style={{ padding: 0, background: "var(--sand)", marginTop: "clamp(64px,10vw,120px)" }}>
        <div style={{ padding: "clamp(48px,8vw,80px) clamp(22px,4vw,32px)" }}>
          <div className="q-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 64 }}>
            {t.feats.map((f, i) => (
              <div key={i} style={{ textAlign: "left" }}>
                <div className="mono" style={{ color: "var(--terracotta)", marginBottom: 24 }}>0{i+1} /</div>
                <h4 className="display" style={{ fontSize: 26, fontWeight: 300, margin: 0 }}>{f.h}</h4>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-60)", marginTop: 10 }}>{f.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Journal trio */}
      <section className="q-section">
        <div className="q-journal-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 16, flexWrap: "wrap" }}>
          <div>
            <SectionLabel align="left">{t.journalLabel}</SectionLabel>
            <h3 className="display" style={{ fontSize: 44, fontWeight: 300, margin: "12px 0 0", letterSpacing: "-0.01em" }}>
              <em style={{ fontStyle: "italic" }}>{t.journalTitle}</em>
            </h3>
          </div>
          <button className="btn ghost">{lang === "en" ? "All posts" : "Todo el diario"}</button>
        </div>
        <div className="q-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {t.posts.map((post, i) => {
            const src = [
              "img/journal-boutique.jpg",
              "img/shop-rack.jpg",
              "img/duna-detail.jpg",
            ][i];
            return (
              <article key={i} style={{ cursor: "pointer" }}>
                <ImageBlock
                  real
                  realSrc={src}
                  aspect="4/3"
                  focus="center"
                  hoverZoom
                />
                <div className="micro" style={{ marginTop: 16, color: "var(--terracotta)" }}>{post.tag}</div>
                <h4 className="display" style={{ fontSize: 22, fontWeight: 300, margin: "8px 0 6px", lineHeight: 1.2 }}>{post.title}</h4>
                <div className="mono" style={{ color: "var(--ink-40)" }}>{post.meta}</div>
              </article>
            );
          })}
        </div>
      </section>

      {/* Signature close */}
      <section className="q-section" style={{ textAlign: "center" }}>
        <SectionLabel>{lang === "en" ? "Designed by" : "Diseñado por"}</SectionLabel>
        <div style={{ marginTop: 24 }}>
          <FernandaMark size={72} />
        </div>
        <div className="mono" style={{ marginTop: 12, color: "var(--ink-40)" }}>NOSARA · GUANACASTE · CR</div>
      </section>
    </div>
  );
}

// ---------------- SHOP ----------------
function ShopPage({ lang, category = "all", go, wish, toggleWish, onOpen }) {
  const t = I18N[lang];
  const [cat, setCat] = useStateP(category);
  useEffectP(() => setCat(category), [category]);
  const [sort, setSort] = useStateP(0);

  const filtered = useMemoP(() => {
    let list = PRODUCTS.slice();
    if (cat === "suits") list = list.filter(p => p.category === "suits");
    if (cat === "onepiece") list = list.filter(p => p.category === "onepiece");
    if (cat === "bikini") list = list.filter(p => p.category === "bikini");
    if (sort === 2) list.sort((a,b) => a.price - b.price);
    if (sort === 3) list.sort((a,b) => b.price - a.price);
    return list;
  }, [cat, sort]);

  return (
    <div className="page-enter">
      {/* Collection masthead */}
      <section className="q-shop-mast-wrap" style={{ padding: "clamp(32px,6vw,56px) clamp(18px,4vw,32px) clamp(20px,4vw,32px)", borderBottom: "1px solid var(--hairline)" }}>
        <div className="q-shop-mast" style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "end", gap: 24 }}>
          <div>
            <SectionLabel align="left">Summer ’26 · La Marea</SectionLabel>
            <h1 className="display" style={{ fontSize: "clamp(44px, 7vw, 120px)", lineHeight: 0.95, fontWeight: 300, margin: "16px 0 12px", letterSpacing: "-0.02em" }}>
              <em style={{ fontStyle: "italic" }}>{t.shop.title}</em>
            </h1>
            <p style={{ fontSize: 15, color: "var(--ink-60)", maxWidth: 520, lineHeight: 1.6 }}>{t.shop.sub}</p>
          </div>
          <div className="script" style={{ fontSize: "clamp(44px,8vw,72px)", color: "var(--terracotta)", lineHeight: 1 }}>
            {filtered.length} <span style={{ fontSize: "clamp(14px,2vw,20px)", color: "var(--ink-60)" }}>{t.shop.countSuffix}</span>
          </div>
        </div>
      </section>

      {/* Category thumbnails strip */}
      <section style={{ padding: "24px clamp(18px,4vw,32px) 0" }}>
        <div className="q-grid-3 thumbs" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[
            { val: "suits",    label: t.shop.suits,    src: "img/samara-front.jpg" },
            { val: "onepiece", label: t.shop.onepiece, src: "img/olita-hero.jpg" },
            { val: "bikini",   label: t.shop.bikini,   src: "img/palma-hero.jpg" },
          ].map(c => (
            <button key={c.val} onClick={() => setCat(c.val)} style={{
              position: "relative", padding: 0, cursor: "pointer",
              border: cat === c.val ? "1px solid var(--ink)" : "1px solid transparent",
              overflow: "hidden", background: "transparent",
            }}>
              <ImageBlock real realSrc={c.src} aspect="3/1" focus="center 30%" hoverZoom />
              <div style={{ position: "absolute", inset: 0, background: cat === c.val ? "#1C1C1C33" : "#1C1C1C55", transition: "background 0.2s" }} />
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span className="display" style={{ fontSize: "clamp(20px,4vw,32px)", color: "var(--bone)", fontStyle: "italic", fontWeight: 300, letterSpacing: "-0.01em" }}>{c.label}</span>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* Filter / sort bar */}
      <section style={{ position: "sticky", top: 61, zIndex: 30, background: "var(--bone)", borderBottom: "1px solid var(--hairline)", padding: "14px clamp(18px,4vw,32px)" }}>
        <div className="q-filterbar" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <div className="q-filterbar-chips" style={{ display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap" }}>
            <span className="micro" style={{ color: "var(--ink-40)" }}>{t.shop.filterLabel}</span>
            {[
              ["all", t.shop.all],
              ["suits", t.shop.suits],
              ["onepiece", t.shop.onepiece],
              ["bikini", t.shop.bikini],
            ].map(([val, label]) => (
              <button key={val} onClick={() => setCat(val)} className="micro" style={{
                padding: "6px 0",
                color: cat === val ? "var(--ink)" : "var(--ink-60)",
                borderBottom: cat === val ? "1px solid var(--ink)" : "1px solid transparent",
              }}>{label}</button>
            ))}
          </div>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <span className="micro" style={{ color: "var(--ink-40)" }}>{t.shop.sortLabel}</span>
            <select value={sort} onChange={(e) => setSort(+e.target.value)} style={{
              background: "transparent", border: 0, borderBottom: "1px solid var(--ink-20)",
              padding: "4px 22px 4px 0",
              fontFamily: "var(--f-mono)", fontSize: 11, fontWeight: 400,
              color: "var(--ink)", letterSpacing: "0.22em", textTransform: "uppercase",
              cursor: "pointer",
              WebkitAppearance: "none", MozAppearance: "none", appearance: "none",
              backgroundImage: "linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)",
              backgroundPosition: "calc(100% - 10px) 55%, calc(100% - 5px) 55%",
              backgroundSize: "5px 5px, 5px 5px",
              backgroundRepeat: "no-repeat",
            }}>
              {t.shop.sortOpts.map((o, i) => <option key={i} value={i}>{o}</option>)}
            </select>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section style={{ padding: "clamp(32px,6vw,48px) clamp(18px,4vw,32px) 0" }}>
        <div className="q-grid-3 lookbook" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, rowGap: 72 }}>
          {filtered.map((p) => (
            <ProductCard
              key={p.id}
              p={p}
              lang={lang}
              onOpen={onOpen}
              wishOn={wish.includes(p.id)}
              onWish={() => toggleWish(p.id)}
            />
          ))}
        </div>
      </section>
    </div>
  );
}

// ---------------- PDP ----------------
function PDPPage({ lang, productId, go, wish, toggleWish, addToBag, onOpen }) {
  const t = I18N[lang].pdp;
  const p = PRODUCTS.find(x => x.id === productId) || PRODUCTS[0];
  const [colorIdx, setColorIdx] = useStateP(0);
  const [sizeIdx, setSizeIdx] = useStateP(-1);
  const [galleryIdx, setGalleryIdx] = useStateP(0);
  const [zoom, setZoom] = useStateP(null); // {x,y} in 0..1
  const [open, setOpen] = useStateP({ fit: true, fabric: false, care: false });
  const [adding, setAdding] = useStateP(false);

  const color = p.colors[colorIdx];

  // Reset when product/color changes
  useEffectP(() => { setGalleryIdx(0); }, [productId, colorIdx]);

  const gallery = [
    p.photo?.hero
      ? { label: `${p.name} · Front`, tone: color.tone, code: `01/04`, real: true, src: p.photo.hero }
      : { label: `${p.name} · Front`, tone: color.tone, code: `01/04` },
    p.photo?.detail
      ? { label: `${p.name} · Detail`, tone: color.tone, code: `02/04`, real: true, src: p.photo.detail }
      : { label: `${p.name} · Detail`, tone: color.tone === "ink" ? "warm" : color.tone, code: `02/04` },
    p.photo?.alt
      ? { label: `${p.name} · On model`, tone: "warm", code: `03/04`, real: true, src: p.photo.alt }
      : { label: `${p.name} · On model`, tone: "warm", code: `03/04`, real: true, src: "https://images.unsplash.com/photo-1483381616070-4c192e4ed9a3?w=1200&q=80" },
    { label: `${p.name} · Back`, tone: color.tone, code: `04/04` },
  ];

  const related = PRODUCTS.filter(x => x.id !== p.id && x.category === p.category).slice(0, 3);

  const handleAdd = () => {
    if (sizeIdx < 0 || p.oos.includes(p.sizes[sizeIdx])) return;
    setAdding(true);
    setTimeout(() => {
      addToBag({ id: p.id, color: color.id, size: p.sizes[sizeIdx] });
      setAdding(false);
    }, 400);
  };

  const imageRef = useRefP(null);

  return (
    <div className="page-enter">
      {/* Breadcrumb */}
      <div style={{ padding: "16px clamp(18px,4vw,32px)", borderBottom: "1px solid var(--hairline)" }}>
        <div className="micro" style={{ color: "var(--ink-60)" }}>
          <span onClick={() => go("shop")} style={{ cursor: "pointer" }}>{t.breadcrumb}</span>
          <span style={{ margin: "0 10px" }}>/</span>
          <span onClick={() => {
            const r = p.category === "onepiece" ? "shop-onepiece" : p.category === "suits" ? "shop-suits" : "shop-bikini";
            go(r);
          }} style={{ cursor: "pointer" }}>
            {p.category === "onepiece" ? I18N[lang].nav.onepiece : p.category === "suits" ? I18N[lang].nav.suits : I18N[lang].nav.bikini}
          </span>
          <span style={{ margin: "0 10px" }}>/</span>
          <span style={{ color: "var(--ink)" }}>{p.name}</span>
        </div>
      </div>

      <div className="q-pdp-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 0, alignItems: "flex-start" }}>
        {/* Gallery */}
        <div className="q-pdp-gallery" style={{ padding: 32, borderRight: "1px solid var(--hairline)" }}>
          <div
            ref={imageRef}
            onMouseMove={(e) => {
              const r = e.currentTarget.getBoundingClientRect();
              setZoom({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
            }}
            onMouseLeave={() => setZoom(null)}
            style={{ position: "relative", cursor: "zoom-in" }}
          >
            {gallery[galleryIdx].real ? (
              <ImageBlock
                real
                realSrc={gallery[galleryIdx].src}
                aspect="4/5"
                focus="center"
              />
            ) : (
              <ImageBlock
                tone={gallery[galleryIdx].tone}
                label={gallery[galleryIdx].label}
                code={`QR-${p.id.slice(0,3).toUpperCase()}-${color.id.slice(0,2).toUpperCase()} · ${gallery[galleryIdx].code}`}
                aspect="4/5"
              />
            )}
            {zoom && (
              <div style={{
                position: "absolute", top: 16, right: 16,
                background: "var(--bone)",
                padding: "6px 10px",
                fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
                border: "1px solid var(--ink)",
              }}>{t.zoom}</div>
            )}
            {zoom && !gallery[galleryIdx].real && (
              // simulated zoom overlay — magnified stripe shift
              <div style={{
                position: "absolute", inset: 0, pointerEvents: "none",
                backgroundImage: `repeating-linear-gradient(135deg, ${color.tone === "ink" ? "#1F1C19" : color.tone === "cool" ? "#D4DCC8" : "#EBD9C5"} 0 28px, ${color.tone === "ink" ? "#131110" : color.tone === "cool" ? "#C2CCB5" : "#E0CAB2"} 28px 56px)`,
                transformOrigin: `${zoom.x * 100}% ${zoom.y * 100}%`,
                transform: "scale(1.8)",
                mixBlendMode: "multiply",
                opacity: 0.9,
              }} />
            )}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8, marginTop: 12 }}>
            {gallery.map((g, i) => (
              <button key={i} onClick={() => setGalleryIdx(i)} style={{
                aspectRatio: "1/1", border: i === galleryIdx ? "1px solid var(--ink)" : "1px solid var(--ink-20)",
                padding: 0, cursor: "pointer", overflow: "hidden",
              }}>
                {g.real ? (
                  <div style={{ width: "100%", height: "100%", backgroundImage: `url(${g.src})`, backgroundSize: "cover", backgroundPosition: "center" }} />
                ) : (
                  <ImageBlock tone={g.tone} label="" aspect="auto" style={{ aspectRatio: "auto", height: "100%" }} />
                )}
              </button>
            ))}
          </div>
        </div>

        {/* Info column */}
        <div className="q-pdp-info" style={{ padding: 48, position: "sticky", top: 110 }}>
          {p.tag && <div className="micro" style={{ color: "var(--terracotta)", marginBottom: 14 }}>{p.tag[lang]}</div>}
          <h1 className="display" style={{ fontSize: "clamp(38px,6vw,54px)", lineHeight: 1, fontWeight: 300, margin: 0, letterSpacing: "-0.01em" }}>
            <em style={{ fontStyle: "italic" }}>{p.name}</em>
          </h1>
          <div style={{ fontSize: 15, color: "var(--ink-60)", marginTop: 8 }}>{p.subtitle[lang]}</div>
          <div className="mono" style={{ marginTop: 20, fontSize: 14 }}>{fmt(p.price)} USD</div>

          <hr className="hr" style={{ margin: "28px 0" }} />

          {/* color */}
          <div style={{ marginBottom: 24 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
              <span className="micro">{t.color}</span>
              <span className="mono" style={{ color: "var(--ink-60)" }}>{color.name[lang]}</span>
            </div>
            <div className="swatch-row">
              {p.colors.map((c, i) => (
                <button
                  key={c.id}
                  className={`swatch ${i === colorIdx ? "active" : ""}`}
                  style={{ background: c.hex, width: 32, height: 32 }}
                  onClick={() => setColorIdx(i)}
                  aria-label={c.name[lang]}
                />
              ))}
            </div>
          </div>

          {/* size */}
          <div style={{ marginBottom: 28 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
              <span className="micro">{t.size}</span>
              <button className="micro" style={{ color: "var(--ink-60)", textDecoration: "underline", textUnderlineOffset: 4 }}>{t.sizeGuide}</button>
            </div>
            <div className="size-row">
              {p.sizes.map((s, i) => {
                const oos = p.oos.includes(s);
                return (
                  <button key={s} className={`size ${sizeIdx === i ? "active" : ""} ${oos ? "oos" : ""}`} onClick={() => !oos && setSizeIdx(i)} disabled={oos}>
                    {s}
                  </button>
                );
              })}
            </div>
            {sizeIdx < 0 && <div className="mono" style={{ marginTop: 10, color: "var(--ink-40)" }}>{t.selectSize}</div>}
          </div>

          {/* add + wish */}
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn primary full" onClick={handleAdd} disabled={sizeIdx < 0 || adding}>
              {adding ? t.adding : (sizeIdx < 0 ? t.addToBag : `${t.addToBag} · ${fmt(p.price)}`)}
            </button>
            <WishHeart on={wish.includes(p.id)} onClick={() => toggleWish(p.id)} size={46} />
          </div>

          {/* Sticky mobile Add to Cart */}
          <div className="sticky-atc">
            <span className="price">{fmt(p.price)}</span>
            <WishHeart on={wish.includes(p.id)} onClick={() => toggleWish(p.id)} size={44} />
            <button className="btn primary" onClick={handleAdd} disabled={sizeIdx < 0 || adding}>
              {adding ? t.adding : (sizeIdx < 0 ? t.selectSize : t.addToBag)}
            </button>
          </div>

          {/* accordions */}
          <div style={{ marginTop: 36, borderTop: "1px solid var(--hairline)" }}>
            {[
              ["fit", t.fit, p.fit[lang]],
              ["fabric", t.fabric, p.materials[lang]],
              ["care", t.care, p.care[lang]],
            ].map(([key, label, body]) => (
              <div key={key} style={{ borderBottom: "1px solid var(--hairline)" }}>
                <button
                  onClick={() => setOpen(o => ({ ...o, [key]: !o[key] }))}
                  style={{ width: "100%", padding: "18px 0", display: "flex", justifyContent: "space-between", cursor: "pointer" }}
                >
                  <span className="micro">{label}</span>
                  <Icon name={open[key] ? "minus" : "plus"} size={14} />
                </button>
                {open[key] && (
                  <div style={{ fontSize: 13, lineHeight: 1.6, color: "var(--ink-60)", paddingBottom: 18, maxWidth: 420 }}>
                    {body}
                  </div>
                )}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 12, color: "var(--ink-60)" }}>
            <Sunburst size={20} color="var(--terracotta)" />
            <div style={{ fontSize: 12, letterSpacing: "0.04em" }}>
              <span className="script" style={{ fontSize: 18, color: "var(--ink)" }}>Hand-finished</span> in Nosara by our atelier.
            </div>
          </div>
        </div>
      </div>

      {/* Pairs with */}
      <section className="q-section">
        <SectionLabel align="left">{t.pairs}</SectionLabel>
        <div className="q-grid-3 lookbook" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 32 }}>
          {related.map(r => (
            <ProductCard key={r.id} p={r} lang={lang} onOpen={onOpen} wishOn={wish.includes(r.id)} onWish={() => toggleWish(r.id)} />
          ))}
        </div>
      </section>
    </div>
  );
}

// ---------------- STORY ----------------
function StoryPage({ lang, go }) {
  const t = I18N[lang].story;
  return (
    <div className="page-enter">
      {/* Hero */}
      <section className="q-section tight">
        <div className="q-grid-2 tight" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, alignItems: "stretch" }}>
          <ImageBlock
            real
            realSrc="assets/fernanda-sunset.png"
            aspect="3/4"
            focus="center 30%"
          />
          <div style={{ padding: "clamp(24px,4vw,48px)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <SectionLabel align="left">{t.eyebrow}</SectionLabel>
            <h1 className="display" style={{ fontSize: "clamp(44px, 6vw, 108px)", lineHeight: 0.95, fontWeight: 300, margin: "20px 0 0", letterSpacing: "-0.02em" }}>
              <em style={{ fontStyle: "italic" }}>Fernanda</em><br/>Rodriguez
            </h1>
            <p className="script" style={{ fontSize: "clamp(26px,4vw,36px)", color: "var(--terracotta)", margin: "20px 0 32px", lineHeight: 1.1 }}>{t.tagline}</p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--ink-60)", maxWidth: 460 }}>{t.body1}</p>
          </div>
        </div>
      </section>

      {/* Pull quote */}
      <section className="q-section">
        <div style={{ maxWidth: 960, margin: "0 auto", textAlign: "center" }}>
          <Sunburst size={32} color="var(--terracotta)" />
          <blockquote className="display" style={{ fontSize: "clamp(24px, 4vw, 56px)", lineHeight: 1.2, fontWeight: 300, margin: "32px 0 0", fontStyle: "italic" }}>
            {t.body2}
          </blockquote>
          <div className="script" style={{ fontSize: 28, color: "var(--terracotta)", marginTop: 32 }}>— Fernanda</div>
        </div>
      </section>

      {/* Third para + wider image */}
      <section className="q-section">
        <div className="q-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "center" }}>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--ink-60)" }}>{t.body3}</p>
          <ImageBlock
            real
            realSrc="assets/fernanda-ladder.png"
            aspect="16/10"
            focus="center 30%"
          />
        </div>
      </section>

      {/* Atelier columns */}
      <section className="q-section">
        <SectionLabel>{t.colLabel}</SectionLabel>
        <div className="q-grid-3 atelier" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 40 }}>
          {[
            [t.col1H, t.col1B, "assets/fernanda-swing.png"],
            [t.col2H, t.col2B, "img/coco-hanger.jpg"],
            [t.col3H, t.col3B, "img/duna-detail.jpg"],
          ].map(([h, b, src], i) => (
            <div key={i}>
              <ImageBlock real realSrc={src} aspect="4/5" focus="center" hoverZoom />
              <h4 className="display" style={{ fontSize: "clamp(22px,3vw,26px)", fontWeight: 300, margin: "20px 0 8px" }}>{h}</h4>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-60)" }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Visit */}
      <section className="q-section">
        <div className="q-visit-grid" style={{ background: "var(--sand)", padding: "clamp(48px,8vw,80px) clamp(28px,5vw,48px)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <SectionLabel align="left">{t.visitLabel}</SectionLabel>
            <h3 className="display" style={{ fontSize: "clamp(36px,5vw,48px)", fontWeight: 300, margin: "20px 0 16px", letterSpacing: "-0.02em" }}>
              <em style={{ fontStyle: "italic" }}>La Casita.</em>
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink-60)", maxWidth: 420 }}>{t.visitBody}</p>
            <p className="mono" style={{ marginTop: 20 }}>{t.address}</p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 28 }}>
              <a className="btn primary" href={t.mapUrl} target="_blank" rel="noopener noreferrer">
                {t.mapCta} <Icon name="arrow-right" size={14} />
              </a>
              <button className="btn" onClick={() => go("shop")}>
                {lang === "en" ? "Shop the collection" : "Ver la colección"} <Icon name="arrow-right" size={14} />
              </button>
            </div>
          </div>
          <div>
            <a href={t.mapUrl} target="_blank" rel="noopener noreferrer" style={{ display: "block", position: "relative" }}>
              <iframe
                src="https://www.google.com/maps?q=9.9445,-85.6669&z=14&output=embed"
                style={{ width: "100%", height: 360, border: "1px solid var(--ink-20)", filter: "grayscale(0.3) contrast(0.95)" }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Quiero Atelier — Nosara, Costa Rica"
              />
              <div style={{ textAlign: "center", marginTop: 16 }}>
                <FernandaMark size={52} />
                <div className="mono" style={{ marginTop: 8, color: "var(--ink-60)" }}>Founder & designer · est. MMXXI</div>
              </div>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------------- CART DRAWER ----------------
function CartDrawer({ open, onClose, lang, bag, setBag, go }) {
  const t = I18N[lang].cart;

  const lines = bag.map(item => {
    const p = PRODUCTS.find(x => x.id === item.id);
    const c = p.colors.find(x => x.id === item.color);
    return { ...item, p, c };
  });
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);

  const updateQty = (idx, delta) => {
    setBag(prev => {
      const next = prev.map((l, i) => i === idx ? { ...l, qty: Math.max(0, l.qty + delta) } : l).filter(l => l.qty > 0);
      return next;
    });
  };
  const removeLine = (idx) => setBag(prev => prev.filter((_, i) => i !== idx));

  return (
    <>
      <div className={`drawer-overlay ${open ? "open" : ""}`} onClick={onClose} />
      <aside className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="drawer-head">
          <div className="title">{t.title}</div>
          <button onClick={onClose} aria-label="Close"><Icon name="x" size={18} /></button>
        </div>
        <div className="drawer-body">
          {lines.length === 0 ? (
            <div style={{ padding: "40px 0", textAlign: "center" }}>
              <Sunburst size={36} color="var(--terracotta)" />
              <p style={{ marginTop: 20, fontSize: 15, color: "var(--ink-60)" }}>{t.empty}</p>
              <button className="btn" style={{ marginTop: 20 }} onClick={() => { onClose(); go("shop"); }}>{t.emptyCta}</button>
            </div>
          ) : (
            lines.map((l, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "88px 1fr", gap: 16, padding: "20px 0", borderBottom: "1px solid var(--hairline)" }}>
                <ImageBlock tone={l.c.tone} label={l.p.name} aspect="3/4" style={{ aspectRatio: "3/4" }} />
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                    <div>
                      <div className="display" style={{ fontSize: 18, fontWeight: 300 }}>{l.p.name}</div>
                      <div className="mono" style={{ color: "var(--ink-60)", marginTop: 4 }}>{l.c.name[lang]} · {l.size}</div>
                    </div>
                    <div className="mono">{fmt(l.p.price * l.qty)}</div>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 }}>
                    <div style={{ display: "inline-flex", border: "1px solid var(--ink-20)" }}>
                      <button onClick={() => updateQty(i, -1)} style={{ padding: "6px 10px", cursor: "pointer" }}><Icon name="minus" size={12} /></button>
                      <span style={{ padding: "6px 12px", fontFamily: "var(--f-mono)", fontSize: 12 }}>{l.qty}</span>
                      <button onClick={() => updateQty(i, 1)} style={{ padding: "6px 10px", cursor: "pointer" }}><Icon name="plus" size={12} /></button>
                    </div>
                    <button onClick={() => removeLine(i)} className="micro" style={{ color: "var(--ink-60)", cursor: "pointer" }}>{t.remove}</button>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
        {lines.length > 0 && (
          <div className="drawer-foot">
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
              <span className="micro">{t.subtotal}</span>
              <span className="display" style={{ fontSize: 22, fontWeight: 300 }}>{fmt(subtotal)}</span>
            </div>
            <div className="mono" style={{ color: "var(--ink-60)", marginBottom: 16 }}>{t.shipping}</div>
            <button className="btn primary full">{t.checkout} <Icon name="arrow-right" size={14} /></button>
            <button className="btn ghost full" style={{ marginTop: 8 }} onClick={onClose}>{t.continue}</button>
          </div>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { HomePage, ShopPage, PDPPage, StoryPage, CartDrawer });