/* Page sections — chrome (Nav, Marquee, Footer) and Hero variants. */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMobile = useIsMobile();

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    if (!isMobile) setMenuOpen(false);
  }, [isMobile]);

  const links = [
  { en: "products", sl: "izdelki", href: "#products" },
  { en: "fitment", sl: "ujemanje", href: "#fitment" },
  { en: "dealers", sl: "trgovine", href: "#dealers" },
  { en: "installation", sl: "namestitev", href: "#install" },
  { en: "process", sl: "postopek", href: "#process" },
  { en: "contact", sl: "kontakt", href: "#contact" }];

  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: scrolled ? "color-mix(in oklch, var(--bone) 88%, transparent)" : "transparent",
        backdropFilter: scrolled ? "blur(14px) saturate(1.1)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(14px) saturate(1.1)" : "none",
        borderBottom: (scrolled || menuOpen) ? "1px solid var(--rule)" : "1px solid transparent",
        transition: "background .25s ease, border-color .25s ease"
      }}>

      <div
        className="container"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 24,
          padding: isMobile ? "14px 20px" : "16px 32px"
        }}>

        <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
          <LogoMark size={22} strokeWidth={14} />
          <span style={{ fontStyle: "italic", fontWeight: 500, fontSize: 15, letterSpacing: "-0.005em" }}>
            bye bye design
          </span>
        </a>

        {!isMobile && (
          <nav style={{ display: "flex", alignItems: "center", gap: 24 }}>
            {links.map((l) =>
            <a
              key={l.href}
              href={l.href}
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 12,
                letterSpacing: "0.06em",
                color: "var(--ink)",
                position: "relative",
                paddingBottom: 2
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
              onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink)"}>
              <T en={l.en} sl={l.sl} />
            </a>
            )}
          </nav>
        )}

        {!isMobile ? (
          <div style={{ display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em" }}>
            <LangSwitch />
            <a href="#dealers" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
            onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink)"}>
              <span style={{ display: "inline-block", width: 6, height: 6, background: "var(--accent)" }} />
              <T en="find a dealer" sl="do trgovine" />
            </a>
          </div>
        ) : (
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            style={{ padding: 8, display: "flex", flexDirection: "column", gap: 5, background: "none", border: "none", cursor: "pointer" }}>
            <span style={{ display: "block", width: 22, height: 2, background: "var(--ink)", transition: "transform .2s ease, opacity .2s ease", transform: menuOpen ? "translateY(7px) rotate(45deg)" : "none" }} />
            <span style={{ display: "block", width: 22, height: 2, background: "var(--ink)", transition: "opacity .2s ease", opacity: menuOpen ? 0 : 1 }} />
            <span style={{ display: "block", width: 22, height: 2, background: "var(--ink)", transition: "transform .2s ease, opacity .2s ease", transform: menuOpen ? "translateY(-7px) rotate(-45deg)" : "none" }} />
          </button>
        )}
      </div>

      {isMobile && menuOpen && (
        <div style={{
          background: "var(--bone)",
          borderBottom: "1px solid var(--rule-strong)",
          padding: "4px 20px 28px"
        }}>
          <nav>
            {links.map((l) =>
            <a
              key={l.href}
              href={l.href}
              onClick={() => setMenuOpen(false)}
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 14,
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                color: "var(--ink)",
                display: "block",
                padding: "14px 0",
                borderBottom: "1px solid var(--rule)"
              }}>
              <T en={l.en} sl={l.sl} />
            </a>
            )}
          </nav>
          <div style={{ marginTop: 24, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <LangSwitch />
            <a
              href="#dealers"
              onClick={() => setMenuOpen(false)}
              style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em" }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
              onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink)"}>
              <span style={{ display: "inline-block", width: 6, height: 6, background: "var(--accent)" }} />
              <T en="find a dealer" sl="do trgovine" />
            </a>
          </div>
        </div>
      )}
    </header>);

}

function Marquee() {
  const { lang } = useLang();
  const items = lang === "sl" ? [
  "dva nosilca · addict + foil",
  "natisnjeno v kranju, slovenija",
  "majhne serije fdm · asa",
  "vol. 01 — oprema za sedežno oporo"] :
  [
  "two mounts · addict + foil",
  "printed in kranj, slovenia",
  "small-batch fdm · asa",
  "vol. 01 — seatpost equipment"];

  // duplicate for seamless loop
  const full = [...items, ...items, ...items, ...items];
  return (
    <div
      style={{
        background: "var(--ink)",
        color: "var(--bone)",
        overflow: "hidden",
        borderTop: "1px solid var(--ink)",
        borderBottom: "1px solid var(--ink)"
      }}
      aria-hidden="true">

      <div
        style={{
          display: "flex",
          gap: 56,
          padding: "12px 0",
          whiteSpace: "nowrap",
          width: "max-content",
          animation: "marquee 38s linear infinite"
        }}>

        {full.map((s, i) =>
        <span
          key={i}
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            display: "inline-flex",
            alignItems: "center",
            gap: 56
          }}>
          {s}
          <span style={{ color: "var(--accent)" }}>✦</span>
        </span>
        )}
      </div>
    </div>);

}

