// Shared components: Logo, Nav, Footer, AutomationFlow, Reveal helper, ClientLogos, Hero variants

const { useState, useEffect, useRef, useMemo } = React;

// === Reveal-on-scroll wrapper ===
function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setSeen(true);
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As
      ref={ref}
      data-delay={delay}
      className={`reveal ${seen ? "in" : ""} ${className}`}
      {...rest}
    >
      {children}
    </As>
  );
}

// === Logo (real WeAutomate "WA" mark — two-color brand) ===
function Logo({ height = 24, mono = false }) {
  const w = (height * 355) / 197;
  // On dark backgrounds the W path needs to be light, A stays green.
  // We read CSS vars by passing className-driven fill via CSS variables.
  return (
    <svg
      width={w}
      height={height}
      viewBox="0 0 355 197"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="WeAutomate"
      style={{ display: "block" }}
    >
      <g transform="matrix(1,0,0,1,-4015,-990)">
        <g transform="matrix(0,-1.059288,1,0,3607.874016,2627.367925)">
          <g transform="matrix(0,0.198827,-0.132716,0,1902.50465,-150.30773)">
            <g transform="matrix(8.45288,0,0,8.45288,-25751.06206,-13278.605014)">
              {/* W path — dark/ink (auto-flips on dark backgrounds) */}
              <g transform="matrix(-0.538009,0,0,-0.538009,5790.411014,2979.501746)">
                <path d="M4294.229,2025.727L4246.009,2025.727L4354.263,1719.521L4375.391,1719.521L4483.646,2025.727L4435.425,2025.727L4400.126,1925.881L4364.827,2025.727L4329.528,1925.881L4294.229,2025.727ZM4364.827,1826.035L4335.387,1909.308L4394.267,1909.308L4364.827,1826.035Z" fill={mono ? "currentColor" : "var(--logo-ink, #031712)"} />
              </g>
              {/* A path — brand green */}
              <g transform="matrix(-0.538009,0,0,-0.538009,5790.411014,2979.501746)">
                <path d="M4281.308,1719.521L4329.528,1719.521L4221.274,2025.727L4200.145,2025.727L4091.891,1719.521L4140.111,1719.521L4175.41,1819.367L4210.709,1719.521L4246.009,1819.367L4281.308,1719.521ZM4210.709,1919.214L4240.15,1835.94L4181.269,1835.94L4210.709,1919.214Z" fill={mono ? "currentColor" : "var(--logo-green, #01A551)"} />
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  );
}

function LogoWordmark({ height = 28 }) {
  return (
    <div className="nav-logo" style={{ color: "var(--ink)" }}>
      <Logo height={height} />
      <span>WeAutomate</span>
    </div>
  );
}

// === Language switcher ===
function LangSwitch({ lang, setLang }) {
  const langs = ["cs", "en", "de"];
  return (
    <div className="lang-switch" role="tablist" aria-label="Language">
      {langs.map((l) => (
        <button
          key={l}
          className={lang === l ? "on" : ""}
          onClick={() => setLang(l)}
          aria-pressed={lang === l}
        >
          {l.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

// === Nav ===
function Nav({ route, setRoute, lang, setLang, mode, setMode }) {
  const [open, setOpen] = useState(false);
  // Track the actually-rendered mode (after "auto" resolution) so the
  // icon shows the *opposite* of what's on screen — universal pattern.
  const [renderedMode, setRenderedMode] = useState(
    () => document.documentElement.getAttribute("data-mode") || "light"
  );
  useEffect(() => {
    const obs = new MutationObserver(() => {
      setRenderedMode(document.documentElement.getAttribute("data-mode") || "light");
    });
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-mode"] });
    return () => obs.disconnect();
  }, []);

  const isDark = renderedMode === "dark";
  const toggleLabels = {
    cs: { toLight: "Přepnout na světlý režim", toDark: "Přepnout na tmavý režim" },
    en: { toLight: "Switch to light mode", toDark: "Switch to dark mode" },
    de: { toLight: "Hellmodus aktivieren", toDark: "Dunkelmodus aktivieren" },
  };
  const labels = toggleLabels[lang] || toggleLabels.en;

  const t = (p) => window.t(lang, p);
  const links = [
    { id: "home", label: t("nav.home") },
    { id: "automation", label: t("nav.automation") },
    { id: "services", label: t("nav.services") },
    { id: "blog", label: t("nav.blog") },
    { id: "contact", label: t("nav.contact") },
  ];
  return (
    <div className="nav" role="banner">
      <div className="nav-inner">
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            setRoute({ name: "home" });
          }}
          aria-label="WeAutomate home"
        >
          <LogoWordmark />
        </a>
        <div className="nav-links" role="navigation">
          {links.map((l) => (
            <a
              key={l.id}
              href="#"
              className={`nav-link ${
                route.name === l.id || (l.id === "blog" && route.name === "post") ? "active" : ""
              }`}
              onClick={(e) => {
                e.preventDefault();
                setRoute({ name: l.id });
              }}
            >
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav-right">
          {/* Dark / light manual toggle — shows the icon for the OTHER mode */}
          <button
            type="button"
            className="mode-toggle"
            onClick={() => setMode && setMode(isDark ? "light" : "dark")}
            aria-label={isDark ? labels.toLight : labels.toDark}
            title={isDark ? labels.toLight : labels.toDark}
          >
            {isDark ? (
              // Sun (currently dark → click goes to light)
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="4" />
                <line x1="12" y1="2" x2="12" y2="4" />
                <line x1="12" y1="20" x2="12" y2="22" />
                <line x1="2" y1="12" x2="4" y2="12" />
                <line x1="20" y1="12" x2="22" y2="12" />
                <line x1="4.93" y1="4.93" x2="6.34" y2="6.34" />
                <line x1="17.66" y1="17.66" x2="19.07" y2="19.07" />
                <line x1="4.93" y1="19.07" x2="6.34" y2="17.66" />
                <line x1="17.66" y1="6.34" x2="19.07" y2="4.93" />
              </svg>
            ) : (
              // Moon (currently light → click goes to dark)
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
              </svg>
            )}
          </button>

          <LangSwitch lang={lang} setLang={setLang} />
          <button
            className="nav-mobile-toggle"
            onClick={() => setOpen(!open)}
            aria-expanded={open}
            aria-label="Menu"
          >
            {open ? "✕" : "≡"}
          </button>
        </div>
      </div>
      <div className={`nav-mobile-menu ${open ? "open" : ""}`}>
        {links.map((l) => (
          <a
            key={l.id}
            href="#"
            className={`nav-link ${route.name === l.id ? "active" : ""}`}
            onClick={(e) => {
              e.preventDefault();
              setRoute({ name: l.id });
              setOpen(false);
            }}
          >
            {l.label}
          </a>
        ))}
      </div>
    </div>
  );
}

// === Footer ===
function Footer({ lang, setRoute }) {
  const t = (p) => window.t(lang, p);
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div>
            <LogoWordmark />
            <p className="body" style={{ maxWidth: 360, marginTop: 16, fontSize: 14 }}>
              {t("footer.about")}
            </p>
          </div>
          <div>
            <h5>{t("footer.col1")}</h5>
            {t("footer.col1items").map((x, i) => (
              <a
                key={i}
                href="#"
                className="footer-link"
                onClick={(e) => {
                  e.preventDefault();
                  setRoute({ name: "automation", anchor: ["audit", "deployment", "operations"][i] });
                }}
              >
                {x}
              </a>
            ))}
          </div>
          <div>
            <h5>{t("footer.col2")}</h5>
            {t("footer.col2items").map((x, i) => (
              <a
                key={i}
                href="#"
                className="footer-link"
                onClick={(e) => {
                  e.preventDefault();
                  setRoute({ name: "services", anchor: ["it-architecture", "consulting", "technical"][i] });
                }}
              >
                {x}
              </a>
            ))}
          </div>
          <div>
            <h5>{t("footer.col3")}</h5>
            <a href="#" className="footer-link" onClick={(e) => { e.preventDefault(); setRoute({ name: "blog" }); }}>{t("footer.col3items.0")}</a>
            <a href="#" className="footer-link" onClick={(e) => { e.preventDefault(); setRoute({ name: "contact" }); }}>{t("footer.col3items.1")}</a>
            <a href="#" className="footer-link" onClick={(e) => { e.preventDefault(); setRoute({ name: "gdpr" }); }}>{t("footer.col3items.2")}</a>
            <a href="#" className="footer-link" onClick={(e) => { e.preventDefault(); window.__openCookiePrefs && window.__openCookiePrefs(); }}>
              {lang === "cs" ? "Nastavení cookies" : lang === "de" ? "Cookie-Einstellungen" : "Cookie settings"}
            </a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 WeAutomate. {t("footer.rights")}</div>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <span className="tag">
              <span className="dot" style={{ background: "var(--good)" }} />
              <span style={{ color: "var(--ink-3)" }}>Status: operational</span>
            </span>
            <a href="https://www.linkedin.com/company/weautomate-1" target="_blank" rel="noreferrer" className="footer-link" style={{ padding: 0 }}>LinkedIn</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// === Client / reference logos — placeholder WeAutomate marks until real logos ship ===
function ClientLogos({ lang }) {
  const t = (p) => window.t(lang, p);
  // 12 placeholder slots — mirrors the live weautomate.cz pattern of a repeated
  // brand mark in a grayscale strip until NDA-cleared client logos arrive.
  const count = 12;
  return (
    <section className="logo-strip">
      <div className="container-wide">
        <div style={{ display: "flex", alignItems: "center", gap: 24, marginBottom: 20 }}>
          <span className="eyebrow">{t("ribbon.reference")}</span>
          <hr className="hr" style={{ flex: 1 }} />
          <span className="tiny">Banking · Insurance · Telco · Industry</span>
        </div>
        <div className="logo-strip-inner">
          <div className="logo-track">
            {Array.from({ length: count * 2 }).map((_, i) => (
              <div className="client-logo" key={i} aria-hidden={i >= count}>
                <Logo height={24} mono />
                <span style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: 600,
                  letterSpacing: "-0.02em",
                  fontSize: 18,
                  marginLeft: 10,
                }}>
                  WeAutomate
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// === Animated automation flow diagram (hero illustration) ===
function AutomationFlow() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % 6), 1100);
    return () => clearInterval(id);
  }, []);

  // 6-step cycle: trigger -> playbook -> network/firewall/server (branched) -> verify -> done
  const nodes = [
    { id: "trigger", x: 60, y: 240, w: 110, h: 48, label: "trigger", sub: "event" },
    { id: "engine", x: 200, y: 240, w: 130, h: 48, label: "Ansible AAP", sub: "controller" },
    { id: "n1", x: 380, y: 130, w: 110, h: 44, label: "network", sub: "F5 / fw" },
    { id: "n2", x: 380, y: 240, w: 110, h: 44, label: "servers", sub: "RHEL" },
    { id: "n3", x: 380, y: 350, w: 110, h: 44, label: "cloud", sub: "OpenShift" },
    { id: "verify", x: 530, y: 240, w: 110, h: 48, label: "verify", sub: "compliance" },
  ];
  const edges = [
    { from: "trigger", to: "engine", step: 0 },
    { from: "engine", to: "n1", step: 1 },
    { from: "engine", to: "n2", step: 1 },
    { from: "engine", to: "n3", step: 1 },
    { from: "n1", to: "verify", step: 2 },
    { from: "n2", to: "verify", step: 2 },
    { from: "n3", to: "verify", step: 2 },
  ];

  const getNode = (id) => nodes.find((n) => n.id === id);
  const activeNodes = useMemo(() => {
    const m = {};
    if (tick === 0) m.trigger = true;
    if (tick === 1) m.engine = true;
    if (tick === 2) { m.n1 = m.n2 = m.n3 = true; }
    if (tick === 3) m.verify = true;
    if (tick === 4) { m.verify = true; m.trigger = true; }
    return m;
  }, [tick]);

  const activeEdges = useMemo(() => {
    if (tick === 1) return new Set(["trigger->engine"]);
    if (tick === 2) return new Set(["engine->n1", "engine->n2", "engine->n3"]);
    if (tick === 3) return new Set(["n1->verify", "n2->verify", "n3->verify"]);
    return new Set();
  }, [tick]);

  return (
    <div className="flow-wrap" aria-label="Automation flow">
      <svg className="flow-svg" viewBox="0 0 700 500" preserveAspectRatio="xMidYMid meet">
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" className="grid-bg" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="700" height="500" fill="url(#grid)" opacity="0.5" />

        {/* corner labels */}
        <text x="20" y="30" fontSize="9" fill="var(--ink-4)" fontFamily="var(--font-mono)" letterSpacing="0.1em">
          AUTOMATION CYCLE · t = {tick}
        </text>
        <text x="20" y="480" fontSize="9" fill="var(--ink-4)" fontFamily="var(--font-mono)" letterSpacing="0.1em">
          event-driven · idempotent · auditable
        </text>

        {/* Edges */}
        {edges.map((e) => {
          const a = getNode(e.from);
          const b = getNode(e.to);
          const x1 = a.x + a.w;
          const y1 = a.y + a.h / 2;
          const x2 = b.x;
          const y2 = b.y + b.h / 2;
          const mx = (x1 + x2) / 2;
          const d = `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`;
          const isActive = activeEdges.has(`${e.from}->${e.to}`);
          return (
            <g key={`${e.from}-${e.to}`}>
              <path d={d} className={`edge ${isActive ? "active" : ""}`} />
              {isActive && (
                <circle r="4" className="flow-pulse">
                  <animateMotion dur="1s" repeatCount="indefinite" path={d} />
                </circle>
              )}
            </g>
          );
        })}

        {/* Nodes */}
        {nodes.map((n) => {
          const active = activeNodes[n.id];
          return (
            <g key={n.id} transform={`translate(${n.x}, ${n.y})`}>
              <rect
                width={n.w}
                height={n.h}
                rx="6"
                className={`node ${active ? "active" : ""}`}
              />
              <text x={n.w / 2} y={n.h / 2 - 2} textAnchor="middle" className="label">
                {n.label}
              </text>
              <text x={n.w / 2} y={n.h / 2 + 14} textAnchor="middle" fontSize="9" fill="var(--ink-3)">
                {n.sub}
              </text>
              {active && (
                <circle
                  cx={n.w / 2}
                  cy={n.h / 2}
                  r={n.w / 2}
                  fill="none"
                  stroke="var(--brand)"
                  strokeWidth="1"
                  opacity="0"
                  className="pulse-ring"
                />
              )}
            </g>
          );
        })}

        {/* Counter / status badge */}
        <g transform="translate(540, 30)">
          <rect width="140" height="26" rx="4" fill="var(--bg-elev)" stroke="var(--line)" />
          <circle cx="14" cy="13" r="3" fill="var(--good)" />
          <text x="26" y="17" fontSize="10" fontFamily="var(--font-mono)" fill="var(--ink-2)">
            playbooks · ok · 142/142
          </text>
        </g>
      </svg>
    </div>
  );
}

// === Hero (3 variants via prop) ===
function Hero({ variant, lang, setRoute }) {
  const t = (p) => window.t(lang, p);
  const title = t("hero.title");

  if (variant === "code") {
    return (
      <section className="hero">
        <div className="container-wide">
          <div className="hero-grid">
            <div>
              <Reveal as="span" className="tag"><span className="dot" />{t("hero.eyebrow")}</Reveal>
              <Reveal as="h1" className="h1" delay={1}>
                {title[0]} <em style={{ fontStyle: "normal", color: "var(--accent)" }}>{title[1]}</em> {title[2]}
              </Reveal>
              <Reveal as="p" className="lede" delay={2}>{t("hero.lede")}</Reveal>
              <Reveal as="p" className="body" delay={3} style={{ maxWidth: "44ch", color: "var(--ink-3)" }}>
                {t("hero.sub")}
              </Reveal>
              <Reveal className="hero-ctas" delay={4}>
                <button className="btn btn-brand" onClick={() => setRoute({ name: "contact" })}>
                  {t("hero.ctaPrimary")} <span className="arrow">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => setRoute({ name: "automation" })}>
                  {t("hero.ctaSecondary")}
                </button>
              </Reveal>
            </div>
            <Reveal delay={2}>
              <CodeBlock />
            </Reveal>
          </div>
        </div>
      </section>
    );
  }

  if (variant === "editorial") {
    return (
      <section className="hero">
        <div className="ornament-grid" />
        <div className="container-wide" style={{ position: "relative" }}>
          <Reveal as="span" className="tag"><span className="dot" />{t("hero.eyebrow")}</Reveal>
          <Reveal as="h1" className="h1" delay={1} style={{ maxWidth: "16ch", marginTop: 32, fontSize: "clamp(56px, 8vw, 116px)", letterSpacing: "-0.04em" }}>
            {title[0]} <em style={{ color: "var(--accent)", fontStyle: "italic" }}>{title[1]}</em> {title[2]}
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginTop: 56 }}>
            <Reveal as="p" className="lede" delay={2}>{t("hero.lede")}</Reveal>
            <Reveal delay={3}>
              <p className="body" style={{ color: "var(--ink-3)", maxWidth: "42ch" }}>{t("hero.sub")}</p>
              <div className="hero-ctas">
                <button className="btn btn-brand" onClick={() => setRoute({ name: "contact" })}>
                  {t("hero.ctaPrimary")} <span className="arrow">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => setRoute({ name: "automation" })}>
                  {t("hero.ctaSecondary")}
                </button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    );
  }

  // default: 'flow' — diagram + text
  return (
    <section className="hero">
      <div className="container-wide">
        <div className="hero-grid">
          <div>
            <Reveal as="span" className="tag"><span className="dot" />{t("hero.eyebrow")}</Reveal>
            <Reveal as="h1" className="h1" delay={1}>
              {title[0]} <em style={{ fontStyle: "normal", color: "var(--accent)" }}>{title[1]}</em> {title[2]}
            </Reveal>
            <Reveal as="p" className="lede" delay={2}>{t("hero.lede")}</Reveal>
            <Reveal as="p" className="body" delay={3} style={{ maxWidth: "44ch", color: "var(--ink-3)" }}>
              {t("hero.sub")}
            </Reveal>
            <Reveal className="hero-ctas" delay={4}>
              <button className="btn btn-brand" onClick={() => setRoute({ name: "contact" })}>
                {t("hero.ctaPrimary")} <span className="arrow">→</span>
              </button>
              <button className="btn btn-ghost" onClick={() => setRoute({ name: "automation" })}>
                {t("hero.ctaSecondary")}
              </button>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <div style={{
              background: "var(--bg-elev)",
              border: "1px solid var(--line)",
              borderRadius: "var(--radius-lg)",
              padding: 24,
              boxShadow: "var(--shadow-md)",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, alignItems: "center" }}>
                <div style={{ display: "flex", gap: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 5, background: "var(--line)" }} />
                  <span style={{ width: 10, height: 10, borderRadius: 5, background: "var(--line)" }} />
                  <span style={{ width: 10, height: 10, borderRadius: 5, background: "var(--line)" }} />
                </div>
                <span className="tiny" style={{ fontFamily: "var(--font-mono)" }}>aap.weautomate.cz</span>
              </div>
              <AutomationFlow />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// === Code block (for 'code' hero variant) ===
function CodeBlock() {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % 5), 1400);
    return () => clearInterval(id);
  }, []);
  const lines = [
    { c: "$ ansible-playbook patch-fleet.yml --check", t: "command" },
    { c: "PLAY [Patch RHEL fleet] *********************", t: "play" },
    { c: "ok: [web-01]  changed=12  failed=0", t: "ok" },
    { c: "ok: [web-02]  changed=12  failed=0", t: "ok" },
    { c: "ok: [db-01]   changed=8   failed=0", t: "ok" },
    { c: "ok: [lb-01]   changed=4   failed=0", t: "ok" },
    { c: "PLAY RECAP **********************************", t: "play" },
    { c: "compliance: pass · audit-trail: written", t: "good" },
  ];

  return (
    <div style={{
      background: "var(--bg-elev)",
      border: "1px solid var(--line)",
      borderRadius: "var(--radius-lg)",
      overflow: "hidden",
      boxShadow: "var(--shadow-md)",
      fontFamily: "var(--font-mono)",
      fontSize: 13,
    }}>
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "10px 14px",
        borderBottom: "1px solid var(--line-2)",
        background: "var(--bg-sunken)",
      }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: 5, background: "#e84e4e" }} />
          <span style={{ width: 10, height: 10, borderRadius: 5, background: "#f5b03c" }} />
          <span style={{ width: 10, height: 10, borderRadius: 5, background: "#46c08b" }} />
        </div>
        <span style={{ fontSize: 11, color: "var(--ink-3)" }}>~/playbooks/patch-fleet.yml</span>
        <span style={{ fontSize: 11, color: "var(--good)" }}>● live</span>
      </div>
      <div style={{ padding: 18, minHeight: 280 }}>
        {lines.map((l, i) => {
          const visible = i <= step * 2 + 1;
          let color = "var(--ink-2)";
          if (l.t === "play") color = "var(--accent)";
          if (l.t === "ok") color = "var(--good)";
          if (l.t === "good") color = "var(--brand)";
          if (l.t === "command") color = "var(--ink)";
          return (
            <div
              key={i}
              style={{
                color,
                opacity: visible ? 1 : 0.15,
                transition: "opacity .35s ease",
                padding: "3px 0",
                whiteSpace: "pre",
                overflow: "hidden",
              }}
            >
              {l.c}
            </div>
          );
        })}
        <div style={{ height: 14, display: "flex", alignItems: "center" }}>
          <span style={{ width: 8, height: 14, background: "var(--ink-2)", animation: "blink 1s steps(2) infinite", display: "inline-block" }} />
        </div>
      </div>
      <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
    </div>
  );
}

