// Dashboard — 12-module grid overview
function Dashboard({ onSelectModule, previewMode = false }) {
  const [hoveredId, setHoveredId] = React.useState(null);

  const totalCompleted = previewMode
    ? (getModuleProgress(1) === 100 ? 1 : 0)
    : MODULES_DATA.filter(m => getModuleProgress(m.id) === 100).length;
  const totalStarted = MODULES_DATA.filter(m => getModuleProgress(m.id) > 0).length;

  return (
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 32px 96px' }}>

      {previewMode && (
        <div style={{ marginBottom:28, background:'#0a0d14', border:'1px solid #1a2a3a', borderLeft:'3px solid #3B82F6', padding:'16px 20px' }}>
          <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.18em', color:'#88aadd', textTransform:'uppercase', marginBottom:6 }}>Free preview</div>
          <div style={{ fontFamily:'Inter,sans-serif', fontSize:14, color:'#888', lineHeight:1.65 }}>
            You’re viewing <strong style={{ color:'#ccc' }}>Module 1</strong> only. Add your Anthropic key in ⚙ for AI exercise reviews (you pay Anthropic). <a href="/#pricing" style={{ color:'#C9A84C' }}>Unlock the full course →</a>
          </div>
        </div>
      )}

      {/* Continue banner */}
      {(() => {
        const inProgress = MODULES_DATA.find(m => {
          if (previewMode && m.id !== 1) return false;
          const p = getModuleProgress(m.id);
          return p > 0 && p < 100;
        });
        if (!inProgress) return null;
        const pct = getModuleProgress(inProgress.id);
        const ac = inProgress.accent === 'tech' ? '#3B82F6' : '#C9A84C';
        return (
          <div style={{ marginBottom:32, background:'#080808', border:`1px solid #1a1a1a`, borderLeft:`3px solid ${ac}`, padding:'16px 20px', display:'flex', justifyContent:'space-between', alignItems:'center', gap:16 }}>
            <div>
              <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.18em', color:ac, textTransform:'uppercase', marginBottom:4 }}>Continue where you left off</div>
              <div style={{ fontFamily:'Syne,sans-serif', fontWeight:600, fontSize:16, color:'#fff' }}>Module {inProgress.num} — {inProgress.title}</div>
              <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, color:'#444', marginTop:4 }}>{pct}% complete</div>
            </div>
            <button onClick={() => onSelectModule(inProgress)} style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', background:ac, color:'#000', border:'none', padding:'10px 18px', cursor:'pointer', fontWeight:600, flexShrink:0 }}>
              Continue →
            </button>
          </div>
        );
      })()}

      {/* Header */}
      <div style={{ marginBottom: 56, borderBottom: '1px solid #1a1a1a', paddingBottom: 40 }}>
        <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:10, letterSpacing:'0.22em', color:'#C9A84C', textTransform:'uppercase', marginBottom:16, display:'flex', alignItems:'center', gap:8 }}>
          <span style={{ width:6, height:6, borderRadius:'50%', background:'#C9A84C', display:'inline-block' }} />
          Building with Claude
        </div>
        <h1 style={{ fontFamily:'Syne,sans-serif', fontWeight:700, fontSize:'clamp(40px,6vw,72px)', lineHeight:0.9, letterSpacing:'-0.04em', margin:'0 0 24px', color:'#fff' }}>
          Design Tools<br /><span style={{ color:'#C9A84C', fontStyle:'italic', fontWeight:500 }}>&amp; Automation.</span>
        </h1>
        <p style={{ fontFamily:'Inter,sans-serif', fontSize:16, color:'#666', fontWeight:300, margin:'0 0 32px', maxWidth:540, lineHeight:1.6 }}>
          12 modules. From your first API call to production systems serving millions of requests.
        </p>

        {/* Stats strip */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:2, background:'#1a1a1a', border:'1px solid #1a1a1a', maxWidth:640 }}>
          {[
            { n: '12', l: 'Modules' },
            { n: '50+', l: 'Code examples' },
            { n: '20+', l: 'Exercises' },
            { n: totalStarted > 0 ? `${totalCompleted}/12` : '0/12', l: 'Completed' }
          ].map(({ n, l }) => (
            <div key={l} style={{ background:'#000', padding:'20px 16px', textAlign:'center' }}>
              <div style={{ fontFamily:'Syne,sans-serif', fontWeight:700, fontSize:28, letterSpacing:'-0.03em', color:'#C9A84C', lineHeight:1 }}>{n}</div>
              <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.2em', textTransform:'uppercase', color:'#444', marginTop:6 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Module grid */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:2, background:'#1a1a1a', border:'1px solid #1a1a1a' }}>
        {MODULES_DATA.map(mod => {
          const locked = previewMode && mod.id !== 1;
          const pct = getModuleProgress(mod.id);
          const isHovered = hoveredId === mod.id;
          const accentColor = mod.accent === 'tech' ? '#3B82F6' : '#C9A84C';
          const difficultyColor = mod.difficulty === 'Expert' ? '#EF4444' : mod.difficulty === 'Advanced' ? '#3B82F6' : '#C9A84C';

          if (locked) {
            return (
              <div
                key={mod.id}
                onMouseEnter={() => setHoveredId(mod.id)}
                onMouseLeave={() => setHoveredId(null)}
                style={{
                  background: '#050505',
                  border: 'none',
                  textAlign: 'left',
                  padding: '28px 24px',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 12,
                  minHeight: 200,
                  position: 'relative',
                  opacity: 0.5,
                }}
              >
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:11, letterSpacing:'0.22em', color:'#333', textTransform:'uppercase' }}>MOD. {mod.num}</span>
                  <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, color:'#333' }}>🔒</span>
                </div>
                <div style={{ fontFamily:'Syne,sans-serif', fontWeight:600, fontSize:18, color:'#444', lineHeight:1.1 }}>{mod.title}</div>
                <div style={{ fontFamily:'Inter,sans-serif', fontSize:12, color:'#333', lineHeight:1.5, flex:1 }}>{mod.subtitle}</div>
                <a href="/#pricing" style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.14em', color:'#C9A84C', textTransform:'uppercase' }}>Included in full course →</a>
              </div>
            );
          }

          return (
            <button
              key={mod.id}
              onClick={() => onSelectModule(mod)}
              onMouseEnter={() => setHoveredId(mod.id)}
              onMouseLeave={() => setHoveredId(null)}
              style={{
                background: isHovered ? '#111' : '#000',
                border: 'none', cursor: 'pointer', textAlign: 'left',
                padding: '28px 24px', display: 'flex', flexDirection: 'column',
                gap: 12, minHeight: 200, transition: 'background 0.15s',
                position: 'relative'
              }}
            >
              {/* Module number + difficulty */}
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:11, letterSpacing:'0.22em', color:'#444', textTransform:'uppercase' }}>
                  MOD. {mod.num}
                </span>
                <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.16em', color: difficultyColor, textTransform:'uppercase' }}>
                  {mod.difficulty}
                </span>
              </div>

              {/* Title */}
              <div style={{ fontFamily:'Syne,sans-serif', fontWeight:600, fontSize:18, letterSpacing:'-0.02em', color:'#fff', lineHeight:1.1 }}>
                {mod.title}
              </div>

              {/* Subtitle */}
              <div style={{ fontFamily:'Inter,sans-serif', fontSize:12, color:'#555', lineHeight:1.5, flex:1 }}>
                {mod.subtitle}
              </div>

              {/* Footer */}
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:4 }}>
                <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.14em', color:'#444', textTransform:'uppercase' }}>
                  {mod.duration}
                </span>
                {pct > 0 && (
                  <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.14em', color: pct === 100 ? '#C9A84C' : '#3B82F6' }}>
                    {pct === 100 ? '✓ DONE' : `${pct}%`}
                  </span>
                )}
              </div>

              {/* Progress bar */}
              <div style={{ height:2, background:'#1a1a1a', position:'absolute', bottom:0, left:0, right:0 }}>
                {pct > 0 && (
                  <div style={{ height:'100%', width:`${pct}%`, background: accentColor, transition:'width 0.3s' }} />
                )}
              </div>
            </button>
          );
        })}
      </div>

      {/* Path guide */}
      <div style={{ marginTop:48, display:'grid', gridTemplateColumns:'1fr 1fr', gap:2, background:'#1a1a1a', border:'1px solid #1a1a1a' }}>
        {[
          { phase: '01–03', label: 'Foundations', desc: 'API basics → Prompt engineering → Scaling & costs', color:'#C9A84C' },
          { phase: '04–05', label: 'Intelligence', desc: 'Autonomous agents → RAG & knowledge systems', color:'#3B82F6' },
          { phase: '06–09', label: 'Interfaces', desc: 'Fine-tuning → Vision → Voice → Web deployment', color:'#C9A84C' },
          { phase: '10–12', label: 'Production', desc: 'Automation → Industry apps → Enterprise architecture', color:'#3B82F6' }
        ].map(({ phase, label, desc, color }) => (
          <div key={phase} style={{ background:'#000', padding:'20px 24px' }}>
            <div style={{ display:'flex', gap:12, alignItems:'baseline', marginBottom:6 }}>
              <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:10, letterSpacing:'0.16em', color, textTransform:'uppercase' }}>MOD. {phase}</span>
              <span style={{ fontFamily:'Syne,sans-serif', fontWeight:600, fontSize:14, color:'#fff' }}>{label}</span>
            </div>
            <div style={{ fontFamily:'Inter,sans-serif', fontSize:12, color:'#555', lineHeight:1.5 }}>{desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });