const { useState, useEffect, useRef } = React;

// Utility Functions
const calculateAge = (birthDate, targetDate = new Date()) => {
  const birth = new Date(birthDate);
  const target = new Date(targetDate);

  let years = target.getFullYear() - birth.getFullYear();
  let months = target.getMonth() - birth.getMonth();
  let days = target.getDate() - birth.getDate();

  if (days < 0) {
    months--;
    const prevMonth = new Date(target.getFullYear(), target.getMonth(), 0);
    days += prevMonth.getDate();
  }
  if (months < 0) {
    years--;
    months += 12;
  }

  const diffMs = target - birth;
  const totalDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  const totalWeeks = Math.floor(totalDays / 7);
  const totalHours = Math.floor(diffMs / (1000 * 60 * 60));
  const totalMinutes = Math.floor(diffMs / (1000 * 60));
  const totalSeconds = Math.floor(diffMs / 1000);

  return { years, months, days, totalDays, totalWeeks, totalHours, totalMinutes, totalSeconds };
};

const getDayOfWeek = (dateStr) => {
  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  const meanings = [
    'Fair of face', 'Full of grace', 'Full of woe', 'Has far to go',
    'Loving and giving', 'Works hard for a living', 'Bonny, blithe, good and gay'
  ];
  const date = new Date(dateStr);
  const dayIndex = date.getDay();
  return { day: days[dayIndex], meaning: meanings[dayIndex] };
};

const getZodiacInfo = (dateStr) => {
  const date = new Date(dateStr);
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const zodiacSigns = [
    { sign: 'Capricorn', start: [12, 22], end: [1, 19], traits: 'Ambitious, disciplined, patient', element: 'Earth' },
    { sign: 'Aquarius', start: [1, 20], end: [2, 18], traits: 'Independent, humanitarian, inventive', element: 'Air' },
    { sign: 'Pisces', start: [2, 19], end: [3, 20], traits: 'Compassionate, artistic, intuitive', element: 'Water' },
    { sign: 'Aries', start: [3, 21], end: [4, 19], traits: 'Courageous, energetic, confident', element: 'Fire' },
    { sign: 'Taurus', start: [4, 20], end: [5, 20], traits: 'Reliable, patient, practical', element: 'Earth' },
    { sign: 'Gemini', start: [5, 21], end: [6, 20], traits: 'Adaptable, curious, witty', element: 'Air' },
    { sign: 'Cancer', start: [6, 21], end: [7, 22], traits: 'Nurturing, protective, intuitive', element: 'Water' },
    { sign: 'Leo', start: [7, 23], end: [8, 22], traits: 'Creative, generous, warm-hearted', element: 'Fire' },
    { sign: 'Virgo', start: [8, 23], end: [9, 22], traits: 'Analytical, practical, diligent', element: 'Earth' },
    { sign: 'Libra', start: [9, 23], end: [10, 22], traits: 'Diplomatic, fair-minded, social', element: 'Air' },
    { sign: 'Scorpio', start: [10, 23], end: [11, 21], traits: 'Passionate, resourceful, brave', element: 'Water' },
    { sign: 'Sagittarius', start: [11, 22], end: [12, 21], traits: 'Optimistic, adventurous, honest', element: 'Fire' }
  ];

  const birthstones = ['Garnet', 'Amethyst', 'Aquamarine', 'Diamond', 'Emerald', 'Pearl', 'Ruby', 'Peridot', 'Sapphire', 'Opal', 'Topaz', 'Turquoise'];
  const flowers = ['Carnation', 'Violet', 'Daffodil', 'Daisy', 'Lily of the Valley', 'Rose', 'Larkspur', 'Gladiolus', 'Aster', 'Marigold', 'Chrysanthemum', 'Poinsettia'];

  let zodiac = zodiacSigns[0];
  for (const z of zodiacSigns) {
    const [sm, sd] = z.start;
    const [em, ed] = z.end;
    if ((month === sm && day >= sd) || (month === em && day <= ed)) {
      zodiac = z;
      break;
    }
  }

  return {
    ...zodiac,
    birthstone: birthstones[date.getMonth()],
    flower: flowers[date.getMonth()]
  };
};

