/* PeptideKit — CSS iPhone frame component with rich screen content */
const { useState: usePF } = React;

function IPhoneFrame({ children, tilt = 0, glow = 'cyan', width = 300, scale = 1, className = '' }) {
  const w = width;
  const h = w * 2.06;
  const glowColor = glow === 'violet'
    ? 'radial-gradient(50% 45% at 50% 70%, rgba(139,92,246,0.55) 0%, rgba(0,217,255,0.20) 40%, transparent 75%)'
    : 'radial-gradient(50% 45% at 50% 70%, rgba(0,217,255,0.50) 0%, rgba(59,130,246,0.30) 40%, transparent 75%)';
  return (
    <div className={className} style={{
      position: 'relative',
      display: 'inline-block',
      transform: `rotate(${tilt}deg) scale(${scale})`,
      transformOrigin: 'center',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: '-12% -10% -6%',
        background: glowColor,
        filter: 'blur(28px)',
        zIndex: -1,
      }}/>
      <div style={{
        width: w, height: h,
        borderRadius: w * 0.16,
        padding: 8,
        background: 'linear-gradient(180deg, #1a1d35 0%, #0a0c1a 100%)',
        boxShadow:
          '0 30px 60px rgba(0,0,0,0.6),' +
          ' 0 8px 24px rgba(0,0,0,0.5),' +
          ' inset 0 0 0 1px rgba(255,255,255,0.06),' +
          ' inset 0 0 0 2px rgba(0,0,0,0.6)',
        position: 'relative',
      }}>
        {/* notch */}
        <div style={{
          position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 26, borderRadius: 99, background: '#000', zIndex: 5,
        }}/>
        {/* screen */}
        <div style={{
          position: 'relative',
          width: '100%', height: '100%',
          borderRadius: w * 0.13,
          background: '#05060F',
          overflow: 'hidden',
          color: '#fff',
        }}>
          {/* status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 44,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '0 28px 0 24px',
            fontFamily: 'Geist, Inter, sans-serif', fontWeight: 600, fontSize: 13,
            zIndex: 4,
          }}>
            <span>9:12</span>
            <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>
              <SignalBars/><WifiIcon/><BatteryIcon/>
            </span>
          </div>
          <div style={{ paddingTop: 44, height: '100%', boxSizing: 'border-box' }}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}

function SignalBars() {
  return (
    <svg width="16" height="10" viewBox="0 0 16 10" fill="#fff">
      <rect x="0" y="7" width="2" height="3" rx="0.5"/>
      <rect x="4" y="5" width="2" height="5" rx="0.5"/>
      <rect x="8" y="3" width="2" height="7" rx="0.5"/>
      <rect x="12" y="0" width="2" height="10" rx="0.5"/>
    </svg>
  );
}
function WifiIcon() {
  return (
    <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="#fff" strokeWidth="1.4" strokeLinecap="round">
      <path d="M1 4c2-2 4-2.5 6-2.5S11 2 13 4"/>
      <path d="M3 6c1.2-1 2.4-1.5 4-1.5S9.8 5 11 6"/>
      <circle cx="7" cy="8.5" r="0.8" fill="#fff" stroke="none"/>
    </svg>
  );
}
function BatteryIcon() {
  return (
    <svg width="22" height="11" viewBox="0 0 22 11" fill="none">
      <rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke="#fff" strokeOpacity="0.5"/>
      <rect x="2" y="2" width="15" height="7" rx="1.5" fill="#fff"/>
      <rect x="19.5" y="3.5" width="1.5" height="4" rx="0.5" fill="#fff" fillOpacity="0.5"/>
    </svg>
  );
}

/* ---------- TODAY screen ---------- */
function TodayScreen() {
  return (
    <div style={{ padding: '8px 16px 0', fontFamily: 'Inter', display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.55)' }}>WEDNESDAY · APRIL 22</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
        <div style={{ fontFamily: 'Geist', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em' }}>Today</div>
        <div style={{
          fontSize: 11, fontWeight: 600, padding: '5px 10px',
          borderRadius: 99, background: 'rgba(59,130,246,0.20)', color: '#7DD3FC',
          border: '1px solid rgba(59,130,246,0.40)',
        }}>✦ Ask Kit</div>
      </div>

      {/* Next dose card */}
      <div style={{
        marginTop: 14, padding: 14, borderRadius: 14,
        background: 'linear-gradient(180deg, rgba(59,130,246,0.10), rgba(0,217,255,0.04))',
        border: '1px solid rgba(59,130,246,0.20)',
      }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', color: '#7DD3FC' }}>↑ NEXT DOSE</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
          <span style={{ fontFamily: 'Geist', fontSize: 32, fontWeight: 700 }}>1.60</span>
          <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>mg</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>Retatrutide</div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>⏱ next in 2d 13h</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
          <button style={{
            flex: 1, padding: '8px 10px', borderRadius: 10,
            background: '#3B82F6', color: '#fff', fontSize: 12, fontWeight: 600,
          }}>💉 Log dose</button>
          <button style={{ width: 32, height: 32, borderRadius: 10, background: 'rgba(255,255,255,0.06)' }}>🔔</button>
          <button style={{ width: 32, height: 32, borderRadius: 10, background: 'rgba(255,255,255,0.06)' }}>+</button>
        </div>
      </div>

      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.45)', marginTop: 16 }}>TIMELINE</div>
      <TimelineRow time="11:06 AM" title="Retatrutide · 1.60 mg" sub="Abdomen, R" iconColor="#3B82F6"/>
      <TimelineRow time="11:02 AM" title="211.4 lb" sub="Morning · after waking" iconColor="rgba(255,255,255,0.20)"/>

      {/* tab bar */}
      <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-around',
        padding: '12px 0 18px',
        borderTop: '1px solid rgba(255,255,255,0.06)',
      }}>
        <TabIcon label="Home"/>
        <TabIcon label="Stack"/>
        <TabIcon label="Kit" active/>
        <TabIcon label="Insights"/>
      </div>
    </div>
  );
}
function TimelineRow({ time, title, sub, iconColor }) {
  return (
    <div style={{ display: 'flex', gap: 12, marginTop: 10 }}>
      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)', minWidth: 44 }}>{time}</div>
      <div style={{
        width: 18, height: 18, borderRadius: 99, background: iconColor,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 9,
      }}>•</div>
      <div>
        <div style={{ fontSize: 12, fontWeight: 500 }}>{title}</div>
        <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)' }}>{sub}</div>
      </div>
    </div>
  );
}
function TabIcon({ label, active }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
      color: active ? '#fff' : 'rgba(255,255,255,0.45)', fontSize: 9, fontWeight: 500,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 99,
        background: active ? '#3B82F6' : 'transparent',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: active ? '0 0 16px rgba(59,130,246,0.6)' : 'none',
      }}>
        {label === 'Home' && '⌂'}
        {label === 'Stack' && '⚗'}
        {label === 'Kit' && '✦'}
        {label === 'Insights' && '▦'}
      </div>
      <div>{label}</div>
    </div>
  );
}

