// screens.jsx — LAUNCH app screens
// All five screens + shared primitives. Exports to window for app.jsx.

const { useState } = React;

// ─────────────────────────────────────────────────────────────
// Social links — edit the URLs here to point at the real profiles.
// (TikTok not added yet — drop a new entry here with its profile URL.)
// ─────────────────────────────────────────────────────────────
const SOCIAL_LINKS = [
  {
    id: 'facebook',
    label: 'Facebook',
    url: 'https://www.facebook.com/profile.php?id=61588404807330',
    icon: () => (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2">
        <path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H17V3.6c-.3-.04-1.3-.13-2.46-.13-2.44 0-4.11 1.49-4.11 4.22v2.35H7.7V13h2.73v8h3.07z"/>
      </svg>
    ),
  },
  {
    id: 'instagram',
    label: 'Instagram',
    url: 'https://www.instagram.com/launchnash/',
    icon: () => (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <defs>
          <linearGradient id="igGrad" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stopColor="#FEDA77"/>
            <stop offset="35%" stopColor="#F58529"/>
            <stop offset="65%" stopColor="#DD2A7B"/>
            <stop offset="100%" stopColor="#8134AF"/>
          </linearGradient>
        </defs>
        <rect x="3" y="3" width="18" height="18" rx="5" stroke="url(#igGrad)" strokeWidth="2"/>
        <circle cx="12" cy="12" r="4" stroke="url(#igGrad)" strokeWidth="2"/>
        <circle cx="17.5" cy="6.5" r="1.2" fill="url(#igGrad)"/>
      </svg>
    ),
  },
];

