// AI Planner — Alignment tab + Weekly Planner tab + Morning Briefings tab

// ─── TAB 2: GOAL ALIGNMENT ─────────────────────────────────────
function GoalAlignment() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 22, alignItems: 'start' }}>
      <div className="card" style={{ padding: 22 }}>
        <div style={{ fontSize: 10.5, letterSpacing: 0.08, textTransform: 'uppercase',
          fontWeight: 700, color: 'var(--brand-700)' }}>Goal tree</div>
        <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3, marginTop: 4, marginBottom: 4 }}>
          1-year goals → Rocks → owners
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--ink-600)', marginBottom: 18 }}>
          AI laddered every Rock to a 1-yr goal and flagged gaps.
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {VISION.oneYear.goals.map(g => {
            const rocks = ROCKS.filter(r => ALIGNMENT.find(a => a.rockId === r.id && a.goalId === g.id));
            const gOwner = PEOPLE.find(p => p.id === g.owner);
            return (
              <div key={g.id} style={{
                padding: '14px 16px', borderRadius: 10, border: '1px solid var(--line)',
                background: 'var(--card-alt)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: rocks.length ? 10 : 0 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8, flexShrink: 0,
                    background: 'var(--brand-100)', color: 'var(--brand-700)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}><Icon.target/></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.3 }}>{g.title}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 3 }}>
                      Owner: {gOwner.name}
                    </div>
                  </div>
                  <span style={{
                    fontSize: 10.5, fontWeight: 700, letterSpacing: 0.04, textTransform: 'uppercase',
                    padding: '3px 8px', borderRadius: 5,
                    background: rocks.length ? 'var(--good-bg)' : 'var(--warn-bg)',
                    color: rocks.length ? 'var(--good)' : 'var(--warn)',
                  }}>{rocks.length} rock{rocks.length === 1 ? '' : 's'}</span>
                </div>
                {rocks.length === 0 && (
                  <div style={{ fontSize: 12, color: 'var(--warn)', fontStyle: 'italic',
                    paddingLeft: 38, marginTop: 4 }}>
                    No Rock yet — AI will suggest one.
                  </div>
                )}
                {rocks.map(r => {
                  const a = ALIGNMENT.find(x => x.rockId === r.id);
                  const owner = PEOPLE.find(p => p.id === r.ownerId);
                  return (
                    <div key={r.id} style={{
                      display: 'flex', alignItems: 'center', gap: 10, marginTop: 8,
                      marginLeft: 38, padding: '10px 12px', borderRadius: 8,
                      background: 'var(--card)', border: '1px solid var(--line)',
                      position: 'relative',
                    }}>
                      <div style={{
                        position: 'absolute', left: -20, top: '50%', width: 20, height: 1,
                        background: 'var(--line-strong)',
                      }}/>
                      <Avatar person={owner} size={22}/>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-900)' }}>{r.title}</div>
                        <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2 }}>
                          {owner.name} · {r.pct}% complete · due {r.due.slice(5)}
                        </div>
                      </div>
                      <div style={{
                        padding: '3px 8px', borderRadius: 5, fontSize: 10,
                        fontWeight: 700, letterSpacing: 0.04, textTransform: 'uppercase',
                        background: r.status === 'on-track' ? 'var(--good-bg)' :
                          r.status === 'at-risk' ? 'var(--warn-bg)' : 'var(--bad-bg)',
                        color: r.status === 'on-track' ? 'var(--good)' :
                          r.status === 'at-risk' ? 'var(--warn)' : 'var(--bad)',
                      }}>{r.status}</div>
                      <div style={{
                        padding: '3px 8px', borderRadius: 5, fontSize: 10.5, fontWeight: 700,
                        background: 'var(--brand-50)', color: 'var(--brand-700)',
                        display: 'inline-flex', alignItems: 'center', gap: 4,
                      }} title={a.rationale}>
                        <Icon.sparkle/>{Math.round(a.confidence * 100)}%
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })}
          {/* Orphan rocks */}
          {ROCKS.filter(r => !ALIGNMENT.find(a => a.rockId === r.id && a.goalId)).map(r => {
            const a = ALIGNMENT.find(x => x.rockId === r.id);
            const owner = PEOPLE.find(p => p.id === r.ownerId);
            return (
              <div key={r.id} style={{
                padding: '12px 14px', borderRadius: 10,
                border: '1px dashed var(--warn)', background: 'var(--warn-bg)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon.alert/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-900)' }}>
                      Orphan Rock: "{r.title}"
                    </div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-700)', marginTop: 3, lineHeight: 1.45 }}>
                      {a ? a.rationale : 'Not laddered to any 1-year goal.'}
                    </div>
                  </div>
                  <Avatar person={owner} size={22}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* AI-suggested Rocks */}
      <div style={{ position: 'sticky', top: 80, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card" style={{ padding: 16,
          background: 'linear-gradient(160deg, var(--brand-50), var(--card))' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
            <span style={{ width: 24, height: 24, borderRadius: 6,
              background: 'linear-gradient(135deg, var(--brand-700), var(--brand-500))', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon.sparkle/></span>
            <div style={{ fontSize: 13, fontWeight: 700 }}>AI-suggested Rocks</div>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-600)', lineHeight: 1.5, marginBottom: 12 }}>
            Based on your 1-yr plan and current gaps.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {AI_ROCK_SUGGESTIONS.map(s => {
              const owner = PEOPLE.find(p => p.id === s.ownerId);
              const goal = VISION.oneYear.goals.find(g => g.id === s.goalId);
              return (
                <div key={s.id} style={{
                  padding: 12, borderRadius: 9, background: 'var(--card)',
                  border: '1px solid var(--brand-300)',
                }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.35 }}>
                    {s.title}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6,
                    fontSize: 10.5, color: 'var(--ink-500)' }}>
                    <Avatar person={owner} size={14}/>{owner.name}
                    <span>·</span>
                    <span>+{s.estPct}% toward {goal ? `Goal #${VISION.oneYear.goals.indexOf(goal) + 1}` : 'new measurable'}</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 8, lineHeight: 1.5 }}>
                    {s.rationale}
                  </div>
                  {s.isNewMeasurable && (
                    <div style={{ fontSize: 10.5, color: 'var(--warn)', fontWeight: 700,
                      letterSpacing: 0.04, textTransform: 'uppercase', marginTop: 6 }}>
                      Requires new measurable
                    </div>
                  )}
                  <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                    <button style={{
                      background: 'var(--brand-700)', color: '#fff', border: 'none',
                      fontSize: 11, padding: '5px 10px', borderRadius: 6, fontWeight: 600,
                    }}>Accept</button>
                    <button style={{
                      background: 'var(--card)', color: 'var(--ink-700)',
                      border: '1px solid var(--line-strong)', fontSize: 11,
                      padding: '5px 10px', borderRadius: 6, fontWeight: 500,
                    }}>Edit</button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── TAB 3: WEEKLY PLANNER ─────────────────────────────────────
const DAYS = [
  { k: 'mon', label: 'Monday',    short: 'Mon' },
  { k: 'tue', label: 'Tuesday',   short: 'Tue' },
  { k: 'wed', label: 'Wednesday', short: 'Wed' },
  { k: 'thu', label: 'Thursday',  short: 'Thu' },
  { k: 'fri', label: 'Friday',    short: 'Fri' },
];

function WeeklyPlanner({ persona }) {
  const [who, setWho] = React.useState(persona.id);
  const person = PEOPLE.find(p => p.id === who);
  const priorities = WEEKLY_PRIORITIES[who] || [];
  const totalMin = priorities.reduce((s, p) => s + p.est, 0);
  const doneCount = priorities.filter(p => p.done).length;

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 22, alignItems: 'start' }}>
      <div className="card" style={{ padding: 22 }}>
        {/* Person switcher */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18,
          overflowX: 'auto', paddingBottom: 4 }}>
          {PEOPLE.map(p => (
            <button key={p.id} onClick={() => setWho(p.id)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '6px 11px 6px 6px', borderRadius: 99,
              background: who === p.id ? 'var(--brand-100)' : 'var(--card-alt)',
              border: '1px solid ' + (who === p.id ? 'var(--brand-300)' : 'var(--line)'),
              color: who === p.id ? 'var(--brand-700)' : 'var(--ink-700)',
              fontSize: 12, fontWeight: 600, cursor: 'pointer', flexShrink: 0,
            }}>
              <Avatar person={p} size={20}/>{p.name.split(' ')[0]}
            </button>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <Avatar person={person} size={44}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: 0.06, textTransform: 'uppercase', fontWeight: 700 }}>
              Week {window.NORWILL_DATA.weekOfQuarter()} of {window.NORWILL_DATA.currentQuarter().label}
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3, marginTop: 2 }}>
              {person.name}’s weekly plan
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink-900)' }}>{doneCount}/{priorities.length}</div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: 0.04, textTransform: 'uppercase', fontWeight: 600 }}>Done</div>
            </div>
            <div style={{ width: 1, background: 'var(--line)' }}/>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink-900)' }}>{Math.round(totalMin / 60 * 10) / 10}h</div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: 0.04, textTransform: 'uppercase', fontWeight: 600 }}>Committed</div>
            </div>
          </div>
        </div>

        {/* Day grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
          {DAYS.map(d => {
            const items = priorities.filter(p => p.day === d.k);
            return (
              <div key={d.k} style={{
                background: 'var(--card-alt)', border: '1px solid var(--line)',
                borderRadius: 9, padding: 10, minHeight: 200,
              }}>
                <div style={{ fontSize: 11, color: 'var(--ink-500)', fontWeight: 700,
                  letterSpacing: 0.06, textTransform: 'uppercase', marginBottom: 8 }}>
                  {d.label}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                  {items.map(it => {
                    const rock = it.rockId ? ROCKS.find(r => r.id === it.rockId) : null;
                    return (
                      <div key={it.id} style={{
                        padding: 9, borderRadius: 7,
                        background: it.done ? 'var(--good-bg)' : 'var(--card)',
                        border: '1px solid ' + (it.done ? 'var(--good)' : 'var(--line)'),
                        opacity: it.done ? 0.85 : 1,
                      }}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
                          <div style={{
                            width: 14, height: 14, borderRadius: 3, flexShrink: 0, marginTop: 2,
                            border: '1.5px solid ' + (it.done ? 'var(--good)' : 'var(--ink-300)'),
                            background: it.done ? 'var(--good)' : 'transparent',
                            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                          }}>{it.done && <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>}</div>
                          <div style={{ fontSize: 11.5, lineHeight: 1.35, color: 'var(--ink-800)',
                            textDecoration: it.done ? 'line-through' : 'none', flex: 1 }}>
                            {it.title}
                          </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 6,
                          fontSize: 10, color: 'var(--ink-500)', flexWrap: 'wrap' }}>
                          <span style={{ fontWeight: 600 }}>{it.est}m</span>
                          {it.mustDo && <span style={{
                            padding: '1px 5px', borderRadius: 3,
                            background: 'var(--brand-100)', color: 'var(--brand-700)', fontWeight: 700, letterSpacing: 0.04,
                          }}>MUST</span>}
                          {it.aiSuggested && <span style={{
                            padding: '1px 5px', borderRadius: 3,
                            background: 'var(--brand-50)', color: 'var(--brand-700)',
                            display: 'inline-flex', alignItems: 'center', gap: 2, fontWeight: 700,
                          }}><Icon.sparkle/>AI</span>}
                          {rock && <span title={rock.title} style={{
                            padding: '1px 5px', borderRadius: 3,
                            background: 'var(--ink-100)', color: 'var(--ink-700)',
                            fontWeight: 600, maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                          }}>{rock.title.split(' ').slice(0, 2).join(' ')}</span>}
                        </div>
                      </div>
                    );
                  })}
                  <button style={{
                    padding: 7, border: '1px dashed var(--line-strong)', borderRadius: 7,
                    background: 'transparent', color: 'var(--ink-400)', fontSize: 11,
                    cursor: 'pointer',
                  }}>+ Add</button>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Side: AI planning notes */}
      <div style={{ position: 'sticky', top: 80, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card" style={{ padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span style={{ width: 22, height: 22, borderRadius: 6,
              background: 'linear-gradient(135deg, var(--brand-700), var(--brand-500))', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon.sparkle/></span>
            <div style={{ fontSize: 12.5, fontWeight: 700 }}>How AI built this week</div>
          </div>
          <ol style={{ margin: '0 0 0 18px', padding: 0, fontSize: 11.5, color: 'var(--ink-600)', lineHeight: 1.6 }}>
            <li>Pulled active Rocks owned by {person.name.split(' ')[0]}.</li>
            <li>Prioritized tasks that move red metrics toward green.</li>
            <li>Capped daily commitment at ~4.5 hrs to leave buffer.</li>
            <li>Added 2 responsive tasks from this week’s signals.</li>
            <li>Flagged 48-hr follow-ups as must-dos when data supported it.</li>
          </ol>
        </div>
        <div className="card" style={{ padding: 16,
          background: 'linear-gradient(160deg, var(--brand-50), var(--card))' }}>
          <div style={{ fontSize: 10.5, color: 'var(--brand-700)', fontWeight: 700,
            letterSpacing: 0.06, textTransform: 'uppercase' }}>Re-plan</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-700)', marginTop: 6, lineHeight: 1.5 }}>
            Something change? Re-run the planner and AI will re-sequence the week.
          </div>
          <button style={{
            marginTop: 10, background: 'var(--brand-700)', color: '#fff', border: 'none',
            padding: '7px 12px', borderRadius: 7, fontSize: 12, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
          }}><Icon.sparkle/>Re-plan my week</button>
        </div>
      </div>
    </div>
  );
}

// ─── TAB 4: MORNING BRIEFINGS ─────────────────────────────────
function MorningBriefings({ persona }) {
  const [who, setWho] = React.useState(persona.id);
  const person = PEOPLE.find(p => p.id === who);
  const brief = MORNING_BRIEF[who];
  if (!brief) return null;
  const confMeta = {
    'on-track': { color: 'var(--good)', bg: 'var(--good-bg)', label: 'On track' },
    'at-risk':  { color: 'var(--warn)', bg: 'var(--warn-bg)', label: 'At risk' },
    'off-path': { color: 'var(--bad)',  bg: 'var(--bad-bg)',  label: 'Off path' },
  }[brief.confidence];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 22, alignItems: 'start' }}>
      <div>
        {/* Person switcher */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16,
          overflowX: 'auto', paddingBottom: 4 }}>
          {PEOPLE.map(p => (
            <button key={p.id} onClick={() => setWho(p.id)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 7,
              padding: '6px 11px 6px 6px', borderRadius: 99,
              background: who === p.id ? 'var(--brand-100)' : 'var(--card-alt)',
              border: '1px solid ' + (who === p.id ? 'var(--brand-300)' : 'var(--line)'),
              color: who === p.id ? 'var(--brand-700)' : 'var(--ink-700)',
              fontSize: 12, fontWeight: 600, cursor: 'pointer', flexShrink: 0,
            }}>
              <Avatar person={p} size={20}/>{p.name.split(' ')[0]}
            </button>
          ))}
        </div>

        {/* Email-style brief */}
        <div className="card" style={{ overflow: 'hidden' }}>
          <div style={{
            padding: '14px 22px', borderBottom: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 12,
            background: 'var(--card-alt)',
          }}>
            <span style={{ width: 30, height: 30, borderRadius: 8,
              background: 'linear-gradient(135deg, var(--brand-700), var(--brand-500))', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon.sun/></span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10.5, color: 'var(--ink-500)', fontWeight: 600, letterSpacing: 0.04, textTransform: 'uppercase' }}>
                From: Norwill AI · To: {person.name} · Wed 7:15 AM
              </div>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink-900)', marginTop: 2 }}>
                Your morning briefing — Wednesday
              </div>
            </div>
            <span style={{
              padding: '4px 10px', borderRadius: 99, background: confMeta.bg, color: confMeta.color,
              fontSize: 11, fontWeight: 700, letterSpacing: 0.04, textTransform: 'uppercase',
            }}>{confMeta.label}</span>
          </div>
          <div style={{ padding: 28 }}>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, lineHeight: 1.25, marginBottom: 18 }}>
              {brief.headline}
            </div>
            {brief.paragraphs.map((p, i) => (
              <p key={i} style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.65, margin: '0 0 14px' }}>{p}</p>
            ))}
            <div style={{
              marginTop: 18, padding: 16, borderRadius: 10,
              background: 'var(--brand-50)', border: '1px dashed var(--brand-300)',
            }}>
              <div style={{ fontSize: 10.5, color: 'var(--brand-700)', fontWeight: 700,
                letterSpacing: 0.06, textTransform: 'uppercase', marginBottom: 6 }}>Why this matters</div>
              <div style={{ fontSize: 13, color: 'var(--ink-800)', lineHeight: 1.5 }}>
                {brief.whyThisMatters}
              </div>
            </div>
            <div style={{ marginTop: 18 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-500)', fontWeight: 700,
                letterSpacing: 0.06, textTransform: 'uppercase', marginBottom: 8 }}>Your nudges</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {brief.nudges.map((n, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '10px 12px', borderRadius: 8,
                    background: 'var(--card-alt)', border: '1px solid var(--line)',
                  }}>
                    <span style={{ width: 20, height: 20, borderRadius: 5,
                      background: 'var(--brand-100)', color: 'var(--brand-700)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 11, fontWeight: 700 }}>{i + 1}</span>
                    <div style={{ flex: 1, fontSize: 13, color: 'var(--ink-800)', fontWeight: 500 }}>{n}</div>
                    <Icon.arrow/>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
              <button style={{
                background: 'var(--brand-700)', color: '#fff', border: 'none',
                padding: '9px 14px', borderRadius: 8, fontSize: 12.5, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}><Icon.sparkle/>Start my day</button>
              <button style={{
                background: 'var(--card)', color: 'var(--ink-700)',
                border: '1px solid var(--line-strong)', padding: '9px 14px',
                borderRadius: 8, fontSize: 12.5, fontWeight: 500,
              }}>Ask a follow-up</button>
            </div>
          </div>
        </div>
      </div>

      {/* Side: briefing schedule + settings */}
      <div style={{ position: 'sticky', top: 80, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card" style={{ padding: 16 }}>
          <div style={{ fontSize: 10.5, letterSpacing: 0.06, textTransform: 'uppercase',
            fontWeight: 700, color: 'var(--brand-700)' }}>Delivery</div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>
            Sent every weekday at 7:15 AM
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
            {['Email inbox', 'In-app dashboard card', 'Mobile push (optional)'].map(c => (
              <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 7,
                fontSize: 12, color: 'var(--ink-700)' }}>
                <span style={{ color: 'var(--good)' }}><Icon.check/></span>{c}
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding: 16 }}>
          <div style={{ fontSize: 10.5, letterSpacing: 0.06, textTransform: 'uppercase',
            fontWeight: 700, color: 'var(--brand-700)' }}>What the AI knows</div>
          <ul style={{ margin: '8px 0 0 18px', padding: 0, fontSize: 11.5,
            color: 'var(--ink-600)', lineHeight: 1.55 }}>
            <li>{person.name.split(' ')[0]}’s active Rocks + progress</li>
            <li>This week’s committed priorities</li>
            <li>13-week metric trends owned by {person.name.split(' ')[0]}</li>
            <li>Linked 1-year goals + org-level context</li>
            <li>Fresh anomalies and predictions from last 24h</li>
          </ul>
        </div>
        <div className="card" style={{ padding: 16,
          background: 'linear-gradient(160deg, var(--brand-50), var(--card))' }}>
          <div style={{ fontSize: 10.5, color: 'var(--brand-700)', fontWeight: 700,
            letterSpacing: 0.06, textTransform: 'uppercase' }}>End-of-day recap</div>
          <div style={{ fontSize: 12, color: 'var(--ink-700)', marginTop: 6, lineHeight: 1.5 }}>
            At 5:30 PM, AI sends a 1-line recap: what you completed, what slipped, and what moves to tomorrow.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GoalAlignment, WeeklyPlanner, MorningBriefings });