// Solutions tabs + Mobile Trader showcase + stats + integrations + security + CTA + footer
const SOLUTIONS = [
  {
    id: "fxcfd",
    label: "FX / CFD Brokers",
    color: "#7A52FF",
    h: "Launch and scale FX/CFD operations on one connected stack.",
    p: "CRM, KYC, payments, trading access, IBs, affiliates, retention and BI — already wired together for broker workflows.",
    points: ["Multi-license, multi-entity setup", "MT4 / MT5 / proprietary platform connectivity", "Bonus & promotion engines", "Retention call cadences"],
    metric: { label: "Avg. time-to-launch", value: "1 week" },
  },
  {
    id: "crypto",
    label: "Crypto Trading",
    color: "#F118B2",
    h: "Run crypto trading operations end-to-end.",
    p: "Crypto funding flows, onboarding, campaign tracking, wallet/payment visibility and retention — without 4 different wallet dashboards.",
    points: ["Native USDT/BTC/ETH funding", "On-chain + off-chain attribution", "Tier-based limits per region", "Crypto-specific KYC checks"],
    metric: { label: "Coins / chains supported", value: "40+" },
  },
  {
    id: "prop",
    label: "Prop Firms",
    color: "#FF7A45",
    h: "Sell challenges. Manage funded accounts. Pay traders.",
    p: "Challenge sales, evaluation rules, funded accounts, payouts, affiliates and trader lifecycle BI — purpose-built for prop economics.",
    points: ["Challenge → funded → payout flow", "Rule engine: drawdown, daily loss, profit target", "Trader dashboards + leaderboard", "Affiliate-driven challenge sales"],
    metric: { label: "Challenge variants", value: "Unlimited" },
  },
  {
    id: "stock",
    label: "Stock & Investment",
    color: "#2BD974",
    h: "Investor onboarding and subscriptions, done right.",
    p: "Suitability questionnaires, products, subscriptions, payments and client management — for platforms with regulated investor relationships.",
    points: ["MiFID-style suitability flows", "Products & subscription billing", "Per-product tier permissions", "Investor reporting"],
    metric: { label: "Compliance frameworks", value: "EU · UK · MENA" },
  },
  {
    id: "callcenter",
    label: "Call Centers",
    color: "#FFB000",
    h: "A sales OS for high-velocity financial call centers.",
    p: "Sales CRM, calling, lead routing, agent performance, conversion and retention — designed around the floor, not adapted to it.",
    points: ["Power dialer + softphone", "Agent KPI scoreboards", "Call recording + AI summary", "Live shift performance view"],
    metric: { label: "Concurrent agents tested", value: "500+" },
  },
];

