// Online Academies solution page
function AcademiesPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Solutions" }, { label: "Online Academies" }]}
        eyebrow="Solution · Online Academies"
        title={<>Trading academies, <span className="gradient-text">monetized properly</span>.</>}
        sub="CRM, Client Area, subscription billing, content gating and community — for academies, signal services and education-led brokers."
        ctaPrimary={{ label: "Book a demo" }}
        visual={<AcademyVisual/>}
      />
      <FeatureGrid
        eyebrow="Capabilities"
        title="From course sale to community to broker referral."
        features={[
          { t: "Subscription billing", d: "Monthly, annual, multi-tier — with cards, crypto and APMs." },
          { t: "Content gating", d: "Course, signal and community access tied to subscription tier." },
          { t: "CRM for education", d: "Track sign-ups, churn, NPS, course completion." },
          { t: "Community", d: "Discord/Telegram bot integrations for tier-based access." },
          { t: "Signal distribution", d: "Push signals to subscribers; track performance." },
          { t: "Broker referral", d: "Refer subscribers to your in-house or partner broker (IB or RevShare)." },
          { t: "Compliance disclosures", d: "Per-jurisdiction risk warnings, refund policies, terms." },
          { t: "Trader apps", d: "Optional Mobile / Web Trader for the education-to-broker funnel." },
          { t: "BI for academies", d: "MRR, churn, course completion, signal performance." },
        ]}
      />
      <CTASection title="Run an academy that pays its bills." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<AcademiesPage/>);