/* global React, Phone, Butterfly, Avatar, MatchRing, ButterflyProgress, CompanyMark, TabBar */

/* =========================================================
   19 · MOCK INTERVIEW INTRO — Coach offers a 5-min prep
   ========================================================= */
function ScrMockIntro() {
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr no-tab" style={{ paddingTop: 56 }}>

        <div style={{ padding: '0 20px 14px', 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)' }}>Mock interview</div>
          <div style={{ width: 36 }} />
        </div>

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

          {/* Coach hero */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24, position: 'relative' }}>
            <div style={{ position: 'relative', width: 120, height: 120, display: 'grid', placeItems: 'center' }}>
              <div className="pulse-ring" style={{ inset: 0 }} />
              <img src="assets/logo-mark.png" alt="" aria-hidden="true"
                style={{ width: 92, height: 92, objectFit: 'contain', filter: 'drop-shadow(0 8px 18px rgba(252,210,9,0.4))' }} />
            </div>
          </div>

          <div style={{ textAlign: 'center', marginBottom: 26 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 10 }}>
              Folk &amp; Form · Brand Designer
            </div>
            <h1 className="scr-h-title" style={{ fontSize: 30, textAlign: 'center', maxWidth: 280, margin: '0 auto' }}>
              Let's run a quick<br/><em>mock interview.</em>
            </h1>
            <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--cocoon-graphite)', maxWidth: 300, margin: '14px auto 0' }}>
              Three questions Folk &amp; Form usually ask. I'll listen, then tell you what landed.
            </p>
          </div>

          {/* Questions preview */}
          <div className="app-card" style={{ background: '#fff', padding: 0, overflow: 'hidden', marginBottom: 20 }}>
            {[
              { q: 'Walk me through the fintech rebrand.',         t: '~ 60s' },
              { q: 'What did the user research uncover?',           t: '~ 45s' },
              { q: 'How do you take feedback from non-designers?',  t: '~ 60s' },
            ].map((x, i, arr) => (
              <div key={i} style={{
                padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
                borderBottom: i < arr.length - 1 ? '1px solid var(--cocoon-border)' : 'none',
              }}>
                <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center', flexShrink: 0, fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 13, color: 'var(--cocoon-ink)' }}>{i + 1}</div>
                <div style={{ flex: 1, fontSize: 13, lineHeight: 1.4, color: 'var(--cocoon-ink)' }}>{x.q}</div>
                <span style={{ fontSize: 11, color: 'var(--cocoon-mid)', fontWeight: 600 }}>{x.t}</span>
              </div>
            ))}
          </div>

          <div style={{ fontSize: 12, color: 'var(--cocoon-mid)', lineHeight: 1.5, textAlign: 'center', marginBottom: 20 }}>
            About 5 minutes. Nothing is shared with employers — this is just for you.
          </div>

          <button className="app-btn app-btn-primary app-btn-block">
            Start mock interview
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div style={{ textAlign: 'center', marginTop: 12, fontSize: 12, color: 'var(--cocoon-mid)' }}>Send me written tips instead</div>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   20 · MOCK INTERVIEW QUESTION — Live, listening
   ========================================================= */
