// Phone mockup — live conversation screen, used in the hero.

function MiniAvatar({ id = 'a', name = 'A', size = 36, facilitator = false }) {
  let h = 0;
  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
  const hue = h % 360;
  const sat = 45 + (h % 26);
  const lum = 40 + ((h >>> 8) % 16);
  const bg = facilitator ? 'var(--d-gradient-facilitator)' : `hsl(${hue} ${sat}% ${lum}%)`;
  const initial = (name || 'A').trim().charAt(0).toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: bg, color: 'white',
      fontWeight: 700, fontSize: size * 0.36,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
      boxShadow: facilitator ? '0 1px 4px rgba(99,85,224,0.35)' : 'none',
    }}>
      {facilitator ? <span style={{ fontSize: size * 0.45 }}>★</span> : initial}
    </div>
  );
}

function MiniLabel({ children, color = 'var(--d-fg-muted)', size = 10 }) {
  return <span style={{
    fontFamily: 'var(--d-font-mono)', fontSize: size, fontWeight: 700,
    letterSpacing: 1.2, textTransform: 'uppercase', color,
  }}>{children}</span>;
}

function MiniLiveDot() {
  return <span className="pulse-dot" style={{
    display:'inline-block', width: 7, height: 7, borderRadius:'50%',
    background: 'var(--d-color-live)',
  }}/>;
}

function PhoneStatusBar() {
  return (
    <div className="phone-statusbar">
      <span style={{ fontVariantNumeric: 'tabular-nums' }}>9:41</span>
      <div className="icons">
        <Icon name="cellular" size={16} color="var(--d-fg-heading)"/>
        <Icon name="wifi" size={15} color="var(--d-fg-heading)"/>
        <Icon name="battery" size={26} color="var(--d-fg-heading)"/>
      </div>
    </div>
  );
}

function FacilitatorMini({ topic, transcript }) {
  return (
    <div style={{
      background: 'white', borderRadius: 16, padding: 14,
      border: '1px solid var(--d-border-primary)',
      boxShadow: 'var(--d-shadow-card)',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <MiniAvatar id="ai" facilitator size={32}/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1, lineHeight: 1.1 }}>
          <MiniLabel>AI FACILITATOR</MiniLabel>
          <span style={{ fontSize: 11, color: 'var(--d-fg-muted)' }}>typing…</span>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 3 }}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              width: 4, height: 4, borderRadius: '50%',
              background: 'var(--d-fg-muted)',
              animation: `pulse-dot 1.4s ease-in-out ${i * 0.2}s infinite`,
            }}/>
          ))}
        </div>
      </div>
      <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3, color: 'var(--d-fg-heading)' }}>
        {topic}
      </div>
      <div style={{ fontSize: 11.5, lineHeight: 1.5, color: 'var(--d-fg-secondary)', borderTop: '1px solid var(--d-border)', paddingTop: 9 }}>
        {transcript}
      </div>
    </div>
  );
}

function SpeakerMini({ id, name, speaking, muted }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flexShrink: 0 }}>
      <div style={{ position: 'relative' }}>
        <MiniAvatar id={id} name={name} size={42}/>
        {speaking && (
          <span style={{
            position: 'absolute', inset: -3, borderRadius: '50%',
            border: '2px solid var(--d-color-live)',
            animation: 'pulse-ring 1.2s ease-in-out infinite',
          }}/>
        )}
        {muted && (
          <div style={{
            position: 'absolute', right: -2, bottom: -2,
            width: 16, height: 16, borderRadius: '50%',
            background: 'var(--d-fg-muted)', color: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 9, border: '2px solid white',
          }}>×</div>
        )}
      </div>
      <span style={{ fontSize: 9.5, fontWeight: 600, color: 'var(--d-fg-secondary)' }}>{name}</span>
    </div>
  );
}

function PhoneMockup({ raisedHand = false }) {
  const speakers = [
    { id: 'anitra', name: 'Anitra', speaking: true },
    { id: 'ravi', name: 'Ravi' },
    { id: 'maru', name: 'Maru', muted: true },
    { id: 'kael', name: 'Kael' },
  ];
  const queue = [
    { id: 'noor', name: 'N' },
    { id: 'jen', name: 'J' },
    { id: 'tao', name: 'T' },
  ];

  return (
    <div className="phone">
      <div className="phone-screen">
        <div className="phone-notch"/>
        <PhoneStatusBar/>
        <div className="live-edge"/>

        {/* Nav */}
        <div style={{
          position: 'absolute', top: 50, left: 0, right: 0, height: 40,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          background: 'rgba(244,244,248,0.78)', backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
          borderBottom: '1px solid rgba(0,0,0,0.04)',
          zIndex: 15,
        }}>
          <MiniLiveDot/>
          <MiniLabel color="var(--d-color-live)" size={10.5}>LIVE NOW</MiniLabel>
        </div>

        {/* Body */}
        <div style={{ position: 'absolute', top: 96, left: 16, right: 16, bottom: 110, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <FacilitatorMini
            topic="How AI changes the way we design."
            transcript="Anitra is bringing up an interesting tension between automation and the texture of hand work. Let's unpack that — Ravi, you mentioned a similar idea earlier."
          />

          <div>
            <MiniLabel>SPEAKERS · 4</MiniLabel>
            <div style={{ display: 'flex', gap: 14, marginTop: 8 }}>
              {speakers.map(s => <SpeakerMini key={s.id} {...s}/>)}
            </div>
          </div>
        </div>

        {/* Bottom queue bar */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          background: 'rgba(244,244,248,0.85)',
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          borderTop: '1px solid rgba(0,0,0,0.05)',
          padding: '10px 14px 18px',
          display: 'flex', flexDirection: 'column', gap: 8,
          zIndex: 18,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <MiniLabel size={9.5}>UP NEXT · {queue.length}</MiniLabel>
            <span style={{ marginLeft: 'auto', fontFamily: 'var(--d-font-mono)', fontSize: 9.5, color: 'var(--d-fg-muted)' }}>47 listening</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingRight: 60 }}>
            {queue.map((q, i) => (
              <div key={q.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
                <MiniAvatar id={q.id} name={q.name} size={26}/>
                <span style={{ fontFamily: 'var(--d-font-mono)', fontSize: 8, color: 'var(--d-fg-muted)' }}>{i + 1}</span>
              </div>
            ))}
            <div style={{
              marginLeft: 'auto',
              height: 28, padding: '0 10px', borderRadius: 100,
              background: raisedHand ? 'var(--d-purple)' : 'var(--d-primary-muted)',
              color: raisedHand ? 'white' : 'var(--d-purple)',
              display: 'flex', alignItems: 'center',
              fontSize: 11, fontWeight: 700,
            }}>
              {raisedHand ? '✓ In queue · #4' : '+ Join queue'}
            </div>
          </div>
        </div>

        {/* Floating mic FAB (red because we are speaking) */}
        <div style={{
          position: 'absolute', right: 14, bottom: 22, zIndex: 19,
          width: 54, height: 54, borderRadius: '50%',
          background: 'var(--d-red)', color: 'white',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: 'var(--d-shadow-button-red)',
        }}>
          <Icon name="mic" size={22} color="white"/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneMockup });