'use client'

import Link from 'next/link'

export default function Home() {
  return (
    <main className="min-h-screen bg-background text-text font-sans selection:bg-primary-200 selection:text-primary-900">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-background/80 backdrop-blur-md border-b border-primary-100">
        <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-heading font-bold text-primary-700 hover:text-primary-600 transition-colors">
              MoreThanADiagnosis
            </Link>
            <nav className="hidden md:flex gap-8">
              <Link href="/" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Home</Link>
              <Link href="/podcast" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Podcast</Link>
              <Link href="/resources" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Resources</Link>
              <Link href="/happymail" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Happy Mail</Link>
              <Link href="/supportgroup" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Support Group</Link>
              <Link href="/shop" className="text-text-muted hover:text-primary-600 transition-colors font-medium">Shop</Link>
            </nav>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative overflow-hidden py-24 lg:py-32">
        <div className="absolute inset-0 bg-gradient-to-br from-primary-50 via-background to-secondary-50 opacity-70 -z-10" />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-4xl mx-auto">
            <h1 className="text-5xl md:text-7xl font-heading font-bold text-primary-800 mb-8 leading-tight">
              You are more than <br className="hidden md:block" /> a diagnosis.
            </h1>
            <h2 className="text-2xl md:text-3xl text-text-muted mb-10 font-light leading-relaxed">
              Connecting Through Stories, <span className="text-accent font-medium">Thriving Through Community</span>
            </h2>
            <p className="text-xl text-text-muted max-w-2xl mx-auto mb-12 leading-relaxed">
              A sanctuary for connection, encouragement, and support. Join us on a journey where we explore the human experience beyond medical labels.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                href="/supportgroup"
                className="inline-flex items-center justify-center px-8 py-4 bg-primary text-white font-semibold rounded-full hover:bg-primary-600 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
              >
                Join Our Community
              </Link>
              <Link
                href="/resources"
                className="inline-flex items-center justify-center px-8 py-4 bg-white text-primary-700 font-semibold rounded-full border-2 border-primary-100 hover:border-primary-300 hover:bg-primary-50 transition-all"
              >
                Explore Resources
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Happy Mail Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <div className="order-2 md:order-1">
              <div className="bg-secondary-50 rounded-3xl p-10 md:p-14 relative overflow-hidden">
                <div className="absolute top-0 right-0 w-64 h-64 bg-secondary-100 rounded-full -mr-32 -mt-32 opacity-50" />
                <div className="absolute bottom-0 left-0 w-48 h-48 bg-secondary-200 rounded-full -ml-24 -mb-24 opacity-50" />
                <div className="relative z-10 text-center">
                  <div className="text-8xl mb-6 animate-bounce-slow">💌</div>
                  <p className="text-secondary-800 font-heading font-bold text-xl">From the Worst Club's Best Members</p>
                </div>
              </div>
            </div>
            <div className="order-1 md:order-2">
              <span className="text-accent font-bold tracking-wider uppercase text-sm mb-2 block">Spreading Joy</span>
              <h3 className="text-4xl font-heading font-bold text-primary-800 mb-6">Happy Mail</h3>
              <p className="text-xl text-text-muted mb-6 leading-relaxed">
                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>

              <div className="mb-10 bg-primary-50 rounded-2xl p-6 border border-primary-100">
                <h4 className="text-lg font-bold text-primary-800 mb-4">Who Can Receive Happy Mail?</h4>
                <ul className="space-y-3 text-text-muted">
                  {['Cancer diagnosis or treatment', 'Chronic illness or rare disease', 'Medical limbo or recovery'].map((item, i) => (
                    <li key={i} className="flex items-center gap-3">
                      <span className="flex-shrink-0 w-6 h-6 rounded-full bg-success text-white flex items-center justify-center text-sm">✓</span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>

              <Link
                href="/happymail"
                className="inline-flex items-center px-6 py-3 bg-secondary text-secondary-900 font-semibold rounded-full hover:bg-secondary-400 transition-colors"
              >
                Order Happy Mail
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Connect Section */}
      <section className="py-24 bg-primary-700 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/pattern.svg')] opacity-5" />
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
          <h3 className="text-4xl font-heading font-bold mb-10">Connect</h3>
          <blockquote className="text-2xl md:text-3xl font-serif italic mb-12 leading-relaxed opacity-90">
            "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-10 py-4 bg-white text-primary-800 font-bold rounded-full hover:bg-primary-50 transition-all shadow-lg hover:scale-105"
          >
            Learn More
          </Link>
        </div>
      </section>

      {/* Podcast Section */}
      <section className="py-24 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h3 className="text-4xl font-heading font-bold text-primary-800 mb-4">The Podcast</h3>
            <p className="text-text-muted max-w-2xl mx-auto">Real conversations about life beyond the medical chart.</p>
          </div>

          <div className="grid md:grid-cols-2 gap-12 items-center bg-white rounded-3xl p-8 md:p-12 shadow-sm border border-primary-50">
            <div className="bg-gradient-to-br from-accent/20 to-secondary/20 rounded-2xl p-12 text-center aspect-square flex items-center justify-center">
              <div className="text-8xl">🎙️</div>
            </div>
            <div>
              <h4 className="text-2xl font-heading font-bold text-primary-800 mb-6">More Than A Diagnosis</h4>
              <p className="text-text-muted mb-8 leading-relaxed">
                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. Through it all, they've found the magic of community.
              </p>
              <Link
                href="/podcast"
                className="inline-flex items-center px-8 py-3 bg-primary text-white font-semibold rounded-full hover:bg-primary-600 transition-colors"
              >
                Listen Now
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Resources Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h3 className="text-4xl font-heading font-bold text-primary-800 mb-8">Resources</h3>
          <p className="text-xl text-text-muted max-w-3xl mx-auto mb-12 leading-relaxed">
            We know how scary and overwhelming it can be to receive a diagnosis. We've put together a list of helpful resources to attempt to make this journey even just a little bit easier for you.
          </p>
          <Link
            href="/resources"
            className="inline-block px-8 py-4 bg-secondary text-secondary-900 font-semibold rounded-full hover:bg-secondary-400 transition-colors"
          >
            Browse Resources
          </Link>
        </div>
      </section>

      {/* Wings of Remembrance Section */}
      <section className="py-24 bg-primary-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <span className="text-accent font-bold tracking-wider uppercase text-sm mb-2 block">Honoring Legacies</span>
          <h3 className="text-4xl font-heading font-bold text-primary-800 mb-8">Wings of Remembrance</h3>
          <p className="text-xl text-text-muted max-w-3xl mx-auto mb-12 leading-relaxed">
            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>
          <Link
            href="/inlovingmemory"
            className="inline-block px-8 py-4 bg-white text-primary-700 font-semibold rounded-full border border-primary-200 hover:bg-primary-50 transition-colors shadow-sm"
          >
            Share Your Tribute
          </Link>
        </div>
      </section>

      {/* Shop Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h3 className="text-4xl font-heading font-bold text-primary-800 mb-4">Shop Our Collections</h3>
            <p className="text-text-muted">Wear your story with pride.</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {[
              { name: 'Worst Club Best Members', icon: '🦆', color: 'bg-primary-50' },
              { name: 'More Than A Diagnosis', icon: '💪', color: 'bg-secondary-50' },
              { name: 'I Don\'t Want To I Get To', icon: '✨', color: 'bg-accent/10' },
              { name: 'Ribbon Collection', icon: '🎗️', color: 'bg-primary-100' }
            ].map((collection) => (
              <div key={collection.name} className={`${collection.color} rounded-2xl p-8 text-center hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer group`}>
                <div className="text-5xl mb-6 group-hover:scale-110 transition-transform duration-300">{collection.icon}</div>
                <h4 className="text-lg font-bold text-primary-900">{collection.name}</h4>
              </div>
            ))}
          </div>
          <div className="text-center">
            <Link
              href="/shop"
              className="inline-block px-8 py-4 bg-primary text-white font-semibold rounded-full hover:bg-primary-600 transition-colors"
            >
              Visit Shop
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-primary-900 text-white py-16 border-t border-primary-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-12 mb-12">
            <div>
              <h4 className="font-heading font-bold text-lg mb-6 text-primary-100">Navigation</h4>
              <ul className="space-y-3">
                <li><Link href="/" className="text-primary-200 hover:text-white transition-colors">Home</Link></li>
                <li><Link href="/podcast" className="text-primary-200 hover:text-white transition-colors">Podcast</Link></li>
                <li><Link href="/resources" className="text-primary-200 hover:text-white transition-colors">Resources</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-heading font-bold text-lg mb-6 text-primary-100">Community</h4>
              <ul className="space-y-3">
                <li><Link href="/supportgroup" className="text-primary-200 hover:text-white transition-colors">Support Group</Link></li>
                <li><Link href="/groups" className="text-primary-200 hover:text-white transition-colors">Support Circle</Link></li>
                <li><Link href="/thejournal" className="text-primary-200 hover:text-white transition-colors">The Journal</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-heading font-bold text-lg mb-6 text-primary-100">More</h4>
              <ul className="space-y-3">
                <li><Link href="/happymail" className="text-primary-200 hover:text-white transition-colors">Happy Mail</Link></li>
                <li><Link href="/inlovingmemory" className="text-primary-200 hover:text-white transition-colors">In Loving Memory</Link></li>
                <li><Link href="/shop" className="text-primary-200 hover:text-white transition-colors">Shop</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-heading font-bold text-lg mb-6 text-primary-100">Connect</h4>
              <ul className="space-y-3">
                <li><Link href="/meetus" className="text-primary-200 hover:text-white transition-colors">Meet Us</Link></li>
                <li><a href="https://www.morethanadiagnosis.org" className="text-primary-200 hover:text-white transition-colors">Original Site</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-primary-800 pt-8 text-center text-primary-400">
            <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </main>
  )
}