/* eslint-disable */
/* Phone shell + 5 in-app screens for App Store hero compositions.
   Built with Skincoach design tokens. All screens are ~720×1480 px raw;
   the parent frame scales them as needed. */

const SC = {
  bg: '#F2FAFA',
  surface: '#FFFFFF',
  elevated: '#EEF8F8',
  textPrimary: '#173039',
  textSecondary: '#45616E',
  textTertiary: '#99B3BF',
  primary: '#0894B3',
  primaryDeep: '#066A85',
  secondaryAction: '#D9F0F5',
  secondaryActionLabel: '#1F7A8C',
  hairline: '#D4E6E8',
  hairlineStrong: '#C8D6DA',
  success: '#0E7E58',
  successSoft: '#DDF1E8',
  warning: '#B8740E',
  weekly: '#F5A623',
  weeklyDeep: '#5E3A02',
  weeklySoft: '#FFE9C2',
};

const PHONE_W = 720;
const PHONE_H = 1480;

function StatusBar({ dark = false }) {
  const color = dark ? '#fff' : SC.textPrimary;
  return (
    <div style={{
      position: 'relative', height: 60, paddingTop: 28,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '28px 56px 0', fontFamily: 'Nunito, sans-serif',
      fontSize: 24, fontWeight: 800, color, zIndex: 5,
    }}>
      <span style={{ letterSpacing: '-0.02em' }}>9:41</span>
      <div style={{
        position: 'absolute', left: '50%', top: 22,
        transform: 'translateX(-50%)',
        width: 200, height: 36, borderRadius: 20, background: '#0B1418',
      }} />
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        {/* signal */}
        <svg width="26" height="14" viewBox="0 0 26 14" fill={color}>
          <rect x="0" y="9" width="4" height="5" rx="1"/>
          <rect x="7" y="6" width="4" height="8" rx="1"/>
          <rect x="14" y="3" width="4" height="11" rx="1"/>
          <rect x="21" y="0" width="4" height="14" rx="1"/>
        </svg>
        {/* wifi */}
        <svg width="22" height="14" viewBox="0 0 22 14" fill={color}>
          <path d="M11 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0-6c2.2 0 4.2.9 5.7 2.3l1.4-1.4A10 10 0 0 0 11 6a10 10 0 0 0-7.1 2.9L5.3 10.3A8 8 0 0 1 11 8Zm0-6a14 14 0 0 0-9.9 4.1l1.4 1.4A12 12 0 0 1 11 4c3.3 0 6.3 1.3 8.5 3.5l1.4-1.4A14 14 0 0 0 11 2Z"/>
        </svg>
        {/* battery */}
        <svg width="34" height="16" viewBox="0 0 34 16">
          <rect x="0.5" y="0.5" width="29" height="15" rx="4" fill="none" stroke={color} opacity="0.4"/>
          <rect x="2" y="2" width="22" height="12" rx="2.5" fill={color}/>
          <rect x="31" y="5" width="2" height="6" rx="1" fill={color} opacity="0.4"/>
        </svg>
      </div>
    </div>
  );
}

