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

/* =========================================================
   01 · SPLASH — Brand reveal
   ========================================================= */
function ScrSplash() {
  return (
    <Phone bg="var(--cocoon-yellow)">
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 22 }}>
        <div style={{ position: 'relative', width: 152, height: 152 }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center',
          }}>
            <Butterfly size={92} />
          </div>
        </div>
        <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 64, lineHeight: 1, color: 'var(--cocoon-ink)', letterSpacing: '-0.02em' }}>
          Cocoon<span style={{ color: 'var(--cocoon-ink)', opacity: 0.4 }}>.</span>
        </div>
        <div style={{
          position: 'absolute', bottom: 56, left: 0, right: 0, textAlign: 'center',
          fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
          color: 'rgba(31,36,33,0.55)', fontWeight: 600,
        }}>
          Built for becoming
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   02 · WELCOME — Full-bleed photo with brand promise
   ========================================================= */
function ScrWelcome() {
  return (
    <Phone dark={true}>
      <div style={{ position: 'absolute', inset: 0 }}>
        <img src="assets/photos/welcome-hero.jpg" alt=""
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 30%', filter: 'contrast(1.05)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,36,33,0.25) 0%, rgba(31,36,33,0) 35%, rgba(31,36,33,0.85) 100%)' }} />
      </div>

      <div style={{ position: 'absolute', top: 64, left: 24, right: 24 }}>
        <Butterfly size={36} />
      </div>

      <div style={{ position: 'absolute', bottom: 56, left: 24, right: 24, color: '#fff' }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 14 }}>
          Welcome to Cocoon
        </div>
        <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 44, lineHeight: 1.0, letterSpacing: '-0.018em', color: '#fff', marginBottom: 14 }}>
          Stop applying.<br/>Start <em style={{ color: 'var(--cocoon-yellow)' }}>becoming.</em>
        </div>
        <div style={{ fontSize: 15, lineHeight: 1.45, color: 'rgba(255,255,255,0.78)', marginBottom: 26 }}>
          Build a profile that listens. Match to roles that fit. No CVs, no keyword games — just you, in your own words.
        </div>
        <button className="app-btn app-btn-primary app-btn-block">
          Get started
          <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: 18, fontSize: 13, color: 'rgba(255,255,255,0.65)' }}>
          Already on Cocoon? <span style={{ color: 'var(--cocoon-yellow)', fontWeight: 600 }}>Sign in</span>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   03 · PERMISSIONS — Mic + Notifications request
   ========================================================= */
