// Hero + Topic picker sections
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Hero() {
  return (
    <section id="top" style={{
      position: "relative", minHeight: "100vh", overflow: "hidden",
      background: "radial-gradient(1200px 700px at 75% 30%, rgba(201,169,97,.10), transparent 60%), linear-gradient(180deg,#050507 0%,#0c0d12 60%,#05060a 100%)",
    }}>
      {/* grain */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none", opacity: .14, mixBlendMode: "overlay",
        backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>\")",
      }} />
      <Hairlines />
      <div className="container hero-inner" style={{ position: "relative", paddingTop: 140, paddingBottom: 120 }}>
        <div className="hero-grid">
          <div className="hero-copy">
            <h1 className="serif hero-headline" style={{
              fontSize: "clamp(40px, 7vw, 108px)", lineHeight: 0.96, letterSpacing: "-0.02em",
              fontWeight: 400, margin: 0,
              color: "var(--bone)",
            }}>
              Coaching the<br />
              athletes who<br />
              <span style={{ fontStyle: "italic", fontWeight: 300, color: "var(--gold-2)" }}>redefine</span>
              <span style={{ display: "inline-block", width: 14 }} />
              the stage.
            </h1>
            <p className="hero-p" style={{
              maxWidth: 520, marginTop: 36, fontSize: 17, lineHeight: 1.6, color: "var(--soft)",
              fontWeight: 300,
            }}>
              Twenty-five years behind the curtain with Kai Greene, Dexter Jackson, Branch Warren and
              Dana Linn Bailey. A physician’s lens — integrative medicine, bloodwork, nutrition —
              applied to the hardest sport in the world.
            </p>
            <div className="hero-ctas" style={{ display: "flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
              <a href="membership.html"
                style={{
                  padding: "18px 28px", letterSpacing: ".18em", fontSize: 12, textTransform: "uppercase",
                  background: "var(--gold)", color: "#0b0b0d", fontWeight: 600,
                  display: "inline-flex", alignItems: "center", gap: 10,
                }}>
                Become a Member
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h12M9 3l4 4-4 4" stroke="#0b0b0d" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </a>
              <a href="#coaching" onClick={(e) => { e.preventDefault(); const el = document.getElementById("coaching"); if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: "smooth" }); }}
                style={{
                  padding: "18px 28px", letterSpacing: ".18em", fontSize: 12, textTransform: "uppercase",
                  border: "1px solid var(--line-strong)", color: "var(--bone)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", textAlign: "center",
                }}>Apply for Coaching</a>
            </div>
            <div className="hero-stats-row" style={{ marginTop: 80, display: "flex", gap: 48, flexWrap: "wrap" }}>
              <Stat n="25+" label="Years coaching" />
              <Stat n="9" label="Olympia top-5 placings" />
              <Stat n="246" label="Podcast episodes" />
            </div>
          </div>
          <div className="hero-portrait">
            <PortraitFrame />
          </div>
        </div>
      </div>
      <MarqueeRibbon />
      <style>{`
        .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr; gap: 32px; }
          .hero-portrait { order: -1; }
        }
        @media (max-width: 560px) {
          .hero-inner { padding-top: 72px !important; padding-bottom: 48px !important; }
          .hero-p { margin-top: 22px !important; font-size: 15.5px !important; }
          .hero-ctas { margin-top: 28px !important; gap: 10px !important; }
          .hero-ctas a { padding: 16px 22px !important; font-size: 11px !important; letter-spacing: .14em !important; flex: 1 1 auto; justify-content: center; }
          .hero-stats-row { margin-top: 40px !important; gap: 14px !important; justify-content: space-between; width: 100%; }
          .hero-stats-row > div { flex: 1 1 0; min-width: 0; }
          .hero-stats-row .serif { font-size: 28px !important; }
          .hero-stats-row .mono { font-size: 9px !important; letter-spacing: .16em !important; margin-top: 6px !important; line-height: 1.3; }
        }
      `}</style>
    </section>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: 40, lineHeight: 1, color: "var(--bone)", fontWeight: 400 }}>{n}</div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: ".22em", color: "var(--muted)", marginTop: 10, textTransform: "uppercase" }}>{label}</div>
    </div>
  );
}

function Hairlines() {
  return (
    <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
      {[0.25, 0.5, 0.75].map((p) => (
        <div key={p} style={{ position: "absolute", top: 0, bottom: 0, left: `${p * 100}%`, width: 1, background: "linear-gradient(180deg,transparent, rgba(214,189,122,.10) 30%, rgba(214,189,122,.10) 70%, transparent)" }} />
      ))}
    </div>
  );
}

