const Certificate = ({ completedLessons, onBack }) => {
  const { user } = React.useContext(UserCtx);
  const studentName = user?.name || COURSE.student;
  const pct = Math.round((completedLessons.size / COURSE.totalLessons) * 100);
  const today = new Date().toLocaleDateString('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' });

  if (pct < 100) {
    return (
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', minHeight: 'calc(100vh - 58px)', gap: 18, padding: 40,
        textAlign: 'center',
      }}>
        <div style={{ opacity: 0.35 }}><IconAward size={52} color="var(--text2)"/></div>
        <p style={{ fontSize: 17, fontWeight: 500, color: 'var(--text)', maxWidth: 340 }}>
          Certificado disponível após concluir todas as aulas
        </p>
        <p style={{ fontSize: 14, color: 'var(--text2)' }}>Progresso atual: <strong style={{ color: 'var(--gold)' }}>{pct}%</strong></p>
        <button onClick={onBack} style={{
          background: 'var(--gold)', borderRadius: 8,
          padding: '11px 22px', fontSize: 13, fontWeight: 600, color: '#0A0A0A',
        }}>
          Continuar estudando
        </button>
      </div>
    );
  }

  return (
    <div style={{
      minHeight: 'calc(100vh - 58px)', display: 'flex',
      alignItems: 'center', justifyContent: 'center', padding: '40px 24px',
    }}>
      <div style={{
        width: '100%', maxWidth: 700,
        background: 'var(--card)', border: '1px solid var(--border)',
        borderRadius: 20, padding: '56px 64px', textAlign: 'center',
        position: 'relative', overflow: 'hidden',
        boxShadow: 'var(--shadow)',
      }}>

        {/* Corner accents */}
        {[
          { top: 0, left: 0, borderRadius: '0 0 80px 0' },
          { top: 0, right: 0, borderRadius: '0 0 0 80px' },
          { bottom: 0, left: 0, borderRadius: '0 80px 0 0' },
          { bottom: 0, right: 0, borderRadius: '80px 0 0 0' },
        ].map((s, i) => (
          <div key={i} style={{
            position: 'absolute', width: 72, height: 72,
            background: 'var(--gold-bg)', border: '1px solid var(--border)', ...s,
          }}/>
        ))}

        {/* Header label */}
        <p style={{
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--gold)', marginBottom: 20,
        }}>
          Certificado de Conclusão
        </p>

        {/* Divider with icon */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 30 }}>
          <div style={{ flex: 1, height: 1, background: 'var(--border)' }}/>
          <IconAward size={30} color="var(--gold)"/>
          <div style={{ flex: 1, height: 1, background: 'var(--border)' }}/>
        </div>

        <p style={{ fontSize: 13, color: 'var(--text2)', marginBottom: 14 }}>
          Este certificado é conferido a
        </p>

        <h1 style={{
          fontSize: 42, fontWeight: 300, color: 'var(--text)',
          letterSpacing: '-0.02em', marginBottom: 22, lineHeight: 1,
        }}>
          {studentName}
        </h1>

        <p style={{ fontSize: 13, color: 'var(--text2)', marginBottom: 10 }}>
          pela conclusão do curso
        </p>

        <h2 style={{
          fontSize: 26, fontWeight: 700, color: 'var(--gold)',
          marginBottom: 6, letterSpacing: '-0.01em', lineHeight: 1.2,
        }}>
          {COURSE.title}
        </h2>

        <p style={{ fontSize: 13, color: 'var(--text2)', marginBottom: 36 }}>
          {COURSE.subtitle} · {COURSE.totalHours} de conteúdo
        </p>

        {/* Bottom rule */}
        <div style={{ height: 1, background: 'var(--border)', marginBottom: 26 }}/>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }}>
          <div style={{ textAlign: 'left' }}>
            <div style={{ width: 120, height: 1, background: 'var(--border)', marginBottom: 8 }}/>
            <p style={{ fontSize: 13, fontWeight: 500, color: 'var(--text)', marginBottom: 2 }}>
              {COURSE.instructor}
            </p>
            <p style={{ fontSize: 10, color: 'var(--text3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              Instrutora
            </p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ width: 120, height: 1, background: 'var(--border)', marginBottom: 8, marginLeft: 'auto' }}/>
            <p style={{ fontSize: 13, color: 'var(--text)', marginBottom: 2 }}>{today}</p>
            <p style={{ fontSize: 10, color: 'var(--text3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              Data de conclusão
            </p>
          </div>
        </div>

        {/* Actions */}
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          <button
            onClick={() => window.print()}
            style={{
              display: 'flex', alignItems: 'center', gap: 8,
              background: 'var(--gold)', borderRadius: 8,
              padding: '11px 22px', fontSize: 13, fontWeight: 600, color: '#0A0A0A',
            }}
          >
            <IconDownload size={14}/> Baixar certificado
          </button>
          <button onClick={onBack} style={{
            background: 'none', border: '1px solid var(--border)',
            borderRadius: 8, padding: '11px 18px',
            fontSize: 13, color: 'var(--text2)',
          }}>
            Voltar ao curso
          </button>
        </div>
      </div>
    </div>
  );
};

window.Certificate = Certificate;