const getHalfBirthday = (dateStr) => {
  const date = new Date(dateStr);
  const halfBirthday = new Date(date);
  halfBirthday.setMonth(halfBirthday.getMonth() + 6);
  return halfBirthday;
};

const getNextBirthday = (dateStr) => {
  const birth = new Date(dateStr);
  const today = new Date();
  const nextBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
  if (nextBirthday < today) {
    nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
  }
  return nextBirthday;
};

// Mock Fun Facts Data
const getFunFacts = (dateStr) => {
  const date = new Date(dateStr);
  const month = date.getMonth();
  const day = date.getDate();
  const year = date.getFullYear();

  const famousPeople = [
    ['Muhammad Ali', 'Isaac Newton', 'J.R.R. Tolkien'],
    ['Bob Marley', 'Charles Darwin', 'Abraham Lincoln'],
    ['Albert Einstein', 'Dr. Seuss', 'Alexander Graham Bell'],
    ['Leonardo da Vinci', 'Charlie Chaplin', 'Thomas Jefferson'],
    ['John F. Kennedy', 'Queen Victoria', 'Audrey Hepburn'],
    ['Marilyn Monroe', 'Anne Frank', 'Che Guevara'],
    ['Nelson Mandela', 'Princess Diana', 'Frida Kahlo'],
    ['Barack Obama', 'Neil Armstrong', 'Napoleon Bonaparte'],
    ['Beyoncé', 'Stephen King', 'Michael Jackson'],
    ['John Lennon', 'Mahatma Gandhi', 'Bill Gates'],
    ['Marie Curie', 'Leonardo DiCaprio', 'Martin Luther'],
    ['Taylor Swift', 'Frank Sinatra', 'Walt Disney']
  ];

  const events = [
    'The first email was sent', 'The Moon landing occurred', 'The Berlin Wall fell',
    'The first iPhone was released', 'World Wide Web went public'
  ];

  return {
    famousPeople: famousPeople[month],
    historicalEvent: events[day % events.length],
    numberOneSong: `#1 Hit of ${year}`,
    topMovie: `Blockbuster of ${year}`,
    statistic: `Only 0.27% of people share your exact birthday!`
  };
};

// Components
const Navigation = ({ activeSection }) => {
  const sections = [
    { id: 'age-calculator', label: 'Age Calculator' },
    { id: 'future-age', label: 'Future Age' },
    { id: 'day-born', label: 'Day Born' },
    { id: 'days-alive', label: 'Days Alive' },
    { id: 'half-birthday', label: 'Half Birthday' },
    { id: 'zodiac', label: 'Zodiac' },
    { id: 'countdown', label: 'Countdown' },
    { id: 'fun-facts', label: 'Fun Facts' }
  ];

  return (
    <nav className="bg-white shadow-md sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <span className="text-2xl">🎂</span>
            <span className="ml-2 font-bold text-purple-600">BirthdayHub.net</span>
          </div>
          <div className="hidden md:flex space-x-1 overflow-x-auto">
            {sections.map(s => (
              <a
                key={s.id}
                href={`#${s.id}`}
                className={`px-3 py-2 text-sm rounded-md transition-colors ${
                  activeSection === s.id ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100'
                }`}
              >
                {s.label}
              </a>
            ))}
          </div>
        </div>
      </div>
    </nav>
  );
};

const Hero = () => (
  <div className="bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400 text-white py-16 px-4">
    <div className="max-w-4xl mx-auto text-center">
      <h1 className="text-4xl md:text-5xl font-bold mb-4">Discover Everything About Your Birthday</h1>
      <p className="text-xl opacity-90 mb-8">Free birthday calculator tools to find your exact age, zodiac sign, birthstone, famous birthday twins, and more – all in one place.</p>
      <a href="#age-calculator" className="inline-block bg-white text-purple-600 font-semibold px-8 py-3 rounded-full shadow-lg hover:shadow-xl transition-shadow">
        Calculate My Age Now
      </a>
    </div>
  </div>
);

