const { useState, useEffect, useRef } = React;

// ── Destination data ──────────────────────────────────────────────────────────
const DESTINATIONS = [
  { flag: '🇬🇧', name: 'United Kingdom', unis: '160+ Universities', tag: 'Top Choice' },
  { flag: '🇺🇸', name: 'United States', unis: '400+ Universities', tag: 'Most Popular' },
  { flag: '🇨🇦', name: 'Canada', unis: '100+ Universities', tag: 'PR Friendly' },
  { flag: '🇦🇺', name: 'Australia', unis: '120+ Universities', tag: 'Great Lifestyle' },
  { flag: '🇩🇪', name: 'Germany', unis: '80+ Universities', tag: 'No Tuition' },
  { flag: '🇦🇪', name: 'Dubai', unis: '40+ Universities', tag: 'Tax Free' },
  { flag: '🇮🇪', name: 'Ireland', unis: '30+ Universities', tag: 'EU Access' },
];

const SERVICES = [
  { icon: 'Graduation', title: 'Education Consultancy', desc: 'Expert guidance on university selection, admissions, scholarships, and SOP writing for 1,000+ partner institutions worldwide.' },
  { icon: 'Globe', title: 'Immigration Services', desc: 'We navigate complex immigration procedures — from documentation to legalities — ensuring a smooth transition to your destination country.' },
  { icon: 'FileCheck', title: 'Visa Services', desc: 'From student visas to work permits, our experienced team crafts flawless applications that maximise your approval chances.' },
  { icon: 'DollarSign', title: 'Forex Services', desc: 'Competitive exchange rates and seamless fund transfers so you\'re financially prepared from day one on campus.' },
];

const TESTIMONIALS = [
  { name: 'Rydham Lamba', uni: 'Arizona State University, USA', course: 'W P Carey School of Business', quote: 'Mr Hemant Kapur provided the best guidance throughout the entire process. I am truly thankful for the support and expertise that made my dream a reality.', stars: 5 },
  { name: 'Karan Kumar', uni: 'University of Hertfordshire, UK', course: 'BSc Adult Nursing', quote: 'My heartfelt gratitude to Mr. Hemant Kapur. His deep understanding of the application process, eye for detail, and prompt responses made my journey incredibly smooth.', stars: 5 },
  { name: 'Aayushi Jain', uni: 'Arizona State University, USA', course: 'W P Carey School of Business', quote: 'Mr Hemant Kapur is an amazing guide and great person. Thanks to his support, I am now living my dream of studying abroad. Could not have done it without Tureen Ventures.', stars: 5 },
];

// ── Rotating University Card ──────────────────────────────────────────────────
const NEXT_YEAR = new Date().getFullYear() + 1;
const UNI_LIST = [
  { emoji: '🎓', name: 'University of Manchester', course: 'MSc Data Science', status: 'Shortlisted', statusColor: '#16A34A', statusBg: '#DCFCE7', flag: '🇬🇧', country: 'UK' },
  { emoji: '🏛️', name: 'University of Toronto', course: 'MBA Finance', status: 'Applied', statusColor: '#2563EB', statusBg: '#DBEAFE', flag: '🇨🇦', country: 'Canada' },
  { emoji: '🌟', name: 'Arizona State University', course: 'MS Computer Science', status: 'Offer Received', statusColor: '#7C3AED', statusBg: '#EDE9FE', flag: '🇺🇸', country: 'USA' },
  { emoji: '🎯', name: 'University of Melbourne', course: 'MEng Mechanical', status: 'Shortlisted', statusColor: '#16A34A', statusBg: '#DCFCE7', flag: '🇦🇺', country: 'Australia' },
  { emoji: '📚', name: 'TU Munich', course: 'MSc Electrical Eng.', status: 'Applied', statusColor: '#2563EB', statusBg: '#DBEAFE', flag: '🇩🇪', country: 'Germany' },
  { emoji: '🌍', name: 'University of Edinburgh', course: 'MSc Artificial Intelligence', status: 'Offer Received', statusColor: '#7C3AED', statusBg: '#EDE9FE', flag: '🇬🇧', country: 'UK' },
  { emoji: '🏆', name: 'American University of Dubai', course: 'MBA Strategy', status: 'Shortlisted', statusColor: '#16A34A', statusBg: '#DCFCE7', flag: '🇦🇪', country: 'Dubai' },
  { emoji: '🌐', name: 'University College Dublin', course: 'MSc Marketing', status: 'Offer Received', statusColor: '#7C3AED', statusBg: '#EDE9FE', flag: '🇮🇪', country: 'Ireland' },
];

