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

/* =========================================================
   10 · TODAY / HOME — Match feed
   ========================================================= */
function ScrToday() {
  const matches = [
    { co: 'Folk & Form',      role: 'Brand Designer',    loc: 'London · Hybrid',  pct: 96, salary: '£42–48k', new: true,  letter: 'F' },
    { co: 'Northwind Studio', role: 'Product Designer',  loc: 'Remote · UK',      pct: 89, salary: '£45–52k', new: true,  letter: 'N' },
    { co: 'Atlas & Co',       role: 'Junior Designer',   loc: 'London · Office',  pct: 84, salary: '£36–40k', new: false, letter: 'A' },
    { co: 'Loop Labs',        role: 'Brand Strategist',  loc: 'Remote',           pct: 81, salary: '£40–45k', new: false, letter: 'L' },
  ];
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr" style={{ paddingTop: 56 }}>

        {/* Header */}
        <div style={{ padding: '0 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)' }}>
              Tuesday, 21 May
            </div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 30, lineHeight: 1, color: 'var(--cocoon-ink)', marginTop: 4 }}>
              Hey Sophie<span style={{ color: 'var(--cocoon-yellow)' }}>.</span>
            </div>
          </div>
          <Avatar src="sophie" size={42} ring />
        </div>

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

          {/* Daily summary */}
          <div className="app-card ink" style={{ marginBottom: 18, padding: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <Butterfly size={20} />
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)' }}>
                Today's matches · 4
              </div>
            </div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, lineHeight: 1.15, color: '#fff' }}>
              Two new roles match you 90% or higher.
            </div>
          </div>

          {/* Filter chips */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 14, overflowX: 'auto' }}>
            <span className="app-chip ink">All · 4</span>
            <span className="app-chip">Brand</span>
            <span className="app-chip">Product</span>
            <span className="app-chip">Remote</span>
            <span className="app-chip">Hybrid</span>
          </div>

          {/* Match cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {matches.map((m, i) => (
              <div key={i} style={{ background: '#fff', border: '1px solid var(--cocoon-border)', borderRadius: 16, padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
                <CompanyMark size={42} ink={true} mark="letter" letter={m.letter} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--cocoon-ink)' }}>{m.co}</span>
                    {m.new && <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--cocoon-yellow-hover)' }}>NEW</span>}
                  </div>
                  <div style={{ fontSize: 12.5, color: 'var(--cocoon-graphite)' }}>{m.role}</div>
                  <div style={{ fontSize: 11, color: 'var(--cocoon-mid)', marginTop: 2 }}>{m.loc} · {m.salary}</div>
                </div>
                <MatchRing value={m.pct} size={52} stroke={4} label="" />
              </div>
            ))}
          </div>

          <div style={{ textAlign: 'center', marginTop: 16, fontSize: 12, color: 'var(--cocoon-mid)' }}>
            You're all caught up. Next batch tomorrow at 9.
          </div>

        </div>

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

/* =========================================================
   11 · MATCH DETAIL — Why this fits
   ========================================================= */
function ScrMatchDetail() {
  return (
    <Phone bg="#fff">
      <div className="scr no-tab" style={{ paddingTop: 56 }}>

        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px 14px' }}>
          <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={{ display: 'flex', gap: 6 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 14V4a1 1 0 00-1-1H6a1 1 0 00-1 1v10l7-3 7 3z" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinejoin="round"/></svg>
            </div>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(31,36,33,0.06)', display: 'grid', placeItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M14 9l-3 3 3 3M21 12H6m0 0l-3-3m3 3l-3 3" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" transform="rotate(45 12 12)"/></svg>
            </div>
          </div>
        </div>

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

          {/* Company hero */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
            <CompanyMark size={56} ink={true} mark="letter" letter="F" />
            <div>
              <div style={{ fontSize: 12, color: 'var(--cocoon-mid)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Folk & Form</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 26, lineHeight: 1.05, color: 'var(--cocoon-ink)' }}>Brand Designer</div>
            </div>
          </div>

          {/* Meta row */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 22 }}>
            <span className="app-chip">📍 London · Hybrid</span>
            <span className="app-chip">£42–48k</span>
          </div>

          {/* Big match ring */}
          <div style={{
            background: 'var(--cocoon-paper)', borderRadius: 22, padding: 24,
            display: 'flex', alignItems: 'center', gap: 22, marginBottom: 18,
          }}>
            <MatchRing value={96} size={120} stroke={10} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, lineHeight: 1.2, color: 'var(--cocoon-ink)' }}>
                You're a strong fit.
              </div>
              <div style={{ fontSize: 12, color: 'var(--cocoon-graphite)', marginTop: 6, lineHeight: 1.5 }}>
                In the top 4% of profiles for this role this week.
              </div>
            </div>
          </div>

          {/* Breakdown */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 10 }}>
            Why this match
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
            {[
              { l: 'Skills',     pct: 98 },
              { l: 'Experience', pct: 92 },
              { l: 'Values',     pct: 95 },
              { l: 'Stage',      pct: 90 },
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 76, fontSize: 13, color: 'var(--cocoon-graphite)', fontWeight: 500 }}>{m.l}</span>
                <div style={{ flex: 1, height: 6, background: 'var(--cocoon-paper)', borderRadius: 999, overflow: 'hidden' }}>
                  <div style={{ width: `${m.pct}%`, height: '100%', background: 'var(--cocoon-ink)' }} />
                </div>
                <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 15, color: 'var(--cocoon-ink)', width: 28, textAlign: 'right' }}>{m.pct}</span>
              </div>
            ))}
          </div>

          {/* AI insight */}
          <div style={{
            background: 'var(--cocoon-paper)', borderRadius: 16, padding: 16,
            display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 22,
          }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center', flexShrink: 0, padding: 5 }}>
              <Butterfly size={16} />
            </div>
            <div style={{ flex: 1, fontSize: 12.5, lineHeight: 1.5, color: 'var(--cocoon-ink)' }}>
              <strong>From your stories —</strong> the fintech rebrand and your research-heavy approach mirror exactly what Folk & Form are after.
            </div>
          </div>

        </div>

        {/* Sticky CTA */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '14px 20px 30px',
          background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(16px) saturate(180%)',
          WebkitBackdropFilter: 'blur(16px) saturate(180%)',
          borderTop: '1px solid var(--cocoon-border)',
        }}>
          <button className="app-btn app-btn-primary app-btn-block">
            Express interest
            <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>
      </div>
    </Phone>
  );
}

