// Stats band + integrations + security + final CTA + footer
function Stats() {
  const items = [
    { v: "200+", l: "Trading companies running on Antelope" },
    { v: "10 yrs", l: "Building for sales-driven financial teams" },
    { v: "$2.4B+", l: "Annual deposit volume processed" },
    { v: "47", l: "Countries with live deployments" },
  ];
  return (
    <section className="section-pad" style={{ padding: "64px 0" }}>
      <div className="container">
        <div className="stats-row">
          {items.map((it, i) => (
            <div key={it.l} className="stat reveal" style={{ "--d": `${i * 80}ms` }}>
              <div className="stat-v">{it.v}</div>
              <div className="stat-l">{it.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .stats-row {
          display: grid; grid-template-columns: repeat(4, 1fr);
          padding: 28px 32px;
          border-radius: 18px;
          background: linear-gradient(180deg, rgba(122,82,255,0.06), rgba(241,24,178,0.04));
          border: 1px solid var(--line);
        }
        .stat { padding: 12px 18px; border-right: 1px solid var(--line); }
        .stat:last-child { border-right: 0; }
        .stat-v { font-size: 38px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
          background: linear-gradient(110deg, var(--text), var(--purple-2) 60%, var(--pink));
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .stat-l { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
        @media (max-width: 800px) { .stats-row { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } }
      `}</style>
    </section>
  );
}

function Integrations() {
  // categorized name list — no logos (we'd need real ones), use type tiles
  const groups = [
    { title: "Trading platforms", items: ["MT4", "MT5", "cTrader", "Match-Trader", "DXTrade", "TradeLocker"] },
    { title: "Payments & PSPs", items: ["Stripe", "Checkout.com", "PayRetailers", "PIX", "Volt", "Coinbase Commerce"] },
    { title: "KYC / AML", items: ["Sumsub", "Onfido", "Veriff", "ComplyAdvantage", "Jumio", "iDenfy"] },
    { title: "Comms & telephony", items: ["Twilio", "Voiso", "Squaretalk", "Coperato", "Telegram", "WhatsApp"] },
    { title: "Marketing & attribution", items: ["GA4", "Meta CAPI", "Google Ads", "TikTok Events", "Branch", "Postback Hub"] },
    { title: "Data & ops", items: ["BigQuery", "Snowflake", "Slack", "Webhooks", "REST API", "GraphQL"] },
  ];
  return (
    <section id="integrations" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Integrations</span>
          <h2>Connected to the stack you already run.</h2>
          <p>Out-of-the-box connectors to trading platforms, PSPs, KYC providers, telephony and the data tools your COO actually uses.</p>
        </div>
        <div className="int-grid">
          {groups.map((g, gi) => (
            <div key={g.title} className="int-card card">
              <div className="int-title">
                <span className="int-dot" style={{ background: ["#7A52FF","#F118B2","#FF7A45","#FFB000","#2BD974","#24A1DE"][gi] }}/>
                {g.title}
              </div>
              <div className="int-items">
                {g.items.map((i) => <span key={i} className="int-chip">{i}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .int-card { padding: 20px; }
        .int-title { font-size: 13.5px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
        .int-dot { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 10px currentColor; }
        .int-items { display: flex; flex-wrap: wrap; gap: 6px; }
        .int-chip { font-size: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--text-dim); transition: all .15s ease; }
        .int-chip:hover { color: var(--text); background: rgba(255,255,255,0.06); border-color: var(--line-2); }
        @media (max-width: 900px) { .int-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px) { .int-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function Security() {
  const features = [
    { t: "Cloud or on-prem", d: "Deploy in our cloud, your cloud or fully on-prem — including air-gapped." },
    { t: "Per-tenant isolation", d: "Each entity in a multi-license group runs as an isolated tenant." },
    { t: "SOC2-aligned controls", d: "Audit logs, role-based access, secret rotation, encryption at rest and in transit." },
    { t: "Region pinning", d: "Pin client + KYC data to specific jurisdictions. Configurable per entity." },
  ];
  return (
    <section className="section-pad" style={{ background: "linear-gradient(180deg, transparent, rgba(122,82,255,0.05), transparent)" }}>
      <div className="container sec-grid">
        <div>
          <span className="eyebrow">Security & deployment</span>
          <h2 style={{ marginTop: 14 }}>Enterprise controls. <span className="gradient-text">SMB simplicity.</span></h2>
          <p style={{ fontSize: 16, marginTop: 16, maxWidth: 460 }}>
            The same platform you spin up in 1 week scales to multi-license broker groups with per-entity data residency. Same code. Same operations layer.
          </p>
        </div>
        <div className="sec-features">
          {features.map((f) => (
            <div key={f.t} className="sec-feature card">
              <div className="sec-feature-icon">
                <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
                  <path d="M10 2l6 3v5c0 4-3 6.5-6 7.5C7 16.5 4 14 4 10V5l6-3z" stroke="url(#sec-grad)" strokeWidth="1.6" strokeLinejoin="round"/>
                  <path d="M7 10l2 2 4-4" stroke="url(#sec-grad)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                  <defs><linearGradient id="sec-grad" x1="0" y1="0" x2="20" y2="20"><stop offset="0" stopColor="#9D80FF"/><stop offset="1" stopColor="#F89BD6"/></linearGradient></defs>
                </svg>
              </div>
              <div>
                <div className="sec-feature-t">{f.t}</div>
                <div className="sec-feature-d">{f.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .sec-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
        .sec-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .sec-feature { display: flex; gap: 14px; padding: 18px; align-items: flex-start; }
        .sec-feature-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(122,82,255,0.1); border: 1px solid rgba(122,82,255,0.2); display: grid; place-items: center; flex: 0 0 38px; }
        .sec-feature-t { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
        .sec-feature-d { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
        @media (max-width: 960px) { .sec-grid { grid-template-columns: 1fr; } .sec-features { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function FinalCTA() {
  return (
    <section id="contact" className="section-pad">
      <div className="container">
        <div className="cta-card">
          <div className="cta-grid-bg"/>
          <div className="cta-content">
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>The operating system</span>
            <h2 style={{ fontSize: "clamp(36px, 5vw, 60px)", marginTop: 14, color: "#fff" }}>
              See Antelope as the OS, <br/><span style={{ background: "linear-gradient(110deg, #fff, #FFD27A 50%, #F89BD6)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>not just the CRM.</span>
            </h2>
            <p style={{ color: "rgba(255,255,255,0.75)", fontSize: 17, marginTop: 18, maxWidth: 580 }}>
              Book a demo and map your traffic, sales, KYC, payment, trading, partner and reporting workflow into one connected platform.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
              <a className="btn" href="#" style={{ background: "#fff", color: "#0B0B18", padding: "14px 22px", fontSize: 14.5, fontWeight: 600 }}>
                Book a demo
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a className="btn" href="#" style={{ background: "rgba(255,255,255,0.1)", color: "#fff", border: "1px solid rgba(255,255,255,0.2)", padding: "14px 22px", fontSize: 14.5, fontWeight: 600 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21 4L2 12l7 2 2 7 10-17z"/></svg>
                Telegram
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .cta-card {
          position: relative;
          padding: 68px 56px;
          border-radius: 28px;
          background:
            radial-gradient(800px 400px at 80% 110%, rgba(241,24,178,0.7), transparent 60%),
            radial-gradient(700px 380px at 20% 0%, rgba(255,176,0,0.35), transparent 60%),
            linear-gradient(135deg, #5A2DF4 0%, #2A1080 100%);
          overflow: hidden;
          border: 1px solid rgba(255,255,255,0.18);
        }
        .cta-grid-bg {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
          background-size: 48px 48px;
          mask: radial-gradient(700px 400px at 50% 50%, #000 30%, transparent 80%);
          -webkit-mask: radial-gradient(700px 400px at 50% 50%, #000 30%, transparent 80%);
        }
        .cta-content { position: relative; z-index: 1; }
      `}</style>
    </section>
  );
}

function SiteFooter() {
  const cols = [
    {
      title: "Product",
      items: [
        { l: "CRM & Sales Ninja", h: "pages/crm.html" },
        { l: "Client Area", h: "pages/client-area.html" },
        { l: "Payments", h: "pages/payments.html" },
        { l: "KYC, AML & Suitability", h: "pages/kyc.html" },
        { l: "Trading Platform", h: "pages/trading-platform.html" },
        { l: "Web Trader", h: "pages/web-trader.html" },
        { l: "Mobile Trader App", h: "pages/mobile-trader.html" },
        { l: "BI & AI", h: "pages/bi-ai.html" },
        { l: "IB System", h: "pages/ib-system.html" },
        { l: "Affiliate & Media Buying", h: "pages/affiliate-media.html" },
        { l: "Prop Trading", h: "pages/prop-trading.html" },
        { l: "Crypto Operations", h: "pages/crypto-trading.html" },
      ],
    },
    {
      title: "Solutions",
      items: [
        { l: "FX/CFD Brokers", h: "pages/fx-cfd-brokers.html" },
        { l: "Crypto Brokers & Exchanges", h: "pages/crypto-companies.html" },
        { l: "Prop Firms", h: "pages/prop-firms.html" },
        { l: "Stock & Investment", h: "pages/stock-investment.html" },
        { l: "Multi-License Groups", h: "pages/multi-license.html" },
        { l: "Financial Call Centers", h: "pages/call-centers.html" },
        { l: "Online Academies", h: "pages/academies.html" },
      ],
    },
    {
      title: "Platform",
      items: [
        { l: "Why Antelope", h: "pages/why.html" },
        { l: "Integrations", h: "pages/integrations.html" },
        { l: "Security & Deployment", h: "pages/security.html" },
        { l: "Pricing", h: "pages/pricing.html" },
        { l: "Status", h: "#" },
        { l: "Changelog", h: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { l: "About Antelope", h: "pages/about.html" },
        { l: "Careers", h: "pages/careers.html" },
        { l: "Partners", h: "pages/partners.html" },
        { l: "Press", h: "pages/press.html" },
        { l: "Contact sales", h: "pages/contact.html" },
        { l: "Book a demo", h: "pages/contact.html" },
      ],
    },
  ];

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo size={26}/>
            <p className="footer-blurb">
              The operating system for trading companies — brokers, prop firms, exchanges and academies. One stack, one data layer, one source of truth.
            </p>
            <div className="footer-actions">
              <a className="btn btn-primary" href={resolveHref("pages/contact.html")}>Book a demo</a>
              <a className="btn btn-ghost" href={resolveHref("pages/contact.html")}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21 4L2 12l7 2 2 7 10-17z"/></svg>
                Telegram
              </a>
            </div>
            <div className="footer-offices">
              <div className="footer-office-title">Offices</div>
              <div className="footer-offices-list">
                <span>Limassol · HQ</span>
                <span>Dubai</span>
                <span>New York</span>
              </div>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title} className="footer-col-wrap">
              <div className="footer-col-title">{c.title}</div>
              <div className="footer-col">
                {c.items.map((i) => <a key={i.l} href={resolveHref(i.h)} className="footer-link">{i.l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div className="footer-bottom-left">
            <span>© 2026 Antelope Systems Ltd.</span>
            <span className="footer-dot">·</span>
            <span>Founded 2016 · 200+ customers · Limassol HQ</span>
          </div>
          <div className="footer-legal">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href={resolveHref("pages/security.html")}>Security</a>
            <a href="#">Cookies</a>
            <span className="footer-status">
              <span className="footer-status-dot"/>
              All systems operational
            </span>
          </div>
        </div>
      </div>
      <style>{`
        .footer { padding: 80px 0 28px; border-top: 1px solid var(--line); margin-top: 80px; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--purple) 6%, transparent)); position: relative; }
        .footer::before {
          content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
          width: 60%; max-width: 800px; height: 1px;
          background: linear-gradient(90deg, transparent, var(--purple-2), var(--pink), transparent);
        }
        .footer-top {
          display: grid;
          grid-template-columns: 1.6fr repeat(4, 1fr);
          gap: 40px;
          padding-bottom: 56px;
          border-bottom: 1px solid var(--line);
        }
        .footer-brand { display: flex; flex-direction: column; gap: 18px; }
        .footer-blurb { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; max-width: 320px; margin: 0; }
        .footer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        .footer-offices { padding-top: 16px; border-top: 1px solid var(--line); }
        .footer-office-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-bottom: 10px; }
        .footer-offices-list { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--text-dim); }
        .footer-col-wrap { min-width: 0; }
        .footer-col-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); font-weight: 600; margin-bottom: 16px; }
        .footer-col { display: flex; flex-direction: column; gap: 10px; }
        .footer-link { font-size: 13.5px; color: var(--text-dim); transition: color .15s; }
        .footer-link:hover { color: var(--text); }
        .footer-bottom {
          display: flex; justify-content: space-between; align-items: center;
          padding-top: 22px; gap: 16px; flex-wrap: wrap;
          font-size: 12.5px; color: var(--text-mute);
        }
        .footer-bottom-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
        .footer-dot { color: var(--text-mute); opacity: 0.5; }
        .footer-legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
        .footer-legal a { color: var(--text-mute); transition: color .15s; }
        .footer-legal a:hover { color: var(--text); }
        .footer-status { display: inline-flex; align-items: center; gap: 6px; }
        .footer-status-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); box-shadow: 0 0 8px var(--green); }

        @media (max-width: 1080px) {
          .footer-top { grid-template-columns: 1fr 1fr 1fr; }
          .footer-brand { grid-column: span 3; }
        }
        @media (max-width: 700px) {
          .footer { padding: 60px 0 24px; margin-top: 60px; }
          .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 36px; }
          .footer-brand { grid-column: span 2; }
          .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
        }
      `}</style>
    </footer>
  );
}

window.Stats = Stats;
window.Integrations = Integrations;
window.Security = Security;
window.FinalCTA = FinalCTA;
window.SiteFooter = SiteFooter;