/* global React, REPORT_SECTIONS, AUDIENCES, PILLARS, AzorDemo, Icon */
// AZOR — page sections (everything outside the interactive demo).

const { useEffect: useEffectS, useState: useStateS } = React;

// ============= Reveal-on-scroll wrapper =====================
function Reveal({ children, delay = 0, as: Tag = "div", style = {}, ...rest }) {
  const [visible, setVisible] = useStateS(true);
  const ref = React.useRef(null);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    // Start hidden, then reveal — but only schedule this AFTER mount,
    // so initial paint (and html-to-image captures) see content.
    setVisible(false);
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      const t = setTimeout(() => setVisible(true), 30 + delay);
      return () => clearTimeout(t);
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); }});
    }, { threshold: 0.08 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <Tag ref={ref} style={{
      ...style,
      opacity: visible ? 1 : 0,
      transform: visible ? "translateY(0)" : "translateY(16px)",
      transition: `opacity 600ms cubic-bezier(0.2,0,0,1) ${delay}ms, transform 600ms cubic-bezier(0.2,0,0,1) ${delay}ms`,
    }} {...rest}>{children}</Tag>
  );
}

// ============= Wordmark / monogram =========================
function AzorMark({ size = 28, mode = "light" }) {
  const stroke = mode === "light" ? "var(--navy-950)" : "var(--paper)";
  const accent = "var(--copper-600)";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <rect x="1" y="1" width="30" height="30" rx="3" stroke={stroke} strokeWidth="1.5"/>
        <path d="M8 22 L16 8 L24 22" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
        <path d="M11 17 L21 17" stroke={accent} strokeWidth="2" strokeLinecap="round"/>
        <circle cx="24" cy="22" r="1.6" fill={accent}/>
      </svg>
      <div style={{
        fontFamily: "var(--font-display)", fontWeight: 600,
        fontSize: 22, letterSpacing: "-0.02em",
        color: mode === "light" ? "var(--navy-950)" : "var(--paper)",
      }}>
        AZOR<span style={{ color: accent }}>.</span>
      </div>
    </div>
  );
}

