'use client'

import Link from 'next/link'

export default function HappyMailPage() {
  return (
    <main className="min-h-screen bg-white">
      <header className="sticky top-0 z-50 bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</Link>
            <nav className="hidden md:flex gap-8">
              <Link href="/" className="text-gray-600 hover:text-blue-600">Home</Link>
              <Link href="/happymail" className="text-gray-600 hover:text-blue-600 font-semibold text-blue-600">Happy Mail</Link>
            </nav>
          </div>
        </div>
      </header>

      <section className="bg-gradient-to-br from-pink-50 to-red-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="text-7xl mb-6">💌</div>
          <h1 className="text-5xl font-bold text-gray-900 mb-6">Happy Mail</h1>
          <p className="text-2xl text-gray-700">You're seen, supported, and not alone</p>
        </div>
      </section>

      <section className="py-20 bg-white border-t border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-4xl font-bold text-gray-900 mb-6">About Happy Mail</h2>
            <p className="text-xl text-gray-700 mb-8">
              Happy Mail is a small way to remind you: you're seen, supported, and not alone. Nerisa sends free, joy-filled snail mail to folks navigating the hard stuff - just because.
            </p>

            <h3 className="text-2xl font-bold text-gray-900 mb-4">Who Can Receive?</h3>
            <ul className="space-y-3 text-lg text-gray-700 mb-12">
              <li>✓ Cancer diagnosis or treatment</li>
              <li>✓ Chronic illness or rare disease</li>
              <li>✓ Medical limbo or recovery</li>
            </ul>

            <div className="text-center">
              <a href="https://www.morethanadiagnosis.org/happymail" className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
                Order Happy Mail
              </a>
            </div>
          </div>
        </div>
      </section>

      <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
        </div>
      </footer>
    </main>
  )
}