const { Wordmark, Beam, TickRule, Button, LangToggle, Eyebrow } = (window.FintelligentComTrLanding_96e553 || (console.error("Fintelligent DS: _ds_bundle.js not loaded — check the <script src> path"), {}));

function Container({ width = 1140, className, style, children, ...rest }) {
  return <div className={className} style={{ width: "100%", maxWidth: width, margin: "0 auto", padding: "0 24px", ...style }} {...rest}>{children}</div>;
}

function Section({ tone = "page", pad = "md", id, style, children }) {
  const bg = tone === "subtle" ? "var(--surface-subtle)" : tone === "inverse" ? "var(--surface-inverse)" : "var(--surface-page)";
  const py = pad === "lg" ? "var(--section-y-lg)" : pad === "sm" ? "var(--section-y-sm)" : "var(--section-y)";
  return <section id={id} style={{ background: bg, padding: py + " 0", ...style }}>{children}</section>;
}

function Reveal({ delay = 0, as = "div", style, children, ...rest }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } },
      { threshold: 0.12, rootMargin: "0px 0px -40px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} style={{
      opacity: seen ? 1 : 0,
      transform: seen ? "none" : "translateY(14px)",
      transition: "opacity var(--dur-slower) var(--ease-entrance) " + delay + "ms, transform var(--dur-slower) var(--ease-entrance) " + delay + "ms",
      ...style,
    }} {...rest}>{children}</Tag>
  );
}

function SiteHeader({ page, onNav, lang, setLang }) {
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const on = () => setStuck(window.scrollY > 4);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 30 }}>
      <Beam height={3} />
      <div style={{
        height: "var(--header-h)",
        background: stuck ? "rgba(255,255,255,.86)" : "var(--surface-page)",
        backdropFilter: stuck ? "blur(10px)" : "none",
        WebkitBackdropFilter: stuck ? "blur(10px)" : "none",
        borderBottom: "1px solid " + (stuck ? "var(--border-default)" : "transparent"),
        transition: "background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard)",
      }}>
        <Container style={{ height: "100%", display: "flex", alignItems: "center", gap: 32 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }} style={{ textDecoration: "none" }}>
            <Wordmark size={21} />
          </a>
          <nav className="nav-scroll" style={{ display: "flex", gap: 26, marginLeft: 8, minWidth: 0 }}>
            {window.SITE.nav.filter((n) => n.id !== "home").map((n) => (
              <a key={n.id} href={"#" + n.id}
                onClick={(e) => { e.preventDefault(); onNav(n.id); }}
                style={{
                  fontSize: 15, fontWeight: 500, letterSpacing: "-0.012em", textDecoration: "none",
                  color: page === n.id ? "var(--navy-900)" : "var(--navy-500)",
                  paddingBottom: 2,
                  borderBottom: "1px solid " + (page === n.id ? "var(--navy-900)" : "transparent"),
                }}>{window.T(n.label, lang)}</a>
            ))}
          </nav>
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 14 }}>
            <LangToggle value={lang} onChange={setLang} />
            <span className="hide-sm"><Button size="sm" onClick={() => onNav("contact")}>{window.T(window.SITE.cta, lang)}</Button></span>
          </div>
        </Container>
      </div>
    </header>
  );
}

function SiteFooter({ lang, onNav }) {
  const c = window.SITE.company;
  const col = (title, links) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--text-inverse-secondary)" }}>{title}</span>
      {links.map((l) => (
        <a key={l.label} href="#" onClick={(e) => { e.preventDefault(); l.to && onNav(l.to); }}
          style={{ fontSize: 14, color: "var(--text-inverse)", textDecoration: "none", opacity: .84 }}>{l.label}</a>
      ))}
    </div>
  );
  return (
    <footer style={{ background: "var(--surface-inverse)", color: "var(--text-inverse)", padding: "72px 0 34px" }}>
      <Container>
        <div className="g-footer" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 40 }}>
          <div>
            <Wordmark size={26} inverse />
            <p style={{ marginTop: 14, fontSize: 14, lineHeight: 1.62, color: "var(--text-inverse-secondary)", maxWidth: 300 }}>
              {window.T({ tr: "Ödeme, dijital cüzdan ve sadakat programı altyapısı kuran yazılım teknoloji şirketi.", en: "A software technology company building payment, digital wallet and loyalty program infrastructure." }, lang)}
            </p>
            <p style={{ marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 11, lineHeight: 1.7, color: "var(--text-inverse-secondary)" }}>
              {c.legalName}<br />{c.address}
            </p>
          </div>
          {col(window.T({ tr: "Çözümler", en: "Solutions" }, lang), [
            { label: window.T({ tr: "Ödeme orkestrasyonu", en: "Payment orchestration" }, lang), to: "solutions" },
            { label: window.T({ tr: "Sadakat programı", en: "Loyalty programs" }, lang), to: "solutions" },
            { label: window.T({ tr: "Dijital cüzdan", en: "Digital wallet" }, lang), to: "solutions" },
            { label: window.T({ tr: "Özel yazılım geliştirme", en: "Custom software development" }, lang), to: "solutions" },
          ])}
          {col(window.T({ tr: "Şirket", en: "Company" }, lang), [
            { label: window.T({ tr: "Hizmetler", en: "Services" }, lang), to: "services" },
            { label: window.T({ tr: "İletişim", en: "Contact" }, lang), to: "contact" },
            { label: window.T({ tr: "Destek", en: "Support" }, lang), to: "legal" },
          ])}
          {col(window.T({ tr: "Yasal", en: "Legal" }, lang), [
            { label: window.T({ tr: "Gizlilik politikası", en: "Privacy policy" }, lang), to: "legal" },
            { label: window.T({ tr: "KVKK aydınlatma metni", en: "KVKK disclosure" }, lang), to: "legal" },
            { label: window.T({ tr: "Çerez politikası", en: "Cookie policy" }, lang), to: "legal" },
            { label: window.T({ tr: "Kullanım koşulları", en: "Terms of use" }, lang), to: "legal" },
          ])}
        </div>
        <div style={{ marginTop: 44, paddingTop: 20, borderTop: "1px solid var(--border-inverse)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-inverse-secondary)" }}>© 2026 {c.legalName}</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-inverse-secondary)" }}>VKN {c.vkn}</span>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Container, Section, Reveal, SiteHeader, SiteFooter });