function PortraitFrame() {
  return (
    <div style={{ position: "relative", aspectRatio: "4 / 5", width: "100%", maxWidth: 520, marginLeft: "auto" }}>
      {/* corner marks */}
      <Corner pos="tl" /><Corner pos="tr" /><Corner pos="bl" /><Corner pos="br" />
      <div style={{
        position: "absolute", inset: 18, overflow: "hidden",
        background: "linear-gradient(180deg, #1b1c22 0%, #0b0c10 100%)",
      }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(600px 400px at 50% 30%, rgba(201,169,97,.22), transparent 60%)",
        }} />
        <img src="assets/gf-portrait.png" alt="Dr. George Farah"
          style={{
            position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)",
            width: "108%", maxWidth: "none",
            filter: "contrast(1.04) saturate(.92) drop-shadow(0 20px 60px rgba(0,0,0,.7))",
          }} />
        {/* label */}
        <div style={{ position: "absolute", left: 20, top: 20, display: "flex", flexDirection: "column", gap: 6 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: ".24em", color: "var(--gold-2)" }}>THE GURU</span>
          <span className="mono" style={{ fontSize: 10, letterSpacing: ".18em", color: "var(--muted)" }}>DR. GEORGE FARAH</span>
        </div>
      </div>
    </div>
  );
}

function Corner({ pos }) {
  const map = {
    tl: { top: 0, left: 0, borderTop: "1px solid var(--gold)", borderLeft: "1px solid var(--gold)" },
    tr: { top: 0, right: 0, borderTop: "1px solid var(--gold)", borderRight: "1px solid var(--gold)" },
    bl: { bottom: 0, left: 0, borderBottom: "1px solid var(--gold)", borderLeft: "1px solid var(--gold)" },
    br: { bottom: 0, right: 0, borderBottom: "1px solid var(--gold)", borderRight: "1px solid var(--gold)" },
  };
  return <div aria-hidden style={{ position: "absolute", width: 36, height: 36, ...map[pos] }} />;
}

function MarqueeRibbon() {
  const items = ["KAI GREENE", "DEXTER JACKSON", "BRANCH WARREN", "DANA LINN BAILEY", "JOSE RAYMOND", "ALEX CAMBRONERO", "MR. OLYMPIA", "ARNOLD CLASSIC"];
  const doubled = [...items, ...items, ...items];
  return (
    <div style={{
      position: "relative", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
      background: "linear-gradient(180deg, rgba(13,14,18,.6), rgba(7,7,10,.8))",
      overflow: "hidden", padding: "22px 0",
    }}>
      <div style={{ display: "flex", gap: 64, whiteSpace: "nowrap", animation: "marq 60s linear infinite", width: "max-content" }}>
        {doubled.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 64 }}>
            <span className="mono" style={{ fontSize: 12, letterSpacing: ".28em", color: "var(--soft)" }}>{it}</span>
            <span style={{ width: 6, height: 6, background: "var(--gold)", transform: "rotate(45deg)" }} />
          </span>
        ))}
      </div>
      <style>{`
        @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
      `}</style>
    </div>
  );
}

