/* Geek n Wine — Editorial Home: presentational components */
const { useState, useEffect, useRef } = React;

const ASSET = "assets/";

/* ============ Brand SVGs — inlined so the build has zero external image requests ============ */
function Mark({ size = 40, paper = false }) {
  const id = React.useId().replace(/:/g, "");
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Geek n Wine mark" style={{ display: "block" }}>
      <defs><clipPath id={id}><rect x="8" y="8" width="48" height="48" rx="14"></rect></clipPath></defs>
      <rect x="8" y="8" width="48" height="48" rx="14" fill={paper ? "#FBF6EC" : "#1B0B11"} stroke="#8A0F33" strokeWidth="2.5"></rect>
      <g clipPath={`url(#${id})`}>
        <path d="M8 38 Q20 33 32 38 T56 38 V58 H8 Z" fill="#8A0F33"></path>
        <path d="M8 38 Q20 33 32 38 T56 38" fill="none" stroke={paper ? "#6E0B2A" : "#A11A45"} strokeWidth="1.5" opacity="0.9"></path>
      </g>
      <path d="M32 17 C35.6 22.2 37.5 25.3 37.5 28 a5.5 5.5 0 0 1 -11 0 c0 -2.7 1.9 -5.8 5.5 -11 Z" fill={paper ? "#8A0F33" : "#CDFF4A"}></path>
      <circle cx="30" cy="26.5" r="1.5" fill="#1B0B11" opacity="0.25"></circle>
    </svg>
  );
}

function VoltDrop({ size = 13 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Hidden bottle" style={{ display: "block" }}>
      <path d="M16 4 C21 11 23.5 15.2 23.5 19 a7.5 7.5 0 0 1 -15 0 C8.5 15.2 11 11 16 4 Z" fill="#CDFF4A"></path>
      <circle cx="12.6" cy="17.5" r="2" fill="#1B0B11" opacity="0.18"></circle>
    </svg>
  );
}

function GoldStar({ size = 13 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Reserve hit" style={{ display: "block" }}>
      <path d="M16 3 L19.6 11.4 L28.5 12.2 L21.8 18.1 L23.9 26.8 L16 22.1 L8.1 26.8 L10.2 18.1 L3.5 12.2 L12.4 11.4 Z" fill="#E0A93B"></path>
      <path d="M16 9 L17.8 13.2 L22.2 13.6 L18.9 16.5 L19.9 20.8 L16 18.5 L12.1 20.8 L13.1 16.5 L9.8 13.6 L14.2 13.2 Z" fill="#B8842A" opacity="0.55"></path>
    </svg>
  );
}

function Wordmark({ width = 186, paper = false, className }) {
  const id = React.useId().replace(/:/g, "");
  const fg = paper ? "#1B0B11" : "#FBF6EC";
  const nClr = paper ? "#8A0F33" : "#CDFF4A";
  const drop = paper ? "#8A0F33" : "#CDFF4A";
  const stroke = paper ? "#6E0B2A" : "#A11A45";
  const sub = paper ? "rgba(27,11,17,0.42)" : "rgba(251,246,236,0.46)";
  return (
    <svg width={width} height={width * (64 / 360)} viewBox="0 0 360 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Geek n Wine" className={className} style={{ display: "block" }}>
      <defs><clipPath id={id}><rect x="8" y="8" width="48" height="48" rx="14"></rect></clipPath></defs>
      <rect x="8" y="8" width="48" height="48" rx="14" fill={paper ? "#FBF6EC" : "#1B0B11"} stroke="#8A0F33" strokeWidth="2.5"></rect>
      <g clipPath={`url(#${id})`}>
        <path d="M8 38 Q20 33 32 38 T56 38 V58 H8 Z" fill="#8A0F33"></path>
        <path d="M8 38 Q20 33 32 38 T56 38" fill="none" stroke={stroke} strokeWidth="1.5" opacity="0.9"></path>
      </g>
      <path d="M32 17 C35.6 22.2 37.5 25.3 37.5 28 a5.5 5.5 0 0 1 -11 0 c0 -2.7 1.9 -5.8 5.5 -11 Z" fill={drop}></path>
      <text x="78" y="34" fontFamily="'Space Grotesk', sans-serif" fontSize="26" fontWeight="700" letterSpacing="-0.5" fill={fg}>GEEK</text>
      <text x="160" y="34" fontFamily="'JetBrains Mono', monospace" fontSize="22" fontWeight="700" fill={nClr}>n</text>
      <text x="180" y="34" fontFamily="'Space Grotesk', sans-serif" fontSize="26" fontWeight="700" letterSpacing="-0.5" fill={fg}>WINE</text>
      <text x="78" y="52" fontFamily="'JetBrains Mono', monospace" fontSize="10" fontWeight="500" letterSpacing="4" fill={sub}>WINE, DROPPED.</text>
    </svg>
  );
}

/* The sealed box — brand hero object, pure CSS */
function BoxVisual({ size = 168, sku = "GW-014", hint = true, hintText = "1 in 11 hides a Reserve", sealed = true }) {
  return (
    <div className="box" style={{ height: size, width: size, borderRadius: Math.max(12, size * 0.05) }}>
      {hint && (
        <span className="pill pill-hidden" style={{ position: "absolute", top: 12, right: 12, zIndex: 2 }}>
          <VoltDrop size={13} />
          {hintText}
        </span>
      )}
      <span className="tape"></span>
      <span className="mk"><Mark size={Math.round(size * 0.32)} /></span>
      <span className="sku">{sku} · {sealed ? "SEALED" : "OPEN"}</span>
    </div>
  );
}

function LiveDot() { return <span className="pdot"></span>; }