function ScrPermissions() {
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr no-tab" style={{ paddingTop: 80 }}>
        <div className="scr-inner">
          <div style={{ marginBottom: 24 }}>
            <Butterfly size={32} />
          </div>

          <h1 className="scr-h-title" style={{ marginBottom: 8 }}>Two quick<br/>permissions.</h1>
          <p className="scr-h-sub" style={{ marginBottom: 26 }}>
            Cocoon learns by listening. You stay in control — you can turn either off at any time.
          </p>

          <div className="app-card" style={{ marginBottom: 12, display: 'flex', gap: 14, alignItems: 'center' }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, 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" stroke="var(--cocoon-ink)" strokeWidth="1.8"/><path d="M5 12a7 7 0 0014 0M12 19v3" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinecap="round"/></svg>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, fontWeight: 600 }}>Microphone</div>
              <div style={{ fontSize: 12, color: 'var(--cocoon-mid)', marginTop: 2 }}>For voice answers — transcribed on-device first.</div>
            </div>
            <div style={{ width: 42, height: 26, background: 'var(--cocoon-yellow)', borderRadius: 999, position: 'relative' }}>
              <div style={{ position: 'absolute', top: 2, right: 2, width: 22, height: 22, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' }} />
            </div>
          </div>

          <div className="app-card" style={{ marginBottom: 28, display: 'flex', gap: 14, alignItems: 'center' }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9zM10 21a2 2 0 004 0" stroke="var(--cocoon-yellow)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 15, fontWeight: 600 }}>Notifications</div>
              <div style={{ fontSize: 12, color: 'var(--cocoon-mid)', marginTop: 2 }}>So we can tell you when a great match lands.</div>
            </div>
            <div style={{ width: 42, height: 26, background: 'var(--cocoon-yellow)', borderRadius: 999, position: 'relative' }}>
              <div style={{ position: 'absolute', top: 2, right: 2, width: 22, height: 22, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.15)' }} />
            </div>
          </div>

          <button className="app-btn app-btn-ink app-btn-block">Continue</button>
          <div style={{ textAlign: 'center', marginTop: 14, fontSize: 12, color: 'var(--cocoon-mid)' }}>
            Skip for now
          </div>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   04 · VOICE INTRO — Signature recording moment
   ========================================================= */
function ScrVoiceIntro() {
  return (
    <Phone bg="var(--cocoon-ink)" dark={true}>
      <div className="scr no-tab" style={{ paddingTop: 76 }}>
        <div className="scr-inner" style={{ display: 'flex', flexDirection: 'column' }}>

          {/* Progress dots */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 22 }}>
            {[1,2,3,4,5].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={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 10 }}>
            Question 1 of 5
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.018em', color: '#fff', marginBottom: 6 }}>
            Tell us what you've<br/>been <em style={{ color: 'var(--cocoon-yellow)' }}>building lately.</em>
          </div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', marginBottom: 24 }}>
            ~ 60 seconds. Just talk like you would to a friend.
          </div>

          {/* Pulsing butterfly — the visual signature when Cocoon is listening */}
          <div style={{
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.06)',
            borderRadius: 22, padding: '28px 24px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
            marginBottom: 18,
          }}>
            <div style={{ position: 'relative', width: 200, height: 200, display: 'grid', placeItems: 'center' }}>
              <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.08em', textTransform: 'uppercase', fontWeight: 600,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FF3B30', boxShadow: '0 0 0 3px rgba(255,59,48,0.25)' }} />
              Listening · 0:18
            </div>
          </div>

          {/* Stop button — big circular */}
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'auto', marginBottom: 24, position: 'relative' }}>
            <div style={{ position: 'relative', width: 96, height: 96 }}>
              <div className="pulse-ring" />
              <div className="pulse-ring delay" />
              <button style={{
                width: 96, height: 96, borderRadius: '50%',
                background: 'var(--cocoon-yellow)',
                border: 0, cursor: 'pointer',
                display: 'grid', placeItems: 'center',
                boxShadow: '0 12px 30px rgba(252,210,9,0.4)',
              }}>
                <div style={{ width: 24, height: 24, borderRadius: 6, background: 'var(--cocoon-ink)' }} />
              </button>
            </div>
          </div>
          <div style={{ textAlign: 'center', fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>
            Tap to stop · or wait, we'll know
          </div>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   05 · AI EXTRACTION — Live transcript + skills chips appear
   ========================================================= */
function ScrExtraction() {
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr no-tab" style={{ paddingTop: 76 }}>
        <div className="scr-inner">

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center', padding: 5 }}>
              <Butterfly size={18} />
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)' }}>
              Cocoon AI · listening
            </div>
          </div>

          <h1 className="scr-h-title" style={{ marginBottom: 6 }}>Got it.<br/>Here's <em>what we heard.</em></h1>

          {/* Transcript card */}
          <div className="app-card" style={{ marginTop: 22, marginBottom: 18, background: '#fff' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-mid)', marginBottom: 10 }}>
              Transcript · 0:48
            </div>
            <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 17, lineHeight: 1.4, color: 'var(--cocoon-ink)', margin: 0 }}>
              "I've been freelancing in branding for a year, mostly for early-stage tech startups. Recently I rebranded a fintech app — logo, type system, the whole identity. Loved doing the user research side too…"
            </p>
          </div>

          {/* Extracted */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 10 }}>
            Skills we picked up
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 18 }}>
            {['Brand identity', 'Figma', 'Type systems', 'User research', 'Fintech', 'Freelance'].map((s, i) => (
              <span key={s} className={`app-chip ${i < 3 ? 'yellow' : ''}`} style={{ animation: `fade 400ms ease both`, animationDelay: `${i * 80}ms` }}>{s}</span>
            ))}
          </div>

          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 10 }}>
            Likely roles
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
            {[
              { l: 'Brand Designer',     m: '92% strong fit' },
              { l: 'Product Designer',   m: '84% promising'   },
              { l: 'Design Researcher',  m: '76% explore'     },
            ].map((r, i) => (
              <div key={i} style={{ background: '#fff', borderRadius: 12, padding: '12px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', border: '1px solid var(--cocoon-border)' }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--cocoon-ink)' }}>{r.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--cocoon-mid)', marginTop: 2 }}>{r.m}</div>
                </div>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="var(--cocoon-graphite)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            ))}
          </div>

          <button className="app-btn app-btn-ink app-btn-block">Looks right — continue</button>
          <div style={{ textAlign: 'center', marginTop: 12, fontSize: 12, color: 'var(--cocoon-mid)' }}>
            Tap a skill or role to edit
          </div>
        </div>
      </div>

      <style>{`@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }`}</style>
    </Phone>
  );
}