// ──────────────── Topic picker ────────────────
function Topics() {
  const items = [...window.TOPICS, { label: "All", slug: "", all: true }];
  return (
    <section id="topics" style={{ background: "var(--paper)", color: "#1b1b1e" }}>
      <div className="container topics-pad" style={{ padding: "140px 32px" }}>
        <div style={{ textAlign: "center", maxWidth: 820, margin: "0 auto" }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: ".3em", color: "#7a3b2a" }}>COACH · SCIENTIST · WRITER</span>
          <h2 className="serif" style={{
            fontSize: "clamp(28px,4.2vw,56px)", lineHeight: 1.08, letterSpacing: "-0.01em",
            fontWeight: 400, margin: "28px 0 20px", color: "#0c0c0e",
          }}>Begin where you need the most work.</h2>
          <p className="topics-p" style={{ fontSize: 16, lineHeight: 1.6, color: "#3b3b40", margin: 0 }}>
            Twenty-five years of practical coaching, filtered through a physician’s training.
            Pick a topic — every article, podcast and protocol on the site is indexed under one of these.
          </p>
        </div>
        <div className="topics-pills" style={{ marginTop: 64, display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }}>
          {items.map((t) => {
            const isAll = t.all;
            const baseBg = isAll ? "#7a3b2a" : "transparent";
            const baseColor = isAll ? "#f2eee4" : "#1b1b1e";
            const baseBorder = isAll ? "#7a3b2a" : "rgba(12,12,14,.18)";
            const hoverBg = isAll ? "#0c0c0e" : "#0c0c0e";
            const hoverBorder = isAll ? "#0c0c0e" : "#0c0c0e";
            return (
              <a key={t.slug || "all"} href={`topics.html${t.slug ? `#${t.slug}` : ""}`}
                className="topics-pill"
                style={{
                  padding: "14px 22px", border: `1px solid ${baseBorder}`,
                  background: baseBg, color: baseColor,
                  fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase",
                  transition: "all .18s ease", display: "inline-block",
                }}
                onMouseEnter={e => { e.currentTarget.style.background = hoverBg; e.currentTarget.style.color = "#f2eee4"; e.currentTarget.style.borderColor = hoverBorder; }}
                onMouseLeave={e => { e.currentTarget.style.background = baseBg; e.currentTarget.style.color = baseColor; e.currentTarget.style.borderColor = baseBorder; }}>
                {t.label}
              </a>
            );
          })}
        </div>
        <StartHereSlider />
      </div>
      <style>{`
        @media (max-width: 560px) {
          .topics-pad { padding: 56px 20px !important; }
          .topics-p { font-size: 14.5px !important; }
          .topics-pills { margin-top: 32px !important; gap: 8px !important; }
          .topics-pill { padding: 11px 14px !important; font-size: 11.5px !important; letter-spacing: .06em !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, Topics, StartHereSlider });

// ──────────────── Start Here Slider ────────────────
const START_CARDS = [
  {
    n: "01",
    kicker: "FREE · FOUNDATIONS",
    title: "Start here — The Farah Framework",
    desc: "A 40-minute primer on how I think about training, nutrition, and bloodwork. The single best on-ramp to everything else on the site.",
    read: "40 min · free read",
    free: true,
    art: "linear-gradient(135deg,#1a1410 0%,#2a1d12 50%,#3a2816 100%)",
  },
  {
    n: "02",
    kicker: "PREMIUM · HYPERTROPHY",
    title: "Training volume, landmarks and the ceiling most lifters never cross",
    desc: "Eight-part deep dive into effective volume, failure mechanics, and why your intermediate plateau is an accounting problem.",
    read: "8-part series",
    free: false,
    art: "linear-gradient(135deg,#141016 0%,#1e1820 55%,#2a2028 100%)",
  },
  {
    n: "03",
    kicker: "PREMIUM · NUTRITION",
    title: "Protein, carbs and the macro math I use with every pro athlete",
    desc: "The exact worksheet I use on Kai, Branch and Dexter — adjusted for your training age, job, and off-season goals.",
    read: "12 lessons · workbook",
    free: false,
    art: "linear-gradient(135deg,#11120f 0%,#1d1e18 55%,#2a2c20 100%)",
  },
  {
    n: "04",
    kicker: "PREMIUM · BLOODWORK",
    title: "Reading a panel like a doctor — not like a lifter on a forum",
    desc: "The ten markers I track quarterly, what they mean in an enhanced athlete, and when to act versus when to watch.",
    read: "9 lessons · printable",
    free: false,
    art: "linear-gradient(135deg,#110f12 0%,#1c1a20 55%,#2e2228 100%)",
  },
  {
    n: "05",
    kicker: "PREMIUM · PEAK WEEK",
    title: "Peak week, seven days out — the exact protocol I ran on Kai in 2014",
    desc: "Sodium, water, carbs, training, posing. Day by day, with the photos, the bloodwork, and the mistakes we made along the way.",
    read: "7-day log · video",
    free: false,
    art: "linear-gradient(135deg,#13100f 0%,#241812 55%,#36221a 100%)",
  },
  {
    n: "06",
    kicker: "PREMIUM · RECOVERY",
    title: "Sleep, stress, and the recovery dashboard every serious athlete needs",
    desc: "Why HRV is overrated, how to actually measure fatigue, and the habits that move the needle when your training can’t.",
    read: "6 lessons",
    free: false,
    art: "linear-gradient(135deg,#0f1114 0%,#181c22 55%,#24292f 100%)",
  },
];

function StartHereSlider() {
  const [idx, setIdx] = React.useState(0);
  const trackRef = React.useRef(null);
  const cardsPerView = 3;
  const maxIdx = Math.max(0, START_CARDS.length - cardsPerView);

  const scrollTo = (i) => {
    const clamped = Math.max(0, Math.min(maxIdx, i));
    setIdx(clamped);
    const track = trackRef.current;
    if (track) {
      const card = track.querySelector("[data-sh-card]");
      if (card) {
        const step = card.getBoundingClientRect().width + 20;
        track.scrollTo({ left: step * clamped, behavior: "smooth" });
      }
    }
  };

  return (
    <div className="sh-wrap" style={{ marginTop: 72 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24, gap: 20, flexWrap: "wrap" }}>
        <div>
          <span className="mono" style={{ fontSize: 11, letterSpacing: ".28em", color: "#7a3b2a" }}>START HERE · A CURATED PATH</span>
          <p style={{ margin: "10px 0 0", fontSize: 14, color: "#3b3b40", maxWidth: 520 }}>
            Six series, ordered. The first is free — the rest unlock with Membership.
          </p>
        </div>
        <div className="sh-controls-inline" style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span className="mono sh-pager sh-pager-inline" style={{ fontSize: 11, color: "#3b3b40", letterSpacing: ".18em", marginRight: 12 }}>
            {String(idx + 1).padStart(2, "0")} — {String(Math.min(idx + cardsPerView, START_CARDS.length)).padStart(2, "0")} / {String(START_CARDS.length).padStart(2, "0")}
          </span>
          <SliderBtn dir="prev" disabled={idx === 0} onClick={() => scrollTo(idx - 1)} />
          <SliderBtn dir="next" disabled={idx === maxIdx} onClick={() => scrollTo(idx + 1)} />
        </div>
      </div>
      <div ref={trackRef}
        style={{
          display: "grid", gridAutoFlow: "column", gridAutoColumns: "calc((100% - 40px) / 3)",
          gap: 20, overflowX: "auto", scrollSnapType: "x mandatory",
          paddingBottom: 6,
          scrollbarWidth: "none",
        }}
        className="sh-track"
      >
        {START_CARDS.map((c) => <StartCard key={c.n} c={c} />)}
      </div>
      <div className="sh-controls-below" style={{ display: "none", justifyContent: "center", alignItems: "center", gap: 12, marginTop: 20 }}>
        <SliderBtn dir="prev" disabled={idx === 0} onClick={() => scrollTo(idx - 1)} />
        <span className="mono" style={{ fontSize: 11, color: "#3b3b40", letterSpacing: ".18em" }}>
          {String(idx + 1).padStart(2, "0")} — {String(Math.min(idx + cardsPerView, START_CARDS.length)).padStart(2, "0")} / {String(START_CARDS.length).padStart(2, "0")}
        </span>
        <SliderBtn dir="next" disabled={idx === maxIdx} onClick={() => scrollTo(idx + 1)} />
      </div>
      <style>{`
        .sh-track::-webkit-scrollbar { display: none; }
        .sh-track > [data-sh-card] { scroll-snap-align: start; }
        @media (max-width: 900px) { .sh-track { grid-auto-columns: calc((100% - 20px) / 2) !important; } }
        @media (max-width: 620px) { .sh-track { grid-auto-columns: 86% !important; } }
        @media (max-width: 620px) {
          .sh-controls-inline { display: none !important; }
          .sh-controls-below { display: flex !important; }
        }
        @media (max-width: 560px) {
          .sh-wrap { margin-top: 36px !important; }
          .sh-card { min-height: 340px !important; }
        }
      `}</style>
    </div>
  );
}

function StartCard({ c }) {
  const [hover, setHover] = React.useState(false);
  const [clicked, setClicked] = React.useState(false);
  const onClick = (e) => {
    e.preventDefault();
    if (c.free) { setClicked(true); setTimeout(() => setClicked(false), 1400); }
  };
  return (
    <a href="#" onClick={onClick} data-sh-card className="sh-card"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", overflow: "hidden",
        display: "flex", flexDirection: "column",
        background: c.art, color: "#f2eee4",
        minHeight: 420,
        border: "1px solid " + (hover ? "rgba(201,169,97,.5)" : "rgba(12,12,14,.2)"),
        transition: "transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s ease",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        cursor: c.free ? "pointer" : "default",
      }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, background: "radial-gradient(500px 340px at 30% 20%, rgba(201,169,97,.16), transparent 60%)" }} />
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "repeating-linear-gradient(135deg, rgba(201,169,97,.04) 0 14px, rgba(201,169,97,0) 14px 28px)",
      }} />
      <div style={{ position: "relative", padding: "28px 26px", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: ".28em", color: c.free ? "#d9bd7a" : "rgba(242,238,228,.55)" }}>{c.kicker}</span>
        <span className="mono" style={{ fontSize: 10, letterSpacing: ".24em", color: "rgba(242,238,228,.45)" }}>№ {c.n}</span>
      </div>
      <div style={{ position: "relative", padding: "40px 26px 28px", marginTop: "auto", display: "flex", flexDirection: "column", gap: 14 }}>
        <h3 className="serif" style={{ fontSize: 22, lineHeight: 1.18, fontWeight: 500, margin: 0, letterSpacing: "-0.005em" }}>{c.title}</h3>
        <p style={{ fontSize: 13, lineHeight: 1.55, color: "rgba(242,238,228,.78)", margin: 0 }}>{c.desc}</p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8, borderTop: "1px solid rgba(201,169,97,.18)", paddingTop: 16 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: ".22em", color: "rgba(242,238,228,.65)" }}>{c.read.toUpperCase()}</span>
          {c.free ? (
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "#d9bd7a" }}>
              {clicked ? "Opening…" : "Read free"}
              <svg width="12" height="12" viewBox="0 0 12 12"><path d="M1 6h10M7 2l4 4-4 4" stroke="#d9bd7a" strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
          ) : (
            <span style={{ display: "inline-flex", gap: 8, alignItems: "center", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(242,238,228,.55)" }}>
              <LockGlyph />
              Premium
            </span>
          )}
        </div>
      </div>
      {/* Premium hover overlay */}
      {!c.free && (
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(7,7,10,.3) 0%, rgba(7,7,10,.86) 72%)",
          backdropFilter: hover ? "blur(3px)" : "blur(0)",
          WebkitBackdropFilter: hover ? "blur(3px)" : "blur(0)",
          opacity: hover ? 1 : 0, transition: "opacity .28s ease, backdrop-filter .28s ease",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 18, padding: 28, textAlign: "center",
          pointerEvents: hover ? "auto" : "none",
        }}>
          <div style={{ width: 54, height: 54, borderRadius: "50%", border: "1px solid var(--gold)", display: "grid", placeItems: "center", background: "rgba(201,169,97,.12)" }}>
            <LockGlyph big />
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: ".3em", color: "var(--gold-2)" }}>MEMBERS ONLY</div>
            <div className="serif" style={{ fontSize: 20, margin: "10px 0 6px", fontWeight: 400 }}>Unlock this series</div>
            <div style={{ fontSize: 12, color: "rgba(242,238,228,.75)", maxWidth: 260, margin: "0 auto" }}>
              Included with Membership · full archive, monthly Q&amp;A, printable protocols.
            </div>
          </div>
          <button onClick={(e) => e.stopPropagation()}
            style={{
              padding: "12px 22px", letterSpacing: ".2em", fontSize: 11, textTransform: "uppercase",
              background: "var(--gold)", color: "#0b0b0d", fontWeight: 600,
            }}>Become a Member</button>
        </div>
      )}
    </a>
  );
}

function SliderBtn({ dir, disabled, onClick }) {
  const d = dir === "prev" ? "M11 3l-4 4 4 4" : "M3 3l4 4-4 4";
  return (
    <button onClick={onClick} disabled={disabled} aria-label={dir}
      style={{
        width: 44, height: 44, border: "1px solid " + (disabled ? "rgba(12,12,14,.12)" : "rgba(12,12,14,.5)"),
        color: disabled ? "rgba(12,12,14,.25)" : "#0c0c0e",
        display: "grid", placeItems: "center",
        background: "transparent", cursor: disabled ? "not-allowed" : "pointer",
        transition: "background .15s ease",
      }}
      onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.background = "#0c0c0e"; if (!disabled) e.currentTarget.style.color = "#f2eee4"; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = disabled ? "rgba(12,12,14,.25)" : "#0c0c0e"; }}
    >
      <svg width="14" height="14" viewBox="0 0 14 14" style={{ display: "block" }}>
        <path d={dir === "prev" ? "M13 7H1M5 3L1 7l4 4" : "M1 7h12M9 3l4 4-4 4"} stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

function LockGlyph({ big }) {
  const s = big ? 20 : 11;
  return (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none" aria-hidden>
      <rect x="2.5" y="6" width="9" height="6.5" rx="1" stroke={big ? "#d9bd7a" : "currentColor"} strokeWidth="1.2"/>
      <path d="M4.5 6V4.3A2.5 2.5 0 0 1 7 1.8a2.5 2.5 0 0 1 2.5 2.5V6" stroke={big ? "#d9bd7a" : "currentColor"} strokeWidth="1.2"/>
    </svg>
  );
}
