/* Direction 03 — MANIFESTO (v2 · cleaner)
   Editorial broadside. Bold editorial serif (Bodoni / Cormorant / Newsreader).
   Lighter warm background, much more breathing room, Bergen color pops.
*/

const { useState: useState03, useEffect: useEffect03 } = React;

function ManifestoDirection({ lang, setLang, accent, products, copy, drop, redactedName, revealAll, palette, showTroll }) {
  const cart = useCart();
  const cd = useCountdown(drop.iso);

  const paper = "#efe7d6";
  const ink   = "#222222";

  const f = { stack: "'Newsreader', 'Times New Roman', serif", body: 500, display: 600 };

  return (
    <div style={{
      background: ink, color: "#ece5d8", minHeight: "100vh",
      fontFamily: "var(--mf-serif)",
      fontWeight: "var(--mf-body-weight, 500)",
      ['--mf-serif']: f.stack,
      ['--mf-body-weight']: f.body,
      ['--mf-display-weight']: f.display,
    }}>
      {/* Global mobile clamps — prevents horizontal overflow that
          otherwise makes mobile Safari auto-zoom out to fit. */}
      <style>{`
        @media (max-width: 760px) {
          #manifesto { padding: 96px 22px 96px !important; }
          #manifesto h2 { font-size: clamp(34px, 9vw, 56px) !important; }
          #inventory  { padding: 96px 22px !important; }
          #archive    { padding: 56px 22px 28px !important; }
        }
        @media (max-width: 480px) {
          #manifesto { padding: 80px 18px 80px !important; }
          #inventory  { padding: 80px 18px !important; }
        }
      `}</style>

      <MfNav lang={lang} setLang={setLang} accent={accent} cart={cart} cd={cd} revealAll={revealAll} />
      <MfMasthead lang={lang} accent={accent} cd={cd} drop={drop} redactedName={redactedName} palette={palette} />
      <MfBergenStrip palette={palette} />
      <MfLetter lang={lang} accent={accent} copy={copy} revealAll={revealAll} paper={paper} />
      <MfInventory lang={lang} accent={accent} products={products} cart={cart} />
      <MfMarginalia lang={lang} accent={accent} copy={copy} showTroll={showTroll} />
      <MfFooter lang={lang} accent={accent} drop={drop} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// NAV — minimal site-level navigation + mobile overlay menu
// ─────────────────────────────────────────────────────────────────
function MfNav({ lang, setLang, accent, cart, cd, revealAll }) {
  const pages = window.DROP_DATA.nav.pages;
  const [open, setOpen] = useState03(false);
  const [isMobile, setIsMobile] = useState03(typeof window !== 'undefined' && window.innerWidth < 768);

  useEffect03(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // Lock body scroll while mobile overlay is open
  useEffect03(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  // Close overlay on Esc
  useEffect03(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  if (window.AWO_HEADER_RENDERED) return null;
  return (
    <>
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(34,34,34,0.88)", backdropFilter: "blur(10px)",
      padding: "6px 4vw",
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr auto" : "1fr auto 1fr",
      alignItems: "center", gap: 24,
    }}>
      {!isMobile && (
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.32em",
          color: "rgba(236,229,216,0.45)", textTransform: "uppercase",
        }}>
          № 01 · {lang === "no" ? "Første utgave" : lang === "es" ? "Primera edición" : "First edition"}
        </div>
      )}

      <a href="#top" data-comment-anchor="mf-logo" data-interactive="true"
         onClick={(e) => { e.preventDefault(); scrollToId("top"); }}
         style={{
           textDecoration: "none", color: accent,
           display: "flex", alignItems: "center",
           justifySelf: isMobile ? "start" : "center",
         }}>
        <Logo color={accent} height={isMobile ? 36 : "clamp(40px, 7vw, 84px)"} />
      </a>

      {/* Desktop right side */}
      {!isMobile && (
        <div style={{
          display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 22,
        }}>
          <nav style={{ display: "flex", gap: 22 }}>
            {pages.map(p => (
              <a key={p.id} href={p.href} data-interactive="true"
                 style={{
                   fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
                   color: "rgba(236,229,216,0.78)", textTransform: "uppercase", textDecoration: "none",
                 }}>{p[lang]}</a>
            ))}
          </nav>
          <LangToggle lang={lang} setLang={setLang} accent={accent} />
          <a href={awoLink('cart', 'cart/')} data-interactive="true" style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
            color: "#ece5d8", textTransform: "uppercase", textDecoration: "none",
          }}>
            ({String(cart.total).padStart(2, "0")})
          </a>
        </div>
      )}

      {/* Mobile right group — language toggle + hamburger */}
      {isMobile && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, justifySelf: 'end' }}>
          <LangToggle lang={lang} setLang={setLang} accent={accent} />
          <button
            data-interactive="true"
            aria-label="Open menu"
            aria-expanded={open}
            onClick={() => setOpen(true)}
            style={{
              border: 0, background: 'transparent', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', gap: 5, padding: '10px 2px',
              color: '#ece5d8',
            }}>
            <span style={{ width: 22, height: 1.5, background: 'currentColor', display: 'block' }} />
            <span style={{ width: 22, height: 1.5, background: 'currentColor', display: 'block' }} />
            <span style={{ width: 22, height: 1.5, background: 'currentColor', display: 'block' }} />
          </button>
        </div>
      )}
    </header>

    {/* Mobile overlay menu — rendered as a SIBLING of <header>, not inside.
        The header uses backdrop-filter which creates a containing block for
        position:fixed descendants, which would clip the menu to the header. */}
    {isMobile && open && (
      <MobileMenu
        pages={pages} lang={lang} setLang={setLang} accent={accent}
        cart={cart} onClose={() => setOpen(false)}
      />
    )}
    </>
  );
}

function MobileMenu({ pages, lang, setLang, accent, cart, onClose }) {
  // Translucent smoked-glass treatment — mirrors the header chrome
  // (rgba dark + backdrop blur) rather than a solid page.
  const paper = 'rgba(28,28,28,0.80)';
  const ink = '#ece5d8';
  const rule = 'rgba(236,229,216,0.14)';
  return (
    <div role="dialog" aria-modal="true" style={{
      position: 'fixed', inset: 0, zIndex: 80,
      background: paper,
      WebkitBackdropFilter: 'blur(22px) saturate(135%)',
      backdropFilter: 'blur(22px) saturate(135%)',
      color: ink,
      display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px',
      opacity: 1,
      overflowY: 'auto',
    }}>
      <style>{`
        @keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes mm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
      `}</style>

      {/* Top bar — logo + close */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 36,
      }}>
        <Logo color={ink} height={32} />
        <button
          data-interactive="true"
          aria-label="Close menu"
          onClick={onClose}
          style={{
            border: 0, background: 'transparent', cursor: 'pointer',
            color: ink, padding: 8, lineHeight: 1,
            fontSize: 28, fontFamily: "'JetBrains Mono', monospace",
          }}>
          ×
        </button>
      </div>

      {/* Edition meta strip */}
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.32em",
        color: "rgba(236,229,216,0.5)", textTransform: "uppercase",
        paddingBottom: 14, borderBottom: `1px solid ${rule}`, marginBottom: 4,
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>№ 01 · {lang === 'no' ? 'Første utgave' : 'First edition'}</span>
        <span>BGO</span>
      </div>

      {/* Primary nav — big numbered serif items, hairline separators */}
      <nav style={{ display: 'flex', flexDirection: 'column' }}>
        {pages.map((p, i) => (
          <a key={p.id} href={p.href} onClick={onClose}
             data-interactive="true"
             style={{
               fontFamily: "var(--mf-serif, 'Newsreader', serif)",
               fontStyle: "italic", fontWeight: 600,
               fontSize: 'clamp(40px, 11.5vw, 64px)',
               lineHeight: 1.0, letterSpacing: '-0.02em',
               color: ink, textDecoration: 'none',
               display: 'flex', alignItems: 'baseline', gap: 16,
               padding: '22px 0',
               borderBottom: `1px solid ${rule}`,
               animation: `mm-rise 320ms ease both ${80 + i * 60}ms`,
             }}>
            <span style={{
              fontFamily: "'JetBrains Mono', monospace", fontStyle: 'normal',
              fontSize: 11, letterSpacing: '0.26em', color: accent,
              alignSelf: 'flex-start', paddingTop: 8,
              fontWeight: 500, minWidth: 28,
            }}>0{i + 1}</span>
            <span style={{ flex: 1 }}>{p[lang]}</span>
            <span aria-hidden="true" style={{
              fontFamily: "'JetBrains Mono', monospace", fontStyle: 'normal',
              fontSize: 14, color: 'rgba(236,229,216,0.4)', fontWeight: 400,
              alignSelf: 'center',
            }}>→</span>
          </a>
        ))}
      </nav>

      {/* Secondary links — like the refs (FAQ / Contact / etc) */}
      <div style={{
        marginTop: 32,
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.3em",
          color: "rgba(236,229,216,0.45)", textTransform: "uppercase", marginBottom: 4,
        }}>{lang === 'no' ? 'Mer' : lang === 'es' ? 'Más' : 'More'}</div>
        {[
          { href: awoLink('faq', 'faq/'),         en: 'FAQ',      no: 'FAQ',     es: 'FAQ' },
          { href: 'mailto:info@awotowa.com',      en: 'Contact',  no: 'Kontakt', es: 'Contacto' },
        ].map((s, i) => (
          <a key={s.en} href={s.href} onClick={onClose} data-interactive="true" style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: '0.16em',
            color: ink, textDecoration: 'none', textTransform: 'uppercase',
            padding: '4px 0',
          }}>{s[lang]}</a>
        ))}
      </div>

      {/* Footer: lang toggle + cart */}
      <div style={{
        marginTop: 'auto',
        paddingTop: 24,
        borderTop: `1px solid ${rule}`,
        display: 'flex',
      }}>
        <a href={awoLink('cart', 'cart/')} data-interactive="true" onClick={onClose}
          style={{
            flex: 1, textAlign: 'center',
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.28em",
            color: ink, textTransform: "uppercase", textDecoration: "none",
            border: `1px solid ${rule}`,
            padding: '14px', borderRadius: 8,
          }}>
          {lang === 'no' ? 'KURV' : lang === 'es' ? 'CARRITO' : 'CART'} ({String(cart.total).padStart(2, "0")})
        </a>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// MASTHEAD — magazine cover, asymmetric, cleaner