// Reusable row of social icons — used at the top and bottom of Home.
function SocialBar({ theme }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', gap: 12,
    }}>
      {SOCIAL_LINKS.map(s => (
        <a
          key={s.id}
          href={s.url}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={s.label}
          title={s.label}
          style={{
            width: 40, height: 40, borderRadius: 12,
            background: theme.surface, border: `1px solid ${theme.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textDecoration: 'none', flexShrink: 0,
          }}>
          {s.icon()}
        </a>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Theme helpers
// ─────────────────────────────────────────────────────────────
function useTheme(t) {
  const dark = t.dark;
  return {
    dark,
    bg: dark ? '#0A0A0A' : '#EDE7DC',
    surface: dark ? '#161616' : '#FFFFFF',
    surface2: dark ? '#1F1F1F' : '#DDD4C2',
    border: dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,10,10,0.10)',
    text: dark ? '#FFFFFF' : '#0A0A0A',
    muted: dark ? 'rgba(255,255,255,0.55)' : 'rgba(10,10,10,0.55)',
    faint: dark ? 'rgba(255,255,255,0.30)' : 'rgba(10,10,10,0.30)',
    accent: t.accent,
    onAccent: '#0A0A0A',
    accent2: '#CAFF33',
    fontDisplay: t.fontDisplay,
    fontBody: t.fontBody,
    fontMono: '"JetBrains Mono", ui-monospace, monospace',
    pad: t.density === 'compact' ? 12 : t.density === 'comfy' ? 22 : 16,
    gap: t.density === 'compact' ? 10 : t.density === 'comfy' ? 18 : 14,
    radius: 18
  };
}

// Copy bank — toggles between hype and pro voice
const COPY = {
  hype: {
    greeting: "WHAT'S GOOD",
    streakCaption: 'DAY STREAK · DON\'T BREAK IT',
    todayKicker: "TODAY'S FOCUS",
    todayCTA: 'BOOK SESSION',
    upNext: 'UP NEXT',
    drops: 'DROPS FROM THE SQUAD',
    completeCTA: 'SUBMIT FOR REVIEW · CLAIM XP',
    submit: 'DROP YOUR TAKE',
    roadmapKicker: 'YOUR LAUNCH PATH',
    roadmapTitle: 'FROM BEDROOM TO BILLBOARD',
    communityTitle: 'THE FEED',
    profileTier: 'RISING ARTIST',
    profileSub: '11 months in · keep cooking'
  },
  pro: {
    greeting: 'Good morning',
    streakCaption: 'consecutive practice days',
    todayKicker: "Today's focus",
    todayCTA: 'Book session',
    upNext: 'Up next',
    drops: 'Recent releases',
    completeCTA: 'Submit for review',
    submit: 'Submit your work',
    roadmapKicker: 'Career roadmap',
    roadmapTitle: 'Your development path',
    communityTitle: 'Community',
    profileTier: 'Rising Artist',
    profileSub: 'Member since June 2025'
  }
};

// ─────────────────────────────────────────────────────────────
// Shared bits
// ─────────────────────────────────────────────────────────────
// Deterministic hash → keeps the same celestial body for the same label
function hashLabel(s) {
  let h = 0;
  const str = String(s || '');
  for (let i = 0; i < str.length; i++) h = ((h << 5) - h + str.charCodeAt(i)) | 0;
  return Math.abs(h);
}

function CoverArt({ palette, label, sub, size = 56, radius = 10 }) {
  // Space-themed cover backed by the JWST deep-field photo.
  // Each label gets a deterministic crop offset + tint so tiles feel varied
  // but stable — same artist always looks the same.
  const h = hashLabel(label);
  const variant = h % 5; // 0=planet, 1=ringed, 2=crescent moon, 3=constellation, 4=binary
  const [c1, c2] = palette;
  const isLarge = size > 90;

  // Pan + scale across the deep-field so adjacent tiles don't repeat
  const bgScale = 2.6;
  const bgX = -((h % 71) / 71) * (bgScale - 1) * 100;
  const bgY = -(((h >>> 5) % 79) / 79) * (bgScale - 1) * 100;
  const rotate = ((h >>> 9) % 360);

  const bodyId = `cv-${h}`;
  const haloId = `hl-${h}`;

  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      position: 'relative', overflow: 'hidden', flexShrink: 0,
      background: '#000',
    }}>
      {/* JWST deep-field background — scaled + rotated for variety */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/deep-field.png)',
        backgroundSize: `${bgScale * 100}% auto`,
        backgroundPosition: `${bgX}% ${bgY}%`,
        backgroundRepeat: 'no-repeat',
        transform: `rotate(${rotate}deg) scale(1.4)`,
        transformOrigin: 'center',
        filter: 'brightness(0.95) contrast(1.05)',
      }} />

      {/* Color tint overlay — uses the artist palette so every cover still
          reads as "their" tile while sharing the cosmic backdrop. */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(155deg, ${c1}88 0%, ${c1}44 30%, transparent 60%, #00000088 100%)`,
        mixBlendMode: 'screen',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 30% 25%, ${c2}55 0%, transparent 55%)`,
        mixBlendMode: 'screen',
      }} />
      {/* Bottom darkening for text legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%)',
      }} />

      {/* Celestial subject — sits on top of the deep field */}
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
      }}>
        <defs>
          <radialGradient id={bodyId} cx="35%" cy="30%">
            <stop offset="0%"  stopColor="#fff" stopOpacity="0.55"/>
            <stop offset="30%" stopColor={c2}/>
            <stop offset="100%" stopColor={c1} stopOpacity="0.92"/>
          </radialGradient>
          <radialGradient id={haloId} cx="50%" cy="50%">
            <stop offset="40%" stopColor={c2} stopOpacity="0"/>
            <stop offset="60%" stopColor={c2} stopOpacity="0.25"/>
            <stop offset="100%" stopColor={c2} stopOpacity="0"/>
          </radialGradient>
        </defs>

        {/* Variant 0 — solid planet */}
        {variant === 0 && (
          <g>
            <circle cx="70" cy="35" r="28" fill={`url(#${haloId})`}/>
            <circle cx="70" cy="35" r="18" fill={`url(#${bodyId})`}/>
            <ellipse cx="68" cy="32" rx="14" ry="2.5" fill={c1} opacity="0.45"/>
            <ellipse cx="72" cy="40" rx="11" ry="2" fill={c1} opacity="0.32"/>
          </g>
        )}

        {/* Variant 1 — ringed (Saturn) */}
        {variant === 1 && (
          <g transform="translate(68 38)">
            <ellipse cx="0" cy="0" rx="28" ry="6" fill="none" stroke={c2} strokeWidth="1.4" opacity="0.85"/>
            <ellipse cx="0" cy="0" rx="32" ry="7.5" fill="none" stroke={c2} strokeWidth="0.6" opacity="0.45"/>
            <circle cx="0" cy="0" r="13" fill={`url(#${bodyId})`}/>
            <ellipse cx="0" cy="0" rx="28" ry="6" fill="none" stroke={c2} strokeWidth="1.4" opacity="0.85"
              strokeDasharray="40 60" strokeDashoffset="50"/>
          </g>
        )}

        {/* Variant 2 — crescent moon */}
        {variant === 2 && (
          <g transform="translate(72 32)">
            <circle cx="0" cy="0" r="22" fill={`url(#${haloId})`}/>
            <circle cx="0" cy="0" r="14" fill="#F4ECD8"/>
            <circle cx="5" cy="-3" r="13" fill="#1a1a26"/>
            <circle cx="-5" cy="2" r="1" fill="#7a7060" opacity="0.5"/>
            <circle cx="-2" cy="6" r="0.8" fill="#7a7060" opacity="0.5"/>
          </g>
        )}

        {/* Variant 3 — constellation */}
        {variant === 3 && (
          <g stroke={c2} strokeWidth="0.7" opacity="0.9" fill="none">
            <path d={`M ${28 + (h%8)},${22 + (h%6)} L ${50},${30} L ${72},${24} L ${78},${42} L ${58},${52} L ${42},${48} Z`}
              strokeDasharray="1.5 1.5" opacity="0.55"/>
            {[[28,22],[50,30],[72,24],[78,42],[58,52],[42,48]].map(([x,y], i) => (
              <g key={i}>
                <circle cx={x+(h%8)} cy={y+(h%6)} r="2" fill="#fff" stroke="none"/>
                <circle cx={x+(h%8)} cy={y+(h%6)} r="4" fill="#fff" opacity="0.25" stroke="none"/>
              </g>
            ))}
          </g>
        )}

        {/* Variant 4 — binary planets */}
        {variant === 4 && (
          <g>
            <circle cx="62" cy="28" r="20" fill={`url(#${haloId})`}/>
            <circle cx="62" cy="28" r="12" fill={`url(#${bodyId})`}/>
            <circle cx="82" cy="48" r="6" fill={c2}/>
            <circle cx="82" cy="48" r="3" fill="#fff" opacity="0.5"/>
          </g>
        )}
      </svg>

      {/* Label */}
      <div style={{
        position: 'absolute', inset: 0, display: 'flex',
        alignItems: 'flex-end', justifyContent: 'flex-start',
        padding: isLarge ? 14 : 8, pointerEvents: 'none',
      }}>
        <div>
          <div style={{
            fontFamily: 'Anton, "Archivo Black", system-ui',
            color: '#fff',
            fontSize: Math.max(11, size * 0.18), lineHeight: 1,
            letterSpacing: 0.5,
            textShadow: '0 2px 8px rgba(0,0,0,0.85)',
          }}>{label}</div>
          {sub && isLarge && (
            <div style={{
              fontSize: Math.max(8, size * 0.08),
              color: 'rgba(255,255,255,0.75)',
              fontFamily: '"JetBrains Mono", monospace', marginTop: 4,
              letterSpacing: 0.5, fontWeight: 600,
              textShadow: '0 1px 4px rgba(0,0,0,0.7)',
            }}>{sub}</div>
          )}
        </div>
      </div>
    </div>
  );
}

function Chip({ children, theme, accent = false, mono = true, size = 'sm' }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: size === 'sm' ? '5px 9px' : '7px 12px',
      borderRadius: 999, fontSize: size === 'sm' ? 10 : 12,
      fontFamily: mono ? theme.fontMono : theme.fontBody,
      fontWeight: 600, letterSpacing: 0.5,
      background: accent ? theme.accent : 'transparent',
      color: accent ? theme.onAccent : theme.text,
      border: accent ? 'none' : `1px solid ${theme.border}`,
      textTransform: 'uppercase', whiteSpace: 'nowrap'
    }}>{children}</span>);

}

