// Demandscape website — About (the one page where Rosroe steps forward)
function AboutPage({ onNav }) {
  const { Button, Badge, BracketFrame } = window.DemandscapeDesignSystem_0e6a32;
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();});

  const founders = [
  {
    name: 'Dr Jeremy Large',
    role: 'Senior Research Fellow at University of Oxford. Lecturer in Economics and Artificial Intelligence',
    points: [
    'Experienced hedge fund trader with a track record in global macro, FX, listed equity and commodity trading',
    'Fellow of St Hugh\u2019s College and previously All Souls College'],

    href: 'https://www.linkedin.com/in/jeremy-large-97493a20/'
  },
  {
    name: 'Andrew Skates',
    role: 'Technology entrepreneur with experience in retail, brand marketing and predictive analytics.',
    points: [
    'Founded, managed and exited two businesses.',
    'Most recently sold data science business, Sandtable (whose clients included Tesco, Diageo, Coca-Cola, NATO, Ford, BBC and Google), to WPP in 2020.'],

    href: 'https://www.linkedin.com/in/andrew-skates/'
  },
  {
    name: 'Dr Paul Mainwood',
    role: 'Head of Strategy at innocent drinks. Delivered 4x growth over tenure to become the largest European juice brand',
    points: [
    'Ex-McKinsey consultant specialising in consumer goods and grocery',
    'Academic background in statistical physics (Oxford & Princeton)'],

    href: 'https://www.linkedin.com/in/paul-mainwood-a27b1119/'
  }];


  return (
    <main>
      {/* ── HERO ─────────────────────────────────── */}
      <section className="container" style={{ paddingBlock: 'clamp(3rem,7vw,5rem)', textAlign: 'center' }}>
        <Badge variant="soft" bracket>About</Badge>
        <div className="hero__bracketwrap" style={{ marginTop: 24 }}>
          <BracketFrame stroke={10} arm={36} padding="1.9rem clamp(1.5rem,4vw,3rem)">
            <h1 style={{ fontSize: 'var(--fs-display-md)', letterSpacing: '-0.02em', color: 'var(--ds-navy)' }}>
              Built by Rosroe
            </h1>
          </BracketFrame>
        </div>
        <p className="hero__lead">
          Rosroe is a technology company developing predictive AI products for grocery retail.
        </p>
      </section>

      {/* ── PROVENANCE / PURPOSE ─────────────────── */}
      <section className="container section" style={{ paddingTop: 0 }}>
        <div className="split" style={{ alignItems: 'start', gap: '3.5rem' }}>
          <div>
            <span className="eyebrow"><span className="br">[</span> Provenance <span className="br">]</span></span>
            <h2 className="mt-5" style={{ fontSize: 'var(--fs-h2)', color: 'var(--ds-navy)' }}>Original research</h2>
            <div className="prose mt-5">
              <p>Our technology is developed from research at the University of Oxford applying the latest AI methods and technologies to demand prediction at scale.
              </p>
            </div>
          </div>
          <div>
            <span className="eyebrow"><span className="br">[</span> Purpose <span className="br">]</span></span>
            <h2 className="mt-5" style={{ fontSize: 'var(--fs-h2)', color: 'var(--ds-navy)' }}>Better decision making</h2>
            <div className="prose mt-5">
              <p>We build tools to provide a better understanding of what might happen in the future so that our clients can act with foresight rather than react to events.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ── FOUNDERS ─────────────────────────────── */}
      <section className="band--navy">
        <div className="container section">
          <div className="sec-head">
            <span className="eyebrow"><span className="br">[</span> Leadership <span className="br">]</span></span>
            <h2 style={{ marginTop: 14, fontSize: 'var(--fs-h1)' }}>Research, retail and operating depth</h2>
            <p className="standfirst">Academic foundations from Oxford, paired with data-science and grocery operating experience.</p>
          </div>
          <div className="founders mt-7">
            {founders.map((f) =>
            <div className="founder" key={f.name} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.14)', padding: '1.75rem 1.6rem' }}>
                <h3 style={{ color: '#fff' }}>{f.name}</h3>
                <div className="role" style={{ color: 'var(--ds-blue-200)' }}>{f.role}</div>
                <ul>
                  {f.points.map((p) =>
                <li key={p} style={{ color: 'rgba(255,255,255,.82)' }}>{p}</li>
                )}
                </ul>
                <a className="li" href={f.href} target="_blank" rel="noreferrer" style={{ color: 'var(--ds-blue-200)' }}>
                  <img src={window.__resources && window.__resources.liLogo || "assets/LI-In-Bug.png"} alt="LinkedIn" style={{ width: 20, height: 20, display: 'block' }} />
                </a>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── CTA ──────────────────────────────────── */}
      <section className="container section">
        <div className="sec-head center">
          <h2 style={{ fontSize: 'var(--fs-display-md)', color: 'var(--ds-navy)' }}>Talk to us</h2>
          <p className="standfirst" style={{ marginInline: 'auto' }}>
            See the digital twin in action, or get in touch directly.
          </p>
        </div>
        <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="primary" size="lg" onClick={() => onNav('demo')}>Request a demo</Button>
          <Button variant="secondary" size="lg" as="a" href="mailto:hello@rosroe.com">hello@rosroe.com</Button>
        </div>
      </section>
    </main>);

}
window.AboutPage = AboutPage;