// ─────────────────────────────────────────────────────────────────
function MfMasthead({ lang, accent, cd, drop, redactedName, palette }) {
  return (
    <section id="top" style={{
      position: "relative",
      padding: "24px 4vw 32px",
      display: "flex", flexDirection: "column",
      borderBottom: "1px solid rgba(236,229,216,0.08)",
    }}>
      {/* huge editorial title — content packs at top, no forced gap */}
      <div style={{ marginTop: 0, maxWidth: 1400, flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-start", gap: 56 }}>
        <div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.34em",
          color: "rgba(236,229,216,0.55)", textTransform: "uppercase", marginBottom: 24,
        }}>
          {lang === "no" ? "Til den det måtte angå —" : lang === "es" ? "A quien corresponda —" : "To whom it may concern —"}
        </div>

        <h1 style={{
          margin: 0,
          fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-display-weight, 700)",
          fontSize: "clamp(44px, 8vw, 130px)", lineHeight: 0.95, letterSpacing: "-0.04em",
          color: "#ece5d8",
        }}>
          <div style={{ fontStyle: "italic", marginLeft: "-0.03em" }}>
            {lang === "no" ? "Dette" : lang === "es" ? "Esto" : "This"}
          </div>
          <div>
            {lang === "no" ? "er ikke et" : lang === "es" ? "no es una" : "is not a"}
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 22, flexWrap: "wrap" }}>
            <span style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: "0.78em",
              letterSpacing: "0.06em", color: accent, alignSelf: "center",
              border: `0.06em solid ${accent}`, padding: "0.08em 0.3em",
              transform: "translateY(-0.06em) rotate(-4deg)",
              transformOrigin: "center",
              fontWeight: 800,
              whiteSpace: "nowrap",
              boxShadow: "0.06em 0.08em 0 rgba(0,0,0,0.35)",
              background: "rgba(34,34,34,0.55)",
              display: "inline-block",
              lineHeight: 1,
            }}>{lang === "no" ? "MERKE" : lang === "es" ? "MARCA" : "BRAND"}</span>
            <span>.</span>
          </div>
        </h1>
        </div>

        {/* footer of masthead */}
        <div style={{
          marginTop: 0,
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: "32px 40px",
          alignItems: "end",
          maxWidth: 1200,
        }}>
          <p style={{
            margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-body-weight, 500)",
            fontSize: 22, lineHeight: 1.4, color: "rgba(236,229,216,0.85)", maxWidth: 480,
          }}>
            {lang === "no"
              ? "Seks plagg. Én by. Ingen navn. Du leser dette fordi noen mente at du burde."
              : "Six garments. One city. No name. You are reading this because someone thought you should."}
          </p>

          <div data-thread-anchor="masthead-mark">
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
              color: "rgba(236,229,216,0.55)", textTransform: "uppercase", marginBottom: 10,
            }}>{lang === "no" ? "Åpner om" : lang === "es" ? "Abre en" : "Opens in"}</div>
            <div style={{
              fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-body-weight, 500)", fontSize: 56, lineHeight: 1,
              color: "#ece5d8", display: "flex", alignItems: "baseline", gap: 12,
            }}>
              <span>{cd.d}</span>
              <span style={{ fontSize: 14, letterSpacing: "0.28em", fontFamily: "'JetBrains Mono', monospace", color: "rgba(236,229,216,0.55)" }}>
                {lang === "no" ? "dager" : lang === "es" ? "días" : "days"}
              </span>
            </div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.16em",
              color: "rgba(236,229,216,0.6)", marginTop: 6,
            }}>{cd.h}h {cd.m}m {cd.s}s</div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <MfButton primary accent={accent} onClick={() => scrollToId("manifesto")}>
              {lang === "no" ? "LES BREVET" : lang === "es" ? "LEE LA CARTA" : "READ THE LETTER"}
            </MfButton>
            <MfButton accent={accent} onClick={() => scrollToId("inventory")}>
              {lang === "no" ? "SE PLAGGENE" : lang === "es" ? "VER LAS PRENDAS" : "SEE THE GARMENTS"}
            </MfButton>
          </div>
        </div>
      </div>
    </section>
  );
}

