function HelpSupport({ onNavigate }) {
  const [open, setOpen] = React.useState(0);

  const cats = [
    { t: 'Getting Started', n: 14, ic: window.IconPlay },
    { t: '3D Lessons & Labs', n: 22, ic: window.IconCube },
    { t: 'Assessments', n: 18, ic: window.IconClipboard },
    { t: 'Account & Login', n: 9, ic: window.IconUser },
    { t: 'Certificates', n: 7, ic: window.IconAward },
    { t: 'Technical Issues', n: 25, ic: window.IconSettings },
  ];

  const faqs = [
    { q: 'How do I resume a lesson where I left off?', a: 'Open your Dashboard — the "Resume" button on the greeting card takes you straight to your last-viewed lesson. Your progress is saved automatically after each chapter.' },
    { q: 'Can I use ShikshaTri offline?', a: 'Yes. Download lessons and manuals from the Trade Library or Profile → Offline downloads. Downloaded content plays without internet; progress syncs when you reconnect.' },
    { q: 'How is my virtual lab attempt scored?', a: 'Each simulator evaluates parameters like accuracy, speed control, and safety compliance in real time, producing a live score out of 100. Submit for evaluation to get instructor feedback.' },
    { q: 'In which languages is the content available?', a: 'The interface and voice-over support English, हिंदी, தமிழ், తెలుగు and more. Use the language pill in the top bar to switch at any time.' },
    { q: 'How do I get my completion certificate?', a: 'Certificates are issued automatically once you clear a module (theory + practical + assessment). Find them under Certificates & Achievements, downloadable as verifiable PDFs.' },
  ];

  return (
    <div className="content">
      {/* Search hero */}
      <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', background: 'linear-gradient(135deg, #071a3d, #133c7a)', color: 'white', padding: '40px 32px', marginBottom: 24, textAlign: 'center' }}>
        <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.35 }} />
        <div style={{ position: 'relative', maxWidth: 640, margin: '0 auto' }}>
          <div className="section-eyebrow" style={{ color: 'var(--saffron-400)' }}>Help & Support Centre</div>
          <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', margin: '8px 0 18px' }}>How can we help you?</h1>
          <div style={{ position: 'relative', maxWidth: 520, margin: '0 auto' }}>
            <window.IconSearch size={18} style={{ position: 'absolute', left: 16, top: 15, color: 'var(--ink-500)' }} />
            <input placeholder="Search help articles, e.g. 'reset password'…" style={{ width: '100%', padding: '14px 16px 14px 44px', border: 'none', borderRadius: 10, fontSize: 14, outline: 'none', fontFamily: 'inherit' }} />
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 12 }}>Popular: virtual lab not loading · change language · download certificate</div>
        </div>
      </div>

      {/* Categories */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
        {cats.map(c => {
          const I = c.ic;
          return (
            <div key={c.t} className="card" onClick={() => window.toast('Opening ' + c.t + ' · ' + c.n + ' articles')} style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', transition: 'all 0.15s' }}
              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 = ''; }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--navy-100)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center' }}><I size={20}/></div>
              <div>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink-900)' }}>{c.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-600)' }}>{c.n} articles</div>
              </div>
              <window.IconChevronRight size={16} style={{ marginLeft: 'auto', color: 'var(--ink-400)' }} />
            </div>
          );
        })}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20 }}>
        {/* FAQ accordion */}
        <div className="card">
          <div className="card-header"><div className="card-title">Frequently asked questions</div></div>
          <div style={{ padding: '4px 0' }}>
            {faqs.map((f, i) => (
              <div key={i} style={{ borderTop: i > 0 ? '1px solid var(--ink-100)' : 'none' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', textAlign: 'left', padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--ink-900)' }}>{f.q}</span>
                  <window.IconChevronRight size={16} style={{ color: 'var(--ink-500)', transform: open === i ? 'rotate(90deg)' : 'none', transition: 'transform 0.15s', flexShrink: 0 }} />
                </button>
                {open === i && <div style={{ padding: '0 20px 18px', fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.6 }}>{f.a}</div>}
              </div>
            ))}
          </div>
        </div>

        {/* Contact + ticket */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="card" style={{ padding: 20 }}>
            <div className="card-title" style={{ marginBottom: 14 }}>Contact support</div>
            {[
              { l: 'Call helpdesk', v: '1800-XXX-4567', s: 'Mon–Sat · 9 AM–7 PM', ic: window.IconPhone },
              { l: 'Email us', v: 'support@shikshatri.in', s: 'Reply within 24 hrs', ic: window.IconMail },
              { l: 'Live chat', v: 'Chat with an agent', s: '● Online now', ic: window.IconChat },
            ].map(c => {
              const I = c.ic;
              return (
                <div key={c.l} onClick={() => window.toast(c.l + ' · ' + c.v)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', borderBottom: '1px dashed var(--ink-200)', cursor: 'pointer' }}>
                  <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--navy-50)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><I size={16}/></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-900)' }}>{c.v}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-600)' }}>{c.s}</div>
                  </div>
                </div>
              );
            })}
            <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 14 }} onClick={() => window.toast('New support ticket started — describe your issue')}><window.IconEdit size={13}/> Raise a ticket</button>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div className="card-title" style={{ marginBottom: 12 }}>Your recent tickets</div>
            {[
              { id: '#TK-2291', t: 'Lab audio not working', s: 'Resolved', c: 'green' },
              { id: '#TK-2288', t: 'Certificate name spelling', s: 'In progress', c: 'saffron' },
            ].map(t => (
              <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px dashed var(--ink-200)' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{t.t}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-500)' }}>{t.id}</div>
                </div>
                <span className={`badge ${t.c}`} style={{ fontSize: 10 }}>{t.s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.HelpSupport = HelpSupport;