/* ---------------------------------- WELCOME ---------------------------------- */
function ScreenWelcome() {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '90px 56px 56px',
      background: SC.bg, fontFamily: 'Nunito, sans-serif', color: SC.textPrimary,
    }}>
      <div style={{
        width: 168, height: 168, borderRadius: 40,
        background: 'linear-gradient(160deg,#A6E2EE 0%,#0894B3 90%)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 24px 60px -22px rgba(8,148,179,0.55)',
        marginTop: 80,
      }}>
        {/* Face glyph */}
        <svg width="92" height="92" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 2a7 7 0 0 0-7 7v5a2 2 0 0 0 2 2"/>
          <path d="M12 2a7 7 0 0 1 7 7v5a2 2 0 0 1-2 2"/>
          <path d="M9 11h.01M15 11h.01"/>
          <path d="M9.5 15a3 3 0 0 0 5 0"/>
          <path d="M7 19c.6 1.2 2.6 2 5 2s4.4-.8 5-2"/>
        </svg>
      </div>

      <div style={{ marginTop: 48, fontSize: 56, fontWeight: 800, letterSpacing: '-0.025em' }}>Skincoach</div>
      <div style={{ marginTop: 16, fontSize: 26, color: SC.textSecondary, textAlign: 'center', lineHeight: 1.35, fontWeight: 500, maxWidth: 520 }}>
        Your personal skin program.<br/>Built around your scan.
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 18 }}>
        <button style={{
          height: 96, borderRadius: 28, background: '#000', color: '#fff', border: 'none',
          fontFamily: 'Nunito', fontSize: 28, fontWeight: 700, display: 'flex',
          alignItems: 'center', justifyContent: 'center', gap: 12, cursor: 'pointer',
        }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M17.6 12.2c0-2.5 2.1-3.7 2.2-3.8a4.8 4.8 0 0 0-3.7-2c-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9a5 5 0 0 0-4.2 2.6c-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 2 2.6 3.4 2.6 1.3 0 1.8-.9 3.5-.9 1.6 0 2.1.9 3.5.8 1.4 0 2.4-1.2 3.3-2.5a11 11 0 0 0 1.5-3c-3.6-1.4-2.7-5.9-1.7-4Zm-2.6-7c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.5-.6.7-1.2 1.9-1 3 1.2.1 2.3-.6 3-1.3Z"/></svg>
          Sign in with Apple
        </button>
        <div style={{ textAlign: 'center', fontSize: 20, color: SC.textTertiary, fontWeight: 600 }}>
          Continue with limited access
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------- HERO / SKIN PROFILE RESULT ----------------------------------
   The first screenshot — the *payoff* screen, not the welcome. Shows the scan result + skin
   profile + the personalized plan that's about to start. This is what users came for. */
function ScreenHero({ portraitUrl }) {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      padding: '24px 44px 40px', background: SC.bg,
      fontFamily: 'Nunito, sans-serif', color: SC.textPrimary,
    }}>
      <div style={{ fontSize: 22, fontWeight: 800, color: SC.primary, letterSpacing: '0.1em', marginTop: 14 }}>YOUR SKIN PROFILE</div>
      <div style={{ fontSize: 48, fontWeight: 800, marginTop: 4, letterSpacing: '-0.02em', lineHeight: 1.05 }}>Combination, mild dehydration</div>

      {/* Score + portrait */}
      <div style={{
        marginTop: 26, padding: 24, borderRadius: 36, background: SC.surface,
        border: `1px solid ${SC.hairline}`, boxShadow: '0 10px 28px rgba(23,48,57,0.06)',
        display: 'flex', alignItems: 'center', gap: 22,
      }}>
        {/* portrait disc */}
        <div style={{
          width: 168, height: 168, borderRadius: 84, overflow: 'hidden',
          background: SC.elevated, position: 'relative', flexShrink: 0,
          boxShadow: `0 0 0 4px ${SC.surface}, 0 0 0 6px ${SC.primary}33`,
        }}>
          {portraitUrl && <img src={portraitUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 28%' }}/>}
          <div style={{
            position: 'absolute', bottom: -2, right: -2,
            width: 50, height: 50, borderRadius: 25, background: SC.success,
            border: `4px solid ${SC.surface}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          </div>
        </div>

        {/* score */}
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 800, color: SC.textTertiary, letterSpacing: '0.08em' }}>SKIN SCORE</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
            <div style={{ fontSize: 88, fontWeight: 900, letterSpacing: '-0.04em', color: SC.primary, lineHeight: 1 }}>72</div>
            <div style={{ fontSize: 28, fontWeight: 700, color: SC.textTertiary }}>/100</div>
          </div>
          <div style={{ marginTop: 8, fontSize: 20, color: SC.textSecondary, fontWeight: 600, lineHeight: 1.3 }}>Good baseline. Three focus areas to work on this month.</div>
        </div>
      </div>

      {/* Metrics grid */}
      <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <MetricCard label="Hydration"  value="58%" tone="warn"  trend="−" sub="Below target"/>
        <MetricCard label="Texture"    value="74%" tone="ok"    trend="·" sub="Looking even"/>
        <MetricCard label="Redness"    value="Mild" tone="warn" trend="·" sub="T-zone & cheeks"/>
        <MetricCard label="Oil control" value="Balanced" tone="ok" trend="·" sub="No congestion"/>
      </div>

      {/* Focus chips */}
      <div style={{ marginTop: 20 }}>
        <div style={{ fontSize: 18, fontWeight: 800, color: SC.textTertiary, letterSpacing: '0.08em' }}>FOCUS AREAS</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 12 }}>
          {['Hydration', 'Barrier repair', 'Even tone'].map(c => (
            <span key={c} style={{
              padding: '12px 20px', borderRadius: 999, background: SC.secondaryAction,
              color: SC.primary, fontSize: 22, fontWeight: 700,
              border: `1.5px solid ${SC.primary}33`,
            }}>{c}</span>
          ))}
        </div>
      </div>

      <div style={{ flex: 1 }}/>

      {/* Plan ready banner */}
      <div style={{
        marginTop: 18, borderRadius: 32, padding: '22px 24px',
        background: 'linear-gradient(120deg,#0894B3 0%,#066A85 100%)', color: '#fff',
        display: 'flex', alignItems: 'center', gap: 18,
        boxShadow: '0 18px 40px -16px rgba(8,148,179,0.55)',
      }}>
        <div style={{
          width: 64, height: 64, borderRadius: 32, background: 'rgba(255,255,255,0.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="4" width="18" height="18" rx="3"/><path d="M16 2v4M8 2v4M3 10h18"/><path d="M8 14l2.5 2.5L16 11"/>
          </svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 26, fontWeight: 800 }}>Your 28-day plan is ready</div>
          <div style={{ fontSize: 18, opacity: 0.85, marginTop: 2, fontWeight: 500 }}>Personalized to your scan · starts tomorrow at 7:00 AM</div>
        </div>
        <span style={{ fontSize: 30, fontWeight: 800 }}>›</span>
      </div>
    </div>
  );
}

function MetricCard({ label, value, sub, tone = 'ok', trend = '·' }) {
  const toneColor = tone === 'ok' ? SC.success : tone === 'warn' ? SC.warning : SC.textSecondary;
  const toneBg    = tone === 'ok' ? SC.successSoft : tone === 'warn' ? '#FCE3D2' : SC.elevated;
  return (
    <div style={{
      padding: '18px 20px', borderRadius: 24, background: SC.surface,
      border: `1px solid ${SC.hairline}`,
      boxShadow: '0 4px 12px rgba(23,48,57,0.04)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 16, fontWeight: 800, color: SC.textTertiary, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{label}</div>
        <span style={{
          minWidth: 28, height: 28, padding: '0 8px', borderRadius: 14, background: toneBg, color: toneColor,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, fontWeight: 800,
        }}>{trend}</span>
      </div>
      <div style={{ fontSize: 36, fontWeight: 900, marginTop: 6, letterSpacing: '-0.02em', color: SC.textPrimary }}>{value}</div>
      <div style={{ fontSize: 16, fontWeight: 600, color: SC.textSecondary, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

/* ---------------------------------- SCAN ---------------------------------- */
function ScreenScan({ portraitUrl }) {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      padding: '40px 48px 48px',
      background: SC.bg, fontFamily: 'Nunito, sans-serif', color: SC.textPrimary,
    }}>
      <div style={{ fontSize: 32, fontWeight: 800, marginTop: 12 }}>Scan</div>
      <div style={{ fontSize: 22, color: SC.textSecondary, marginTop: 6, fontWeight: 500, lineHeight: 1.4 }}>
        A 30-second selfie helps Skincoach fine-tune every step of your routine.
      </div>

      {/* camera viewfinder */}
      <div style={{
        flex: 1, marginTop: 28, borderRadius: 48,
        background: '#0B1418', position: 'relative', overflow: 'hidden',
      }}>
        {portraitUrl && (
          <img src={portraitUrl} alt="" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'top center', opacity: 0.92,
          }}/>
        )}
        {/* Top scrim with status hint */}
        <div style={{
          position: 'absolute', top: 28, left: 28, right: 28,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          color: '#fff',
        }}>
          <span style={{
            padding: '8px 16px', borderRadius: 999, background: 'rgba(11,20,24,0.55)',
            backdropFilter: 'blur(8px)', fontSize: 18, fontWeight: 700,
          }}>● REC · 00:08</span>
          <span style={{
            padding: '8px 16px', borderRadius: 999, background: 'rgba(11,20,24,0.55)',
            backdropFilter: 'blur(8px)', fontSize: 18, fontWeight: 700,
          }}>Front · HDR</span>
        </div>

        {/* face guide oval */}
        <svg viewBox="0 0 400 540" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <defs>
            <mask id="cutout">
              <rect width="400" height="540" fill="#fff"/>
              <ellipse cx="200" cy="260" rx="135" ry="180" fill="#000"/>
            </mask>
          </defs>
          <rect width="400" height="540" fill="rgba(11,20,24,0.45)" mask="url(#cutout)"/>
          <ellipse cx="200" cy="260" rx="135" ry="180" fill="none" stroke="#26B8D6" strokeWidth="2.5" strokeDasharray="6 6"/>
          {/* corner brackets */}
          <g stroke="#26B8D6" strokeWidth="3" fill="none" strokeLinecap="round">
            <path d="M60 110 L60 90 L80 90"/>
            <path d="M340 110 L340 90 L320 90"/>
            <path d="M60 430 L60 450 L80 450"/>
            <path d="M340 430 L340 450 L320 450"/>
          </g>
        </svg>

        {/* analyzing chip */}
        <div style={{
          position: 'absolute', left: '50%', bottom: 36, transform: 'translateX(-50%)',
          background: 'rgba(255,255,255,0.94)', padding: '14px 22px', borderRadius: 999,
          display: 'flex', alignItems: 'center', gap: 12,
          fontSize: 20, fontWeight: 700, color: SC.textPrimary,
          boxShadow: '0 12px 30px rgba(0,0,0,0.3)',
        }}>
          <span style={{
            width: 14, height: 14, borderRadius: 7,
            background: SC.primary,
            boxShadow: `0 0 0 6px ${SC.primary}33`,
            animation: 'pulse 1.2s ease-out infinite',
          }}/>
          Analyzing your skin…
        </div>
      </div>

      {/* CTA */}
      <button style={{
        marginTop: 28, height: 96, borderRadius: 28,
        background: SC.primary, color: '#fff', border: 'none',
        fontFamily: 'Nunito', fontSize: 28, fontWeight: 800, cursor: 'pointer',
        boxShadow: '0 14px 40px -10px rgba(8,148,179,0.5)',
      }}>Take a face scan</button>
    </div>
  );
}

/* ---------------------------------- ROUTINE ---------------------------------- */
function ScreenRoutine() {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      padding: '40px 48px 48px', background: SC.bg,
      fontFamily: 'Nunito, sans-serif', color: SC.textPrimary,
    }}>
      <div style={{ fontSize: 22, fontWeight: 800, color: SC.primary, letterSpacing: '0.08em' }}>DAY 7 · PHASE 1</div>
      <div style={{ fontSize: 44, fontWeight: 800, marginTop: 4, letterSpacing: '-0.02em' }}>Today's plan</div>
      <div style={{ fontSize: 20, color: SC.textSecondary, marginTop: 6, fontWeight: 500 }}>Foundations · 11 min total</div>

      {/* day strip */}
      <div style={{ display: 'flex', gap: 12, marginTop: 28, overflow: 'hidden' }}>
        {Array.from({length: 8}, (_, i) => {
          const day = i + 1;
          const done = day < 7;
          const today = day === 7;
          return (
            <div key={day} style={{
              flexShrink: 0, width: 70, height: 88, borderRadius: 22,
              border: `2.5px solid ${today ? SC.primary : done ? SC.success : SC.hairlineStrong}`,
              background: today ? SC.secondaryAction : done ? SC.successSoft : SC.surface,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, fontWeight: 800,
              color: today ? SC.primary : done ? SC.success : SC.textTertiary,
              position: 'relative',
            }}>
              {done ? '✓' : `D${day}`}
              {day === 7 && (
                <span style={{
                  position: 'absolute', top: -8, right: -8, width: 22, height: 22,
                  borderRadius: 11, background: SC.weekly, border: `3px solid ${SC.bg}`,
                }}/>
              )}
            </div>
          );
        })}
      </div>

      {/* AM/PM/Weekly cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 32 }}>
        {/* Morning DONE */}
        <div style={{
          padding: 28, borderRadius: 32, background: SC.surface,
          border: `1px solid ${SC.hairline}`, display: 'flex', alignItems: 'center', gap: 22,
          boxShadow: '0 8px 24px rgba(23,48,57,0.06)',
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: 32, background: SC.successSoft,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke={SC.success} strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 28, fontWeight: 800 }}>Morning</div>
            <div style={{ fontSize: 20, fontWeight: 700, color: SC.success, marginTop: 4 }}>Done · 6:48 AM</div>
          </div>
        </div>

        {/* Evening ACTIVE */}
        <div style={{
          padding: 28, borderRadius: 32, background: SC.surface,
          border: `2px solid ${SC.primary}`, display: 'flex', alignItems: 'center', gap: 22,
          boxShadow: '0 12px 32px -12px rgba(8,148,179,0.35)',
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: 32, background: SC.secondaryAction,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: SC.primary, fontSize: 22, fontWeight: 800,
          }}>
            2/4
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 28, fontWeight: 800 }}>Evening</div>
            <div style={{ fontSize: 20, color: SC.textSecondary, marginTop: 4 }}>Cleanser · Vit C done · Retinol next</div>
          </div>
          <span style={{ color: SC.primary, fontWeight: 800, fontSize: 22 }}>›</span>
        </div>

        {/* Weekly */}
        <div style={{
          padding: 28, borderRadius: 32, background: SC.surface,
          border: `1px solid ${SC.hairline}`, display: 'flex', alignItems: 'center', gap: 22,
          boxShadow: '0 8px 24px rgba(23,48,57,0.06)',
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: 32, background: SC.weeklySoft,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#7A4A05', fontSize: 30,
          }}>★</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 28, fontWeight: 800 }}>Weekly check-in</div>
            <div style={{ fontSize: 20, color: SC.textSecondary, marginTop: 4 }}>5 quick questions</div>
          </div>
          <span style={{
            background: SC.weekly, color: SC.weeklyDeep, padding: '6px 14px',
            borderRadius: 10, fontSize: 18, fontWeight: 800, letterSpacing: '0.06em',
          }}>NEW</span>
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------- CHAT ---------------------------------- */
function ScreenChat() {
  const bubble = (text, role, opts = {}) => (
    <div style={{
      maxWidth: '78%',
      alignSelf: role === 'user' ? 'flex-end' : 'flex-start',
      background: role === 'user' ? SC.primary : SC.surface,
      color: role === 'user' ? '#fff' : SC.textPrimary,
      border: role === 'user' ? 'none' : `1px solid ${SC.hairline}`,
      borderRadius: 32,
      borderBottomLeftRadius: role === 'user' ? 32 : 10,
      borderBottomRightRadius: role === 'user' ? 10 : 32,
      padding: '20px 26px',
      fontSize: 24, lineHeight: 1.45, fontWeight: 500,
      boxShadow: role === 'user' ? 'none' : '0 4px 12px rgba(23,48,57,0.04)',
      ...opts,
    }}>{text}</div>
  );

  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      background: SC.bg, fontFamily: 'Nunito, sans-serif', color: SC.textPrimary,
    }}>
      {/* nav */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14, padding: '24px 48px 18px',
        borderBottom: `1px solid ${SC.hairline}`,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 28,
          background: 'linear-gradient(160deg,#A6E2EE,#0894B3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 22, fontWeight: 800,
        }}>S</div>
        <div>
          <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.01em' }}>Skincoach</div>
          <div style={{ fontSize: 18, color: SC.success, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 5, background: SC.success }}/>
            Online · usually replies instantly
          </div>
        </div>
      </div>

      {/* bubbles */}
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column', gap: 16,
        padding: '32px 36px', overflow: 'hidden',
      }}>
        {bubble("Hi, I'm Skincoach. Tell me what's on your mind today.", 'bot')}
        {bubble("Can I use vitamin C and retinol together?", 'user')}
        {bubble("Stagger them. Vitamin C in the morning under SPF; retinol in the evening, twice a week to start.", 'bot')}
        {bubble("My skin feels tight after cleansing — is that bad?", 'user')}
        {bubble("That's a sign your cleanser is too stripping. Try the gentle cleanser in your Day 7 plan and re-check tomorrow.", 'bot')}
      </div>

      {/* input */}
      <div style={{ padding: '20px 36px 32px', borderTop: `1px solid ${SC.hairline}` }}>
        <div style={{
          background: SC.elevated, borderRadius: 36, padding: '20px 28px',
          display: 'flex', alignItems: 'center', gap: 14,
          fontSize: 22, color: SC.textTertiary, fontWeight: 500,
        }}>
          Ask Skincoach…
          <div style={{ flex: 1 }}/>
          <div style={{
            width: 52, height: 52, borderRadius: 26, background: SC.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <line x1="12" y1="19" x2="12" y2="5"/>
              <polyline points="5 12 12 5 19 12"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------- PROGRESS ---------------------------------- */
function ScreenProgress({ portraitUrl }) {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      padding: '40px 48px 48px', background: SC.bg,
      fontFamily: 'Nunito, sans-serif', color: SC.textPrimary,
    }}>
      <div style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.02em' }}>Progress</div>
      <div style={{ fontSize: 22, color: SC.textSecondary, marginTop: 4, fontWeight: 500 }}>May 2026 · day 14 of 28</div>

      {/* before/after card */}
      <div style={{
        marginTop: 24, borderRadius: 32, background: SC.surface,
        border: `1px solid ${SC.hairline}`, padding: 22,
        boxShadow: '0 8px 24px rgba(23,48,57,0.06)',
      }}>
        <div style={{ display: 'flex', gap: 14 }}>
          <div style={{ flex: 1, borderRadius: 22, overflow: 'hidden', aspectRatio: '3/4', background: SC.elevated, position: 'relative' }}>
            {portraitUrl && <img src={portraitUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.92) contrast(0.94)' }}/>}
            <div style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(11,20,24,0.7)', color: '#fff', padding: '4px 10px', borderRadius: 8, fontSize: 16, fontWeight: 800, letterSpacing: '0.05em' }}>DAY 1</div>
          </div>
          <div style={{ flex: 1, borderRadius: 22, overflow: 'hidden', aspectRatio: '3/4', background: SC.elevated, position: 'relative' }}>
            {portraitUrl && <img src={portraitUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(1.05) saturate(1.05)' }}/>}
            <div style={{ position: 'absolute', top: 12, left: 12, background: SC.primary, color: '#fff', padding: '4px 10px', borderRadius: 8, fontSize: 16, fontWeight: 800, letterSpacing: '0.05em' }}>DAY 14</div>
          </div>
        </div>

        {/* metric chips */}
        <div style={{ display: 'flex', gap: 12, marginTop: 18 }}>
          <Metric label="Hydration" delta="+18%" up/>
          <Metric label="Redness"   delta="−24%" up/>
          <Metric label="Texture"   delta="+11%" up/>
        </div>
      </div>

      {/* calendar */}
      <div style={{
        marginTop: 22, borderRadius: 32, background: SC.surface,
        border: `1px solid ${SC.hairline}`, padding: 22,
        boxShadow: '0 8px 24px rgba(23,48,57,0.06)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
          <div style={{ fontSize: 22, fontWeight: 800 }}>This week</div>
          <div style={{ fontSize: 18, color: SC.primary, fontWeight: 800 }}>5 / 7 done</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 10 }}>
          {['M','T','W','T','F','S','S'].map((d, i) => {
            const done = i < 5;
            const today = i === 4;
            return (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ fontSize: 16, fontWeight: 700, color: SC.textTertiary }}>{d}</div>
                <div style={{
                  width: 62, height: 62, borderRadius: 18,
                  background: done ? SC.primary : SC.elevated,
                  border: today ? `3px solid ${SC.primaryDeep}` : 'none',
                  color: done ? '#fff' : SC.textTertiary,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 22, fontWeight: 800,
                }}>
                  {done ? '✓' : (i+10)}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ flex: 1 }}/>

      {/* streak banner */}
      <div style={{
        marginTop: 20, borderRadius: 28, padding: '22px 26px',
        background: SC.secondaryAction, border: `1px solid ${SC.primary}33`,
        display: 'flex', alignItems: 'center', gap: 18,
      }}>
        <div style={{ fontSize: 44 }}>🔥</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 24, fontWeight: 800, color: SC.primaryDeep }}>14-day streak</div>
          <div style={{ fontSize: 18, color: SC.textSecondary, fontWeight: 600 }}>Two weeks of staying with your plan.</div>
        </div>
      </div>
    </div>
  );
}

function Metric({ label, delta, up }) {
  return (
    <div style={{
      flex: 1, padding: '12px 14px', borderRadius: 16,
      background: SC.elevated, border: `1px solid ${SC.hairline}`,
    }}>
      <div style={{ fontSize: 14, fontWeight: 700, color: SC.textTertiary, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</div>
      <div style={{
        fontSize: 24, fontWeight: 800, marginTop: 4,
        color: up ? SC.success : SC.warning,
        display: 'flex', alignItems: 'center', gap: 4,
      }}>{delta}</div>
    </div>
  );
}

/* ---------------------------------- PHONE SHELL ---------------------------------- */
function Phone({ children, dark = false, scale = 1, tilt = 0, x = 0, y = 0 }) {
  return (
    <div style={{
      width: PHONE_W, height: PHONE_H, flexShrink: 0,
      borderRadius: 92,
      padding: 14,
      background: 'linear-gradient(150deg,#1A2329 0%,#0C1418 100%)',
      boxShadow: '0 60px 120px -40px rgba(8,40,55,0.45), 0 0 0 2px rgba(255,255,255,0.04) inset',
      transform: `translate(${x}px, ${y}px) rotate(${tilt}deg) scale(${scale})`,
      transformOrigin: 'center center',
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 78,
        background: SC.bg, overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
        position: 'relative',
      }}>
        <StatusBar dark={dark}/>
        {children}
      </div>
    </div>
  );
}

/* ---------------------------------- EXPORTS ---------------------------------- */
Object.assign(window, {
  SC, Phone, PHONE_W, PHONE_H,
  ScreenWelcome, ScreenHero, ScreenScan, ScreenRoutine, ScreenChat, ScreenProgress,
  MetricCard,
});