function VisaPill({ idx, visible }) {
  const uni = UNI_LIST[idx];
  return (
    <div style={{
      position: 'absolute', top: 0, right: 20,
      background: 'var(--accent)', color: '#fff',
      padding: '10px 16px', borderRadius: 14, fontSize: 13, fontWeight: 600,
      boxShadow: '0 8px 24px rgba(233,168,76,0.4)',
      animation: 'float 3s ease-in-out infinite',
      transition: 'opacity 0.35s ease, transform 0.35s ease',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(-6px)',
    }}>
      {uni.flag} Visa Approved! 🎉
    </div>
  );
}

function RotatingUniCard({ idx, visible }) {
  const uni = UNI_LIST[idx];

  return (
    <div style={{
      position: 'absolute', top: 30, left: 0, right: 60,
      background: 'rgba(255,255,255,0.97)', borderRadius: 20,
      padding: 24, boxShadow: '0 24px 60px rgba(0,0,0,0.3)',
    }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 }}>Your Application</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
        {[{ label: 'Profile', status: '✓', done: true }, { label: 'Documents', status: '✓', done: true }, { label: 'University', status: '●', done: false }, { label: 'Visa', status: '○', done: false }].map((s, i) => (
          <div key={s.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: s.done ? 'var(--accent)' : i === 2 ? 'var(--primary)' : 'rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: s.done || i === 2 ? '#fff' : 'rgba(0,0,0,0.3)', fontWeight: 700 }}>{s.status}</div>
            <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 500 }}>{s.label}</span>
          </div>
        ))}
      </div>
      <div style={{
        background: 'var(--bg)', borderRadius: 10, padding: '12px 16px',
        display: 'flex', alignItems: 'center', gap: 12,
        transition: 'opacity 0.35s ease, transform 0.35s ease',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(6px)',
      }}>
        <div style={{ fontSize: 22, flexShrink: 0 }}>{uni.emoji}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{uni.name}</div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{uni.course} · Sept {NEXT_YEAR} intake</div>
        </div>
        <div style={{ marginLeft: 'auto', fontSize: 11, fontWeight: 700, color: uni.statusColor, background: uni.statusBg, padding: '3px 10px', borderRadius: 6, flexShrink: 0 }}>{uni.status}</div>
      </div>
    </div>
  );
}

