// Loop MVP — Home + Meeting screens
// HomeScreen, MeetingsScreen, BriefScreen, LiveMeetingScreen, RecapScreen

const D = () => window.LOOP_DATA;

// ─────────────────────────────────────────────────────────────
// HomeScreen — orchestrated by Loop's AI coach layer.
// Each module is ranked by relevance to today; the user can pin,
// mute, or reorder anything from the orchestrator sheet.
// ─────────────────────────────────────────────────────────────

const HOME_MODULES = {
  next: { label: 'Next meeting', agent: 'Chief of staff', icon: 'calendar-clock' },
  insights: { label: "Today's signals", agent: 'Chief of staff', icon: 'sparkles' },
  weather: { label: 'Weather & outfit', agent: 'Daily ritual', icon: 'cloud-sun' },
  spots: { label: 'Places near your day', agent: 'Chief of staff', icon: 'map-pin' },
  health: { label: 'Health & recovery', agent: 'Health coach', icon: 'activity' },
  kpis: { label: 'Company pulse', agent: 'Board & investor relations', icon: 'trending-up' },
  trip: { label: 'Next trip', agent: 'Chief of staff', icon: 'plane' },
  people: { label: 'My people', agent: 'People & hiring', icon: 'users' },
  agenda: { label: 'Your day', agent: 'Chief of staff', icon: 'calendar' },
  todos: { label: 'Follow-ups', agent: 'Chief of staff', icon: 'check-square' },
  agents: { label: 'Agents running', agent: 'Orchestrator', icon: 'sparkles' },
  notifs: { label: 'Signal not noise', agent: 'Orchestrator', icon: 'bell' },
};

const DEFAULT_ORDER = {
  principal: ['weather', 'next', 'insights', 'kpis', 'trip', 'spots', 'people', 'agenda', 'todos', 'agents', 'notifs'],
  moderator: ['weather', 'next', 'insights', 'kpis', 'people', 'agenda', 'spots', 'trip', 'todos', 'agents', 'notifs'],
};
const DEFAULT_ENABLED = Object.keys(HOME_MODULES).reduce((a, k) => (a[k] = true, a), {});

