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>

      {/* Founder 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">From the founder</p>
            <div className="border-l-4 border-accent pl-6">
              <p className="italic text-muted leading-relaxed mb-4">
                I spent years watching talented programme managers burn weekends on logframes and theories of change — documents that should take hours, not days. The knowledge was there. The sector expertise was there. What was missing was tooling that respected their time.
              </p>
              <p className="italic text-muted leading-relaxed mb-4">
                NGO Toolkit Lab started as a logframe generator I built for a friend submitting a DFID proposal. She finished in twenty minutes instead of three days. That felt worth pursuing.
              </p>
              <p className="italic text-muted leading-relaxed">
                We're a small team. We ship tools that work. If something's broken or missing, tell us — we fix things fast.
              </p>
            </div>
            <p className="mt-6 text-sm font-semibold">Omair</p>
            <p className="text-xs text-gray-500">Founder, 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>
    </>
  );
}