// Pricing page
function PricingPage() {
  const tiers = [
    {
      name: "Launch",
      tag: "For new brokers and startups",
      price: "From €4,900",
      period: "/ month",
      features: [
        "CRM & Sales Ninja (up to 10 seats)",
        "Client Area with white-label",
        "Payments orchestration (3 PSPs)",
        "KYC & AML core workflows",
        "No BI included — add when ready",
        "Email + chat support",
      ],
      cta: "Start launch plan",
    },
    {
      name: "Scale",
      tag: "Most popular for growing teams",
      price: "From €9,800",
      period: "/ month",
      features: [
        "Everything in Launch",
        "CRM & Sales Ninja (up to 20 seats)",
        "Extra seats available as paid add-ons",
        "Mobile Trader (iOS + Android)",
        "IB & affiliate suite",
        "AI: anomaly + churn + NBA",
        "Multi-license support",
        "Dedicated CSM",
      ],
      cta: "Talk to sales",
      highlighted: true,
    },
    {
      name: "Enterprise",
      tag: "Multi-license groups, prop firms",
      price: "Custom",
      period: "",
      features: [
        "Everything in Scale",
        "Multi-region, active-active",
        "Custom integrations",
        "On-prem or hybrid deploy",
        "24/7 SLA with P1 < 30 min",
        "Compliance specialist on retainer",
        "Trading platform hosting",
      ],
      cta: "Talk to sales",
    },
  ];
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Pricing" }]}
        eyebrow="Pricing"
        title={<>Simple plans for every <span className="gradient-text">stage of growth</span>.</>}
        sub="Pricing is per-license-group and includes onboarding. We don't take a cut of your trading volume or payment volume — ever. Pay in fiat or crypto, your call."
        ctaPrimary={{ label: "Book a demo" }}
      />

      {/* Crypto payments banner */}
      <section style={{ padding: "0 0 12px" }}>
        <div className="container">
          <div className="crypto-pay-banner">
            <div className="crypto-pay-left">
              <div className="crypto-pay-eyebrow">
                <span className="crypto-pay-dot"/>
                Now accepting crypto
              </div>
              <h3 className="crypto-pay-title">Pay your subscription in <span className="gradient-text">crypto</span>.</h3>
              <p className="crypto-pay-sub">USDT, USDC, BTC, ETH and more — direct on-chain settlement to our treasury. No FX overhead, no card fees, no banking delays. Annual prepay in crypto saves an extra <strong>5%</strong>.</p>
              <div className="crypto-pay-perks">
                <div><span>✓</span> Multi-chain · TRC20, ERC20, BEP20, SOL, BTC</div>
                <div><span>✓</span> Auto-invoiced &amp; receipted on-chain</div>
                <div><span>✓</span> Stablecoin-locked pricing (no volatility risk)</div>
                <div><span>✓</span> 5% discount on annual crypto prepay</div>
              </div>
              <div className="crypto-pay-cta">
                <a className="btn btn-primary" href={resolveHref("pages/contact.html")}>Get a crypto invoice</a>
                <a className="btn btn-ghost" href={resolveHref("pages/contact.html")}>Talk to billing</a>
              </div>
            </div>
            <div className="crypto-pay-right">
              <div className="crypto-pay-coins">
                {[
                  { s: "USDT", c: "#26A17B", d: "Tether" },
                  { s: "USDC", c: "#2775CA", d: "USD Coin" },
                  { s: "BTC", c: "#F7931A", d: "Bitcoin" },
                  { s: "ETH", c: "#627EEA", d: "Ethereum" },
                  { s: "SOL", c: "#14F195", d: "Solana" },
                  { s: "BNB", c: "#F0B90B", d: "BNB" },
                ].map((c, i) => (
                  <div key={c.s} className="crypto-pay-coin" style={{ "--c": c.c, animationDelay: `${i*0.08}s` }}>
                    <div className="crypto-pay-coin-badge">{c.s}</div>
                    <div className="crypto-pay-coin-name">{c.d}</div>
                  </div>
                ))}
              </div>
              <div className="crypto-pay-receipt mono">
                <div className="crypto-pay-receipt-row"><span>Plan</span><span>Scale · Annual</span></div>
                <div className="crypto-pay-receipt-row"><span>Subtotal</span><span>€117,600.00</span></div>
                <div className="crypto-pay-receipt-row" style={{ color: "var(--green)" }}><span>Crypto prepay −5%</span><span>−€5,880.00</span></div>
                <div className="crypto-pay-receipt-row crypto-pay-receipt-total"><span>Pay in USDT</span><span>111,720.00</span></div>
                <div className="crypto-pay-receipt-chain"><span className="crypto-pay-dot" style={{ background: "#26A17B" }}/> TRC20 · settles in ~30s</div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .crypto-pay-banner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: linear-gradient(135deg, rgba(122,82,255,0.10), rgba(38,161,123,0.06)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; position: relative; }
          .crypto-pay-banner::before { content: ""; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(122,82,255,0.18), transparent 70%); pointer-events: none; }
          .crypto-pay-left { padding: 36px 40px; position: relative; z-index: 1; }
          .crypto-pay-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
          .crypto-pay-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: cp-pulse 1.4s ease-in-out infinite; }
          @keyframes cp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
          .crypto-pay-title { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
          .crypto-pay-sub { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; margin: 0 0 20px; max-width: 480px; }
          .crypto-pay-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 24px; }
          .crypto-pay-perks > div { font-size: 13px; color: var(--text); display: flex; gap: 8px; align-items: center; }
          .crypto-pay-perks span { color: var(--green); font-weight: 700; }
          .crypto-pay-cta { display: flex; gap: 10px; flex-wrap: wrap; }
          .crypto-pay-right { padding: 36px 40px 36px 0; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
          .crypto-pay-coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
          .crypto-pay-coin { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; animation: fx-fade-in .5s ease both; transition: transform .2s, border-color .2s; }
          .crypto-pay-coin:hover { transform: translateY(-2px); border-color: var(--c); }
          .crypto-pay-coin-badge { display: inline-block; padding: 4px 8px; background: color-mix(in oklab, var(--c) 18%, transparent); color: var(--c); border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 6px; font-family: var(--mono); }
          .crypto-pay-coin-name { font-size: 11.5px; color: var(--text-dim); }
          .crypto-pay-receipt { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 12.5px; }
          .crypto-pay-receipt-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-dim); }
          .crypto-pay-receipt-total { color: var(--text); font-weight: 700; font-size: 14px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); }
          .crypto-pay-receipt-chain { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-mute); display: flex; align-items: center; gap: 6px; }
          @media (max-width: 980px) {
            .crypto-pay-banner { grid-template-columns: 1fr; }
            .crypto-pay-left { padding: 28px; }
            .crypto-pay-right { padding: 0 28px 28px; }
            .crypto-pay-perks { grid-template-columns: 1fr; }
          }
        `}</style>
      </section>
      <section style={{ padding: "20px 0 80px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {tiers.map((t) => (
              <div key={t.name} className="card" style={{ padding: 32, position: "relative", borderColor: t.highlighted ? "var(--purple-2)" : "var(--line)", boxShadow: t.highlighted ? "0 0 60px -20px var(--purple-glow)" : "none" }}>
                {t.highlighted && <div style={{ position: "absolute", top: -10, left: 24, background: "linear-gradient(180deg, var(--purple-2), var(--purple))", color: "#fff", fontSize: 11, padding: "4px 10px", borderRadius: 999, fontWeight: 600, letterSpacing: "0.05em" }}>POPULAR</div>}
                <div style={{ fontSize: 13, color: "var(--text-dim)", marginBottom: 4 }}>{t.tag}</div>
                <h3 style={{ fontSize: 28 }}>{t.name}</h3>
                <div style={{ marginTop: 20, marginBottom: 24 }}>
                  <span style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em" }}>{t.price}</span>
                  <span style={{ color: "var(--text-dim)", fontSize: 14 }}>{t.period}</span>
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, marginBottom: 24 }}>
                  {t.features.map((f) => (
                    <li key={f} style={{ display: "flex", gap: 10, fontSize: 13.5, color: "var(--text)" }}>
                      <span style={{ color: "var(--green)", fontWeight: 700 }}>✓</span>{f}
                    </li>
                  ))}
                </ul>
                <a className={t.highlighted ? "btn btn-primary" : "btn btn-ghost"} style={{ width: "100%", justifyContent: "center" }} href={resolveHref("pages/contact.html")}>{t.cta}</a>
              </div>
            ))}
          </div>
        </div>
      </section>
      <FAQ items={[
        { q: "Do you take a cut of my trading or payment volume?", a: "No. Antelope is a SaaS subscription. Provider contracts (PSPs, KYC vendors, LPs) are direct between you and them." },
        { q: "Can I pay in crypto?", a: "Yes. We accept USDT, USDC, BTC, ETH, SOL, BNB and other major assets across TRC20, ERC20, BEP20, Solana and Bitcoin. Annual prepay in crypto gets an additional 5% discount. Pricing is locked to EUR on the invoice — no volatility surprises." },
        { q: "What's included in onboarding?", a: "Implementation team, data migration, theming setup, KYC vendor introductions, payment provider intros, training. Most customers go live in 4–8 weeks." },
        { q: "Can I add modules over time?", a: "Yes. Most customers start with CRM + Client Area + Payments and add Mobile Trader, IB Suite, AI, etc. as they scale." },
        { q: "Is there a long-term contract?", a: "Annual contracts are standard, with a 30-day exit clause. Multi-year discounts available." },
      ]}/>
      <CTASection title="Get a custom quote for your operation." primary={{ label: "Talk to sales" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<PricingPage/>);