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

/* =========================================================
   16 · NOTIFICATIONS — Push centre
   ========================================================= */
function ScrNotifications() {
  return (
    <Phone bg="var(--cocoon-paper)">
      <div className="scr" style={{ paddingTop: 56 }}>

        {/* Header */}
        <div style={{ padding: '0 20px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <Butterfly size={28} />
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cocoon-yellow-hover)' }}>Mark all read</div>
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 32, lineHeight: 1, color: 'var(--cocoon-ink)' }}>
            Updates
          </div>
        </div>

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

          {/* New section */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', margin: '6px 0 10px' }}>
            New · today
          </div>

          {/* Hero notification — interview request */}
          <div style={{
            background: 'var(--cocoon-ink)', borderRadius: 18, padding: 18,
            color: '#fff', marginBottom: 10, position: 'relative', overflow: 'hidden',
          }}>
            <img src="assets/logo-mark.png" alt="" aria-hidden="true"
              style={{ position: 'absolute', right: -30, top: -30, width: 140, height: 140, opacity: 0.10, transform: 'rotate(-12deg)' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12, position: 'relative' }}>
              <CompanyMark size={36} ink={false} mark="letter" letter="F" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--cocoon-yellow)', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Folk &amp; Form</div>
                <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>14:46 · 14 min ago</div>
              </div>
              <span className="app-chip" style={{ background: 'var(--cocoon-yellow)', borderColor: 'var(--cocoon-yellow)', fontSize: 10 }}>Interview</span>
            </div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 19, lineHeight: 1.2, marginBottom: 6 }}>
              You're invited to interview.
            </div>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)', lineHeight: 1.45 }}>
              "We loved the fintech story. Free for a 30-min chat this week?"
            </div>
            <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
              <button className="app-btn app-btn-primary" style={{ flex: 1, padding: '11px 16px', fontSize: 14 }}>Pick a time</button>
              <button style={{
                padding: '11px 18px', borderRadius: 999,
                background: 'rgba(255,255,255,0.08)', color: '#fff', border: 0, cursor: 'pointer',
                fontSize: 13, fontWeight: 600, fontFamily: '-apple-system, system-ui',
              }}>Reply</button>
            </div>
          </div>

          {/* Standard notification */}
          <NotifRow
            tone="yellow"
            badge="N"
            title="Northwind viewed your profile"
            meta="Talent Lead · 1h ago"
            body="They spent 2 mins on your fintech story."
          />

          {/* Match notification */}
          <NotifRow
            tone="ink"
            iconMark={true}
            title="2 new matches today"
            meta="Cocoon · 9:00am"
            body="Both rank 88% or higher. Worth a look."
          />

          {/* Earlier this week */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', margin: '22px 0 10px' }}>
            Earlier this week
          </div>

          <NotifRow
            tone="ink"
            iconMark={true}
            title="Your profile jumped to 76%"
            meta="Coach · Mon 19:08"
            body="Verifying Figma added 5%. One story away from 85%."
          />
          <NotifRow
            tone="ink"
            badge="A"
            title="Atlas & Co shortlisted you"
            meta="Mon 11:32"
            body="They want to know more about your retail UX work."
            muted
          />

        </div>

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

function NotifRow({ tone, badge, iconMark, title, meta, body, muted }) {
  const ink = tone === 'ink';
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--cocoon-border)',
      borderRadius: 14, padding: 14, marginBottom: 8,
      display: 'flex', gap: 12, alignItems: 'flex-start',
      opacity: muted ? 0.6 : 1,
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10,
        background: ink ? 'var(--cocoon-ink)' : 'var(--cocoon-yellow)',
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        {iconMark ? <Butterfly size={20} /> : (
          <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: ink ? 'var(--cocoon-yellow)' : 'var(--cocoon-ink)' }}>{badge}</span>
        )}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--cocoon-ink)', marginBottom: 2 }}>{title}</div>
        <div style={{ fontSize: 11, color: 'var(--cocoon-mid)', marginBottom: 6, letterSpacing: '0.04em' }}>{meta}</div>
        <div style={{ fontSize: 12.5, color: 'var(--cocoon-graphite)', lineHeight: 1.45 }}>{body}</div>
      </div>
      {!muted && <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--cocoon-yellow)', flexShrink: 0, marginTop: 4 }} />}
    </div>
  );
}

/* =========================================================
   17 · INTERVIEW BOOKING — Pick a slot
   ========================================================= */
function ScrInterviewBook() {
  const slots = [
    { day: 'Wed 22 May', times: ['10:00', '11:30', '15:00'] },
    { day: 'Thu 23 May', times: ['09:30', '14:00'] },
    { day: 'Fri 24 May', times: ['10:30', '13:30', '16:00'] },
  ];
  return (
    <Phone bg="#fff">
      <div className="scr no-tab" style={{ paddingTop: 56 }}>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px 16px' }}>
          <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)' }}>Pick a time</div>
          <div style={{ width: 36 }} />
        </div>

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

          {/* Folk & Form intro */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <CompanyMark size={48} ink={true} mark="letter" letter="F" />
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--cocoon-mid)' }}>Folk &amp; Form</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22, lineHeight: 1.1, color: 'var(--cocoon-ink)' }}>Interview · 30 min</div>
            </div>
          </div>

          {/* Meta */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
            <span className="app-chip">📹 Google Meet</span>
            <span className="app-chip">London time</span>
            <span className="app-chip">Friendly chat</span>
          </div>

          {/* With */}
          <div style={{ background: 'var(--cocoon-paper)', borderRadius: 14, padding: 14, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
            <Avatar src="portrait-02" size={42} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cocoon-ink)' }}>James Carter</div>
              <div style={{ fontSize: 11, color: 'var(--cocoon-mid)', marginTop: 2 }}>Creative Director · interviewing you</div>
            </div>
          </div>

          {/* Slot picker */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--cocoon-graphite)', marginBottom: 12 }}>
            Available slots
          </div>

          {slots.map((s, di) => (
            <div key={di} style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--cocoon-graphite)', marginBottom: 8 }}>{s.day}</div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {s.times.map((t, ti) => {
                  const isPicked = di === 0 && ti === 1;
                  return (
                    <div key={ti} style={{
                      padding: '10px 16px', borderRadius: 12,
                      background: isPicked ? 'var(--cocoon-yellow)' : '#fff',
                      border: isPicked ? '1.5px solid var(--cocoon-yellow)' : '1px solid var(--cocoon-border)',
                      fontSize: 14, fontWeight: 600, color: 'var(--cocoon-ink)',
                      fontFamily: '-apple-system, system-ui',
                    }}>
                      {t}
                    </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)',
        }}>
          <button className="app-btn app-btn-ink app-btn-block">
            Confirm Wed 22 May · 11:30
            <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>
          </button>
        </div>
      </div>
    </Phone>
  );
}

/* =========================================================
   18 · INTERVIEW BOOKED — Hero celebration
   ========================================================= */
function ScrInterviewBooked() {
  return (
    <Phone bg="var(--cocoon-ink)" dark>
      <div className="scr no-tab" style={{ paddingTop: 0 }}>

        {/* Top half — yellow band */}
        <div style={{
          height: 360, background: 'var(--cocoon-yellow)',
          position: 'relative', overflow: 'hidden',
          display: 'flex', alignItems: 'flex-end', padding: '70px 24px 32px',
        }}>
          <img src="assets/logo-mark.png" alt="" aria-hidden="true"
            style={{ position: 'absolute', right: -40, top: -30, width: 280, height: 280, opacity: 0.18, transform: 'rotate(-8deg)' }} />
          <div style={{ position: 'relative', color: 'var(--cocoon-ink)' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 12 }}>
              Confirmed · 14:48
            </div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 44, lineHeight: 1, marginBottom: 12 }}>
              You're booked<br/>in.
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.5, opacity: 0.75, maxWidth: 280 }}>
              Folk &amp; Form will see you on Wednesday. Coach has a prep plan ready when you are.
            </div>
          </div>
        </div>

        {/* Bottom — calendar card on ink */}
        <div className="scr-inner" style={{ paddingTop: 22, paddingBottom: 38 }}>

          {/* Interview card */}
          <div style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 18, padding: 18, marginBottom: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <CompanyMark size={42} ink={false} mark="letter" letter="F" />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, color: '#fff' }}>Folk &amp; Form</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)' }}>Brand Designer interview</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto 1fr', gap: '8px 14px', alignItems: 'center', fontSize: 13, color: '#fff' }}>
              <span style={{ color: 'var(--cocoon-yellow)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Date</span>
              <span>Wed 22 May</span>
              <span style={{ color: 'var(--cocoon-yellow)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Time</span>
              <span>11:30 BST</span>
              <span style={{ color: 'var(--cocoon-yellow)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>With</span>
              <span>James C.</span>
              <span style={{ color: 'var(--cocoon-yellow)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Where</span>
              <span>Google Meet</span>
            </div>
          </div>

          {/* Prep CTA */}
          <div style={{
            background: 'rgba(252,210,9,0.08)', border: '1px solid rgba(252,210,9,0.25)',
            borderRadius: 16, padding: 16, display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <Butterfly size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Run a 5-min mock now?</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>Coach has 3 likely questions ready</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>

          {/* Add to calendar */}
          <button className="app-btn app-btn-primary app-btn-block">
            Add to calendar
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M8 3v4M16 3v4M3 11h18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
          </button>
          <div style={{ textAlign: 'center', marginTop: 12, fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
            We'll remind you 30 min before
          </div>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { ScrNotifications, ScrInterviewBook, ScrInterviewBooked });