function MfButton({ children, primary, accent, onClick }) {
  const [hov, setHov] = useState03(false);
  return (
    <button data-interactive="true"
      onClick={() => { onClick?.(); haptic(14); }}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        padding: "14px 22px", cursor: "pointer",
        fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.26em",
        textTransform: "uppercase",
        background: primary ? (hov ? "#ece5d8" : "transparent") : "transparent",
        color: primary ? (hov ? "#222222" : "#ece5d8") : "rgba(236,229,216,0.85)",
        border: primary ? "1px solid #ece5d8" : "1px solid rgba(236,229,216,0.25)",
        borderRadius: 8,
        transition: "all 180ms ease",
        textAlign: "left",
      }}>
      {children} →
    </button>
  );
}

// ─────────────────────────────────────────────────────────────────
// Bergen color strip — under masthead
// ─────────────────────────────────────────────────────────────────
function MfBergenStrip({ palette }) {
  const segments = [
    palette.red, palette.cream, palette.ochre, palette.copper,
    palette.orange, palette.cream, palette.red,
  ];
  return (
    <div style={{ display: "flex", height: 8 }}>
      {segments.map((c, i) => (
        <div key={i} style={{ flex: 1, background: c }} />
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// LETTER — single-column letter on warm paper, very editorial
// ─────────────────────────────────────────────────────────────────
function MfLetter({ lang, accent, copy, revealAll, paper }) {
  return (
    <section id="manifesto" style={{
      padding: "160px 48px 140px",
      background: paper, color: "#1a1410",
    }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        {/* header */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          paddingBottom: 22, borderBottom: "1px solid rgba(26,20,16,0.22)",
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.32em",
          color: "rgba(26,20,16,0.55)", textTransform: "uppercase",
        }}>
          <span>Letter № 01</span>
          <span>Bergen / 14.06.26</span>
        </div>

        <h2 style={{
          margin: "60px 0 0",
          fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-display-weight, 700)", fontStyle: "italic",
          fontSize: "clamp(40px, 5.4vw, 78px)", lineHeight: 1.05, letterSpacing: "-0.015em",
          color: "#1a1410",
          textWrap: "balance",
        }}>
          {lang === "no" ? "Et brev fra ingen, til hvem som helst." : lang === "es" ? "Una carta de nadie, para cualquiera." : "A letter from no one, to anyone."}
        </h2>

        <p style={{
          marginTop: 56,
          fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-body-weight, 500)", fontSize: 22, lineHeight: 1.65,
          color: "#1a1410",
        }}>
          <span style={{
            float: "left",
            fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-display-weight, 700)",
            fontSize: 110, lineHeight: 0.82, marginRight: 14, marginTop: 8, color: "#1a1410",
          }}>{lang === "no" ? "K" : "Y"}</span>
          <RedactedRich tokens={copy.manifesto[lang]} revealAll={revealAll} accent={accent} />
        </p>

        <p style={{
          marginTop: 32,
          fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-body-weight, 500)", fontStyle: "italic",
          fontSize: 22, lineHeight: 1.65, color: "rgba(26,20,16,0.75)",
        }}>
          {lang === "no"
            ? "Lageret er allerede ferdig. Når seks er borte, er seks borte."
            : "The inventory is already finished. When six are gone, six are gone."}
        </p>

        {/* signature */}
        <div data-thread-anchor="letter-mark" style={{
          marginTop: 100, display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          gap: 40, flexWrap: "wrap",
        }}>
          <div>
            <div style={{
              fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-display-weight, 700)",
              fontSize: "clamp(36px, 6vw, 52px)", lineHeight: 1, color: "#1a1410",
              textDecoration: "line-through", textDecorationColor: accent, textDecorationThickness: 1.5,
            }}>{lang === "no" ? "Med hilsen," : lang === "es" ? "Atentamente," : "Yours sincerely,"}</div>
            <div style={{
              marginTop: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em",
              color: "rgba(26,20,16,0.55)", textTransform: "uppercase",
            }}>{lang === "no" ? "(navn unndratt av forfatteren)" : lang === "es" ? "(nombre omitido por el autor)" : "(name redacted by author)"}</div>
          </div>
          <div style={{
            color: accent,
            fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.32em",
          }}>
            ⚑ ANON · BGO
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// INVENTORY — alternating asymmetric editorial pairs
// ─────────────────────────────────────────────────────────────────
function MfInventory({ lang, accent, products, cart }) {
  const totalUnits = products.reduce((a, p) => a + (Number(p.units) || 0), 0);
  const hasUnits = products.some(p => p.units != null);
  return (
    <section id="inventory" style={{ padding: "160px 48px", maxWidth: 1400, margin: "0 auto" }}>
      <div data-thread-anchor="inventory-mark" style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        paddingBottom: 22, borderBottom: "1px solid rgba(236,229,216,0.18)",
        marginBottom: 88,
        gap: 32, flexWrap: "wrap",
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.34em",
          color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
        }}>{lang === "no" ? "Plagg" : lang === "es" ? "Prendas" : "Garments"} · {String(products.length).padStart(2, "0")}</div>
        <h2 style={{
          margin: 0, fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-display-weight, 700)", fontStyle: "italic",
          fontSize: "clamp(40px, 8vw, 110px)", lineHeight: 0.95, letterSpacing: "-0.025em",
          color: "#ece5d8",
        }}>
          {lang === "no" ? "Lageret." : lang === "es" ? "El inventario." : "The inventory."}
        </h2>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
          color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
        }}>
          {hasUnits
            ? `${totalUnits} ${lang === "no" ? "enheter totalt" : lang === "es" ? "unidades totales" : "units total"}`
            : (lang === "no" ? "Fast lager" : lang === "es" ? "Inventario fijo" : "Fixed inventory")}
        </div>
      </div>

      <div className="mf-inventory-grid">
        {products.map((p, i) => (
          <MfProductCard key={p.id} p={p} idx={i} lang={lang} accent={accent} onAdd={() => cart.add(p.id)} inCart={cart.items[p.id]} />
        ))}
      </div>

      <style>{`
        .mf-inventory-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 120px 80px;
        }
        @media (max-width: 768px) {
          .mf-inventory-grid {
            grid-template-columns: 1fr;
            gap: 64px;
          }
        }
      `}</style>
    </section>
  );
}

