function Landing({ onNavigate }) {
  return (
    <div style={{ background: 'var(--paper)', minHeight: '100vh' }}>
      <LandingNav onNavigate={onNavigate} />
      <LandingHero onNavigate={onNavigate} />
      <TrustBar />
      <ProblemSection />
      <ModulesSection />
      <TradeShowcase onNavigate={onNavigate} />
      <ThreeDShowcase />
      <StatsBand />
      <TestimonialSection />
      <CTASection onNavigate={onNavigate} />
      <FooterSection />
    </div>
  );
}

function LandingNav({ onNavigate }) {
  return (
    <>
      {/* Government-of-India-style stripe */}
      <div className="gov-stripe" style={{ borderRadius: 0, height: 3 }}>
        <div className="s1"/><div className="s2"/><div className="s3"/>
      </div>
      <nav style={{
        display: 'flex', alignItems: 'center', gap: 32,
        padding: '14px 60px', background: 'white',
        borderBottom: '1px solid var(--ink-200)',
        position: 'sticky', top: 0, zIndex: 20,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <window.ShikshaTriLogo size={32} />
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1 }}>ShikshaTri</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-600)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 3 }}>3D VISUAL TEACHING · ITI</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 22, marginLeft: 20, fontSize: 13, fontWeight: 500, color: 'var(--ink-700)' }}>
          {[
            { label: 'Platform', go: () => onNavigate('student') },
            { label: 'Trades', go: () => onNavigate('library') },
            { label: '3D Content', go: () => onNavigate('lesson') },
            { label: 'For Institutes', go: () => onNavigate('admin') },
            { label: 'Pricing', go: () => window.toast('Pricing is available on request — talk to our institutional team') },
          ].map(link => (
            <a key={link.label} onClick={link.go} style={{ cursor: 'pointer' }}>{link.label}</a>
          ))}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
          <div className="lang-pill" style={{ background: 'var(--ink-100)' }}>
            <window.IconGlobe size={13}/> EN · हिं · த
          </div>
          <button className="btn btn-ghost" onClick={() => onNavigate('student')}>Sign in</button>
          <button className="btn btn-primary" onClick={() => window.toast('Thanks! Our institutional team will reach out about a demo.')}>Request demo <window.IconArrow size={13}/></button>
        </div>
      </nav>
    </>
  );
}

function LandingHero({ onNavigate }) {
  return (
    <section className="landing-hero">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'center', maxWidth: 1400, margin: '0 auto' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', background: 'rgba(230,117,20,0.15)', border: '1px solid rgba(230,117,20,0.35)', borderRadius: 999, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#ffd9b3', marginBottom: 20 }}>
            <window.IconSparkle size={12}/> Enterprise Edition · Ver 1.0
          </div>

          <h1 style={{
            fontFamily: 'var(--font-serif)',
            fontSize: 56, fontWeight: 500,
            letterSpacing: '-0.03em', lineHeight: 1.05,
            margin: 0, color: 'white', textWrap: 'balance',
          }}>
            Where India's ITIs learn <em style={{ color: '#ffb37a', fontStyle: 'italic' }}>by seeing.</em>
          </h1>

          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)', maxWidth: 540 }}>
            A 3D visual teaching platform aligned to the NCVT/DGT curriculum. Every machine, every process, every practical — visualised, simulated and assessed before your students step into the workshop.
          </p>

          <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
            <button className="btn btn-saffron" style={{ padding: '13px 20px', fontSize: 14 }} onClick={() => onNavigate('student')}>
              Explore the platform <window.IconArrow size={14}/>
            </button>
            <button className="btn btn-ghost" style={{ padding: '13px 20px', fontSize: 14, background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.2)', color: 'white' }} onClick={() => window.toast('Playing the 2-minute product tour (demo)')}>
              <window.IconPlay size={12}/> Watch 2-min tour
            </button>
          </div>

          <div style={{ marginTop: 44, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.12)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>Aligned with</div>
            <window.GovBar />
          </div>
        </div>

        {/* 3D Hero visual */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'relative',
            borderRadius: 16,
            overflow: 'hidden',
            border: '1px solid rgba(255,255,255,0.15)',
            background: '#fafafa',
            boxShadow: '0 30px 80px rgba(0,0,0,0.4)',
            aspectRatio: '16 / 10',
          }}>
            <img src="assets/hero-cnc.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />

            {/* HUD overlay */}
            <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 8, alignItems: 'center' }}>
              <span className="badge mono navy" style={{ background: 'rgba(11,42,91,0.9)', color: 'white' }}>● LIVE 3D · CNC LATHE</span>
              <span className="badge mono" style={{ background: 'rgba(255,255,255,0.9)', color: 'var(--navy-800)' }}>MACHINIST · UNIT 04</span>
            </div>

            {/* Corner control cluster */}
            <div style={{ position: 'absolute', bottom: 14, right: 14, display: 'flex', gap: 6 }}>
              {[window.IconRotate, window.IconZoom, window.IconLayers, window.IconPlay].map((I, i) => (
                <button key={i} style={{
                  width: 32, height: 32,
                  background: 'rgba(11,42,91,0.92)',
                  color: 'white',
                  borderRadius: 6,
                  display: 'grid', placeItems: 'center',
                }}><I size={14} /></button>
              ))}
            </div>

            {/* Annotations */}
            <div className="annotation" style={{ top: '38%', left: '18%' }}>
              <div className="dot-marker" />
              <div className="line" />
              <div style={{ color: 'var(--navy-800)', background: 'white', padding: '4px 8px', borderRadius: 4, boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>HEADSTOCK GEARS</div>
            </div>
            <div className="annotation" style={{ top: '20%', right: '10%' }}>
              <div style={{ color: 'var(--navy-800)', background: 'white', padding: '4px 8px', borderRadius: 4, boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>TOOL TURRET · T02</div>
              <div className="line" style={{ transform: 'scaleX(-1)' }} />
              <div className="dot-marker" />
            </div>
          </div>

          {/* Floating stat cards */}
          <div style={{
            position: 'absolute', bottom: -22, left: -20,
            background: 'white', padding: '12px 16px',
            borderRadius: 12, boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 40, height: 40, background: 'var(--navy-100)', borderRadius: 8, display: 'grid', placeItems: 'center', color: 'var(--navy-700)' }}>
              <window.IconLayers size={20}/>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1 }}>1,240+</div>
              <div style={{ fontSize: 10, color: 'var(--ink-600)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 3, fontWeight: 600 }}>3D Machine Models</div>
            </div>
          </div>

          <div style={{
            position: 'absolute', top: -18, right: -14,
            background: 'white', padding: '12px 16px',
            borderRadius: 12, boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 40, height: 40, background: 'var(--saffron-100)', borderRadius: 8, display: 'grid', placeItems: 'center', color: 'var(--saffron-600)' }}>
              <window.IconGraduation size={20}/>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1 }}>20 <span style={{color: 'var(--ink-500)'}}>trades</span></div>
              <div style={{ fontSize: 10, color: 'var(--ink-600)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 3, fontWeight: 600 }}>Fully Covered</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustBar() {
  const partners = [
    { name: 'Govt. of Odisha DTET', sub: 'State partner' },
    { name: 'NSDC', sub: 'Skill Council' },
    { name: 'MSME Training', sub: 'MoU signed' },
    { name: 'MSDE', sub: 'Ministry' },
    { name: '412 ITIs', sub: 'Live deployments' },
  ];
  return (
    <section style={{ padding: '30px 60px', background: 'white', borderBottom: '1px solid var(--ink-200)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 44, flexWrap: 'wrap', maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-600)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>
          Trusted across India
        </div>
        {partners.map(p => (
          <div key={p.name} style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-800)', letterSpacing: '-0.01em' }}>{p.name}</div>
            <div style={{ fontSize: 10, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{p.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ProblemSection() {
  return (
    <section style={{ padding: '90px 60px', background: 'var(--ink-50)' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div className="section-eyebrow">The Gap</div>
          <h2 className="section-title" style={{ fontSize: 36, maxWidth: 400 }}>
            A workshop can't fit inside a chalkboard.
          </h2>
          <p style={{ color: 'var(--ink-700)', fontSize: 15, lineHeight: 1.6, marginTop: 16, maxWidth: 400 }}>
            India's ITIs graduate 1.4M students a year — many of whom see a CNC control panel for the first time on the day of their exam. ShikshaTri closes that gap with immersive 3D visualization from Day 1.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {[
            { k: 'Traditional', color: 'var(--red-600)', bg: 'var(--red-100)',
              items: ['Chalk-and-talk theory', '1 machine, 40 students', 'Textbook diagrams only', 'Practical only in Sem 3+', '~38% pass in All-India Trade Test'] },
            { k: 'With ShikshaTri', color: 'var(--green-600)', bg: 'var(--green-100)',
              items: ['Interactive 3D models from Day 1', 'Virtual practicals — unlimited attempts', 'Cutaway, exploded & simulated views', 'Skills built before workshop entry', '82%+ trade test pass rate (pilot)'] },
          ].map(col => (
            <div key={col.k} className="card" style={{ padding: 22 }}>
              <div className="badge" style={{ background: col.bg, color: col.color, marginBottom: 14 }}>{col.k}</div>
              {col.items.map(it => (
                <div key={it} style={{ padding: '10px 0', borderBottom: '1px dashed var(--ink-200)', display: 'flex', gap: 10, alignItems: 'start' }}>
                  <span style={{ color: col.color, marginTop: 2 }}>
                    {col.k === 'Traditional' ? '—' : <window.IconCheck size={16}/>}
                  </span>
                  <span style={{ fontSize: 13, color: 'var(--ink-800)' }}>{it}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModulesSection() {
  const modules = [
    { n: '01', title: 'Digital ITI Library', desc: 'Complete NCVT/DGT syllabus, semester-wise, in 8 languages.', icon: window.IconBook },
    { n: '02', title: '3D Interactive Learning Engine', desc: 'Cutaway, exploded and cross-sectional views. Rotate, zoom, disassemble.', icon: window.IconCube, feature: true },
    { n: '03', title: 'Virtual Practical Laboratory', desc: 'CNC, welding, hydraulics, PLC ladder — 15+ simulators, unlimited attempts.', icon: window.IconBeaker, feature: true },
    { n: '04', title: 'Industrial Process Animation', desc: 'Manufacturing, assembly, quality inspection — the shop floor, animated.', icon: window.IconVideo },
    { n: '05', title: 'Virtual Workshop', desc: 'Tool ID, safety walkthroughs, machine startup and shutdown sequences.', icon: window.IconTool },
    { n: '06', title: 'AR & VR Learning', desc: 'Optional VR headset support and mobile-AR equipment scanning.', icon: window.IconLayers },
    { n: '07', title: 'Assessment System', desc: 'MCQ, image-based, animation-based, and simulation-graded evaluations.', icon: window.IconClipboard },
    { n: '08', title: 'AI Tutor', desc: 'Voice-enabled, multilingual Q&A that identifies weak topics and plans revision.', icon: window.IconChat, feature: true },
    { n: '09', title: 'Smart Classroom', desc: 'Smart-board mode, lecture recording, remote classroom access.', icon: window.IconGrid },
    { n: '10', title: 'Instructor Portal', desc: 'Lesson planning, curriculum mapping, live progress analytics.', icon: window.IconGraduation },
    { n: '11', title: 'Student Portal', desc: 'Dashboard, assignments, certificates, offline downloads, digital notebook.', icon: window.IconHome },
    { n: '12', title: 'LMS + Attendance + Certificates', desc: 'Course, batch, timetable, notifications and certificate generation.', icon: window.IconAward },
    { n: '13', title: 'Digital Workshop Manual', desc: 'SOPs, safety instructions, troubleshooting and equipment specs.', icon: window.IconShield },
    { n: '14', title: 'Industry Readiness', desc: 'Interview prep, resume builder, 5S, Kaizen and TPM basics.', icon: window.IconTarget },
    { n: '15', title: 'Admin & Analytics', desc: 'Institute, faculty, license and usage analytics across the state.', icon: window.IconChart },
  ];

  return (
    <section style={{ padding: '90px 60px', background: 'white' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <div className="section-eyebrow">15 Integrated Modules</div>
            <h2 className="section-title" style={{ fontSize: 40, maxWidth: 640 }}>One platform. Fifteen modules. Every trade.</h2>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-600)', letterSpacing: '0.08em' }}>
            SCROLL <window.IconArrow size={12}/>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {modules.map(m => {
            const I = m.icon;
            return (
              <div key={m.n} style={{
                padding: 22,
                background: m.feature ? 'var(--navy-800)' : 'white',
                color: m.feature ? 'white' : 'var(--ink-800)',
                border: m.feature ? '1px solid var(--navy-800)' : '1px solid var(--ink-200)',
                borderRadius: 14,
                minHeight: 190,
                display: 'flex', flexDirection: 'column',
                position: 'relative',
                overflow: 'hidden',
              }}>
                {m.feature && (
                  <div style={{ position: 'absolute', top: 12, right: 12, fontSize: 9, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', color: 'var(--saffron-400)' }}>◆ CORE</div>
                )}
                <div style={{
                  width: 40, height: 40,
                  background: m.feature ? 'rgba(230,117,20,0.15)' : 'var(--navy-100)',
                  color: m.feature ? 'var(--saffron-400)' : 'var(--navy-700)',
                  borderRadius: 8,
                  display: 'grid', placeItems: 'center',
                  marginBottom: 14,
                }}>
                  <I size={20}/>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, opacity: 0.6, letterSpacing: '0.14em', marginBottom: 4 }}>M{m.n}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 6, lineHeight: 1.2 }}>{m.title}</div>
                <div style={{ fontSize: 12.5, color: m.feature ? 'rgba(255,255,255,0.7)' : 'var(--ink-600)', lineHeight: 1.5 }}>{m.desc}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function TradeShowcase({ onNavigate }) {
  const trades = [
    { name: 'Electrician', hi: 'इलेक्ट्रीशियन', ta: 'மின்சாரம்', students: '4,120' },
    { name: 'Fitter', hi: 'फिटर', ta: 'பொருத்துனர்', students: '3,880' },
    { name: 'Welder', hi: 'वेल्डर', ta: 'பற்றுவேலை', students: '2,940' },
    { name: 'COPA', hi: 'सीओपीए', ta: 'கணினி', students: '5,210' },
    { name: 'Machinist', hi: 'मशीनिस्ट', ta: 'இயந்திரவாதி', students: '1,760' },
    { name: 'Turner', hi: 'टर्नर', ta: 'திருகுநர்', students: '1,410' },
    { name: 'Mechanic Diesel', hi: 'डीज़ल मैकेनिक', ta: 'டீசல்', students: '2,110' },
    { name: 'Electronics Mechanic', hi: 'इलेक्ट्रॉनिक्स', ta: 'எலெக்ட்ரானிக்ஸ்', students: '2,880' },
    { name: 'Refrigeration & AC', hi: 'रेफ्रिजरेशन', ta: 'குளிர்சாதனம்', students: '1,540' },
    { name: 'Wireman', hi: 'वायरमैन', ta: 'கம்பியாள்', students: '910' },
    { name: 'Plumber', hi: 'प्लंबर', ta: 'குழாய்', students: '820' },
    { name: 'ICTSM', hi: 'आईसीटीएसएम', ta: 'ICT', students: '3,120' },
    { name: 'Solar Technician', hi: 'सौर तकनीशियन', ta: 'சூரிய', students: '1,240', hot: true },
    { name: 'Electric Vehicle Technician', hi: 'ईवी तकनीशियन', ta: 'மின் வாகனம்', students: '860', hot: true },
    { name: 'Mechatronics', hi: 'मेकाट्रॉनिक्स', ta: 'மெக்கட்ரானிக்ஸ்', students: '640', hot: true },
    { name: 'CNC Operator', hi: 'सीएनसी', ta: 'CNC இயக்கம்', students: '1,190', hot: true },
    { name: 'Tool & Die Maker', hi: 'टूल एंड डाई', ta: 'கருவி', students: '540' },
    { name: 'Draughtsman', hi: 'ड्राफ्ट्समैन', ta: 'வரைபடம்', students: '710' },
    { name: 'Surveyor', hi: 'सर्वेयर', ta: 'கணக்கீடு', students: '380' },
    { name: 'Foundryman', hi: 'फाउंड्री', ta: 'உலோகம்', students: '260' },
  ];

  return (
    <section style={{ padding: '90px 60px', background: 'var(--ink-50)' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 40, gap: 40 }}>
          <div>
            <div className="section-eyebrow">Trade Coverage</div>
            <h2 className="section-title" style={{ fontSize: 40 }}>All 20 major ITI trades. Not sampled — completed.</h2>
            <p style={{ color: 'var(--ink-600)', fontSize: 14, maxWidth: 560, marginTop: 8 }}>
              Every trade is mapped to the latest NCVT curriculum revision. New trades like EV Technician and Solar are updated quarterly.
            </p>
          </div>
          <button className="btn btn-primary" onClick={() => onNavigate('library')}>
            Open Trade Library <window.IconArrow size={13}/>
          </button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {trades.map(t => (
            <div key={t.name} style={{
              padding: 18,
              background: 'white',
              border: '1px solid var(--ink-200)',
              borderRadius: 12,
              display: 'flex', flexDirection: 'column',
              position: 'relative',
              transition: 'transform 0.15s, box-shadow 0.15s',
              cursor: 'pointer',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-2)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}
            onClick={() => onNavigate('library')}
            >
              {t.hot && (
                <div style={{ position: 'absolute', top: 10, right: 10, fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em', background: 'var(--saffron-100)', color: 'var(--saffron-600)', padding: '2px 6px', borderRadius: 4 }}>
                  NEW
                </div>
              )}
              <div style={{ color: 'var(--navy-700)', marginBottom: 12 }}>
                <window.TradeIcon trade={t.name} size={26}/>
              </div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-900)', letterSpacing: '-0.01em' }}>{t.name}</div>
              <div className="hi" style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 3 }}>{t.hi}</div>
              <div className="ta" style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 2 }}>{t.ta}</div>
              <div style={{ marginTop: 14, paddingTop: 10, borderTop: '1px dashed var(--ink-200)', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.06em' }}>
                {t.students} learners
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ThreeDShowcase() {
  return (
    <section style={{ padding: '100px 60px', background: 'var(--navy-900)', color: 'white', position: 'relative', overflow: 'hidden' }}>
      <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 60, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div style={{
            background: 'white',
            borderRadius: 16,
            overflow: 'hidden',
            aspectRatio: '4/3',
            boxShadow: '0 30px 80px rgba(0,0,0,0.4)',
          }}>
            <img src="assets/hero-motor.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          {/* Callout labels */}
          {[
            { top: '12%', left: '46%', label: 'TERMINAL BOX' },
            { top: '46%', left: '9%',  label: 'END SHIELD' },
            { top: '54%', left: '38%', label: 'STATOR' },
            { top: '54%', left: '60%', label: 'ROTOR' },
            { top: '54%', left: '82%', label: 'COOLING FAN' },
          ].map((a, i) => (
            <div key={i} style={{
              position: 'absolute', top: a.top, left: a.left,
              fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em',
              background: 'rgba(11,42,91,0.95)', color: 'white',
              padding: '3px 7px', borderRadius: 4,
              border: '1px solid var(--saffron-500)',
            }}>{i+1}. {a.label}</div>
          ))}
        </div>

        <div>
          <div className="section-eyebrow" style={{ color: 'var(--saffron-400)' }}>3D Interactive Learning Engine</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 42, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '8px 0 20px', textWrap: 'balance' }}>
            Every machine, opened up.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', marginBottom: 28 }}>
            Cutaway views. Exploded assemblies. Layer-by-layer disassembly. Powered by our own asset pipeline in Blender, Unity and Unreal — with WebGL viewers that run on the humblest classroom projector.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              { k: '1,240+', v: 'Machine models' },
              { k: '380+', v: 'Process animations' },
              { k: '15', v: 'Practical simulators' },
              { k: '8', v: 'Languages' },
            ].map(s => (
              <div key={s.k} style={{ padding: 18, background: 'rgba(255,255,255,0.04)', borderRadius: 10, border: '1px solid rgba(255,255,255,0.1)' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em' }}>{s.k}</div>
                <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  const stats = [
    { k: '412', v: 'ITIs deployed' },
    { k: '84,200+', v: 'Students learning' },
    { k: '2,140', v: 'Certified instructors' },
    { k: '82%', v: 'AITT pass rate (pilot)' },
    { k: '4.7 ★', v: 'Instructor rating' },
  ];
  return (
    <section style={{ background: 'white', padding: '48px 60px', borderTop: '1px solid var(--ink-200)', borderBottom: '1px solid var(--ink-200)' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20 }}>
        {stats.map((s, i) => (
          <div key={s.k} style={{ padding: '0 20px', borderRight: i < stats.length - 1 ? '1px solid var(--ink-200)' : 'none' }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 40, fontWeight: 500, color: 'var(--navy-800)', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.k}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-600)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 8, fontWeight: 600 }}>{s.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function TestimonialSection() {
  return (
    <section style={{ padding: '90px 60px', background: 'var(--ink-50)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
          {[
            { q: 'Our Electrician trade pass rate jumped from 62% to 89% in one semester. Students actually understand three-phase before they touch a real motor now.', a: 'Dr. Suresh Panda', r: 'Principal · Govt. ITI, Cuttack' },
            { q: 'The 3D exploded views are what a state-run ITI could never afford in physical models. My students see it, rotate it, take it apart on their tablets.', a: 'Kavita Sharma', r: 'Instructor · Fitter Trade, Kanpur' },
            { q: 'For state-wide rollouts under the Skill India mission, ShikshaTri is the only platform we found that respects the NCVT syllabus down to the practical exercise level.', a: 'Rajesh Nair', r: 'Joint Director · DTET Odisha' },
          ].map((t, i) => (
            <div key={i} className="card" style={{ padding: 26 }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 40, color: 'var(--saffron-500)', lineHeight: 1, marginBottom: 8 }}>“</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-800)', margin: 0 }}>{t.q}</p>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--ink-200)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div className="avatar" style={{ background: 'var(--navy-700)' }}>{t.a.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{t.a}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 2 }}>{t.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection({ onNavigate }) {
  return (
    <section style={{ padding: '80px 60px', background: 'var(--navy-800)', color: 'white', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div className="section-eyebrow" style={{ color: 'var(--saffron-400)' }}>Get Started</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 42, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '8px 0 16px' }}>
            Bring your institute into the visual era.
          </h2>
          <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', maxWidth: 480, lineHeight: 1.55 }}>
            Talk to our institutional team for state / MSME / MSDE deployments. Onboarding, faculty training and localisation included.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
            <button className="btn btn-saffron" style={{ padding: '13px 20px' }} onClick={() => onNavigate('student')}>
              Try the student view <window.IconArrow size={13}/>
            </button>
            <button className="btn btn-ghost" style={{ padding: '13px 20px', background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.2)', color: 'white' }} onClick={() => window.toast('Institute demo request received — we will be in touch.')}>
              Book institute demo
            </button>
          </div>
        </div>
        <div style={{ padding: 26, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 14 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.55)', marginBottom: 12 }}>DEPLOYMENT SCENARIOS</div>
          {[
            { k: 'Single ITI', v: '₹ On request', s: 'Up to 500 students' },
            { k: 'State-wide', v: '₹ MoU based', s: 'DTET / NSDC partners' },
            { k: 'MSME cluster', v: '₹ Custom', s: 'Skill development centres' },
          ].map(x => (
            <div key={x.k} style={{ padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{x.k}</div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{x.s}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--saffron-400)' }}>{x.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FooterSection() {
  return (
    <footer style={{ background: 'var(--navy-900)', color: 'rgba(255,255,255,0.6)', padding: '50px 60px 30px' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <window.ShikshaTriLogo size={30} />
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, fontWeight: 600, color: 'white' }}>ShikshaTri</div>
          </div>
          <p style={{ fontSize: 12.5, lineHeight: 1.6, maxWidth: 320 }}>
            3D Visual Teaching Content Software for Industrial Training Institutes. Aligned to NCVT/DGT curriculum. Made in India.
          </p>
          <div className="gov-stripe" style={{ marginTop: 20, width: 120 }}>
            <div className="s1"/><div className="s2"/><div className="s3"/>
          </div>
        </div>
        {[
          { h: 'Platform', l: ['3D Library', 'Virtual Labs', 'AI Tutor', 'Smart Classroom'] },
          { h: 'For', l: ['Students', 'Instructors', 'Institutes', 'State Govts'] },
          { h: 'Company', l: ['About', 'Careers', 'Case studies', 'Press'] },
          { h: 'Support', l: ['Help centre', 'Training', 'API docs', 'Contact'] },
        ].map(g => (
          <div key={g.h}>
            <div style={{ color: 'white', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>{g.h}</div>
            {g.l.map(x => <div key={x} style={{ fontSize: 13, padding: '5px 0' }}>{x}</div>)}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1400, margin: '40px auto 0', paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: 'var(--font-mono)', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.05em' }}>
        <div>© 2026 ShikshaTri Technologies Pvt Ltd · Enterprise Edition 1.0</div>
        <div>Terms · Privacy · Accessibility · Data protection</div>
      </div>
    </footer>
  );
}

window.Landing = Landing;