// Phone bezel + faithful renderings of the new (v2) Oona iOS screens.
// Static markup (no state) for marketing showcases.
// Mirrors _designs/app-v2/ — Today (running session hero), History (day-summary chips),
// Insights (editorial intro), Family (hero card).
// Exposes: PhoneFrame, PhoneHome, PhoneHistory, PhoneInsights, PhoneFamily

const C = {
  primary: '#7E739F', primaryDeep: '#5F567A', primarySoft: '#EFEBF5',
  lilac: '#B8A9D1', lilacSoft: '#E8E1F0',
  peach: '#EBC39E', peachSoft: '#F7E6D4',
  sage: '#B8BEAA', sageSoft: '#E2E4D8',
  pump: '#D9B7C6', pumpSoft: '#F1E0E7',
  cream: '#F5EEE7', cloud: '#FFF9F4', sunken: '#EFE7DE',
  taupe: '#D8CABE',
  text1: '#2F2A36', text2: '#8E857D', text3: '#B7AEA4',
  onPrimary: '#FFF9F4', success: '#7BA585',
};
const FONT = '-apple-system, "SF Pro Rounded", "DM Sans", system-ui, sans-serif';
const SERIF = '"Newsreader", "Iowan Old Style", Georgia, serif';
const MONO = '"DM Mono", "SF Mono", ui-monospace, Menlo, monospace';

const EVT = {
  feed:  { solid: C.peach, soft: C.peachSoft, ill: 'bottle' },
  sleep: { solid: C.lilac, soft: C.lilacSoft, ill: 'moon' },
  nappy: { solid: C.sage,  soft: C.sageSoft,  ill: 'nappy' },
  pump:  { solid: C.pump,  soft: C.pumpSoft,  ill: 'pump' },
  note:  { solid: C.taupe, soft: C.sunken,    ill: 'notebook' },
};

