// AI Features page — flagship cross-cutting AI capabilities
function AIPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Antelope" }, { label: "AI" }]}
        eyebrow={<span style={{ background: "linear-gradient(110deg,#5A2DF4,#F118B2,#FF7A45)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", fontWeight: 700 }}>● ANTELOPE AI · 2026</span>}
        title={<>The <span className="gradient-text">AI operating system</span> for revenue teams.</>}
        sub="Antelope AI turns CRM, sales, support and the call floor into one intelligent revenue engine — coaching operators live, scoring leads, automating workflows, and surfacing the next-best action across every channel."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See the 10 modules", href: "#modules" }}
        visual={<AIBrainVisual/>}
      />

      <StatRow items={[
        { v: "10", l: "AI modules across the stack" },
        { v: "Real-time", l: "Live coaching during every call" },
        { v: "+38%", l: "Lift in operator conversion (median)" },
        { v: "1 model", l: "Trained on your data, your voice, your playbook" },
      ]}/>

      <section id="modules" className="section-pad-sm">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
            <span className="eyebrow">The 10 modules</span>
            <h2 style={{ marginTop: 14 }}>Every part of the revenue motion, intelligent.</h2>
            <p style={{ marginTop: 14, fontSize: 16 }}>One AI brain, ten surfaces. Live calls, sales, leads, CRM, retention, messaging, support, reporting, compliance and workflows — all running on the same model and the same data.</p>
          </div>

          <div className="ai-modules">
            {AI_MODULES.map((m, i) => (
              <div key={m.t} className="ai-mod">
                <div className="ai-mod-num mono">{String(i + 1).padStart(2, "0")}</div>
                <div className="ai-mod-glyph" style={{ background: m.g }}>{m.icon}</div>
                <div className="ai-mod-eyebrow mono">{m.eyebrow}</div>
                <h3 className="ai-mod-title">{m.t}</h3>
                <p className="ai-mod-desc">{m.d}</p>
                <ul className="ai-mod-list">
                  {m.items.map((it) => (
                    <li key={it}>
                      <span className="ai-mod-bullet"/>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          .ai-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
          @media (max-width: 900px) { .ai-modules { grid-template-columns: 1fr; } }
          .ai-mod {
            position: relative;
            padding: 26px 24px 24px; border-radius: 18px;
            background: var(--surface); border: 1px solid var(--line);
            transition: border-color .25s ease, transform .25s ease;
            overflow: hidden;
          }
          .ai-mod::before {
            content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
            background: radial-gradient(380px 220px at 100% 0%, rgba(122,82,255,0.08), transparent 70%);
            transition: opacity .3s ease;
          }
          .ai-mod:hover { border-color: rgba(122,82,255,0.4); transform: translateY(-2px); }
          .ai-mod:hover::before { opacity: 1; }
          .ai-mod-num {
            position: absolute; top: 18px; right: 22px;
            font-size: 11px; color: var(--text-mute); letter-spacing: 0.06em;
          }
          .ai-mod-glyph {
            width: 44px; height: 44px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            color: #fff; margin-bottom: 16px;
            box-shadow: 0 8px 22px -10px rgba(241,24,178,0.45);
          }
          .ai-mod-eyebrow { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-bottom: 6px; }
          .ai-mod-title { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 8px; }
          .ai-mod-desc { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 14px; }
          .ai-mod-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
          .ai-mod-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
          .ai-mod-bullet { width: 4px; height: 4px; border-radius: 999px; background: linear-gradient(135deg,#5A2DF4,#F118B2); margin-top: 7px; flex-shrink: 0; }
          @media (max-width: 600px) {
            .ai-mod-list { grid-template-columns: 1fr; }
          }
        `}</style>
      </section>

      <SplitFeature
        eyebrow="One model, your data"
        title={<>Trained on <span className="gradient-text">your playbook</span>, not the public internet.</>}
        sub="Antelope AI runs on the same event stream that powers CRM, payments and trading — so models see real customer behavior, real call transcripts, real outcomes. Tune them on your scripts, your geos, your top performers."
        points={[
          "Fine-tunes on your top operators' winning calls",
          "Multilingual: English, Spanish, Arabic, Vietnamese, Mandarin and more",
          "Per-tenant model isolation — your data never trains anyone else's model",
          "Optional on-prem inference for regulated jurisdictions",
        ]}
        visual={<AIBrainVisual/>}
      />

      <FAQ items={[
        { q: "Is Antelope AI an add-on or built in?", a: "Core models — call summaries, lead scoring, churn prediction, NBA — are built into the platform. Advanced modules (Sales Assistant, Compliance QA, on-prem inference) are tiered add-ons." },
        { q: "What about data privacy?", a: "Per-tenant model isolation. Your conversations, leads and outcomes never train another customer's model. SOC 2 Type II, ISO 27001, GDPR and SAR compliant." },
        { q: "How fast can we go live?", a: "Out-of-the-box models work day one with your data. Fine-tuning on your historical calls and outcomes typically takes 2–4 weeks for measurable lift." },
        { q: "Can I use my own LLM provider?", a: "Yes — bring your own OpenAI, Anthropic, Azure OpenAI or Bedrock keys. We also ship a self-hosted option for fully air-gapped deployments." },
      ]}/>

      <CTASection
        title={<>The future of revenue operations <span className="gradient-text">starts here</span>.</>}
        sub="Increase conversions. Improve retention. Scale faster — with one AI brain across CRM, sales, support and the call floor."
        primary={{ label: "Book a demo" }}
        secondary={{ label: "See pricing", href: "pricing.html" }}
      />
    </Site>
  );
}

const AI_MODULES = [
  {
    eyebrow: "Call Intelligence",
    t: "Turn every call into revenue intelligence.",
    d: "Real-time transcription and AI summaries the moment the call ends. Detect objections, sentiment and next-best-actions, score every operator, and write everything back to the CRM — no manual notes.",
    g: "linear-gradient(135deg,#5A2DF4,#7A52FF)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 5a2 2 0 012-2h2.5l1.5 4-2 1a11 11 0 005 5l1-2 4 1.5V15a2 2 0 01-2 2A14 14 0 013 5z" stroke="currentColor" strokeWidth="1.6"/></svg>,
    items: ["Live transcription", "AI call summaries", "Objection detection", "Sentiment scoring", "Compliance flags", "CRM auto-write", "Operator scoring", "Next-best-action"],
  },
  {
    eyebrow: "Sales Assistant",
    t: "Live coaching for every operator, every call.",
    d: "Antelope AI listens during conversations and feeds the operator real-time response suggestions, smart rebuttals, upsell opportunities and personalized cues — pulled from your top performers.",
    g: "linear-gradient(135deg,#F118B2,#FF7A45)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l2.4 5 5.6.8-4 4 1 5.6L12 16l-5 2.4 1-5.6-4-4 5.6-.8z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
    items: ["Real-time prompts", "Smart rebuttals", "Upsell triggers", "Lead context overlay", "Personalized cues", "Whisper coaching"],
  },
  {
    eyebrow: "Lead Scoring",
    t: "Prioritize high-value leads automatically.",
    d: "A predictive model that scores every lead the moment it lands — by traffic source, behavior, geo, language, deposit probability, retention potential and churn risk — so reps only call who's worth calling.",
    g: "linear-gradient(135deg,#7A52FF,#F118B2)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 17l5-5 4 4 7-9M14 7h6v6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    items: ["Traffic quality", "Behavior signals", "Geo & language", "Deposit probability", "Retention potential", "Churn risk"],
  },
  {
    eyebrow: "CRM Copilot",
    t: "Ask your CRM anything.",
    d: "Natural-language access to every record, metric and segment. No filters. No dashboards. Ask the question, get the answer — with the underlying records one click away.",
    g: "linear-gradient(135deg,#FF7A45,#FFB000)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M21 15a4 4 0 01-4 4H8l-5 3V7a4 4 0 014-4h10a4 4 0 014 4z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
    items: ["\"Show high-value inactive clients\"", "\"Best-retention campaigns?\"", "\"Top-converting operators\"", "Drill into raw records", "Save & share queries", "Embedded chat"],
  },
  {
    eyebrow: "Retention Engine",
    t: "Detect churn before it happens.",
    d: "The model watches every signal — withdrawal intent, declining activity, negative sentiment, risky behavior — and automatically triggers retention workflows the moment risk crosses threshold.",
    g: "linear-gradient(135deg,#2BD974,#24A1DE)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-5-7-11a4 4 0 017-2.6A4 4 0 0119 10c0 6-7 11-7 11z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
    items: ["Withdrawal intent", "Activity decline", "Negative sentiment", "High-risk behavior", "Auto retention flows", "Win-back sequences"],
  },
  {
    eyebrow: "Messaging Automation",
    t: "Smarter WhatsApp, Telegram & email.",
    d: "AI-generated follow-ups, smart reply suggestions and engagement-optimized timing — across every channel. Auto-translation keeps multilingual conversations native, not robotic.",
    g: "linear-gradient(135deg,#24A1DE,#7A52FF)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M21 12a8 8 0 01-12 7l-5 1 1-4a8 8 0 1116-4z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
    items: ["AI follow-ups", "Smart replies", "Personalization", "Auto-translation", "Send-time optimization", "Multilingual support"],
  },
  {
    eyebrow: "Support & Ticketing",
    t: "Faster support, less manual work.",
    d: "Tickets categorize themselves. AI suggests replies. VIP and urgency are detected automatically. Conversations get summarized for the next agent. Multilingual handling is built in.",
    g: "linear-gradient(135deg,#FFB000,#FF7A45)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 5h16v10H7l-3 3zM8 9h8M8 12h5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    items: ["Auto-categorization", "AI reply drafts", "VIP detection", "Urgency scoring", "Conversation summary", "Multilingual"],
  },
  {
    eyebrow: "Reporting & Analytics",
    t: "Executive insights in seconds.",
    d: "AI continuously analyzes sales performance, call activity, campaign ROI, productivity and conversion funnels — and surfaces what changed, why it changed, and what to do about it.",
    g: "linear-gradient(135deg,#5A2DF4,#24A1DE)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
    items: ["Sales performance", "Call activity", "Campaign ROI", "Team productivity", "Funnel diagnostics", "Anomaly callouts"],
  },
  {
    eyebrow: "Compliance & QA",
    t: "Automated monitoring at scale.",
    d: "Every conversation, every channel — scanned for compliance violations, risky language, script adherence and operator quality. Built for regulated, high-volume environments where 100% sampling matters.",
    g: "linear-gradient(135deg,#F118B2,#5A2DF4)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    items: ["100% call sampling", "Risk language flags", "Script adherence", "Operator quality", "Process consistency", "Audit-ready logs"],
  },
  {
    eyebrow: "Workflow Automation",
    t: "Eliminate the repetitive work.",
    d: "CRM updates, follow-ups, lead routing, task creation, notifications, retention sequences and operator handoffs — all automated by AI, all visible and overridable in one workflow surface.",
    g: "linear-gradient(135deg,#FF7A45,#F118B2)",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
    items: ["Auto CRM updates", "Smart routing", "Follow-up scheduling", "Task creation", "Retention sequences", "Operator handoffs"],
  },
];

ReactDOM.createRoot(document.getElementById("root")).render(<AIPage/>);