// About page
function AboutPage({ onNavigate, openCaseStudy }) {
  return (
    <div className="page">
      <section className="hero" style={{ paddingTop: 100, paddingBottom: 60 }}>
        <div className="aurora"><div className="blob"></div></div>
        <div className="aurora-grid"></div>
        <div className="container">
          <span className="eyebrow rise" data-d="1">Who we are</span>
          <h1 className="h-display rise" data-d="2" style={{ marginTop: 24, maxWidth: 1100 }}>
            Strong opinions<br/><em style={{ fontFamily: "Instrument Serif, serif", fontWeight: 400 }}>about software.</em>
          </h1>
        </div>
      </section>

      <section style={{ paddingTop: 60 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
            <div>
              <span className="eyebrow">Our story</span>
              <h2 className="h-medium" style={{ marginTop: 16 }}>Born from frustration. Refined since 2014.</h2>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 20, color: "var(--fg-muted)", fontSize: 17, lineHeight: 1.6 }}>
              <p>We were the engineers building the same foundations — auth flows, audit trails, search, billing — for the hundredth time. Every project. Every client. The interesting work was always the last 20%.</p>
              <p>So we built a platform that turned the boring 80% into a visual primitive. Hundreds of UK applications later, the platform is the product, and it has become a partner to NHS trusts, retailers and government.</p>
              <p>We're founder-led, working with a trusted network of specialist contractors and delivery partners we've built up since 2014. When you engage us, you deal directly with the people making the decisions — not an account manager relaying messages.</p>
              <p>We don't do hype. We don't do framework-of-the-month. We ship reliable software for serious institutions, then maintain it for a decade.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section>
        <div className="container">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            border: "1px solid var(--line)",
            borderRadius: 16,
            overflow: "hidden",
            background: "var(--bg-elev)",
          }}>
            {[
              ["2014", "building since", ""],
              ["300+", "apps shipped", ""],
              ["99.998%", "platform", "uptime"],
            ].map(([n, l1, l2]) => (
              <div key={n} style={{ padding: 32, borderRight: "1px solid var(--line)" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 64, fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 1 }}>{n}</div>
                <div className="mono" style={{ color: "var(--fg-faint)", marginTop: 12 }}>{l1.toUpperCase()} {l2.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ background: "var(--bg-sunken)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <span className="eyebrow">What we believe</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 56, maxWidth: 800 }}>
            Six principles. <span style={{ color: "var(--fg-faint)" }}>One platform.</span>
          </h2>
          <div className="grid-3">
            {[
              ["Boring is beautiful", "Software should be invisible to the user and predictable to the operator."],
              ["Lock-in is a bug", "Your data, exports and IP are yours. Leave whenever you like — we'd rather you stayed by choice."],
              ["Foundations are solved", "Auth, audit, billing, search — these are primitives, not projects."],
              ["Security isn't optional", "We build to OWASP ASVS, retain CREST-accredited testers, and treat zero-days as P0."],
              ["Long support beats new features", "Apps we built ten years ago still receive updates."],
              ["Integrated ITSM", "Support, incidents and changes are tracked in the platform itself — not a disconnected inbox."],
            ].map(([t, d]) => (
              <div key={t} className="card">
                <h3 className="h-small" style={{ marginBottom: 8 }}>{t}</h3>
                <p className="body" style={{ fontSize: 14 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Case studies — hidden
      <section>
        <div className="container">
          <span className="eyebrow">Selected work</span>
          <h2 className="h-large" style={{ marginTop: 16, marginBottom: 48 }}>Software shipped.</h2>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {[
              ["OnePortal", "First-aid incident recording for UK schools — multi-tenant, GDPR-grade.", "2024", "oneportal"],
              ["Halliday Lighting", "Asset tracking and digital site-maintenance for the UK's only dedicated sports-lighting specialist.", "2024", "halliday"],
              ["Compliant EPC", "Quote, invoice and release certificates — from one back-office.", "2023", "compliantepc"],
              ["LeapHub", "Work-experience applications, processed end-to-end.", "2023", "leaphub"],
            ].map(([client, desc, when, csid], i) => (
              <button
                key={client}
                onClick={() => csid && openCaseStudy(csid)}
                disabled={!csid}
                style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 2fr auto auto",
                  gap: 32,
                  padding: "28px 0",
                  borderTop: "1px solid var(--line)",
                  alignItems: "center",
                  textAlign: "left",
                  cursor: csid ? "pointer" : "default",
                  transition: "padding 0.2s",
                  borderBottom: i === 3 ? "1px solid var(--line)" : "none",
                  background: "transparent",
                  border: "none",
                }}
                onMouseEnter={(e) => csid && (e.currentTarget.style.paddingLeft = "12px")}
                onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0"}
              >
                <div className="h-small">{client}</div>
                <div className="body" style={{ fontSize: 15 }}>{desc}</div>
                <span className="mono" style={{ color: "var(--fg-faint)" }}>{when}</span>
                <span style={{ fontSize: 18, color: csid ? "var(--fg)" : "var(--fg-faint)" }}>→</span>
              </button>
            ))}
          </div>
        </div>
      </section>
      */}

      {/* CTA */}
      <section className="section-dark">
        <div className="container" style={{ textAlign: "center" }}>
          <h2 className="h-large" style={{ maxWidth: 700, margin: "0 auto 24px" }}>Want to chat? <em style={{ fontFamily: "Instrument Serif, serif", fontWeight: 400 }}>So do we.</em></h2>
          <button className="btn btn-accent" onClick={() => onNavigate("contact")}>Get in touch →</button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });