// Certs.jsx — certification verification system for the account dashboard.
// All verification is automated and server-side. No manual review.
// No unnecessary data stored — emails and tokens used once then discarded.

const LEVEL_STYLES = {
  foundational: { border: '#BFBFBF', label: 'FOUNDATIONAL', bg: 'rgba(191,191,191,0.08)' },
  associate:    { border: '#00E5FF', label: 'ASSOCIATE',    bg: 'rgba(0,229,255,0.08)' },
  professional: { border: '#00FF41', label: 'PROFESSIONAL', bg: 'rgba(0,255,65,0.08)' },
  expert:       { border: '#FFD23F', label: 'EXPERT',       bg: 'rgba(255,210,63,0.08)' },
  master:       { border: '#FF3344', label: 'MASTER',       bg: 'rgba(255,51,68,0.08)' },
};

const TABS = [
  { id: 'credly', label: 'CREDLY' },
  { id: 'htb',    label: 'HACK THE BOX' },
];

const getLevelStyle = (level) => LEVEL_STYLES[level] || LEVEL_STYLES.foundational;

const CERT_BOOST_CAP = 50;

const Certs = () => {
  const [providers, setProviders] = React.useState([]);
  const [myCerts, setMyCerts] = React.useState([]);
  const [totalPoints, setTotalPoints] = React.useState(0);
  const [certBoost, setCertBoost] = React.useState(0);
  const [activeTab, setActiveTab] = React.useState('credly');
  const [verifying, setVerifying] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [badgeUrl, setBadgeUrl] = React.useState('');
  const [credlyEmail, setCredlyEmail] = React.useState('');
  const [htbMode, setHtbMode] = React.useState('rank');
  const [htbToken, setHtbToken] = React.useState('');
  const [selectedProlab, setSelectedProlab] = React.useState('');
  const [showCatalog, setShowCatalog] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

  const loadData = async () => {
    try {
      const [provRes, certRes] = await Promise.all([
        window.OBC_API.getCertProviders(),
        window.OBC_API.getMyCerts(),
      ]);
      if (provRes && provRes.providers) setProviders(provRes.providers);
      if (certRes) {
        setMyCerts(certRes.certs || []);
        setTotalPoints(certRes.total_cert_points || 0);
        setCertBoost(certRes.cert_boost || 0);
      }
    } catch (e) {
      // silent — data will show empty states
    }
    setLoading(false);
  };

  React.useEffect(() => { loadData(); }, []);

  const handleVerify = async () => {
    setResult(null);
    setVerifying(true);

    try {
      let res;
      if (activeTab === 'credly') {
        if (!badgeUrl.trim()) { setResult({ ok: false, error: '// badge url required.' }); setVerifying(false); return; }
        if (!credlyEmail.trim()) { setResult({ ok: false, error: '// credly account email required.' }); setVerifying(false); return; }
        res = await window.OBC_API.verifyCert('credly', { badge_url: badgeUrl.trim(), credly_email: credlyEmail.trim() });
      } else if (activeTab === 'htb') {
        if (!htbToken.trim()) { setResult({ ok: false, error: '// htb api token required.' }); setVerifying(false); return; }
        if (htbMode === 'prolab') {
          if (!selectedProlab) { setResult({ ok: false, error: '// select a pro lab.' }); setVerifying(false); return; }
          res = await window.OBC_API.verifyCert('htb_prolab', { htb_api_token: htbToken.trim(), prolab_id: selectedProlab });
        } else {
          res = await window.OBC_API.verifyCert('htb', { htb_api_token: htbToken.trim() });
        }
      }

      if (res && !res.ok && res.error) {
        const errMap = {
          BADGE_NOT_FOUND: '// badge not found. check the url and try again.',
          CERT_NOT_RECOGNIZED: '// your rank or badge does not match a recognized certification.',
          CERT_ALREADY_VERIFIED: '// you have already verified this certification.',
          CERT_ALREADY_CLAIMED: '// this credential has already been verified by another account.',
          INVALID_BADGE_URL: '// invalid credly badge url format.',
          MISSING_BADGE_URL: '// badge url required.',
          MISSING_CREDLY_EMAIL: '// credly account email required.',
          MISSING_PARAMS: '// all fields are required.',
          BADGE_EMAIL_MISMATCH: '// the email does not match the badge recipient. use the email linked to your credly account.',
          HTB_TOKEN_INVALID: '// htb api token is invalid or expired. generate a new one in htb settings.',
          HTB_API_ERROR: '// could not reach htb api. try again later.',
          PROLAB_NOT_FOUND: '// pro lab not found on your profile. make sure you have access.',
          PROLAB_INCOMPLETE: `// pro lab not complete. progress: ${res?.completion_percentage || 0}% (${res?.flags_owned || 0}/${res?.flags_total || 0} flags).`,
        };
        setResult({ ok: false, error: errMap[res.error] || '// ' + res.error.toLowerCase() });
      } else if (res && res.ok) {
        setResult({
          ok: true,
          cert_name: res.cert?.name,
          level: res.cert?.level,
          points_awarded: res.cert?.points_awarded,
          boost_percent: res.cert?.boost_percent,
          status: 'VERIFIED',
          tier_changed: res.tier_changed,
          new_tier: res.new_tier,
          cert_boost: res.cert_boost,
          cert_boost_cap: res.cert_boost_cap,
        });
        const certRes = await window.OBC_API.getMyCerts();
        if (certRes) {
          setMyCerts(certRes.certs || []);
          setTotalPoints(certRes.total_cert_points || 0);
          setCertBoost(certRes.cert_boost || 0);
        }
        if (activeTab === 'credly') { setBadgeUrl(''); setCredlyEmail(''); }
        if (activeTab === 'htb') setHtbToken('');
      }
    } catch (e) {
      setResult({ ok: false, error: '// verification failed. try again.' });
    }

    setVerifying(false);
  };

  if (loading) {
    return (
      <div>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: '#FFF', letterSpacing: '0.04em', textTransform: 'uppercase', margin: '0 0 6px' }}>./certifications</h3>
        <div style={{ fontSize: 14, color: '#BFBFBF', letterSpacing: '0.18em' }}>// loading certification data...</div>
      </div>
    );
  }

  return (
    <div>
      <h3 style={{ fontSize: 22, fontWeight: 800, color: '#FFF', letterSpacing: '0.04em', textTransform: 'uppercase', margin: '0 0 6px' }}>./certifications</h3>
      <div style={{ fontSize: 14, color: '#BFBFBF', letterSpacing: '0.18em', marginBottom: 22 }}>// verify your cyber credentials. earn points + permanent xp boost on all orders. cap: {CERT_BOOST_CAP}%.</div>

      {/* ==================== MY CERTIFICATIONS ==================== */}
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontSize: 13, color: '#BFBFBF', letterSpacing: '0.22em', fontWeight: 700, marginBottom: 14 }}>// MY CERTIFICATIONS</div>

        {myCerts.length === 0 ? (
          <div style={{ padding: 22, background: '#0A0A0A', border: '1px dashed rgba(255,255,255,0.22)', fontSize: 14, color: '#9A9A9A', letterSpacing: '0.06em', lineHeight: 1.7 }}>
            // no verified certifications. link your credly or htb profile below.
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
            {myCerts.map((cert) => {
              const ls = getLevelStyle(cert.level);
              return (
                <div key={cert.id} style={{
                  display: 'flex', background: '#0A0A0A',
                  border: `1px solid rgba(255,255,255,0.22)`,
                }}>
                  {/* Level accent strip */}
                  <div style={{ width: 4, background: ls.border, flexShrink: 0 }}></div>
                  <div style={{ padding: '14px 16px', flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 16, fontWeight: 800, color: '#FFF', letterSpacing: '0.04em', lineHeight: 1.3 }}>{cert.cert_name}</span>
                      <span style={{
                        padding: '2px 8px', fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
                        border: `1px solid ${ls.border}`, color: ls.border, background: ls.bg,
                        whiteSpace: 'nowrap',
                      }}>{ls.label}</span>
                    </div>
                    <div style={{ marginTop: 8, fontSize: 13, color: '#9A9A9A', letterSpacing: '0.06em', lineHeight: 1.6 }}>
                      <div>{'>'} {cert.provider_name}</div>
                      <div>{'>'} +{cert.points_awarded} pts{(cert.boost_effective || cert.boost_percent) ? ` · +${cert.boost_effective || cert.boost_percent}% boost` : ''}</div>
                      <div>{'>'} verified: {cert.verified_at ? cert.verified_at.slice(0, 10) : '—'}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {myCerts.length > 0 && (
          <div style={{ marginTop: 12, padding: '10px 14px', background: 'rgba(0,255,65,0.04)', border: '1px solid rgba(0,255,65,0.22)', fontSize: 14, color: '#00FF41', letterSpacing: '0.08em', lineHeight: 1.8 }}>
            $ cert points: <span style={{ fontWeight: 800 }}>{totalPoints} pts</span>
            {certBoost > 0 && <><br/>$ cert boost: <span style={{ fontWeight: 800, color: '#00E5FF' }}>+{certBoost}%</span> on all orders{certBoost >= CERT_BOOST_CAP && <span style={{ color: '#FFD23F' }}> (MAX)</span>}</>}
          </div>
        )}
      </div>

      {/* ==================== VERIFY CERTIFICATION ==================== */}
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontSize: 13, color: '#BFBFBF', letterSpacing: '0.22em', fontWeight: 700, marginBottom: 14 }}>// VERIFY CERTIFICATION</div>

        {/* Tab bar */}
        <div style={{ display: 'flex', gap: 4, marginBottom: 18 }}>
          {TABS.map((tab) => (
            <button key={tab.id} onClick={() => { setActiveTab(tab.id); setResult(null); }} style={{
              padding: '10px 16px', background: activeTab === tab.id ? '#00FF41' : 'transparent',
              color: activeTab === tab.id ? '#000' : '#E0E0E0',
              border: `1px solid ${activeTab === tab.id ? '#00FF41' : 'rgba(255,255,255,0.22)'}`,
              fontFamily: 'inherit', fontSize: 13, fontWeight: 700, letterSpacing: '0.14em',
              cursor: 'pointer', borderRadius: 2,
            }}>{tab.label}</button>
          ))}
        </div>

        <div style={{ padding: 20, background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.22)' }}>
          {/* CREDLY tab */}
          {activeTab === 'credly' && (
            <div>
              <div style={{ fontSize: 13, color: '#00E5FF', letterSpacing: '0.22em', marginBottom: 14 }}>$ ./verify --provider credly</div>
              <CertInput
                label="BADGE URL"
                type="url"
                value={badgeUrl}
                onChange={setBadgeUrl}
                placeholder="https://www.credly.com/badges/..."
              />
              <div style={{ marginTop: 14 }}>
                <CertInput
                  label="CREDLY ACCOUNT EMAIL"
                  type="email"
                  value={credlyEmail}
                  onChange={setCredlyEmail}
                  placeholder="the email linked to your credly account"
                />
                <div style={{ marginTop: 8, padding: '8px 12px', background: 'rgba(255,210,63,0.06)', border: '1px solid rgba(255,210,63,0.22)', fontSize: 12, color: '#FFD23F', letterSpacing: '0.06em', lineHeight: 1.7 }}>
                  // your email is checked against the badge recipient to confirm ownership.<br />
                  // it is never stored in our database.
                </div>
              </div>
              <div style={{ marginTop: 14 }}>
                <VerifyBtn loading={verifying} onClick={handleVerify} />
              </div>
            </div>
          )}

          {/* HACK THE BOX tab */}
          {activeTab === 'htb' && (() => {
            const htbProv = providers.find((p) => p.slug === 'htb');
            const prolabs = htbProv ? (htbProv.certs || []).filter((c) => c.category === 'prolab') : [];
            return (
            <div>
              <div style={{ fontSize: 13, color: '#00FF41', letterSpacing: '0.22em', marginBottom: 14 }}>$ ./verify --provider htb</div>
              <div style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 13, letterSpacing: '0.22em', color: '#E0E0E0', fontWeight: 700, marginBottom: 6 }}>{'>'} HTB API TOKEN</div>
                <input
                  type="password"
                  value={htbToken}
                  onChange={(e) => setHtbToken(e.target.value)}
                  placeholder="paste your htb api token..."
                  maxLength={2048}
                  style={{
                    width: '100%', background: '#000', border: '1px solid rgba(255,255,255,0.28)',
                    color: '#FFF', fontFamily: 'inherit', fontSize: 15, padding: '10px 12px', borderRadius: 2,
                  }}
                  onFocus={(e) => { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; }}
                  onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; }}
                />
                <div style={{ marginTop: 8, padding: '8px 12px', background: 'rgba(255,210,63,0.06)', border: '1px solid rgba(255,210,63,0.22)', fontSize: 12, color: '#FFD23F', letterSpacing: '0.06em', lineHeight: 1.7 }}>
                  // your token proves account ownership and is discarded after verification.<br />
                  // we never store your api token. you will need to provide it each time.
                </div>
              </div>

              <div style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 13, letterSpacing: '0.22em', color: '#E0E0E0', fontWeight: 700, marginBottom: 8 }}>{'>'} VERIFICATION TYPE</div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button onClick={() => { setHtbMode('rank'); setResult(null); }} style={{
                    padding: '8px 14px', background: htbMode === 'rank' ? 'rgba(0,255,65,0.12)' : 'transparent',
                    border: `1px solid ${htbMode === 'rank' ? '#00FF41' : 'rgba(255,255,255,0.22)'}`,
                    color: htbMode === 'rank' ? '#00FF41' : '#BFBFBF',
                    fontFamily: 'inherit', fontSize: 13, letterSpacing: '0.1em', fontWeight: 600, cursor: 'pointer', borderRadius: 2,
                  }}>RANK</button>
                  <button onClick={() => { setHtbMode('prolab'); setResult(null); }} style={{
                    padding: '8px 14px', background: htbMode === 'prolab' ? 'rgba(0,255,65,0.12)' : 'transparent',
                    border: `1px solid ${htbMode === 'prolab' ? '#00FF41' : 'rgba(255,255,255,0.22)'}`,
                    color: htbMode === 'prolab' ? '#00FF41' : '#BFBFBF',
                    fontFamily: 'inherit', fontSize: 13, letterSpacing: '0.1em', fontWeight: 600, cursor: 'pointer', borderRadius: 2,
                  }}>PRO LAB</button>
                </div>
              </div>

              {htbMode === 'rank' && (
                <div style={{ fontSize: 12, color: '#9A9A9A', letterSpacing: '0.06em', lineHeight: 1.7, marginBottom: 6 }}>
                  // your current rank is auto-detected from your htb profile. no need to select it.
                </div>
              )}

              {htbMode === 'prolab' && (
                <div style={{ marginBottom: 14 }}>
                  <div style={{ fontSize: 13, letterSpacing: '0.22em', color: '#E0E0E0', fontWeight: 700, marginBottom: 6 }}>{'>'} PRO LAB</div>
                  <select
                    value={selectedProlab}
                    onChange={(e) => setSelectedProlab(e.target.value)}
                    style={{
                      width: '100%', background: '#000', border: '1px solid rgba(255,255,255,0.28)',
                      color: selectedProlab ? '#FFF' : '#9A9A9A', fontFamily: 'inherit', fontSize: 15,
                      padding: '10px 12px', borderRadius: 2, cursor: 'pointer',
                      appearance: 'none', WebkitAppearance: 'none',
                      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A9A9A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E")`,
                      backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center',
                    }}
                    onFocus={(e) => { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; }}
                    onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; }}
                  >
                    <option value="" disabled>select pro lab...</option>
                    {prolabs.map((c) => (
                      <option key={c.id} value={c.id}>{c.name}{c.host_count ? ' (' + c.host_count + ' hosts)' : ''} [{getLevelStyle(c.level).label}] — +{c.boost_effective || c.boost_percent}% · {c.points} pts</option>
                    ))}
                  </select>
                  <div style={{ marginTop: 6, fontSize: 12, color: '#9A9A9A', letterSpacing: '0.06em' }}>// requires 100% flag completion.</div>
                </div>
              )}

              <div style={{ fontSize: 12, color: '#9A9A9A', letterSpacing: '0.06em' }}>// htb formal certs (CPTS, CBBH, etc.) are on credly — verify them in the credly tab.</div>
              <div style={{ marginTop: 14 }}>
                <VerifyBtn loading={verifying} onClick={handleVerify} />
              </div>
            </div>
            );
          })()}

          {/* Result display */}
          {result && (
            <div style={{ marginTop: 18 }}>
              {result.ok ? (
                <div style={{ padding: '14px 16px', border: '1px solid #00FF41', background: 'rgba(0,255,65,0.06)' }}>
                  <div style={{ fontSize: 14, color: '#00FF41', letterSpacing: '0.08em', lineHeight: 1.8 }}>
                    $ verification complete<br />
                    {'>'} cert: <span style={{ fontWeight: 800 }}>{result.cert_name || 'VERIFIED'}</span><br />
                    {result.level && <>{'>'} level: <span style={{ color: getLevelStyle(result.level).border, fontWeight: 700 }}>[{getLevelStyle(result.level).label}]</span><br /></>}
                    {result.points_awarded != null && <>{'>'} points awarded: <span style={{ fontWeight: 800 }}>+{result.points_awarded} pts</span><br /></>}
                    {result.boost_percent > 0 && <>{'>'} xp boost: <span style={{ fontWeight: 800, color: '#00E5FF' }}>+{result.boost_percent}%</span>{result.cert_boost != null && <> · total: <span style={{ fontWeight: 800, color: '#00E5FF' }}>{result.cert_boost}%</span>{result.cert_boost >= (result.cert_boost_cap || CERT_BOOST_CAP) && <span style={{ color: '#FFD23F' }}> (MAX)</span>}</>}<br /></>}
                    {'>'} status: <span style={{ fontWeight: 700 }}>[VERIFIED]</span>
                    {result.tier_changed && <><br />{'>'} <span style={{ color: '#FFD23F', fontWeight: 800 }}>RANK UP: {result.new_tier}</span></>}
                  </div>
                </div>
              ) : (
                <div style={{ padding: '14px 16px', border: '1px solid #FF3344', background: 'rgba(255,51,68,0.06)', fontSize: 14, color: '#FF3344', letterSpacing: '0.06em' }}>
                  {result.error || '// unknown error.'}
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* ==================== AVAILABLE CERTIFICATIONS (collapsible) ==================== */}
      <div>
        <div
          onClick={() => setShowCatalog(!showCatalog)}
          style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '12px 14px', background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.22)',
            cursor: 'pointer', transition: 'border-color 120ms',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#00FF41'; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.22)'; }}
        >
          <span style={{ fontSize: 13, color: '#BFBFBF', letterSpacing: '0.22em', fontWeight: 700 }}>// AVAILABLE CERTIFICATIONS</span>
          <span style={{ fontSize: 13, color: '#00FF41', letterSpacing: '0.18em' }}>{showCatalog ? '[ - ] collapse' : '[ + ] expand'}</span>
        </div>

        {showCatalog && (
          <div style={{ border: '1px solid rgba(255,255,255,0.22)', borderTop: 'none', padding: 18, background: '#0A0A0A' }}>
            {providers.length === 0 ? (
              <div style={{ fontSize: 14, color: '#9A9A9A', letterSpacing: '0.06em' }}>// no certification providers configured.</div>
            ) : (
              providers.map((prov) => {
                const cats = {};
                (prov.certs || []).forEach((c) => {
                  const cat = c.category || 'cert';
                  if (!cats[cat]) cats[cat] = [];
                  cats[cat].push(c);
                });
                const CAT_LABELS = { rank: 'RANKS', cert: 'CERTIFICATIONS', path: 'PATHS', prolab: 'PRO LABS' };
                const CAT_ORDER = ['rank', 'cert', 'path', 'prolab'];
                const sortedCats = CAT_ORDER.filter((k) => cats[k]);
                const hasManyCategories = sortedCats.length > 1;

                return (
                <div key={prov.id} style={{ marginBottom: 18 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
                    <span style={{ fontSize: 15, fontWeight: 800, color: '#FFF', letterSpacing: '0.06em' }}>{prov.name}</span>
                    {prov.is_partner && <span style={{ fontSize: 11, padding: '2px 6px', border: '1px solid #00FF41', color: '#00FF41', letterSpacing: '0.14em', fontWeight: 700 }}>PARTNER</span>}
                    {prov.website_url && (
                      <a href={prov.website_url} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, color: '#00E5FF', letterSpacing: '0.08em', textDecoration: 'none' }}>
                        [{prov.slug}]
                      </a>
                    )}
                  </div>
                  {(prov.certs || []).length === 0 ? (
                    <div style={{ fontSize: 13, color: '#9A9A9A', paddingLeft: 14 }}>// no cert types listed.</div>
                  ) : (
                    sortedCats.map((cat) => (
                      <div key={cat} style={{ marginBottom: hasManyCategories ? 12 : 0 }}>
                        {hasManyCategories && <div style={{ fontSize: 11, color: '#9A9A9A', letterSpacing: '0.22em', fontWeight: 700, marginBottom: 4, paddingLeft: 14 }}>// {CAT_LABELS[cat] || cat.toUpperCase()}</div>}
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                          {cats[cat].map((c) => {
                            const ls = getLevelStyle(c.level);
                            return (
                              <div key={c.id} style={{
                                display: 'flex', alignItems: 'center', gap: 12,
                                padding: '8px 14px', border: '1px solid rgba(255,255,255,0.1)',
                                background: 'rgba(255,255,255,0.02)',
                              }}>
                                <span style={{ color: '#00FF41', fontSize: 13, width: 14, flexShrink: 0 }}>{'>'}</span>
                                <span style={{ flex: 1, fontSize: 14, color: '#E0E0E0', letterSpacing: '0.04em' }}>
                                  {c.name}
                                  {c.host_count && <span style={{ color: '#9A9A9A', fontSize: 12 }}> · {c.host_count} hosts</span>}
                                </span>
                                <span style={{
                                  padding: '2px 8px', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                                  border: `1px solid ${ls.border}`, color: ls.border, background: ls.bg,
                                  whiteSpace: 'nowrap',
                                }}>{ls.label}</span>
                                <span style={{ fontSize: 14, fontWeight: 700, color: '#00E5FF', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>+{c.boost_effective || c.boost_percent || 0}%</span>
                                <span style={{ fontSize: 13, color: '#9A9A9A', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>+{c.points} pts</span>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    ))
                  )}
                </div>
                );
              }))
            }
            <div style={{ marginTop: 10, fontSize: 12, color: '#9A9A9A', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              // all verifications are automatic. credly badges + htb ranks verified instantly.
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// ===================== SHARED SUBCOMPONENTS =====================

const CertInput = ({ label, value, onChange, placeholder, type }) => (
  <div>
    <div style={{ fontSize: 13, letterSpacing: '0.22em', color: '#E0E0E0', fontWeight: 700, marginBottom: 6 }}>{'>'} {label}</div>
    <input
      type={type || 'text'}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      maxLength={2000}
      style={{
        width: '100%', background: '#000', border: '1px solid rgba(255,255,255,0.28)',
        color: '#FFF', fontFamily: 'inherit', fontSize: 15, padding: '10px 12px', borderRadius: 2,
      }}
      onFocus={(e) => { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; }}
      onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; }}
    />
  </div>
);

const VerifyBtn = ({ loading, onClick, label }) => (
  <button
    onClick={onClick}
    disabled={loading}
    style={{
      background: 'transparent', border: '1px solid #00FF41', color: '#00FF41',
      padding: '10px 18px', fontFamily: 'inherit', fontSize: 14, fontWeight: 700,
      letterSpacing: '0.18em', cursor: loading ? 'wait' : 'pointer', borderRadius: 2,
      opacity: loading ? 0.6 : 1, textTransform: 'uppercase',
    }}
  >
    {loading ? '// verifying...' : (label || './verify')}
  </button>
);

window.Certs = Certs;