'use client'

import Link from 'next/link'

export default function PodcastPage() {
  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 font-semibold text-blue-600">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 className="bg-gradient-to-br from-orange-50 to-pink-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="text-6xl mb-6">🎙️</div>
          <h1 className="text-5xl font-bold text-gray-900 mb-6">More Than A Diagnosis Podcast</h1>
          <p className="text-2xl text-gray-700">
            Getting real about life beyond the medical chart
          </p>
        </div>
      </section>

      {/* Hosts */}
      <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">
          <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">Meet Your Hosts</h2>
          <div className="grid md:grid-cols-2 gap-12">
            <div className="text-center">
              <div className="bg-gradient-to-br from-blue-100 to-purple-100 rounded-lg p-12 mb-6">
                <div className="text-6xl">👩</div>
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-4">Jes</h3>
              <p className="text-gray-700 text-lg">
                Jes went through triple-negative breast cancer and now navigates the long-term side effects of treatment. She's passionate about sharing real, messy stories of survival and resilience.
              </p>
            </div>
            <div className="text-center">
              <div className="bg-gradient-to-br from-green-100 to-teal-100 rounded-lg p-12 mb-6">
                <div className="text-6xl">👨</div>
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-4">Den</h3>
              <p className="text-gray-700 text-lg">
                Den lives with FAP, a rare genetic condition, alongside other chronic illnesses. Together with Jes, he creates space for authentic conversations about community and connection.
              </p>
            </div>
          </div>
          <div className="mt-12 text-center">
            <p className="text-xl text-gray-700 max-w-3xl mx-auto">
              Jes and Den are lifelong friends who found their way back to each other thanks to the wild ride of cancer and chronic illness. Through it all, they've found the magic of community, connection, and telling the real, messy stories.
            </p>
          </div>
        </div>
      </section>

      {/* Episodes */}
      <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">
          <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">Listen Now</h2>
          <p className="text-xl text-gray-700 text-center max-w-3xl mx-auto mb-12">
            Available on all major podcast platforms. Subscribe to never miss an episode where we get real about life beyond the medical chart.
          </p>
          <div className="text-center">
            <a
              href="#"
              className="inline-block px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
            >
              Find on Podcast Apps
            </a>
          </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 text-center">
          <p>&copy; 2025 More Than A Diagnosis. All rights reserved.</p>
        </div>
      </footer>
    </main>
  )
}