/* Content sections — Product, Compatibility, Process, NextUp, Newsletter, Stockists. */

/* ------------ Featured Product ------------ */

function ProductHighlight() {
  const { lang } = useLang();
  const [model, setModel] = React.useState("addict"); // addict | foil
  const [view, setView] = React.useState("iso"); // front | iso | side
  const isMobile = useIsMobile();

  const MODELS = {
    addict: {
      name: { en: "for the addict", sl: "za addict" },
      sku: "vm/syn-add",
      post: "Syncros SP-R101-CF",
      bikes: "Scott Addict RC",
      blurb: {
        en: <>A Garmin Varia RTL515 / RVR315 mount that integrates directly into the <em>Syncros SP-R101-CF</em> — the seatpost shipped on the Scott Addict RC.</>,
        sl: <>Garmin Varia RTL515 / RVR315 nosilec, ki se integrira neposredno v <em>Syncros SP-R101-CF</em> — sedežno oporo, tovarniško nameščeno v Scott Addict RC.</>
      },
      weight: "15.8 g"
    },
    foil: {
      name: { en: "for the foil", sl: "za foil" },
      sku: "vm/syn-foi",
      post: "Syncros Duncan SL Aero CFT",
      bikes: "Scott Foil RC",
      blurb: {
        en: <>The Foil's post sits lower and shapes differently — so the mount does too. It integrates into the post the same way, with a redesigned shell and ribbed back to clear the Foil's seat tube.</>,
        sl: <>Sedežna opora Foila stoji nižje in je drugače oblikovana — torej tudi nosilec. Integrira se v sedežno oporo na enak način, s prenovljeno lupino in rebrastim hrbtom za prosto cev sedeža.</>
      },
      weight: "24.5 g"
    }
  };

  const VIEW_FILES = {
    addict: { front: "images/addict-front.png", iso: "images/addict-iso.png", side: "images/addict-side.png" },
    foil: { front: "images/foil-front.png", iso: "images/foil-iso.png", side: "images/foil-side.png" }
  };

  const VIEW_NOTES = { front: "rev 4 · cad/front", iso: "rev 4 · cad/iso", side: "rev 4 · cad/side" };
  const VIEW_LABELS = { front: { en: "front", sl: "spredaj" }, iso: { en: "iso", sl: "iso" }, side: { en: "side", sl: "stran" } };

  const m = MODELS[model];

  const specs = [
  [{ en: "weight", sl: "teža" }, m.weight],
  [{ en: "material", sl: "material" }, t(lang, { en: "ASA — light, tough, uv-stable", sl: "ASA — lahek, trpežen, UV-odporen" })],
  [{ en: "color", sl: "barva" }, t(lang, { en: "matte black", sl: "mat črna" })],
  [{ en: "fits", sl: "ustreza" }, m.post],
  [{ en: "bike", sl: "kolo" }, m.bikes],
  [{ en: "mount", sl: "vmesnik" }, t(lang, { en: "garmin quarter-turn, oem-spec", sl: "garmin quarter-turn, oem standard" })],
  [{ en: "compatible radars", sl: "združljivi radarji" }, t(lang, { en: "garmin varia rtl515 · varia rvr315", sl: "garmin varia rtl515 · varia rvr315" })],
  [{ en: "hardware", sl: "vijaki" }, t(lang, { en: "reuses the syncros + original varia bolts", sl: "uporabi obstoječe syncros + varia vijake" })],
  [{ en: "printed in", sl: "natisnjeno v" }, t(lang, { en: "kranj, slovenia", sl: "kranj, slovenija" })]];


  return (
    <section id="products" style={{ background: "var(--bone)", paddingTop: "clamp(64px, 10vw, 120px)", paddingBottom: "clamp(64px, 10vw, 120px)", position: "relative" }}>
      <div className="container">
        {/* Eyebrow row */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
          <div className="section-eyebrow">
            <span><T en="01 — seatpost equipment · two mounts" sl="01 — oprema za sedežno oporo · dva nosilca" /></span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            <T en="in stores now" sl="na voljo v trgovinah" />
          </div>
        </div>

        {/* Title */}
        <h2 className="display all-lower" style={{ margin: "0 0 12px", fontWeight: 700, fontStretch: "115%", lineHeight: 0.9, letterSpacing: "-0.035em", fontSize: "clamp(48px, 8vw, 132px)" }}>
          <T en="varia mount" sl="varia nosilec" /><span style={{ color: "var(--accent)" }}>/</span>syncros
        </h2>

        {/* Model selector */}
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 56, flexWrap: "wrap" }}>
          {Object.keys(MODELS).map((k, i) =>
          <React.Fragment key={k}>
              {i > 0 && <span className="display all-lower" style={{ fontSize: "clamp(20px, 2.6vw, 36px)", color: "var(--rule-strong)", lineHeight: 1, fontWeight: 500 }}>/</span>}
              <button
              onClick={() => setModel(k)}
              className="display all-lower"
              style={{
                fontWeight: model === k ? 700 : 500,
                fontStretch: "115%",
                fontStyle: model === k ? "italic" : "normal",
                fontSize: "clamp(22px, 3vw, 44px)",
                lineHeight: 1,
                letterSpacing: "-0.02em",
                padding: 0,
                color: model === k ? "var(--accent)" : "var(--ink-soft)",
                transition: "color .2s ease",
                cursor: "pointer",
                background: "transparent",
                border: "none"
              }}
              onMouseEnter={(e) => {if (model !== k) e.currentTarget.style.color = "var(--ink)";}}
              onMouseLeave={(e) => {if (model !== k) e.currentTarget.style.color = "var(--ink-soft)";}}>
              
                <T en={MODELS[k].name.en} sl={MODELS[k].name.sl} />
              </button>
            </React.Fragment>
          )}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.15fr 1fr", gap: isMobile ? 40 : 56, alignItems: "start" }}>
          {/* LEFT — image stage */}
          <div>
            <CropFrame style={{ background: "transparent", aspectRatio: "4 / 5", overflow: "hidden", position: "relative" }}>
              <img
                key={`${model}-${view}`}
                src={VIEW_FILES[model][view]}
                alt={`${m.name.en} varia mount, ${view} view`}
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "contain",
                  padding: "min(8%, 56px)",
                  animation: "fade-in .35s ease"
                }} />
              

              <div style={{ position: "absolute", top: 16, left: 16, display: "flex", alignItems: "center", gap: 8 }}>
                <LogoMark size={18} strokeWidth={14} color="var(--ink)" />
              </div>
              <div style={{ position: "absolute", top: 16, right: 16 }} className="mono">
                <span style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
                  {VIEW_NOTES[view]}
                </span>
              </div>
              <div style={{ position: "absolute", bottom: 24, right: 24, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 0 }}>
                  {Array.from({ length: 10 }).map((_, i) =>
                  <div key={i} style={{ width: 16, height: i % 2 === 0 ? 10 : 6, borderLeft: "1px solid var(--ink)" }} />
                  )}
                  <div style={{ width: 0, height: 10, borderLeft: "1px solid var(--ink)" }} />
                </div>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-soft)" }}>0 — 50 mm</span>
              </div>
              <div style={{ position: "absolute", bottom: 16, left: 16 }} className="mono">
                <span style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
                  {lang === "sl" ? "skica" : "fig."} {view === "front" ? "a" : view === "iso" ? "b" : "c"} · {t(lang, VIEW_LABELS[view])} · {model}
                </span>
              </div>

              <style>{`@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }`}</style>
            </CropFrame>

            {/* view switcher */}
            <div style={{ display: "flex", gap: 8, marginTop: 16, alignItems: "center", flexWrap: "wrap" }}>
              {["front", "iso", "side"].map((k) =>
              <button
                key={k}
                onClick={() => setView(k)}
                className="mono"
                style={{
                  padding: "9px 12px",
                  border: "1px solid " + (view === k ? "var(--ink)" : "var(--rule)"),
                  background: view === k ? "var(--ink)" : "transparent",
                  color: view === k ? "var(--bone)" : "var(--ink)",
                  fontSize: 11,
                  letterSpacing: "0.12em",
                  textTransform: "uppercase",
                  transition: "all .2s ease",
                  whiteSpace: "nowrap",
                  cursor: "pointer"
                }}>
                  {t(lang, VIEW_LABELS[k])}
                </button>
              )}
              <div style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-soft)", whiteSpace: "nowrap" }}>
                <Tick size={10} color="var(--accent)" />
                <T en="designed in slovenia" sl="oblikovano v sloveniji" />
              </div>
            </div>
          </div>

          {/* RIGHT — copy + specs + buy */}
          <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
            <div>
              <p style={{ margin: 0, fontSize: 22, lineHeight: 1.35, letterSpacing: "-0.005em", maxWidth: 540 }}>
                <T en={m.blurb.en} sl={m.blurb.sl} />
              </p>
            </div>

            <div style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
              {specs.map(([k, v], i) =>
              <div
                key={k.en}
                style={{
                  display: "grid",
                  gridTemplateColumns: "140px 1fr",
                  padding: "14px 0",
                  borderBottom: i === specs.length - 1 ? "none" : "1px solid var(--rule)",
                  fontFamily: "var(--font-mono)",
                  fontSize: 12,
                  letterSpacing: "0.04em"
                }}>
                  <span style={{ textTransform: "uppercase", color: "var(--ink-soft)", letterSpacing: "0.14em", fontSize: 11 }}>
                    <T en={k.en} sl={k.sl} />
                  </span>
                  <span>{v}</span>
                </div>
              )}
            </div>

            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
              <div>
                <div className="micro" style={{ color: "var(--ink-soft)", marginBottom: 6 }}>
                  <T en="at the counter" sl="v trgovini" />
                </div>
                <div className="display" style={{ fontSize: 56, lineHeight: 1, fontWeight: 700, fontStretch: "112%", letterSpacing: "-0.02em" }}>
                  €<span>39</span><span style={{ color: "var(--ink-soft)", fontSize: 28, verticalAlign: "top", marginLeft: 2 }}>.95</span>
                </div>
              </div>
              <a href="#dealers" className="btn btn--accent" style={{ padding: "18px 28px" }}>
                <T en="find a dealer" sl="do trgovine" /> <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ------------ Compatibility Table ------------ */

