// PULS3 — Specialist Handoff + Insight Detail + Permissions

/* ============================================================
   1) Specialist handoff — HeadCoach brings in Sleep specialist
   ============================================================ */
function SpecialistHandoff() {
  return (
    <ScreenFrame tint="sleep">
      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        display: 'flex', flexDirection: 'column',
        padding: '62px 20px 24px', boxSizing: 'border-box',
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, paddingBottom: 14, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
          <CoachAvatar size={36} listening />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600 }}>PULS3</div>
            <div style={{ fontSize: 12, color: '#8CDDB3', display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#8CDDB3' }} /> Listening
            </div>
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>Today</div>
        </div>

        {/* Conversation */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto' }}>
          <UserBubble>I keep waking at 3am and can't get back down</UserBubble>
          <AssistantBubble>
            That's been happening a lot this week — I see it. Let me pull in the part of me that's been tracking your sleep specifically.
          </AssistantBubble>

          {/* Handoff card — the distinctive moment */}
          <HandoffCard />

          <div style={{
            alignSelf: 'flex-start',
            background: 'rgba(167,139,219,0.10)',
            border: '1px solid rgba(167,139,219,0.28)',
            borderRadius: 24, padding: '12px 16px',
            maxWidth: '86%',
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: -8, left: 16,
              fontSize: 10, color: '#A78BDB', letterSpacing: '0.14em', textTransform: 'uppercase',
              background: '#1A3E3E', padding: '0 8px', borderRadius: 4,
              fontWeight: 600,
            }}>Sleep</div>
            <div style={{ fontSize: 15, lineHeight: 1.5, color: '#fff' }}>
              Hi — I've been watching the 3am pattern. It's showing up mid-hormonal-cycle for you, and that usually points to temperature.
            </div>
          </div>

          <div style={{
            alignSelf: 'flex-start',
            background: 'rgba(167,139,219,0.10)',
            border: '1px solid rgba(167,139,219,0.28)',
            borderRadius: 24, padding: '12px 16px',
            maxWidth: '86%',
          }}>
            <div style={{ fontSize: 15, lineHeight: 1.5 }}>
              Want me to explain what's happening, or jump to what helps tonight?
            </div>
          </div>

          <ChipPanel>
            <Chip>Explain it</Chip>
            <Chip selected>What helps tonight</Chip>
            <Chip>Both</Chip>
          </ChipPanel>
        </div>

        {/* Composer */}
        <div style={{
          marginTop: 12, display: 'flex', alignItems: 'center', gap: 8,
          background: 'rgba(255,255,255,0.08)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 22, padding: '8px 8px 8px 16px',
          backdropFilter: 'blur(16px)',
        }}>
          <div style={{ flex: 1, fontSize: 15, color: 'rgba(255,255,255,0.45)' }}>Type a message…</div>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'linear-gradient(135deg, #00D4FF, #A78BDB)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#031019',
          }}>
            <IcSend size={16} stroke={2} />
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

function HandoffCard() {
  return (
    <div style={{
      alignSelf: 'stretch', marginTop: 4, marginBottom: 4,
      padding: 14, borderRadius: 20,
      background: 'rgba(167,139,219,0.08)',
      border: '1px solid rgba(167,139,219,0.30)',
      display: 'flex', alignItems: 'center', gap: 12,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* animated-feeling dotted bridge */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at center, rgba(167,139,219,0.12), transparent 70%)',
      }} />
      <CoachAvatar size={34} />
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', gap: 6,
        color: 'rgba(255,255,255,0.5)', fontSize: 16,
        position: 'relative', zIndex: 1,
      }}>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(167,139,219,0.6)', boxShadow: '0 0 6px rgba(167,139,219,0.8)' }} />
        <div style={{ flex: 1, borderTop: '1px dashed rgba(167,139,219,0.4)' }} />
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(167,139,219,0.4)' }} />
        <div style={{ flex: 1, borderTop: '1px dashed rgba(167,139,219,0.4)' }} />
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#A78BDB', boxShadow: '0 0 8px rgba(167,139,219,0.9)' }} />
      </div>
      <SpecialistAvatar specialist="sleep" size={34} />
      <div style={{ fontSize: 11, color: '#A78BDB', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600, position: 'relative', zIndex: 1 }}>
        Sleep
      </div>
    </div>
  );
}

/* ============================================================
   2) Insight detail — full story view
   ============================================================ */
