function LessonPage({ onNavigate }) {
  const [section, setSection] = useState(2);
  const [howtoOpen, setHowtoOpen] = useState(() => {
    try { return !localStorage.getItem('medishield_lesson_howto_seen'); } catch { return true; }
  });
  useEffect(() => {
    try { localStorage.setItem('medishield_lesson_howto_seen', '1'); } catch {}
  }, []);
  const sections = [
    { title: 'Why phishing matters in healthcare', done: true },
    { title: 'The anatomy of a clinical phishing email', done: true },
    { title: 'Red flags in sender and domain', done: false, current: true },
    { title: 'Safe reporting workflow', done: false },
    { title: 'Knowledge check', done: false },
  ];

  return (
    <div className="page-enter">
      <div className="breadcrumbs">
        <a href="#" onClick={e => {e.preventDefault(); onNavigate('dashboard');}}>Dashboard</a>
        <I.ChevronRight size={12}/>
        <span>Training</span>
        <I.ChevronRight size={12}/>
        <span style={{color: 'var(--navy)'}}>Recognizing phishing in clinical email</span>
      </div>

      <div className="row-between" style={{marginBottom: 8, alignItems: 'flex-start'}}>
        <div>
          <h1>Recognizing phishing in clinical email</h1>
          <p className="muted" style={{fontSize: 12.5}}>Module PHI-201 · 12 minutes · Assigned by Compliance · Required for Cardiology-3B</p>
        </div>
        <div style={{textAlign: 'right'}}>
          <div style={{fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600, marginBottom: 6}}>Progress · 40%</div>
          <div className="progress progress-lg" style={{width: 180}}><div className="progress-bar" style={{width: '40%'}}/></div>
        </div>
      </div>

      <div style={{display: 'grid', gridTemplateColumns: '240px 1fr', gap: 28, marginTop: 28}}>
        <aside className="card">
          <div style={{padding: 16}}>
            <div className="side-section-label" style={{padding: '0 0 8px'}}>Lesson outline</div>
            {sections.map((s, i) => (
              <button key={i} className={`outline-item ${s.current ? 'active' : ''} ${s.done ? 'done' : ''}`} onClick={() => setSection(i)}>
                <span className="outline-num">{s.done ? <I.CheckCircle size={12}/> : i + 1}</span>
                <span className="outline-title">{s.title}</span>
              </button>
            ))}
          </div>
        </aside>

        <div>
          <details className="howto" open={howtoOpen} onToggle={e => setHowtoOpen(e.target.open)}>
            <summary>
              <I.Info size={14} color="var(--ink-3)"/>
              How this lesson works
            </summary>
            <div className="howto-body">
              Read each section, then take the short quiz at the end. You need <b>80%</b> to pass.
              You can retake it as many times as you need. Your progress is saved automatically — leave and come back anytime.
            </div>
          </details>
          <div className="card">
            <div className="card-body" style={{padding: 32}}>
              <div className="muted" style={{fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 8}}>Section 3 of 5</div>
              <h2 style={{fontSize: 22, marginBottom: 16}}>Red flags in sender and domain</h2>
              <p style={{color: 'var(--ink-2)', fontSize: 14.5, lineHeight: 1.7, marginBottom: 18}}>
                Attackers impersonate internal IT, senior physicians, and EHR vendors. The fastest tell is almost always in the <b>sender address</b> — a swapped character, an extra hyphen, a look-alike domain. Train your eye to read the address bar-by-bar, not as a word.
              </p>
              <p style={{color: 'var(--ink-2)', fontSize: 14.5, lineHeight: 1.7, marginBottom: 24}}>
                Below is a real example reported by the St. Luke's SOC last quarter. Hover the highlighted terms to understand why each one is suspicious.
              </p>

              <div className="email-mock">
                <div className="email-mock-header">
                  <div className="email-subject">URGENT: Mailbox quota exceeded — action required in 2 hours</div>
                  <div style={{display: 'flex', gap: 14, fontSize: 12.5, color: 'var(--ink-3)', alignItems: 'center', flexWrap: 'wrap'}}>
                    <span><b style={{color: 'var(--navy)'}}>From:</b> IT-Support &lt;<span className="flag" data-flag="The pipe character '|' replaces a lowercase 'l'. The real domain is st-lukes.org.">IT-Support@st-|ukes.org</span>&gt;</span>
                    <span><b style={{color: 'var(--navy)'}}>To:</b> elena.papadaki@stlukes.hospital</span>
                    <span><b style={{color: 'var(--navy)'}}>Date:</b> Today, 06:42</span>
                  </div>
                </div>
                <div className="email-mock-body">
                  <p>Dear Elena,</p>
                  <p>
                    Our system has detected your mailbox is <span className="flag" data-flag="Fake urgency is the #1 phishing lever — real IT gives 24–72h windows, not 2 hours.">99.8% full and will stop receiving patient lab results within the next 2 hours</span>. To prevent interruption in care, please verify your credentials immediately.
                  </p>
                  <p>
                    <span className="flag" data-flag="Hover reveals 'hxxps://stlukes-verify.cloud-mx[.]com' — not a St. Luke's domain. Always hover before clicking.">👉 Verify mailbox quota here</span>
                  </p>
                  <p>
                    <span className="flag" data-flag="Pressure + consequences = classic phishing playbook. Real IT communicates through the ticketing portal, not threats.">Failure to verify within 2 hours will result in loss of access and may delay patient care.</span>
                  </p>
                  <p>— IT Support, St. Luke's</p>
                  <p style={{color: 'var(--ink-3)', fontSize: 12}}>This is an automated message. Please do not reply.</p>
                </div>
              </div>

              <div className="stack" style={{marginTop: 24}}>
                <div className="callout callout-red">
                  <I.AlertTriangle size={20} style={{flexShrink: 0, marginTop: 2}}/>
                  <div>
                    <div className="callout-title">Red flag</div>
                    The sender domain uses a pipe (|) in place of a lowercase L. Real typefaces make the swap nearly invisible at a glance. Always copy-paste suspicious addresses into a monospace font to verify.
                  </div>
                </div>
                <div className="callout callout-amber">
                  <I.Eye size={20} style={{flexShrink: 0, marginTop: 2}}/>
                  <div>
                    <div className="callout-title">What to check</div>
                    (1) Hover the link without clicking — does the URL preview match the claimed sender? (2) Is there artificial urgency? (3) Does the tone match how IT actually communicates with you?
                  </div>
                </div>
                <div className="callout callout-green">
                  <I.ShieldCheck size={20} style={{flexShrink: 0, marginTop: 2}}/>
                  <div>
                    <div className="callout-title">Safe action</div>
                    Use the <b>Report phishing</b> button in Outlook, or forward to <span className="mono" style={{fontSize: 12.5}}>soc@stlukes.org</span>. If in doubt, phone IT at x4400 — never use a number from the suspicious email itself.
                  </div>
                </div>
              </div>

              <div className="row-between" style={{marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border-2)'}}>
                <button className="btn btn-outline"><I.ChevronLeft size={16}/> Previous</button>
                <div style={{display: 'flex', gap: 8}}>
                  <button className="btn btn-outline" onClick={() => onNavigate('quiz')}>Take quiz now</button>
                  <button className="btn btn-primary" onClick={() => onNavigate('quiz')}>Next <I.ChevronRight size={16}/></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LessonPage = LessonPage;