/* ---------------- HERO ---------------- */

function HeroStack() {
  const isMobile = useIsMobile();
  return (
    <section id="top" style={{ background: "var(--bone)", paddingTop: 56, paddingBottom: 64, position: "relative", overflow: "hidden" }}>
      <div className="container">
        {/* Top meta row */}
        <div style={{ display: "flex", justifyContent: "space-between", gap: 24, marginBottom: 48, flexWrap: "wrap" }}>
          <div className="section-eyebrow">
            <span><T en="vol. 01 — seatpost equipment" sl="vol. 01 — oprema za sedežno oporo" /></span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            <T en="ed. 2026 · printed in kranj" sl="ed. 2026 · natisnjeno v kranju" />
          </div>
        </div>

        {/* Big headline — full width */}
        <h1
          className="display all-lower"
          style={{
            margin: 0,
            fontWeight: 700,
            fontStretch: "115%",
            lineHeight: 0.86,
            letterSpacing: "-0.045em",
            fontSize: "clamp(48px, 13.5vw, 232px)"
          }}>

          <T
            en={<>
              <span style={{ display: "block" }}>designed</span>
              <span style={{ display: "block", color: "var(--accent)", fontStyle: "italic" }}>to disappear.</span>
            </>}
            sl={<>
              <span style={{ display: "block" }}>oblikovano</span>
              <span style={{ display: "block", color: "var(--accent)", fontStyle: "italic" }}>da izgine.</span>
            </>} />

        </h1>

        {/* Bottom split row */}
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: "clamp(24px, 4vw, 56px)", marginTop: 40, alignItems: "end" }}>
          <p style={{ margin: 0, fontSize: "clamp(16px, 1.4vw, 19px)", lineHeight: 1.45, color: "var(--ink-soft)", maxWidth: 480 }}>
            <T
              en="Performance equipment for road cyclists who care about the things they don't have to think about. Small batch, made in Kranj."
              sl="Vrhunska oprema za cestne kolesarje, ki jim ni vseeno za stvari, o katerih jim ni treba razmišljati. Majhne serije, narejeno v Kranju." />
          </p>
          <div style={{ display: "flex", gap: 10, justifyContent: isMobile ? "flex-start" : "flex-end", flexWrap: "wrap" }}>
            <a href="#dealers" className="btn btn--accent">
              <T en="find a dealer" sl="do trgovine" /> <span className="arrow">→</span>
            </a>
            <a href="#process" className="btn">
              <T en="the process" sl="postopek" />
            </a>
          </div>
        </div>

        {/* Hero image with CAD callouts */}
        <div style={{ marginTop: 64, position: "relative" }}>
          <CropFrame style={{ aspectRatio: isMobile ? "4 / 3" : "16 / 10", background: "transparent", overflow: "hidden" }}>
            <img
              src="images/varia-sketch.png"
              alt="sketched render of the bye bye design varia mount on a syncros aero seatpost"
              style={{ width: "100%", height: "100%", objectFit: "contain", objectPosition: "center 55%" }} />

            {!isMobile && <CADOverlay />}
          </CropFrame>

          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-soft)", gap: 16, flexWrap: "wrap" }}>
            <span><T en="fig. 01 — scott foil rc" sl="skica 01 — scott foil rc" /></span>
            <span><T en="↳ shot on a bench somewhere" sl="↳ posneto na delovni mizi" /></span>
          </div>
        </div>
      </div>
    </section>);

}