function HomeScreen({ persona, go }) {
  const data = D();
  const u = data[persona];
  const meetings = data.meetings[persona];
  const next = meetings.find(m => m.status === 'upcoming');
  const todos = data.todos[persona].filter(t => t.priority === 'high').slice(0, 3);
  const notifs = data.notifications[persona].slice(0, 2);
  const ringPeople = data.people.filter(p => p.status === 'needs-attention' || p.status === 'warm').slice(0, 4);
  const trip = data.trip[persona];
  const companies = data.companies[persona];
  const [companyId, setCompanyId] = React.useState(companies[0].id);
  const company = companies.find(c => c.id === companyId) || companies[0];

  const [enabled, setEnabled] = React.useState(DEFAULT_ENABLED);
  const [order, setOrder] = React.useState(DEFAULT_ORDER[persona]);
  const [sheetOpen, setSheetOpen] = React.useState(false);
  React.useEffect(() => {
    setOrder(DEFAULT_ORDER[persona]);
    setCompanyId(data.companies[persona][0].id);
  }, [persona]);

  const renderModule = (key) => {
    if (!enabled[key]) return null;
    switch (key) {
      case 'next':
        return next ? (
          <div key="next" style={{ padding: '0 22px 24px' }}>
            <Card ink onClick={() => go('brief', { id: next.id })} style={{ padding: 24, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', right: -40, top: -40, width: 180, height: 180,
                borderRadius: '50%', border: '1.2px solid rgba(243,115,56,0.35)' }} />
              <div style={{ position: 'absolute', right: -10, bottom: -50, width: 140, height: 140,
                borderRadius: '50%', border: '1.2px solid rgba(243,115,56,0.2)' }} />
              <Eyebrow style={{ color: 'var(--canvas)' }}>Next · {next.when}</Eyebrow>
              <h2 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 12, lineHeight: 1.2, maxWidth: 290 }}>
                {next.title}
              </h2>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 16, color: 'rgba(252,251,250,0.7)', fontSize: 13 }}>
                <Icon name="clock" size={14} />
                <span>{next.time} · {next.duration}</span>
                <span style={{ opacity: 0.4 }}>·</span>
                <Icon name="video" size={14} />
                <span>{next.location}</span>
              </div>
              {next.participants && (
                <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <AvatarStack people={next.participants.map(p => ({
                    initials: p.initials, tint: '#CF4500',
                    photo: (findPerson(p.name) || findPerson(p.initials) || {}).photo,
                  }))} size={32} />
                  <SatelliteCTA icon="arrow-right" size={48}
                    onClick={(e) => { e.stopPropagation(); go('brief', { id: next.id }); }} />
                </div>
              )}
            </Card>
          </div>
        ) : null;

      case 'insights': return <div key="insights" style={{ marginBottom: 24 }}><InsightsModule persona={persona} /></div>;
      case 'weather':
        // When both weather + health are enabled, render them as a paired briefing.
        // Otherwise this slot renders the full weather module.
        if (enabled.health) {
          return <div key="weather" style={{ marginBottom: 24 }}><BriefingPair persona={persona} /></div>;
        }
        return <div key="weather" style={{ marginBottom: 24 }}><WeatherModule persona={persona} /></div>;
      case 'spots': return <div key="spots" style={{ marginBottom: 24 }}><SpotsModule persona={persona} /></div>;
      case 'health':
        // Already rendered alongside weather as a paired briefing
        if (enabled.weather) return null;
        return <div key="health" style={{ marginBottom: 24 }}><HealthModule persona={persona} /></div>;

      case 'kpis':
        return (
          <div key="kpis" style={{ marginBottom: 24 }}>
            <Section eyebrow="My companies" title={
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                <CompanyLogo company={company} size={32} rounded={8} />
                {company.name}
              </span>
            }
              action={<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
                textTransform: 'uppercase', color: 'var(--slate)' }}>{company.role}</div>}>
              {/* Company switcher — horizontal scroller of company chips */}
              <div style={{ display: 'flex', gap: 8, overflowX: 'auto',
                padding: '0 22px 14px', margin: '0 -22px' }}>
                {companies.map(c => {
                  const active = c.id === companyId;
                  if (c.isAdd) {
                    return (
                      <button key={c.id} style={{
                        flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 8,
                        padding: '8px 14px', borderRadius: 999,
                        border: '1.5px dashed rgba(20,20,19,0.25)',
                        background: 'transparent', cursor: 'pointer',
                        fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--slate)',
                      }}>
                        <Icon name="plus" size={14} color="var(--slate)" /> {c.name}
                      </button>
                    );
                  }
                  return (
                    <button key={c.id} onClick={() => setCompanyId(c.id)} style={{
                      flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 8,
                      padding: '6px 14px 6px 6px', borderRadius: 999,
                      border: active ? '1.5px solid var(--ink)' : '1.5px solid rgba(20,20,19,0.12)',
                      background: active ? 'var(--ink)' : 'var(--canvas-lifted)',
                      color: active ? 'var(--canvas)' : 'var(--ink)',
                      cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
                    }}>
                      <CompanyLogo company={c} size={26} rounded={7} />
                      {c.name}
                    </button>
                  );
                })}
              </div>

              <div style={{ fontSize: 12, color: 'var(--slate)', padding: '0 4px 12px' }}>
                {company.meta}
              </div>

              <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '0 22px 4px', margin: '0 -22px' }}>
                {company.kpis.map(k => <KPICard key={k.id} k={k} />)}
                <button style={{
                  minWidth: 130, height: 130, borderRadius: 24,
                  border: '1.5px dashed rgba(20,20,19,0.25)', background: 'transparent',
                  cursor: 'pointer', display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--slate)',
                  fontFamily: 'var(--font-sans)',
                }}>
                  <Icon name="plus" size={22} />
                  <span style={{ fontSize: 12, fontWeight: 500 }}>Add KPI</span>
                </button>
              </div>
            </Section>
          </div>
        );

      case 'trip':
        return (
          <div key="trip" style={{ marginBottom: 24 }}>
            <Section eyebrow="Next trip" title=""
              action={<button style={{ background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, color: 'var(--ink)', textDecoration: 'underline' }}>Itinerary</button>}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <FlightCard flight={trip.flight} persona={persona} />
                <AccommodationCard accom={trip.accommodation} />
              </div>
            </Section>
          </div>
        );

      case 'people':
        return (
          <div key="people" style={{ marginBottom: 18 }}>
            <Section eyebrow="My people" title="Needs a touch this week"
              action={<button onClick={() => go('people')} style={{ background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, color: 'var(--ink)', textDecoration: 'underline' }}>All</button>}>
              <div style={{ position: 'relative', height: 200, marginTop: 4 }}>
                <OrbitalArc width={320} height={80} style={{ position: 'absolute', top: 0, left: 0, right: 0 }} />
                <OrbitalArc width={320} height={60} opacity={0.4} style={{ position: 'absolute', top: 110, left: 0, right: 0, transform: 'scaleX(-1)' }} />
                <div style={{ display: 'flex', gap: 14, overflowX: 'auto', paddingBottom: 4,
                  position: 'absolute', inset: 0, alignItems: 'center', paddingTop: 30 }}>
                  {ringPeople.map((p, i) => (
                    <div key={p.id} onClick={() => go('person', { id: p.id })}
                      style={{ flexShrink: 0, width: 130, cursor: 'pointer',
                        transform: i % 2 === 0 ? 'translateY(8px)' : 'translateY(-12px)' }}>
                      <div style={{ position: 'relative', width: 100, height: 100, margin: '0 auto' }}>
                        <Avatar initials={p.initials} tint={p.tint} size={100} photo={p.photo} />
                        <div style={{ position: 'absolute', bottom: -4, right: -4 }}>
                          <SatelliteCTA size={32} icon="arrow-up-right" />
                        </div>
                      </div>
                      <div style={{ marginTop: 10, textAlign: 'center', fontSize: 13, fontWeight: 500, letterSpacing: '-0.01em' }}>
                        {p.name.split(' ')[0]}
                      </div>
                      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--slate)' }}>{p.last}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Section>
          </div>
        );

      case 'agenda':
        return (
          <div key="agenda" style={{ marginBottom: 18 }}>
            <Section eyebrow="Today" title="Your day"
              action={<button onClick={() => go('meetings')} style={{ background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, color: 'var(--ink)', textDecoration: 'underline' }}>All</button>}>
              <Card style={{ padding: '4px 20px' }}>
                {meetings.slice(0, 4).map((m, i) => (
                  <Row key={m.id} divider={i < 3}
                    leading={<div style={{ width: 56, textAlign: 'left' }}>
                      <div style={{ fontSize: 15, fontWeight: 500, color: m.status === 'done' ? 'var(--slate)' : 'var(--ink)' }}>{m.time}</div>
                      <div style={{ fontSize: 11, color: 'var(--slate)' }}>{m.duration}</div>
                    </div>}
                    title={<span style={{ color: m.status === 'done' ? 'var(--slate)' : 'var(--ink)', textDecoration: m.status === 'done' ? 'line-through' : 'none' }}>{m.title}</span>}
                    subtitle={`${m.location} · ${m.status === 'done' ? 'done' : m.when}`}
                    trailing={<Icon name="chevron-right" size={18} color="var(--slate)" />}
                    onClick={() => go(m.status === 'done' ? 'recap' : 'brief', { id: m.id })}
                  />
                ))}
              </Card>
            </Section>
          </div>
        );

      case 'todos':
        return (
          <div key="todos" style={{ marginBottom: 18 }}>
            <Section eyebrow="Follow-up" title="What you owe the room"
              action={<button onClick={() => go('tasks')} style={{ background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, color: 'var(--ink)', textDecoration: 'underline' }}>All</button>}>
              <Card style={{ padding: '4px 20px' }}>
                {todos.map((t, i) => (
                  <Row key={t.id} divider={i < todos.length - 1}
                    leading={<div style={{ width: 28, height: 28, borderRadius: '50%', border: '1.5px solid var(--ink)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Dot tone={t.due.includes('Overdue') ? 'high' : 'med'} size={8} />
                    </div>}
                    title={t.body}
                    subtitle={`${t.from} · ${t.due}`}
                    trailing={<Icon name="arrow-up-right" size={18} color="var(--slate)" />}
                    onClick={() => go('tasks')}
                  />
                ))}
              </Card>
            </Section>
          </div>
        );

      case 'agents':
        return (
          <div key="agents" style={{ marginBottom: 18 }}>
            <Section eyebrow="Agents" title="Running for you"
              action={<button onClick={() => go('agents')} style={{ background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 14, color: 'var(--ink)', textDecoration: 'underline' }}>All</button>}>
              <div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 22px 4px', margin: '0 -22px' }}>
                {data.agents[persona].slice(0, 3).map(a => (
                  <Card key={a.id} onClick={() => go('agent-chat', { id: a.id })}
                    style={{ minWidth: 260, padding: 18 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                      <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--ink)', color: 'var(--canvas)',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Icon name="sparkles" size={18} color="var(--canvas)" />
                      </div>
                      <Chip tone="success"><Dot tone="success" size={6} /> Live</Chip>
                    </div>
                    <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 4 }}>{a.name}</div>
                    <div style={{ fontSize: 13, color: 'var(--slate)', lineHeight: 1.35, minHeight: 54 }}>{a.role}</div>
                    <div style={{ marginTop: 14, fontSize: 11, color: 'var(--slate)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                      {a.skills} skills · {a.runs}
                    </div>
                  </Card>
                ))}
              </div>
            </Section>
          </div>
        );

      case 'notifs':
        return (
          <div key="notifs" style={{ marginBottom: 18 }}>
            <Section eyebrow="Signal, not noise" title="">
              <Card style={{ padding: '4px 20px' }}>
                {notifs.map((n, i) => (
                  <Row key={n.id} divider={i < notifs.length - 1}
                    leading={<Dot tone={n.signal} size={10} />}
                    title={n.body}
                    subtitle={n.when}
                    onClick={() => go('notifications')}
                  />
                ))}
              </Card>
            </Section>
          </div>
        );

      default: return null;
    }
  };

  return (
    <Screen>
      {/* Greeting block */}
      <div style={{ padding: '10px 22px 5px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <Eyebrow>{data.today}</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <button onClick={() => setSheetOpen(true)} title="Orchestrator" style={{
              position: 'relative', width: 40, height: 40, borderRadius: '50%',
              background: 'transparent', border: 'none', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="layers" size={22} />
            </button>
            <button onClick={() => go('notifications')} style={{
              position: 'relative', width: 40, height: 40, borderRadius: '50%',
              background: 'transparent', border: 'none', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="bell" size={22} />
              <Dot tone="high" size={8} style={{ position: 'absolute', top: 8, right: 8 }} />
            </button>
          </div>
        </div>
        <h1 style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0 }}>
          {u.greeting}.
        </h1>
        <p style={{ marginTop: 10, fontSize: 16, color: 'var(--slate)', maxWidth: 320, lineHeight: 1.45 }}>
          {u.contextLine}.
        </p>
      </div>

      {order.map(k => renderModule(k))}

      <div style={{ height: 24 }} />

      <OrchestratorSheet open={sheetOpen} onClose={() => setSheetOpen(false)}
        enabled={enabled} setEnabled={setEnabled}
        order={order} setOrder={setOrder}
        modules={HOME_MODULES} />
    </Screen>
  );
}

// ─────────────────────────────────────────────────────────────
// KPI card
// ─────────────────────────────────────────────────────────────
function KPICard({ k }) {
  const trendColor = {
    up: 'var(--success)',
    down: 'var(--danger)',
    'down-good': 'var(--success)',
    flat: 'var(--slate)',
  }[k.trend] || 'var(--slate)';
  const trendIcon = {
    up: 'trending-up', down: 'trending-down',
    'down-good': 'trending-down', flat: 'minus',
  }[k.trend] || 'minus';

  return (
    <div style={{
      minWidth: 150, padding: 18, borderRadius: 24,
      background: 'var(--canvas-lifted)', display: 'flex', flexDirection: 'column',
      justifyContent: 'space-between', gap: 14,
    }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--slate)' }}>{k.label}</div>
      <div>
        <div style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1, color: 'var(--ink)' }}>
          {k.value}
        </div>
        <div style={{ marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 12, color: trendColor, fontWeight: 500 }}>
          <Icon name={trendIcon} size={14} color={trendColor} />
          <span>{k.delta}</span>
          <span style={{ color: 'var(--slate)', fontWeight: 450 }}>· {k.period}</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FlightCard — private jet headline, Qatar-airways inspired
// Compact summary by default; expand to reveal full metadata.
// ─────────────────────────────────────────────────────────────
function FlightCard({ flight, persona }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderRadius: 24, overflow: 'hidden', background: 'var(--canvas-lifted)',
      boxShadow: 'var(--shadow-2)' }}>
      {/* Hero — fixed compact height, hero image + airport codes */}
      <button onClick={() => setOpen(o => !o)} style={{
        all: 'unset', cursor: 'pointer', display: 'block', width: '100%',
      }}>
        <div style={{ position: 'relative', height: 160, background: '#2a2624',
          backgroundImage: `url(${flight.heroImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
          <div style={{ position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(20,20,19,0.0) 30%, rgba(20,20,19,0.85) 100%)' }} />
          <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 6 }}>
            <Chip tone="success" style={{ background: 'rgba(252,251,250,0.92)', color: 'var(--ink)' }}>
              <Dot tone="success" size={6} /> {flight.status}
            </Chip>
            {persona === 'principal' && (
              <Chip style={{ background: 'rgba(252,251,250,0.92)', color: 'var(--ink)' }}>Private jet</Chip>
            )}
          </div>
          <div style={{ position: 'absolute', top: 14, right: 14,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 32, height: 32, borderRadius: '50%',
            background: 'rgba(252,251,250,0.92)' }}>
            <Icon name={open ? 'chevron-up' : 'chevron-down'} size={16} color="var(--ink)" />
          </div>
          <div style={{ position: 'absolute', bottom: 16, left: 18, right: 18,
            display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', color: 'var(--canvas)' }}>
            <div>
              <div style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1 }}>{flight.from.code}</div>
              <div style={{ fontSize: 11, opacity: 0.8, marginTop: 4 }}>{flight.from.time} · {flight.from.date}</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '0 12px' }}>
              <Icon name="plane" size={16} color="var(--canvas)" />
              <div style={{ fontSize: 10, opacity: 0.7, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{flight.duration}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1 }}>{flight.to.code}</div>
              <div style={{ fontSize: 11, opacity: 0.8, marginTop: 4 }}>{flight.to.time} · {flight.to.date}</div>
            </div>
          </div>
        </div>
      </button>

      {/* Expanded meta */}
      {open && (
        <div style={{ padding: '16px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
          borderTop: '1px solid rgba(20,20,19,0.06)' }}>
          <KV label="Aircraft" value={`${flight.aircraft} · ${flight.tail}`} />
          <KV label="Operator" value={flight.operator} />
          <KV label="Terminal · FBO" value={flight.fbo} />
          <KV label="Booking" value={flight.bookingRef} />
          {flight.crew && flight.crew !== '—' && <KV label="Crew" value={flight.crew} />}
          {flight.catering && <KV label="On board" value={flight.catering} />}
        </div>
      )}
    </div>
  );
}

function KV({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--slate)' }}>{label}</div>
      <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4, lineHeight: 1.3 }}>{value}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// AccommodationCard — compact summary + expandable meta
// ─────────────────────────────────────────────────────────────
function AccommodationCard({ accom }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderRadius: 24, overflow: 'hidden', background: 'var(--canvas-lifted)',
      boxShadow: 'var(--shadow-2)' }}>
      <button onClick={() => setOpen(o => !o)} style={{
        all: 'unset', cursor: 'pointer', display: 'block', width: '100%',
      }}>
        <div style={{ display: 'flex', alignItems: 'stretch', height: 110 }}>
          <div style={{ width: 130, flexShrink: 0,
            backgroundImage: `url(${accom.heroImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{ flex: 1, padding: '14px 16px', display: 'flex', flexDirection: 'column',
            justifyContent: 'space-between', position: 'relative' }}>
            <div>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
                textTransform: 'uppercase', color: 'var(--slate)' }}>
                {accom.kind}
              </div>
              <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.02em',
                lineHeight: 1.15, marginTop: 4 }}>{accom.name}</div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--slate)', lineHeight: 1.35 }}>
              {accom.checkIn} → {accom.checkOut.split(' · ')[0]} · {accom.nights}n
            </div>
            <div style={{ position: 'absolute', top: 14, right: 14,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 28, height: 28, borderRadius: '50%', background: 'var(--canvas-whisper)' }}>
              <Icon name={open ? 'chevron-up' : 'chevron-down'} size={14} />
            </div>
          </div>
        </div>
      </button>

      {open && (
        <div style={{ padding: '14px 18px',
          borderTop: '1px solid rgba(20,20,19,0.06)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <KV label="Check-in" value={accom.checkIn} />
            <KV label="Check-out" value={accom.checkOut} />
            <KV label="Room" value={accom.room} />
            <KV label="Confirmation" value={accom.confirmation} />
            <div style={{ gridColumn: '1 / -1' }}><KV label="Address" value={accom.address} /></div>
          </div>
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontSize: 11, color: 'var(--slate)' }}>Concierge · {accom.concierge}</div>
            <button style={{ padding: '6px 12px', borderRadius: 999,
              border: '1.5px solid var(--ink)', background: 'transparent', cursor: 'pointer',
              fontSize: 11, fontWeight: 500, fontFamily: 'var(--font-sans)' }}>
              Message
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MeetingsScreen — full agenda list
// ─────────────────────────────────────────────────────────────
function MeetingsScreen({ persona, go }) {
  const meetings = D().meetings[persona];
  const [filter, setFilter] = React.useState('today');
  const filters = [
    { key: 'today', label: 'Today' },
    { key: 'week', label: 'This week' },
    { key: 'past', label: 'Past' },
  ];
  return (
    <Screen>
      <Header large title="Meetings" eyebrow={D().today}
        trailing={<button style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--ink)', color: 'var(--canvas)',
          border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="plus" size={20} color="var(--canvas)" />
        </button>} />

      <div style={{ padding: '14px 22px 8px', display: 'flex', gap: 8, overflowX: 'auto' }}>
        {filters.map(f => (
          <button key={f.key} onClick={() => setFilter(f.key)} style={{
            padding: '8px 16px', borderRadius: 999,
            border: filter === f.key ? '1.5px solid var(--ink)' : '1.5px solid rgba(20,20,19,0.18)',
            background: filter === f.key ? 'var(--ink)' : 'transparent',
            color: filter === f.key ? 'var(--canvas)' : 'var(--ink)',
            fontSize: 13, fontWeight: 500, cursor: 'pointer', whiteSpace: 'nowrap',
          }}>{f.label}</button>
        ))}
      </div>

      <div style={{ padding: '8px 22px' }}>
        {meetings.map((m, i) => {
          const past = m.status === 'done';
          return (
            <div key={m.id} onClick={() => go(past ? 'recap' : 'brief', { id: m.id })}
              style={{ display: 'flex', gap: 16, padding: '20px 0',
                borderBottom: i < meetings.length - 1 ? '1px solid rgba(20,20,19,0.08)' : 'none', cursor: 'pointer' }}>
              <div style={{ width: 60, flexShrink: 0 }}>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: past ? 'var(--slate)' : 'var(--ink)' }}>{m.time}</div>
                <div style={{ fontSize: 12, color: 'var(--slate)' }}>{m.duration}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <MeetingKindDot kind={m.kind} />
                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--slate)' }}>
                    {m.kind} · {m.location}
                  </span>
                </div>
                <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em', color: past ? 'var(--slate)' : 'var(--ink)',
                  textDecoration: past ? 'line-through' : 'none', lineHeight: 1.25 }}>
                  {m.title}
                </div>
                {m.participants && (
                  <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <AvatarStack people={m.participants.map(p => ({
                      initials: p.initials, tint: 'var(--ink)',
                      photo: (findPerson(p.name) || findPerson(p.initials) || {}).photo,
                    }))} size={24} />
                    <span style={{ fontSize: 12, color: 'var(--slate)' }}>{past ? 'recap ready' : m.when}</span>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ height: 16 }} />
    </Screen>
  );
}

function MeetingKindDot({ kind }) {
  const map = {
    investor: '#CF4500', board: '#9A3A0A', hiring: '#3860BE',
    interview: '#3860BE', internal: '#1F7A4D', sales: '#F37338',
  };
  return <span style={{ width: 8, height: 8, borderRadius: '50%', background: map[kind] || 'var(--slate)' }} />;
}

// ─────────────────────────────────────────────────────────────
// BriefScreen — pre-meeting one-pager
// ─────────────────────────────────────────────────────────────
function BriefScreen({ persona, go, params }) {
  const data = D();
  const m = data.meetings[persona].find(x => x.id === params?.id) || data.meetings[persona][0];
  if (!m.agenda) {
    // not enough data for this meeting
    return (
      <Screen>
        <Header back={() => go('meetings')} title="Brief" eyebrow={`${m.time} · ${m.location}`} />
        <div style={{ padding: 22 }}>
          <Card>
            <Eyebrow>Coming up</Eyebrow>
            <h2 style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 10 }}>{m.title}</h2>
            <p style={{ marginTop: 12, color: 'var(--slate)' }}>Loop is preparing the brief. It will be ready 30 minutes before the meeting.</p>
            <Button variant="signal" style={{ marginTop: 18 }}>Generate brief now</Button>
          </Card>
        </div>
      </Screen>
    );
  }
  return (
    <Screen padBottom={140}>
      <Header back={() => go('meetings')} title="Brief" eyebrow={`${m.time} · ${m.duration}`}
        trailing={<button style={{ width: 40, height: 40, borderRadius: '50%', background: 'transparent', border: 'none', cursor: 'pointer' }}>
          <Icon name="more-horizontal" size={22} /></button>} />

      <div style={{ padding: '8px 22px 0' }}>
        <Eyebrow>{m.kind} · {m.location}</Eyebrow>
        <h1 style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '10px 0 6px' }}>
          {m.title}
        </h1>
        <div style={{ color: 'var(--slate)', fontSize: 14 }}>{m.when} · prepared by Loop · 3 min read</div>
      </div>

      {/* Participants — circular portraits per design system */}
      <Section title="Who is in the room" style={{ marginTop: 24 }}>
        <div style={{ display: 'flex', gap: 14, overflowX: 'auto', padding: '4px 0 8px', margin: '0 -22px', paddingLeft: 22, paddingRight: 22 }}>
          {m.participants.map((p, i) => {
            const person = findPerson(p.name) || findPerson(p.initials);
            return (
              <div key={i} onClick={() => person && go('person', { id: person.id })}
                style={{ flexShrink: 0, width: 170, cursor: 'pointer' }}>
                <div style={{ position: 'relative', width: 130, height: 130, margin: '0 auto 12px' }}>
                  <Avatar initials={p.initials} tint={i % 2 ? 'var(--ink)' : 'var(--loop-orange)'} size={130}
                    photo={person ? person.photo : undefined} />
                </div>
                <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em', textAlign: 'center' }}>{p.name}</div>
                <div style={{ fontSize: 12, color: 'var(--slate)', textAlign: 'center', marginTop: 2 }}>{p.role}</div>
                <div style={{ fontSize: 11, color: 'var(--loop-orange)', textAlign: 'center', marginTop: 4 }}>{p.last}</div>
              </div>
            );
          })}
        </div>
      </Section>

      {/* Talking points — the principal's edge */}
      <Section eyebrow="Talking points" title="" style={{ marginTop: 22 }}>
        <Card ink style={{ padding: 22 }}>
          {m.talkingPoints.map((tp, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, padding: '12px 0',
              borderBottom: i < m.talkingPoints.length - 1 ? '1px solid rgba(252,251,250,0.12)' : 'none' }}>
              <div style={{ fontSize: 22, fontWeight: 500, lineHeight: 1, color: 'var(--loop-orange-light)', minWidth: 24 }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.45 }}>{tp}</div>
            </div>
          ))}
        </Card>
      </Section>

      {/* Agenda */}
      <Section eyebrow="Agenda" title="" style={{ marginTop: 22 }}>
        <Card style={{ padding: '4px 20px' }}>
          {m.agenda.map((a, i) => (
            <Row key={i} divider={i < m.agenda.length - 1}
              leading={<div style={{ width: 28, fontSize: 13, color: 'var(--slate)', fontWeight: 500 }}>{i + 1}.</div>}
              title={a}
              trailing={null} />
          ))}
        </Card>
      </Section>

      {/* Open threads */}
      <Section eyebrow="Open threads" title="" style={{ marginTop: 22 }}>
        {m.threads.map((t, i) => (
          <Card key={i} style={{ marginBottom: 10 }}>
            <Eyebrow>{t.label}</Eyebrow>
            <div style={{ marginTop: 8, fontSize: 15, lineHeight: 1.45 }}>{t.body}</div>
          </Card>
        ))}
      </Section>

      {/* Files */}
      <Section eyebrow="Linked from your dataroom" title="" style={{ marginTop: 22 }}>
        <Card style={{ padding: '4px 20px' }}>
          {m.files.map((f, i) => (
            <Row key={i} divider={i < m.files.length - 1}
              leading={<div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--canvas-whisper)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="file-text" size={18} /></div>}
              title={f.name} subtitle={f.meta}
              trailing={<Icon name="arrow-up-right" size={18} color="var(--slate)" />} />
          ))}
        </Card>
      </Section>

      <div style={{ height: 100 }} />

      {/* Floating bottom CTA */}
      <div style={{ position: 'sticky', bottom: 12, marginTop: 24, marginLeft: 0, marginRight: 0, display: 'flex', gap: 10 }}>
        <Button variant="secondary" style={{ flex: 1 }}>Snooze</Button>
        <Button variant="signal" full onClick={() => go('live', { id: m.id })} style={{ flex: 2 }}
          icon={<Icon name="video" size={16} color="var(--white)" />}>
          Join · Loop will capture
        </Button>
      </div>
    </Screen>
  );
}