function MfProductCard({ p, idx, lang, accent, onAdd, inCart }) {
  const [hov, setHov] = useState03(false);
  const align = idx % 2 === 0 ? "right" : "left";
  return (
    <div
      className="mf-product-card"
      data-align={align}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}>
      {align === "right" ? (
        <>
          <div className="mf-product-img"><MfPlaceholder p={p} lang={lang} hov={hov} /></div>
          <div className="mf-product-meta"><MfProductMeta p={p} idx={idx} lang={lang} accent={accent} onAdd={onAdd} inCart={inCart} hov={hov} /></div>
        </>
      ) : (
        <>
          <div className="mf-product-meta"><MfProductMeta p={p} idx={idx} lang={lang} accent={accent} onAdd={onAdd} inCart={inCart} hov={hov} align="right" /></div>
          <div className="mf-product-img"><MfPlaceholder p={p} lang={lang} hov={hov} /></div>
        </>
      )}
      <style>{`
        .mf-product-card {
          display: grid;
          gap: 36px;
          align-items: start;
        }
        .mf-product-card[data-align="right"] { grid-template-columns: 220px 1fr; }
        .mf-product-card[data-align="left"]  { grid-template-columns: 1fr 220px; }
        @media (max-width: 768px) {
          .mf-product-card,
          .mf-product-card[data-align="right"],
          .mf-product-card[data-align="left"] {
            grid-template-columns: 1fr;
            gap: 20px;
          }
          /* Force consistent stack: image first, meta below — regardless
             of the alternating layout used on desktop. */
          .mf-product-card .mf-product-img  { order: 1; }
          .mf-product-card .mf-product-meta { order: 2; text-align: left !important; }
          .mf-product-card .mf-product-meta > div { text-align: left !important; }
          .mf-product-card .mf-product-meta [data-cta-row] { justify-content: flex-start !important; }
        }
      `}</style>
    </div>
  );
}

