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

/* =========================================================
   27 · EMPTY MATCHES — First day, profile too thin
   ========================================================= */
function ScrEmptyMatches() {
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr" style={{ paddingTop: 56 }}>

        <div style={{ padding: '0 20px 14px' }}>
          <Butterfly size={28} />
        </div>

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

          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 28, lineHeight: 1, color: 'var(--cocoon-ink)' }}>
            Welcome in<span style={{ color: 'var(--cocoon-yellow)' }}>.</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--cocoon-graphite)', marginTop: 6 }}>
            Tuesday, 21 May
          </div>

          {/* Centerpiece — emerging butterfly */}
          <div style={{
            background: '#fff', border: '1px solid var(--cocoon-border)',
            borderRadius: 22, padding: 32, marginTop: 24,
            display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 18,
          }}>
            <ButterflyProgress value={32} size={120} />

            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 8 }}>
                Just starting out
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, lineHeight: 1.2, color: 'var(--cocoon-ink)', marginBottom: 8 }}>
                Your matches arrive<br/>once your profile<br/><em>takes shape.</em>
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--cocoon-graphite)', maxWidth: 260, margin: '0 auto' }}>
                You're at 32%. A couple more answers and the right roles will start landing here.
              </div>
            </div>
          </div>

          {/* Next steps */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', margin: '24px 0 10px' }}>
            Three quick wins
          </div>

          <div className="app-card" style={{ background: '#fff', padding: 0, overflow: 'hidden' }}>
            {[
              { i: '1', l: 'Record 2 project stories', s: 'Adds +18% to your profile', tone: 'yellow' },
              { i: '2', l: 'Add work preferences',     s: '90 seconds · big match impact' },
              { i: '3', l: 'Verify a key skill',       s: 'Bumps relevant matches +5%' },
            ].map((x, i, arr) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderBottom: i < arr.length - 1 ? '1px solid var(--cocoon-border)' : 'none' }}>
                <div style={{ width: 26, height: 26, borderRadius: 7, background: x.tone === 'yellow' ? 'var(--cocoon-yellow)' : 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 14, color: 'var(--cocoon-ink)', flexShrink: 0 }}>{x.i}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--cocoon-ink)' }}>{x.l}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--cocoon-mid)', marginTop: 2 }}>{x.s}</div>
                </div>
                <svg width="8" height="14" viewBox="0 0 8 14"><path d="M1 1l6 6-6 6" stroke="rgba(60,60,67,0.4)" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>
              </div>
            ))}
          </div>

        </div>

        <TabBar active="home" />
      </div>
    </Phone>
  );
}

/* =========================================================
   28 · EMPTY PROFILE STORIES — Encouraging slot card
   ========================================================= */
function ScrEmptyStories() {
  return (
    <Phone bg="#fff">
      <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)' }}>Stories</div>
          <div style={{ width: 36 }} />
        </div>

        <div className="scr-inner" style={{ paddingTop: 4 }}>
          <h1 className="scr-h-title" style={{ marginBottom: 14 }}>
            Your <em>stories</em> sit here.
          </h1>
          <p className="scr-h-sub" style={{ marginBottom: 22, fontSize: 14 }}>
            A story is a 60-second answer about a project, decision, or moment you're proud of. Add three — that's the magic number.
          </p>

          {/* 3 story slots */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
            {[
              { l: 'A project you led', t: 'Tap to record', empty: true },
              { l: 'A time you solved a problem', t: 'Tap to record', empty: true },
              { l: 'A moment you grew', t: 'Tap to record', empty: true },
            ].map((s, i) => (
              <div key={i} style={{
                background: 'var(--cocoon-paper)',
                border: '1px dashed rgba(31,36,33,0.18)',
                borderRadius: 14, padding: '18px 16px',
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <div style={{
                  width: 46, height: 46, borderRadius: '50%',
                  background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect x="9" y="2" width="6" height="13" rx="3" fill="var(--cocoon-ink)"/><path d="M5 12a7 7 0 0014 0M12 19v3" stroke="var(--cocoon-ink)" strokeWidth="2" strokeLinecap="round"/></svg>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--cocoon-ink)' }}>{s.l}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--cocoon-mid)', marginTop: 2 }}>{s.t}</div>
                </div>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="var(--cocoon-graphite)" strokeWidth="2" strokeLinecap="round"/></svg>
              </div>
            ))}
          </div>

          {/* Coach prompt */}
          <div className="app-card ink" style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center', flexShrink: 0, padding: 5 }}>
              <Butterfly size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 4 }}>
                Coach
              </div>
              <p style={{ fontSize: 13, lineHeight: 1.45, color: '#fff', margin: 0 }}>
                Stuck on what to say? I can ask you a few warm-up questions to find a story — about 90 seconds.
              </p>
              <div style={{ marginTop: 10 }}>
                <span style={{ background: 'var(--cocoon-yellow)', color: 'var(--cocoon-ink)', fontSize: 12, fontWeight: 600, padding: '6px 12px', borderRadius: 999 }}>
                  Talk it through →
                </span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { ScrEmptyMatches, ScrEmptyStories });