// Certificate of completion — shown when all 12 modules complete
function Certificate({ onClose }) {
  const [name, setName] = React.useState(() => localStorage.getItem('bwc_student_name') || '');
  const [editing, setEditing] = React.useState(!localStorage.getItem('bwc_student_name'));
  const today = new Date().toLocaleDateString('en-GB', { day:'numeric', month:'long', year:'numeric' });
  const totalModules = MODULES_DATA.length;

  function saveName() {
    localStorage.setItem('bwc_student_name', name);
    setEditing(false);
  }

  function handlePrint() {
    window.print();
  }

  return (
    <div style={{ position:'fixed', inset:0, zIndex:200, background:'rgba(0,0,0,0.95)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:24 }}
      onClick={onClose}>

      {/* Controls */}
      <div style={{ display:'flex', gap:10, marginBottom:24, zIndex:1 }} onClick={e => e.stopPropagation()}>
        <button onClick={handlePrint} style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', background:'#C9A84C', border:'none', color:'#000', padding:'8px 16px', cursor:'pointer', fontWeight:600 }}>
          Print / Save PDF
        </button>
        <button onClick={() => setEditing(true)} style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', background:'none', border:'1px solid #333', color:'#666', padding:'8px 16px', cursor:'pointer' }}>
          Edit name
        </button>
        <button onClick={onClose} style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', background:'none', border:'1px solid #333', color:'#666', padding:'8px 16px', cursor:'pointer' }}>
          Close
        </button>
      </div>

      {/* Name input */}
      {editing && (
        <div style={{ marginBottom:20, display:'flex', gap:8, zIndex:1 }} onClick={e => e.stopPropagation()}>
          <input value={name} onChange={e => setName(e.target.value)}
            placeholder="Enter your full name..."
            onKeyDown={e => e.key === 'Enter' && saveName()}
            style={{ fontFamily:'Inter,sans-serif', fontSize:16, background:'#111', border:'1px solid #333', color:'#fff', padding:'10px 16px', outline:'none', width:300 }}
            autoFocus />
          <button onClick={saveName} style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.14em', textTransform:'uppercase', background:'#C9A84C', border:'none', color:'#000', padding:'10px 16px', cursor:'pointer', fontWeight:600 }}>
            Confirm
          </button>
        </div>
      )}

      {/* Certificate */}
      <div id="certificate" onClick={e => e.stopPropagation()}
        style={{
          width: 820, background:'#000', border:'1px solid #2a2a2a',
          padding:'64px 72px', position:'relative', overflow:'hidden'
        }}>

        {/* Corner decorations */}
        {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h]) => (
          <div key={v+h} style={{
            position:'absolute', [v]:24, [h]:24,
            width:40, height:40,
            borderTop: v==='top' ? '1px solid #C9A84C44' : 'none',
            borderBottom: v==='bottom' ? '1px solid #C9A84C44' : 'none',
            borderLeft: h==='left' ? '1px solid #C9A84C44' : 'none',
            borderRight: h==='right' ? '1px solid #C9A84C44' : 'none',
          }} />
        ))}

        {/* Header */}
        <div style={{ textAlign:'center', marginBottom:48 }}>
          <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.28em', color:'#C9A84C', textTransform:'uppercase', marginBottom:20 }}>
            Rondanini Publishing · Certificate of Completion
          </div>
          <div style={{ width:48, height:1, background:'#C9A84C', margin:'0 auto 20px' }} />
          <div style={{ fontFamily:'Syne,sans-serif', fontWeight:700, fontSize:11, letterSpacing:'0.22em', color:'#555', textTransform:'uppercase' }}>
            This is to certify that
          </div>
        </div>

        {/* Name */}
        <div style={{ textAlign:'center', marginBottom:40 }}>
          <div style={{ fontFamily:'Syne,sans-serif', fontWeight:700, fontSize:name.length > 20 ? 36 : 48, letterSpacing:'-0.03em', color:'#fff', lineHeight:1, marginBottom:8 }}>
            {name || '[ Your Name ]'}
          </div>
          <div style={{ width:200, height:1, background:'#333', margin:'0 auto' }} />
        </div>

        {/* Body */}
        <div style={{ textAlign:'center', marginBottom:48 }}>
          <div style={{ fontFamily:'Inter,sans-serif', fontSize:15, color:'#666', lineHeight:1.8, marginBottom:16 }}>
            has successfully completed all {totalModules} modules of
          </div>
          <div style={{ fontFamily:'Syne,sans-serif', fontWeight:700, fontSize:26, letterSpacing:'-0.025em', color:'#fff', lineHeight:1.1, marginBottom:6 }}>
            Building with Claude:
          </div>
          <div style={{ fontFamily:'Syne,sans-serif', fontWeight:500, fontSize:22, letterSpacing:'-0.02em', color:'#C9A84C', fontStyle:'italic' }}>
            Design Tools &amp; Automation
          </div>
        </div>

        {/* Stats row */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:2, background:'#1a1a1a', border:'1px solid #1a1a1a', marginBottom:48 }}>
          {[
            { n:'12', l:'Modules' },
            { n:'150+', l:'Code Examples' },
            { n:'25+', l:'Exercises' },
            { n:'120K+', l:'Words of Content' }
          ].map(({ n, l }) => (
            <div key={l} style={{ background:'#000', padding:'16px', textAlign:'center' }}>
              <div style={{ fontFamily:'Syne,sans-serif', fontWeight:700, fontSize:22, color:'#C9A84C', letterSpacing:'-0.02em', lineHeight:1 }}>{n}</div>
              <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:8, letterSpacing:'0.18em', color:'#444', textTransform:'uppercase', marginTop:5 }}>{l}</div>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
          <div>
            <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, color:'#555', letterSpacing:'0.14em', marginBottom:4 }}>DATE OF COMPLETION</div>
            <div style={{ fontFamily:'Syne,sans-serif', fontWeight:600, fontSize:14, color:'#fff' }}>{today}</div>
          </div>
          <div style={{ textAlign:'center' }}>
            <div style={{ fontFamily:'Syne,sans-serif', fontWeight:700, fontSize:18, color:'#fff', letterSpacing:'-0.01em' }}>Build with Claude</div>
            <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:8, letterSpacing:'0.2em', color:'#555', textTransform:'uppercase', marginTop:3 }}>Rondanini Publishing</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, color:'#555', letterSpacing:'0.14em', marginBottom:4 }}>CREDENTIAL ID</div>
            <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:11, color:'#C9A84C' }}>
              BWC-{Math.abs(name.split('').reduce((h,c) => ((h<<5)-h)+c.charCodeAt(0),0) % 90000 + 10000).toString().padStart(5,'0')}
            </div>
          </div>
        </div>
      </div>

      {/* Print styles */}
      <style>{`
        @media print {
          body * { visibility: hidden; }
          #certificate, #certificate * { visibility: visible; }
          #certificate {
            position: fixed; top: 0; left: 0;
            width: 100vw; height: 100vh;
            padding: 48px 64px;
            border: none;
          }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Certificate });