// 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, #fff, #C9BFFF 60%, #F89BD6);
          -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 6 weeks 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: ["Product overview", "CRM & Ninja", "Client Area", "Payments", "KYC & Suitability", "BI & AI", "Mobile Trader App", "IB System", "Affiliate & Media Buying"] },
    { title: "Solutions", items: ["FX/CFD Brokers", "Crypto Trading", "Prop Firms", "Stock & Investment", "Multi-License Groups", "Call Centers"] },
    { title: "Why Antelope", items: ["Why Antelope", "Trading Platform", "Security & Deployment", "Integrations", "Customers"] },
    { title: "Company", items: ["About", "Careers", "Press", "Contact", "Book a demo"] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <Logo size={22}/>
            <p style={{ marginTop: 14, fontSize: 13.5, maxWidth: 320 }}>
              The operating system for trading platforms and sales-driven financial companies. Since 2016.
            </p>
            <a className="btn btn-ghost" href="#" style={{ marginTop: 18 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21 4L2 12l7 2 2 7 10-17z"/></svg>
              Contact on Telegram
            </a>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div className="footer-col-title">{c.title}</div>
              <div className="footer-col">
                {c.items.map((i) => <a key={i} href="#" className="footer-link">{i}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>© 2026 Antelope. Since 2016 · 200+ clients · Global experience.</div>
          <div className="footer-legal">
            <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Security</a>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--green)" }}/>
              All systems operational
            </span>
          </div>
        </div>
      </div>
      <style>{`
        .footer { padding: 80px 0 28px; border-top: 1px solid var(--line); margin-top: 60px; }
        .footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
        .footer-col-title { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin-bottom: 14px; }
        .footer-col { display: flex; flex-direction: column; gap: 8px; }
        .footer-link { font-size: 13px; color: var(--text-dim); }
        .footer-link:hover { color: var(--text); }
        .footer-bottom {
          display: flex; justify-content: space-between; padding-top: 24px;
          font-size: 12.5px; color: var(--text-mute);
        }
        .footer-legal { display: flex; gap: 18px; }
        .footer-legal a:hover { color: var(--text); }
        @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
      `}</style>
    </footer>
  );
}

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