const SectionCard = ({ id, icon, title, children }) => (
  <section id={id} className="scroll-mt-20">
    <div className="bg-white rounded-2xl shadow-lg p-6 md:p-8">
      <div className="flex items-center mb-6">
        <span className="text-3xl mr-3">{icon}</span>
        <h2 className="text-2xl font-bold text-gray-800">{title}</h2>
      </div>
      {children}
    </div>
  </section>
);

const DateInput = ({ label, value, onChange, id }) => (
  <div className="mb-4">
    <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
    <input
      type="date"
      id={id}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
    />
  </div>
);

const Button = ({ onClick, children, variant = 'primary' }) => (
  <button
    onClick={onClick}
    className={`px-6 py-2 rounded-lg font-semibold transition-colors ${
      variant === 'primary' 
        ? 'bg-purple-600 text-white hover:bg-purple-700' 
        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
    }`}
  >
    {children}
  </button>
);

const ResultBox = ({ label, value, icon }) => (
  <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 text-center">
    {icon && <span className="text-2xl">{icon}</span>}
    <div className="text-2xl font-bold text-purple-600">{value}</div>
    <div className="text-sm text-gray-600">{label}</div>
  </div>
);

const ShareButtons = ({ text, onShare }) => {
  const platforms = [
    { name: 'Twitter', icon: '𝕏', color: 'bg-black' },
    { name: 'Facebook', icon: 'f', color: 'bg-blue-600' },
    { name: 'WhatsApp', icon: '📱', color: 'bg-green-500' },
    { name: 'Copy', icon: '📋', color: 'bg-gray-600' }
  ];

  return (
    <div className="flex gap-2 mt-4">
      <span className="text-sm text-gray-600 self-center">Share:</span>
      {platforms.map(p => (
        <button
          key={p.name}
          onClick={() => onShare(p.name, text)}
          className={`${p.color} text-white w-8 h-8 rounded-full flex items-center justify-center text-sm hover:opacity-80 transition-opacity`}
          title={`Share on ${p.name}`}
        >
          {p.icon}
        </button>
      ))}
    </div>
  );
};

// Main Calculator Components
const AgeCalculator = () => {
  const [birthDate, setBirthDate] = useState('');
  const [result, setResult] = useState(null);

  const calculate = () => {
    if (birthDate) {
      setResult(calculateAge(birthDate));
    }
  };

  return (
    <SectionCard id="age-calculator" icon="🎂" title="Birthday & Age Calculator">
      <p className="text-gray-600 mb-6">Calculate your exact age down to the second. Enter your birth date and instantly see how old you are in years, months, weeks, days, hours, minutes, and seconds.</p>
      <div className="max-w-md">
        <DateInput label="Enter Your Birth Date" value={birthDate} onChange={setBirthDate} id="age-birth" />
        <Button onClick={calculate}>Calculate My Age</Button>
      </div>
      {result && (
        <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
          <ResultBox label="Years" value={result.years} />
          <ResultBox label="Months" value={result.months} />
          <ResultBox label="Weeks" value={result.totalWeeks.toLocaleString()} />
          <ResultBox label="Days" value={result.totalDays.toLocaleString()} />
          <ResultBox label="Hours" value={result.totalHours.toLocaleString()} />
          <ResultBox label="Minutes" value={result.totalMinutes.toLocaleString()} />
          <ResultBox label="Seconds" value={result.totalSeconds.toLocaleString()} />
        </div>
      )}
    </SectionCard>
  );
};

const FutureAgeCalculator = () => {
  const [birthDate, setBirthDate] = useState('');
  const [futureDate, setFutureDate] = useState('');
  const [result, setResult] = useState(null);

  const calculate = () => {
    if (birthDate && futureDate) {
      setResult(calculateAge(birthDate, futureDate));
    }
  };

  return (
    <SectionCard id="future-age" icon="🔮" title="Future Age Calculator">
      <p className="text-gray-600 mb-6">Wondering how old you'll be on a specific date? Enter your birth date and any future date to instantly see your age at that moment.</p>
      <div className="max-w-md">
        <DateInput label="Your Birth Date" value={birthDate} onChange={setBirthDate} id="future-birth" />
        <DateInput label="Future Date" value={futureDate} onChange={setFutureDate} id="future-target" />
        <Button onClick={calculate}>Calculate Future Age</Button>
      </div>
      {result && (
        <div className="mt-6 grid grid-cols-3 gap-4 max-w-lg">
          <ResultBox label="Years" value={result.years} />
          <ResultBox label="Months" value={result.months} />
          <ResultBox label="Days" value={result.days} />
        </div>
      )}
    </SectionCard>
  );
};