/* =========================================================
   06 · PROFILE PREVIEW — Your auto-built profile
   ========================================================= */
function ScrProfilePreview() {
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr no-tab" style={{ paddingTop: 60 }}>
        <div className="scr-inner">

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <Butterfly size={28} />
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)' }}>
              Your profile · draft
            </div>
          </div>

          {/* Profile card */}
          <div style={{ background: '#fff', borderRadius: 22, padding: 24, marginBottom: 16, border: '1px solid var(--cocoon-border)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
              <Avatar src="sophie" size={64} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, lineHeight: 1, color: 'var(--cocoon-ink)' }}>Sophie Bennett</div>
                <div style={{ fontSize: 12, color: 'var(--cocoon-mid)', marginTop: 4 }}>Brand Designer · London</div>
              </div>
              <span className="app-chip yellow" style={{ fontSize: 10 }}>Open</span>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, paddingTop: 14, borderTop: '1px solid var(--cocoon-border)' }}>
              {[
                { v: '76%', l: 'Complete' },
                { v: '6',   l: 'Skills' },
                { v: '3',   l: 'Stories' },
              ].map((s, i) => (
                <div key={i} style={{ textAlign: 'center', borderRight: i < 2 ? '1px solid var(--cocoon-border)' : 'none' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, color: 'var(--cocoon-ink)' }}>{s.v}</div>
                  <div style={{ fontSize: 10, color: 'var(--cocoon-mid)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600, marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Suggestions to bump score */}
          <div className="app-card ink" style={{ marginBottom: 22 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 10 }}>
              Bump your score
            </div>
            {[
              { l: 'Add 2 project stories',       v: '+9%' },
              { l: 'Verify your Figma skill',     v: '+5%' },
              { l: 'Add work-style preferences',  v: '+4%' },
            ].map((x, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.08)' }}>
                <div style={{ width: 24, height: 24, borderRadius: 7, background: 'var(--cocoon-yellow)', color: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>{i + 1}</div>
                <div style={{ flex: 1, fontSize: 13, color: 'var(--cocoon-cream)' }}>{x.l}</div>
                <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 16, color: 'var(--cocoon-yellow)' }}>{x.v}</span>
              </div>
            ))}
          </div>

          <button className="app-btn app-btn-primary app-btn-block">See today's matches</button>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, {
  ScrSplash, ScrWelcome, ScrPermissions, ScrVoiceIntro, ScrExtraction, ScrProfilePreview,
});