// ── Hero ──────────────────────────────────────────────────────────────────────
function Hero({ navigate }) {
  const words = ['World-Class', 'Dream', 'Future'];
  const [wordIdx, setWordIdx] = useState(0);
  const [fade, setFade] = useState(true);
  const [uniIdx, setUniIdx] = useState(0);
  const [uniVisible, setUniVisible] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setUniVisible(false);
      setTimeout(() => {
        setUniIdx(i => (i + 1) % UNI_LIST.length);
        setUniVisible(true);
      }, 380);
    }, 3200);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setFade(false);
      setTimeout(() => { setWordIdx(i => (i + 1) % words.length); setFade(true); }, 300);
    }, 2500);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{
      minHeight: '100vh', background: 'linear-gradient(160deg, #2d3d70 0%, #3B4F8C 55%, #4a60a0 100%)',
      position: 'relative', overflow: 'hidden',
      display: 'flex', alignItems: 'center',
    }}>
      {/* Warm gradient orbs */}
      <div style={{ position: 'absolute', top: '-10%', right: '-5%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(233,168,76,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: '-15%', left: '-8%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, rgba(59,168,150,0.12) 0%, transparent 70%)', pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 24px 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', width: '100%' }} className="hero-grid">
        {/* Left */}
        <div style={{ animation: 'fadeUp 0.7s ease both' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(233,168,76,0.18)', color: 'var(--accent)', fontSize: 12, fontWeight: 700, padding: '6px 14px', borderRadius: 20, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 24 }}>
            ✦ Study Abroad Experts Since 2015
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(38px, 5.5vw, 64px)', color: '#fff', lineHeight: 1.1, marginBottom: 8, letterSpacing: '-1px' }}>
            Your Passport to a
          </h1>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(38px, 5.5vw, 64px)', lineHeight: 1.1, marginBottom: 24, letterSpacing: '-1px' }}>
            <span style={{ color: 'var(--accent)', transition: 'opacity 0.3s', opacity: fade ? 1 : 0, display: 'inline-block' }}>{words[wordIdx]}</span>
            <span style={{ color: '#fff' }}> Education</span>
          </h1>
          <p style={{ fontSize: 'clamp(15px, 2vw, 18px)', color: 'rgba(255,255,255,0.72)', lineHeight: 1.75, maxWidth: 460, marginBottom: 36 }}>
            Expert guidance for university admissions, visa processing, immigration & forex. Trusted by <strong style={{ color: '#fff' }}>2,500+ students</strong> across 7 countries.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Btn variant="primary" size="lg" onClick={() => navigate('signup')}>Start Free Consultation <Icons.ArrowRight /></Btn>
            <Btn variant="ghost" size="lg" style={{ color: 'rgba(255,255,255,0.85)', border: '1.5px solid rgba(255,255,255,0.25)' }} onClick={() => navigate('plans')}>View Plans</Btn>
          </div>
          {/* Trust badges */}
          <div style={{ display: 'flex', gap: 24, marginTop: 40, flexWrap: 'wrap' }}>
            {['🏆 1,000+ Partner Universities', '✅ End-to-End Visa Support', '⚡ Free Initial Consultation'].map(b => (
              <span key={b} style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', fontWeight: 500 }}>{b}</span>
            ))}
          </div>
        </div>
        {/* Right — card collage */}
        <div style={{ position: 'relative', height: 480, animation: 'fadeUp 0.9s ease both' }} className="hero-collage">
          {/* Main application card */}
          <RotatingUniCard idx={uniIdx} visible={uniVisible} />
          {/* Floating destination pill — synced with rotating card */}
          <VisaPill idx={uniIdx} visible={uniVisible} />
          {/* Destinations mini-cards */}
          <div style={{ position: 'absolute', bottom: 10, left: 0, right: 0, display: 'flex', gap: 10, overflowX: 'auto' }}>
            {DESTINATIONS.slice(0, 4).map(d => (
              <div key={d.name} style={{ flex: '0 0 auto', background: 'rgba(255,255,255,0.12)', backdropFilter: 'blur(10px)', borderRadius: 14, padding: '12px 16px', border: '1px solid rgba(255,255,255,0.15)', textAlign: 'center', minWidth: 100 }}>
                <div style={{ fontSize: 24 }}>{d.flag}</div>
                <div style={{ color: '#fff', fontSize: 12, fontWeight: 600, marginTop: 4 }}>{d.name.split(' ')[0]}</div>
                <div style={{ color: 'rgba(255,255,255,0.55)', fontSize: 10, marginTop: 2 }}>{d.unis}</div>
              </div>
            ))}
          </div>
          {/* Advisor bubble */}
          <div style={{ position: 'absolute', bottom: 130, right: -20, background: '#fff', borderRadius: 16, padding: '12px 16px', boxShadow: '0 12px 32px rgba(0,0,0,0.2)', fontSize: 12, maxWidth: 180, animation: 'float 4s ease-in-out infinite 1s' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 11, fontWeight: 700 }}>HK</div>
              <div>
                <div style={{ fontWeight: 600, color: 'var(--primary)', fontSize: 11 }}>Hemant Kapur</div>
                <div style={{ color: 'var(--text-muted)', fontSize: 10 }}>Head Advisor</div>
              </div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', fontStyle: 'italic' }}>"Your profile is a great match for top UK universities!"</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Stats ─────────────────────────────────────────────────────────────────────
function StatsBar() {
  return (
    <Section bg="var(--surface)" style={{ padding: '64px 24px', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 48, textAlign: 'center' }} className="stats-grid">
        <StatCounter end={2500} label="Students Placed Abroad" />
        <StatCounter end={1000} label="Partner Universities" />
        <StatCounter end={7} label="Study Destinations" suffix="" />
        <StatCounter end={98} label="Visa Success Rate" suffix="%" />
      </div>
    </Section>
  );
}

// ── Services ──────────────────────────────────────────────────────────────────
function ServicesSection() {
  return (
    <Section>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <SectionLabel>Our Services</SectionLabel>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 42px)', color: 'var(--primary)', lineHeight: 1.2 }}>Everything you need,<br/>under one roof</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
        {SERVICES.map((s, i) => {
          const IconComp = Icons[s.icon];
          return (
            <ServiceCard key={s.title} service={s} IconComp={IconComp} delay={i * 80} />
          );
        })}
      </div>
    </Section>
  );
}

function ServiceCard({ service, IconComp, delay }) {
  const [hov, setHov] = useState(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        background: '#fff', borderRadius: 20, padding: '36px 32px',
        border: '1px solid var(--border)',
        boxShadow: hov ? '0 12px 36px rgba(0,0,0,0.08)' : 'none',
        transform: hov ? 'translateY(-4px)' : 'none',
        transition: 'all 0.25s ease', cursor: 'default',
      }}>
      <div style={{ width: 52, height: 52, borderRadius: 14, background: hov ? 'var(--accent)' : 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20, transition: 'background 0.25s', color: hov ? '#fff' : 'var(--primary)' }}>
        <IconComp />
      </div>
      <h3 style={{ fontWeight: 700, fontSize: 18, color: 'var(--primary)', marginBottom: 10 }}>{service.title}</h3>
      <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.7 }}>{service.desc}</p>
    </div>
  );
}