function CompatTable() {
  const { lang } = useLang();
  const isMobile = useIsMobile();
  const rows = [
  { bike: "scott addict rc", years: "2025 →", post: "syncros sp-r101-cf", status: { en: "available", sl: "na voljo" }, code: "✓", sku: "vm/syn-add" },
  { bike: "scott foil rc", years: "2025 →", post: "syncros duncan sl aero cft", status: { en: "available", sl: "na voljo" }, code: "✓", sku: "vm/syn-foi" }];


  const isAvailable = (s) => s.en === "available";
  const isDev = (s) => s.en === "in development";
  const statusColor = (s) => isAvailable(s) ? "var(--accent)" : isDev(s) ? "oklch(45% 0.005 60)" : "var(--ink-soft)";

  return (
    <section id="fitment" style={{ background: "var(--bone)", paddingTop: 0, paddingBottom: "clamp(64px, 10vw, 120px)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 2fr", gap: isMobile ? 40 : 56, alignItems: "start" }}>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 24 }}>
              <span><T en="fitment" sl="ujemanje" /></span>
            </div>
            <h2 className="display all-lower" style={{ margin: 0, fontWeight: 700, fontStretch: "108%", lineHeight: 0.92, letterSpacing: "-0.025em", fontSize: "clamp(36px, 4.6vw, 72px)" }}>
              <T en={<>does it<br />fit my bike?</>} sl={<>ali ustreza<br />mojemu kolesu?</>} />
            </h2>
            <p style={{ marginTop: 24, color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.5, maxWidth: 380 }}>
              <T
                en="Two mounts, one for each post — each integrates directly into the seatpost. Compatible with the Garmin Varia RTL515 and RVR315 only. If you have a Scott Addict RC or Foil RC shipped after 2025, that's a yes."
                sl="Dva nosilci, eden za vsako oporo — vsak se integrira neposredno v sedežno oporo. Združljivo samo z Garmin Varia RTL515 in RVR315. Če imate Scott Addict RC ali Foil RC po 2025 — odgovor je da." />
              
            </p>
          </div>

          <div style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
            <div role="table" style={{ borderTop: "1px solid var(--ink)", borderBottom: "1px solid var(--ink)", minWidth: isMobile ? 520 : "auto" }}>
              <div
                role="row"
                style={{
                  display: "grid",
                  gridTemplateColumns: "40px 2fr 80px 2fr 1.4fr",
                  padding: "12px 0",
                  borderBottom: "1px solid var(--ink)",
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  color: "var(--ink-soft)"
                }}>
                <span></span>
                <span><T en="bike" sl="kolo" /></span>
                <span><T en="year" sl="letnik" /></span>
                <span><T en="seatpost" sl="sedežna opora" /></span>
                <span style={{ textAlign: "right" }}><T en="status" sl="status" /></span>
              </div>
              {rows.map((r, i) =>
              <div
                key={i}
                role="row"
                className="reveal in"
                style={{
                  display: "grid",
                  gridTemplateColumns: "40px 2fr 80px 2fr 1.4fr",
                  padding: "20px 0",
                  borderBottom: i === rows.length - 1 ? "none" : "1px solid var(--rule)",
                  alignItems: "baseline",
                  transition: "background .2s ease"
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = "oklch(15% 0.005 60 / 0.03)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                  <span className="mono" style={{ color: statusColor(r.status), fontSize: 14 }}>{r.code}</span>
                  <span style={{ fontSize: 17, letterSpacing: "-0.005em" }}>
                    {typeof r.bike === "string" ? r.bike : <T en={r.bike.en} sl={r.bike.sl} />}
                  </span>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-soft)" }}>{r.years}</span>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-soft)" }}>{r.post}</span>
                  <span className="mono" style={{ fontSize: 12, letterSpacing: "0.06em", textAlign: "right", color: statusColor(r.status), display: "flex", flexDirection: "column", gap: 2, alignItems: "flex-end" }}>
                    <span>{t(lang, r.status)}</span>
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ------------ Process ------------ */

function Process() {
  const isMobile = useIsMobile();
  const steps = [
  {
    n: "01",
    t: { en: "sketch, measure, iterate", sl: "skiciraj, izmeri, iteriraj" },
    d: {
      en: "Products are sketched, measured and scanned. Through iteration we create something worth making.",
      sl: "Izdelke skiciramo, izmerimo in skeniramo. Skozi iteracije ustvarimo nekaj, kar je vredno narediti."
    }
  },
  {
    n: "02",
    t: { en: "print, finish, deliver", sl: "natisni, dokončaj, dostavi" },
    d: {
      en: "The print comes out of the printer, is checked and cleaned up, then brought to the stores.",
      sl: "Tisk pride iz tiskalnika, ga preverimo in očistimo, nato pa ga prinesemo v trgovine."
    }
  }];


  return (
    <section id="process" className="dark" style={{ background: "var(--ink)", color: "var(--bone)", paddingTop: "clamp(64px, 10vw, 120px)", paddingBottom: "clamp(64px, 10vw, 120px)", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr", gap: isMobile ? 40 : 64, alignItems: "start" }}>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 24 }}>
              <span><T en="how we make things" sl="kako izdelujemo" /></span>
            </div>
            <h2 className="display all-lower" style={{ margin: 0, fontWeight: 600, fontStretch: "108%", lineHeight: 0.92, letterSpacing: "-0.03em", fontSize: "clamp(40px, 6.4vw, 96px)" }}>
              <T
                en={<>sketch.<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>iterate.</span><br />print.</>}
                sl={<>skiciraj.<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>iteriraj.</span><br />natisni.</>} />
              
            </h2>
            <p style={{ marginTop: 32, color: "oklch(80% 0.005 60)", fontSize: 18, lineHeight: 1.55, maxWidth: 520 }}>
              <T
                en="Every part starts as a sketch, gets measured against the real seatpost, scanned, and iterated until it disappears. The print comes out of the printer, is checked and cleaned up, then brought to the stores."
                sl="Vsak kos se začne kot skica, ga primerjamo z dejansko sedežno oporo, skeniramo in iteriramo. Tisk pride iz tiskalnika, ga preverimo, nato pa prinesemo v trgovine." />
              
            </p>

            <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, borderTop: "1px solid oklch(28% 0.005 60)", paddingTop: 24 }}>
              {[
              ["asa", { en: "engineering polymer", sl: "inženirski polimer" }],
              ["fdm", { en: "additive process", sl: "aditivni postopek" }],
              ["kranj", { en: "slovenia", sl: "slovenija" }]].
              map(([n, l]) =>
              <div key={l.en}>
                  <div className="display" style={{ fontSize: 36, fontWeight: 700, fontStretch: "112%", lineHeight: 1, letterSpacing: "-0.02em" }}>{n}</div>
                  <div className="micro" style={{ marginTop: 8, color: "oklch(70% 0.005 60)" }}><T en={l.en} sl={l.sl} /></div>
                </div>
              )}
            </div>
          </div>

          <div>
            <CropFrame style={{ background: "transparent", aspectRatio: "4 / 5", overflow: "hidden" }} color="oklch(60% 0.005 60)">
              <img
                src="images/foil-side.png"
                alt="varia mount for the scott foil rc — side view, showing the ribbed back"
                style={{ width: "100%", height: "100%", objectFit: "contain", objectPosition: "center center", padding: "6%" }} />

              <div style={{ position: "absolute", top: 16, left: 16, display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ display: "inline-block", width: 8, height: 8, background: "var(--accent)", borderRadius: "50%", animation: "pulse 1.6s ease-in-out infinite" }} />
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--bone)" }}>
                  rev 4 · cad/side
                </span>
              </div>
              <div style={{ position: "absolute", bottom: 16, left: 16, right: 16, color: "var(--bone)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", display: "flex", justifyContent: "space-between" }}>
                <span><T en="foil mount" sl="foil nosilec" /></span>
                <span>24.5 g</span>
              </div>
              <style>{`@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }`}</style>
            </CropFrame>
          </div>
        </div>

        <div style={{ display: "none", marginTop: 96, gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 32, borderTop: "1px solid oklch(28% 0.005 60)", paddingTop: 32 }}>
          {steps.map((s, i) =>
          <div key={s.n} style={{ borderLeft: (!isMobile && i > 0) ? "1px solid oklch(28% 0.005 60)" : "none", paddingLeft: (!isMobile && i > 0) ? 24 : 0, paddingRight: 24 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)" }}>{s.n}</div>
              <h3 className="display all-lower" style={{ margin: "10px 0 14px", fontWeight: 700, fontStretch: "115%", lineHeight: 1, fontSize: "clamp(28px, 5vw, 40px)", letterSpacing: "-0.02em" }}>
                <T en={s.t.en} sl={s.t.sl} />
              </h3>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "oklch(80% 0.005 60)" }}>
                <T en={s.d.en} sl={s.d.sl} />
              </p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ------------ Next Up — Triathlon Armrest ------------ */

function NextUp() {
  const isMobile = useIsMobile();
  const rows = [
  [{ en: "status", sl: "status" }, { en: "rev 02 — closed beta", sl: "rev 02 — zaprta beta" }],
  [{ en: "test riders", sl: "test vozniki" }, { en: "4 · 2 nationals, 2 age-group", sl: "4 · 2 državna, 2 starostna skupina" }],
  [{ en: "next milestone", sl: "naslednji mejnik" }, { en: "open beta — q3 2026", sl: "odprta beta — q3 2026" }],
  [{ en: "join the waitlist", sl: "pridruži se čakalni vrsti" }, { en: "↓ below", sl: "↓ spodaj" }]];


  return (
    <section id="next" style={{ display: "none", background: "var(--bone)", paddingTop: "clamp(64px, 10vw, 120px)", paddingBottom: "clamp(64px, 10vw, 120px)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
          <div className="section-eyebrow">
            <span><T en="02 — in development" sl="02 — v razvoju" /></span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            <T en="est. ship · q4 2026" sl="predvidoma · q4 2026" />
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.1fr", gap: isMobile ? 40 : 56, alignItems: "center" }}>
          <div>
            <h2 className="display all-lower" style={{ margin: 0, fontWeight: 700, fontStretch: "115%", lineHeight: 0.9, letterSpacing: "-0.035em", fontSize: "clamp(48px, 8vw, 132px)" }}>
              <T en={<>triathlon<br />armrest.</>} sl={<>triatlonski<br />naslon.</>} />
            </h2>
            <p style={{ marginTop: 32, fontSize: 18, lineHeight: 1.5, maxWidth: 480 }}>
              <T
                en="A printed armrest pad system designed for adjustability without the angle-creep of moulded foam. Currently on test riders, going to limited release in late 2026."
                sl="Tiskan sistem podlog za naslon, oblikovan za prilagodljivost brez 'angle-creep' efekta penjene gume. Trenutno na test voznikih, omejena izdaja konec 2026." />
              
            </p>

            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 12, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.04em", color: "var(--ink-soft)" }}>
              {rows.map(([k, v], i) =>
              <div key={i} style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "180px 1fr", gap: isMobile ? 2 : 0, paddingBottom: 10, borderBottom: "1px solid var(--rule)" }}>
                  <span className="micro"><T en={k.en} sl={k.sl} /></span>
                  <span style={{ color: "var(--ink)", fontSize: 13 }}><T en={v.en} sl={v.sl} /></span>
                </div>
              )}
            </div>
          </div>

          <CropFrame style={{ aspectRatio: "5 / 4", background: "oklch(94% 0.005 80)", overflow: "hidden", position: "relative" }}>
            <SketchArmrest />
            <div style={{ position: "absolute", top: 16, left: 16, display: "flex", alignItems: "center", gap: 8 }}>
              <LogoMark size={18} strokeWidth={14} color="var(--ink)" />
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>
                tt-arm-02 · <T en="concept" sl="koncept" />
              </span>
            </div>
            <div style={{ position: "absolute", top: 16, right: 16 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", padding: "4px 8px", border: "1px solid var(--accent)", color: "var(--accent)" }}>
                ●  <T en="in development" sl="v razvoju" />
              </span>
            </div>
            <div style={{ position: "absolute", bottom: 16, left: 16, right: 16, display: "flex", justifyContent: "space-between" }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
                <T en="fig. e — sketch only, not final" sl="skica e — samo idejna, ne končna" />
              </span>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
                <T en="scale 1:2" sl="merilo 1:2" />
              </span>
            </div>
          </CropFrame>
        </div>
      </div>
    </section>);

}

function SketchArmrest() {
  return (
    <svg width="100%" height="100%" viewBox="-20 -20 540 440" preserveAspectRatio="xMidYMid meet" fill="none" stroke="currentColor" style={{ color: "var(--ink)" }} aria-hidden="true">
      <g stroke="currentColor" strokeOpacity="0.06" strokeWidth="1">
        {Array.from({ length: 20 }).map((_, i) => <line key={"v" + i} x1={i * 25} y1="0" x2={i * 25} y2="400" />)}
        {Array.from({ length: 16 }).map((_, i) => <line key={"h" + i} x1="0" y1={i * 25} x2="500" y2={i * 25} />)}
      </g>

      <g strokeWidth="1.5">
        <line x1="40" y1="220" x2="460" y2="220" />
        <line x1="40" y1="232" x2="460" y2="232" />
        <line x1="40" y1="220" x2="40" y2="232" />
        <line x1="460" y1="220" x2="460" y2="232" />
      </g>

      <g strokeWidth="1.5">
        <path d="M 140 220 C 140 170, 180 130, 230 130 L 320 130 C 360 130, 380 160, 380 200 L 380 220 Z" />
        <path d="M 160 218 C 160 178, 195 145, 235 145 L 315 145 C 350 145, 365 168, 365 200 L 365 218" strokeOpacity="0.4" />
        <rect x="160" y="118" width="200" height="22" rx="11" strokeOpacity="0.7" />
        <path d="M 160 130 L 360 130" strokeOpacity="0.3" strokeDasharray="3 3" />
      </g>

      <g strokeWidth="1.2" strokeOpacity="0.5">
        <rect x="200" y="175" width="40" height="6" rx="3" />
        <rect x="260" y="175" width="40" height="6" rx="3" />
        <circle cx="220" cy="200" r="4" />
        <circle cx="280" cy="200" r="4" />
      </g>

      <g strokeWidth="1" strokeOpacity="0.6">
        <line x1="140" y1="80" x2="380" y2="80" />
        <line x1="140" y1="76" x2="140" y2="84" />
        <line x1="380" y1="76" x2="380" y2="84" />
        <line x1="420" y1="130" x2="420" y2="232" />
        <line x1="416" y1="130" x2="424" y2="130" />
        <line x1="416" y1="232" x2="424" y2="232" />
      </g>

      <g fontFamily="Geist Mono, monospace" fontSize="11" fill="currentColor" fillOpacity="0.7" letterSpacing="0.08em">
        <text x="240" y="74" textAnchor="middle">240 mm</text>
        <text x="430" y="184" textAnchor="start">102</text>
      </g>

      <g fontFamily="Geist Mono, monospace" fontSize="10" fill="currentColor" fillOpacity="0.6" letterSpacing="0.1em">
        <line x1="220" y1="135" x2="100" y2="80" strokeWidth="1" strokeOpacity="0.4" />
        <circle cx="220" cy="135" r="2.5" fill="currentColor" fillOpacity="0.6" stroke="none" />
        <text x="40" y="68">PAD · TPU 95A</text>
        <text x="40" y="80">Replaceable insert</text>

        <line x1="365" y1="190" x2="470" y2="280" strokeWidth="1" strokeOpacity="0.4" />
        <circle cx="365" cy="190" r="2.5" fill="currentColor" fillOpacity="0.6" stroke="none" />
        <text x="380" y="298">SHELL · ASA</text>
        <text x="380" y="310">Tunable cant ±6°</text>
      </g>
    </svg>);
}

/* ------------ Newsletter ------------ */

function Newsletter() {
  const { lang } = useLang();
  const isMobile = useIsMobile();
  const [email, setEmail] = React.useState("");
  const [state, setState] = React.useState("idle");
  const [err, setErr] = React.useState("");

  const submit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setErr(t(lang, { en: "that doesn't look like an email", sl: "to ni videti kot email" }));
      setState("error");
      return;
    }
    setState("submitting");
    setErr("");
    setTimeout(() => {setState("success");}, 900);
  };

  return (
    <section id="journal" style={{ display: "none", background: "var(--accent)", color: "var(--ink)", paddingTop: "clamp(64px, 10vw, 120px)", paddingBottom: "clamp(64px, 10vw, 120px)", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 40 : 64, alignItems: "center" }}>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 24 }}>
              <span><T en="newsletter — vol. 01.dispatch" sl="novice — vol. 01.dispatch" /></span>
            </div>
            <h2 className="display all-lower" style={{ margin: 0, fontWeight: 700, fontStretch: "115%", lineHeight: 0.88, letterSpacing: "-0.035em", fontSize: "clamp(48px, 7vw, 116px)" }}>
              <T
                en={<>first to know.<br /><span style={{ fontStyle: "italic" }}>never spammed.</span></>}
                sl={<>prvi izveste.<br /><span style={{ fontStyle: "italic" }}>brez spama.</span></>} />
              
            </h2>
            <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.5, maxWidth: 480 }}>
              <T
                en="One dispatch every four to six weeks. New product drops, fitment notes, and the occasional photo of a freshly printed part on a Saturday morning bench."
                sl="Eno sporočilo vsakih štiri do šest tednov. Novi izdelki, opombe o ujemanju in občasna fotografija sveže natisnjenega kosa na sobotno jutranji mizi." />
              
            </p>
          </div>

          <div>
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <label className="micro" htmlFor="email-input" style={{ color: "var(--ink)" }}>
                <T en="your email" sl="vaš e-naslov" />
              </label>
              <div style={{ position: "relative", display: "flex", alignItems: "center", borderBottom: "2px solid var(--ink)" }}>
                <input
                  id="email-input"
                  type="email"
                  value={email}
                  onChange={(e) => {setEmail(e.target.value);if (state === "error") {setState("idle");setErr("");}}}
                  placeholder={t(lang, { en: "rider@somewhere.cc", sl: "kolesar@nekje.si" })}
                  disabled={state === "submitting" || state === "success"}
                  style={{
                    flex: 1, background: "transparent", border: 0, outline: 0,
                    padding: "16px 0",
                    fontFamily: "var(--font-display)", fontStretch: "108%", fontWeight: 500,
                    fontSize: 28, letterSpacing: "-0.01em", color: "var(--ink)"
                  }} />
                
                <button
                  type="submit"
                  disabled={state === "submitting" || state === "success"}
                  className="mono"
                  style={{
                    padding: "12px 16px", background: "var(--ink)", color: "var(--bone)",
                    fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
                    transition: "all .25s ease", opacity: state === "submitting" ? 0.5 : 1
                  }}>
                  {state === "submitting" ?
                  t(lang, { en: "sending…", sl: "pošiljam…" }) :
                  state === "success" ?
                  t(lang, { en: "✓ subscribed", sl: "✓ naročen" }) :
                  t(lang, { en: "subscribe →", sl: "naroči se →" })}
                </button>
              </div>
              <div style={{ minHeight: 22, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em", color: state === "error" ? "var(--ink)" : "oklch(15% 0.005 60 / 0.6)" }}>
                {state === "error" && <span>⚠ {err}</span>}
                {state === "success" && <span><T en="✓ welcome. first dispatch lands next month." sl="✓ dobrodošli. prvo sporočilo pride naslednji mesec." /></span>}
                {state === "idle" && <span><T en="by subscribing you agree to receive 8–10 emails per year. unsubscribe anytime." sl="z naročilom se strinjate s prejemom 8–10 e-pošt na leto. odjava kadarkoli." /></span>}
                {state === "submitting" && <span><T en="working…" sl="delam…" /></span>}
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>);

}

/* ------------ Stockists ------------ */

function Stockists() {
  const isMobile = useIsMobile();
  const stores = [
  {
    n: "01",
    name: "Grasca d.o.o.",
    where: "Naklo, Gorenjska",
    address: "Kranjska cesta 8, 4202 Naklo",
    hours: {
      en: "mon–fri 08–18 · sat 08–12 · sun closed",
      sl: "pon–pet 08–18 · sob 08–12 · ned zaprto"
    },
    phone: "(04) 595 60 10",
    maps: "https://www.google.com/maps?um=1&ie=UTF-8&fb=1&gl=si&sa=X&geocode=KcG_HEF3vHpHMRByVNfdZW2K&daddr=Kranjska+cesta+8,+4202+Naklo",
    note: {
      en: "First shop to carry us. Local heroes, twenty minutes from the workshop.",
      sl: "Prva trgovina, ki nas je prodajala. Lokalni junaki, dvajset minut od delavnice."
    },
    tag: { en: "kranj", sl: "kranj" }
  },
  {
    n: "02",
    name: "Wheelbase d.o.o.",
    where: "Ljubljana",
    address: "Argentinska ulica 13, 1000 Ljubljana",
    hours: {
      en: "mon–fri 09–19 · sat 09–12 · sun closed",
      sl: "pon–pet 09–19 · sob 09–12 · ned zaprto"
    },
    phone: "+386 59 022 761",
    maps: "https://www.google.com/maps?um=1&ie=UTF-8&fb=1&gl=si&sa=X&geocode=KUX5g6V1t3pHMWwibuVJVhLp&daddr=Argentinska+ulica+13,+1000+Ljubljana",
    note: {
      en: "Full inventory · fitted to your post on the rack · talk to the mechanics.",
      sl: "Polna zaloga · namestitev na sedežno oporo v trgovini · pogovor z mehaniki."
    },
    tag: { en: "ljubljana", sl: "ljubljana" }
  }];


  return (
    <section id="dealers" style={{ background: "var(--bone)", paddingTop: "clamp(64px, 10vw, 120px)", paddingBottom: "clamp(64px, 10vw, 120px)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
          <div className="section-eyebrow">
            <span><T en="dealers — slovenia only, for now" sl="trgovine — samo slovenija, zaenkrat" /></span>
          </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            <T en="two mounts, by hand, on order" sl="dva nosilca, ročno, po naročilu" />
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "clamp(32px, 5vw, 72px)", alignItems: "start" }}>
          {/* Left intro */}
          <div style={{ display: "none" }}>
            <h2 className="display all-lower" style={{ margin: 0, fontStretch: "115%", fontSize: "clamp(40px, 6.4vw, 100px)", letterSpacing: "-5px", lineHeight: "0.85", fontWeight: "700" }}>
              <T
                en={<>walk in.<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>walk out</span><br />fitted.</>}
                sl={<>pridi<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>odidi.</span><br />nameščeno.</>} />
              
            </h2>
            <p style={{ marginTop: 28, fontSize: 17, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 420 }}>
              <T
                en="We don't sell online. Every mount is made to order in Kranj, then placed at two cycling shops in Slovenia we know, ride with, and trust. Staff will fit it to your post while you wait."
                sl="Nimamo spletne trgovine. Vsak nosilec naredimo v Kranju in ga prepustimo dvema slovenskima kolesarskima trgovinama, ki ju poznamo, z njima vozimo in jima zaupamo. Osebje ga bo med čakanjem namestilo na vaši opori." />
              
            </p>
            <a href="#contact" className="mono" style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 28, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", borderBottom: "1px solid var(--ink)", paddingBottom: 4 }}>
              <T en="outside slovenia? write to us →" sl="iz tujine? pišite nam →" />
            </a>
          </div>

          {/* Right store cards */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            {stores.map((s) =>
            <StoreCard key={s.n} s={s} />
            )}

            {/* Future indicator */}
            <article
              style={{
                border: "1px dashed var(--rule-strong)",
                padding: "24px 28px",
                display: "grid",
                gridTemplateColumns: "56px 1fr",
                gap: 24,
                alignItems: "center",
                color: "var(--ink-soft)"
              }}>
              
              <div className="display" style={{ fontSize: 36, fontWeight: 700, fontStretch: "115%", lineHeight: 1, letterSpacing: "-0.02em", color: "var(--ink-soft)" }}>03</div>
              <div>
                <div className="display all-lower" style={{ fontSize: 22, fontWeight: 600, fontStretch: "108%", lineHeight: 1, letterSpacing: "-0.015em" }}>
                  <T en="your shop?" sl="vaša trgovina?" />
                </div>
                <p style={{ margin: "8px 0 0", fontSize: 14, lineHeight: 1.5, maxWidth: 460 }}>
                  <T
                    en="We're slowly expanding to selected shops across Europe. If you run one and your customers ride Scotts — say hello."
                    sl="Počasi se širimo na izbrane trgovine po Evropi. Če imate kolesarsko trgovino in vaše stranke vozijo Scott — kontaktirajte nas." />
                  
                </p>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>);

}

function StoreCard({ s }) {
  const isMobile = useIsMobile();
  const mapsHref = s.maps || `https://www.google.com/maps/search/${encodeURIComponent(s.name + " " + s.address)}`;
  return (
    <article
      style={{
        border: "1px solid var(--rule-strong)",
        padding: "28px 28px 24px",
        display: "grid",
        gridTemplateColumns: isMobile ? "56px 1fr" : "56px 1fr auto",
        gap: 24,
        alignItems: "start",
        transition: "background .25s ease, border-color .25s ease",
        position: "relative"
      }}
      onMouseEnter={(e) => {e.currentTarget.style.borderColor = "var(--ink)";e.currentTarget.style.background = "oklch(15% 0.005 60 / 0.025)";}}
      onMouseLeave={(e) => {e.currentTarget.style.borderColor = "var(--rule-strong)";e.currentTarget.style.background = "transparent";}}>

      <div>
        <div className="display" style={{ fontSize: 36, fontWeight: 700, fontStretch: "115%", lineHeight: 1, color: "var(--accent)", letterSpacing: "-0.02em" }}>{s.n}</div>
        <div className="micro" style={{ marginTop: 6, color: "var(--ink-soft)" }}>
          <T en={s.tag.en} sl={s.tag.sl} />
        </div>
      </div>
      <div>
        <h3 className="display all-lower" style={{ margin: 0, fontSize: "clamp(22px, 4vw, 32px)", fontWeight: 700, fontStretch: "112%", lineHeight: 1, letterSpacing: "-0.025em" }}>
          {s.name}
        </h3>
        <div className="mono" style={{ marginTop: 10, fontSize: 12, letterSpacing: "0.04em", color: "var(--ink-soft)" }}>
          <div>{s.address}</div>
          <div style={{ marginTop: 4 }}><T en={s.hours.en} sl={s.hours.sl} /></div>
          {s.phone && <div style={{ marginTop: 4 }}><a href={`tel:${s.phone.replace(/\s/g, "")}`} style={{ borderBottom: "1px solid var(--rule-strong)" }}>{s.phone}</a></div>}
        </div>
        {isMobile && (
          <a
            href={mapsHref}
            target="_blank"
            rel="noreferrer"
            className="mono"
            style={{
              display: "inline-block",
              marginTop: 16,
              padding: "10px 14px",
              border: "1px solid var(--ink)",
              fontSize: 11,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              whiteSpace: "nowrap",
              transition: "all .2s ease"
            }}
            onMouseEnter={(e) => {e.currentTarget.style.background = "var(--ink)";e.currentTarget.style.color = "var(--bone)";}}
            onMouseLeave={(e) => {e.currentTarget.style.background = "transparent";e.currentTarget.style.color = "var(--ink)";}}>
            <T en="open in maps ↗" sl="odpri v zemljevidih ↗" />
          </a>
        )}
      </div>
      {!isMobile && <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
          {s.where}
        </span>
        <a
          href={mapsHref}
          target="_blank"
          rel="noreferrer"
          className="mono"
          style={{
            marginTop: 12,
            padding: "10px 14px",
            border: "1px solid var(--ink)",
            fontSize: 11,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            whiteSpace: "nowrap",
            transition: "all .2s ease"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.background = "var(--ink)";e.currentTarget.style.color = "var(--bone)";}}
          onMouseLeave={(e) => {e.currentTarget.style.background = "transparent";e.currentTarget.style.color = "var(--ink)";}}>

          <T en="open in maps ↗" sl="odpri v zemljevidih ↗" />
        </a>
      </div>}
    </article>);

}

/* ------------ Install Guide ------------ */

function InstallGuide() {
  const { lang } = useLang();
  const isMobile = useIsMobile();
  const [model, setModel] = React.useState("addict");
  const [playing, setPlaying] = React.useState(false);

  const VIDEOS = {
    addict: {
      id: "zKREzNXOOdc",
      title: { en: "installing on the addict rc", sl: "namestitev na addict rc" },
      post: "Syncros SP-R101-CF",
    },
    foil: {
      id: "zKREzNXOOdc",
      title: { en: "installing on the foil rc", sl: "namestitev na foil rc" },
      post: "Syncros Duncan SL Aero CFT",
    },
  };

  const v = VIDEOS[model];
  const thumb = `https://img.youtube.com/vi/${v.id}/maxresdefault.jpg`;

  const handleModelSwitch = (k) => {
    setModel(k);
    setPlaying(false);
  };

  return (
    <section id="install" className="dark" style={{ background: "var(--ink)", color: "var(--bone)", paddingTop: "clamp(64px, 10vw, 120px)", paddingBottom: "clamp(64px, 10vw, 120px)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
          <div className="section-eyebrow" style={{ borderColor: "oklch(28% 0.005 60)" }}>
            <span><T en="installation" sl="namestitev" /></span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "oklch(60% 0.005 60)" }}>
            <T en="you'll need a 2.5mm hex key" sl="potrebujete 2,5mm imbus ključ" />
          </div>
        </div>

        <h2 className="display all-lower" style={{ margin: "0 0 12px", fontWeight: 700, fontStretch: "115%", lineHeight: 0.9, letterSpacing: "-0.035em", fontSize: "clamp(48px, 8vw, 132px)" }}>
          <T en="how to fit it" sl="kako namestiti" />
        </h2>

        {/* Model switcher */}
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 40, flexWrap: "wrap" }}>
          {Object.keys(VIDEOS).map((k, i) =>
            <React.Fragment key={k}>
              {i > 0 && <span className="display all-lower" style={{ fontSize: "clamp(20px, 2.6vw, 36px)", color: "oklch(28% 0.005 60)", lineHeight: 1, fontWeight: 500 }}>/</span>}
              <button
                onClick={() => handleModelSwitch(k)}
                className="display all-lower"
                style={{
                  fontWeight: model === k ? 700 : 500,
                  fontStretch: "115%",
                  fontStyle: model === k ? "italic" : "normal",
                  fontSize: "clamp(22px, 3vw, 44px)",
                  lineHeight: 1,
                  letterSpacing: "-0.02em",
                  padding: 0,
                  color: model === k ? "var(--accent)" : "oklch(50% 0.005 60)",
                  transition: "color .2s ease",
                  cursor: "pointer",
                  background: "transparent",
                  border: "none"
                }}
                onMouseEnter={(e) => { if (model !== k) e.currentTarget.style.color = "var(--bone)"; }}
                onMouseLeave={(e) => { if (model !== k) e.currentTarget.style.color = "oklch(50% 0.005 60)"; }}>
                {k === "addict" ? <T en="addict rc" sl="addict rc" /> : <T en="foil rc" sl="foil rc" />}
              </button>
            </React.Fragment>
          )}
        </div>

        {/* Video */}
        <div style={{ position: "relative", width: "100%", aspectRatio: "16 / 9", background: "oklch(10% 0.005 60)", overflow: "hidden" }}>
          {playing ? (
            <iframe
              key={v.id}
              src={`https://www.youtube-nocookie.com/embed/${v.id}?autoplay=1&rel=0&modestbranding=1`}
              title={t(lang, v.title)}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }} />
          ) : (
            <button
              onClick={() => setPlaying(true)}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", padding: 0, border: "none", cursor: "pointer", background: "none" }}
              aria-label={t(lang, { en: "play video", sl: "predvajaj video" })}>
              <img
                src={thumb}
                alt={t(lang, v.title)}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", opacity: 0.85 }} />
              {/* Play button */}
              <div style={{
                position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
                background: "oklch(15% 0.005 60 / 0.3)", transition: "background .2s ease"
              }}
                onMouseEnter={(e) => e.currentTarget.style.background = "oklch(15% 0.005 60 / 0.5)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "oklch(15% 0.005 60 / 0.3)"}>
                <div style={{
                  width: isMobile ? 56 : 72, height: isMobile ? 56 : 72,
                  border: "2px solid var(--bone)", borderRadius: "50%",
                  display: "flex", alignItems: "center", justifyContent: "center"
                }}>
                  <div style={{ width: 0, height: 0, borderTop: `${isMobile ? 10 : 13}px solid transparent`, borderBottom: `${isMobile ? 10 : 13}px solid transparent`, borderLeft: `${isMobile ? 18 : 22}px solid var(--bone)`, marginLeft: isMobile ? 4 : 5 }} />
                </div>
              </div>
            </button>
          )}
        </div>

        <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "oklch(50% 0.005 60)" }}>
          <span><T en={v.title.en} sl={v.title.sl} /></span>
          <span>{v.post}</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProductHighlight, CompatTable, Process, NextUp, Newsletter, Stockists, InstallGuide });