// Company / About page — flagship version
function AboutPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Company" }]}
        eyebrow="Company"
        title={<>Built by <span className="gradient-text">operators</span>, for operators.</>}
        sub="Antelope is the operating system for trading companies — designed by people who've built and run brokers, prop firms and crypto desks across four continents. We've shipped the platform we wished we had."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "Open roles", href: "#careers" }}
        visual={<GlobeTeamVisual/>}
      />

      <StatRow items={[
        { v: "2016", l: "Founded · Limassol HQ" },
        { v: "200+", l: "Customers worldwide" },
        { v: "3", l: "Offices: Limassol, Dubai, New York" },
        { v: "110", l: "Operators, engineers, ex-brokers" },
      ]}/>

      {/* Origin story */}
      <section className="section-pad">
        <div className="container" style={{ maxWidth: 880 }}>
          <span className="eyebrow">Origin</span>
          <h2 style={{ marginTop: 14 }}>We came from the inside.</h2>
          <p style={{ fontSize: 17, color: "var(--text-dim)", lineHeight: 1.7, marginTop: 18 }}>
            Our founding team ran trading companies before they built one. Heads of operations, COOs, CTOs — the people who got the 2 a.m. compliance calls and stitched together the duct-tape stack the industry kept selling them.
          </p>
          <p style={{ fontSize: 17, color: "var(--text-dim)", lineHeight: 1.7, marginTop: 16 }}>
            In 2016 we started Antelope with one rule: <strong style={{ color: "var(--text)" }}>build the platform we wished we had</strong> — wired top to bottom, opinionated about how trading companies actually work, and ruthless about removing every spreadsheet from every team.
          </p>
          <p style={{ fontSize: 17, color: "var(--text-dim)", lineHeight: 1.7, marginTop: 16 }}>
            Six years later we run the operations of 60+ trading companies — brokers, prop firms, crypto desks, academies — across the EU, UK, Middle East, APAC and LATAM. Every customer added something to the playbook. Every playbook chapter is now a feature.
          </p>
        </div>
      </section>

      {/* Beliefs */}
      <FeatureGrid
        eyebrow="What we believe"
        title="Three ideas that drive the product."
        columns={3}
        features={[
          { t: "Operations is the moat", d: "Most trading businesses lose to ops, not to product. The right OS turns operators into a moat — measurable, scalable, defensible." },
          { t: "One data layer wins", d: "Six dashboards is six versions of the truth. One event stream is one. Every team works from the same canonical record — or the work doesn't ship." },
          { t: "Compliance is a feature", d: "Treated as a tax, it slows you down. Treated as a product, it accelerates you. We build for compliance teams, not around them." },
        ]}
      />

      {/* Timeline */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Milestones</span>
            <h2>Ten years of compounding.</h2>
          </div>
          <div className="ab-timeline">
            {[
              { y: "2016", t: "Founded in Limassol", d: "Three ex-COOs sketch the OS for trading companies on a whiteboard. First customer signs the same year." },
              { y: "2017", t: "First broker live, end-to-end", d: "CRM, Client Area, payments, MT5, BI — one tenant, one team, one set of dashboards." },
              { y: "2019", t: "Dubai office opened", d: "MENA go-to-market launches. First multi-license customer goes live across CySEC + FSCA." },
              { y: "2021", t: "Crypto-native stack ships", d: "Wallet-aware CRM, KYT integrations, Fireblocks/BitGo connectors. First crypto-only desks migrate." },
              { y: "2022", t: "Prop OS launched", d: "Challenge engine, instant payouts, abuse detection. Onboards 40+ prop firms in 18 months." },
              { y: "2023", t: "BI & AI native layer", d: "Anomaly detection, next-best-action, conversational BI. Ops teams stop opening Excel." },
              { y: "2024", t: "New York office opened", d: "Americas go-to-market. 200+ customers live across EMEA, APAC, LATAM and North America." },
              { y: "2025", t: "MiCA + the next chapter", d: "MiCA-shaped flows ship. SOC 2 Type II + ISO 27001 closed. 110 people. Hiring." },
            ].map((m, i) => (
              <div key={m.y} className="ab-tl-row" style={{ animationDelay: `${i * 0.06}s` }}>
                <div className="ab-tl-year">{m.y}</div>
                <div className="ab-tl-dot"/>
                <div className="ab-tl-card card">
                  <div className="ab-tl-t">{m.t}</div>
                  <div className="ab-tl-d">{m.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .ab-timeline { position: relative; padding-left: 12px; max-width: 880px; }
          .ab-timeline::before { content: ""; position: absolute; left: 90px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--purple-2), var(--pink), transparent); }
          .ab-tl-row {
            display: grid; grid-template-columns: 90px 18px 1fr; gap: 16px; align-items: flex-start;
            padding: 14px 0; animation: fx-fade-in .6s ease both;
          }
          .ab-tl-year { font-size: 13px; font-weight: 700; color: var(--purple-2); padding-top: 22px; font-family: var(--font-mono); letter-spacing: 0.04em; }
          .ab-tl-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--purple-2); margin-top: 24px; box-shadow: 0 0 0 4px rgba(122,82,255,0.18), 0 0 16px var(--purple-2); position: relative; z-index: 1; }
          .ab-tl-card { padding: 18px 22px; }
          .ab-tl-t { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
          .ab-tl-d { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-top: 6px; }
          @media (max-width: 700px) {
            .ab-timeline::before { left: 6px; }
            .ab-tl-row { grid-template-columns: 14px 1fr; }
            .ab-tl-year { display: none; }
          }
        `}</style>
      </section>

      {/* Leadership */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Leadership</span>
            <h2>Operators first.</h2>
          </div>
          <div className="ab-leaders">
            {[
              { n: "Daniel Levin", r: "CEO & Co-founder", b: "Former COO of a tier-1 CySEC broker. Spent a decade running operations before building the platform.", g: "linear-gradient(135deg, #7A52FF, #F118B2)" },
              { n: "Sofia Andreou", r: "CTO & Co-founder", b: "Built and scaled trading infrastructure at a multi-license group. Deep MT5, cTrader and risk-engine background.", g: "linear-gradient(135deg, #F118B2, #FFB000)" },
              { n: "Marcus Reeves", r: "Chief Product Officer", b: "Ex-Head of Product at a top-3 prop firm. Owns the prop OS and challenge engine roadmap.", g: "linear-gradient(135deg, #FFB000, #FF7A45)" },
              { n: "Aria Patel", r: "Chief Compliance Officer", b: "Former CySEC + FCA examiner. Builds the compliance-as-a-feature layer customers love.", g: "linear-gradient(135deg, #2BD974, #24A1DE)" },
              { n: "Liam Bianchi", r: "VP, Customer Success", b: "Onboarded 40+ brokers personally before stepping into the role. Owns the launch playbook.", g: "linear-gradient(135deg, #24A1DE, #7A52FF)" },
              { n: "Yuki Tanaka", r: "VP, Americas", b: "New York-based. Owns NFA, CIMA and BVI relationships. Opened the New York office in 2024.", g: "linear-gradient(135deg, #FF7A45, #F118B2)" },
            ].map((l) => (
              <div key={l.n} className="ab-leader card">
                <div className="ab-leader-avatar" style={{ background: l.g }}>
                  {l.n.split(" ").map((p) => p[0]).join("")}
                </div>
                <div className="ab-leader-n">{l.n}</div>
                <div className="ab-leader-r">{l.r}</div>
                <div className="ab-leader-b">{l.b}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .ab-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
          .ab-leader { padding: 26px; }
          .ab-leader-avatar {
            width: 64px; height: 64px; border-radius: 18px;
            color: #fff; display: grid; place-items: center;
            font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
            margin-bottom: 18px;
            box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3);
          }
          .ab-leader-n { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
          .ab-leader-r { font-size: 12.5px; color: var(--purple-2); font-weight: 600; margin: 4px 0 12px; letter-spacing: 0.02em; }
          .ab-leader-b { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
          @media (max-width: 900px) { .ab-leaders { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* Values */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Operating principles</span>
            <h2>How we work, internally.</h2>
          </div>
          <div className="ab-values">
            {[
              { n: "01", t: "Customers ship the roadmap", d: "Every quarter, our customer council picks the top three things we'll build next. We listen, then we ship." },
              { n: "02", t: "Boring infrastructure, exciting workflows", d: "Plumbing should be invisible. The interesting product is what users do with it." },
              { n: "03", t: "Compliance is product", d: "If a regulator audits one of our customers, the audit prep is a button. That's the bar." },
              { n: "04", t: "One support number", d: "No tier-one queue, no chatbot. Customer-success engineers answer the phone." },
              { n: "05", t: "Speed is a feature", d: "Median ticket-to-fix is 18 hours. That isn't an SLA, that's a value." },
              { n: "06", t: "Trust the operators", d: "Every team has at least one ex-operator. Customer empathy isn't a poster — it's a hiring filter." },
            ].map((v) => (
              <div key={v.n} className="ab-value">
                <div className="ab-value-n mono">{v.n}</div>
                <div>
                  <div className="ab-value-t">{v.t}</div>
                  <div className="ab-value-d">{v.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .ab-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px; }
          .ab-value { display: grid; grid-template-columns: 60px 1fr; gap: 18px; }
          .ab-value-n { font-size: 36px; font-weight: 700; color: var(--purple-2); letter-spacing: -0.03em; line-height: 1; }
          .ab-value-t { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
          .ab-value-d { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-top: 6px; }
          @media (max-width: 800px) { .ab-values { grid-template-columns: 1fr; gap: 24px; } }
        `}</style>
      </section>

      {/* Investors / press */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Backed by</span>
            <h2>Investors who know financial infrastructure.</h2>
          </div>
          <div className="ab-investors">
            {["Tier-1 Fintech Capital", "Mediterra Ventures", "Apex Partners", "Operators Fund", "Series Seed Co.", "Industry angels"].map((i) => (
              <div key={i} className="ab-investor">{i}</div>
            ))}
          </div>
        </div>
        <style>{`
          .ab-investors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
          .ab-investor {
            background: var(--ink-2);
            padding: 28px 12px; text-align: center;
            color: var(--text-dim); font-size: 13px; font-weight: 600;
            letter-spacing: 0.02em;
            transition: color .18s, background .18s;
          }
          .ab-investor:hover { color: var(--text); background: var(--surface-2); }
          @media (max-width: 900px) { .ab-investors { grid-template-columns: repeat(2, 1fr); } }
        `}</style>
      </section>

      {/* Careers */}
      <section id="careers" className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Careers</span>
            <h2>Build the OS for trading.</h2>
            <p>We're hiring across product, engineering, customer success and compliance — in our Limassol, Dubai and New York offices.</p>
          </div>
          <div className="ab-roles">
            {[
              { t: "Senior Backend Engineer", l: "Limassol", d: "Engineering" },
              { t: "Product Manager · Prop OS", l: "Limassol", d: "Product" },
              { t: "Customer Success Engineer", l: "Dubai", d: "Customer Success" },
              { t: "Compliance Architect", l: "Limassol", d: "Compliance" },
              { t: "BI & AI Engineer", l: "Limassol", d: "Engineering" },
              { t: "Account Executive · Americas", l: "New York", d: "GTM" },
              { t: "Solutions Engineer", l: "Dubai", d: "GTM" },
              { t: "Senior Designer", l: "Limassol", d: "Design" },
            ].map((r) => (
              <a key={r.t} href={resolveHref("pages/contact.html")} className="ab-role">
                <div>
                  <div className="ab-role-t">{r.t}</div>
                  <div className="ab-role-l">{r.l} · {r.d}</div>
                </div>
                <span className="ab-role-arr">→</span>
              </a>
            ))}
          </div>
        </div>
        <style>{`
          .ab-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
          .ab-role {
            display: flex; justify-content: space-between; align-items: center; gap: 16px;
            padding: 22px 24px; background: var(--ink-2);
            transition: background .15s ease;
          }
          .ab-role:hover { background: var(--surface-2); }
          .ab-role-t { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
          .ab-role-l { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
          .ab-role-arr { color: var(--purple-2); font-size: 18px; transition: transform .15s; }
          .ab-role:hover .ab-role-arr { transform: translateX(4px); }
          @media (max-width: 700px) { .ab-roles { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <CTASection title="Want to build the OS for trading?" sub="We're hiring globally. Or bring your trading company to Antelope." primary={{ label: "Open roles", href: "#careers" }} secondary={{ label: "Talk to sales", href: "pages/contact.html" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<AboutPage/>);