// ── How It Works ──────────────────────────────────────────────────────────────
function HowItWorks({ navigate }) {
  const steps = [
    { num: '01', title: 'Free Consultation', desc: 'Tell us your goals, budget, and preferred destinations. We\'ll map out your ideal path.' },
    { num: '02', title: 'Profile & Shortlisting', desc: 'We evaluate your academic profile and shortlist the best-fit universities for you.' },
    { num: '03', title: 'Application Support', desc: 'From SOP writing to document prep — we handle every detail of your applications.' },
    { num: '04', title: 'Visa & Departure', desc: 'Our team ensures flawless visa filing and pre-departure briefings so you arrive ready.' },
  ];
  return (
    <Section bg="var(--primary)" style={{ padding: 'clamp(48px, 8vw, 96px) 24px' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(233,168,76,0.2)', color: 'var(--accent)', fontSize: 11, fontWeight: 700, padding: '5px 14px', borderRadius: 20, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 16 }}>How It Works</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 42px)', color: '#fff', lineHeight: 1.2 }}>Your journey in four simple steps</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 0, position: 'relative' }}>
        {steps.map((step, i) => (
          <div key={step.num} style={{ textAlign: 'center', padding: '0 24px', position: 'relative' }}>
            {i < steps.length - 1 && <div style={{ position: 'absolute', top: 28, left: '60%', right: '-40%', height: 1, background: 'rgba(233,168,76,0.3)', zIndex: 0 }} className="step-connector" />}
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px', fontFamily: 'var(--font-display)', fontSize: 20, color: '#fff', position: 'relative', zIndex: 1 }}>{step.num}</div>
            <h3 style={{ fontWeight: 700, fontSize: 17, color: '#fff', marginBottom: 10 }}>{step.title}</h3>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.62)', lineHeight: 1.7 }}>{step.desc}</p>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 48 }}>
        <Btn variant="primary" size="lg" onClick={() => navigate('signup')}>Begin Your Journey <Icons.ArrowRight /></Btn>
      </div>
    </Section>
  );
}

// ── Destinations ──────────────────────────────────────────────────────────────
function DestinationsSection() {
  return (
    <Section>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <SectionLabel>Destinations</SectionLabel>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 42px)', color: 'var(--primary)', lineHeight: 1.2 }}>Where will your story begin?</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 16 }}>
        {DESTINATIONS.map(d => <DestCard key={d.name} d={d} />)}
      </div>
    </Section>
  );
}

