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

/* =========================================================
   14 · COACH CHAT — Conversational AI w/ voice option
   ========================================================= */
function ScrCoachChat() {
  return (
    <Phone bg="#fff">
      <div className="scr" style={{ paddingTop: 56 }}>

        {/* Header */}
        <div style={{ padding: '0 20px 14px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '0.5px solid var(--cocoon-border)' }}>
          <div style={{ position: 'relative', width: 44, height: 44 }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center' }}>
              <Butterfly size={26} />
            </div>
            <span style={{ position: 'absolute', bottom: 0, right: 0, width: 12, height: 12, borderRadius: '50%', background: 'var(--color-success)', border: '2px solid #fff' }} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 17, color: 'var(--cocoon-ink)', lineHeight: 1.1 }}>Cocoon Coach</div>
            <div style={{ fontSize: 11, color: 'var(--color-success)', marginTop: 2, fontWeight: 600 }}>● Online · here to help</div>
          </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"><circle cx="5" cy="12" r="1.5" fill="var(--cocoon-ink)"/><circle cx="12" cy="12" r="1.5" fill="var(--cocoon-ink)"/><circle cx="19" cy="12" r="1.5" fill="var(--cocoon-ink)"/></svg>
          </div>
        </div>

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

          {/* Date stamp */}
          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--cocoon-mid)', marginBottom: 16, fontWeight: 600, letterSpacing: '0.08em' }}>
            TODAY · 14:08
          </div>

          {/* AI msg 1 */}
          <CoachBubble side="ai">
            Nice work on Folk &amp; Form earlier 🎉 They usually reply in 2–3 days.
          </CoachBubble>

          <CoachBubble side="ai">
            Want to prep for the interview while you wait? I can run a quick mock with their style.
          </CoachBubble>

          {/* User msg */}
          <CoachBubble side="me">
            Yes please — what would they ask?
          </CoachBubble>

          {/* AI structured reply */}
          <CoachBubble side="ai">
            Folk &amp; Form usually open with:
            <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                'Walk me through the fintech rebrand',
                'What did the research uncover?',
                'How do you handle feedback from non-designers?',
              ].map((q, i) => (
                <div key={i} style={{
                  background: 'rgba(31,36,33,0.04)', borderRadius: 10,
                  padding: '8px 12px', fontSize: 13, display: 'flex', alignItems: 'center', gap: 8,
                }}>
                  <span style={{ width: 18, height: 18, borderRadius: 5, background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 700 }}>{i+1}</span>
                  <span style={{ flex: 1 }}>{q}</span>
                </div>
              ))}
            </div>
          </CoachBubble>

          {/* Quick reply chips */}
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
            <span className="app-chip" style={{ background: '#fff', borderColor: 'var(--cocoon-ink)' }}>Start the mock</span>
            <span className="app-chip" style={{ background: '#fff' }}>Just give me tips</span>
            <span className="app-chip" style={{ background: '#fff' }}>Maybe later</span>
          </div>

        </div>

        {/* Composer (sticky bottom) */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '12px 16px 30px',
          background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(16px) saturate(180%)',
          WebkitBackdropFilter: 'blur(16px) saturate(180%)',
          borderTop: '0.5px solid var(--cocoon-border)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            flex: 1, background: 'rgba(31,36,33,0.06)', borderRadius: 999,
            padding: '11px 16px', fontSize: 14, color: 'var(--cocoon-mid)',
          }}>
            Message Coach…
          </div>
          <button style={{
            width: 44, height: 44, borderRadius: '50%',
            background: 'var(--cocoon-yellow)', border: 0, cursor: 'pointer',
            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.2" strokeLinecap="round"/></svg>
          </button>
        </div>
      </div>
    </Phone>
  );
}

function CoachBubble({ side, children }) {
  const isMe = side === 'me';
  return (
    <div style={{
      display: 'flex',
      flexDirection: isMe ? 'row-reverse' : 'row',
      gap: 8,
      marginBottom: 10,
      alignItems: 'flex-end',
    }}>
      {!isMe && (
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--cocoon-yellow)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Butterfly size={16} />
        </div>
      )}
      <div style={{
        maxWidth: '76%',
        background: isMe ? 'var(--cocoon-ink)' : 'rgba(31,36,33,0.05)',
        color: isMe ? '#fff' : 'var(--cocoon-ink)',
        borderRadius: 18,
        borderBottomRightRadius: isMe ? 6 : 18,
        borderBottomLeftRadius: !isMe ? 6 : 18,
        padding: '10px 14px',
        fontSize: 14, lineHeight: 1.45,
      }}>
        {children}
      </div>
    </div>
  );
}

/* =========================================================
   15 · COACH VOICE MODE — Full-screen waveform listening
   ========================================================= */
function ScrCoachVoice() {
  return (
    <Phone bg="var(--cocoon-ink)" dark={true}>
      <div className="scr no-tab" style={{ paddingTop: 0 }}>

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

        <div style={{ position: 'absolute', inset: 0, padding: '70px 24px 50px', display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: 1 }}>

          {/* Top dismiss */}
          <div style={{ alignSelf: 'flex-end' }}>
            <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>

          {/* Coach mark — free-standing butterfly that pulses & breathes */}
          <div style={{ marginTop: 28, marginBottom: 28, position: 'relative', width: 260, height: 260, display: 'grid', placeItems: 'center' }}>
            <div className="pulse-ring" style={{ inset: 8 }} />
            <div className="pulse-ring delay" style={{ inset: 40 }} />
            <img src="assets/logo-mark.png" alt="" aria-hidden="true"
              style={{
                width: 220, height: 220, objectFit: 'contain',
                animation: 'butterflyBreathe 1.4s var(--ease-in-out) infinite',
                filter: 'drop-shadow(0 18px 40px rgba(252,210,9,0.55))',
                position: 'relative', zIndex: 2,
              }} />
          </div>

          {/* Status */}
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--cocoon-yellow)', marginBottom: 8 }}>
            ● Coach is listening
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 24, lineHeight: 1.1, color: '#fff', textAlign: 'center', maxWidth: 280, marginBottom: 24 }}>
            "Tell me about the fintech rebrand."
          </div>

          {/* Live transcript caption */}
          <div style={{
            background: 'rgba(255,255,255,0.05)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 16, padding: '14px 18px',
            fontSize: 13, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)',
            textAlign: 'center', maxWidth: 320, marginBottom: 'auto',
          }}>
            "So the client was a B2B fintech, and they had this really…"
            <span style={{ color: 'var(--cocoon-yellow)' }}>|</span>
          </div>

          {/* Waveform + controls */}
          <div style={{ width: '100%', marginBottom: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 14px' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'grid', placeItems: 'center' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M9 4v16M19 4v16M5 4l4 8-4 8M23 4l-4 8 4 8" stroke="rgba(255,255,255,0.8)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <button style={{
                width: 78, height: 78, 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: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'grid', placeItems: 'center' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 20l16-16M14 4h6v6" stroke="rgba(255,255,255,0.8)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          </div>

          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>Switch to text</div>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { ScrCoachChat, ScrCoachVoice });