/* The wine crate — six bottles, one gold = the possible Reserve. Pure CSS, the new hero object */
function WineCrate({ size = 360, sku = "GW-014", hint = true, hintText = "1 in 11 hides a Reserve", sealed = true }) {
  const goldIdx = 3;
  return (
    <div className="crate" style={{ width: size, height: size, borderRadius: Math.max(14, size * 0.05) }}>
      {hint && (
        <span className="pill pill-hidden crate-pill">
          <VoltDrop size={13} />{hintText}
        </span>
      )}
      <div className="crate-bottles">
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <div key={i} className={"wbottle" + (i === goldIdx ? " gold" : "")}>
            <span className="wcap"></span><span className="wneck"></span><span className="wbody"></span>
          </div>
        ))}
      </div>
      <div className="crate-shade"></div>
      <div className="crate-front">
        <span className="crate-mk"><Mark size={Math.round(size * 0.15)} /></span>
        <span className="crate-sku" style={{ fontSize: Math.max(9, Math.round(size * 0.031)) }}>{sku} · {sealed ? "SEALED" : "OPEN"}</span>
      </div>
    </div>
  );
}

function useCountdown(seconds) {
  const [t, setT] = useState(seconds);
  useEffect(() => {
    const id = setInterval(() => setT((v) => (v > 0 ? v - 1 : 0)), 1000);
    return () => clearInterval(id);
  }, []);
  const h = String(Math.floor(t / 3600)).padStart(2, "0");
  const m = String(Math.floor((t % 3600) / 60)).padStart(2, "0");
  const s = String(t % 60).padStart(2, "0");
  return { h, m, s, str: `${h}:${m}:${s}` };
}

function TimerBar({ h, m, s, center }) {
  return (
    <div className={"timerbar" + (center ? " center" : "")}>
      {[["hrs", h], ["min", m], ["sec", s]].map(([l, v]) => (
        <div className="tunit" key={l}><b>{v}</b><span>{l}</span></div>
      ))}
    </div>
  );
}

/* Reserve bar — boxes REMAINING, draining down. readout: 'Boxes left' | 'Percent' | 'Both' */
function ReserveBar({ claimed, total, readout = "Boxes left" }) {
  const left = total - claimed;
  const pctLeft = Math.round((left / total) * 100);
  const low = pctLeft <= 20;
  const leftStr = `${left} / ${total}`;
  return (
    <div className={"reserve2" + (low ? " low" : "")}>
      <div className="head">
        <span className="lab">Boxes remaining · this drop</span>
        <span>
          {readout !== "Percent" && <span className="big">{leftStr} left</span>}
          {readout === "Both" && <span> · </span>}
          {readout !== "Boxes left" && <span className="big">{pctLeft}%</span>}
        </span>
      </div>
      <div className="bar"><i style={{ width: pctLeft + "%" }}></i></div>
      <div className="sub">
        <span>{claimed} claimed</span>
        <span className="state">{low ? "ALMOST GONE — DRAINING FAST" : "DRAINING"}</span>
      </div>
    </div>
  );
}

/* Odds grid — N boxes, one glowing volt = the hidden bottle */
function OddsGrid({ n = 11 }) {
  const hit = Math.floor(n / 2); // glow roughly mid-grid
  return (
    <div className="odds">
      {Array.from({ length: n }).map((_, i) => (
        <div key={i} className={"cell" + (i === hit ? " hit" : "")}>
          <span className="lid"></span>
          {i === hit && <VoltDrop size={18} />}
        </div>
      ))}
    </div>
  );
}

function Step({ n, title, children }) {
  return (
    <div className="step">
      <div className="n">{n}</div>
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
}

/* Wine accordion row */
function WineRow({ wine, idx, open, onToggle }) {
  return (
    <div className={"arow" + (open ? " open" : "")}>
      <div className="ahead" onClick={onToggle}>
        <span className="no">{wine.code}</span>
        <span className="nm">{wine.name}</span>
        <span className="rg">{wine.region} · {wine.grape}</span>
        <span className="chev"><i data-lucide="chevron-down" style={{ width: 18, height: 18 }}></i></span>
      </div>
      <div className="abody">
        <div className="abody-in">
          <p>{wine.note}</p>
          <div className="chips">
            <span className="pill pill-neutral">{wine.body}</span>
            <span className="pill pill-neutral">{wine.grape}</span>
            <span className="pill pill-neutral">{wine.abv}</span>
            <span className="pill pill-neutral">Pairs with {wine.pair}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="ed-wrap" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 32 }}>
        <div style={{ maxWidth: 290 }}>
          <Wordmark width={210} className="wm-light" />
          <Wordmark width={210} paper className="wm-dark" />
          <p className="note" style={{ marginTop: 16, lineHeight: 1.7 }}>We taste 400 wines so you taste 6. Drink the surprise.</p>
        </div>
        <div style={{ display: "flex", gap: 64, flexWrap: "wrap" }}>
          <div>
            <p className="kicker" style={{ marginBottom: 16 }}>This drop</p>
            <a href="#lineup">The lineup</a><a href="#surprise">The surprise</a><a href="#how">How it works</a>
          </div>
          <div>
            <p className="kicker" style={{ marginBottom: 16 }}>Club</p>
            <a href="#">Your cellar</a><a href="#">Refer a friend</a><a href="#">Help</a>
          </div>
        </div>
      </div>
      <div className="ed-wrap"><p className="note" style={{ marginTop: 40 }}>© 2026 Geek n Wine · Please drink responsibly · 21+</p></div>
    </footer>
  );
}

Object.assign(window, { Mark, VoltDrop, GoldStar, Wordmark, BoxVisual, WineCrate, LiveDot, useCountdown, TimerBar, ReserveBar, OddsGrid, Step, WineRow, Footer, ASSET });