function HeroSplit() {
  const isMobile = useIsMobile();

  if (isMobile) {
    return (
      <section id="top" style={{ background: "var(--bone)", paddingTop: 32, paddingBottom: 40 }}>
        <div className="container">
          <div className="section-eyebrow" style={{ marginBottom: 24 }}>
            <span><T en="vol. 01 — seatpost equipment" sl="vol. 01 — oprema za sedežno oporo" /></span>
          </div>

          <h1
            className="display all-lower"
            style={{
              margin: 0,
              fontWeight: 800,
              fontStretch: "118%",
              lineHeight: 0.88,
              letterSpacing: "-0.04em",
              fontSize: "clamp(52px, 14vw, 120px)"
            }}>
            <T
              en={<>designed<br /><span style={{ color: "var(--accent)", fontStyle: "italic" }}>to disappear.</span></>}
              sl={<>oblikovano<br /><span style={{ color: "var(--accent)", fontStyle: "italic" }}>da izgine.</span></>} />
          </h1>

          <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.5, color: "var(--ink-soft)" }}>
            <T
              en="Performance equipment for road cyclists who care about the things they don't have to think about. Small batch, made in Kranj."
              sl="Vrhunska oprema za cestne kolesarje, ki jim ni vseeno za stvari, o katerih jim ni treba razmišljati. Majhne serije, narejeno v Kranju." />
          </p>

          <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
            <a href="#products" className="btn btn--accent">
              <T en="see the mount" sl="poglej nosilec" /> <span className="arrow">→</span>
            </a>
            <a href="#process" className="btn"><T en="the process" sl="postopek" /></a>
          </div>

          {/* Contained image */}
          <div style={{ marginTop: 32, position: "relative", aspectRatio: "3 / 4", maxHeight: "65vh", overflow: "hidden" }}>
            <img
              src="images/varia-sketch.png"
              alt="varia mount sketch"
              style={{ width: "100%", height: "100%", objectFit: "contain", objectPosition: "center center" }}
            />
          </div>

          {/* Edition cards */}
          <div style={{ borderTop: "1px solid var(--rule-strong)", paddingTop: 20, marginTop: 24 }}>
            <div className="micro" style={{ color: "var(--ink-soft)", marginBottom: 14, display: "flex", justifyContent: "space-between" }}>
              <span><T en="in this edition" sl="v tej izdaji" /></span>
              <span>02 / <T en="mounts" sl="nosilca" /></span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
              {[
                { sku: "vm/syn-add", bike: "scott addict rc", weight: "15.8 g" },
                { sku: "vm/syn-foi", bike: "scott foil rc",   weight: "24.5 g" },
              ].map((m, i) => (
                <a
                  key={m.sku}
                  href="#products"
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: 5,
                    padding: "14px 12px",
                    borderLeft: i === 0 ? "1px solid var(--rule)" : "none",
                    borderRight: "1px solid var(--rule)",
                    transition: "background .2s ease",
                  }}
                  onMouseEnter={(e) => (e.currentTarget.style.background = "oklch(15% 0.005 60 / 0.04)")}
                  onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
                >
                  <span className="display all-lower" style={{ fontSize: 17, fontWeight: 700, fontStretch: "112%", lineHeight: 1.05, letterSpacing: "-0.015em" }}>{m.bike}</span>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: "0.06em", color: "var(--ink-soft)", marginTop: 2 }}>{m.weight} · asa · €39.95</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="top" style={{ background: "var(--bone)", paddingTop: 32, paddingBottom: 32 }}>
      <div className="container" style={{ position: "relative" }}>
        <div className="section-eyebrow" style={{ marginBottom: 32 }}>
          <span><T en="vol. 01 — seatpost equipment" sl="vol. 01 — oprema za sedežno oporo" /></span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "stretch", position: "relative" }}>
          {/* Oversized sketch — bleeds left off-screen and overlaps text on the right */}
          <div style={{ position: "relative", minHeight: "min(78vh, 820px)" }}>
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: 0,
                transform: "translate(-22%, -48%)",
                width: "165%",
                aspectRatio: "3 / 4",
                maxHeight: "112vh",
                pointerEvents: "none",
                zIndex: 2,
              }}
            >
              <img
                src="images/varia-sketch.png"
                alt="varia mount sketch"
                style={{ width: "100%", height: "100%", objectFit: "contain", objectPosition: "center center" }}
              />
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "12px 0", position: "relative", zIndex: 1, gap: 32 }}>
            <div>
              <h1
                className="display all-lower"
                style={{
                  margin: 0,
                  fontWeight: 800,
                  fontStretch: "118%",
                  lineHeight: 0.88,
                  letterSpacing: "-0.04em",
                  fontSize: "clamp(56px, 8.4vw, 156px)"
                }}>

                <T
                  en={<>designed<br /><span style={{ color: "var(--accent)", fontStyle: "italic" }}>to disappear.</span></>}
                  sl={<>oblikovano<br /><span style={{ color: "var(--accent)", fontStyle: "italic" }}>da izgine.</span></>} />

              </h1>
              <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 460 }}>
                <T
                  en="Performance equipment for road cyclists who care about the things they don't have to think about. Small batch, made in Kranj."
                  sl="Vrhunska oprema za cestne kolesarje, ki jim ni vseeno za stvari, o katerih jim ni treba razmišljati. Majhne serije, narejeno v Kranju." />

              </p>
              <div style={{ display: "flex", gap: 10, marginTop: 32 }}>
                <a href="#products" className="btn btn--accent">
                  <T en="see the mount" sl="poglej nosilec" /> <span className="arrow">→</span>
                </a>
                <a href="#process" className="btn"><T en="the process" sl="postopek" /></a>
              </div>
            </div>

            {/* In this edition — bridges to the product section */}
            <div style={{ borderTop: "1px solid var(--rule-strong)", paddingTop: 20 }}>
              <div className="micro" style={{ color: "var(--ink-soft)", marginBottom: 14, display: "flex", justifyContent: "space-between" }}>
                <span><T en="in this edition" sl="v tej izdaji" /></span>
                <span>02 / <T en="mounts" sl="nosilca" /></span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
                {[
                  { sku: "vm/syn-add", bike: "scott addict rc", weight: "15.8 g" },
                  { sku: "vm/syn-foi", bike: "scott foil rc",   weight: "24.5 g" },
                ].map((m, i) => (
                  <a
                    key={m.sku}
                    href="#products"
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      gap: 6,
                      padding: "16px 18px",
                      borderLeft: i === 0 ? "1px solid var(--rule)" : "none",
                      borderRight: "1px solid var(--rule)",
                      transition: "background .2s ease",
                    }}
                    onMouseEnter={(e) => (e.currentTarget.style.background = "oklch(15% 0.005 60 / 0.04)")}
                    onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
                  >
                    <span className="display all-lower" style={{ fontSize: 22, fontWeight: 700, fontStretch: "112%", lineHeight: 1.05, letterSpacing: "-0.015em" }}>{m.bike}</span>
                    <span className="mono" style={{ fontSize: 11, letterSpacing: "0.06em", color: "var(--ink-soft)", marginTop: 2 }}>{m.weight} · asa · €39.95</span>
                  </a>
                ))}
              </div>
              <div className="mono" style={{ marginTop: 16, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)", display: "flex", justifyContent: "space-between", gap: 12 }}>
                <span><T en="fig. 01 — scott addict rc" sl="skica 01 — scott addict rc" /></span>
                <span>↓ <T en="see specs" sl="poglej specifikacije" /></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function HeroManifesto() {
  const isMobile = useIsMobile();
  return (
    <section id="top" style={{ background: "var(--bone)", padding: "64px 0 32px", position: "relative", overflow: "hidden" }}>
      <div className="container" style={{ position: "relative" }}>
        {/* Background mark */}
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", pointerEvents: "none", opacity: 0.06 }}>
          <LogoMark size={isMobile ? 360 : 720} strokeWidth={6} color="var(--ink)" />
        </div>

        <div style={{ position: "relative", textAlign: "center", padding: "48px 0 24px" }}>
          <div className="section-eyebrow" style={{ justifyContent: "center", marginBottom: 28 }}>
            <span><T en="vol. 01 — seatpost equipment" sl="vol. 01 — oprema za sedežno oporo" /></span>
          </div>
          <h1
            className="display all-lower"
            style={{
              margin: "0 auto",
              maxWidth: 1200,
              fontWeight: 600,
              fontStretch: "108%",
              lineHeight: 0.95,
              letterSpacing: "-0.035em",
              fontSize: "clamp(40px, 6.6vw, 116px)"
            }}>

            <T
              en={<>
                We make <span style={{ fontStyle: "italic", color: "var(--accent)" }}>quietly excellent</span> things
                <br /> for people who would rather not think
                <br /> about their <span style={{ fontStyle: "italic" }}>equipment.</span>
              </>}
              sl={<>
                Delamo <span style={{ fontStyle: "italic", color: "var(--accent)" }}>tiho odlične</span> stvari
                <br /> za ljudi, ki o svoji <span style={{ fontStyle: "italic" }}>opremi</span>
                <br /> raje ne razmišljajo.
              </>} />

          </h1>

          <div style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 40, flexWrap: "wrap" }}>
            <a href="#products" className="btn btn--accent"><T en="see the mount" sl="poglej nosilec" /> <span className="arrow">→</span></a>
            <a href="#process" className="btn"><T en="the process" sl="postopek" /></a>
          </div>
        </div>

        <CropFrame style={{ aspectRatio: isMobile ? "4 / 3" : "21 / 9", background: "transparent", overflow: "hidden", marginTop: 32 }}>
          <img
            src="images/varia-sketch.png"
            alt="varia mount sketch"
            style={{ width: "100%", height: "100%", objectFit: "contain", objectPosition: "center center" }} />

        </CropFrame>
      </div>
    </section>);

}