const DayBornFinder = () => {
  const [birthDate, setBirthDate] = useState('');
  const [result, setResult] = useState(null);

  const calculate = () => {
    if (birthDate) {
      setResult(getDayOfWeek(birthDate));
    }
  };

  return (
    <SectionCard id="day-born" icon="📅" title="What Day of the Week Was I Born?">
      <p className="text-gray-600 mb-6">Find out if you're a Monday's child or a Friday baby with our instant day finder. Discover the exact weekday of your birth plus the famous nursery rhyme meaning.</p>
      <div className="max-w-md">
        <DateInput label="Enter Your Birth Date" value={birthDate} onChange={setBirthDate} id="day-birth" />
        <Button onClick={calculate}>Find My Birth Day</Button>
      </div>
      {result && (
        <div className="mt-6 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-6 max-w-lg">
          <div className="text-center">
            <div className="text-4xl font-bold text-purple-600 mb-2">{result.day}</div>
            <div className="text-gray-600">"{result.day}'s child is {result.meaning.toLowerCase()}"</div>
          </div>
        </div>
      )}
    </SectionCard>
  );
};

const DaysAliveCalculator = () => {
  const [birthDate, setBirthDate] = useState('');
  const [result, setResult] = useState(null);

  const calculate = () => {
    if (birthDate) {
      const age = calculateAge(birthDate);
      const milestones = [10000, 15000, 20000, 25000, 30000];
      const nextMilestone = milestones.find(m => m > age.totalDays) || milestones[milestones.length - 1];
      const daysToMilestone = nextMilestone - age.totalDays;
      setResult({ ...age, nextMilestone, daysToMilestone });
    }
  };

  return (
    <SectionCard id="days-alive" icon="⏱️" title="Age in Days Calculator">
      <p className="text-gray-600 mb-6">How many days old are you? Find the exact number of days you've been alive and discover upcoming milestones like your 10,000th or 20,000th day!</p>
      <div className="max-w-md">
        <DateInput label="Your Birth Date" value={birthDate} onChange={setBirthDate} id="days-birth" />
        <Button onClick={calculate}>Calculate Days Alive</Button>
      </div>
      {result && (
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl">
          <ResultBox label="Total Days Alive" value={result.totalDays.toLocaleString()} icon="🎉" />
          <ResultBox label="Next Milestone" value={result.nextMilestone.toLocaleString() + " days"} icon="🎯" />
          <ResultBox label="Days Until Milestone" value={result.daysToMilestone.toLocaleString()} icon="⏳" />
        </div>
      )}
    </SectionCard>
  );
};

const HalfBirthdayFinder = () => {
  const [birthDate, setBirthDate] = useState('');
  const [result, setResult] = useState(null);

  const calculate = () => {
    if (birthDate) {
      const halfBday = getHalfBirthday(birthDate);
      const today = new Date();
      let nextHalf = new Date(today.getFullYear(), halfBday.getMonth(), halfBday.getDate());
      if (nextHalf < today) nextHalf.setFullYear(nextHalf.getFullYear() + 1);
      const daysUntil = Math.ceil((nextHalf - today) / (1000 * 60 * 60 * 24));
      setResult({ 
        date: halfBday.toLocaleDateString('en-US', { month: 'long', day: 'numeric' }),
        daysUntil 
      });
    }
  };

  return (
    <SectionCard id="half-birthday" icon="🎈" title="Half-Birthday Calculator">
      <p className="text-gray-600 mb-6">Find your half-birthday! A half-birthday falls exactly 6 months after your actual birthday – a fun excuse for an extra celebration.</p>
      <div className="max-w-md">
        <DateInput label="Your Birth Date" value={birthDate} onChange={setBirthDate} id="half-birth" />
        <Button onClick={calculate}>Find My Half-Birthday</Button>
      </div>
      {result && (
        <div className="mt-6 grid grid-cols-2 gap-4 max-w-lg">
          <ResultBox label="Your Half-Birthday" value={result.date} icon="🎂" />
          <ResultBox label="Days Until Next" value={result.daysUntil} icon="📆" />
        </div>
      )}
    </SectionCard>
  );
};