// ─── Phone bezel ─────────────────────────────────────────────
function PhoneFrame({ children, scale = 1, style }) {
  const W = 360, H = 760;
  return (
    <div style={{
      width: W * scale, height: H * scale,
      borderRadius: 44 * scale, padding: 6 * scale,
      background: 'linear-gradient(160deg, #2A2530 0%, #16131B 100%)',
      boxShadow: `0 ${30 * scale}px ${60 * scale}px rgba(40,30,50,0.18), 0 ${4 * scale}px ${10 * scale}px rgba(40,30,50,0.08)`,
      ...style,
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 38 * scale,
        background: C.cream, overflow: 'hidden', position: 'relative',
        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.04)',
      }}>
        <div style={{
          transform: `scale(${scale})`, transformOrigin: 'top left',
          width: W, height: H,
        }}>
          {/* Status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '18px 32px 0', height: 50,
            font: `600 15px/1 ${FONT}`, color: C.text1,
          }}>
            <span>9:41</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6, opacity: 0.7 }}>
              <svg width="16" height="10" viewBox="0 0 16 10"><rect x="0" y="6" width="3" height="4" rx="0.7" fill="currentColor"/><rect x="4" y="4" width="3" height="6" rx="0.7" fill="currentColor"/><rect x="8" y="2" width="3" height="8" rx="0.7" fill="currentColor"/><rect x="12" y="0" width="3" height="10" rx="0.7" fill="currentColor"/></svg>
              <svg width="22" height="10" viewBox="0 0 22 10"><rect x="0" y="0" width="19" height="10" rx="3" fill="none" stroke="currentColor" strokeOpacity="0.35"/><rect x="2" y="2" width="14" height="6" rx="1.5" fill="currentColor"/></svg>
            </span>
          </div>
          <div style={{
            position: 'absolute', top: 9, left: '50%', transform: 'translateX(-50%)',
            width: 110, height: 30, borderRadius: 20, background: '#000', zIndex: 8,
          }}/>
          {children}
          <div style={{
            position: 'absolute', bottom: 7, left: '50%', transform: 'translateX(-50%)',
            width: 110, height: 4, borderRadius: 2, background: 'rgba(47,42,54,0.30)', zIndex: 10,
          }}/>
        </div>
      </div>
    </div>
  );
}

// ─── Tab bar ────────────────────────────────────────────────
function TabBar({ active = 'today' }) {
  const tabs = [
    { id: 'today', label: 'Today', d: 'M3 11l9-8 9 8M5 9.5V20h14V9.5M10 20v-6h4v6' },
    { id: 'history', label: 'History', d: 'M3 12a9 9 0 1 0 9-9v3M3 12l3-3M3 12l3 3M12 7v5l3 2' },
    { id: 'insights', label: 'Insights', d: 'M4 19V5M4 19h16M8 15l3-4 3 3 4-6' },
    { id: 'family', label: 'Family', d: 'M9 9.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM17 11.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM3 19c.7-3 3.3-5 6-5s5.3 2 6 5M15 19c.5-1.6 1.7-2.7 3-3' },
  ];
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 16,
      background: 'rgba(255,249,244,0.82)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      borderRadius: 26, padding: '9px 6px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      boxShadow: '0 8px 20px rgba(75,60,75,0.10)',
      border: `1px solid ${C.cloud}88`,
    }}>
      {tabs.map(t => {
        const on = t.id === active;
        return (
          <div key={t.id} style={{
            flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            color: on ? C.primary : C.text2,
            font: `${on ? 600 : 500} 10px/1 ${FONT}`, padding: '4px 0',
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={on ? 2 : 1.75} strokeLinecap="round" strokeLinejoin="round">
              <path d={t.d}/>
            </svg>
            <span>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

function BabyHeader() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{
        width: 28, height: 28, borderRadius: 999, background: C.peachSoft,
        color: C.primaryDeep, font: `600 12px/1 ${SERIF}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>W</div>
      <div>
        <div style={{ font: `600 13px/1.1 ${FONT}`, color: C.text1 }}>Wren</div>
        <div style={{ font: `400 10px/1.2 ${FONT}`, color: C.text2 }}>4 mo 12 d</div>
      </div>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={C.text2} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
    </div>
  );
}

function ProfileButton() {
  return (
    <div style={{
      width: 28, height: 28, borderRadius: 999, background: C.cloud,
      border: `1px solid ${C.taupe}99`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: C.primaryDeep, font: `600 12px/1 ${SERIF}`,
    }}>E</div>
  );
}

function TopBar({ leading, title, trailing }) {
  return (
    <div style={{
      padding: '50px 16px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div style={{ minWidth: 30 }}>{leading}</div>
      {title && <div style={{ font: `600 15px/1 ${FONT}`, color: C.text1 }}>{title}</div>}
      <div style={{ minWidth: 30, display: 'flex', justifyContent: 'flex-end' }}>{trailing}</div>
    </div>
  );
}

function Overline({ children, style }) {
  return (
    <div style={{
      font: `600 10px/1 ${FONT}`, textTransform: 'uppercase',
      letterSpacing: '0.12em', color: C.text2, ...style,
    }}>{children}</div>
  );
}

function EventRow({ type, title, meta, time, by }) {
  const m = EVT[type];
  return (
    <div style={{
      position: 'relative', background: C.cloud, borderRadius: 14,
      padding: '10px 12px 10px 16px',
      display: 'flex', alignItems: 'center', gap: 10, overflow: 'hidden',
      border: `1px solid ${C.taupe}55`,
    }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: m.solid }}/>
      <div style={{
        width: 28, height: 28, borderRadius: 9, background: m.soft,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <img src={`assets/illustration-${m.ill}.svg`} alt="" style={{ width: 20, height: 20 }}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: `500 12px/1.3 ${FONT}`, color: C.text1 }}>{title}</div>
        <div style={{ font: `400 10px/1.3 ${FONT}`, color: C.text2, marginTop: 1 }}>
          {meta}{by && <> · {by}</>}
        </div>
      </div>
      <div style={{ font: `500 10px/1 ${MONO}`, color: C.text2 }}>{time}</div>
    </div>
  );
}

// ─── HOME · v2 with RUNNING SESSION HERO (centrepiece) ──────
function PhoneHome() {
  return (
    <div style={{ paddingTop: 0, position: 'absolute', inset: 0, background: C.cream }}>
      <TopBar leading={<BabyHeader/>} trailing={<ProfileButton/>}/>

      <div style={{ padding: '2px 16px 12px' }}>
        <div style={{ font: `400 11px/1.4 ${FONT}`, color: C.text2 }}>Morning.</div>
        <div style={{ font: `500 22px/1.15 ${SERIF}`, color: C.text1, marginTop: 3, letterSpacing: '-0.015em' }}>
          A feed is <em style={{ color: C.primary, fontStyle: 'italic' }}>under way.</em>
        </div>
      </div>

      {/* Running hero */}
      <div style={{ padding: '0 16px 10px' }}>
        <div style={{
          background: `linear-gradient(160deg, ${C.peachSoft}, ${C.cloud})`,
          borderRadius: 20, padding: '14px 16px 13px',
          border: `2px solid ${C.peach}`,
          boxShadow: '0 8px 22px rgba(235,195,158,0.30)',
          position: 'relative', overflow: 'hidden',
        }}>
          <img src="assets/illustration-bottle.svg" alt="" style={{
            position: 'absolute', right: -10, top: -6, width: 92, height: 92, opacity: 0.32,
          }}/>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative' }}>
            <div style={{ font: `600 9px/1 ${FONT}`, textTransform: 'uppercase', letterSpacing: '0.12em', color: C.text2 }}>FEED · LEFT</div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '3px 7px', borderRadius: 999,
              background: C.cloud, border: `1px solid ${C.primary}33`,
              font: `600 8px/1 ${FONT}`, letterSpacing: '0.08em', color: C.primary,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 999, background: C.primary }}/>
              LIVE
            </div>
          </div>
          <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 2, position: 'relative' }}>
            <span style={{ font: `500 44px/1 ${MONO}`, color: C.primary, letterSpacing: '-0.02em' }}>08</span>
            <span style={{ font: `500 18px/1 ${FONT}`, color: C.text2 }}>:</span>
            <span style={{ font: `500 44px/1 ${MONO}`, color: C.primary, letterSpacing: '-0.02em' }}>14</span>
          </div>
          <div style={{ font: `400 10px/1.4 ${FONT}`, color: C.text2, marginTop: 2, position: 'relative' }}>
            Started 07:42 · double-tap to switch
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 10, position: 'relative' }}>
            <div style={{
              flex: 1, padding: '9px 0', borderRadius: 10, background: C.primary,
              color: C.onPrimary, font: `600 11px/1 ${FONT}`, textAlign: 'center',
            }}>End feed</div>
            <div style={{
              padding: '9px 14px', borderRadius: 10, background: C.cloud,
              color: C.primary, font: `600 11px/1 ${FONT}`, textAlign: 'center',
              border: `1px solid ${C.primary}33`,
            }}>Pause</div>
          </div>
        </div>
      </div>

      {/* Or log row */}
      <div style={{ padding: '4px 16px 10px' }}>
        <Overline style={{ marginBottom: 6 }}>OR LOG SOMETHING ELSE</Overline>
        <div style={{ display: 'flex', gap: 6 }}>
          {[
            { t: 'sleep', l: 'Sleep' },
            { t: 'pump',  l: 'Pump' },
            { t: 'nappy', l: 'Nappy' },
          ].map(o => {
            const m = EVT[o.t];
            return (
              <div key={o.t} style={{
                flex: 1, padding: '10px 6px', borderRadius: 12,
                background: m.soft, textAlign: 'center',
              }}>
                <img src={`assets/illustration-${m.ill}.svg`} alt="" style={{ width: 24, height: 24, margin: '0 auto 3px' }}/>
                <div style={{ font: `500 10px/1 ${FONT}`, color: C.text1 }}>{o.l}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Today's log */}
      <div style={{ padding: '4px 16px' }}>
        <Overline style={{ marginBottom: 8 }}>TODAY'S LOG</Overline>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <EventRow type="nappy" title="Nappy · wet"  meta="07:15" time="50m" by="Dad"/>
          <EventRow type="sleep" title="Nap · 1h 24m" meta="05:50" time="2h" by="auto"/>
        </div>
      </div>

      <TabBar active="today"/>
    </div>
  );
}

// ─── HISTORY · v2 with day-summary chips ────────────────────
function PhoneHistory() {
  const filters = ['All', 'Feeds', 'Sleep', 'Nappies', 'Pumps'];
  const groups = [
    { day: 'Today',     date: 'Thu 15 May', sum: { f: 6, s: '11h 20m', n: 5 }, events: [
      { type: 'feed', title: 'Feed · left, 14 min', meta: '07:42', time: 'just now', by: 'Mum' },
      { type: 'nappy', title: 'Nappy · wet',         meta: '07:15', time: '50m', by: 'Dad' },
      { type: 'sleep', title: 'Nap · 1h 24m',        meta: '05:50', time: '2h', by: 'auto' },
    ]},
    { day: 'Yesterday', date: 'Wed 14 May', sum: { f: 7, s: '10h 40m', n: 6 }, events: [
      { type: 'pump', title: 'Pump · 110 ml', meta: '22:40', time: 'yest', by: 'Mum' },
    ]},
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.cream }}>
      <TopBar title="History" trailing={<ProfileButton/>}/>

      <div style={{ padding: '2px 16px 10px', display: 'flex', gap: 5, overflow: 'hidden' }}>
        {filters.map((f, i) => {
          const on = i === 0;
          return (
            <div key={f} style={{
              font: `${on ? 600 : 500} 10px/1 ${FONT}`, padding: '6px 11px', borderRadius: 999,
              background: on ? C.primary : C.cloud,
              color: on ? C.onPrimary : C.text1,
              border: on ? 0 : `1px solid ${C.taupe}`, flexShrink: 0,
            }}>{f}</div>
          );
        })}
      </div>

      <div style={{ padding: '0 16px' }}>
        {groups.map((g, i) => (
          <div key={i} style={{ marginBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 7 }}>
              <div style={{ font: `500 15px/1.2 ${SERIF}`, color: C.text1 }}>{g.day}</div>
              <div style={{ font: `400 10px/1 ${FONT}`, color: C.text2 }}>{g.date}</div>
            </div>
            {/* Summary chips */}
            <div style={{ display: 'flex', gap: 5, marginBottom: 6 }}>
              <div style={{
                padding: '4px 8px', borderRadius: 999, background: C.peachSoft,
                font: `500 9px/1 ${FONT}`, color: C.primaryDeep, display: 'flex', alignItems: 'center', gap: 4,
              }}><span style={{ width: 4, height: 4, borderRadius: 999, background: C.peach }}/>{g.sum.f} feeds</div>
              <div style={{
                padding: '4px 8px', borderRadius: 999, background: C.lilacSoft,
                font: `500 9px/1 ${FONT}`, color: C.primaryDeep, display: 'flex', alignItems: 'center', gap: 4,
              }}><span style={{ width: 4, height: 4, borderRadius: 999, background: C.lilac }}/>{g.sum.s} sleep</div>
              <div style={{
                padding: '4px 8px', borderRadius: 999, background: C.sageSoft,
                font: `500 9px/1 ${FONT}`, color: '#4F5B45', display: 'flex', alignItems: 'center', gap: 4,
              }}><span style={{ width: 4, height: 4, borderRadius: 999, background: C.sage }}/>{g.sum.n} nappies</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              {g.events.map((ev, j) => <EventRow key={j} {...ev}/>)}
            </div>
          </div>
        ))}
      </div>

      <TabBar active="history"/>
    </div>
  );
}

