const pillars = [
  { title: 'Speed without shortcuts', desc: 'Professional-grade outputs in minutes. No templates, no copy-paste — real structured generation.' },
  { title: 'Built for practitioners', desc: 'Every feature exists because a grant writer asked for it. No feature exists because a PM thought it was clever.' },
  { title: 'Accessible by default', desc: 'Free tier forever. No signup wall. If you\'re writing grants for a small NGO, you shouldn\'t need a budget line to access tools.' },
];

const stats = [
  { value: '120+', label: 'Organisations served' },
  { value: '30', label: 'Countries' },
  { value: '4', label: 'Professional-grade tools' },
  { value: '<2 min', label: 'Average document time' },
];

export default function AboutPage() {
  return (
    <>
      {/* Hero */}
      <section className="bg-white">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">About</p>
          <h1 className="text-4xl font-bold mb-4">We build tools for people who write grants.</h1>
          <p className="text-muted max-w-lg">
            NGO Toolkit Lab exists because grant writing is important work — and the tooling around it has been stuck in 2005.
          </p>
        </div>
      </section>

      {/* Origin note */}
      <section className="bg-warm">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <div className="max-w-2xl">
            <p className="text-xs tracking-widest font-semibold text-accent uppercase mb-6">How it started</p>
            <div className="border-l-4 border-accent pl-6">
              <p className="italic text-muted leading-relaxed mb-4">
                Muneeb had been working in and around the international development sector long enough to know the pattern: talented programme staff spending three days on a logframe that should take three hours. The sector knowledge was there. The writing ability was there. The tooling wasn't.
              </p>
              <p className="italic text-muted leading-relaxed mb-4">
                He pushed a small team to build the thing he kept wishing existed — grant writing tools that actually understood how the sector works, not generic AI wrappers with a charity skin on top.
              </p>
              <p className="italic text-muted leading-relaxed">
                That's what NGO Toolkit Lab is. Built by practitioners, for practitioners. Muneeb stays in the background — focused on making sure the team ships the right things, not on being the face of it.
              </p>
            </div>
            <p className="mt-6 text-sm font-semibold">Muneeb Bin Yousuf</p>
            <p className="text-xs text-gray-500">Operator & Adviser, NGO Toolkit Lab</p>
          </div>
        </div>
      </section>

      {/* Mission pillars */}
      <section className="bg-white">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <h2 className="text-3xl font-bold mb-12">What we believe</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {pillars.map((p, i) => (
              <div key={i}>
                <h3 className="font-bold text-lg mb-2">{p.title}</h3>
                <p className="text-muted text-sm">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* By the numbers */}
      <section className="bg-sand">
        <div className="max-w-6xl mx-auto px-6 py-24 text-center">
          <h2 className="text-3xl font-bold mb-12">By the numbers</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((s, i) => (
              <div key={i}>
                <p className="text-3xl font-bold text-accent">{s.value}</p>
                <p className="text-muted text-sm mt-1">{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-dark text-white">
        <div className="max-w-6xl mx-auto px-6 py-24 text-center">
          <h2 className="text-3xl font-bold mb-4">Try the tools. Judge the work.</h2>
          <p className="text-gray-300 mb-8 max-w-md mx-auto">No pitch deck. No demo call. Just open a tool and see what it builds.</p>
          <a href="/logframe" className="inline-block bg-accent text-white font-medium px-6 py-3 rounded-md hover:bg-accent-dark transition-colors">
            Try free →
          </a>
        </div>
      </section>
    </>
  );
}
