import React, { useState } from 'react';
import { 
  Youtube, 
  Instagram, 
  Mail, 
  Menu, 
  X,
  PlayCircle,
  ExternalLink,
  ChevronRight,
  ShoppingBag,
  Info
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('podcast');
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const colors = {
    bg: '#f8f9fa',
    text: '#1a1a1a',
    accentRed: '#b91c1c', 
    accentGold: '#d4af37',
  };

  const socialLinks = {
    instagram: "https://www.instagram.com/marrieddads/",
    youtube: "https://www.youtube.com/@MarriedDads",
    youtubeVibez: "https://www.youtube.com/@MarriedDadsVibez",
    email: "mailto:ContactUs@MarriedDads.Com"
  };

  const podcastVideos = [
    {
      id: "dQw4w9WgXcQ", 
      title: "Fatherhood in the Metaverse",
      description: "Join the Married Dads crew as we don our headsets and dive into the future of digital connection. We explore how VR is changing the way parents share stories and build community across the globe."
    },
    {
      id: "dQw4w9WgXcQ", 
      title: "Hustle, Sports & Tech Trends",
      description: "A high-energy discussion on the latest sports news and tech innovations. We break down the 'hustle' of modern life while sharing laughs from our virtual studio."
    },
    {
      id: "dQw4w9WgXcQ",
      title: "VR Vibez: Music & Movies",
      description: "The team analyzes the biggest hits in music and film. Experience a unique blend of professional insight and genuine dad humor, all recorded in the Married Dads VR studio."
    }
  ];

  const handleNav = (tab) => {
    setActiveTab(tab);
    setIsMenuOpen(false);
    window.scrollTo(0, 0);
  };

  return (
    <div className="min-h-screen font-sans selection:bg-red-100" style={{ backgroundColor: colors.bg, color: colors.text }}>
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            <div className="flex items-center space-x-2 cursor-pointer group" onClick={() => handleNav('podcast')}>
              <div className="w-10 h-10 rounded flex items-center justify-center text-white font-black text-xl shadow-lg transition-transform group-hover:scale-105" style={{ backgroundColor: colors.accentRed }}>M</div>
              <div className="flex flex-col leading-none">
                <span className="text-xl font-black tracking-tighter uppercase italic">Married Dads</span>
                <span className="text-[10px] tracking-[0.3em] font-bold text-gray-400 uppercase">Studios</span>
              </div>
            </div>

            {/* Desktop Nav */}
            <div className="hidden md:flex items-center space-x-8 font-bold uppercase text-xs tracking-widest">
              <button 
                onClick={() => handleNav('podcast')} 
                className="transition-colors"
                style={{ color: activeTab === 'podcast' ? colors.accentRed : '#6b7280' }}
              >
                Podcast
              </button>
              <button 
                onClick={() => handleNav('about')} 
                className="transition-colors"
                style={{ color: activeTab === 'about' ? colors.accentRed : '#6b7280' }}
              >
                About Us
              </button>
              <button 
                onClick={() => handleNav('merch')} 
                className="transition-colors"
                style={{ color: activeTab === 'merch' ? colors.accentRed : '#6b7280' }}
              >
                Merchandise
              </button>
              <a 
                href={socialLinks.youtube} 
                target="_blank" 
                rel="noreferrer" 
                className="text-white px-5 py-2.5 rounded shadow-md hover:bg-black transition-all flex items-center gap-2"
                style={{ backgroundColor: colors.accentRed }}
              >
                <Youtube size={14} /> Subscribe
              </a>
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="p-2 text-gray-600">
                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Nav Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-b border-gray-100 p-6 space-y-4 flex flex-col items-center uppercase tracking-[0.2em] text-xs font-black shadow-xl">
            <button onClick={() => handleNav('podcast')} className="py-2 w-full text-center">Podcast</button>
            <button onClick={() => handleNav('about')} className="py-2 w-full text-center">About Us</button>
            <button onClick={() => handleNav('merch')} className="py-2 w-full text-center">Merchandise</button>
            <a href={socialLinks.youtube} className="pt-2" style={{ color: colors.accentRed }}>YouTube Channel</a>
          </div>
        )}
      </nav>

      <main>
        {activeTab === 'podcast' && (
          <div className="animate-in fade-in duration-700">
            {/* Hero Section */}
            <div className="relative h-[450px] md:h-[600px] w-full bg-black overflow-hidden flex items-center justify-center">
              <img 
                src="https://images.canvas.com/static/Screenshot 2026-04-10 at 12.03.33 AM.jpg" 
                alt="VR Podcast Room" 
                className="absolute inset-0 w-full h-full object-cover opacity-40 grayscale hover:grayscale-0 transition-all duration-1000"
                onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1590602847861-f357a9332bbc?auto=format&fit=crop&q=80&w=2000'; }}
              />
              <div className="relative z-10 text-center px-4 max-w-5xl">
                <span className="inline-block text-black px-3 py-1 text-[10px] font-black tracking-[0.4em] uppercase mb-6 rounded-sm shadow-xl" style={{ backgroundColor: colors.accentGold }}>The Metaverse is Calling</span>
                <h1 className="text-white text-5xl md:text-9xl font-black uppercase tracking-tighter leading-none mb-8">
                  REAL TALK <br />
                  <span style={{ color: colors.accentRed }}>VIRTUAL LENS</span>
                </h1>
                <p className="text-gray-300 max-w-2xl mx-auto text-lg md:text-xl font-medium tracking-tight mb-10 leading-relaxed">
                  Join a dynamic group of dads transcending physical boundaries to engage in the conversations that matter.
                </p>
                <div className="flex flex-wrap justify-center gap-5">
                  <button onClick={() => handleNav('about')} className="text-white px-10 py-4 rounded font-black uppercase text-xs tracking-[0.2em] hover:bg-white hover:text-black transition-all shadow-2xl" style={{ backgroundColor: colors.accentRed }}>
                    Discover Our Story
                  </button>
                  <a href={socialLinks.youtube} target="_blank" rel="noreferrer" className="bg-transparent border-2 border-white text-white px-10 py-4 rounded font-black uppercase text-xs tracking-[0.2em] hover:bg-white hover:text-black transition-all">
                    Latest Episodes
                  </a>
                </div>
              </div>
            </div>

            {/* Featured Image Section - Sleep Image */}
            <div className="py-20 px-4 bg-white">
               <div className="max-w-6xl mx-auto text-center">
                  <div className="relative inline-block rounded-3xl overflow-hidden shadow-2xl group" style={{ border: '16px solid #f8f9fa' }}>
                    <img 
                      src="https://images.canvas.com/static/Married Dads Sleep.jpg" 
                      alt="The Crew" 
                      className="w-full h-auto max-w-4xl transition-transform duration-700 group-hover:scale-105"
                      onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1478737270239-2f02b77fc618?auto=format&fit=crop&q=80&w=1200'; }}
                    />
                    <div className="absolute inset-0 m-4 pointer-events-none opacity-40 group-hover:opacity-100 transition-opacity" style={{ border: `2px solid ${colors.accentGold}` }}></div>
                  </div>
                  <div className="mt-12 max-w-2xl mx-auto">
                    <h2 className="text-3xl font-black uppercase tracking-tighter mb-4">Camaraderie, Humor, & Insights</h2>
                    <p className="text-gray-500 font-medium leading-relaxed">Experience a unique blend of fatherhood and friendship, all through the immersive lens of virtual reality.</p>
                  </div>
               </div>
            </div>

            {/* Video Gallery */}
            <div className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
              <div className="flex items-center gap-6 mb-16">
                <div className="h-1 flex-grow bg-gray-200"></div>
                <h2 className="text-4xl font-black uppercase tracking-tighter text-center whitespace-nowrap">
                   <PlayCircle className="inline-block mr-3" size={36} style={{ color: colors.accentRed }} />
                   Episode Gallery
                </h2>
                <div className="h-1 flex-grow bg-gray-200"></div>
              </div>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-12">
                {podcastVideos.map((video, idx) => (
                  <div key={idx} className="group flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl transition-all border border-gray-100">
                    <div className="aspect-video bg-black relative">
                       <iframe 
                        className="w-full h-full"
                        src={"https://www.youtube.com/embed/" + video.id}
                        title={video.title}
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                      ></iframe>
                    </div>
                    <div className="p-8 flex-grow flex flex-col">
                      <h3 className="font-black text-2xl mb-4 group-hover:text-[#b91c1c] transition-colors uppercase tracking-tight leading-tight">{video.title}</h3>
                      <div className="pl-4" style={{ borderLeft: `4px solid ${colors.accentGold}` }}>
                        <p className="text-gray-600 text-sm leading-relaxed mb-6 font-medium">
                          {video.description}
                        </p>
                      </div>
                      <a href={socialLinks.youtube} target="_blank" rel="noreferrer" className="flex items-center gap-2 font-black uppercase text-[10px] tracking-[0.3em] hover:text-black transition-colors self-start mt-auto" style={{ color: colors.accentRed }}>
                        Watch Full Discussion <ExternalLink size={14} />
                      </a>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'about' && (
          <div className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto animate-in fade-in duration-700">
            <div className="grid lg:grid-cols-2 gap-20 items-center">
              <div className="order-2 lg:order-1">
                <h2 className="text-6xl font-black uppercase mb-4 leading-none tracking-tighter">
                  About <br /><span style={{ color: colors.accentRed }}>Married Dads</span>
                </h2>
                <div className="w-24 h-3 mb-12" style={{ backgroundColor: colors.accentGold }}></div>
                <div className="space-y-8 text-lg leading-relaxed font-medium text-gray-700">
                  <p className="font-black text-2xl text-black leading-tight italic">
                    Step into the immersive podcast of Married Dads with our virtual reality podcast!
                  </p>
                  <p>
                    Join a dynamic group of dads as they wear their Quest 🥽, transcending physical boundaries to engage in lively discussions about everything from current events in sports, music, movies, TV, social media, and national news. 
                  </p>
                  <p>
                    Beyond the headlines, we delve into the heart of fatherhood, sharing anecdotes, and advice, and navigating the rollercoaster ride of life as devoted husbands. Get ready for a unique blend of camaraderie, humor, and genuine insights.
                  </p>
                  <p className="font-black uppercase border-t-2 border-gray-100 pt-8" style={{ color: colors.accentRed }}>
                    All are experienced through a VR lens. Welcome to a podcast where the virtual meets the visceral, and fatherhood takes center stage in the metaverse!
                  </p>
                </div>
                
                <div className="mt-16 flex flex-wrap gap-8 items-center bg-white p-8 rounded-2xl border border-gray-100 shadow-sm">
                  <div className="flex gap-6">
                    <a href={socialLinks.instagram} target="_blank" rel="noreferrer" className="text-black hover:text-[#b91c1c] transition-colors"><Instagram size={28} /></a>
                    <a href={socialLinks.youtube} target="_blank" rel="noreferrer" className="text-black hover:text-[#b91c1c] transition-colors"><Youtube size={28} /></a>
                    <a href={socialLinks.email} className="text-black hover:text-[#b91c1c] transition-colors"><Mail size={28} /></a>
                  </div>
                  <div className="h-12 w-px bg-gray-200 hidden sm:block"></div>
                  <div>
                    <span className="block text-[9px] font-black text-gray-400 uppercase tracking-widest mb-1">Inquiries</span>
                    <span className="font-black text-sm uppercase">ContactUs@MarriedDads.Com</span>
                  </div>
                </div>
              </div>
              <div className="order-1 lg:order-2">
                <div className="relative">
                  <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full blur-3xl opacity-10" style={{ backgroundColor: colors.accentGold }}></div>
                  <img 
                    src="https://images.canvas.com/static/Untitled 19.jpg" 
                    alt="About Us" 
                    className="relative rounded-2xl shadow-3xl border-4 border-white grayscale hover:grayscale-0 transition-all duration-1000"
                    onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?auto=format&fit=crop&q=80&w=1200'; }}
                  />
                  <div className="absolute -bottom-6 -left-6 text-white p-6 rounded shadow-2xl font-black uppercase text-xs tracking-widest" style={{ backgroundColor: colors.accentRed }}>
                    Established 2024
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'merch' && (
          <div className="py-24 px-4 text-center animate-in zoom-in-95 duration-700">
             <div className="max-w-4xl mx-auto">
                <h2 className="text-7xl font-black uppercase mb-4 tracking-tighter">Official <span style={{ color: colors.accentRed }}>Gear</span></h2>
                <p className="font-black uppercase tracking-[0.5em] text-xs mb-16" style={{ color: colors.accentGold }}>Married Dads Gear Only</p>
                
                <div className="relative rounded-[2rem] overflow-hidden shadow-3xl border-[16px] border-white max-w-sm mx-auto group">
                  <img 
                    src="https://images.canvas.com/static/Untitled 47.jpg" 
                    alt="Merch Store Coming Soon" 
                    className="w-full h-auto transition-transform duration-1000 group-hover:scale-105"
                    onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&q=80&w=1200'; }}
                  />
                  <div className="absolute inset-0 bg-black/10 backdrop-blur-[1px] flex items-end justify-center p-8">
                    <div className="bg-white/95 backdrop-blur-md p-8 rounded-xl shadow-2xl w-full mb-4" style={{ borderTop: `4px solid ${colors.accentRed}` }}>
                      <ShoppingBag size={48} className="mx-auto mb-4" style={{ color: colors.accentRed }} />
                      <h3 className="text-2xl font-black uppercase mb-2 tracking-tighter">Coming Soon</h3>
                      <p className="text-gray-500 font-bold mb-6 uppercase text-[10px] tracking-widest">Available on MarriedDads.com</p>
                      <button className="bg-black text-white w-full py-4 rounded font-black uppercase text-[10px] tracking-[0.3em] hover:bg-black/80 transition-all">
                        Notify Me
                      </button>
                    </div>
                  </div>
                </div>
             </div>
          </div>
        )}

        {activeTab === 'legal' && (
          <div className="py-24 px-4 max-w-4xl mx-auto animate-in fade-in duration-500">
             <div className="bg-[#121212] p-10 md:p-16 rounded-xl border border-[#222] shadow-3xl text-gray-300">
                <h1 className="text-white text-4xl font-black tracking-tighter border-b-2 border-[#007BFF] pb-6 mb-12 uppercase italic">LEGAL & COMPLIANCE</h1>
                
                <div className="space-y-20 leading-relaxed">
                  <div className="legal-block">
                    <h2 className="text-[#007BFF] text-xl font-black uppercase mb-6 tracking-widest">1. Privacy Policy</h2>
                    <p className="mb-6"><strong className="text-white">Married Dads Studios</strong> ("the Studio") is committed to protecting your privacy within our VR environments. We collect minimal data to facilitate multiplayer presence and platform functionality:</p>
                    <ul className="space-y-4 mb-6">
                      <li className="flex items-start gap-4">
                        <div className="mt-1.5 w-2 h-2 rounded-full bg-[#007BFF]"></div>
                        <span><strong className="text-white">Oculus/Meta User ID:</strong> To identify your session within the virtual studio.</span>
                      </li>
                      <li className="flex items-start gap-4">
                        <div className="mt-1.5 w-2 h-2 rounded-full bg-[#007BFF]"></div>
                        <span><strong className="text-white">Public Profile Name:</strong> To display your identity to other participants.</span>
                      </li>
                    </ul>
                  </div>

                  <div className="p-8 bg-black/50 rounded-lg border border-white/5">
                    <h2 className="text-[#007BFF] text-xl font-black uppercase mb-6 tracking-widest">2. User Data Deletion</h2>
                    <p className="mb-8">To comply with platform requirements, Married Dads Studios provides a clear path for data removal. If you wish to have your record purged from our VR database:</p>
                    <div className="bg-[#1a1a1a] p-8 rounded-lg border-l-8 border-[#007BFF] font-mono text-sm space-y-3 shadow-inner">
                      <p className="flex justify-between border-b border-gray-800 pb-2"><span className="text-gray-500 uppercase">Email</span> <strong className="text-white">ContactUs@MarriedDads.Com</strong></p>
                      <p className="flex justify-between border-b border-gray-800 pb-2"><span className="text-gray-500 uppercase">Subject</span> <strong className="text-white">Data Deletion Request</strong></p>
                      <p className="flex justify-between pt-2"><span className="text-gray-500 uppercase">Target</span> <span className="text-[#007BFF]">Oculus Username</span></p>
                    </div>
                  </div>

                  <div>
                    <h2 className="text-[#007BFF] text-xl font-black uppercase mb-6 tracking-widest">3. Terms of Service (EULA)</h2>
                    <p className="mb-8">By accessing Married Dads Studios VR content, you agree to:</p>
                    <ul className="space-y-6">
                      <li className="flex gap-4 p-4 bg-white/5 rounded">
                        <span className="text-[#007BFF] font-black">01</span>
                        <span><strong className="text-white uppercase text-xs tracking-widest">Professional Conduct:</strong> Maintain a standard of leadership and respect. disruptive behavior will result in an immediate studio ban.</span>
                      </li>
                      <li className="flex gap-4 p-4 bg-white/5 rounded">
                        <span className="text-[#007BFF] font-black">02</span>
                        <span><strong className="text-white uppercase text-xs tracking-widest">Safety:</strong> You assume all physical risks associated with VR play.</span>
                      </li>
                      <li className="flex gap-4 p-4 bg-white/5 rounded">
                        <span className="text-[#007BFF] font-black">03</span>
                        <span><strong className="text-white uppercase text-xs tracking-widest">Compliance:</strong> You agree to follow the <a href="https://www.meta.com/legal/quest/terms-of-service/" target="_blank" rel="noreferrer" className="text-[#007BFF] underline hover:text-white transition-colors">Meta Platform Terms of Service</a>.</span>
                      </li>
                    </ul>
                  </div>
                </div>

                <div className="mt-24 pt-12 border-t border-[#222] text-[10px] text-gray-600 uppercase tracking-[0.4em] text-center leading-loose">
                   <p className="mb-4">Meta, Meta Quest, and the Meta logo are trademarks of Meta Platforms Technologies, LLC. <br />Married Dads Studios is an independent media entity.</p>
                   <p className="font-black text-gray-400 mt-6">&copy; 2026 Married Dads Studios. All Rights Reserved.</p>
                </div>
                
                <button onClick={() => handleNav('podcast')} className="mt-16 font-black uppercase text-xs tracking-[0.5em] flex items-center justify-center gap-4 hover:translate-x-2 transition-transform mx-auto" style={{ color: colors.accentRed }}>
                   <ChevronRight size={16} className="rotate-180" /> Back to Studio
                </button>
             </div>
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="text-center py-12 px-2 border-t" style={{ backgroundColor: '#0c0c0c', borderTopColor: '#1a1a1a', marginTop: '100px' }}>
          <button 
            onClick={() => handleNav('legal')}
            className="bg-transparent border-none cursor-pointer uppercase text-[11px] tracking-[1px] transition-colors text-[#444] hover:text-[#007BFF]"
          >
              Married Dads Studios | Legal & VR Support
          </button>
          
          <div className="mt-12 flex justify-center gap-10">
             <a href={socialLinks.instagram} target="_blank" rel="noreferrer" className="text-gray-800 hover:text-white transition-all transform hover:-translate-y-1"><Instagram size={22} /></a>
             <a href={socialLinks.youtube} target="_blank" rel="noreferrer" className="text-gray-800 hover:text-white transition-all transform hover:-translate-y-1"><Youtube size={22} /></a>
             <a href={socialLinks.email} className="text-gray-800 hover:text-white transition-all transform hover:-translate-y-1"><Mail size={22} /></a>
          </div>
          
          <div className="mt-12 flex flex-col items-center gap-4">
             <div className="flex items-center gap-4">
                <div className="w-12 h-px bg-gray-900"></div>
                <p className="text-[10px] text-gray-800 font-black tracking-[0.5em] uppercase italic">Married Dads Studios</p>
                <div className="w-12 h-px bg-gray-900"></div>
             </div>
             <p className="text-[8px] text-gray-900 font-black uppercase tracking-[1em] ml-[1em]">Metaverse Origin</p>
          </div>
      </footer>
    </div>
  );
};

export default App;