function Card({ children, theme, style = {} }) {
  return (
    <div style={{
      background: theme.surface, borderRadius: theme.radius,
      border: `1px solid ${theme.border}`,
      ...style
    }}>{children}</div>);

}

function DisplayHeading({ children, theme, size = 36, style = {} }) {
  return (
    <h2 style={{
      fontFamily: theme.fontDisplay,
      fontSize: size, fontWeight: 400, lineHeight: 0.92,
      letterSpacing: 0.2, margin: 0, color: theme.text,
      textTransform: 'uppercase', ...style
    }}>{children}</h2>);

}

function Waveform({ accent, muted, bars = 42, played = 0.4 }) {
  // deterministic pseudo-random heights
  const heights = Array.from({ length: bars }, (_, i) => {
    const v = Math.sin(i * 1.3) * 0.5 + Math.cos(i * 0.7) * 0.4 + Math.sin(i * 0.31) * 0.3;
    return Math.max(0.15, Math.min(1, (v + 1.2) / 2.2));
  });
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 38, flex: 1 }}>
      {heights.map((h, i) =>
      <div key={i} style={{
        flex: 1, height: `${h * 100}%`, borderRadius: 2,
        background: i / bars < played ? accent : muted
      }} />
      )}
    </div>);

}

// SVG icon set — flat, 2px stroke
const Icon = {
  home: (c) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 11l9-7 9 7v9a2 2 0 01-2 2h-4v-7H9v7H5a2 2 0 01-2-2v-9z" stroke={c} strokeWidth="2" strokeLinejoin="round" /></svg>,
  play: (c) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M6 4l14 8-14 8V4z" stroke={c} strokeWidth="2" strokeLinejoin="round" fill={c} /></svg>,
  target: (c) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke={c} strokeWidth="2" /><circle cx="12" cy="12" r="5" stroke={c} strokeWidth="2" /><circle cx="12" cy="12" r="1.5" fill={c} /></svg>,
  community: (c) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="9" r="3.5" stroke={c} strokeWidth="2" /><circle cx="17" cy="11" r="2.5" stroke={c} strokeWidth="2" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5M14 20c0-2 2-3.5 4-3.5s4 1.5 4 3.5" stroke={c} strokeWidth="2" strokeLinecap="round" /></svg>,
  user: (c) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke={c} strokeWidth="2" /><path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke={c} strokeWidth="2" strokeLinecap="round" /></svg>,
  flame: (c) => <svg width="14" height="16" viewBox="0 0 14 16" fill="none"><path d="M7 1c1 2 0 3.5-1 5 0-1.5-1-2.5-2-3 1 3-2 4-2 7a5 5 0 0010 0c0-3-3-5-5-9z" fill={c} /></svg>,
  bolt: (c) => <svg width="14" height="16" viewBox="0 0 14 16" fill="none"><path d="M8 1L2 9h4l-1 6 7-9H8l1-5z" fill={c} /></svg>,
  check: (c) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  lock: (c) => <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="7" rx="1.5" stroke={c} strokeWidth="1.8" /><path d="M5 7V5a3 3 0 016 0v2" stroke={c} strokeWidth="1.8" /></svg>,
  heart: (c, f) => <svg width="18" height="18" viewBox="0 0 24 24" fill={f ? c : 'none'}><path d="M12 21s-7-4.5-9-9.5C1.5 7.5 4 4 7.5 4c1.8 0 3.4 1 4.5 2.5C13.1 5 14.7 4 16.5 4 20 4 22.5 7.5 21 11.5c-2 5-9 9.5-9 9.5z" stroke={c} strokeWidth="2" strokeLinejoin="round" /></svg>,
  chat: (c) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 5h16v11h-9l-4 4v-4H4V5z" stroke={c} strokeWidth="2" strokeLinejoin="round" /></svg>,
  share: (c) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M8 12l8-6m-8 6l8 6m-8-6h-2a2 2 0 00-2 2v3" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /><circle cx="18" cy="6" r="3" fill={c} /><circle cx="18" cy="18" r="3" fill={c} /></svg>,
  arrow: (c) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4L7 11" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  search: (c) => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="6" stroke={c} strokeWidth="2" /><path d="M14 14l4 4" stroke={c} strokeWidth="2" strokeLinecap="round" /></svg>,
  bell: (c) => <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 14h12l-1.5-2V8a4.5 4.5 0 00-9 0v4L4 14zM8 17a2 2 0 004 0" stroke={c} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" /></svg>,
  plus: (c) => <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12" stroke={c} strokeWidth="2.4" strokeLinecap="round" /></svg>,
  pen: (c) => <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M14 4l6 6L8 22H2v-6L14 4z" stroke={c} strokeWidth="2" strokeLinejoin="round"/><path d="M13 5l6 6" stroke={c} strokeWidth="2" strokeLinecap="round"/></svg>
};

