import Image from 'next/image';

export default function Home() {
  return (
    <>
      {/* ── 1. Hero ── */}
      <section className="bg-white">
        <div className="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
          <div>
            <p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
              Grant writing tools
            </p>
            <h1 className="text-4xl md:text-5xl font-bold leading-tight mb-6">
              Finish the logframe.<br />
              Get your evening back.
            </h1>
            <p className="text-lg text-muted mb-8 max-w-md">
              Professional-grade grant documents — logframes, theories of change, SMART indicators, funder rewrites — finished in minutes, not days.
            </p>
            <div className="flex gap-4 mb-8">
              <a
                href="/logframe"
                className="bg-accent text-white font-medium px-6 py-3 rounded-md hover:bg-accent-dark transition-colors"
              >
                Try the Logframe Generator
              </a>
              <a
                href="#tools"
                className="border border-accent text-accent font-medium px-6 py-3 rounded-md hover:bg-accent-light transition-colors"
              >
                See all tools
              </a>
            </div>
            <p className="text-sm text-muted">
              Trusted by 120+ organisations across 30 countries. No signup required for your first document.
            </p>
          </div>
          <div>
            <Image
              src="/images/hero-desk.jpg"
              alt="Laptop on a clean desk with warm lighting"
              width={640}
              height={480}
              className="rounded-xl w-full h-auto"
              priority
            />
          </div>
        </div>
      </section>

      {/* ── 2. Why we built this ── */}
      <section className="bg-dark text-white">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <p className="text-xs tracking-widest font-semibold text-accent-light uppercase mb-6">Why we built this</p>

          {/* Founder note */}
          <div className="border-l-4 border-accent pl-6 max-w-2xl mb-16">
            <p className="italic text-gray-300 leading-relaxed">
              I watched talented programme managers burn weekends on logframes — documents that should take hours, not days.
              The sector expertise was there. The tooling wasn't. So we built it.
            </p>
            <p className="mt-4 text-sm font-semibold text-white">Omair, Founder</p>
          </div>

          {/* Practitioner pain cards */}
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { quote: 'I spent three days building a logframe from scratch for a £50k bid. We didn\'t even get shortlisted.', author: 'Programme Manager, East Africa' },
              { quote: 'Every funder wants a different format. I rewrite the same theory of change four times a quarter.', author: 'Grants Lead, UK-based INGO' },
              { quote: 'My indicators passed internal review but got torn apart by the evaluation panel.', author: 'M&E Officer, health sector NGO' },
            ].map((card, i) => (
              <div key={i} className="border-l-2 border-accent pl-6">
                <p className="italic text-gray-300 mb-3">"{card.quote}"</p>
                <p className="text-xs text-gray-500">{card.author}</p>
              </div>
            ))}
          </div>

          <p className="text-accent-light text-base mt-12">
            You know the work. You know the sector. You just need tools that keep up with you.
          </p>
        </div>
      </section>

      {/* ── 3. Tools ── */}
      <section id="tools" className="bg-warm">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
            What you can build
          </p>
          <h2 className="text-3xl font-bold mb-12">Four tools. Zero fluff.</h2>
          <div className="grid md:grid-cols-2 gap-6 mb-16">
            {[
              {
                title: 'Logframe Generator',
                href: '/logframe',
                points: [
                  'Goal, outcomes, outputs, activities — structured to donor spec',
                  'Objectively verifiable indicators and means of verification',
                  'Export to Word or Excel in one click',
                ],
              },
              {
                title: 'SMART Indicators',
                href: '/smart-indicators',
                points: [
                  'Specific, measurable, achievable, relevant, time-bound',
                  'Aligned to your logframe outputs automatically',
                  'Evaluation-ready language that survives panel review',
                ],
              },
              {
                title: 'Theory of Change',
                href: '/theory-of-change',
                points: [
                  'Inputs → activities → outputs → outcomes → impact',
                  'Assumptions and evidence gaps surfaced clearly',
                  'Visual and narrative formats for any funder',
                ],
              },
              {
                title: 'Funder Rewriter',
                href: '/funder-rewriter',
                points: [
                  'Reshape existing proposals to match new funder priorities',
                  'Tone, structure, and emphasis adjusted per guidelines',
                  'Keep your voice — just sharpen the fit',
                ],
              },
            ].map((tool) => (
              <a
                key={tool.href}
                href={tool.href}
                className="bg-white border border-gray-200 rounded-md p-8 hover:border-accent transition-colors"
              >
                <h3 className="text-xl font-bold mb-4">{tool.title}</h3>
                <ul className="space-y-2 text-muted text-sm">
                  {tool.points.map((point, i) => (
                    <li key={i} className="flex gap-2">
                      <span className="text-accent mt-1">•</span>
                      <span>{point}</span>
                    </li>
                  ))}
                </ul>
              </a>
            ))}
          </div>
          <Image
            src="/images/hands-typing.jpg"
            alt="Hands typing on a keyboard"
            width={1200}
            height={500}
            className="rounded-xl w-full h-64 object-cover"
          />
        </div>
      </section>

      {/* ── 4. How It Works ── */}
      <section className="bg-white">
        <div className="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
          <Image
            src="/images/hands-coffee.jpg"
            alt="Hands holding coffee beside a laptop"
            width={640}
            height={480}
            className="rounded-xl w-full h-auto"
          />
          <div>
            <p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
              How it works
            </p>
            <h2 className="text-3xl font-bold mb-10">Three steps. One sitting.</h2>
            <div className="space-y-8">
              {[
                {
                  num: '01',
                  title: 'Describe your project',
                  desc: 'Fill in the guided form — title, sector, geography, donor requirements. Takes two minutes.',
                },
                {
                  num: '02',
                  title: 'Get a professional draft',
                  desc: 'A complete, structured document lands in under thirty seconds. Review it line by line.',
                },
                {
                  num: '03',
                  title: 'Refine and export',
                  desc: 'Edit anything inline. When it reads right, export as Word, Excel, or PDF.',
                },
              ].map((step) => (
                <div key={step.num} className="flex gap-4">
                  <span className="text-accent font-bold text-lg">{step.num}</span>
                  <div>
                    <h3 className="font-semibold mb-1">{step.title}</h3>
                    <p className="text-muted text-sm">{step.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <a href="/logframe" className="inline-block mt-8 text-accent font-medium text-sm hover:text-accent-dark transition-colors">
              Try the Logframe Generator →
            </a>
          </div>
        </div>
      </section>

      {/* ── 5. Freemium ── */}
      <section className="bg-sand">
        <div className="max-w-6xl mx-auto px-6 py-24 text-center">
          <p className="text-xs tracking-widest font-semibold text-accent uppercase mb-3">
            Pricing
          </p>
          <h2 className="text-3xl font-bold mb-4">Start free. Upgrade when you need to.</h2>
          <p className="text-muted mb-12 max-w-lg mx-auto">
            Your first document is completely free — no signup, no credit card. Pay only when you need volume.
          </p>
          <div className="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto">
            <div className="bg-white border border-gray-200 rounded-md p-8 text-left">
              <h3 className="font-bold text-lg mb-4">Free</h3>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex gap-2"><span className="text-accent">•</span>1 document per tool</li>
                <li className="flex gap-2"><span className="text-accent">•</span>Word and Excel export</li>
                <li className="flex gap-2"><span className="text-accent">•</span>No signup required</li>
              </ul>
            </div>
            <div className="bg-white border border-accent rounded-md p-8 text-left">
              <h3 className="font-bold text-lg mb-4">Pro <span className="text-accent text-sm font-normal">— coming soon</span></h3>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex gap-2"><span className="text-accent">•</span>Unlimited documents</li>
                <li className="flex gap-2"><span className="text-accent">•</span>PDF export and templates</li>
                <li className="flex gap-2"><span className="text-accent">•</span>Save and revisit past work</li>
                <li className="flex gap-2"><span className="text-accent">•</span>Priority support</li>
              </ul>
            </div>
          </div>
          <a
            href="/logframe"
            className="inline-block mt-10 bg-accent text-white font-medium px-6 py-3 rounded-md hover:bg-accent-dark transition-colors"
          >
            Generate your first document free
          </a>
        </div>
      </section>

      {/* ── 6. Emotional Close ── */}
      <section className="relative">
        <Image
          src="/images/window-dusk.jpg"
          alt="Window at dusk with warm light"
          fill
          className="object-cover"
        />
        <div className="absolute inset-0 bg-dark/70" />
        <div className="relative max-w-6xl mx-auto px-6 py-24 text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-6 max-w-2xl mx-auto">
            You got into this work to change things — not to spend another weekend on a logframe.
          </h2>
          <p className="text-gray-300 mb-8 max-w-lg mx-auto">
            Get the document done. Close the laptop. The evening is yours.
          </p>
          <a
            href="/logframe"
            className="inline-block border border-white text-white font-medium px-6 py-3 rounded-md hover:bg-white hover:text-dark transition-colors"
          >
            Start now — it's free
          </a>
        </div>
      </section>

      {/* ── 7. Footer ── */}
      <footer className="bg-dark text-gray-400">
        <div className="max-w-6xl mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between gap-6 text-sm">
          <div>
            <span className="text-white font-semibold">NGO Toolkit Lab</span>
            <span className="ml-3 text-gray-500">Grant documents, done.</span>
          </div>
          <div className="flex gap-6">
            <a href="/logframe" className="hover:text-white transition-colors">Logframe</a>
            <a href="/smart-indicators" className="hover:text-white transition-colors">SMART Indicators</a>
            <a href="/theory-of-change" className="hover:text-white transition-colors">Theory of Change</a>
            <a href="/funder-rewriter" className="hover:text-white transition-colors">Funder Rewriter</a>
          </div>
          <p className="text-gray-500">© {new Date().getFullYear()} NGO Toolkit Lab</p>
        </div>
      </footer>
    </>
  );
}