function InsightDetail() {
  return (
    <ScreenFrame tint="sleep">
      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        overflowY: 'auto', padding: '62px 20px 40px', boxSizing: 'border-box',
      }}>
        {/* Close */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <Eyebrow color="#A78BDB">Insight · Oct 14</Eyebrow>
          <div style={{
            width: 34, height: 34, borderRadius: '50%',
            background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.12)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'rgba(255,255,255,0.7)',
          }}>
            <IcX size={15} stroke={2}/>
          </div>
        </div>

        {/* Hero */}
        <div style={{
          fontSize: 32, fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 8,
          textWrap: 'balance',
        }}>
          Your body's not broken.
        </div>
        <div style={{
          fontSize: 32, fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.15,
          color: 'rgba(255,255,255,0.55)', marginBottom: 22, textWrap: 'balance',
        }}>
          It's doing exactly what bodies do at 52.
        </div>

        {/* Body paragraphs with pull quote */}
        <div style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', marginBottom: 18 }}>
          Waking at 3am around day 21 of your hormonal cycle is one of the most common signatures of perimenopause. Your progesterone drops before your period, and progesterone is what helps you stay asleep. When it dips, your core temperature rises.
        </div>

        {/* Pull quote */}
        <div style={{
          padding: 18, borderRadius: 20, marginBottom: 18,
          background: 'linear-gradient(135deg, rgba(167,139,219,0.12), rgba(0,212,255,0.06))',
          border: '1px solid rgba(167,139,219,0.25)',
          position: 'relative',
        }}>
          <div style={{ position: 'absolute', top: 10, left: 14, fontSize: 32, color: '#A78BDB', lineHeight: 1, fontFamily: 'Georgia, serif' }}>"</div>
          <div style={{ paddingLeft: 18, fontSize: 16.5, lineHeight: 1.55, color: '#fff', fontStyle: 'italic' }}>
            It's not insomnia. It's thermoregulation.
          </div>
        </div>

        <div style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', marginBottom: 22 }}>
          That's why cooling the room by 3 or 4 degrees helps more than any sleep tip. Your body is trying to lose heat. Give it an easier path.
        </div>

        {/* What helps */}
        <Eyebrow color="rgba(255,255,255,0.45)">Three things that help</Eyebrow>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
          <HelpRow n="1" text="Bedroom to 65–67°F. Fan on if needed." />
          <HelpRow n="2" text="Cotton or bamboo, not synthetics." />
          <HelpRow n="3" text="No alcohol the week before your period." />
        </div>

        {/* CTA */}
        <PrimaryCTA Icon={IcArrow}>Try the cool-down routine</PrimaryCTA>
        <div style={{ height: 10 }} />
        <GhostCTA>Save for later</GhostCTA>

        <div style={{ textAlign: 'center', fontSize: 11.5, color: 'rgba(255,255,255,0.4)', marginTop: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
          <IcShield size={12} /> Based on your sleep + hormonal cycle data. Stays on your phone.
        </div>
      </div>
    </ScreenFrame>
  );
}

function HelpRow({ n, text }) {
  return (
    <div style={{
      display: 'flex', gap: 12, padding: '12px 14px',
      borderRadius: 16, background: 'rgba(255,255,255,0.05)',
      border: '1px solid rgba(255,255,255,0.10)',
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
        background: 'linear-gradient(135deg, rgba(167,139,219,0.3), rgba(0,212,255,0.2))',
        border: '1px solid rgba(167,139,219,0.4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 12, fontWeight: 700, color: '#fff',
      }}>{n}</div>
      <div style={{ fontSize: 14.5, lineHeight: 1.45, color: 'rgba(255,255,255,0.88)', paddingTop: 3 }}>{text}</div>
    </div>
  );
}

/* ============================================================
   3) Health permissions — the trust moment
   ============================================================ */
function PermissionsMoment() {
  return (
    <ScreenFrame tint="trust">
      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        display: 'flex', flexDirection: 'column',
        padding: '72px 22px 32px', boxSizing: 'border-box',
      }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          {/* Shield mark */}
          <div style={{
            width: 72, height: 72, borderRadius: 24,
            background: 'linear-gradient(135deg, rgba(123,168,201,0.25), rgba(167,139,219,0.18))',
            border: '1px solid rgba(123,168,201,0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#7BA8C9', marginBottom: 24,
            boxShadow: '0 0 40px rgba(123,168,201,0.25)',
          }}>
            <IcShield size={34} stroke={1.6}/>
          </div>

          <div style={{ fontSize: 30, fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.015em', marginBottom: 10, textWrap: 'balance' }}>
            Your data stays on your phone.
          </div>
          <div style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)', marginBottom: 24 }}>
            I can read your Health data to coach you. I can't see it, and I can't change it. You can disconnect any time.
          </div>

          {/* Grants */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <GrantRow Icon={IcMoon}  color="#A78BDB" label="Sleep"      detail="Hours, stages, wake events" />
            <GrantRow Icon={IcHeart} color="#00D4FF" label="Heart rate" detail="HRV, resting, recovery" />
            <GrantRow Icon={IcMove}  color="#FAC257" label="Movement"   detail="Steps, workouts, activity" />
            <GrantRow Icon={IcCalendar} color="#D97B87" label="Hormonal cycle" detail="Only if you track it" optional />
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PrimaryCTA Icon={IcArrow}>Allow access</PrimaryCTA>
          <GhostCTA>Maybe later</GhostCTA>
          <div style={{ textAlign: 'center', fontSize: 11.5, color: 'rgba(255,255,255,0.4)', marginTop: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
            <IcLock size={11} stroke={2}/> On-device · never uploaded · audited quarterly
          </div>
        </div>
      </div>
    </ScreenFrame>
  );
}

function GrantRow({ Icon, color, label, detail, optional }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '13px 16px', borderRadius: 18,
      background: 'rgba(255,255,255,0.06)',
      border: '1px solid rgba(255,255,255,0.10)',
      backdropFilter: 'blur(16px)',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10, flexShrink: 0,
        background: `${color}22`, border: `1px solid ${color}40`, color,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon size={17} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
          {label}
          {optional && <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Optional</span>}
        </div>
        <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.6)', marginTop: 1 }}>{detail}</div>
      </div>
      {/* toggle */}
      <div style={{
        width: 42, height: 26, borderRadius: 999,
        background: optional ? 'rgba(255,255,255,0.1)' : 'linear-gradient(135deg, #00D4FF, #A78BDB)',
        position: 'relative', flexShrink: 0,
      }}>
        <div style={{
          position: 'absolute', top: 2, left: optional ? 2 : 18,
          width: 22, height: 22, borderRadius: '50%', background: '#fff',
          boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
        }} />
      </div>
    </div>
  );
}

Object.assign(window, { SpecialistHandoff, InsightDetail, PermissionsMoment });