function MfPlaceholder({ p, lang, hov }) {
  return (
    <div style={{
      transition: "transform 280ms ease",
      transform: hov ? "translateY(-4px)" : "none",
    }}>
      <GarmentPlaceholder swatch={p.swatch} lot={p.lot} label={txField(p.cat, lang)} image={p.image} ratio={1.4} />
    </div>
  );
}

function MfProductMeta({ p, idx, lang, accent, onAdd, inCart, hov, align }) {
  return (
    <div style={{ textAlign: align || "left", display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em",
        color: "rgba(236,229,216,0.5)", textTransform: "uppercase",
      }}>№ {String(idx + 1).padStart(2, "0")} · {p.lot}</div>

      <h3 className="mf-prod-name" style={{
        margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-display-weight, 700)",
        fontSize: "clamp(32px, 4.4vw, 54px)", lineHeight: 1.02, color: "#ece5d8",
        textWrap: "balance",
      }}>{txField(p.name, lang)}</h3>

      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em",
        color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
      }}>{txField(p.cat, lang)}{p.units != null ? ` · ${String(p.units).padStart(3, "0")} ${lang === "no" ? "enheter" : lang === "es" ? "unidades" : "units"}` : ""}</div>

      <div
        data-cta-row
        style={{
        display: "flex", alignItems: "center", gap: 20, marginTop: 14,
        justifyContent: align === "right" ? "flex-end" : "flex-start",
      }}>
        <span style={{
          fontFamily: "var(--mf-serif)", fontSize: 30, color: "#ece5d8",
        }}>{formatPrice(p.price, lang)}</span>
        {p.href ? (
          <a data-interactive="true"
            href={p.href}
            style={{
              border: `1px solid ${hov ? accent : "rgba(236,229,216,0.3)"}`,
              background: hov ? accent : "transparent",
              color: hov ? "#fff" : "rgba(236,229,216,0.85)",
              padding: "9px 16px", cursor: "pointer", textDecoration: "none",
              borderRadius: 8, whiteSpace: "nowrap",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.26em",
              transition: "all 180ms",
            }}>
            {lang === "no" ? "RESERVER" : lang === "es" ? "RESERVAR" : "RESERVE"} →
          </a>
        ) : (
          <button data-interactive="true"
            onClick={onAdd}
            style={{
              border: `1px solid ${hov ? accent : "rgba(236,229,216,0.3)"}`,
              background: hov ? accent : "transparent",
              color: hov ? "#fff" : "rgba(236,229,216,0.85)",
              padding: "9px 16px", cursor: "pointer",
              borderRadius: 8,
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.26em",
              transition: "all 180ms",
            }}>
            {inCart ? `+ ${String(inCart).padStart(2, "0")}` : (lang === "no" ? "RESERVER" : lang === "es" ? "RESERVAR" : "RESERVE")} →
          </button>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// MARGINALIA — dead drops as a literary index
// ─────────────────────────────────────────────────────────────────
function MfMarginalia({ lang, accent, copy, showTroll }) {
  return (
    <section id="transmission" className="mf-marginalia" style={{
      padding: "160px 48px 140px",
      borderTop: "1px solid rgba(236,229,216,0.1)",
      position: "relative",
    }}>
      <div className="mf-marg-inner" style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 100, alignItems: "start" }}>
        <div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.34em",
            color: "rgba(236,229,216,0.55)", textTransform: "uppercase", marginBottom: 16,
          }}>{lang === "no" ? "Marginalnotater" : lang === "es" ? "Notas al margen" : "Marginalia"}</div>
          <h2 style={{
            margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-display-weight, 700)",
            fontSize: "clamp(40px, 6.4vw, 90px)", lineHeight: 0.98, color: "#ece5d8",
            letterSpacing: "-0.02em",
          }}>{lang === "no" ? "Hvor å finne oss." : lang === "es" ? "Dónde encontrarnos." : "Where to find us."}</h2>
          <p style={{
            marginTop: 32, fontFamily: "var(--mf-serif)", fontSize: 22, lineHeight: 1.55,
            fontWeight: "var(--mf-body-weight, 500)", color: "rgba(236,229,216,0.72)", maxWidth: 400,
          }}>
            {lang === "no"
              ? "Vi etterlater plagg på fem steder i Bergen, i rotasjon. Det er ingen ordre. Det er ingen kø."
              : "We leave garments in five places across Bergen, in rotation. There is no order. There is no queue."}
          </p>
        </div>

        <ol data-thread-anchor="dropdrops-mark" className="mf-drops-list" style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", position: "relative" }}>
          {copy.deadDrops.items.map((d, i) => {
            const active = (d.status[lang] === (lang === "no" ? "AKTIV" : lang === "es" ? "ACTIVO" : "ACTIVE"));
            const dark = (d.status[lang] === (lang === "no" ? "MØRK" : lang === "es" ? "OSCURO" : "DARK"));
            return (
              <li key={d.code} data-interactive="true" className="mf-drop-item" style={{
                display: "grid", gridTemplateColumns: "70px 1fr auto",
                gap: 28, alignItems: "baseline",
                padding: "28px 0", borderBottom: i < 4 ? "1px solid rgba(236,229,216,0.1)" : "none",
                position: "relative",
              }}>
                <span className="mf-drop-code" style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.26em",
                  color: "rgba(236,229,216,0.45)",
                }}>{d.code}</span>
                <span className="mf-drop-area" style={{
                  fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-body-weight, 500)",
                  fontSize: 36, lineHeight: 1, color: "#ece5d8",
                }}>{d.area[lang]}</span>
                <span className="mf-drop-status" style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.3em",
                  color: active ? accent : (dark ? "rgba(236,229,216,0.32)" : "rgba(236,229,216,0.72)"),
                  textTransform: "uppercase", display: "flex", alignItems: "center", gap: 8,
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor" }} />
                  {d.status[lang]}
                </span>
                {/* Troll lurks in the DARK drop */}
                {dark && showTroll && (
                  <TrollPeek accent={accent} label={"T-" + d.code.split('-')[1] + " · " + d.area[lang].toUpperCase()}
                    style={{ right: -20, bottom: -8 }} />
                )}
              </li>
            );
          })}
        </ol>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .mf-marginalia { padding: 96px 24px 96px !important; }
          .mf-marg-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
          .mf-drop-item { grid-template-columns: 56px 1fr auto !important; gap: 14px !important; padding: 22px 0 !important; }
          .mf-drop-area { font-size: 24px !important; }
          .mf-drop-code { font-size: 10px !important; letter-spacing: 0.2em !important; }
          .mf-drop-status { font-size: 9px !important; letter-spacing: 0.2em !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// FOOTER — magazine colophon
// ─────────────────────────────────────────────────────────────────
function MfFooter({ lang, accent, drop }) {
  return (
    <footer id="archive" data-thread-anchor="colophon-mark" style={{
      borderTop: "1px solid rgba(236,229,216,0.12)",
      padding: "70px 48px 36px",
    }}>
      <div style={{
        maxWidth: 1400, margin: "0 auto",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        gap: 40, flexWrap: "wrap",
      }}>
        <div style={{ maxWidth: 540 }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.34em",
            color: "rgba(236,229,216,0.5)", textTransform: "uppercase", marginBottom: 10,
          }}>{lang === "no" ? "Kolofon" : lang === "es" ? "Colofón" : "Colophon"}</div>
          <p style={{
            margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic", fontWeight: "var(--mf-body-weight, 500)",
            fontSize: 22, lineHeight: 1.45, color: "rgba(236,229,216,0.85)",
          }}>
            {lang === "no"
              ? "Trykt i Bergen, i et antall ingen vil bekrefte. Ingen reklame ble laget. Ingen e-post ble sendt."
              : "Printed in Bergen, in numbers no one will confirm. No advertising was made. No e-mail was sent."}
          </p>
        </div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.3em",
          color: "rgba(236,229,216,0.5)", textTransform: "uppercase", textAlign: "right",
        }}>
          <div>{drop.fileNo} · BGO</div>
          <div>© ████ {new Date().getFullYear()}</div>
          <div style={{ color: accent, marginTop: 4 }}>{lang === "no" ? "Alle rettigheter unndratt" : lang === "es" ? "Todos los derechos reservados" : "All rights withheld"}</div>
        </div>
      </div>

      {/* small logo + all rights reserved at the very bottom */}
      <div style={{
        maxWidth: 1400, margin: "40px auto 0",
        paddingTop: 24, borderTop: "1px solid rgba(236,229,216,0.08)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24, flexWrap: "wrap",
      }}>
        <FooterLogo accent={accent} />
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.32em",
          color: "rgba(236,229,216,0.4)", textTransform: "uppercase",
        }}>
          {`© AWOTOWA ${new Date().getFullYear()} · All rights reserved`}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ManifestoDirection });

// Small footer-logo wrapper — handles hover-tinting via state, since
// the inline-svg Logo takes a `color` prop (not a CSS background).
function FooterLogo({ accent }) {
  const [hov, setHov] = useState03(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{ display: "flex", alignItems: "center" }}
    >
      <Logo
        color={hov ? accent : "rgba(236,229,216,0.55)"}
        height={56}
        style={{ transition: "color 200ms ease" }}
      />
    </div>
  );
}