function Solutions() {
  const [active, setActive] = React.useState("fxcfd");
  const s = SOLUTIONS.find((x) => x.id === active);

  return (
    <section id="solutions" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Solutions</span>
          <h2>Built for the trading businesses that need <span className="gradient-text">speed and control.</span></h2>
          <p>Every Antelope deployment is configured around a specific operating model. Pick yours, see what's already wired in.</p>
        </div>

        <div className="sol-tabs">
          {SOLUTIONS.map((x) => (
            <button key={x.id} className={`sol-tab ${x.id === active ? "active" : ""}`} onClick={() => setActive(x.id)} style={{ "--c": x.color }}>
              <span className="sol-tab-dot"/>
              {x.label}
            </button>
          ))}
        </div>

        <div className="sol-card card" key={active}>
          <div className="sol-left">
            <h3 className="sol-h">{s.h}</h3>
            <p style={{ fontSize: 16, marginTop: 14, marginBottom: 22 }}>{s.p}</p>
            <ul className="sol-list">
              {s.points.map((p) => (
                <li key={p}><span className="sol-check" style={{ color: s.color }}>✓</span>{p}</li>
              ))}
            </ul>
            <div style={{ display: "flex", gap: 10, marginTop: 26 }}>
              <a className="btn btn-primary" href="#contact">View solution
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a className="btn btn-ghost" href="#contact">Book a demo</a>
            </div>
          </div>
          <div className="sol-right">
            <div className="sol-metric" style={{ "--c": s.color }}>
              <div className="sol-metric-label">{s.metric.label}</div>
              <div className="sol-metric-value">{s.metric.value}</div>
            </div>
            <div className="sol-stack">
              {["CRM", "Client Area", "Payments", "KYC", "Trading", "BI", "IB", "Affiliate"].map((m, i) => (
                <div key={m} className="sol-stack-row" style={{ animationDelay: `${i * 50}ms` }}>
                  <span className="sol-stack-dot" style={{ background: s.color }}/>
                  <span>{m}</span>
                  <span className="mono sol-stack-status">connected</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .sol-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
        .sol-tab {
          background: rgba(255,255,255,0.025); border: 1px solid var(--line);
          color: var(--text-dim); padding: 9px 14px; border-radius: 999px;
          font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px;
          transition: all .2s ease;
        }
        .sol-tab:hover { color: var(--text); }
        .sol-tab .sol-tab-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c); opacity: 0.5; }
        .sol-tab.active {
          background: linear-gradient(180deg, color-mix(in oklab, var(--c) 16%, transparent), color-mix(in oklab, var(--c) 4%, transparent));
          border-color: color-mix(in oklab, var(--c) 50%, transparent);
          color: var(--text);
        }
        .sol-tab.active .sol-tab-dot { opacity: 1; box-shadow: 0 0 8px var(--c); }

        .sol-card {
          display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px;
          padding: 36px;
          animation: fade-in .35s ease both;
        }
        .sol-h { font-size: 30px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; }
        .sol-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; font-size: 14px; color: var(--text-dim); }
        .sol-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
        .sol-check { font-weight: 700; }

        .sol-right { display: flex; flex-direction: column; gap: 14px; }
        .sol-metric {
          padding: 22px; border-radius: 14px;
          background: linear-gradient(180deg, color-mix(in oklab, var(--c) 18%, transparent), color-mix(in oklab, var(--c) 4%, transparent));
          border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
        }
        .sol-metric-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
        .sol-metric-value { font-size: 36px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); margin-top: 6px; }

        .sol-stack { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--line); }
        .sol-stack-row {
          display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
          padding: 7px 4px; font-size: 12.5px; color: var(--text);
          animation: row-in .4s ease both;
        }
        .sol-stack-dot { width: 6px; height: 6px; border-radius: 999px; box-shadow: 0 0 8px currentColor; }
        .sol-stack-status { font-size: 10.5px; color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase; }

        @media (max-width: 960px) {
          .sol-card { grid-template-columns: 1fr; padding: 24px; }
          .sol-list { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Mobile Trader showcase ---------- */
function MobileShowcase() {
  return (
    <section className="section-pad mobile-showcase">
      <div className="container mob-grid">
        <div>
          <span className="eyebrow">Mobile landing</span>
          <h2 style={{ marginTop: 14 }}>Mobile should feel like the product, <span className="gradient-text">not a compressed brochure.</span></h2>
          <p style={{ fontSize: 17, marginTop: 16, maxWidth: 520 }}>
            The Antelope mobile experience leads with the actual trading story — deposit, trade, support, push alerts and CRM visibility, in the same OS as your desktop.
          </p>
          <ul className="mob-list">
            <li><span className="mob-pill" style={{ background: "rgba(122,82,255,0.16)", color: "#9D80FF" }}>Live</span>Client Area status</li>
            <li><span className="mob-pill" style={{ background: "rgba(241,24,178,0.16)", color: "#F89BD6" }}>Recovery</span>Failed deposit retry flows</li>
            <li><span className="mob-pill" style={{ background: "rgba(255,122,69,0.16)", color: "#FFB99A" }}>Trading</span>Real-time positions & P&L</li>
            <li><span className="mob-pill" style={{ background: "rgba(255,176,0,0.16)", color: "#FFD27A" }}>Signals</span>Retention alerts to CRM</li>
          </ul>
          <div style={{ marginTop: 28 }}>
            <a className="btn btn-primary" href="#contact">See Mobile Trader App
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>

        <Phone/>
      </div>

      <style>{`
        .mobile-showcase { background: linear-gradient(180deg, transparent, rgba(241,24,178,0.04), transparent); }
        .mob-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
        .mob-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--text); }
        .mob-list li { display: flex; align-items: center; gap: 12px; }
        .mob-pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
        @media (max-width: 1024px) { .mob-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function Phone() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1800);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{ display: "flex", justifyContent: "center", position: "relative" }}>
      <div style={{
        position: "absolute", inset: 20, borderRadius: 60,
        background: "radial-gradient(60% 50% at 50% 50%, rgba(122,82,255,0.4), transparent 70%)",
        filter: "blur(40px)", zIndex: 0
      }}/>
      <div className="phone">
        <div className="phone-notch"/>
        <div className="phone-screen">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 22px 6px" }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--text)" }}>9:41</span>
            <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
              <span style={{ fontSize: 9, color: "var(--text-dim)" }}>•••• 5G</span>
              <span style={{ width: 22, height: 10, borderRadius: 3, border: "1px solid var(--text-dim)", padding: 1 }}>
                <span style={{ display: "block", width: "70%", height: "100%", background: "var(--text-dim)", borderRadius: 1 }}/>
              </span>
            </div>
          </div>

          <div style={{ padding: "10px 18px 0" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <Logo size={14}/>
              <span className="tag" style={{ fontSize: 9, padding: "3px 7px" }}><span className="dot"/>LIVE</span>
            </div>
          </div>

          <div style={{ padding: "16px 18px 6px" }}>
            <div style={{ fontSize: 10, color: "var(--text-mute)", letterSpacing: "0.1em", textTransform: "uppercase" }}>Trading account</div>
            <div className="mono" style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-0.025em", color: "var(--text)", marginTop: 2 }}>
              ${(24820 + (tick * 5) % 80).toLocaleString()}
            </div>
            <div style={{ fontSize: 12, color: "var(--green)", fontWeight: 600 }}>+$182 · +0.74% today</div>
          </div>

          <div style={{ padding: "0 18px" }}>
            <svg width="100%" height="80" viewBox="0 0 280 80" style={{ display: "block" }}>
              <defs>
                <linearGradient id="ph-fill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="#7A52FF" stopOpacity="0.5"/>
                  <stop offset="1" stopColor="#7A52FF" stopOpacity="0"/>
                </linearGradient>
                <linearGradient id="ph-line" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stopColor="#7A52FF"/>
                  <stop offset="1" stopColor="#F118B2"/>
                </linearGradient>
              </defs>
              <path d="M0 60 Q 30 50, 60 52 T 120 30 T 180 38 T 240 18 T 280 12 L280 80 L0 80 Z" fill="url(#ph-fill)"/>
              <path d="M0 60 Q 30 50, 60 52 T 120 30 T 180 38 T 240 18 T 280 12" stroke="url(#ph-line)" strokeWidth="2" fill="none" strokeLinecap="round"/>
            </svg>
          </div>

          <div style={{ padding: "10px 18px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <button style={{ padding: "12px 0", borderRadius: 12, fontSize: 13, fontWeight: 600, color: "#fff", border: 0, background: "linear-gradient(180deg,#7A52FF,#5A2DF4)", boxShadow: "0 8px 20px -8px var(--purple-glow)" }}>Deposit</button>
            <button style={{ padding: "12px 0", borderRadius: 12, fontSize: 13, fontWeight: 600, color: "var(--text)", border: "1px solid var(--line-2)", background: "rgba(255,255,255,0.04)" }}>Trade</button>
          </div>

          <div style={{ padding: "8px 18px", display: "flex", flexDirection: "column", gap: 6 }}>
            {[
              { icon: "✓", title: "KYC approved", sub: "Tier 2 unlocked", c: "#2BD974" },
              { icon: "$", title: "Payment completed", sub: "+$500 · USDT TRC-20", c: "#FFB000" },
              { icon: "⏰", title: "Retention follow-up", sub: "Maya R. · today 15:00", c: "#F118B2" },
            ].map((n, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 10, background: "rgba(255,255,255,0.04)", border: "1px solid var(--line)", animation: `drift-up 3s ${i * 0.5}s infinite` }}>
                <span style={{ width: 22, height: 22, borderRadius: 6, background: n.c + "22", color: n.c, display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700 }}>{n.icon}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11.5, color: "var(--text)", fontWeight: 500 }}>{n.title}</div>
                  <div style={{ fontSize: 10, color: "var(--text-mute)" }}>{n.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .phone {
          position: relative; z-index: 1;
          width: 280px; height: 580px; border-radius: 44px;
          background: linear-gradient(180deg,#1A1535, #0E0820);
          border: 1px solid var(--line-2);
          box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(122,82,255,0.2) inset;
          padding: 6px;
        }
        .phone-notch {
          position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
          width: 100px; height: 26px; border-radius: 16px; background: #000; z-index: 2;
        }
        .phone-screen {
          width: 100%; height: 100%; border-radius: 38px;
          background: linear-gradient(180deg, #0F0B22, #0A0716);
          overflow: hidden;
          padding-top: 8px;
        }
      `}</style>
    </div>
  );
}

window.Solutions = Solutions;
window.MobileShowcase = MobileShowcase;