// ─── INSIGHTS · v2 with editorial intro ─────────────────────
function PhoneInsights() {
  const feeds = [6, 5, 7, 6, 8, 6, 7];
  const sleep = [11, 9, 12, 10, 11, 11, 10];
  const days = ['M','T','W','T','F','S','S'];

  const maxF = Math.max(...feeds);
  const maxS = Math.max(...sleep), minS = Math.min(...sleep);

  const W = 220, H = 56;
  const pts = sleep.map((v, i) => [
    (i / (sleep.length - 1)) * W,
    H - ((v - minS) / (maxS - minS)) * (H - 10) - 5,
  ]);
  const path = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0]},${p[1]}`).join(' ');

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.cream }}>
      <TopBar title="Insights" trailing={<ProfileButton/>}/>

      <div style={{ padding: '0 16px 12px' }}>
        <Overline style={{ marginBottom: 6 }}>WREN · LAST 7 DAYS</Overline>
        <div style={{ font: `500 22px/1.15 ${SERIF}`, color: C.text1, letterSpacing: '-0.015em' }}>
          A <em style={{ color: C.primary, fontStyle: 'italic' }}>steadier</em> week.
        </div>
        <div style={{ font: `400 11px/1.5 ${FONT}`, color: C.text2, marginTop: 5 }}>
          45 feeds, ~74h sleep. Nights up ~1h on last week.
        </div>
      </div>

      {/* Feeds bar */}
      <div style={{ padding: '0 16px 10px' }}>
        <div style={{ background: C.cloud, borderRadius: 16, padding: 14, border: `1px solid ${C.taupe}66` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <Overline>FEEDS</Overline>
            <div style={{ font: `500 9px/1 ${FONT}`, color: C.success }}>+3 vs prev</div>
          </div>
          <div style={{ font: `500 18px/1 ${SERIF}`, color: C.text1, marginTop: 4 }}>45 total</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, marginTop: 10, height: 44 }}>
            {feeds.map((v, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
                <div style={{ width: '100%', height: `${(v / maxF) * 100}%`, background: C.peach, borderRadius: '3px 3px 1px 1px' }}/>
                <div style={{ font: `500 8px/1 ${FONT}`, color: C.text3 }}>{days[i]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Sleep line */}
      <div style={{ padding: '0 16px 10px' }}>
        <div style={{ background: C.cloud, borderRadius: 16, padding: 14, border: `1px solid ${C.taupe}66` }}>
          <Overline>SLEEP · HOURS PER DAY</Overline>
          <div style={{ font: `500 18px/1 ${SERIF}`, color: C.text1, marginTop: 4 }}>10h 40m avg</div>
          <svg viewBox={`0 0 ${W} ${H + 12}`} style={{ width: '100%', marginTop: 8, overflow: 'visible' }}>
            <path d={`${path} L${W},${H} L0,${H} Z`} fill={C.lilac} opacity="0.3"/>
            <path d={path} fill="none" stroke={C.lilac} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill={C.lilac}/>)}
          </svg>
        </div>
      </div>

      {/* Weight line */}
      <div style={{ padding: '0 16px 10px' }}>
        <div style={{ background: C.cloud, borderRadius: 16, padding: 14, border: `1px solid ${C.taupe}66` }}>
          <Overline>WEIGHT · OVER TIME</Overline>
          <div style={{ font: `500 18px/1 ${SERIF}`, color: C.text1, marginTop: 4 }}>6.8 kg latest</div>
          {(() => {
            const kg = [5.9, 6.1, 6.3, 6.4, 6.6, 6.8];
            const maxW = Math.max(...kg), minW = Math.min(...kg);
            const wp = kg.map((v, i) => [
              (i / (kg.length - 1)) * W,
              H - ((v - minW) / (maxW - minW)) * (H - 10) - 5,
            ]);
            const wPath = wp.map((p, i) => `${i ? 'L' : 'M'}${p[0]},${p[1]}`).join(' ');
            return (
              <svg viewBox={`0 0 ${W} ${H + 12}`} style={{ width: '100%', marginTop: 8, overflow: 'visible' }}>
                <path d={`${wPath} L${W},${H} L0,${H} Z`} fill={C.peach} opacity="0.3"/>
                <path d={wPath} fill="none" stroke={C.peach} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                {wp.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill={C.peach}/>)}
              </svg>
            );
          })()}
        </div>
      </div>

      {/* Insight prose */}
      <div style={{ padding: '0 16px' }}>
        <div style={{ background: C.primarySoft, borderRadius: 16, padding: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <img src="assets/illustration-leaf.svg" alt="" style={{ width: 40, height: 40, flexShrink: 0 }}/>
          <div>
            <div style={{ font: `500 13px/1.3 ${SERIF}`, color: C.text1 }}>A gentler day yesterday.</div>
            <div style={{ font: `400 10px/1.4 ${FONT}`, color: C.text2, marginTop: 3 }}>
              Wren slept 12h total — about an hour more than typical.
            </div>
          </div>
        </div>
      </div>

      <TabBar active="insights"/>
    </div>
  );
}

// ─── FAMILY · v2 with hero card + caregiver list ────────────
function PhoneFamily() {
  const people = [
    { i: 'M', name: 'Mum',       role: 'OWNER',    color: C.primary, you: true },
    { i: 'D', name: 'Dad',       role: 'FULL',     color: C.peach },
    { i: 'G', name: 'Granny',    role: 'FULL',     color: C.sage },
    { i: 'N', name: 'Nanny Lou', role: 'LOG ONLY', color: C.pump },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.cream }}>
      <TopBar title="Family" trailing={<ProfileButton/>}/>

      <div style={{ padding: '0 16px' }}>
        {/* Hero */}
        <div style={{
          padding: 14,
          background: `linear-gradient(180deg, ${C.primarySoft}, ${C.cloud})`,
          borderRadius: 18, border: `1px solid ${C.taupe}66`,
          marginBottom: 12, position: 'relative', overflow: 'hidden',
        }}>
          <img src="assets/illustration-hands.svg" alt="" style={{
            position: 'absolute', top: -6, right: -6, width: 90, height: 90, opacity: 0.45,
          }}/>
          <div style={{ position: 'relative' }}>
            <Overline style={{ marginBottom: 4 }}>CARING FOR</Overline>
            <div style={{ font: `500 20px/1.2 ${SERIF}`, color: C.text1 }}>Wren</div>
            <div style={{ font: `400 10px/1.4 ${FONT}`, color: C.text2, marginTop: 2 }}>4 mo 12 d · 4 caregivers</div>
          </div>
        </div>

        {/* Caregivers card */}
        <div style={{
          background: C.cloud, borderRadius: 18,
          border: `1px solid ${C.taupe}66`, overflow: 'hidden', marginBottom: 12,
        }}>
          <div style={{ padding: '10px 14px 6px', display: 'flex', justifyContent: 'space-between' }}>
            <Overline>CAREGIVERS</Overline>
            <div style={{ font: `500 10px/1 ${FONT}`, color: C.text2 }}>{people.length} people</div>
          </div>
          {people.map((p, i) => (
            <div key={p.i} style={{
              padding: '9px 14px',
              borderTop: i ? `1px solid ${C.taupe}44` : 0,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 999, background: p.color,
                color: C.onPrimary, font: `600 12px/1 ${SERIF}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>{p.i}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                  <span style={{ font: `500 12px/1.2 ${FONT}` }}>{p.name}</span>
                  {p.you && <span style={{
                    font: `600 8px/1 ${FONT}`, color: C.text2, letterSpacing: '0.08em',
                    background: `${C.text2}22`, padding: '2px 5px', borderRadius: 4,
                  }}>YOU</span>}
                </div>
              </div>
              <div style={{
                font: `600 8px/1 ${FONT}`, letterSpacing: '0.08em',
                color: p.role === 'OWNER' ? C.primary : (p.role === 'FULL' ? C.primary : '#4F5B45'),
                background: p.role === 'OWNER' ? `${C.primary}26` : (p.role === 'FULL' ? `${C.primary}1a` : `${C.sage}66`),
                padding: '3px 6px', borderRadius: 999,
              }}>{p.role}</div>
            </div>
          ))}
        </div>

        {/* Invite card */}
        <div style={{ background: C.cloud, borderRadius: 18, padding: 14, border: `1px solid ${C.taupe}66` }}>
          <Overline style={{ marginBottom: 5 }}>INVITE A CAREGIVER</Overline>
          <div style={{ font: `400 10px/1.4 ${FONT}`, color: C.text2, marginBottom: 10 }}>Single-use · 7 days.</div>
          <div style={{ display: 'flex', gap: 5 }}>
            {[
              { l: 'Show QR', d: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h3v3h-3zM14 20h3M20 14v3M20 20v.01' },
              { l: 'Email',   d: 'M3 5h18v14H3zM3 8l9 6 9-6' },
              { l: 'Link',    d: 'M16 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM16 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM5 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7.5 10.5l6-3M7.5 13.5l6 3' },
            ].map(o => (
              <div key={o.l} style={{
                flex: 1, background: C.cream, borderRadius: 12, padding: 10,
                border: `1px solid ${C.taupe}66`,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={C.primary} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d={o.d}/></svg>
                <div style={{ font: `500 10px/1 ${FONT}` }}>{o.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <TabBar active="family"/>
    </div>
  );
}

Object.assign(window, { PhoneFrame, PhoneHome, PhoneHistory, PhoneInsights, PhoneFamily });
// Keep old alias for any stale import
window.PhoneFeed = PhoneHome;