const ZodiacFinder = () => {
  const [birthDate, setBirthDate] = useState('');
  const [result, setResult] = useState(null);

  const calculate = () => {
    if (birthDate) {
      setResult(getZodiacInfo(birthDate));
    }
  };

  const zodiacEmojis = {
    Aries: '♈', Taurus: '♉', Gemini: '♊', Cancer: '♋', Leo: '♌', Virgo: '♍',
    Libra: '♎', Scorpio: '♏', Sagittarius: '♐', Capricorn: '♑', Aquarius: '♒', Pisces: '♓'
  };

  return (
    <SectionCard id="zodiac" icon="✨" title="Zodiac Sign, Birthstone & Birth Flower Finder">
      <p className="text-gray-600 mb-6">Discover your zodiac sign, birthstone, and birth flower based on your birthday. Learn your astrological traits and symbolic gems.</p>
      <div className="max-w-md">
        <DateInput label="Enter Your Birth Date" value={birthDate} onChange={setBirthDate} id="zodiac-birth" />
        <Button onClick={calculate}>Reveal My Zodiac & Birthstone</Button>
      </div>
      {result && (
        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-gradient-to-br from-indigo-100 to-purple-100 rounded-xl p-6 text-center">
            <div className="text-4xl mb-2">{zodiacEmojis[result.sign]}</div>
            <div className="text-xl font-bold text-purple-600">{result.sign}</div>
            <div className="text-sm text-gray-600 mt-1">{result.element} Sign</div>
            <div className="text-sm text-gray-500 mt-2">{result.traits}</div>
          </div>
          <div className="bg-gradient-to-br from-pink-100 to-red-100 rounded-xl p-6 text-center">
            <div className="text-4xl mb-2">💎</div>
            <div className="text-xl font-bold text-pink-600">{result.birthstone}</div>
            <div className="text-sm text-gray-600 mt-1">Your Birthstone</div>
          </div>
          <div className="bg-gradient-to-br from-green-100 to-teal-100 rounded-xl p-6 text-center">
            <div className="text-4xl mb-2">🌸</div>
            <div className="text-xl font-bold text-green-600">{result.flower}</div>
            <div className="text-sm text-gray-600 mt-1">Your Birth Flower</div>
          </div>
        </div>
      )}
    </SectionCard>
  );
};

const BirthdayCountdown = () => {
  const [birthDate, setBirthDate] = useState('');
  const [countdown, setCountdown] = useState(null);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    if (!isRunning || !birthDate) return;

    const timer = setInterval(() => {
      const nextBday = getNextBirthday(birthDate);
      const now = new Date();
      const diff = nextBday - now;

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      const birth = new Date(birthDate);
      const turningAge = nextBday.getFullYear() - birth.getFullYear();

      setCountdown({ days, hours, minutes, seconds, turningAge, nextDate: nextBday.toLocaleDateString() });
    }, 1000);

    return () => clearInterval(timer);
  }, [isRunning, birthDate]);

  const startCountdown = () => {
    if (birthDate) setIsRunning(true);
  };

  return (
    <SectionCard id="countdown" icon="⏰" title="Birthday Countdown Timer">
      <p className="text-gray-600 mb-6">How long until your next birthday? Start a live countdown and watch the days, hours, minutes, and seconds tick down to your special day!</p>
      <div className="max-w-md">
        <DateInput label="Your Birth Date" value={birthDate} onChange={setBirthDate} id="countdown-birth" />
        <Button onClick={startCountdown}>Start My Countdown</Button>
      </div>
      {countdown && (
        <div className="mt-6">
          <div className="text-center mb-4">
            <span className="text-gray-600">Counting down to </span>
            <span className="font-semibold text-purple-600">{countdown.nextDate}</span>
            <span className="text-gray-600"> when you turn </span>
            <span className="font-semibold text-purple-600">{countdown.turningAge}</span>
          </div>
          <div className="grid grid-cols-4 gap-4 max-w-xl mx-auto">
            <div className="bg-gradient-to-br from-purple-500 to-pink-500 text-white rounded-xl p-4 text-center">
              <div className="text-3xl font-bold">{countdown.days}</div>
              <div className="text-sm opacity-80">Days</div>
            </div>
            <div className="bg-gradient-to-br from-pink-500 to-orange-500 text-white rounded-xl p-4 text-center">
              <div className="text-3xl font-bold">{countdown.hours}</div>
              <div className="text-sm opacity-80">Hours</div>
            </div>
            <div className="bg-gradient-to-br from-orange-500 to-yellow-500 text-white rounded-xl p-4 text-center">
              <div className="text-3xl font-bold">{countdown.minutes}</div>
              <div className="text-sm opacity-80">Minutes</div>
            </div>
            <div className="bg-gradient-to-br from-yellow-500 to-green-500 text-white rounded-xl p-4 text-center">
              <div className="text-3xl font-bold">{countdown.seconds}</div>
              <div className="text-sm opacity-80">Seconds</div>
            </div>
          </div>
        </div>
      )}
    </SectionCard>
  );
};