function ScrMockQuestion() {
  return (
    <Phone bg="var(--cocoon-ink)" dark>
      <div className="scr no-tab" style={{ paddingTop: 60 }}>

        {/* Background glow */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 0,
          background: 'radial-gradient(circle at 50% 25%, rgba(252,210,9,0.16) 0%, rgba(31,36,33,0) 55%)',
        }} />

        <div style={{ padding: '0 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>
            Question 1 of 3
          </div>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'grid', placeItems: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/></svg>
          </div>
        </div>

        {/* Progress dots */}
        <div style={{ display: 'flex', gap: 6, padding: '0 20px 28px', position: 'relative' }}>
          {[1,2,3].map((n, i) => (
            <div key={n} style={{ flex: 1, height: 3, borderRadius: 999, background: i === 0 ? 'var(--cocoon-yellow)' : 'rgba(255,255,255,0.15)' }} />
          ))}
        </div>

        <div style={{ position: 'relative', padding: '0 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', height: 'calc(100% - 130px)' }}>

          {/* Coach is asking */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 14 }}>
            Coach asks
          </div>
          <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 26, lineHeight: 1.18, color: '#fff', textAlign: 'center', maxWidth: 280, marginTop: 0, marginBottom: 32 }}>
            "Walk me through the fintech rebrand you mentioned."
          </p>

          {/* Pulsing butterfly */}
          <div style={{ position: 'relative', width: 200, height: 200, display: 'grid', placeItems: 'center', marginBottom: 22 }}>
            <div className="pulse-ring" style={{ inset: 4 }} />
            <div className="pulse-ring delay" style={{ inset: 30 }} />
            <img src="assets/logo-mark.png" alt="" aria-hidden="true"
              style={{
                width: 168, height: 168, objectFit: 'contain',
                animation: 'butterflyBreathe 1.4s var(--ease-in-out) infinite',
                filter: 'drop-shadow(0 14px 36px rgba(252,210,9,0.45))',
                position: 'relative', zIndex: 2,
              }} />
          </div>

          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 12, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600,
            marginBottom: 'auto',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FF3B30', boxShadow: '0 0 0 3px rgba(255,59,48,0.25)' }} />
            Listening · 0:24
          </div>

          {/* Controls */}
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 22, marginBottom: 14 }}>
            <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'grid', placeItems: 'center' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M5 6h14M5 18h14" stroke="rgba(255,255,255,0.8)" strokeWidth="1.8" strokeLinecap="round"/></svg>
            </div>
            <button style={{
              width: 76, height: 76, borderRadius: '50%',
              background: 'var(--cocoon-yellow)', border: 0, cursor: 'pointer',
              display: 'grid', placeItems: 'center',
              boxShadow: '0 12px 36px rgba(252,210,9,0.5)',
            }}>
              <div style={{ width: 22, height: 22, borderRadius: 5, background: 'var(--cocoon-ink)' }} />
            </button>
            <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'grid', placeItems: 'center' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 5l14 14" stroke="rgba(255,255,255,0.8)" strokeWidth="1.8" strokeLinecap="round"/></svg>
            </div>
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>Stop · Skip</div>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   21 · MOCK INTERVIEW FEEDBACK — Summary + scores
   ========================================================= */
function ScrMockFeedback() {
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr no-tab" style={{ paddingTop: 56 }}>

        <div style={{ padding: '0 20px 14px', 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)' }}>Coach feedback</div>
          <div style={{ width: 36 }} />
        </div>

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

          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 8 }}>
            Mock complete · 4:38
          </div>
          <h1 className="scr-h-title" style={{ marginBottom: 18 }}>You're <em>nearly there.</em></h1>

          {/* Overall score */}
          <div className="app-card ink" style={{ marginBottom: 18, padding: 22, display: 'flex', alignItems: 'center', gap: 22 }}>
            <MatchRing value={82} size={108} stroke={11} label="OVERALL" dark />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 4 }}>
                Interview-ready
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 17, lineHeight: 1.2, color: '#fff', marginBottom: 4 }}>
                Strong storytelling, slightly long.
              </div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', lineHeight: 1.45 }}>
                Folk &amp; Form will love the depth — trim 15% to land it.
              </div>
            </div>
          </div>

          {/* Per-question breakdown */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 10 }}>
            Per question
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
            {[
              { q: 'The fintech rebrand',     pct: 88, note: 'Vivid examples. Strong outcome.' },
              { q: 'User research findings',  pct: 78, note: 'Add one specific insight.' },
              { q: 'Handling feedback',       pct: 79, note: 'Show your process, not just empathy.' },
            ].map((x, i) => (
              <div key={i} style={{ background: '#fff', border: '1px solid var(--cocoon-border)', borderRadius: 14, padding: 14, display: 'flex', alignItems: 'center', gap: 14 }}>
                <MatchRing value={x.pct} size={48} stroke={4} label="" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cocoon-ink)' }}>{x.q}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--cocoon-mid)', marginTop: 2, lineHeight: 1.4 }}>{x.note}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Two strongest moments */}
          <div className="app-card" style={{ background: 'var(--cocoon-yellow)', borderColor: 'var(--cocoon-yellow)', marginBottom: 12 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-ink)', marginBottom: 8, opacity: 0.7 }}>
              What landed
            </div>
            <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 16, lineHeight: 1.35, color: 'var(--cocoon-ink)', margin: 0 }}>
              "We went from 12% trial conversion to 31% after the new identity."
            </p>
          </div>

          <div className="app-card" style={{ background: '#fff', marginBottom: 22 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 8 }}>
              Where to tighten
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.45, color: 'var(--cocoon-graphite)', margin: 0 }}>
              On Q1, you set the scene for 22 seconds before the work. Open with the outcome, then back into the journey.
            </p>
          </div>

          <button className="app-btn app-btn-ink app-btn-block">Run another mock</button>
          <div style={{ textAlign: 'center', marginTop: 10, fontSize: 12, color: 'var(--cocoon-mid)' }}>
            Save feedback for later
          </div>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { ScrMockIntro, ScrMockQuestion, ScrMockFeedback });