// ─────────────────────────────────────────────────────────────
// Tab bar — bottom navigation
// ─────────────────────────────────────────────────────────────
function TabBar({ active, onChange, theme }) {
  const tabs = [
  { id: 'home', icon: Icon.home, label: 'Home' },
  { id: 'create', icon: Icon.pen, label: 'Create' },
  { id: 'feed', icon: Icon.community, label: 'Feed' },
  { id: 'profile', icon: Icon.user, label: 'You' }];

  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 30,
      paddingBottom: 30, paddingTop: 8,
      background: theme.dark ?
      'linear-gradient(to top, rgba(10,10,10,0.96) 60%, rgba(10,10,10,0))' :
      'linear-gradient(to top, rgba(244,240,232,0.96) 60%, rgba(244,240,232,0))',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)'
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
        padding: '0 8px'
      }}>
        {tabs.map((t) => {
          const on = active === t.id;
          return (
            <button key={t.id} onClick={() => onChange(t.id)} style={{
              flex: 1, display: 'flex', flexDirection: 'column',
              alignItems: 'center', gap: 4, padding: '8px 4px',
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: on ? theme.accent : theme.muted
            }}>
              {t.icon(on ? theme.accent : theme.muted)}
              <span style={{
                fontFamily: theme.fontMono, fontSize: 9, fontWeight: 600,
                letterSpacing: 0.8, textTransform: 'uppercase'
              }}>{t.label}</span>
            </button>);

        })}
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────
// Top bar — used per screen (kicker + actions)
// ─────────────────────────────────────────────────────────────
function TopBar({ left, right, theme }) {
  return (
    <div style={{
      paddingTop: 58, paddingBottom: 8,
      paddingLeft: theme.pad, paddingRight: theme.pad,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    }}>
      <div>{left}</div>
      <div style={{ display: 'flex', gap: 8 }}>{right}</div>
    </div>);

}

function IconBtn({ children, theme, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 38, height: 38, borderRadius: 12,
      background: theme.surface, border: `1px solid ${theme.border}`,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer', padding: 0
    }}>{children}</button>);

}