/* ---------- KIT chat screen ---------- */
function KitScreen() {
  return (
    <div style={{ padding: '8px 14px 0', fontFamily: 'Inter', display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 99,
          background: 'linear-gradient(135deg, #3B82F6, #00D9FF)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14, fontWeight: 700,
        }}>✦</div>
        <div>
          <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600 }}>Kit</div>
          <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)' }}>On-device · your stack</div>
        </div>
        <div style={{ marginLeft: 'auto', width: 24, height: 24, borderRadius: 99, background: 'rgba(255,255,255,0.06)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>+</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12, fontSize: 11, lineHeight: 1.4 }}>
        <KitBubble side="right">When did I last take BPC-157?</KitBubble>
        <KitBubble side="left" agent>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.14em', color: '#7DD3FC', marginBottom: 4 }}>✦ KIT</div>
          Your last BPC-157 dose was <strong>3 days ago</strong> — Saturday at 8:14 PM, 250&nbsp;mcg subcutaneous.
          Based on your 4-week cycle, you have <strong>1 dose remaining</strong> before your scheduled break.
        </KitBubble>
        <KitBubble side="right">What's my weight trend this month?</KitBubble>
        <KitBubble side="left" agent>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.14em', color: '#7DD3FC', marginBottom: 4 }}>✦ KIT</div>
          You're down <strong>4.6 lb</strong> this month (211.4 → 206.8). Your weekly average is trending down 1.1 lb/week.
        </KitBubble>
      </div>

      <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
        <SuggChip>✦ Reconstitution math</SuggChip>
        <SuggChip>📷 BAC water?</SuggChip>
      </div>

      <div style={{
        marginTop: 'auto', marginBottom: 14,
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '8px 12px', borderRadius: 14,
        background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
      }}>
        <span style={{ fontSize: 12, opacity: 0.4 }}>📷</span>
        <span style={{ flex: 1, fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>Ask about your stack…</span>
        <span style={{
          width: 22, height: 22, borderRadius: 99, background: '#3B82F6',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>↑</span>
      </div>
    </div>
  );
}
function KitBubble({ side, agent, children }) {
  const isLeft = side === 'left';
  return (
    <div style={{
      alignSelf: isLeft ? 'flex-start' : 'flex-end',
      maxWidth: '88%',
      padding: '8px 12px',
      borderRadius: 14,
      borderTopLeftRadius: isLeft ? 4 : 14,
      borderTopRightRadius: isLeft ? 14 : 4,
      color: '#fff',
      background: isLeft ? 'rgba(255,255,255,0.06)' : '#3B82F6',
      border: isLeft ? '1px solid rgba(255,255,255,0.08)' : 'none',
    }}>{children}</div>
  );
}
function SuggChip({ children }) {
  return (
    <div style={{
      fontSize: 10, padding: '5px 10px', borderRadius: 99,
      background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.10)',
      color: 'rgba(255,255,255,0.85)',
    }}>{children}</div>
  );
}

/* ---------- COACH (live AI avatar) screen ---------- */
function CoachScreen() {
  return (
    <div style={{ padding: '8px 14px 0', fontFamily: 'Inter', display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 99,
          backgroundImage: 'url(assets/coach-avatar.png)',
          backgroundSize: 'cover',
          backgroundPosition: 'center 28%',
          boxShadow: '0 0 12px rgba(139,92,246,0.50), 0 0 0 1.5px rgba(139,92,246,0.60)',
        }}/>
        <div>
          <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600 }}>Coach</div>
          <div style={{ fontSize: 9, color: '#C4B5FD' }}>● Live · Pro</div>
        </div>
        <div style={{ marginLeft: 'auto', fontSize: 9, fontWeight: 700, padding: '4px 8px',
          borderRadius: 99, background: 'rgba(139,92,246,0.20)', border: '1px solid rgba(139,92,246,0.40)',
          color: '#C4B5FD', letterSpacing: '0.16em' }}>PRO</div>
      </div>

      {/* Avatar video stage */}
      <div style={{
        marginTop: 12, position: 'relative', aspectRatio: '1', borderRadius: 18,
        background: '#000',
        border: '1px solid rgba(139,92,246,0.30)',
        overflow: 'hidden',
        boxShadow: 'inset 0 0 40px rgba(139,92,246,0.20)',
      }}>
        {/* Avatar — live video frame */}
        <img src="assets/coach-avatar.png" alt="Coach AI avatar" style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover',
          objectPosition: 'center 28%',
        }}/>
        {/* Subtle violet glow rim */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(120% 80% at 50% 0%, rgba(139,92,246,0.20) 0%, transparent 55%), radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 55%)',
          pointerEvents: 'none',
        }}/>
        {/* REC dot */}
        <div style={{
          position: 'absolute', top: 10, left: 12,
          fontSize: 9, color: '#fff', fontWeight: 600, letterSpacing: '0.16em',
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '4px 8px', borderRadius: 99,
          background: 'rgba(0,0,0,0.50)', backdropFilter: 'blur(8px)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: '#EF4444', animation: 'pulse 1.4s ease-in-out infinite' }}/>
          LIVE
        </div>
        {/* listening indicator */}
        <div style={{
          position: 'absolute', bottom: 10, left: 12,
          fontSize: 10, color: '#fff', display: 'flex', alignItems: 'center', gap: 6,
          padding: '4px 8px', borderRadius: 99,
          background: 'rgba(0,0,0,0.50)', backdropFilter: 'blur(8px)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: '#00D9FF', animation: 'pulse 1.4s ease-in-out infinite' }}/>
          Listening
        </div>
        {/* waveform */}
        <div style={{
          position: 'absolute', bottom: 10, right: 12,
          display: 'flex', gap: 2, alignItems: 'flex-end', height: 14,
          padding: '4px 8px', borderRadius: 99,
          background: 'rgba(0,0,0,0.50)', backdropFilter: 'blur(8px)',
        }}>
          {[6, 11, 8, 13, 5, 9, 12, 7].map((h, i) => (
            <div key={i} style={{
              width: 2, height: h, background: '#C4B5FD',
              borderRadius: 2, opacity: 0.85,
              animation: `wave 1.2s ease-in-out infinite ${i * 0.1}s`,
            }}/>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 14, fontSize: 11, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)' }}>
        <span style={{ color: '#C4B5FD', fontWeight: 600 }}>Coach: </span>
        "Most retatrutide protocols titrate every 4 weeks. Want me to walk through the side-effect timeline for your current step?"
      </div>

      {/* controls */}
      <div style={{ marginTop: 'auto', marginBottom: 16, display: 'flex', gap: 10, justifyContent: 'center' }}>
        <CoachBtn>🎤</CoachBtn>
        <CoachBtn primary>End</CoachBtn>
        <CoachBtn>💬</CoachBtn>
      </div>

      <style>{`
        @keyframes coachPulse {
          0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
          100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
        }
        @keyframes wave {
          0%, 100% { transform: scaleY(0.5); }
          50% { transform: scaleY(1.2); }
        }
      `}</style>
    </div>
  );
}
function CoachBtn({ children, primary }) {
  return (
    <div style={{
      width: primary ? 64 : 44, height: 44, borderRadius: 99,
      background: primary
        ? 'linear-gradient(135deg, #EF4444, #DC2626)'
        : 'rgba(255,255,255,0.06)',
      border: primary ? 'none' : '1px solid rgba(255,255,255,0.10)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: primary ? 11 : 16, fontWeight: 600, color: '#fff',
    }}>{children}</div>
  );
}

Object.assign(window, { IPhoneFrame, TodayScreen, KitScreen, CoachScreen });