// Browser/laptop window + faithful static rendering of the editorial dashboard.
// Direction A "Editorial+" — showcase version with mock data.
// Exposes: BrowserFrame, DashboardMock, useIsMobile

// Shared viewport hook — loaded here so Sections.jsx can pick it off window.
function useIsMobile(breakpoint = 760) {
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth < breakpoint
  );
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: ' + (breakpoint - 1) + 'px)');
    const update = () => setIsMobile(mq.matches);
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, [breakpoint]);
  return isMobile;
}

function BrowserFrame({ children, url = 'dashboard.oonaapp.co.uk', scale = 1, style }) {
  return (
    <div style={{
      borderRadius: 14 * scale,
      background: '#E8DFD5',
      boxShadow: `0 ${40 * scale}px ${80 * scale}px rgba(40, 30, 50, 0.16), 0 ${8 * scale}px ${20 * scale}px rgba(40,30,50,0.06)`,
      overflow: 'hidden',
      ...style,
    }}>
      {/* Chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12 * scale, padding: `${10 * scale}px ${14 * scale}px`,
        background: '#EDE6DC', borderBottom: '1px solid rgba(216,202,190,0.6)',
      }}>
        <div style={{ display: 'flex', gap: 6 * scale }}>
          <div style={{ width: 12 * scale, height: 12 * scale, borderRadius: 999, background: '#E5786B' }}/>
          <div style={{ width: 12 * scale, height: 12 * scale, borderRadius: 999, background: '#F0BE4F' }}/>
          <div style={{ width: 12 * scale, height: 12 * scale, borderRadius: 999, background: '#7FCC59' }}/>
        </div>
        <div style={{
          flex: 1, background: '#F5EEE7', borderRadius: 8 * scale, padding: `${6 * scale}px ${12 * scale}px`,
          font: `500 ${12 * scale}px/1 "DM Mono", monospace`, color: '#8E857D',
          maxWidth: 400 * scale, margin: '0 auto',
        }}>🔒 {url}</div>
        <div style={{ width: 60 * scale }}/>
      </div>
      <div>{children}</div>
    </div>
  );
}

// ─── Shared mock helpers ─────────────────────────────────────

const EVENT_COLOR = { feed: '#EBC39E', sleep: '#B8A9D1', nappy: '#B8BEAA', pump: '#D9B7C6', note: '#D8CABE' };
const EVENT_SOFT  = { feed: '#F7E6D4', sleep: '#E8E1F0', nappy: '#E2E4D8', pump: '#F1E0E7', note: '#ECE3D8' };
const EVENT_ILL   = { feed: 'bottle', sleep: 'moon', nappy: 'nappy', pump: 'pump', note: 'notebook' };

function MockMiniBar({ data, color, height }) {
  const max = Math.max(...data) * 1.15;
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, height }}>
      {data.map((v, i) => (
        <div key={i} style={{
          flex: 1, height: `${Math.max(6, (v / max) * 100)}%`,
          background: color, borderRadius: '4px 4px 1px 1px',
        }}/>
      ))}
    </div>
  );
}

function MockSpark({ data, color, width, height }) {
  const max = Math.max(...data), min = Math.min(...data), range = (max - min) || 1;
  const pts = data.map((v, i) => [
    (i / (data.length - 1)) * width,
    height - ((v - min) / range) * (height - 8) - 4,
  ]);
  const path = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0]},${p[1]}`).join(' ');
  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height }}>
      <path d={`${path} L${width},${height} L0,${height} Z`} fill={color} opacity="0.35"/>
      <path d={path} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function SectionHead({ chapter, kicker, title, action, mobile }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      marginBottom: 18, gap: 12, flexWrap: 'wrap',
    }}>
      <div>
        <div style={{ font: '500 10px/1 "DM Mono",monospace', color: 'var(--fg-3)', marginBottom: 8 }}>{chapter}</div>
        <div style={{
          font: '500 11px/1 "DM Sans"', textTransform: 'uppercase',
          letterSpacing: '0.12em', color: 'var(--fg-2)', marginBottom: 6,
        }}>{kicker}</div>
        <div style={{
          font: `500 ${mobile ? 22 : 28}px/1.1 "Newsreader",serif`,
          color: 'var(--fg-1)', letterSpacing: '-0.02em',
        }}>{title}</div>
      </div>
      {action}
    </div>
  );
}

// ─── Static rendering of the editorial dashboard (Direction A) ──

function DashboardMock() {
  const mobile = useIsMobile();

  const events = [
    { type: 'feed',  t: '07:42', title: 'Feed · left, 14 min', by: 'Mum' },
    { type: 'nappy', t: '07:15', title: 'Nappy · wet',         by: 'Dad' },
    { type: 'sleep', t: '05:50', title: 'Nap · 1h 24m',        by: 'auto' },
    { type: 'feed',  t: '05:20', title: 'Bottle · 90 ml',      by: 'Dad' },
    { type: 'sleep', t: '23:10', title: 'Night · 6h 40m',      by: 'auto' },
    { type: 'pump',  t: '22:40', title: 'Pump · 110 ml',       by: 'Mum' },
  ];

  const feedsTrend = [6, 5, 7, 6, 8, 6, 7];
  const sleepTrend = [11, 9, 12, 10, 11, 11, 10];
  const nappyTrend = [5, 6, 4, 5, 7, 5, 5];
  const days = ['F', 'S', 'S', 'M', 'T', 'W', 'T'];

  const stats = [
    { k: 'Feeds today',   v: '6',       s: 'avg 6.5 / day' },
    { k: 'Sleep today',   v: '11h 20m', s: 'longest 6h 40m' },
    { k: 'Nappies today', v: '5',       s: '3 wet · 2 dirty' },
    { k: 'Pumped today',  v: '110ml',   s: 'last 22:40' },
  ];

  const compareChips = [
    { label: 'vs last week', value: '+1 feed/day', delta: '6%' },
    { label: 'longest sleep', value: '6h 40m', delta: '+1h' },
    { label: 'awake window', value: '1h 06m', delta: '' },
  ];

  const caregivers = [
    { initial: 'M', name: 'Mum',       role: 'Primary parent', color: '#7E739F', count: 63 },
    { initial: 'D', name: 'Dad',       role: 'Parent',         color: '#EBC39E', count: 31 },
    { initial: 'G', name: 'Granny',    role: 'Family',         color: '#B8BEAA', count: 14 },
  ];

  const growth = [
    { label: 'Weight', value: '6.8', unit: 'kg', delta: '+180g this week', color: '#7E739F', data: [5.8, 6.0, 6.2, 6.3, 6.5, 6.6, 6.8] },
    { label: 'Height', comingSoon: true },
    { label: 'Head',   comingSoon: true },
  ];

  const milestones = [
    { ill: 'star',      label: 'First real giggle', date: '14 May', by: 'Mum' },
    { ill: 'cake',      label: 'Slept 8h straight',  date: '10 May', by: 'auto' },
    { ill: 'bottle',    label: 'Held bottle alone',  date: '02 May', by: 'Dad' },
    { ill: 'footprint', label: 'Rolled over',        date: '24 Apr', by: 'Mum' },
  ];

  // 7 days × 24 hours sleep heatmap (0..3 intensity).
  const sleepGrid = [];
  for (let d = 0; d < 7; d++) {
    const row = [];
    for (let h = 0; h < 24; h++) {
      let v = 0;
      if (h < 6 || h >= 22) v = 3;
      else if (h === 6 || h === 21) v = 2;
      else if ((h === 10 && d % 2 === 0) || h === 13 || h === 16) v = 2;
      if (Math.sin(d * 1.7 + h * 0.3) > 0.7 && v === 0) v = 1;
      row.push(v);
    }
    sleepGrid.push(row);
  }
  const heatShades = ['transparent', 'rgba(184,169,209,0.25)', 'rgba(184,169,209,0.55)', 'rgba(184,169,209,0.95)'];

  const pad = mobile ? '20px 16px 26px' : '32px 40px 40px';
  const card = { background: 'var(--bg-card)', borderRadius: 20, padding: mobile ? 18 : 24, boxShadow: 'var(--shadow-1)' };
  const overline = { font: '500 10px/1 "DM Sans"', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--fg-2)' };

  return (
    <div style={{ background: 'var(--bg-app)', padding: pad, fontFamily: 'var(--font-body)' }}>

      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: mobile ? 22 : 32 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 16 : 30 }}>
          <span style={{ font: '500 24px/1 "Newsreader",serif', color: 'var(--oona-primary)', letterSpacing: '-0.04em' }}>oona</span>
          {!mobile && (
            <nav style={{ display: 'flex', gap: 20, font: '500 12px/1 "DM Sans"' }}>
              <a style={{ color: 'var(--fg-1)', borderBottom: '2px solid var(--oona-primary)', paddingBottom: 4 }}>Today</a>
              <a style={{ color: 'var(--fg-2)' }}>Patterns</a>
              <a style={{ color: 'var(--fg-2)' }}>Growth</a>
              <a style={{ color: 'var(--fg-2)' }}>Milestones</a>
              <a style={{ color: 'var(--fg-2)' }}>Family</a>
            </nav>
          )}
        </div>
        <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border-1)', borderRadius: 999, padding: '4px 12px 4px 4px', display: 'flex', alignItems: 'center', gap: 7 }}>
          <div style={{ width: 24, height: 24, borderRadius: 999, background: '#EBC39E', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 12px/1 "Newsreader",serif', color: '#5F567A' }}>W</div>
          <span style={{ font: '500 12px/1 "DM Sans"' }}>Wren</span>
        </div>
      </div>

      {/* HERO — headline + since-last-feed */}
      <div style={{ marginBottom: 22 }}>
        <div style={{ ...overline, marginBottom: 12 }}>Thursday · 15 May 2026 · day 132</div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.5fr 1fr',
          gap: mobile ? 18 : 36, alignItems: 'flex-end',
        }}>
          <h1 style={{
            font: mobile ? '500 26px/1.15 "Newsreader",serif' : '500 44px/1.08 "Newsreader",serif',
            color: 'var(--fg-1)', letterSpacing: '-0.025em', margin: 0,
          }}>
            A steady morning. Wren slept <em style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>11h 20m</em> and has fed <em style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>6 times</em>.
          </h1>

          {/* Since-last-feed card */}
          <div style={{
            borderRadius: 18, padding: mobile ? '16px 18px' : '20px 22px',
            background: 'linear-gradient(135deg, rgba(126,115,159,0.12), rgba(126,115,159,0) 60%), var(--bg-card)',
            boxShadow: 'var(--shadow-1)', position: 'relative', overflow: 'hidden',
          }}>
            <img src="assets/illustration-moon.svg" alt="" style={{ position: 'absolute', right: -14, top: -14, width: 120, opacity: 0.4 }}/>
            <div style={{ position: 'relative' }}>
              <div style={overline}>Since last feed</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 3, marginTop: 8 }}>
                <span style={{ font: `500 ${mobile ? 44 : 56}px/1 "DM Mono",monospace`, color: 'var(--oona-primary)', letterSpacing: '-0.03em' }}>2</span>
                <span style={{ font: '500 18px/1 "DM Sans"', color: 'var(--fg-2)' }}>h</span>
                <span style={{ font: `500 ${mobile ? 44 : 56}px/1 "DM Mono",monospace`, color: 'var(--oona-primary)', letterSpacing: '-0.03em', marginLeft: 6 }}>23</span>
                <span style={{ font: '500 18px/1 "DM Sans"', color: 'var(--fg-2)' }}>m</span>
              </div>
              <div style={{ font: '400 12px/1.5 "DM Sans"', color: 'var(--fg-1)', marginTop: 6, display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 7, height: 7, borderRadius: 999, background: '#7E739F' }}/>
                Last on the left, 14 min, at 07:42.
              </div>
            </div>
          </div>
        </div>

        {/* Compare chips */}
        <div style={{ display: 'flex', gap: 8, marginTop: 18, flexWrap: 'wrap' }}>
          {compareChips.map((c, i) => (
            <div key={i} style={{
              padding: '7px 12px', borderRadius: 999, background: 'var(--bg-card)',
              border: '1px solid var(--border-1)', display: 'inline-flex', alignItems: 'center', gap: 7,
            }}>
              <span style={{ font: '400 11px/1 "DM Sans"', color: 'var(--fg-2)' }}>{c.label}</span>
              <span style={{ font: '500 12px/1 "Newsreader",serif', color: 'var(--fg-1)' }}>{c.value}</span>
              {c.delta && <span style={{ font: '500 10px/1 "DM Sans"', color: '#7BA585' }}>↑{c.delta}</span>}
            </div>
          ))}
        </div>
      </div>

      {/* Pull-quote stat row */}
      <div style={{
        display: 'grid', gridTemplateColumns: `repeat(${mobile ? 2 : 4}, 1fr)`,
        gap: mobile ? '16px 0' : 0,
        borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)',
        padding: '22px 0',
      }}>
        {stats.map((s, i) => {
          const col = i % (mobile ? 2 : 4);
          return (
            <div key={i} style={{ padding: col ? '0 18px' : '0 18px 0 0', borderLeft: col ? '1px solid var(--border-1)' : 0 }}>
              <div style={overline}>{s.k}</div>
              <div style={{ font: `500 ${mobile ? 26 : 32}px/1 "Newsreader",serif`, color: 'var(--fg-1)', marginTop: 8, letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{ font: '400 11px/1.4 "DM Sans"', color: 'var(--fg-2)', marginTop: 5 }}>{s.s}</div>
            </div>
          );
        })}
      </div>

      {/* THIS WEEK */}
      <div style={{ marginTop: mobile ? 30 : 44 }}>
        <SectionHead
          chapter="Chapter 02" kicker="This week" mobile={mobile}
          title={<>The week, <em style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>at a glance</em>.</>}
        />

        {/* 3-up trend cards */}
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 12 }}>
          {[
            { k: 'Feeds',   total: '45',         delta: '+3 vs prev',     data: feedsTrend, color: '#EBC39E', spark: false },
            { k: 'Sleep',   total: '10h 40m avg', delta: '+1h 06m vs prev', data: sleepTrend, color: '#B8A9D1', spark: true },
            { k: 'Nappies', total: '37',         delta: '+2 vs prev',     data: nappyTrend, color: '#B8BEAA', spark: false },
          ].map((cd, i) => (
            <div key={i} style={card}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={overline}>{cd.k}</div>
                <div style={{ font: '500 11px/1 "DM Sans"', color: '#7BA585' }}>{cd.delta}</div>
              </div>
              <div style={{ font: '500 24px/1 "Newsreader",serif', color: 'var(--fg-1)', marginTop: 10 }}>{cd.total}</div>
              <div style={{ marginTop: 14, height: 70 }}>
                {cd.spark
                  ? <MockSpark data={cd.data} color={cd.color} width={220} height={70}/>
                  : <MockMiniBar data={cd.data} color={cd.color} height={70}/>}
              </div>
            </div>
          ))}
        </div>

        {/* Sleep heatmap */}
        <div style={{ ...card, marginTop: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
            <div>
              <div style={overline}>Sleep schedule</div>
              <div style={{ font: '400 11px/1.4 "DM Sans"', color: 'var(--fg-2)', marginTop: 5 }}>Darker = asleep. Last 7 days × 24 hours.</div>
            </div>
            <div style={{ display: 'flex', gap: 12, font: '500 11px/1 "DM Sans"', color: 'var(--fg-2)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 11, height: 11, borderRadius: 3, background: heatShades[1] }}/>Light
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 11, height: 11, borderRadius: 3, background: heatShades[3] }}/>Deep
              </span>
            </div>
          </div>
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 3 }}>
            {sleepGrid.map((row, di) => (
              <div key={di} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 26, font: '500 10px/1 "DM Sans"', color: 'var(--fg-2)' }}>{['Fri','Sat','Sun','Mon','Tue','Wed','Thu'][di]}</div>
                <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(24, 1fr)', gap: 2 }}>
                  {row.map((v, hi) => (
                    <div key={hi} style={{ height: mobile ? 11 : 16, background: heatShades[v], border: '1px solid rgba(216,202,190,0.4)', borderRadius: 2 }}/>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* GROWING UP */}
      <div style={{ marginTop: mobile ? 30 : 44 }}>
        <SectionHead
          chapter="Chapter 03" kicker="Growing up" mobile={mobile}
          title={<>How <em style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>Wren</em> is growing.</>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 12 }}>
          {growth.map((g, i) => (
            <div key={i} style={card}>
              <div style={overline}>{g.label}</div>
              {g.comingSoon ? (
                <div style={{ font: '500 15px/1.4 "Newsreader",serif', color: 'var(--fg-3)', marginTop: 12 }}>
                  Coming soon
                </div>
              ) : (
                <>
                  <div style={{ font: '500 32px/1 "Newsreader",serif', color: 'var(--fg-1)', marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 5 }}>
                    {g.value}
                    <span style={{ font: '500 14px/1 "DM Sans"', color: 'var(--fg-2)' }}>{g.unit}</span>
                  </div>
                  <div style={{ font: '400 11px/1.4 "DM Sans"', color: '#7BA585', marginTop: 4 }}>{g.delta}</div>
                  <div style={{ marginTop: 12, height: 44 }}>
                    <MockSpark data={g.data} color={g.color} width={220} height={44}/>
                  </div>
                </>
              )}
            </div>
          ))}
        </div>

        {/* Caregiver activity */}
        <div style={{ ...card, marginTop: 12 }}>
          <div style={overline}>Caregiver activity · last 7 days</div>
          <div style={{ font: '400 11px/1.4 "DM Sans"', color: 'var(--fg-2)', marginTop: 5, marginBottom: 16 }}>Who logged what — split by event type.</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {caregivers.map((cg, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 34, height: 34, borderRadius: 999, background: cg.color, color: '#FFF9F4', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 14px/1 "Newsreader",serif', flexShrink: 0 }}>{cg.initial}</div>
                <div style={{ minWidth: mobile ? 90 : 140 }}>
                  <div style={{ font: '500 13px/1.2 "DM Sans"', color: 'var(--fg-1)' }}>{cg.name}</div>
                  <div style={{ font: '400 10px/1.3 "DM Sans"', color: 'var(--fg-2)' }}>{cg.role}</div>
                </div>
                <div style={{ flex: 1, display: 'flex', height: 14, borderRadius: 5, overflow: 'hidden', background: 'var(--bg-sunken)' }}>
                  <div style={{ width: '38%', background: '#EBC39E' }}/>
                  <div style={{ width: '24%', background: '#B8A9D1' }}/>
                  <div style={{ width: '20%', background: '#B8BEAA' }}/>
                  <div style={{ width: '10%', background: '#D9B7C6' }}/>
                </div>
                <div style={{ font: '500 16px/1 "Newsreader",serif', color: 'var(--fg-1)', minWidth: 30, textAlign: 'right' }}>{cg.count}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* MILESTONES */}
      <div style={{ marginTop: mobile ? 30 : 44 }}>
        <SectionHead
          chapter="Chapter 04" kicker="Milestones" mobile={mobile}
          title={<>The little <em style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>firsts</em>.</>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 12 }}>
          {milestones.map((m, i) => (
            <div key={i} style={{ ...card, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
              <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--oona-primary-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <img src={`assets/illustration-${m.ill}.svg`} alt="" style={{ width: 38, height: 38 }}/>
              </div>
              <div style={{ font: '500 15px/1.3 "Newsreader",serif', color: 'var(--fg-1)', letterSpacing: '-0.01em' }}>{m.label}</div>
              <div style={{ font: '400 11px/1.4 "DM Sans"', color: 'var(--fg-2)' }}>{m.date} · {m.by}</div>
            </div>
          ))}
        </div>
      </div>

      {/* TODAY, IN ORDER */}
      <div style={{ marginTop: mobile ? 30 : 44 }}>
        <SectionHead
          chapter="Chapter 05" kicker="Today, in order" mobile={mobile}
          title={<>The day, <em style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>so far</em>.</>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 10 }}>
          {events.map((ev, i) => (
            <div key={i} style={{
              position: 'relative', background: 'var(--bg-card)', borderRadius: 14,
              padding: '12px 14px 12px 18px', display: 'flex', alignItems: 'center', gap: 12,
              overflow: 'hidden', border: '1px solid var(--border-1)',
            }}>
              <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: EVENT_COLOR[ev.type] }}/>
              <div style={{ width: 34, height: 34, borderRadius: 10, background: EVENT_SOFT[ev.type], display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <img src={`assets/illustration-${EVENT_ILL[ev.type]}.svg`} alt="" style={{ width: 24, height: 24 }}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: '500 13px/1.3 "DM Sans"', color: 'var(--fg-1)' }}>{ev.title}</div>
                <div style={{ font: '400 11px/1.3 "DM Sans"', color: 'var(--fg-2)', marginTop: 1 }}>{ev.t} · logged by {ev.by}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* FOOTER — export */}
      <div style={{
        marginTop: mobile ? 26 : 36, padding: mobile ? '20px 18px' : '24px 28px',
        background: 'var(--oona-primary-soft)', borderRadius: 18,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
      }}>
        <div>
          <div style={{ ...overline, color: 'var(--oona-primary-deep)' }}>Export</div>
          <div style={{ font: '500 18px/1.2 "Newsreader",serif', color: 'var(--fg-1)', marginTop: 6 }}>Take it to the GP.</div>
          <div style={{ font: '400 12px/1.5 "DM Sans"', color: 'var(--fg-2)', marginTop: 4 }}>One tap for a clean PDF of the last fortnight.</div>
        </div>
        <div style={{ font: '600 12px/1 "DM Sans"', background: 'var(--oona-primary)', color: '#FFF9F4', padding: '12px 18px', borderRadius: 12 }}>Download PDF</div>
      </div>
    </div>
  );
}

Object.assign(window, { BrowserFrame, DashboardMock, useIsMobile });