const tools = [
  {
    title: 'Logframe Generator',
    href: '/logframe',
    desc: 'Structured goal → outcome → output → activity matrices aligned to donor requirements. Includes OVIs and means of verification.',
    inputs: 'Project title, sector, geography, donor, objectives',
    sample: 'A 4-level logframe with SMART indicators, assumptions column, and verification sources — ready for annexing.',
  },
  {
    title: 'SMART Indicators',
    href: '/smart-indicators',
    desc: 'Evaluation-ready indicators that survive panel review. Auto-aligned to your logframe outputs.',
    inputs: 'Logframe or project description, M&E framework preferences',
    sample: '8–12 indicators per output with baselines, targets, data sources, and collection frequency.',
  },
  {
    title: 'Theory of Change',
    href: '/theory-of-change',
    desc: 'Inputs → activities → outputs → outcomes → impact. Assumptions and evidence gaps surfaced clearly.',
    inputs: 'Problem statement, target population, intervention design',
    sample: 'A narrative ToC with causal pathways, assumption testing notes, and a visual summary.',
  },
  {
    title: 'Funder Rewriter',
    href: '/funder-rewriter',
    desc: 'Reshape existing proposals to match a new funder\'s priorities, tone, and structure — without losing your voice.',
    inputs: 'Existing proposal text, target funder name or guidelines',
    sample: 'A rewritten proposal section with tracked changes summary and alignment notes.',
  },
];

const comparison = [
  { task: 'Build a logframe from scratch', manual: '2–3 days', toolkit: '< 2 minutes' },
  { task: 'Write SMART indicators', manual: '4–6 hours', toolkit: '30 seconds' },
  { task: 'Draft a theory of change', manual: '1–2 days', toolkit: '< 2 minutes' },
  { task: 'Rewrite proposal for new funder', manual: '1 day', toolkit: '45 seconds' },
];

const quotes = [
  { text: 'I used to dread logframe season. Now I finish them over lunch.', author: 'Programme Manager, East Africa regional NGO' },
  { text: 'The SMART indicators it generates are better than what our M&E team was producing manually.', author: 'Grants Lead, UK-based INGO' },
  { text: 'We rewrote a USAID proposal for DFID in under a minute. It took three rounds of review last time.', author: 'Senior Grant Writer, health sector NGO' },
];

export default function GrantToolsPage() {
  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">Grant tools</p>
          <h1 className="text-4xl font-bold mb-4">Four tools. Zero fluff.</h1>
          <p className="text-muted max-w-lg mb-16">
            Each tool solves one specific grant-writing problem. Describe your project, get a professional draft, refine and export.
          </p>

          {/* Tool cards */}
          <div className="grid md:grid-cols-2 gap-6">
            {tools.map((t) => (
              <div key={t.href} className="border border-gray-200 rounded-md p-8">
                <h3 className="text-xl font-bold mb-3">{t.title}</h3>
                <p className="text-muted text-sm mb-4">{t.desc}</p>
                <div className="space-y-3 mb-6">
                  <div>
                    <span className="text-xs font-semibold uppercase text-accent tracking-wide">Inputs</span>
                    <p className="text-sm text-muted">{t.inputs}</p>
                  </div>
                  <div>
                    <span className="text-xs font-semibold uppercase text-accent tracking-wide">Sample output</span>
                    <p className="text-sm text-muted">{t.sample}</p>
                  </div>
                </div>
                <a href={t.href} className="text-accent font-medium text-sm hover:text-accent-dark transition-colors">
                  Try it free →
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison */}
      <section className="bg-warm">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <h2 className="text-3xl font-bold mb-12 text-center">Manual vs. Toolkit</h2>
          <div className="max-w-2xl mx-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-300">
                  <th className="text-left py-3 font-semibold">Task</th>
                  <th className="text-center py-3 font-semibold">Manual</th>
                  <th className="text-center py-3 font-semibold text-accent">Toolkit</th>
                </tr>
              </thead>
              <tbody>
                {comparison.map((row, i) => (
                  <tr key={i} className="border-b border-gray-200">
                    <td className="py-3 text-muted">{row.task}</td>
                    <td className="py-3 text-center text-muted">{row.manual}</td>
                    <td className="py-3 text-center font-semibold text-accent">{row.toolkit}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* Practitioner quotes */}
      <section className="bg-white">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <h2 className="text-3xl font-bold mb-12 text-center">From the field</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {quotes.map((q, i) => (
              <div key={i} className="border-l-2 border-accent pl-6">
                <p className="italic text-muted mb-3">"{q.text}"</p>
                <p className="text-xs text-gray-500">{q.author}</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">Pick a tool. Finish the document.</h2>
          <p className="text-gray-300 mb-8">No signup required for your first document.</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>
    </>
  );
}