// ============= Top nav ====================================
function TopNav() {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      borderBottom: "1px solid var(--rule)",
      background: "rgba(246, 241, 233, 0.85)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto", padding: "14px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <AzorMark />
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.04em",
            color: "var(--ink-3)"
          }}>
            AZOR = Agent Zam&oacute;wie&#324; i Oceny Ryzyka
          </span>
        </div>
        <nav style={{ display: "flex", gap: 28, alignItems: "center" }} className="nav-links">
          {["Jak działa", "Raport", "Bezpieczeństwo", "Cennik"].map((l) => (
            <a key={l} href="#" style={{
              color: "var(--ink-2)", textDecoration: "none", fontSize: 13, fontWeight: 500,
            }}>{l}</a>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <a href="#demo" style={{
            background: "var(--navy-950)", color: "var(--paper)",
            padding: "8px 16px", borderRadius: "var(--r-sm)",
            textDecoration: "none", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.01em",
          }}>Uruchom AZOR</a>
        </div>
      </div>
    </header>
  );
}

// ============= HERO =======================================
function Hero({ direction = "split" }) {
  return (
    <section className="texture-paper" style={{
      background: "var(--gradient-paper)",
      borderBottom: "1px solid var(--rule)",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Drifting gradient orbs */}
      <div style={{
        position: "absolute", top: "-20%", right: "-10%", width: 600, height: 600,
        borderRadius: "50%",
        background: "radial-gradient(circle, rgba(176,78,21,0.10) 0%, transparent 60%)",
        animation: "drift1 18s ease-in-out infinite",
        zIndex: 0,
      }}/>
      <div style={{
        position: "absolute", bottom: "-30%", left: "-10%", width: 700, height: 700,
        borderRadius: "50%",
        background: "radial-gradient(circle, rgba(15,36,64,0.08) 0%, transparent 60%)",
        animation: "drift2 22s ease-in-out infinite",
        zIndex: 0,
      }}/>

      <div style={{
        position: "relative", zIndex: 1,
        maxWidth: 1280, margin: "0 auto",
        padding: "72px 32px 88px",
        display: "grid",
        gridTemplateColumns: direction === "split" ? "minmax(0, 1.05fr) minmax(0, 1fr)" : "1fr",
        gap: 56, alignItems: "center",
      }} className="hero-grid">
        <div>
          <Reveal>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "5px 12px",
              border: "1px solid var(--rule-strong)",
              background: "rgba(255,255,255,0.6)",
              borderRadius: 999,
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--copper-700)",
              letterSpacing: "0.06em", textTransform: "uppercase",
              marginBottom: 24,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--copper-600)" }}/>
              Agent Zamówień i Oceny Ryzyka
            </div>
          </Reveal>

          <Reveal delay={80}>
            <h1 className="display-serif" style={{
              fontSize: "clamp(36px, 5vw, 64px)",
              color: "var(--navy-950)",
              margin: "0 0 28px 0",
              maxWidth: 720,
            }}>
              Decyzja ofertowa zanim stracisz{" "}
              <span style={{
                background: "linear-gradient(90deg, var(--copper-600) 0%, var(--copper-700) 100%)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                backgroundClip: "text",
                fontStyle: "italic",
                fontFamily: "var(--font-display)",
              }}>tydzień</span> na zły przetarg.
            </h1>
          </Reveal>

          <Reveal delay={160}>
            <p style={{
              fontSize: "clamp(16px, 1.4vw, 19px)",
              lineHeight: 1.55, color: "var(--ink-2)",
              maxWidth: 560, margin: "0 0 32px 0",
            }}>
              Wklej link lub dodaj PDF. Otrzymaj ośmiosekcyjny raport, listę ryzyk
              i jednoznaczną decyzję <strong style={{ color: "var(--olive-700)" }}>STARTUJEMY</strong>{" / "}
              <strong style={{ color: "var(--amber-600)" }}>WARUNKOWO</strong>{" / "}
              <strong style={{ color: "var(--crimson-700)" }}>NIE&nbsp;STARTUJEMY</strong>.
            </p>
          </Reveal>

          <Reveal delay={240}>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 36 }}>
              <a href="#demo" style={{
                background: "var(--copper-600)", color: "#fff",
                padding: "14px 24px", borderRadius: "var(--r-sm)",
                textDecoration: "none", fontWeight: 600, fontSize: 15,
                letterSpacing: "0.01em",
                display: "inline-flex", alignItems: "center", gap: 10,
                boxShadow: "var(--shadow-button)",
              }}>
                Przeanalizuj przetarg <Icon name="arrow-right" size={16} />
              </a>
              <a href="#sample" style={{
                background: "transparent", color: "var(--navy-950)",
                padding: "14px 24px", borderRadius: "var(--r-sm)",
                textDecoration: "none", fontWeight: 600, fontSize: 15,
                border: "1px solid var(--rule-strong)",
                display: "inline-flex", alignItems: "center", gap: 10,
              }}>
                Zobacz przykładowy raport
              </a>
            </div>
          </Reveal>

          <Reveal delay={320}>
            <div style={{
              display: "flex", flexWrap: "wrap", gap: "8px 24px",
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--ink-3)", letterSpacing: "0.04em",
            }}>
              <span><span style={{ color: "var(--olive-600)" }}>●</span> e-Zamówienia · TED · SmartPZP</span>
              <span><span style={{ color: "var(--olive-600)" }}>●</span> evidence + odnośniki</span>
              <span><span style={{ color: "var(--olive-600)" }}>●</span> ISO 27001 / RODO</span>
            </div>
          </Reveal>
        </div>

        {direction === "split" && (
          <Reveal delay={200}>
            <div id="demo">
              <AzorDemo />
            </div>
          </Reveal>
        )}
      </div>

      <style>{`
        @keyframes drift1 {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50%      { transform: translate(-40px, 30px) scale(1.05); }
        }
        @keyframes drift2 {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50%      { transform: translate(60px, -40px) scale(1.08); }
        }
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .nav-links { display: none !important; }
        }
      `}</style>
    </section>
  );
}