function DestCard({ d }) {
  const [hov, setHov] = useState(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        background: hov ? 'var(--primary)' : '#fff', border: '1px solid var(--border)',
        borderRadius: 18, padding: '24px 16px', textAlign: 'center', cursor: 'pointer',
        transform: hov ? 'translateY(-4px)' : 'none',
        boxShadow: hov ? '0 12px 36px rgba(0,0,0,0.12)' : '0 2px 8px rgba(0,0,0,0.04)',
        transition: 'all 0.22s ease',
      }}>
      <div style={{ fontSize: 36, marginBottom: 10 }}>{d.flag}</div>
      <div style={{ fontWeight: 700, fontSize: 14, color: hov ? '#fff' : 'var(--primary)', marginBottom: 4 }}>{d.name}</div>
      <div style={{ fontSize: 11, color: hov ? 'rgba(255,255,255,0.6)' : 'var(--text-muted)', marginBottom: 8 }}>{d.unis}</div>
      <div style={{ display: 'inline-block', fontSize: 10, fontWeight: 700, padding: '3px 10px', borderRadius: 20, background: hov ? 'rgba(233,168,76,0.3)' : 'var(--bg)', color: hov ? 'var(--accent)' : 'var(--text-muted)', letterSpacing: '0.06em' }}>{d.tag}</div>
    </div>
  );
}

// ── Testimonials ──────────────────────────────────────────────────────────────
function TestimonialsSection() {
  return (
    <Section bg="var(--surface)" style={{ padding: 'clamp(64px, 10vw, 120px) 24px', borderTop: '1px solid var(--border)' }}>
      <div style={{ textAlign: 'center', marginBottom: 52 }}>
        <SectionLabel>Student Stories</SectionLabel>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 42px)', color: 'var(--primary)', lineHeight: 1.2 }}>Dreams turned into<br/>reality, every day</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
        {TESTIMONIALS.map((t, i) => <TestCard key={t.name} t={t} />)}
      </div>
    </Section>
  );
}

function TestCard({ t }) {
  const initials = t.name.split(' ').map(n => n[0]).join('');
  return (
    <div style={{ background: '#fff', borderRadius: 20, padding: '32px 28px', border: '1px solid var(--border)' }}>
      <div style={{ display: 'flex', gap: 2, marginBottom: 16 }}>
        {[...Array(t.stars)].map((_, i) => <span key={i} style={{ color: 'var(--accent)', fontSize: 14 }}>★</span>)}
      </div>
      <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.75, marginBottom: 20, fontStyle: 'italic' }}>"{t.quote}"</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14 }}>{initials}</div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--primary)' }}>{t.name}</div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t.uni}</div>
          <div style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600 }}>{t.course}</div>
        </div>
      </div>
    </div>
  );
}

// ── CTA Banner ────────────────────────────────────────────────────────────────
function CTABanner({ navigate }) {
  return (
    <Section>
      <div style={{ background: 'linear-gradient(140deg, #2d3d70 0%, #3B4F8C 100%)', borderRadius: 24, padding: 'clamp(40px, 6vw, 72px) clamp(24px, 6vw, 80px)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 32, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -60, right: -60, width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle, rgba(233,168,76,0.15) 0%, transparent 70%)' }} />
        <div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(24px, 3.5vw, 38px)', color: '#fff', lineHeight: 1.2, marginBottom: 12 }}>Ready to study abroad?<br/>Let's make it happen.</h2>
          <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.65)' }}>Join 2,500+ students who trusted Tureen Ventures with their future.</p>
        </div>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <Btn variant="primary" size="lg" onClick={() => navigate('signup')}>Create Free Account <Icons.ArrowRight /></Btn>
          <Btn variant="ghost" size="lg" style={{ border: '1.5px solid rgba(255,255,255,0.25)', color: 'rgba(255,255,255,0.85)' }}>Talk to an Expert</Btn>
        </div>
      </div>
    </Section>
  );
}

// ── Landing Page ──────────────────────────────────────────────────────────────
function LandingPage({ navigate }) {
  return (
    <div>
      <Hero navigate={navigate} />
      <StatsBar />
      <ServicesSection />
      <HowItWorks navigate={navigate} />
      <DestinationsSection />
      <TestimonialsSection />
      <CTABanner navigate={navigate} />
    </div>
  );
}

Object.assign(window, { LandingPage });