'use client';

import { useState } from 'react';

const faqs = [
  { q: 'Can I use the free tier forever?', a: 'Yes. Your first document per tool is always free — no expiry, no signup.' },
  { q: 'What happens when I hit the free limit?', a: 'You\'ll see a prompt to upgrade. Your existing documents stay accessible.' },
  { q: 'Can I switch between monthly and annual?', a: 'Yes, at any time. Switching to annual applies a prorated credit.' },
  { q: 'Do you offer NGO discounts?', a: 'Pro is already priced for small NGOs. Team pricing includes volume discounts — contact us for 10+ seats.' },
  { q: 'What payment methods do you accept?', a: 'Visa, Mastercard, and bank transfer for annual Team plans.' },
];

const tiers = [
  {
    name: 'Free',
    monthly: 0,
    annual: 0,
    desc: 'Try every tool — no signup required.',
    features: ['1 document per tool', 'Word & Excel export', 'No account needed'],
    cta: 'Start free',
    href: '/logframe',
    highlight: false,
  },
  {
    name: 'Pro',
    monthly: 29,
    annual: 24,
    desc: 'For grant writers who submit regularly.',
    features: ['Unlimited documents', 'PDF export & templates', 'Save & revisit past work', 'Priority support', 'Funder-specific formatting'],
    cta: 'Get Pro',
    href: '/logframe',
    highlight: true,
  },
  {
    name: 'Team',
    monthly: 79,
    annual: 66,
    desc: 'For organisations with multiple writers.',
    features: ['Everything in Pro', 'Up to 10 seats', 'Shared document library', 'Brand & template presets', 'Dedicated onboarding'],
    cta: 'Contact us',
    href: 'mailto:hello@ngotoolkitlab.com',
    highlight: false,
  },
];

export default function PricingPage() {
  const [annual, setAnnual] = useState(false);

  return (
    <>
      <section className="bg-white">
        <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>
          <h1 className="text-4xl font-bold mb-4">Simple pricing. No surprises.</h1>
          <p className="text-muted max-w-lg mx-auto mb-10">
            Start free, upgrade when you need volume. Cancel any time.
          </p>

          {/* Toggle */}
          <div className="flex items-center justify-center gap-3 mb-16">
            <span className={`text-sm ${!annual ? 'text-dark font-semibold' : 'text-muted'}`}>Monthly</span>
            <button
              onClick={() => setAnnual(!annual)}
              className={`relative w-12 h-6 rounded-full transition-colors ${annual ? 'bg-accent' : 'bg-gray-300'}`}
              aria-label="Toggle annual billing"
            >
              <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${annual ? 'translate-x-6' : ''}`} />
            </button>
            <span className={`text-sm ${annual ? 'text-dark font-semibold' : 'text-muted'}`}>
              Annual <span className="text-accent text-xs font-medium">save 17%</span>
            </span>
          </div>

          {/* Tier cards */}
          <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto text-left">
            {tiers.map((t) => (
              <div
                key={t.name}
                className={`rounded-md p-8 ${t.highlight ? 'bg-white border-2 border-accent shadow-sm' : 'bg-white border border-gray-200'}`}
              >
                <h3 className="font-bold text-lg mb-1">{t.name}</h3>
                <p className="text-muted text-sm mb-4">{t.desc}</p>
                <div className="mb-6">
                  <span className="text-3xl font-bold">
                    {t.monthly === 0 ? 'Free' : `$${annual ? t.annual : t.monthly}`}
                  </span>
                  {t.monthly > 0 && <span className="text-muted text-sm"> /month</span>}
                </div>
                <ul className="space-y-2 text-sm text-muted mb-8">
                  {t.features.map((f, i) => (
                    <li key={i} className="flex gap-2">
                      <span className="text-accent">✓</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
                <a
                  href={t.href}
                  className={`block text-center font-medium px-4 py-2.5 rounded-md transition-colors ${
                    t.highlight
                      ? 'bg-accent text-white hover:bg-accent-dark'
                      : 'border border-accent text-accent hover:bg-accent-light'
                  }`}
                >
                  {t.cta}
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <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">Frequently asked questions</h2>
          <div className="max-w-2xl mx-auto space-y-8">
            {faqs.map((f, i) => (
              <div key={i}>
                <h3 className="font-semibold mb-1">{f.q}</h3>
                <p className="text-muted text-sm">{f.a}</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">Ready to finish the logframe?</h2>
          <p className="text-gray-300 mb-8 max-w-md mx-auto">Your first document is free. No signup needed.</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>
    </>
  );
}