'use client'

import Link from 'next/link'

export default function Home() {
  return (
    <main className="min-h-screen bg-white">
      {/* Header */}
      <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 transition-colors">Home</Link>
              <Link href="/podcast" className="text-gray-600 hover:text-blue-600 transition-colors">Podcast</Link>
              <Link href="/resources" className="text-gray-600 hover:text-blue-600 transition-colors">Resources</Link>
              <Link href="/happymail" className="text-gray-600 hover:text-blue-600 transition-colors">Happy Mail</Link>
              <Link href="/supportgroup" className="text-gray-600 hover:text-blue-600 transition-colors">Support Group</Link>
              <Link href="/shop" className="text-gray-600 hover:text-blue-600 transition-colors">Shop</Link>
            </nav>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-6xl md:text-7xl font-bold text-gray-900 mb-6">
              You are more than a diagnosis.
            </h1>
            <h2 className="text-2xl md:text-3xl text-gray-700 mb-8">
              Connecting Through Stories, Thriving Through Community
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
              More Than A Diagnosis is a place for connection, encouragement, support, and resources by and for folks living with chronic illness and those touched by cancer. Join us on a journey where we explore the human experience beyond medical labels. Discover inspiring stories, insightful conversations, and valuable resources that redefine what it means to live with a diagnosis.
            </p>
            <Link
              href="/supportgroup"
              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-lg"
            >
              Join Our Community
            </Link>
          </div>
        </div>
      </section>

      {/* Happy Mail 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="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h3 className="text-4xl font-bold text-gray-900 mb-6">Happy Mail</h3>
              <p className="text-xl text-gray-600 mb-4">
                Happy Mail is a small way to remind you: you're seen, supported, and not alone.
              </p>
              <p className="text-lg text-gray-600 mb-6">
                Nerisa sends free, joy-filled snail mail to folks navigating the hard stuff - just because.
              </p>

              <div className="mb-8">
                <h4 className="text-lg font-semibold text-gray-900 mb-4">Who Can Receive Happy Mail?</h4>
                <ul className="space-y-2 text-gray-700">
                  <li>✓ Cancer diagnosis or treatment</li>
                  <li>✓ Chronic illness or rare disease</li>
                  <li>✓ Medical limbo or recovery</li>
                </ul>
              </div>

              <Link
                href="/happymail"
                className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
              >
                Order Happy Mail
              </Link>
            </div>
            <div className="bg-gradient-to-br from-pink-100 to-purple-100 rounded-lg p-8 text-center">
              <div className="text-6xl mb-4">💌</div>
              <p className="text-gray-700 font-semibold">From the Worst Club's Best Members</p>
            </div>
          </div>
        </div>
      </section>

      {/* Connect Section */}
      <section className="py-20 bg-gradient-to-br from-blue-600 to-purple-600 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h3 className="text-4xl font-bold mb-8">Connect</h3>
          <blockquote className="text-2xl mb-8 italic">
            "We're here to create a safe, supportive space where you can connect with others, share your story, and find hope. Cancer and chronic illness can feel so isolating, but together, we're stronger."
          </blockquote>
          <Link
            href="/supportgroup"
            className="inline-block px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
          >
            Learn More
          </Link>
        </div>
      </section>

      {/* Podcast 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">
          <h3 className="text-4xl font-bold text-gray-900 mb-12 text-center">Podcast</h3>
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="bg-gradient-to-br from-orange-100 to-pink-100 rounded-lg p-8 text-center">
              <div className="text-6xl mb-4">🎙️</div>
              <p className="text-gray-700 font-semibold">More Than A Diagnosis Podcast</p>
            </div>
            <div>
              <p className="text-lg text-gray-600 mb-6">
                Listen to More Than A Diagnosis where we get real about life beyond the medical chart.
              </p>
              <p className="text-gray-700 mb-8">
                Hosts Jes and Den are lifelong friends who found their way back to each other thanks to the wild ride of cancer and chronic illness. Jes went through triple-negative breast cancer and now navigates the long-term side effects of treatment. Den lives with FAP, a rare genetic condition, alongside other chronic illnesses. Through it all, they've found the magic of community, connection, and telling the real, messy stories.
              </p>
              <Link
                href="/podcast"
                className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
              >
                Listen Here
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Resources Section */}
      <section className="py-20 bg-gray-50 border-t border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h3 className="text-4xl font-bold text-gray-900 mb-8 text-center">Resources</h3>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12 text-center">
            We know how scary and overwhelming it can be to receive a diagnosis, not to mention the financial burden it can bring. That's why we've put together a list of helpful resources to attempt to make this journey even just a little bit easier for you. Be sure to check back often or sign up to receive updates as we are adding new resources all the time!
          </p>
          <div className="text-center">
            <Link
              href="/resources"
              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
            >
              View Resources
            </Link>
          </div>
        </div>
      </section>

      {/* Wings of Remembrance 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">
          <h3 className="text-4xl font-bold text-gray-900 mb-8 text-center">Wings of Remembrance</h3>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12 text-center">
            We invite you to share a tribute—a memory, message, or reflection—to honor those who shaped our journey. Together, we create a tapestry of wings that celebrates their legacy.
          </p>
          <div className="text-center">
            <Link
              href="/inlovingmemory"
              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
            >
              Share Your Tribute
            </Link>
          </div>
        </div>
      </section>

      {/* Shop Section */}
      <section className="py-20 bg-gray-50 border-t border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h3 className="text-4xl font-bold text-gray-900 mb-12 text-center">Shop Our Collections</h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
            {[
              { name: 'Worst Club Best Members', icon: '🦆' },
              { name: 'More Than A Diagnosis', icon: '💪' },
              { name: 'I Don\'t Want To I Get To', icon: '✨' },
              { name: 'Ribbon Collection', icon: '🎗️' }
            ].map((collection) => (
              <div key={collection.name} className="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <div className="text-4xl mb-4">{collection.icon}</div>
                <h4 className="text-lg font-semibold text-gray-900">{collection.name}</h4>
              </div>
            ))}
          </div>
          <div className="text-center">
            <Link
              href="/shop"
              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
            >
              Shop Now
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <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">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <h4 className="font-bold mb-4">Navigation</h4>
              <ul className="space-y-2">
                <li><Link href="/" className="hover:text-blue-400">Home</Link></li>
                <li><Link href="/podcast" className="hover:text-blue-400">Podcast</Link></li>
                <li><Link href="/resources" className="hover:text-blue-400">Resources</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Community</h4>
              <ul className="space-y-2">
                <li><Link href="/supportgroup" className="hover:text-blue-400">Support Group</Link></li>
                <li><Link href="/groups" className="hover:text-blue-400">Support Circle</Link></li>
                <li><Link href="/thejournal" className="hover:text-blue-400">The Journal</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">More</h4>
              <ul className="space-y-2">
                <li><Link href="/happymail" className="hover:text-blue-400">Happy Mail</Link></li>
                <li><Link href="/inlovingmemory" className="hover:text-blue-400">In Loving Memory</Link></li>
                <li><Link href="/shop" className="hover:text-blue-400">Shop</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Connect</h4>
              <ul className="space-y-2">
                <li><Link href="/meetus" className="hover:text-blue-400">Meet Us</Link></li>
                <li><a href="https://www.morethanadiagnosis.org" className="hover:text-blue-400">Original Site</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-800 pt-8 text-center text-gray-400">
            <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </main>
  )
}