// Press — coverage, news, media kit
function PressPage() {
  const articles = [
    { src: "Finance Magnates", date: "March 2026", title: "Antelope reaches 200 customers as broker-tech consolidates", tag: "Coverage", c: "#7A52FF" },
    { src: "FinanceFeeds", date: "February 2026", title: "Why brokers are replacing 'CRM-plus-bolt-ons' with operating systems", tag: "Feature", c: "#F118B2" },
    { src: "LeapRate", date: "January 2026", title: "Antelope opens New York office, doubles down on the Americas", tag: "News", c: "#FFB000" },
    { src: "The Block", date: "December 2025", title: "Crypto exchanges turn to Antelope for matching engines and listings governance", tag: "Coverage", c: "#26A17B" },
    { src: "Prop Firm Match", date: "November 2025", title: "Inside the platform 40+ prop firms quietly run on", tag: "Feature", c: "#FF7A45" },
    { src: "Finance Magnates", date: "October 2025", title: "Antelope ships MiCA-shaped flows ahead of EU enforcement deadline", tag: "News", c: "#24A1DE" },
    { src: "FX Empire", date: "September 2025", title: "Limassol-based Antelope crosses 100 employees, hires across three offices", tag: "News", c: "#7A52FF" },
    { src: "Hedgeweek", date: "August 2025", title: "From Excel to AI: how trading-company ops teams modernized in 18 months", tag: "Feature", c: "#F118B2" },
  ];

  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Company" }, { label: "Press" }]}
        eyebrow="Press & Media"
        title={<>The press room for <span className="gradient-text">the operating system</span> for trading companies.</>}
        sub="Antelope is regularly covered across industry trade press — Finance Magnates, FinanceFeeds, LeapRate, The Block, FX Empire and others. Press contacts, media kit and recent coverage below."
        ctaPrimary={{ label: "Press inquiries", href: "pages/contact.html" }}
        ctaSecondary={{ label: "Download media kit", href: "#kit" }}
      />

      <StatRow items={[
        { v: "200+", l: "Customers featured in coverage" },
        { v: "12+", l: "Trade-press features last 12 months" },
        { v: "3", l: "Offices · Limassol, Dubai, New York" },
        { v: "Since 2016", l: "Building in public" },
      ]}/>

      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Recent coverage</span>
            <h2>What the trade press is saying.</h2>
            <p>A selection of recent features and news mentions. Search "Antelope Systems" on Google for the full archive.</p>
          </div>
          <div className="press-list">
            {articles.map((a, i) => (
              <a key={i} href="#" className="press-item" style={{ "--c": a.c }}>
                <div className="press-side">
                  <span className="press-tag">{a.tag}</span>
                  <span className="press-date mono">{a.date}</span>
                </div>
                <div className="press-main">
                  <div className="press-src">{a.src}</div>
                  <div className="press-title">{a.title}</div>
                </div>
                <span className="press-arr">↗</span>
              </a>
            ))}
          </div>
        </div>
        <style>{`
          .press-list { display: flex; flex-direction: column; gap: 8px; margin-top: 36px; }
          .press-item { display: grid; grid-template-columns: 200px 1fr 40px; gap: 24px; align-items: center; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 12px; transition: transform .15s, background .15s; }
          .press-item:hover { background: var(--surface-2); transform: translateX(4px); }
          .press-side { display: flex; flex-direction: column; gap: 6px; }
          .press-tag { display: inline-block; padding: 3px 8px; background: color-mix(in oklab, var(--c) 18%, transparent); color: var(--c); border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; width: fit-content; }
          .press-date { font-size: 12px; color: var(--text-mute); }
          .press-src { font-size: 12px; color: var(--text-mute); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
          .press-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text); letter-spacing: -0.005em; }
          .press-arr { color: var(--c); font-size: 18px; }
          @media (max-width: 700px) {
            .press-item { grid-template-columns: 1fr; gap: 12px; }
            .press-arr { display: none; }
          }
        `}</style>
      </section>

      <section id="kit" className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Media kit</span>
            <h2>Logos, screenshots, leadership bios.</h2>
          </div>
          <div className="press-kit">
            {[
              { t: "Logos & wordmarks", d: "Light + dark, SVG + PNG. Print-ready and web-optimized.", c: "#7A52FF" },
              { t: "Product screenshots", d: "CRM, Client Area, BI dashboards, Mobile Trader. Hi-res, attribution-ready.", c: "#F118B2" },
              { t: "Founder & leadership bios", d: "Headshots and short bios for our CEO, CTO and exec team.", c: "#FFB000" },
              { t: "Company fact sheet", d: "Customer count, employee count, offices, milestones — kept current.", c: "#2BD974" },
            ].map((k) => (
              <a key={k.t} href="pages/contact.html" className="press-kit-card" style={{ "--c": k.c }}>
                <div className="press-kit-mark" style={{ background: `${k.c}25`, color: k.c }}>↓</div>
                <div className="press-kit-t">{k.t}</div>
                <div className="press-kit-d">{k.d}</div>
              </a>
            ))}
          </div>
        </div>
        <style>{`
          .press-kit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
          .press-kit-card { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: transform .15s, border-color .15s; display: block; }
          .press-kit-card:hover { transform: translateY(-3px); border-color: var(--c); }
          .press-kit-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; font-weight: 700; margin-bottom: 14px; }
          .press-kit-t { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
          .press-kit-d { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
          @media (max-width: 980px) { .press-kit { grid-template-columns: 1fr 1fr; } }
          @media (max-width: 560px) { .press-kit { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <CTASection title="Press inquiry? We'll get back same business day." primary={{ label: "Email press team", href: "pages/contact.html" }} secondary={{ label: "Download media kit", href: "#kit" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<PressPage/>);