/* CAD callouts pinned over the hero image */
function CADOverlay() {
  const { lang } = useLang();
  const labelStyle = {
    fontFamily: "var(--font-mono)",
    fontSize: 10,
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    color: "var(--bone)",
    background: "color-mix(in oklch, var(--ink) 70%, transparent)",
    padding: "4px 8px",
    border: "1px solid var(--bone)",
    whiteSpace: "nowrap"
  };
  return (
    <>
      <div style={{ position: "absolute", top: 16, left: 16, display: "flex", alignItems: "center", gap: 10, color: "var(--ink)" }}>
        <LogoMark size={20} strokeWidth={14} color="var(--ink)" />
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>
          vol. 01 · ø 20.7
        </span>
      </div>
      <div style={{ position: "absolute", top: 16, right: 16, ...labelStyle }}>
        rec ● 04:21 · 24°C · 1013 hPa
      </div>
      <div style={{ position: "absolute", bottom: 16, left: 16, ...labelStyle }}>
        15.8 g · asa · {lang === "sl" ? "mat črna" : "matte black"}
      </div>
      <div style={{ position: "absolute", bottom: 16, right: 16, ...labelStyle }}>
        {lang === "sl" ? "podrsajte ↓" : "scroll ↓"}
      </div>
    </>);

}