const BirthdayFunFacts = () => {
  const [birthDate, setBirthDate] = useState('');
  const [name, setName] = useState('');
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);

  const generate = () => {
    if (birthDate) {
      setLoading(true);
      // Simulate API call delay
      setTimeout(() => {
        setResult(getFunFacts(birthDate));
        setLoading(false);
      }, 1500);
    }
  };

  const handleShare = (platform, text) => {
    const shareText = `🎂 I discovered my birthday fun facts on BirthdayHub.net! I share my birthday with ${result?.famousPeople[0]}! Check yours:`;
    const url = 'https://birthdayhub.net';

    const urls = {
      Twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(url)}`,
      Facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}"e=${encodeURIComponent(shareText)}`,
      WhatsApp: `https://wa.me/?text=${encodeURIComponent(shareText + ' ' + url)}`,
      Copy: null
    };

    if (platform === 'Copy') {
      navigator.clipboard?.writeText(shareText + ' ' + url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } else if (urls[platform]) {
      window.open(urls[platform], '_blank', 'width=600,height=400');
    }
  };

  return (
    <SectionCard id="fun-facts" icon="🎉" title="Birthday Fun Facts">
      <p className="text-gray-600 mb-6">Uncover fascinating AI-powered facts about your birthday! See which celebrities share your birth date, major world events, and personalized fun statistics.</p>
      <div className="max-w-md">
        <DateInput label="Enter Your Full Birth Date" value={birthDate} onChange={setBirthDate} id="facts-birth" />
        <div className="mb-4">
          <label htmlFor="facts-name" className="block text-sm font-medium text-gray-700 mb-1">Your Name (optional)</label>
          <input
            type="text"
            id="facts-name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter your name for personalized results"
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
        <div className="flex gap-2">
          <Button onClick={generate}>Discover My Birthday Facts</Button>
          {result && <Button onClick={generate} variant="secondary">Generate New Facts</Button>}
        </div>
      </div>

      {loading && (
        <div className="mt-6 text-center">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-purple-500 border-t-transparent"></div>
          <p className="mt-2 text-gray-600">Generating your birthday facts...</p>
        </div>
      )}

      {result && !loading && (
        <div className="mt-6 space-y-4">
          <div className="bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-6">
            <h3 className="font-bold text-purple-700 mb-3">🌟 Famous People Born This Day</h3>
            <div className="flex flex-wrap gap-2">
              {result.famousPeople.map((person, i) => (
                <span key={i} className="bg-white px-3 py-1 rounded-full text-sm shadow-sm">{person}</span>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-blue-50 rounded-xl p-4">
              <h3 className="font-bold text-blue-700 mb-2">📜 Historical Event</h3>
              <p className="text-gray-700">{result.historicalEvent}</p>
            </div>
            <div className="bg-green-50 rounded-xl p-4">
              <h3 className="font-bold text-green-700 mb-2">🎵 Music & Movies</h3>
              <p className="text-gray-700">{result.numberOneSong}</p>
            </div>
          </div>

          <div className="bg-yellow-50 rounded-xl p-4">
            <h3 className="font-bold text-yellow-700 mb-2">📊 Fun Statistic</h3>
            <p className="text-gray-700">{result.statistic}</p>
          </div>

          <ShareButtons text="birthday facts" onShare={handleShare} />
          {copied && <span className="text-sm text-green-600 ml-2">✓ Copied to clipboard!</span>}
        </div>
      )}
    </SectionCard>
  );
};

const FAQ = () => {
  const [openIndex, setOpenIndex] = useState(null);

  const faqs = [
    { q: 'How do I calculate my exact age?', a: 'Enter your birth date in our Birthday & Age Calculator above. It instantly calculates your age in years, months, weeks, days, hours, minutes, and seconds.' },
    { q: 'What day of the week was I born on?', a: "Use our 'What Day Was I Born' tool – just enter your birth date and we'll show you the exact weekday along with its traditional nursery rhyme meaning." },
    { q: 'How many days have I been alive?', a: 'Our Age in Days Calculator shows exactly how many days you\'ve lived since birth, plus highlights upcoming milestones like your 10,000th day alive.' },
    { q: 'When is my half-birthday?', a: 'Your half-birthday is exactly 6 months after your birthday. Enter your birth date in our Half-Birthday Finder to see the exact date.' },
    { q: 'Are these birthday calculators free?', a: 'Yes! All tools on BirthdayHub.net are 100% free with no signup required.' }
  ];

  return (
    <section className="bg-white rounded-2xl shadow-lg p-6 md:p-8">
      <h2 className="text-2xl font-bold text-gray-800 mb-6">❓ Frequently Asked Questions</h2>
      <div className="space-y-3">
        {faqs.map((faq, i) => (
          <div key={i} className="border border-gray-200 rounded-lg overflow-hidden">
            <button
              onClick={() => setOpenIndex(openIndex === i ? null : i)}
              className="w-full text-left px-4 py-3 bg-gray-50 hover:bg-gray-100 flex justify-between items-center"
            >
              <span className="font-medium text-gray-800">{faq.q}</span>
              <span className="text-gray-500">{openIndex === i ? '−' : '+'}</span>
            </button>
            {openIndex === i && (
              <div className="px-4 py-3 text-gray-600">{faq.a}</div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="bg-gray-800 text-white py-8 px-4 mt-12 rounded-t-3xl">
    <div className="max-w-4xl mx-auto text-center">
      <div className="flex justify-center items-center mb-4">
        <span className="text-3xl">🎂</span>
        <span className="ml-2 text-xl font-bold">BirthdayHub.net</span>
      </div>
      <p className="text-gray-400 mb-4">Free Birthday Calculator & Age Tools</p>
      <div className="flex justify-center gap-6 text-sm text-gray-400 mb-4">
        <a href="#" className="hover:text-white">Privacy Policy</a>
        <a href="#" className="hover:text-white">Terms of Use</a>
        <a href="#" className="hover:text-white">Contact</a>
      </div>
      <p className="text-sm text-gray-500">© 2024 BirthdayHub.net – All calculations are for entertainment and informational purposes.</p>
    </div>
  </footer>
);

function App() {
  const [activeSection, setActiveSection] = useState('age-calculator');

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      { threshold: 0.3 }
    );

    document.querySelectorAll('section[id]').forEach(section => {
      observer.observe(section);
    });

    return () => observer.disconnect();
  }, []);

  return (
    <div className="min-h-screen bg-gray-100">
      <Navigation activeSection={activeSection} />
      <Hero />
      <main className="max-w-4xl mx-auto px-4 py-8 space-y-8">
        <AgeCalculator />
        <FutureAgeCalculator />
        <DayBornFinder />
        <DaysAliveCalculator />
        <HalfBirthdayFinder />
        <ZodiacFinder />
        <BirthdayCountdown />
        <BirthdayFunFacts />
        <FAQ />
      </main>
      <Footer />
    </div>
  );
}