// === Manifesto / pull quote block ===
function Manifesto({ lang }) {
  const t = (p) => window.t(lang, p);
  return (
    <section className="section" style={{ paddingTop: 48, paddingBottom: 48 }}>
      <div className="container-wide">
        <Reveal>
          <p
            className="h2"
            style={{
              maxWidth: "22ch",
              fontWeight: 400,
              fontSize: "clamp(28px, 3vw, 44px)",
              lineHeight: 1.18,
              letterSpacing: "-0.02em",
            }}
          >
            {t("manifest.big").split("—")[0]}
            <em style={{ color: "var(--accent)", fontStyle: "normal" }}>—{t("manifest.big").split("—")[1]}</em>
          </p>
          <p className="tiny" style={{ marginTop: 16, fontFamily: "var(--font-mono)", letterSpacing: "0.05em", textTransform: "uppercase" }}>
            {t("manifest.small")}
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// === CTA banner ===
function CTABanner({ lang, setRoute }) {
  const t = (p) => window.t(lang, p);
  return (
    <Reveal>
      <div className="container-wide">
        <div className="cta-banner">
          <div>
            <h2 className="h2" style={{ maxWidth: "20ch" }}>{t("ctaBig.title")}</h2>
            <p className="body" style={{ marginTop: 16, color: "color-mix(in oklab, var(--brand-ink) 82%, transparent)", maxWidth: "48ch" }}>
              {t("ctaBig.sub")}
            </p>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <button className="btn" onClick={() => setRoute({ name: "contact" })}>
              {t("ctaBig.button")} <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

window.Reveal = Reveal;
window.Logo = Logo;
window.LogoWordmark = LogoWordmark;
window.Nav = Nav;
window.Footer = Footer;
window.ClientLogos = ClientLogos;
window.AutomationFlow = AutomationFlow;
window.Hero = Hero;
window.CodeBlock = CodeBlock;
window.Manifesto = Manifesto;
window.CTABanner = CTABanner;

// ============================================================
// Partners — Red Hat, F5, Veeam, NetBox Labs
// ============================================================

// Type-only wordmarks recreated in CSS — replace with real SVG when client provides licensed assets.
function PartnerMark({ name }) {
  // Use real official logos. For F5 we don't have an upload yet — keep a clean
  // bold "F5" wordmark in the brand red so the row stays balanced.
  if (name === "Red Hat") {
    return <img src="assets/partner-redhat.svg" alt="Red Hat" style={{ height: 36, width: "auto", display: "block" }} />;
  }
  if (name === "Veeam") {
    return <img src="assets/partner-veeam.png" alt="Veeam" style={{ height: 38, width: "auto", display: "block" }} />;
  }
  if (name === "NetBox Labs") {
    return <img src="assets/partner-netbox.png" alt="NetBox Labs" style={{ height: 32, width: "auto", display: "block" }} />;
  }
  if (name === "F5") {
    return (
      <div style={{
        fontFamily: '"Montserrat", system-ui, sans-serif',
        fontWeight: 900,
        letterSpacing: "-0.04em",
        color: "#E4002B",
        fontSize: 36,
        lineHeight: 1,
      }}>F5</div>
    );
  }
  return null;
}

function Partners({ lang }) {
  const t = (p) => window.t(lang, p);
  const items = t("partners.items");
  return (
    <section className="section" style={{ position: "relative" }}>
      <div className="container-wide">
        <div className="section-head">
          <div className="sticky-eyebrow">
            <span className="eyebrow">{t("partners.eyebrow")}</span>
          </div>
          <div className="right">
            <Reveal as="h2" className="h2">{t("partners.title")}</Reveal>
            <Reveal as="p" className="lede" delay={1}>{t("partners.lede")}</Reveal>
          </div>
        </div>

        <div className="partners-grid">
          {items.map((p, i) => (
            <Reveal as="div" key={p.name} delay={i + 1} className="partner-card">
              <div className="partner-logo-slot">
                <PartnerMark name={p.name} />
              </div>
              <div className="partner-meta">
                <div className="partner-role">{p.role}</div>
                <div className="partner-what">{p.what}</div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal style={{
          marginTop: 24,
          padding: "16px 20px",
          display: "flex",
          gap: 14,
          alignItems: "center",
          flexWrap: "wrap",
          background: "var(--mint)",
          borderRadius: "var(--radius-lg)",
          color: "var(--ink-2)",
          fontSize: 13,
        }}>
          <span className="tag" style={{ background: "var(--brand)", color: "var(--brand-ink)", borderColor: "var(--brand)" }}>
            <span className="dot" style={{ background: "var(--brand-ink)" }} />
            Red Hat Advanced Partner · 2024+
          </span>
          <span style={{ color: "var(--ink-3)" }}>
            {lang === "cs" && "Nestavíme náhodně — naše stack volby vycházejí z reálných deploymentů u bank, telco a průmyslu."}
            {lang === "en" && "We don't pick stack at random — our vendor choices come from real-world deployments in banking, telco, and industry."}
            {lang === "de" && "Wir wählen den Stack nicht zufällig — unsere Vendor-Entscheidungen basieren auf realen Deployments in Banking, Telco und Industrie."}
          </span>
        </Reveal>
      </div>
    </section>
  );
}

// (Team photos: drop JPGs in assets/team/{pavel,ondrej,oleksandra,zita}.jpg.
// The team renderer reads the `photo` field; until you wire it up by uploading
// files, members render with initials.)

window.PartnerMark = PartnerMark;
window.Partners = Partners;

// ============================================================
// CallBooker — Calendly-style slot picker
// ============================================================
function CallBooker({ lang }) {
  const t = (p) => window.t(lang, p);
  const [picked, setPicked] = useState(null);
  const [email, setEmail] = useState("");
  const [booked, setBooked] = useState(false);
  const [emailError, setEmailError] = useState("");

  // Generate next 5 working days with 2 slots each
  const days = useMemo(() => {
    const out = [];
    const now = new Date();
    let i = 0;
    while (out.length < 5) {
      const d = new Date(now);
      d.setDate(d.getDate() + i);
      i++;
      const dow = d.getDay();
      if (dow === 0 || dow === 6) continue; // skip weekends
      out.push(d);
    }
    return out;
  }, []);

  const dayLabel = (d) => {
    const days = { cs: ["Ne","Po","Út","St","Čt","Pá","So"], en: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"], de: ["So","Mo","Di","Mi","Do","Fr","Sa"] };
    const months = { cs: ["1.","2.","3.","4.","5.","6.","7.","8.","9.","10.","11.","12."], en: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], de: ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"] };
    return `${(days[lang] || days.en)[d.getDay()]} ${d.getDate()}. ${(months[lang] || months.en)[d.getMonth()]}`;
  };

  const slots = [];
  days.forEach((d, idx) => {
    const morning = new Date(d); morning.setHours(9, 0, 0, 0);
    const afternoon = new Date(d); afternoon.setHours(14, 30, 0, 0);
    slots.push({ id: `${idx}-m`, date: morning, day: d, time: "09:00" });
    slots.push({ id: `${idx}-a`, date: afternoon, day: d, time: "14:30" });
  });
  // Mark some slots as unavailable (deterministic)
  const occupied = new Set(["0-m", "2-a", "3-m"]);
  const free = slots.filter(s => !occupied.has(s.id));

  const submit = (e) => {
    e.preventDefault();
    if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
      setEmailError(lang === "cs" ? "neplatný e-mail" : lang === "de" ? "ungültige E-Mail" : "invalid email");
      return;
    }
    setEmailError("");
    setBooked(true);
  };

  if (booked) {
    return (
      <div className="callbooker booked">
        <div className="callbooker-success">
          <div className="callbooker-success-icon">✓</div>
          <h3 className="h3" style={{ marginBottom: 12 }}>{t("callBooker.bookedSuccess")}</h3>
          <p className="body" style={{ color: "var(--ink-3)", maxWidth: "44ch" }}>
            {picked && (
              <>
                <strong style={{ color: "var(--ink)" }}>{dayLabel(picked.day)} · {picked.time}</strong>
                <br />
              </>
            )}
            {email}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="callbooker">
      <div className="callbooker-head">
        <span className="tag"><span className="dot" style={{ background: "var(--good)" }} />{free.length} {t("callBooker.slotsLabel")}</span>
        <h3 className="h3" style={{ marginTop: 16 }}>{t("callBooker.title")}</h3>
        <p className="body" style={{ marginTop: 8, color: "var(--ink-3)", maxWidth: "52ch" }}>{t("callBooker.sub")}</p>
      </div>

      <div className="callbooker-body">
        <div className="callbooker-slots-col">
          <span className="eyebrow">{t("callBooker.slotsLabel")}</span>
          <div className="callbooker-slots">
            {free.slice(0, 6).map((s) => (
              <button
                key={s.id}
                type="button"
                className={`slot ${picked?.id === s.id ? "on" : ""}`}
                onClick={() => setPicked(s)}
                aria-pressed={picked?.id === s.id}
              >
                <span className="slot-day">{dayLabel(s.day)}</span>
                <span className="slot-time">{s.time}</span>
              </button>
            ))}
          </div>
          <div className="tiny" style={{ marginTop: 10, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>
            {free.length} {t("callBooker.slotsLeft")} · {t("callBooker.timezone")}
          </div>

          <form onSubmit={submit} className="callbooker-form" noValidate>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder={lang === "cs" ? "vase@firma.cz" : "you@company.com"}
              className="form-input"
              required
              aria-label="email"
            />
            <button type="submit" className="btn btn-brand" disabled={!picked}>
              {t("callBooker.bookCta")} <span className="arrow">→</span>
            </button>
          </form>
          {emailError && <div className="form-error" style={{ marginTop: 8 }}>{emailError}</div>}

          <div className="tiny" style={{ marginTop: 12, color: "var(--ink-3)" }}>
            {t("callBooker.asyncNote")}
          </div>
        </div>

        <div className="callbooker-side">
          <div className="callbooker-meet">
            <span className="eyebrow">{t("callBooker.meetWith")}</span>
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 12 }}>
              {t("team.members").slice(0, 2).map((m, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 18,
                    background: "var(--mint)",
                    border: "1px solid var(--line)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontWeight: 600, fontSize: 13, color: "var(--brand)",
                  }}>
                    {m.name.split(" ").map(s => s[0]).join("")}
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.2 }}>{m.name}</div>
                    <div className="tiny" style={{ color: "var(--ink-3)" }}>{m.role}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="callbooker-getout">
            <span className="eyebrow">{t("callBooker.getOut")}</span>
            <ul>
              {t("callBooker.getOutItems").map((x, i) => (
                <li key={i}>
                  <span style={{ color: "var(--good)" }}>✓</span> {x}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// TrustWall — partner level + compliance + contracts + security practice
// ============================================================
function TrustWall({ lang }) {
  const t = (p) => window.t(lang, p);
  const cards = t("trust.cards");
  return (
    <section className="section" style={{ background: "var(--mint)" }}>
      <div className="container-wide">
        <div className="section-head">
          <div className="sticky-eyebrow">
            <span className="eyebrow">{t("trust.eyebrow")}</span>
          </div>
          <div className="right">
            <Reveal as="h2" className="h2">{t("trust.title")}</Reveal>
            <Reveal as="p" className="lede" delay={1}>{t("trust.lede")}</Reveal>
          </div>
        </div>

        <div className="trust-grid">
          {cards.map((c, i) => (
            <Reveal as="div" key={i} className="trust-card" delay={i + 1}>
              <div className="trust-card-num">T.0{i + 1}</div>
              <h3 className="h4">{c.h}</h3>
              <ul>
                {c.items.map((it, j) => (
                  <li key={j}>
                    <span style={{ color: "var(--brand)", fontFamily: "var(--font-mono)" }}>✓</span> {it}
                  </li>
                ))}
              </ul>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Pricing — three engagement model tiers
// ============================================================
function Pricing({ lang, setRoute }) {
  const t = (p) => window.t(lang, p);
  const tiers = t("pricing.tiers");
  return (
    <section className="section">
      <div className="container-wide">
        <div className="section-head">
          <div className="sticky-eyebrow">
            <span className="eyebrow">{t("pricing.eyebrow")}</span>
          </div>
          <div className="right">
            <Reveal as="h2" className="h2">{t("pricing.title")}</Reveal>
            <Reveal as="p" className="lede" delay={1}>{t("pricing.lede")}</Reveal>
          </div>
        </div>

        <div className="pricing-grid">
          {tiers.map((tier, i) => (
            <Reveal as="div" key={i} delay={i + 1} className={`pricing-tier ${tier.popular ? "popular" : ""}`}>
              {tier.popular && (
                <div className="pricing-badge">
                  {lang === "cs" ? "Nejčastější" : lang === "de" ? "Am häufigsten" : "Most common"}
                </div>
              )}
              <div className="pricing-name">{tier.name}</div>
              <div className="pricing-price">{tier.price}</div>
              <div className="pricing-duration">{tier.duration}</div>
              <p className="pricing-desc">{tier.desc}</p>

              <div className="pricing-factors">
                <span className="eyebrow" style={{ color: tier.popular ? "color-mix(in oklab, var(--brand-ink) 70%, transparent)" : "var(--ink-3)" }}>
                  {lang === "cs" ? "Cenu ovlivňuje" : lang === "de" ? "Preis hängt ab von" : "Price depends on"}
                </span>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 10 }}>
                  {tier.factors.map((f, j) => (
                    <span key={j} className="tag" style={{
                      background: tier.popular ? "color-mix(in oklab, var(--brand-ink) 15%, transparent)" : "var(--bg-elev)",
                      color: tier.popular ? "var(--brand-ink)" : "var(--ink-3)",
                      borderColor: tier.popular ? "transparent" : "var(--line)",
                    }}>{f}</span>
                  ))}
                </div>
              </div>

              <button
                className={tier.popular ? "btn" : "btn btn-ghost"}
                style={tier.popular ? { background: "var(--brand-ink)", color: "var(--brand)", borderColor: "var(--brand-ink)" } : {}}
                onClick={() => setRoute({ name: "contact" })}
              >
                {tier.cta} <span className="arrow">→</span>
              </button>
            </Reveal>
          ))}
        </div>

        <Reveal className="pricing-promise">
          <div className="pricing-promise-icon">⌖</div>
          <div>
            <strong>{t("pricing.promiseTitle")}.</strong> {t("pricing.promise")}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.CallBooker = CallBooker;
window.TrustWall = TrustWall;
window.Pricing = Pricing;


// === Philosophy section ("Naše filozofie / Jak pracujeme") ===
function PhilosophySection({ lang }) {
  const t = (p) => window.t(lang, p);
  return (
    <section className="section">
      <div className="container-wide">
        <div className="section-head">
          <div className="sticky-eyebrow">
            <span className="eyebrow">{t("philosophy.eyebrow")}</span>
          </div>
          <div className="right">
            <Reveal as="h2" className="h2">{t("philosophy.title")}</Reveal>
            <Reveal as="p" className="lede" delay={1}>{t("philosophy.lede")}</Reveal>
          </div>
        </div>
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {t("philosophy.items").map((it, i) => (
            <Reveal as="div" key={i} delay={i + 1} style={{
              display: "grid",
              gridTemplateColumns: "60px minmax(0, 360px) minmax(0, 1fr)",
              gap: 32,
              padding: "24px 0",
              borderBottom: "1px solid var(--line)",
              alignItems: "baseline",
            }}>
              <span className="num" style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)" }}>P.0{i + 1}</span>
              <h3 className="h3">{it.h}</h3>
              <p className="body" style={{ maxWidth: "60ch" }}>{it.p}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Second manifest quote ("Our product is freedom") ===
function Manifest2({ lang }) {
  const t = (p) => window.t(lang, p);
  const s = t("manifest2.big");
  const dashIdx = s.search(/[—–]/);
  const first = dashIdx >= 0 ? s.substring(0, dashIdx) : s;
  const rest = dashIdx >= 0 ? s.substring(dashIdx) : "";
  return (
    <section className="section" style={{ paddingTop: 48, paddingBottom: 48, background: "var(--bg-sunken)" }}>
      <div className="container-wide">
        <Reveal>
          <p
            className="h2"
            style={{
              maxWidth: "32ch",
              fontWeight: 400,
              fontSize: "clamp(24px, 2.6vw, 38px)",
              lineHeight: 1.2,
              letterSpacing: "-0.02em",
              color: "var(--ink)",
            }}
          >
            {first}
            {rest && <span style={{ color: "var(--brand)" }}>{rest}</span>}
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.PhilosophySection = PhilosophySection;
window.Manifest2 = Manifest2;


// ============================================================
// Cookie Consent Banner + Preferences Modal
// Persisted in localStorage. Categories: necessary / analytics / marketing.
// ============================================================
function CookieConsent({ lang }) {
  const t = (p) => window.t(lang, p);
  const STORAGE = "wa.cookie.consent.v1";

  const [state, setState] = useState(() => {
    try {
      const raw = localStorage.getItem(STORAGE);
      if (raw) return JSON.parse(raw);
    } catch (e) {}
    return null;
  });
  const [openBanner, setOpenBanner] = useState(() => !localStorage.getItem(STORAGE));
  const [openPrefs, setOpenPrefs] = useState(false);
  const [draft, setDraft] = useState({ analytics: false, marketing: false });

  // Expose a global hook so the footer "Cookie settings" link can re-open the modal
  useEffect(() => {
    window.__openCookiePrefs = () => {
      setDraft({
        analytics: state?.analytics || false,
        marketing: state?.marketing || false,
      });
      setOpenPrefs(true);
    };
  }, [state]);

  const persist = (next) => {
    const payload = { ...next, ts: Date.now() };
    try { localStorage.setItem(STORAGE, JSON.stringify(payload)); } catch (e) {}
    setState(payload);
    setOpenBanner(false);
    setOpenPrefs(false);
    // Trigger custom event so analytics loaders can hook in
    window.dispatchEvent(new CustomEvent("wa:consent", { detail: payload }));
  };

  const acceptAll = () => persist({ necessary: true, analytics: true, marketing: true });
  const rejectAll = () => persist({ necessary: true, analytics: false, marketing: false });
  const savePrefs = () => persist({ necessary: true, analytics: draft.analytics, marketing: draft.marketing });

  const categories = t("cookies.categories");

  return (
    <>
      {openBanner && (
        <div className="cookie-banner" role="dialog" aria-label={t("cookies.title")} aria-live="polite">
          <div className="cookie-banner-inner">
            <div className="cookie-banner-text">
              <div className="cookie-banner-title">🍪 {t("cookies.title")}</div>
              <p>{t("cookies.body")}{" "}
                <a href="#gdpr"
                   onClick={(e) => {
                     e.preventDefault();
                     setOpenBanner(false);
                     window.__navigateTo && window.__navigateTo({ name: "gdpr" });
                   }}
                   className="cookie-link">
                  {t("cookies.privacyLink")}
                </a>
              </p>
            </div>
            <div className="cookie-banner-actions">
              <button className="btn btn-ghost btn-sm cookie-btn-mgmt"
                      onClick={() => {
                        setDraft({ analytics: false, marketing: false });
                        setOpenPrefs(true);
                      }}>
                {t("cookies.manageLink")}
              </button>
              <button className="btn btn-ghost btn-sm" onClick={rejectAll}>
                {t("cookies.rejectAll")}
              </button>
              <button className="btn btn-brand btn-sm" onClick={acceptAll}>
                {t("cookies.acceptAll")}
              </button>
            </div>
          </div>
        </div>
      )}

      {openPrefs && (
        <div className="cookie-modal-backdrop" onClick={() => setOpenPrefs(false)}>
          <div className="cookie-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-prefs-title"
               onClick={(e) => e.stopPropagation()}>
            <div className="cookie-modal-head">
              <h3 id="cookie-prefs-title" className="h3">{t("cookies.prefsTitle")}</h3>
              <button className="cookie-modal-close" onClick={() => setOpenPrefs(false)} aria-label={t("cookies.close")}>✕</button>
            </div>
            <p className="cookie-modal-lede">{t("cookies.prefsLede")}</p>

            <div className="cookie-cats">
              {categories.map((c) => {
                const checked = c.required ? true : draft[c.id] || false;
                return (
                  <div key={c.id} className={`cookie-cat ${c.required ? "required" : ""}`}>
                    <label className="cookie-cat-head">
                      <input
                        type="checkbox"
                        checked={checked}
                        disabled={c.required}
                        onChange={(e) => !c.required && setDraft({ ...draft, [c.id]: e.target.checked })}
                      />
                      <span className="cookie-cat-h">{c.h}</span>
                      {c.required && <span className="cookie-cat-required">{lang === "cs" ? "vyžadováno" : lang === "de" ? "erforderlich" : "required"}</span>}
                    </label>
                    <p className="cookie-cat-body">{c.p}</p>
                  </div>
                );
              })}
            </div>

            <div className="cookie-modal-actions">
              <button className="btn btn-ghost" onClick={rejectAll}>{t("cookies.rejectAll")}</button>
              <button className="btn btn-ghost" onClick={savePrefs}>{t("cookies.savePrefs")}</button>
              <button className="btn btn-brand" onClick={acceptAll}>{t("cookies.acceptAll")}</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

window.CookieConsent = CookieConsent;

// ============================================================
// GDPR / Privacy Policy page
// ============================================================
function GdprPage({ lang, setRoute }) {
  const t = (p) => window.t(lang, p);
  const sections = t("gdpr.sections");

  return (
    <main id="main" className="page-fade">
      <section className="page-header">
        <div className="container-wide">
          <span className="eyebrow">GDPR</span>
          <h1 className="h1">{t("gdpr.h1")}</h1>
          <div className="tiny" style={{ marginTop: 14, fontFamily: "var(--font-mono)", color: "var(--ink-3)" }}>
            {t("gdpr.updated")}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 240px) minmax(0, 1fr)", gap: 64 }}>
            {/* TOC */}
            <aside style={{ position: "sticky", top: 100, alignSelf: "start", borderTop: "1px solid var(--line)", paddingTop: 16 }}>
              <span className="eyebrow">{t("gdpr.toc")}</span>
              <ol style={{ padding: 0, listStyle: "none", margin: "16px 0 0", counterReset: "g" }}>
                {sections.map((s, i) => (
                  <li key={i} style={{ counterIncrement: "g", padding: "8px 0", borderTop: i === 0 ? 0 : "1px dashed var(--line-2)" }}>
                    <a href={`#gdpr-${i}`}
                       onClick={(e) => {
                         e.preventDefault();
                         const el = document.getElementById(`gdpr-${i}`);
                         if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
                       }}
                       style={{
                         fontSize: 13.5,
                         color: "var(--ink-2)",
                         display: "flex",
                         gap: 10,
                         lineHeight: 1.35,
                       }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)" }}>
                        {String(i + 1).padStart(2, "0")}
                      </span>
                      <span>{s.h}</span>
                    </a>
                  </li>
                ))}
              </ol>

              <button
                className="btn btn-ghost btn-sm"
                style={{ marginTop: 24, width: "100%", justifyContent: "center" }}
                onClick={() => window.__openCookiePrefs && window.__openCookiePrefs()}
              >
                {lang === "cs" ? "Spravovat cookies" : lang === "de" ? "Cookies verwalten" : "Manage cookies"}
              </button>
            </aside>

            <div>
              {sections.map((s, i) => (
                <article key={i} id={`gdpr-${i}`} style={{ paddingTop: 32, paddingBottom: 32, borderTop: i === 0 ? 0 : "1px solid var(--line)" }}>
                  <div className="tiny" style={{ fontFamily: "var(--font-mono)", color: "var(--ink-4)", letterSpacing: "0.1em" }}>
                    {String(i + 1).padStart(2, "0")} / {String(sections.length).padStart(2, "0")}
                  </div>
                  <h2 className="h3" style={{ marginTop: 8, marginBottom: 14 }}>{s.h}</h2>
                  <p className="body" style={{ fontSize: 16, lineHeight: 1.65, maxWidth: "68ch" }}>{s.body}</p>
                </article>
              ))}

              {/* Footer note */}
              <div style={{
                marginTop: 48,
                padding: "20px 24px",
                background: "var(--mint)",
                borderRadius: "var(--radius-lg)",
                border: "1px solid color-mix(in oklab, var(--brand) 22%, transparent)",
                fontSize: 14,
                color: "var(--ink-2)",
              }}>
                <strong style={{ color: "var(--ink)" }}>
                  {lang === "cs" ? "Otázky?" : lang === "de" ? "Fragen?" : "Questions?"}
                </strong>{" "}
                {lang === "cs" && <>Pište na <a href="mailto:hello@weautomate.cz" style={{ color: "var(--brand)" }}>hello@weautomate.cz</a> — odpovídáme do 30 dnů.</>}
                {lang === "en" && <>Email <a href="mailto:hello@weautomate.cz" style={{ color: "var(--brand)" }}>hello@weautomate.cz</a> — we reply within 30 days.</>}
                {lang === "de" && <>Schreiben Sie an <a href="mailto:hello@weautomate.cz" style={{ color: "var(--brand)" }}>hello@weautomate.cz</a> — Antwort binnen 30 Tagen.</>}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.GdprPage = GdprPage;