// ============= How it works ===============================
function HowItWorks() {
  const steps = [
    { num: "01", code: "INPUT",   title: "Dodajesz URL lub paczkę PDF",                 desc: "e-Zamówienia, TED, SmartPZP, e-Propublico, lub plik źródłowy SWZ.", icon: "link" },
    { num: "02", code: "MERGE",   title: "AZOR łączy SWZ, Q&A i zmiany",                desc: "Wszystkie modyfikacje, sprostowania i tury pytań na jednej osi czasu.", icon: "branch" },
    { num: "03", code: "DECIDE",  title: "Otrzymujesz raport i decyzję",                desc: "Osiem sekcji, lista ryzyk, braków danych, oraz wstępna decyzja ofertowa.", icon: "shield-check" },
  ];
  return (
    <section style={{ padding: "96px 32px", borderBottom: "1px solid var(--rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="eyebrow">&gt; PROCES · 3 KROKI</div>
              <h2 className="display-serif" style={{ fontSize: "clamp(28px, 3.4vw, 42px)", color: "var(--navy-950)", marginTop: 8 }}>
                Jak to działa
              </h2>
            </div>
            <div style={{ fontSize: 14, color: "var(--ink-2)", maxWidth: 380 }}>
              Bez integracji, bez kont na 12 platformach. Wystarczy link do postępowania.
            </div>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)", borderRadius: "var(--r-md)", overflow: "hidden" }} className="steps-grid">
          {steps.map((s, i) => (
            <Reveal key={s.num} delay={i * 100}>
              <div style={{
                background: "var(--paper-2)", padding: "32px 28px",
                display: "flex", flexDirection: "column", gap: 16,
                minHeight: 240, height: "100%",
                position: "relative",
              }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    color: "var(--copper-600)", letterSpacing: "0.08em",
                  }}>{s.num} / {s.code}</span>
                  <span style={{
                    width: 36, height: 36, borderRadius: "50%",
                    border: "1px solid var(--rule-strong)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "var(--navy-900)",
                  }}>
                    <Icon name={s.icon} size={18} />
                  </span>
                </div>
                <h3 className="display-serif" style={{
                  fontSize: 24, color: "var(--navy-950)", letterSpacing: "-0.02em",
                  fontWeight: 500, lineHeight: 1.15,
                }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, margin: 0 }}>{s.desc}</p>
                {i < steps.length - 1 && (
                  <div style={{
                    position: "absolute", right: -12, top: "50%",
                    transform: "translateY(-50%)", zIndex: 2,
                    width: 24, height: 24, borderRadius: "50%",
                    background: "var(--paper)",
                    border: "1px solid var(--rule-strong)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "var(--copper-600)",
                  }} className="step-arrow">
                    <Icon name="arrow-right" size={12} />
                  </div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .steps-grid { grid-template-columns: 1fr !important; }
          .step-arrow { display: none !important; }
        }
      `}</style>
    </section>
  );
}

// ============= Report sections grid =======================
function ReportSections() {
  return (
    <section style={{ padding: "96px 32px", background: "var(--paper-3)", borderBottom: "1px solid var(--rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{ marginBottom: 48 }}>
            <div className="eyebrow">&gt; STRUKTURA RAPORTU · 8 SEKCJI</div>
            <h2 className="display-serif" style={{ fontSize: "clamp(28px, 3.4vw, 42px)", color: "var(--navy-950)", marginTop: 8, maxWidth: 760 }}>
              Każdy przetarg — ten sam, audytowalny szkielet
            </h2>
            <p style={{ fontSize: 16, color: "var(--ink-2)", marginTop: 16, maxWidth: 640 }}>
              Powtarzalny układ ośmiu sekcji oznacza, że Twój zespół wie, gdzie szukać każdej liczby.
              Pełna zawartość każdej sekcji jest opatrzona odnośnikiem do źródła.
            </p>
          </div>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 12,
        }} className="sections-grid">
          {REPORT_SECTIONS.map((s, i) => (
            <Reveal key={s.num} delay={i * 50}>
              <div style={{
                background: "var(--paper-2)", border: "1px solid var(--rule)",
                borderRadius: "var(--r-md)", padding: 18,
                height: "100%", display: "flex", flexDirection: "column", gap: 10,
                transition: "all 200ms",
                cursor: "default",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--copper-300)"; e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-card)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--rule)"; e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    color: "var(--copper-600)", fontWeight: 600, letterSpacing: "0.04em",
                  }}>{s.num}</span>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 9,
                    color: "var(--ink-3)", letterSpacing: "0.1em",
                    border: "1px solid var(--rule)", padding: "2px 6px", borderRadius: 3,
                  }}>{s.code}</span>
                </div>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontSize: 18,
                  fontWeight: 500, letterSpacing: "-0.02em",
                  color: "var(--navy-950)", lineHeight: 1.2,
                }}>{s.title}</h3>
                <p style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5, margin: 0, flex: 1 }}>{s.desc}</p>
                <div style={{ paddingTop: 8, borderTop: "1px dashed var(--rule)", display: "flex", flexDirection: "column", gap: 3 }}>
                  {s.lines.slice(0, 3).map((l, j) => (
                    <span key={j} style={{
                      fontFamily: "var(--font-mono)", fontSize: 10,
                      color: "var(--ink-3)", letterSpacing: "0.02em",
                    }}>· {l}</span>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .sections-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 600px)  { .sections-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ============= Audiences =================================
function Audiences() {
  return (
    <section style={{ padding: "96px 32px", borderBottom: "1px solid var(--rule)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{ marginBottom: 40 }}>
            <div className="eyebrow">&gt; DLA KOGO</div>
            <h2 className="display-serif" style={{ fontSize: "clamp(28px, 3.4vw, 42px)", color: "var(--navy-950)", marginTop: 8 }}>
              Każda branża czyta przetarg inaczej
            </h2>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="aud-grid">
          {AUDIENCES.map((a, i) => (
            <Reveal key={a.code} delay={i * 80}>
              <div style={{
                padding: "28px 24px",
                background: "linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%)",
                border: "1px solid var(--rule)",
                borderRadius: "var(--r-md)",
                height: "100%",
                display: "flex", flexDirection: "column", gap: 14,
              }}>
                <div style={{
                  display: "inline-flex", alignSelf: "flex-start",
                  fontFamily: "var(--font-mono)", fontSize: 10,
                  background: "var(--navy-50)", color: "var(--navy-900)",
                  padding: "3px 8px", borderRadius: 3, letterSpacing: "0.08em",
                  border: "1px solid var(--navy-100)",
                }}>{a.code}</div>
                <h3 className="display-serif" style={{ fontSize: 20, color: "var(--navy-950)", fontWeight: 500, letterSpacing: "-0.01em" }}>
                  {a.label}
                </h3>
                <p style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5, margin: 0 }}>{a.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .aud-grid { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 520px) { .aud-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ============= Trust pillars =============================
function Trust() {
  return (
    <section style={{
      padding: "96px 32px",
      background: "var(--gradient-navy)",
      color: "var(--paper)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='1' cy='1' r='0.6' fill='%23ffffff' opacity='0.06'/></svg>\")",
        zIndex: 0,
      }}/>
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <Reveal>
          <div style={{ marginBottom: 56, display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ color: "var(--copper-300)" }}>&gt; BEZPIECZEŃSTWO + AUDYTOWALNOŚĆ</div>
              <h2 className="display-serif" style={{
                fontSize: "clamp(28px, 3.4vw, 44px)", color: "var(--paper)",
                marginTop: 8, maxWidth: 720,
              }}>
                Dlaczego AZOR
              </h2>
            </div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--copper-300)", letterSpacing: "0.06em",
              padding: "6px 12px", border: "1px solid rgba(255,255,255,0.15)",
              borderRadius: 999,
            }}>
              SOC2 · ISO 27001 · RODO
            </div>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }} className="trust-grid">
          {PILLARS.map((p, i) => (
            <Reveal key={p.num} delay={i * 100}>
              <div style={{
                padding: 28,
                background: "rgba(255,255,255,0.03)",
                border: "1px solid rgba(255,255,255,0.10)",
                borderRadius: "var(--r-md)",
                height: "100%",
                display: "flex", flexDirection: "column", gap: 14,
              }}>
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 10,
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  color: "var(--copper-300)", letterSpacing: "0.08em",
                }}>
                  <span style={{
                    width: 28, height: 28, border: "1px solid var(--copper-400)",
                    borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                    color: "var(--copper-300)",
                  }}>{p.num}</span>
                  PILAR / 0{p.num}
                </div>
                <h3 className="display-serif" style={{
                  fontSize: 22, color: "var(--paper)",
                  fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.2,
                }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: "rgba(255,255,255,0.7)", lineHeight: 1.6, margin: 0 }}>{p.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ============= Final CTA =================================
function FinalCta() {
  return (
    <section style={{ padding: "96px 32px", background: "var(--paper)", borderBottom: "1px solid var(--rule)" }}>
      <div style={{
        maxWidth: 1100, margin: "0 auto",
        background: "var(--paper-2)",
        border: "1px solid var(--rule-strong)",
        borderRadius: "var(--r-lg)",
        padding: "56px 56px",
        display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "center",
        position: "relative", overflow: "hidden",
        boxShadow: "var(--shadow-card)",
      }} className="cta-box">
        <div style={{
          position: "absolute", right: -80, top: -80, width: 320, height: 320,
          borderRadius: "50%",
          background: "radial-gradient(circle, rgba(176,78,21,0.18) 0%, transparent 65%)",
          zIndex: 0,
        }}/>
        <div style={{ position: "relative", zIndex: 1 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>&gt; FINALNE WEZWANIE</div>
          <h2 className="display-serif" style={{
            fontSize: "clamp(28px, 3.6vw, 44px)",
            color: "var(--navy-950)", lineHeight: 1.05, letterSpacing: "-0.02em",
            marginBottom: 16,
          }}>
            Masz <span style={{ color: "var(--copper-600)" }}>6 dni</span> do terminu?<br/>
            Sprawdź, czy warto startować.
          </h2>
          <p style={{ fontSize: 16, color: "var(--ink-2)", maxWidth: 540, margin: 0 }}>
            Wstępna ocena ofertowa — zanim zaangażujesz kosztorysanta, prawnika i kierownika kontraktu.
          </p>
        </div>
        <div style={{ position: "relative", zIndex: 1 }}>
          <a href="#demo" style={{
            background: "var(--copper-600)", color: "#fff",
            padding: "18px 28px", borderRadius: "var(--r-sm)",
            textDecoration: "none", fontWeight: 600, fontSize: 16,
            letterSpacing: "0.01em", display: "inline-flex", alignItems: "center", gap: 12,
            boxShadow: "var(--shadow-button)", whiteSpace: "nowrap",
          }}>
            Uruchom AZOR teraz <Icon name="arrow-right" size={18} />
          </a>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .cta-box { grid-template-columns: 1fr !important; padding: 36px !important; } }`}</style>
    </section>
  );
}

// ============= Footer ====================================
function Footer() {
  return (
    <footer style={{
      background: "var(--navy-950)", color: "var(--paper)",
      padding: "56px 32px 24px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr",
          gap: 48, paddingBottom: 40,
          borderBottom: "1px solid rgba(255,255,255,0.08)",
        }} className="footer-grid">
          <div>
            <AzorMark mode="dark" />
            <p style={{ fontSize: 13, color: "rgba(255,255,255,0.55)", marginTop: 16, maxWidth: 320, lineHeight: 1.6 }}>
              Agent Zamówień i Oceny Ryzyka. Narzędzie wstępnej oceny opłacalności startu w przetargach publicznych.
            </p>
          </div>
          {[
            { title: "Produkt",     items: ["Jak to działa", "Sekcje raportu", "Cennik", "Roadmap"] },
            { title: "Branża",      items: ["GW kubaturowe", "Drogi i mosty", "Instalacje", "Teletechnika"] },
            { title: "Bezpieczeństwo", items: ["Polityka danych", "RODO", "ISO 27001", "Status systemu"] },
          ].map((col) => (
            <div key={col.title}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
                color: "var(--copper-300)", textTransform: "uppercase", marginBottom: 16,
              }}>{col.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {col.items.map((it) => (
                  <li key={it}>
                    <a href="#" style={{ color: "rgba(255,255,255,0.65)", textDecoration: "none", fontSize: 13 }}>{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", paddingTop: 24,
          fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.4)",
          letterSpacing: "0.02em", flexWrap: "wrap", gap: 12,
        }}>
          <span>© 2026 AZOR sp. z o.o. · NIP 5252948732 · Wszystkie prawa zastrzeżone</span>
          <span>v1.4.2 · made in PL</span>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }`}</style>
    </footer>
  );
}

window.AzorSections = {
  TopNav, Hero, HowItWorks, ReportSections, Audiences, Trust, FinalCta, Footer, Reveal, AzorMark,
};