// ─────────────────────────────────────────────────────────────
// LiveMeetingScreen — capture + live notes
// ─────────────────────────────────────────────────────────────
function LiveMeetingScreen({ persona, go, params }) {
  const data = D();
  const m = data.meetings[persona].find(x => x.id === params?.id) || data.meetings[persona][0];
  const [elapsed, setElapsed] = React.useState(247); // 4:07
  const [notes, setNotes] = React.useState([]);
  const [tab, setTab] = React.useState('notes');

  React.useEffect(() => {
    const id = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    // Stream in fake notes
    const seed = persona === 'principal' ? [
      { t: 0, kind: 'decision', who: 'Roelof', body: 'Series C target post-money: $420M. Comfortable with $400M floor.' },
      { t: 4, kind: 'action', who: 'You', body: 'Send updated cap table by end of day.' },
      { t: 9, kind: 'topic', who: 'Jess', body: 'Two board candidates in the next ten days — operator profile, no investors.' },
      { t: 14, kind: 'decision', who: 'Room', body: 'Timeline target: signed term sheet by mid-August.' },
      { t: 19, kind: 'action', who: 'Roelof', body: 'Roelof to send a model term sheet on Friday.' },
    ] : [
      { t: 0, kind: 'topic', who: 'Mae', body: 'Distributed inventory — walked the room through Stripe Issuing primitives.' },
      { t: 5, kind: 'decision', who: 'Panel', body: 'Strong technical depth. 8/10 against rubric.' },
      { t: 10, kind: 'risk', who: 'Devon', body: 'Some hesitation on cross-functional conflict resolution.' },
      { t: 15, kind: 'action', who: 'You', body: 'Share EU GM context doc and schedule final with Aurélien.' },
      { t: 20, kind: 'topic', who: 'Mae', body: 'Comp expectation: $340 base, 1.0% equity — open to negotiate.' },
    ];
    let i = 0;
    const id = setInterval(() => {
      if (i >= seed.length) return clearInterval(id);
      setNotes(n => [...n, seed[i]]); i++;
    }, 1800);
    return () => clearInterval(id);
  }, [persona]);

  const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;
  const kindMeta = {
    decision: { tone: 'ink', label: 'Decision', icon: 'check-circle' },
    action: { tone: 'signal', label: 'Action', icon: 'arrow-right-circle' },
    topic: { tone: 'default', label: 'Topic', icon: 'message-square' },
    risk: { tone: 'warning', label: 'Risk', icon: 'alert-triangle' },
  };

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: 'var(--canvas-lifted)' }}>
      {/* Live header */}
      <div style={{ padding: '8px 22px 18px', background: 'var(--ink)', color: 'var(--canvas)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button onClick={() => go('meetings')} style={{ background: 'transparent', border: 'none', cursor: 'pointer',
            color: 'var(--canvas)', display: 'inline-flex', alignItems: 'center', gap: 6, padding: 8, marginLeft: -8 }}>
            <Icon name="chevron-left" size={22} color="var(--canvas)" /></button>
          <Chip tone="signal"><Dot tone="high" size={6} /> Recording</Chip>
          <button onClick={() => go('recap', { id: m.id })} style={{ background: 'transparent', border: 'none', cursor: 'pointer',
            color: 'var(--canvas)', fontSize: 13, fontWeight: 500 }}>End ·</button>
        </div>
        <div style={{ marginTop: 12 }}>
          <Eyebrow style={{ color: 'var(--canvas)' }}>{m.kind} · {m.location}</Eyebrow>
          <h2 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 8, lineHeight: 1.2 }}>{m.title}</h2>
          <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <AvatarStack people={m.participants?.map(p => ({
              initials: p.initials, tint: '#CF4500',
              photo: (findPerson(p.name) || findPerson(p.initials) || {}).photo,
            })) || []} size={28} />
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 15, fontWeight: 500 }}>{fmt(elapsed)}</div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', padding: '8px 22px 0', gap: 16, borderBottom: '1px solid rgba(20,20,19,0.08)' }}>
        {['notes', 'transcript', 'people'].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            padding: '12px 0', fontSize: 14, fontWeight: 500,
            color: tab === t ? 'var(--ink)' : 'var(--slate)',
            borderBottom: tab === t ? '2px solid var(--ink)' : '2px solid transparent',
            textTransform: 'capitalize',
          }}>{t}</button>
        ))}
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 22px 200px' }}>
        {tab === 'notes' && notes.map((n, i) => {
          const meta = kindMeta[n.kind];
          return (
            <div key={i} style={{ padding: '14px 0', borderBottom: '1px solid rgba(20,20,19,0.06)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <Chip tone={meta.tone}>{meta.label}</Chip>
                <span style={{ fontSize: 12, color: 'var(--slate)' }}>{n.who}</span>
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.45 }}>{n.body}</div>
            </div>
          );
        })}
        {tab === 'notes' && notes.length === 0 && (
          <div style={{ color: 'var(--slate)', padding: 14 }}>
            <Icon name="ear" size={18} /> Listening…
          </div>
        )}
        {tab === 'transcript' && (
          <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--graphite)' }}>
            <p style={{ marginBottom: 12 }}><strong>{m.participants[0].name}:</strong> Thanks for making time. We've been tracking the numbers — Q1 was strong.</p>
            <p style={{ marginBottom: 12 }}><strong>You:</strong> 41% QoQ, came in ahead of plan. Burn is steady. Runway sits at 22 months.</p>
            <p style={{ marginBottom: 12 }}><strong>{m.participants[0].name}:</strong> Good. On the Series C — I want to push for a September close. Founders Fund is circling.</p>
            <p style={{ marginBottom: 12 }}><strong>You:</strong> I'd like two more weeks on diligence before we commit a date.</p>
            <p style={{ marginBottom: 12, color: 'var(--loop-orange)' }}>· Loop captured this as a decision pending. ·</p>
          </div>
        )}
        {tab === 'people' && (
          <div>
            {m.participants.map((p, i) => {
              const person = findPerson(p.name) || findPerson(p.initials);
              return (
                <Card key={i} style={{ marginBottom: 10 }} onClick={() => person && go('person', { id: person.id })}>
                  <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                    <Avatar initials={p.initials} tint={i % 2 ? 'var(--ink)' : 'var(--loop-orange)'} size={52}
                      photo={person ? person.photo : undefined} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 500, fontSize: 15 }}>{p.name}</div>
                      <div style={{ fontSize: 12, color: 'var(--slate)' }}>{p.role}</div>
                      <div style={{ fontSize: 12, color: 'var(--loop-orange)', marginTop: 2 }}>{p.last}</div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        )}
      </div>

      {/* Floating control deck */}
      <div style={{ position: 'absolute', left: 22, right: 22, bottom: 28,
        background: 'var(--ink)', borderRadius: 30, padding: 10,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        boxShadow: '0 20px 40px rgba(0,0,0,0.25)', zIndex: 40 }}>
        <button style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(255,255,255,0.08)',
          border: 'none', color: 'var(--canvas)', cursor: 'pointer' }}>
          <Icon name="mic" size={20} color="var(--canvas)" />
        </button>
        <div style={{ color: 'var(--canvas)', fontSize: 13, fontWeight: 500 }}>Tap to add note ·</div>
        <button onClick={() => go('recap', { id: m.id })}
          style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--loop-orange)',
            border: 'none', color: 'var(--white)', cursor: 'pointer' }}>
          <Icon name="square" size={16} color="var(--white)" />
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// RecapScreen — post-meeting summary
// ─────────────────────────────────────────────────────────────
function RecapScreen({ persona, go, params }) {
  const data = D();
  const all = data.meetings[persona];
  const m = all.find(x => x.id === params?.id) || all.find(x => x.status === 'done') || all[0];

  const recap = persona === 'principal' ? {
    summary: 'Sequoia is anchored on a $420M post and a 6-week close. Roelof will send a model term sheet Friday; Jess will surface two operator-profile board candidates inside 10 days. You did not commit to a September close — that\'s yours to decide by Tuesday.',
    decisions: [
      'Series C target post-money: $420M, floor $400M.',
      'Sequoia to lead. Roelof to send draft term sheet Friday.',
      'Timeline: signed by mid-August. Aurélien to confirm by Tuesday.',
    ],
    actions: [
      { who: 'You', body: 'Send updated cap table to Roelof — by today 18:00.', status: 'open' },
      { who: 'You', body: 'Reply with September close decision — by Tuesday.', status: 'open' },
      { who: 'Roelof', body: 'Send model term sheet — by Friday.', status: 'tracked' },
      { who: 'Jess', body: 'Surface 2 board candidates — within 10 days.', status: 'tracked' },
    ],
    sentiment: 'Warm. Roelof is leaning in. Jess is curious. Neither pushed on dilution.',
    crmWrite: 'Salesforce account "Sequoia · Series C" updated with stage, next step, deal size, and your sentiment read.',
  } : {
    summary: 'Mae cleared the technical bar (8/10 systems design). Soft on cross-functional conflict — Devon flagged hesitation. She is at final stage at Anthropic. You need to move within 48 hours or lose her. Comp ask sits inside our band.',
    decisions: [
      'Mae advances to final round with Aurélien.',
      'Comp framework: $340 base + 1.0% equity is acceptable starting point.',
      'Decision-by date: Monday EOD.',
    ],
    actions: [
      { who: 'You', body: 'Send EU GM context doc to Mae — by 09:30.', status: 'open' },
      { who: 'You', body: 'Schedule final with Aurélien — by EOD today.', status: 'open' },
      { who: 'Devon', body: 'Add round 2 notes to Greenhouse — by EOD.', status: 'tracked' },
    ],
    sentiment: 'Warm — Mae is bought into the mission. Comp negotiation will be friendly.',
    crmWrite: 'Greenhouse candidate "Mae Chen" moved to Final Round. Scorecard v3 attached.',
  };

  return (
    <Screen padBottom={130}>
      <Header back={() => go('meetings')} title="Recap" eyebrow={`${m.time} · ${m.duration}`}
        trailing={<button style={{ width: 40, height: 40, borderRadius: '50%', background: 'transparent', border: 'none', cursor: 'pointer' }}>
          <Icon name="share" size={20} /></button>} />

      <div style={{ padding: '8px 22px 0' }}>
        <Chip tone="success"><Dot tone="success" size={6} /> Done</Chip>
        <h1 style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.15, margin: '14px 0 6px' }}>
          {m.title}
        </h1>
        <div style={{ color: 'var(--slate)', fontSize: 13 }}>Captured by Loop · 24-minute call · 4 decisions · 7 actions</div>
      </div>

      {/* Executive summary */}
      <Section eyebrow="Summary" title="" style={{ marginTop: 22 }}>
        <Card style={{ padding: 22 }}>
          <p style={{ fontSize: 16, lineHeight: 1.5, margin: 0 }}>{recap.summary}</p>
        </Card>
      </Section>

      {/* Decisions */}
      <Section eyebrow="Decisions made" title="" style={{ marginTop: 22 }}>
        <Card>
          {recap.decisions.map((d, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, padding: '12px 0',
              borderBottom: i < recap.decisions.length - 1 ? '1px solid rgba(20,20,19,0.06)' : 'none' }}>
              <Icon name="check-circle" size={20} color="var(--success)" />
              <div style={{ fontSize: 14, lineHeight: 1.4 }}>{d}</div>
            </div>
          ))}
        </Card>
      </Section>

      {/* Actions assigned */}
      <Section eyebrow="Action items" title="Assigned" style={{ marginTop: 22 }}>
        <Card style={{ padding: '4px 20px' }}>
          {recap.actions.map((a, i) => (
            <Row key={i} divider={i < recap.actions.length - 1}
              leading={<div style={{ width: 28, height: 28, borderRadius: '50%',
                border: a.status === 'open' ? '1.5px solid var(--ink)' : '1.5px solid var(--slate)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: a.status === 'open' ? 'var(--ink)' : 'var(--slate)' }}>
                  {a.who === 'You' ? 'You' : a.who[0]}
                </span>
              </div>}
              title={a.body}
              subtitle={a.who === 'You' ? 'on your to-do list' : `tracked on ${a.who}`}
              trailing={<Chip tone={a.status === 'open' ? 'warning' : 'muted'}>{a.status}</Chip>}
            />
          ))}
        </Card>
      </Section>

      {/* Sentiment */}
      <Section eyebrow="Sentiment read" title="" style={{ marginTop: 22 }}>
        <Card style={{ padding: 22, background: 'var(--canvas-whisper)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--loop-orange-light)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="activity" size={24} color="var(--white)" />
            </div>
            <div style={{ flex: 1, fontSize: 14, lineHeight: 1.4 }}>{recap.sentiment}</div>
          </div>
        </Card>
      </Section>

      {/* CRM writeback */}
      <Section eyebrow="Written back" title="" style={{ marginTop: 22 }}>
        <Card>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Chip tone="success"><Dot tone="success" size={6} /> Synced</Chip>
            <span style={{ fontSize: 12, color: 'var(--slate)' }}>2 minutes ago</span>
          </div>
          <div style={{ fontSize: 14, lineHeight: 1.45 }}>{recap.crmWrite}</div>
        </Card>
      </Section>

      <div style={{ height: 110 }} />

      <div style={{ position: 'sticky', bottom: 12, marginTop: 24, marginLeft: 0, marginRight: 0, display: 'flex', gap: 10 }}>
        <Button variant="secondary" style={{ flex: 1 }}>Edit</Button>
        <Button variant="primary" full style={{ flex: 2 }}
          icon={<Icon name="send" size={16} color="var(--canvas)" />}>
          Send to room
        </Button>
      </div>
    </Screen>
  );
}

Object.assign(window, { HomeScreen, MeetingsScreen, BriefScreen, LiveMeetingScreen, RecapScreen });