function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg" />
      <div className="hero-grid-bg" />
      <div className="container">
        <div className="hero-content">
          <div>
            <FadeUp>
              <div className="hero-eyebrow">
                <span className="hero-eyebrow-tag">NEW</span>
                <span>AI course match for 2026 intake now live</span>
              </div>
            </FadeUp>
            <FadeUp delay={1}>
              <h1>
                Your future degree,<br/>
                <span className="serif">closer than ever.</span>
              </h1>
            </FadeUp>
            <FadeUp delay={2}>
              <p className="hero-sub">
                MentVecity helps students enroll in recognized online degree programs from leading Indian universities — with 1:1 counseling, career mapping, and end-to-end admission support.
              </p>
            </FadeUp>
            <FadeUp delay={3}>
              <div className="hero-ctas">
                <button className="btn btn-primary btn-lg">Get Free Counseling <ArrowIcon/></button>
                <button className="btn btn-outline-light btn-lg">Explore Courses</button>
              </div>
            </FadeUp>
            <FadeUp delay={4}>
              <div className="hero-trust">
                <div className="hero-trust-item">
                  <div className="hero-trust-num">25+</div>
                  <div className="hero-trust-label">University partners</div>
                </div>
                <div className="hero-trust-item">
                  <div className="hero-trust-num">100%</div>
                  <div className="hero-trust-label">Online learning</div>
                </div>
                <div className="hero-trust-item">
                  <div className="hero-trust-num">9 mo</div>
                  <div className="hero-trust-label">Placement support</div>
                </div>
                <div className="hero-trust-item">
                  <div className="hero-trust-num">0%</div>
                  <div className="hero-trust-label">EMI starting</div>
                </div>
              </div>
            </FadeUp>
          </div>

          <HeroViz />
        </div>
      </div>
    </section>
  );
}

function HeroViz() {
  const courses = [
    { name: 'MBA — Business Analytics', meta: 'Manipal · 2 Yrs · Online', icon: '◆', bg: 'linear-gradient(135deg,#FFA000,#E08800)', color: '#041E4A', match: '96%' },
    { name: 'MCA — Data Science', meta: 'Amrita · 2 Yrs · Online', icon: '◇', bg: 'rgba(255,255,255,0.08)', color: '#fff', match: '91%' },
    { name: 'BBA — Digital Marketing', meta: 'Jain · 3 Yrs · Online', icon: '○', bg: 'rgba(255,255,255,0.08)', color: '#fff', match: '87%' },
  ];
  return (
    <div className="hero-viz">
      <div className="viz-card viz-main">
        <div className="viz-main-head">
          <div className="viz-chip"><span style={{width:6,height:6,borderRadius:99,background:'#FFA000',display:'inline-block'}}/>AI match · live</div>
          <div className="viz-dots"><span/><span/><span/></div>
        </div>
        <div className="viz-title">Recommended for Priya</div>
        <div className="viz-sub">Based on background in Commerce + interest in analytics</div>
        <div className="viz-courselist">
          {courses.map((c, i) => (
            <div key={i} className="viz-course">
              <div className="viz-course-icon" style={{ background: c.bg, color: c.color }}>{c.icon}</div>
              <div className="viz-course-main">
                <div className="viz-course-title">{c.name}</div>
                <div className="viz-course-meta">{c.meta}</div>
              </div>
              <div className="viz-course-match">{c.match}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="viz-card viz-float-1">
        <div className="viz-float-1-label">Avg. salary uplift</div>
        <div className="viz-float-1-num">+68%</div>
        <div className="viz-float-1-meta">Post degree, ≤18 months</div>
      </div>

      <div className="viz-card viz-float-2">
        <div className="viz-float-2-head">3 advisors online</div>
        <div className="viz-avatars">
          <div className="viz-avatar">A</div>
          <div className="viz-avatar b2">R</div>
          <div className="viz-avatar b3">S</div>
          <div className="viz-avatar b4">+</div>
        </div>
        <div className="viz-float-2-body">Avg. reply time <strong style={{color:'#FFA000'}}>under 4 min</strong></div>
      </div>
    </div>
  );
}

window.Hero = Hero;