/* =========================================================
   12 · COMPANY PAGE — Folk & Form
   ========================================================= */
function ScrCompany() {
  return (
    <Phone bg="#fff">
      <div className="scr no-tab" style={{ paddingTop: 0 }}>

        {/* Hero image band */}
        <div style={{ position: 'relative', height: 240, overflow: 'hidden' }}>
          <img src="assets/photos/team-working.jpg" alt=""
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,36,33,0.4) 0%, rgba(31,36,33,0.1) 40%, rgba(31,36,33,0) 100%)' }} />
          <div style={{ position: 'absolute', top: 60, left: 20 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', display: 'grid', placeItems: 'center' }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M13 8H3M7 4L3 8l4 4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
          </div>
        </div>

        <div className="scr-inner" style={{ paddingTop: 0, marginTop: -56, position: 'relative' }}>

          {/* Company chip + name */}
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginBottom: 16 }}>
            <div style={{ width: 88, height: 88, borderRadius: 18, background: 'var(--cocoon-ink)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 24px rgba(31,36,33,0.2)' }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 44, color: 'var(--cocoon-yellow)' }}>F</span>
            </div>
            <div style={{ flex: 1, paddingBottom: 8 }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 24, color: 'var(--cocoon-ink)', lineHeight: 1 }}>Folk & Form</div>
              <div style={{ fontSize: 12, color: 'var(--cocoon-graphite)', marginTop: 4 }}>Brand consultancy · 18 people · London</div>
            </div>
          </div>

          <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--cocoon-graphite)', margin: '6px 0 18px' }}>
            We help early-stage tech and fintech founders build brands that scale. Senior team from Pentagram, &Walsh and DesignStudio. Calm, craft-led, generous with feedback.
          </p>

          {/* Stat row */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 22 }}>
            {[
              { v: '2018', l: 'Founded' },
              { v: '4★', l: 'On Glassdoor' },
              { v: '8',   l: 'Open roles' },
            ].map((s, i) => (
              <div key={i} style={{ flex: 1, background: 'var(--cocoon-paper)', borderRadius: 12, padding: '10px 12px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: 'var(--cocoon-ink)', lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontSize: 10, color: 'var(--cocoon-mid)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4, fontWeight: 600 }}>{s.l}</div>
              </div>
            ))}
          </div>

          {/* The role */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 10 }}>
            The role · Brand Designer
          </div>
          <div style={{ background: 'var(--cocoon-paper)', borderRadius: 16, padding: 16, marginBottom: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: 'var(--cocoon-ink)' }}>What you'll do</div>
              <MatchRing value={96} size={48} stroke={4} label="" />
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', fontSize: 13, lineHeight: 1.6, color: 'var(--cocoon-graphite)' }}>
              {[
                'Lead 2–3 brand projects end-to-end',
                'Shape visual identity, type & motion',
                'Work closely with strategy + dev',
                'Mentor a junior on craft',
              ].map((l, i) => (
                <li key={i} style={{ paddingLeft: 18, position: 'relative', marginBottom: 4 }}>
                  <span style={{ position: 'absolute', left: 0, top: 9, width: 6, height: 6, borderRadius: 2, background: 'var(--cocoon-yellow)' }} />
                  {l}
                </li>
              ))}
            </ul>
          </div>

          {/* Team */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 10 }}>
            Who you'd work with
          </div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
            {[
              { p: 'portrait-02', n: 'James, CD' },
              { p: 'portrait-05', n: 'Tom, ECD' },
              { p: 'portrait-01', n: 'Olivia, S' },
            ].map((m, i) => (
              <div key={i} style={{ flex: 1, background: '#fff', border: '1px solid var(--cocoon-border)', borderRadius: 12, padding: 10, textAlign: 'center' }}>
                <Avatar src={m.p} size={48} />
                <div style={{ fontSize: 11, color: 'var(--cocoon-ink)', marginTop: 6 }}>{m.n}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Sticky CTA */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '14px 20px 30px',
          background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(16px) saturate(180%)',
          WebkitBackdropFilter: 'blur(16px) saturate(180%)',
          borderTop: '1px solid var(--cocoon-border)',
          display: 'flex', gap: 10,
        }}>
          <button className="app-btn app-btn-ghost" style={{ padding: '12px 18px' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M19 14V4a1 1 0 00-1-1H6a1 1 0 00-1 1v10l7-3 7 3z" stroke="var(--cocoon-ink)" strokeWidth="1.8" strokeLinejoin="round"/></svg>
          </button>
          <button className="app-btn app-btn-primary" style={{ flex: 1 }}>
            Express interest
            <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>
      </div>
    </Phone>
  );
}

/* =========================================================
   13 · INTEREST SENT — Confirmation
   ========================================================= */
function ScrInterestSent() {
  return (
    <Phone bg="var(--cocoon-yellow)">
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', padding: '120px 24px 50px' }}>

        {/* Butterfly badge */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <div style={{ position: 'relative', width: 140, height: 140 }}>
            <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={84} />
            </div>
          </div>
        </div>

        <div style={{ textAlign: 'center', marginBottom: 'auto' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--cocoon-ink)', opacity: 0.55, marginBottom: 14 }}>
            Sent · 14:32
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 44, lineHeight: 1, color: 'var(--cocoon-ink)', marginBottom: 14 }}>
            You're in<br/>the room.
          </div>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--cocoon-ink)', opacity: 0.7, margin: 0 }}>
            Folk & Form have your profile and your stories. They typically respond in 2–3 days.
          </p>
        </div>

        {/* Next match card */}
        <div style={{ background: 'var(--cocoon-ink)', borderRadius: 18, padding: 16, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: 'var(--cocoon-ink)' }}>N</span>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--cocoon-yellow)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700 }}>Up next · 89%</div>
            <div style={{ fontSize: 14, fontWeight: 600, color: '#fff', marginTop: 2 }}>Northwind · Product Designer</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-yellow)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>

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

Object.assign(window, { ScrToday, ScrMatchDetail, ScrCompany, ScrInterestSent });