// ─────────────────────────────────────────────────────────────
// 1. HOME
// ─────────────────────────────────────────────────────────────
function HomeScreen({ theme, copy, onOpenLesson, logged, onToggleToday, onOpenReview, onOpenMessages, onOpenLeaderboard, onOpenCoachQueue, onOpenEvaluations, onOpenPlans, unreadCount = 0 }) {
  const HabitTracker = window.LAUNCH_SCREENS_2 && window.LAUNCH_SCREENS_2.HabitTracker;
  const ProReviewCTA = window.LAUNCH_SCREENS_3 && window.LAUNCH_SCREENS_3.ProReviewCTA;
  const LeaderboardCard = window.LAUNCH_SCREENS_6 && window.LAUNCH_SCREENS_6.LeaderboardCard;
  const ProfilePlanCard = window.LAUNCH_SCREENS_4 && window.LAUNCH_SCREENS_4.ProfilePlanCard;
  const user = window.LAUNCH_USER.useUser();
  const plan = window.LAUNCH_USER.usePlan ? window.LAUNCH_USER.usePlan() : { plan: 'free', active: false, expiresAt: null };
  const isCoach = user.role === 'coach' || user.role === 'admin';

  // Notice when a new coach review has arrived (vs the last one the user opened).
  const [newReview, setNewReview] = React.useState(null); // null | { id }
  React.useEffect(() => {
    let alive = true;
    if (window.LAUNCH_USER.fetchMyEvaluations) {
      window.LAUNCH_USER.fetchMyEvaluations().then(list => {
        if (!alive || !Array.isArray(list) || !list.length) return;
        const latestId = String(list[0].id);
        let seen = '';
        try { seen = localStorage.getItem('launch.seenReview') || ''; } catch (e) {}
        if (latestId !== seen) setNewReview({ id: latestId });
      });
    }
    return () => { alive = false; };
  }, []);
  const openReviews = () => {
    if (newReview) {
      try { localStorage.setItem('launch.seenReview', newReview.id); } catch (e) {}
      setNewReview(null);
    }
    onOpenEvaluations && onOpenEvaluations();
  };
  return (
    <div style={{ paddingBottom: 110 }}>
      <TopBar theme={theme}
      left={
      <div>
            <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 1, fontWeight: 600 }}>
              MON · MAY 11
            </div>
            <div style={{ fontFamily: theme.fontDisplay, fontSize: 28, color: theme.text, letterSpacing: 0.3, textTransform: 'uppercase', lineHeight: 1, marginTop: 4 }}>
              {copy.greeting}, <span style={{ color: theme.accent }}>{user.firstName.toUpperCase()}</span>
            </div>
          </div>
      }
      right={<>
          <IconBtn theme={theme}>{Icon.search(theme.text)}</IconBtn>
          <div style={{ position: 'relative' }}>
            <button onClick={onOpenMessages} style={{
              width: 38, height: 38, borderRadius: 12,
              background: theme.surface, border: `1px solid ${theme.border}`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', padding: 0,
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M4 5h16v11h-9l-4 4v-4H4V5z" stroke={theme.text} strokeWidth="2" strokeLinejoin="round"/>
              </svg>
            </button>
            {unreadCount > 0 && (
              <div style={{
                position: 'absolute', top: -4, right: -4, minWidth: 18, height: 18,
                borderRadius: 99, background: theme.accent, color: theme.onAccent,
                fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: '0 5px', border: `2px solid ${theme.bg}`,
              }}>{unreadCount}</div>
            )}
          </div>
        </>} />

      {/* Membership — surfaced near the top so it's one of the first things seen */}
      {ProfilePlanCard && onOpenPlans && !isCoach &&
      <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
        <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 1, fontWeight: 700, marginBottom: 8 }}>
          {plan.active ? '★ YOUR MEMBERSHIP' : '★ UNLOCK EVERYTHING'}
        </div>
        <ProfilePlanCard theme={theme} currentPlanId={plan.plan} expiresAt={plan.expiresAt} active={plan.active} onOpen={onOpenPlans} />
      </div>
      }

      {/* Coach-only: review queue entry point */}
      {isCoach && onOpenCoachQueue && (
        <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
          <button onClick={onOpenCoachQueue} style={{
            width: '100%', padding: '16px', borderRadius: theme.radius,
            background: theme.accent, color: theme.onAccent, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
          }}>
            <span style={{ fontSize: 22 }}>🎧</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 18, letterSpacing: 0.3, textTransform: 'uppercase', lineHeight: 1 }}>
                COACH · REVIEW QUEUE
              </div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 9, letterSpacing: 0.5, marginTop: 4, opacity: 0.85 }}>
                LISTEN TO SUBMISSIONS · SCORE · SEND FEEDBACK
              </div>
            </div>
            <span style={{ fontFamily: theme.fontDisplay, fontSize: 18 }}>→</span>
          </button>
        </div>
      )}

      {/* New coach review notice */}
      {newReview && onOpenEvaluations && (
        <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
          <button onClick={openReviews} style={{
            width: '100%', padding: '14px 16px', borderRadius: theme.radius,
            background: theme.accent, color: theme.onAccent, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
          }}>
            <span style={{ fontSize: 20 }}>🎉</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 16, letterSpacing: 0.3, textTransform: 'uppercase', lineHeight: 1 }}>
                YOUR COACH REVIEWED YOUR SONG
              </div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 9, letterSpacing: 0.5, marginTop: 4, opacity: 0.85 }}>
                TAP TO SEE YOUR FEEDBACK
              </div>
            </div>
            <span style={{ fontFamily: theme.fontDisplay, fontSize: 18 }}>→</span>
          </button>
        </div>
      )}

      {/* Social links — top */}
      <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
        <SocialBar theme={theme} />
      </div>

      {/* Streak hero band */}
      <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
        <div style={{ ...{
            background: theme.accent, borderRadius: theme.radius,
            padding: 16, display: 'flex', alignItems: 'center', gap: 14,
            color: theme.onAccent
          }, background: "rgb(199, 33, 8)" }}>
          <div style={{
            fontFamily: theme.fontDisplay, fontSize: 56, lineHeight: 0.85,
            letterSpacing: -1
          }}>{user.streak}</div>
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700,
              letterSpacing: 0.8, textTransform: 'uppercase', opacity: 0.7
            }}>{copy.streakCaption}</div>
            <div style={{
              fontFamily: theme.fontDisplay, fontSize: 20, marginTop: 4,
              letterSpacing: 0.2, lineHeight: 1, textTransform: 'uppercase'
            }}>{user.streak >= 7 ? "YOU'RE ON FIRE" : user.streak <= 1 ? 'DAY ONE · LET\u2019S GO' : 'KEEP IT LIT'}</div>
          </div>
          {Icon.flame(theme.onAccent)}
        </div>
      </div>

      {/* Today's mission card */}
      <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          marginBottom: 10
        }}>
          <span style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 600 }}>
            {copy.todayKicker}
          </span>
          <span style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.faint, letterSpacing: 0.5 }}>
            DAY {user.dayOfPath} / {user.pathLength}
          </span>
        </div>
        <Card theme={theme} style={{ overflow: 'hidden', cursor: 'pointer' }}>
          <div onClick={onOpenReview}>
            <div style={{
              height: 168, position: 'relative', overflow: 'hidden',
              background: '#0A0A0A',
            }}>
              {/* deep field bg */}
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: 'url(assets/deep-field.png)',
                backgroundSize: 'cover', backgroundPosition: 'center',
                opacity: 0.45,
              }} />
              <div style={{
                position: 'absolute', inset: 0,
                background: `linear-gradient(135deg, ${theme.accent}99 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.95) 100%)`,
              }} />
              <div style={{
                position: 'absolute', top: 14, left: 14,
                display: 'flex', gap: 6,
              }}>
                <Chip theme={{ ...theme, border: 'rgba(255,255,255,0.25)', text: '#fff' }}>PRO REVIEW</Chip>
                <Chip theme={{ ...theme, border: 'rgba(255,255,255,0.25)', text: '#fff' }}>BLIND MATCH</Chip>
              </div>
              <div style={{
                position: 'absolute', bottom: 14, left: 14, right: 14,
                fontFamily: theme.fontDisplay, fontSize: 30, lineHeight: 0.95,
                color: '#fff', textTransform: 'uppercase', letterSpacing: 0.2,
              }}>
                GET YOUR<br/>NEXT SONG<br/><span style={{ color: theme.accent }}>HEARD.</span>
              </div>
              <div style={{
                position: 'absolute', top: 14, right: 14,
                width: 44, height: 44, borderRadius: 99,
                background: theme.accent, color: theme.onAccent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: theme.fontDisplay, fontSize: 13, letterSpacing: 0.5,
              }}>$11</div>
            </div>
            <div style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 99, background: '#7A5AE0',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: theme.fontDisplay, color: '#fff', fontSize: 16,
              }}>★</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.text, fontWeight: 600 }}>
                  Submit to a pro
                </div>
                <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5 }}>
                  VERIFIED INDUSTRY PRO · ANONYMOUS MATCH
                </div>
              </div>
              <button style={{
                background: theme.text, color: theme.bg,
                fontFamily: theme.fontDisplay, fontSize: 13, letterSpacing: 0.8,
                padding: '11px 14px', borderRadius: 99, border: 'none', cursor: 'pointer',
                textTransform: 'uppercase',
              }}>{copy.todayCTA} →</button>
            </div>
          </div>
        </Card>
      </div>

      {/* Habit tracker — compact */}
      {HabitTracker &&
      <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
          <HabitTracker theme={theme} compact logged={logged} onToggleToday={onToggleToday} />
        </div>
      }

      {/* Stat strip */}
      <div style={{
        padding: `${theme.gap}px ${theme.pad}px 0`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8
      }}>
        {[
        { n: String(user.reviewsPending), l: 'REVIEWS\nPENDING' },
        { n: String(user.sessionsThisWeek), l: 'SESSIONS\nTHIS WEEK' },
        { n: user.xpEarnedToday.toLocaleString(), l: 'XP\nEARNED' }].
        map((s, i) =>
        <Card key={i} theme={theme} style={{ padding: 12 }}>
            <div style={{ fontFamily: theme.fontDisplay, fontSize: 28, color: theme.text, lineHeight: 1 }}>
              {s.n}
            </div>
            <div style={{
            fontFamily: theme.fontMono, fontSize: 9, color: theme.muted,
            letterSpacing: 0.8, marginTop: 6, whiteSpace: 'pre-line', lineHeight: 1.3,
            fontWeight: 600
          }}>{s.l}</div>
          </Card>
        )}
      </div>

      {/* Pro review CTA */}
      {ProReviewCTA && onOpenReview &&
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
          <ProReviewCTA theme={theme} onOpen={onOpenReview} />
        </div>
      }

      {/* Weekly leaderboard */}
      {LeaderboardCard && onOpenLeaderboard &&
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
          <LeaderboardCard theme={theme} onOpen={onOpenLeaderboard} />
        </div>
      }

      {/* Up next — hidden */}
      {false &&
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600, marginBottom: 10
        }}>{copy.upNext}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
          { kind: '1:1 MENTOR', t: 'Topline check-in with PG', s: 'Wed · 4:00 PM · 60 min · $100', pal: ['#7A5AE0', '#FBBF24'], lbl: 'PG', tag: 'TOMORROW' },
          { kind: 'REVIEW', t: 'A&R feedback ready', s: 'From Jay Brunswick · played 2× already', pal: ['#C72820', '#7A1A0A'], lbl: 'JB', tag: 'NEW' },
          { kind: 'A&R PANEL', t: 'Live demo review · open mic', s: 'Fri · 7 PM EST · 4 slots left', pal: ['#CAFF33', '#161616'], lbl: 'AR', tag: 'LIVE' }].
          map((u, i) =>
          <Card key={i} theme={theme} style={{
            padding: 12, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer'
          }}>
              <CoverArt palette={u.pal} label={u.lbl} size={48} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                fontFamily: theme.fontMono, fontSize: 9, color: theme.accent,
                letterSpacing: 0.8, fontWeight: 700
              }}>{u.kind}</div>
                <div style={{ fontFamily: theme.fontBody, fontSize: 15, color: theme.text, fontWeight: 600, marginTop: 1 }}>
                  {u.t}
                </div>
                <div style={{ fontFamily: theme.fontBody, fontSize: 12, color: theme.muted, marginTop: 1 }}>
                  {u.s}
                </div>
              </div>
              <Chip theme={theme}>{u.tag}</Chip>
            </Card>
          )}
        </div>
      </div>
      }

      {/* Drops from the squad */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 10
        }}>
          <span style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted, letterSpacing: 1, fontWeight: 600 }}>
            {copy.drops}
          </span>
          <span style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5, fontWeight: 700 }}>
            COMING SOON
          </span>
        </div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: `0 -${theme.pad}px`, padding: `0 ${theme.pad}px` }}>
          {[
          { lbl: 'KP', pal: ['#C72820', '#0A0A0A'], t: 'NEON HOURS', a: 'Kai Park' },
          { lbl: 'SV', pal: ['#CAFF33', '#7A5AE0'], t: 'SOFT POWER', a: 'Sasha Vee' },
          { lbl: 'TM', pal: ['#FBBF24', '#C72820'], t: 'OUTER ROOMS', a: 'Theo M.' },
          { lbl: 'IL', pal: ['#7A5AE0', '#CAFF33'], t: 'LOW TIDE', a: 'Isla Loop' }].
          map((d, i) =>
          <div key={i} style={{ width: 140, flexShrink: 0 }}>
              <CoverArt palette={d.pal} label={d.lbl} size={140} radius={14} />
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 14, color: theme.text, marginTop: 8, letterSpacing: 0.2, textTransform: 'uppercase', lineHeight: 1.1 }}>
                {d.t}
              </div>
              <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5, marginTop: 2 }}>
                {d.a.toUpperCase()}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Social links — bottom */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <SocialBar theme={theme} />
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────
// 2. TODAY'S LESSON
// ─────────────────────────────────────────────────────────────
function LessonScreen({ theme, copy, onBack, onOpenReview }) {
  const ProReviewCTA = window.LAUNCH_SCREENS_3 && window.LAUNCH_SCREENS_3.ProReviewCTA;
  const [chapter, setChapter] = useState(2);
  const chapters = [
  { t: 'Intro: why mixing matters', dur: '2:14', done: true },
  { t: 'Setting up your session', dur: '4:30', done: true },
  { t: 'Gain staging your stems', dur: '6:10', done: false, current: true },
  { t: 'EQ: carve, don\'t boost', dur: '5:45', done: false },
  { t: 'Glue compression on the bus', dur: '3:20', done: false }];

  return (
    <div style={{ paddingBottom: 110 }}>
      {/* Hero / video */}
      <div style={{
        height: 360, position: 'relative',
        background: `linear-gradient(160deg, ${theme.accent} 0%, #FFB37A 60%, #FBBF24 100%)`
      }}>
        <div style={{
          position: 'absolute', top: 58, left: theme.pad, right: theme.pad,
          display: 'flex', justifyContent: 'space-between'
        }}>
          <button onClick={onBack} style={{
            width: 38, height: 38, borderRadius: 12,
            background: 'rgba(10,10,10,0.7)', border: 'none', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', backdropFilter: 'blur(20px)'
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M9 2L4 7l5 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
          <div style={{ display: 'flex', gap: 6 }}>
            <Chip theme={{ ...theme, border: 'rgba(10,10,10,0.25)' }}>MODULE 4 · LESSON 12</Chip>
          </div>
        </div>
        {/* Play button */}
        <div style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 72, height: 72, borderRadius: 99,
          background: '#0A0A0A', color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 12px 32px rgba(0,0,0,0.3)'
        }}>
          <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff">
            <path d="M6 4l14 8-14 8V4z" />
          </svg>
        </div>
        {/* Title */}
        <div style={{
          position: 'absolute', bottom: 18, left: theme.pad, right: theme.pad
        }}>
          <div style={{
            fontFamily: theme.fontMono, fontSize: 10, color: 'rgba(10,10,10,0.7)',
            letterSpacing: 1, fontWeight: 700, marginBottom: 8
          }}>
            22 MIN · 5 CHAPTERS · +120 XP
          </div>
          <DisplayHeading theme={theme} size={36} style={{ color: '#0A0A0A' }}>
            MIXING YOUR<br />FIRST SINGLE
          </DisplayHeading>
        </div>
      </div>

      {/* Instructor row */}
      <div style={{
        padding: `${theme.gap}px ${theme.pad}px`,
        display: 'flex', alignItems: 'center', gap: 12,
        borderBottom: `1px solid ${theme.border}`
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: 99, background: '#7A5AE0',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: theme.fontDisplay, color: '#fff', fontSize: 16
        }}>JB</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.text, fontWeight: 600 }}>
            Jay Brunswick
          </div>
          <div style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.muted, letterSpacing: 0.5 }}>
            PRODUCER · A&R · VINTAGE MUSIC GROUP
          </div>
        </div>
        <button style={{
          background: 'transparent', color: theme.accent,
          border: `1.5px solid ${theme.accent}`, borderRadius: 99,
          fontFamily: theme.fontMono, fontSize: 10, fontWeight: 700,
          letterSpacing: 1, padding: '8px 12px', cursor: 'pointer',
          textTransform: 'uppercase'
        }}>+ FOLLOW</button>
      </div>

      {/* Chapters */}
      <div style={{ padding: `${theme.gap}px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600, marginBottom: 10
        }}>CHAPTERS</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {chapters.map((c, i) => {
            const isCur = i === chapter;
            return (
              <div key={i} onClick={() => setChapter(i)} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 12px', borderRadius: 12,
                background: isCur ? theme.surface : 'transparent',
                border: `1px solid ${isCur ? theme.border : 'transparent'}`,
                cursor: 'pointer'
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 99,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: c.done ? theme.accent : isCur ? theme.text : 'transparent',
                  border: !c.done && !isCur ? `1.5px solid ${theme.faint}` : 'none',
                  color: c.done ? theme.onAccent : theme.bg,
                  fontFamily: theme.fontMono, fontSize: 11, fontWeight: 700
                }}>
                  {c.done ? Icon.check(theme.onAccent) : isCur ?
                  <svg width="10" height="10" viewBox="0 0 10 10" fill={theme.bg}><path d="M2 1l7 4-7 4V1z" /></svg> :
                  <span style={{ color: theme.faint }}>{i + 1}</span>
                  }
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontFamily: theme.fontBody, fontSize: 14, color: theme.text,
                    fontWeight: isCur ? 600 : 500,
                    textDecoration: c.done ? 'line-through' : 'none',
                    textDecorationColor: theme.faint
                  }}>{c.t}</div>
                </div>
                <div style={{ fontFamily: theme.fontMono, fontSize: 11, color: theme.muted }}>
                  {c.dur}
                </div>
              </div>);

          })}
        </div>
      </div>

      {/* Assignment */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <div style={{
          fontFamily: theme.fontMono, fontSize: 11, color: theme.muted,
          letterSpacing: 1, fontWeight: 600, marginBottom: 10
        }}>ASSIGNMENT</div>
        <Card theme={theme} style={{ padding: 16, borderColor: theme.accent, borderWidth: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            {Icon.bolt(theme.accent)}
            <span style={{ fontFamily: theme.fontMono, fontSize: 10, color: theme.accent, letterSpacing: 1, fontWeight: 700 }}>
              DUE FRIDAY · +250 XP
            </span>
          </div>
          <div style={{ fontFamily: theme.fontDisplay, fontSize: 22, color: theme.text, lineHeight: 1, textTransform: 'uppercase', letterSpacing: 0.2 }}>
            MIX A 30-SEC SNIPPET<br />OF YOUR OWN TRACK
          </div>
          <div style={{ fontFamily: theme.fontBody, fontSize: 13, color: theme.muted, marginTop: 8, lineHeight: 1.45 }}>
            Use what you learned. Drop it in the feed for Noah + the squad to review. Best mix gets pinned this week.
          </div>
          <button style={{
            marginTop: 14, width: '100%',
            background: theme.accent, color: theme.onAccent,
            fontFamily: theme.fontDisplay, fontSize: 14, letterSpacing: 1,
            padding: '14px 18px', borderRadius: 12, border: 'none', cursor: 'pointer',
            textTransform: 'uppercase'
          }}>{copy.submit} ↑</button>
        </Card>
        {ProReviewCTA && onOpenReview &&
        <div style={{ marginTop: 10 }}>
            <ProReviewCTA theme={theme} onOpen={onOpenReview} variant="inline" />
          </div>
        }
      </div>

      {/* Complete CTA */}
      <div style={{ padding: `${theme.gap + 6}px ${theme.pad}px 0` }}>
        <button style={{
          width: '100%', background: theme.text, color: theme.bg,
          fontFamily: theme.fontDisplay, fontSize: 15, letterSpacing: 1,
          padding: '16px 18px', borderRadius: 14, border: 'none', cursor: 'pointer',
          textTransform: 'uppercase'
        }}>{copy.completeCTA}</button>
      </div>
    </div>);

}

// Shared avatar: shows the member's photo when available, else their initials on
// their color. Used everywhere a person's face appears so profile photos show up
// app-wide. `m` is a member/profile object ({ avatarUrl, lbl/initials, color }).
function Avatar({ m, src, lbl, color, size = 40, radius = 99, fontSize, theme, style }) {
  const url = src || (m && m.avatarUrl);
  const label = lbl || (m && (m.lbl || m.initials)) || '';
  const bg = color || (m && m.color) || '#888';
  const base = { width: size, height: size, borderRadius: radius, flexShrink: 0, ...style };
  if (url) {
    return <div style={{ ...base, backgroundImage: `url(${url})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundColor: bg }} />;
  }
  return (
    <div style={{
      ...base, background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: (theme && theme.fontDisplay) || 'inherit',
      color: '#0A0A0A', fontSize: fontSize || Math.round(size * 0.4),
    }}>{label}</div>
  );
}

window.LAUNCH_SCREENS_1 = { HomeScreen, LessonScreen, useTheme, COPY, TabBar, Icon, Card, Chip, CoverArt, Waveform, TopBar, IconBtn, DisplayHeading, Avatar };