/* global React, Phone, Butterfly, MatchRing, ButterflyProgress */

/* =========================================================
   22 · SKILL VERIFY INTRO — Pick a skill, see what's involved
   ========================================================= */
function ScrVerifyIntro() {
  return (
    <Phone bg="#fff">
      <div className="scr no-tab" style={{ paddingTop: 56 }}>

        <div style={{ padding: '0 20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M13 8H3M7 4L3 8l4 4" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cocoon-graphite)' }}>Skill check</div>
          <div style={{ width: 36 }} />
        </div>

        <div className="scr-inner" style={{ paddingTop: 0 }}>

          {/* Big skill heading */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 8 }}>
            Figma · advanced
          </div>
          <h1 className="scr-h-title" style={{ marginBottom: 14 }}>Prove what<br/>you <em>actually know.</em></h1>
          <p className="scr-h-sub" style={{ marginBottom: 22 }}>
            A 5-minute check — 8 questions, no time pressure on any one. Pass to add a verified badge to your profile.
          </p>

          {/* What's included */}
          <div className="app-card" style={{ background: 'var(--cocoon-paper)', borderColor: 'var(--cocoon-paper)', marginBottom: 14 }}>
            {[
              { i: '8', l: 'Multiple-choice + diagrams' },
              { i: '5m', l: 'Average time' },
              { i: '70%', l: 'Pass mark' },
            ].map((x, i, arr) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '10px 0', borderTop: i === 0 ? 'none' : '1px solid var(--cocoon-border)' }}>
                <div style={{ width: 44, fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, color: 'var(--cocoon-ink)', textAlign: 'center' }}>{x.i}</div>
                <div style={{ fontSize: 13, color: 'var(--cocoon-graphite)' }}>{x.l}</div>
              </div>
            ))}
          </div>

          {/* Why verify */}
          <div className="app-card" style={{ background: 'var(--cocoon-yellow)', borderColor: 'var(--cocoon-yellow)', marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="var(--cocoon-ink)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--cocoon-ink)' }}>
                Why verify
              </div>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--cocoon-ink)', margin: 0 }}>
              Verified skills weigh <strong>2.4× more</strong> in match scoring. Expect a <strong>+5–8% bump</strong> on relevant roles.
            </p>
          </div>

          <button className="app-btn app-btn-ink app-btn-block">Start the check</button>
          <div style={{ textAlign: 'center', marginTop: 12, fontSize: 12, color: 'var(--cocoon-mid)' }}>
            You can pause anytime · 1 retake allowed
          </div>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   23 · SKILL VERIFY QUESTION — A real question with diagram
   ========================================================= */
function ScrVerifyQuestion() {
  const opts = [
    { l: 'Use stack with hug contents', correct: false, picked: false },
    { l: 'Use auto-layout with fixed gap and fill', correct: true, picked: true },
    { l: 'Use a frame with absolute positioning', correct: false, picked: false },
    { l: 'Group the elements and align manually', correct: false, picked: false },
  ];
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr no-tab" style={{ paddingTop: 56 }}>

        <div style={{ padding: '0 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinecap="round"/></svg>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cocoon-graphite)' }}>Q4 of 8</div>
          <div style={{ fontSize: 12, color: 'var(--cocoon-mid)', fontFamily: 'var(--font-mono)' }}>2:14</div>
        </div>

        {/* Progress */}
        <div style={{ padding: '0 20px 22px' }}>
          <div style={{ height: 4, background: 'rgba(31,36,33,0.08)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: '50%', height: '100%', background: 'var(--cocoon-yellow)' }} />
          </div>
        </div>

        <div className="scr-inner" style={{ paddingTop: 0 }}>

          {/* Question */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 8 }}>
            Auto-layout
          </div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, lineHeight: 1.2, color: 'var(--cocoon-ink)', margin: '0 0 18px' }}>
            You need three cards that share width equally and resize together. Which approach?
          </h2>

          {/* Diagram */}
          <div style={{ background: '#fff', borderRadius: 16, padding: 16, marginBottom: 20, border: '1px solid var(--cocoon-border)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {[1,2,3].map(n => (
                <div key={n} style={{ height: 70, background: 'var(--cocoon-paper)', borderRadius: 8, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 8 }}>
                  <div style={{ width: '60%', height: 6, background: 'rgba(31,36,33,0.18)', borderRadius: 999 }} />
                  <div style={{ width: '40%', height: 4, background: 'rgba(31,36,33,0.12)', borderRadius: 999 }} />
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: 'var(--cocoon-mid)', textTransform: 'uppercase', fontWeight: 600 }}>
              <span>Card · fill</span>
              <span>Gap · 8</span>
              <span>Card · fill</span>
              <span>Gap · 8</span>
              <span>Card · fill</span>
            </div>
          </div>

          {/* Options */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
            {opts.map((o, i) => (
              <div key={i} style={{
                background: o.picked ? 'var(--cocoon-yellow)' : '#fff',
                border: o.picked ? '1.5px solid var(--cocoon-yellow)' : '1px solid var(--cocoon-border)',
                borderRadius: 14, padding: '14px 16px',
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <div style={{
                  width: 24, height: 24, borderRadius: '50%',
                  border: o.picked ? '6px solid var(--cocoon-ink)' : '1.5px solid var(--cocoon-mid)',
                  background: '#fff', flexShrink: 0,
                }} />
                <div style={{ fontSize: 14, fontWeight: o.picked ? 600 : 500, color: 'var(--cocoon-ink)' }}>{o.l}</div>
              </div>
            ))}
          </div>

        </div>

        {/* Sticky CTA */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '14px 20px 30px',
          background: 'rgba(242,238,228,0.96)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
          borderTop: '1px solid var(--cocoon-border)',
        }}>
          <button className="app-btn app-btn-ink app-btn-block">Confirm answer</button>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   24 · SKILL VERIFY RESULT — Pass + score bump
   ========================================================= */
function ScrVerifyResult() {
  return (
    <Phone bg="var(--cocoon-yellow)">
      <div style={{ position: 'absolute', inset: 0, padding: '70px 24px 36px', display: 'flex', flexDirection: 'column' }}>

        {/* Hero badge */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 24, marginBottom: 22 }}>
          <div style={{ position: 'relative', width: 156, height: 156 }}>
            <div className="pulse-ring" style={{ borderColor: 'var(--cocoon-ink)' }} />
            <div className="pulse-ring delay" style={{ borderColor: 'var(--cocoon-ink)' }} />
            <div style={{
              position: 'absolute', inset: 0, borderRadius: '50%',
              background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center',
            }}>
              <Butterfly size={92} />
            </div>
          </div>
        </div>

        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--cocoon-ink)', opacity: 0.6, marginBottom: 10 }}>
            Figma · advanced
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 40, lineHeight: 1, color: 'var(--cocoon-ink)', marginBottom: 12 }}>
            Verified.
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--cocoon-ink)', opacity: 0.72, margin: 0, maxWidth: 280, marginLeft: 'auto', marginRight: 'auto' }}>
            You scored 7 of 8. That's stronger than 84% of Brand Designers we've seen this year.
          </p>
        </div>

        {/* Score + bump */}
        <div style={{ background: 'var(--cocoon-ink)', borderRadius: 18, padding: 20, marginBottom: 14, color: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 4 }}>
                Profile match impact
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22 }}>+6% on relevant roles</div>
            </div>
            <MatchRing value={94} size={64} stroke={6} label="" />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'rgba(255,255,255,0.65)', lineHeight: 1.4 }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="var(--cocoon-yellow)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            Folk &amp; Form's match score moved from 96% → <strong style={{ color: 'var(--cocoon-yellow)' }}>98%</strong>
          </div>
        </div>

        <div style={{ background: 'var(--cocoon-ink)', opacity: 0.07, borderRadius: 12, padding: 12, marginBottom: 'auto', textAlign: 'center', fontSize: 12, color: 'var(--cocoon-ink)' }}>
          Verified skills appear with a check on your public profile.
        </div>

        <button className="app-btn app-btn-ink app-btn-block">See updated matches</button>
        <div style={{ textAlign: 'center', marginTop: 12, fontSize: 12, color: 'rgba(31,36,33,0.65)' }}>
          Verify another skill
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { ScrVerifyIntro, ScrVerifyQuestion, ScrVerifyResult });