const { useState } = React;

// ── About Page ─────────────────────────────────────────────────────────────────
function AboutPage({ navigate }) {
  const team = [
    { name: 'Hemant Kapur', role: 'Founder & Head Advisor', exp: '15+ years', initials: 'HK', bio: "With over 15 years guiding students to top universities across UK, USA, Canada and beyond, Hemant's expertise and personal attention have made Tureen Ventures a trusted name in overseas education." },
    { name: 'Priya Sharma', role: 'Visa & Immigration Specialist', exp: '10+ years', initials: 'PS', bio: 'Priya leads our visa and immigration division, having processed thousands of successful applications with an industry-leading approval rate.' },
    { name: 'Arjun Mehta', role: 'University Relations Manager', exp: '8+ years', initials: 'AM', bio: 'Arjun manages our partnerships with 1,000+ universities worldwide, ensuring students get the best admissions outcomes.' },
  ];
  const values = [
    { icon: '🎯', title: 'Student First', desc: 'Every decision we make is guided by what\'s best for the student — not what\'s easiest for us.' },
    { icon: '🔍', title: 'Transparency', desc: 'No hidden fees, no false promises. We give you honest guidance from day one.' },
    { icon: '🤝', title: 'Personal Touch', desc: 'You\'re not a number here. Every student gets a dedicated advisor who knows your story.' },
    { icon: '🏆', title: 'Excellence', desc: 'A 98% visa success rate and 2,500+ successful placements speak for themselves.' },
  ];

  return (
    <div style={{ paddingTop: 68 }}>
      {/* Hero */}
      <div style={{ background: 'var(--primary)', padding: 'clamp(60px, 10vw, 120px) 24px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(233,168,76,0.12) 0%, transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative', zIndex: 1, maxWidth: 700, margin: '0 auto' }}>
          <SectionLabel style={{ background: 'rgba(233,168,76,0.2)', color: 'var(--accent)' }}>About Tureen Ventures</SectionLabel>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(34px, 5vw, 56px)', color: '#fff', lineHeight: 1.15, margin: '16px 0 20px' }}>We turn study abroad dreams into reality</h1>
          <p style={{ fontSize: 'clamp(15px, 2vw, 18px)', color: 'rgba(255,255,255,0.65)', lineHeight: 1.75 }}>Founded in New Delhi, Tureen Ventures has guided over 2,500 students to universities across 7 countries — and we're just getting started.</p>
        </div>
      </div>

      {/* Mission */}
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="about-grid">
          <div>
            <SectionLabel>Our Mission</SectionLabel>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 3.5vw, 38px)', color: 'var(--primary)', lineHeight: 1.2, marginBottom: 20 }}>Democratising access to world-class education</h2>
            <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.8, marginBottom: 16 }}>We believe every ambitious student deserves a fair shot at a top international university — regardless of where they're from or who they know.</p>
            <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.8, marginBottom: 28 }}>Tureen Ventures was founded to bridge the gap between aspiration and opportunity, providing the expert guidance, connections, and support that used to be reserved for the privileged few.</p>
            <Btn variant="dark" size="md" onClick={() => navigate('signup')}>Start Your Journey <Icons.ArrowRight /></Btn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[{ n: '2015', l: 'Founded' }, { n: '2,500+', l: 'Students placed' }, { n: '7', l: 'Countries' }, { n: '98%', l: 'Visa success rate' }].map(s => (
              <div key={s.l} style={{ background: 'var(--surface)', borderRadius: 18, padding: '28px 24px', border: '1.5px solid var(--border)', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, color: 'var(--accent)', lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 6, fontWeight: 500 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* Values */}
      <Section bg="var(--bg)">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionLabel>Our Values</SectionLabel>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 3.5vw, 38px)', color: 'var(--primary)' }}>What we stand for</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
          {values.map(v => (
            <div key={v.title} style={{ background: '#fff', borderRadius: 20, padding: '28px 24px', border: '1.5px solid var(--border)' }}>
              <div style={{ fontSize: 36, marginBottom: 14 }}>{v.icon}</div>
              <h3 style={{ fontWeight: 700, fontSize: 17, color: 'var(--primary)', marginBottom: 10 }}>{v.title}</h3>
              <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.7 }}>{v.desc}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* Team */}
      <Section>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SectionLabel>Meet the Team</SectionLabel>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 3.5vw, 38px)', color: 'var(--primary)' }}>The experts behind your success</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
          {team.map(m => (
            <div key={m.name} style={{ background: '#fff', borderRadius: 22, overflow: 'hidden', border: '1.5px solid var(--border)', boxShadow: '0 4px 16px rgba(0,0,0,0.05)' }}>
              <div style={{ height: 140, background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 28, color: '#fff', border: '4px solid rgba(255,255,255,0.2)' }}>{m.initials}</div>
                <div style={{ position: 'absolute', bottom: -14, right: 20, background: 'var(--accent)', color: '#fff', fontSize: 11, fontWeight: 700, padding: '4px 12px', borderRadius: 20 }}>{m.exp} exp.</div>
              </div>
              <div style={{ padding: '28px 24px 24px' }}>
                <h3 style={{ fontWeight: 700, fontSize: 17, color: 'var(--primary)', marginBottom: 4 }}>{m.name}</h3>
                <div style={{ fontSize: 13, color: 'var(--accent)', fontWeight: 600, marginBottom: 12 }}>{m.role}</div>
                <p style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.7 }}>{m.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

// ── Plans Page ─────────────────────────────────────────────────────────────────
function PlansPage({ navigate }) {
  const [annual, setAnnual] = useState(false);
  const plans = [
    {
      name: 'Starter', price: annual ? 0 : 0, tag: 'Free forever',
      color: 'var(--border)', accent: 'var(--text-muted)', highlight: false,
      desc: 'Perfect for students just beginning to explore study abroad options.',
      features: ['Free profile evaluation', 'Destination guide access', 'University shortlist (up to 3)', 'Email support (48h response)', 'Document checklist'],
      notIncluded: ['SOP / LOR review', 'Visa filing support', 'Dedicated advisor', 'Priority support'],
      cta: 'Get Started Free',
    },
    {
      name: 'Standard', price: annual ? 24999 : 29999, tag: 'Most Popular',
      color: 'var(--accent)', accent: 'var(--accent)', highlight: true,
      desc: 'For serious applicants who want expert support every step of the way.',
      features: ['Everything in Starter', 'University shortlist (up to 8)', 'SOP & LOR review', 'Application submission support', 'Visa filing assistance', 'Dedicated advisor', 'WhatsApp support'],
      notIncluded: ['Unlimited universities', 'Post-arrival support'],
      cta: 'Choose Standard',
    },
    {
      name: 'Premium', price: annual ? 44999 : 54999, tag: 'All-inclusive',
      color: 'var(--primary)', accent: 'var(--primary)', highlight: false,
      desc: 'Complete end-to-end support for students who want the very best outcome.',
      features: ['Everything in Standard', 'Unlimited university applications', 'Scholarship hunting support', 'Forex & banking guidance', 'Pre-departure briefing', 'Post-arrival support', 'Priority 24/7 support', 'Guaranteed visa re-filing'],
      notIncluded: [],
      cta: 'Choose Premium',
    },
  ];

  return (
    <div style={{ paddingTop: 68 }}>
      <Section bg="var(--primary)" style={{ padding: 'clamp(60px, 8vw, 96px) 24px' }}>
        <div style={{ textAlign: 'center' }}>
          <SectionLabel style={{ background: 'rgba(233,168,76,0.2)', color: 'var(--accent)' }}>Plans & Pricing</SectionLabel>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 5vw, 52px)', color: '#fff', lineHeight: 1.15, margin: '16px 0 16px' }}>Simple, honest pricing</h1>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.6)', marginBottom: 36 }}>No hidden fees. Cancel any time. Full refund if your visa is denied.</p>
          {/* Toggle */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, background: 'rgba(255,255,255,0.1)', borderRadius: 40, padding: '6px 20px', fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>
            <span style={{ fontWeight: annual ? 400 : 700, color: annual ? 'rgba(255,255,255,0.5)' : '#fff' }}>Monthly</span>
            <div onClick={() => setAnnual(a => !a)} style={{ width: 44, height: 24, borderRadius: 12, background: annual ? 'var(--accent)' : 'rgba(255,255,255,0.25)', position: 'relative', cursor: 'pointer', transition: 'background 0.25s' }}>
              <div style={{ position: 'absolute', top: 3, left: annual ? 23 : 3, width: 18, height: 18, borderRadius: '50%', background: '#fff', transition: 'left 0.25s' }} />
            </div>
            <span style={{ fontWeight: annual ? 700 : 400, color: annual ? '#fff' : 'rgba(255,255,255,0.5)' }}>Annual <span style={{ background: 'var(--accent)', color: '#fff', fontSize: 11, padding: '2px 8px', borderRadius: 10, marginLeft: 4 }}>Save 17%</span></span>
          </div>
        </div>
      </Section>

      <Section style={{ marginTop: -40, paddingTop: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, alignItems: 'stretch' }}>
          {plans.map(plan => (
            <div key={plan.name} style={{
              background: plan.highlight ? 'var(--primary)' : '#fff',
              borderRadius: 24, border: plan.highlight ? 'none' : '1.5px solid var(--border)',
              boxShadow: plan.highlight ? '0 24px 64px rgba(26,43,94,0.25)' : '0 4px 16px rgba(0,0,0,0.05)',
              padding: '32px 28px', display: 'flex', flexDirection: 'column',
              transform: plan.highlight ? 'translateY(-12px)' : 'none',
            }}>
              {plan.tag && <div style={{ display: 'inline-block', alignSelf: 'flex-start', fontSize: 11, fontWeight: 700, padding: '4px 12px', borderRadius: 20, background: plan.highlight ? 'rgba(233,168,76,0.2)' : 'var(--bg)', color: plan.highlight ? 'var(--accent)' : 'var(--text-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 20 }}>{plan.tag}</div>}
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: plan.highlight ? '#fff' : 'var(--primary)', marginBottom: 8 }}>{plan.name}</h3>
              <div style={{ marginBottom: 16 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 38, color: plan.highlight ? 'var(--accent)' : 'var(--primary)' }}>₹{plan.price === 0 ? '0' : plan.price.toLocaleString()}</span>
                <span style={{ fontSize: 13, color: plan.highlight ? 'rgba(255,255,255,0.5)' : 'var(--text-muted)', marginLeft: 6 }}>{plan.price === 0 ? 'forever' : `/ ${annual ? 'year' : 'one-time'}`}</span>
              </div>
              <p style={{ fontSize: 13, color: plan.highlight ? 'rgba(255,255,255,0.6)' : 'var(--text-muted)', lineHeight: 1.65, marginBottom: 24 }}>{plan.desc}</p>
              <div style={{ flex: 1, marginBottom: 28 }}>
                {plan.features.map(f => (
                  <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                    <div style={{ width: 18, height: 18, borderRadius: '50%', background: plan.highlight ? 'rgba(233,168,76,0.2)' : '#DCFCE7', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                      <span style={{ fontSize: 10, color: plan.highlight ? 'var(--accent)' : '#16A34A' }}>✓</span>
                    </div>
                    <span style={{ fontSize: 13, color: plan.highlight ? 'rgba(255,255,255,0.8)' : 'var(--text)', lineHeight: 1.5 }}>{f}</span>
                  </div>
                ))}
                {plan.notIncluded.map(f => (
                  <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10, opacity: 0.35 }}>
                    <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                      <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>×</span>
                    </div>
                    <span style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>{f}</span>
                  </div>
                ))}
              </div>
              <Btn variant={plan.highlight ? 'primary' : 'dark'} size="md" onClick={() => navigate('signup')} style={{ width: '100%', justifyContent: 'center' }}>{plan.cta}</Btn>
            </div>
          ))}
        </div>
        <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--text-muted)', marginTop: 32 }}>
          All plans include a free initial consultation. 🔒 100% refund if your visa is denied.
        </p>
      </Section>
    </div>
  );
}

Object.assign(window, { AboutPage, PlansPage });