function Footer() {
  const isMobile = useIsMobile();
  const cols = [
  {
    title: { en: "shop", sl: "izdelki" },
    links: [
    [{ en: "varia mount / syncros", sl: "varia nosilec / syncros" }, "#products"],
    [{ en: "all dealers", sl: "vse trgovine" }, "#dealers"]]


  },
  {
    title: { en: "support", sl: "pomoč" },
    links: [
    [{ en: "is it for my bike?", sl: "ali ustreza mojemu kolesu?" }, "#fitment"],
    [{ en: "installation guide", sl: "navodila za namestitev" }, "#install"],
    [{ en: "contact", sl: "kontakt" }, "#contact"]]

  },
  {
    title: { en: "elsewhere", sl: "drugje" },
    links: [
    [{ en: "instagram", sl: "instagram" }, "https://www.instagram.com/byebyedesign.cc"]]

  }];

  return (
    <footer id="contact" className="dark" style={{ background: "var(--ink)", color: "var(--bone)", paddingTop: "clamp(48px, 7vw, 80px)", paddingBottom: 32, marginTop: 0 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "1.4fr repeat(3, 1fr)", gap: isMobile ? 32 : 48, alignItems: "start" }}>
          <div style={{ gridColumn: isMobile ? "1 / -1" : "auto" }}>
            <Lockup markSize={28} textSize={18} color="var(--bone)" strokeWidth={14} />
            <p style={{ marginTop: 20, color: "oklch(75% 0.005 60)", maxWidth: 320, lineHeight: 1.5, fontSize: 14 }}>
              <T
                en="Small-batch performance equipment, made in Kranj, Slovenia."
                sl="Vrhunska oprema iz majhnih serij, narejena v Kranju, Slovenija." />

            </p>
          </div>
          {cols.map((c, ci) =>
          <div key={ci}>
              <div className="micro" style={{ color: "oklch(60% 0.005 60)", marginBottom: 16 }}>
                <T en={c.title.en} sl={c.title.sl} />
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map(([label, href], li) =>
              <li key={li}>
                    <a href={href} style={{ fontSize: 14, color: "var(--bone)" }}
                target={href.startsWith("http") ? "_blank" : undefined}
                rel={href.startsWith("http") ? "noreferrer" : undefined}
                onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
                onMouseLeave={(e) => e.currentTarget.style.color = "var(--bone)"}>
                  <T en={label.en} sl={label.sl} /></a>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>

        <div style={{ marginTop: 80, paddingTop: 24, borderTop: "1px solid oklch(28% 0.005 60)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, color: "oklch(60% 0.005 60)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
          <span><T en="© 2026 proloco trade, d.o.o. · kranj, slovenia" sl="© 2026 proloco trade, d.o.o. · kranj, slovenija" /></span>
          <span>vat · si 77714598</span>
          <span><LogoMark size={12} strokeWidth={16} color="var(--accent)" /> · vol. 01</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Marquee, HeroStack, HeroSplit, HeroManifesto, Footer });