/* About page */
function AboutPage() {
  const team = [
    { initials: 'MG', name: 'Moritz Gentner', role: 'Founder & CEO' },
    { initials: '—',  name: 'TBA',            role: 'CTO' },
  ];
  const facts = [
    { k: 'BACKED BY',  v: 'BAFA INVEST', img: 'src/assets/bafa-invest-logo.png',
      alt: 'BAFA INVEST' },
    { k: 'NETWORK',    v: 'TUM Venture Labs', img: 'src/assets/tum-venture-labs-logo.png',
      alt: 'TUM Venture Labs' },
    { k: 'COMPLIANCE', v: 'GDPR · EU Data Residency' },
    { k: 'FOUNDED',    v: '2025' },
  ];
  return (
    <div className="min-h-screen flex flex-col bg-paper">
      <PublicNav/>
      <main className="flex-1">
        <section className="border-b border-line">
          <div className="mx-auto max-w-[1100px] px-8 lg:px-16 pt-24 pb-20">
            <div className="mono text-[10px] text-mute">ABOUT</div>
            <h1 className="mt-4 text-[44px] sm:text-[60px] leading-[1.04] font-semibold tracking-[-0.025em] max-w-3xl">
              Built around a concrete <span className="grad-word">industry need</span>.
            </h1>
            <div className="mt-12 grid grid-cols-1 md:grid-cols-12 gap-10">
              <div className="md:col-span-7 space-y-5 text-[16px] text-ink/85 leading-relaxed">
                <p>
                  GenData was built around a concrete need experienced during the founder's work as a management consultant in the automotive industry — extracting the causal drivers behind customer behavior at population scale.
                </p>
                <p>
                  We combine modern Causal AI methods (DoWhy, causal embeddings, LLMs as building blocks) with deep industry expertise. The output: defensible, quantified drivers enterprises can actually steer with.
                </p>
                <p className="text-mute">
                  <span className="text-ink">Our focus</span> — turn unstructured customer text into causal evidence ready for the boardroom.
                </p>
              </div>
              <div className="md:col-span-5 md:pl-6 md:border-l border-line">
                <dl className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 gap-y-6">
                  {facts.map(f => (
                    <div key={f.k}>
                      <dt className="mono text-[10px] text-mute">{f.k}</dt>
                      <dd className="mt-1.5 text-[14px] text-ink">
                        {f.img
                          ? <img
                              src={f.img} alt={f.alt}
                              style={{ height: 72, width: 'auto', display: 'block' }}
                            />
                          : f.v}
                      </dd>
                    </div>
                  ))}
                </dl>
              </div>
            </div>
          </div>
        </section>

        <section>
          <div className="mx-auto max-w-[1100px] px-8 lg:px-16 py-24">
            <div className="flex items-end justify-between flex-wrap gap-4">
              <div>
                <div className="mono text-[10px] text-mute">TEAM</div>
                <h2 className="mt-3 text-[32px] sm:text-[40px] font-semibold tracking-[-0.022em]">Founders.</h2>
              </div>
              <span className="mono text-[10px] text-mute">02 · CORE</span>
            </div>
            <div className="mt-14 grid grid-cols-1 md:grid-cols-2 gap-4 max-w-[760px]">
              {team.map(p => (
                <div key={p.name} className="rounded-2xl border border-line bg-paper p-7 min-h-[220px] flex flex-col">
                  <div className="grid place-items-center h-14 w-14 rounded-full text-paper text-[15px] font-semibold tracking-tight" style={{ background: 'linear-gradient(135deg, #1E3A8A, #22D3EE)' }}>
                    {p.initials}
                  </div>
                  <div className="mt-auto pt-10">
                    <div className="text-[18px] font-semibold tracking-[-0.012em]">{p.name}</div>
                    <div className="mt-1 mono text-[10px] text-mute">{p.role}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
      <Footer/>
    </div>
  );
}
window.AboutPage = AboutPage;