// Browser/laptop window + faithful static rendering of the editorial dashboard.
// Exposes: BrowserFrame, DashboardMock

function BrowserFrame({ children, url = 'dashboard.oonapp.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>
  );
}

// Static rendering of the editorial dashboard (direction A) - showcase version
function DashboardMock() {
  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 c = (type) => ({ feed: '#EBC39E', sleep: '#B8A9D1', nappy: '#B8BEAA', pump: '#D9B7C6', note: '#D8CABE' }[type]);

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

  const sleepMax = Math.max(...sleepTrend), sleepMin = Math.min(...sleepTrend);
  const sleepPath = sleepTrend.map((v, i) => {
    const x = (i / (sleepTrend.length - 1)) * 240;
    const y = 50 - ((v - sleepMin) / (sleepMax - sleepMin)) * 40 - 5;
    return `${i ? 'L' : 'M'}${x},${y}`;
  }).join(' ');

  return (
    <div style={{ background: 'var(--bg-app)', padding: '24px 36px 32px', fontFamily: 'var(--font-body)' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          <span style={{ font: '500 26px/1 "Newsreader", serif', color: 'var(--oona-primary)', letterSpacing: '-0.04em' }}>oona</span>
          <nav style={{ display: 'flex', gap: 20, font: '500 12px/1 "DM Sans"' }}>
            <a style={{ color: 'var(--fg-1)' }}>Today</a>
            <a style={{ color: 'var(--fg-2)' }}>Patterns</a>
            <a style={{ color: 'var(--fg-2)' }}>Milestones</a>
            <a style={{ color: 'var(--fg-2)' }}>Family</a>
          </nav>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border-1)', borderRadius: 999, padding: '4px 10px 4px 4px', display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 22, height: 22, borderRadius: 999, background: '#EBC39E', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 11px/1 "Newsreader", serif', color: '#5F567A' }}>W</div>
            <span style={{ font: '500 11px/1 "DM Sans"' }}>Wren</span>
          </div>
        </div>
      </div>

      {/* HERO */}
      <div style={{ marginBottom: 24, maxWidth: 760 }}>
        <div style={{ font: '500 11px/1 "DM Sans"', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--fg-2)', marginBottom: 10 }}>
          Thursday · 15 May 2026 · day 132
        </div>
        <h1 style={{
          font: '500 42px/1.1 "Newsreader",serif', color: 'var(--fg-1)',
          letterSpacing: '-0.02em', margin: 0,
        }}>
          A steady morning. Wren slept <span style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>11h 20m</span> and has fed <span style={{ color: 'var(--oona-primary)', fontStyle: 'italic' }}>6 times</span>.
        </h1>
      </div>

      {/* Pull-quote stat row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)', padding: '20px 0' }}>
        {[
          { k: 'Feeds',      v: '6',       s: 'avg 6.5 / day' },
          { k: 'Sleep',      v: '11h 20m', s: 'longest 6h 40m' },
          { k: 'Nappies',    v: '5',       s: '3 wet · 2 dirty' },
          { k: 'Awake now',  v: '1h 06m',  s: 'since 06:50' },
        ].map((s, i) => (
          <div key={i} style={{ padding: i ? '0 20px' : '0 20px 0 0', borderLeft: i ? '1px solid var(--border-1)' : 0 }}>
            <div style={{ font: '500 10px/1 "DM Sans"', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--fg-2)' }}>{s.k}</div>
            <div style={{ font: '500 28px/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: 4 }}>{s.s}</div>
          </div>
        ))}
      </div>

      {/* Two cols — timeline + week */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 220px', gap: 32, marginTop: 30 }}>

        {/* Timeline */}
        <div>
          <div style={{ font: '500 10px/1 "DM Sans"', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--fg-2)', marginBottom: 14 }}>Today, in order</div>
          <div style={{ position: 'relative', paddingLeft: 24 }}>
            <div style={{ position: 'absolute', left: 9, top: 6, bottom: 6, width: 1, background: 'var(--border-1)' }}/>
            {events.map((ev, i) => (
              <div key={i} style={{ position: 'relative', paddingBottom: 18 }}>
                <div style={{ position: 'absolute', left: -19, top: 6, width: 8, height: 8, borderRadius: 999, background: c(ev.type), boxShadow: '0 0 0 3px var(--bg-app)' }}/>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span style={{ font: '500 11px/1 "DM Mono",monospace', color: 'var(--fg-2)', minWidth: 38 }}>{ev.t}</span>
                  <div>
                    <div style={{ font: '500 14px/1.35 "Newsreader",serif' }}>{ev.title}</div>
                    <div style={{ font: '400 11px/1.3 "DM Sans"', color: 'var(--fg-2)', marginTop: 1 }}>logged by {ev.by}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Week */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <div style={{ font: '500 10px/1 "DM Sans"', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--fg-2)' }}>This week</div>

          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ font: '500 12px/1 "Newsreader",serif' }}>Feeds</span>
              <span style={{ font: '500 10px/1 "DM Sans"', color: 'var(--fg-2)' }}>45</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 36, marginTop: 6 }}>
              {feedsTrend.map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${(v / Math.max(...feedsTrend)) * 100}%`, background: '#EBC39E', borderRadius: '3px 3px 1px 1px' }}/>
              ))}
            </div>
          </div>

          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ font: '500 12px/1 "Newsreader",serif' }}>Sleep</span>
              <span style={{ font: '500 10px/1 "DM Sans"', color: 'var(--fg-2)' }}>10h avg</span>
            </div>
            <svg viewBox="0 0 240 50" style={{ width: '100%', marginTop: 6 }}>
              <path d={`${sleepPath} L240,50 L0,50 Z`} fill="#B8A9D1" opacity="0.3"/>
              <path d={sleepPath} fill="none" stroke="#B8A9D1" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </div>

          <div style={{ padding: 14, background: 'var(--oona-primary-soft)', borderRadius: 14 }}>
            <div style={{ font: '500 10px/1 "DM Sans"', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--oona-primary-deep)' }}>Milestone</div>
            <div style={{ font: '500 14px/1.3 "Newsreader",serif', marginTop: 8 }}>"First real giggle today."</div>
            <div style={{ font: '400 10px/1.4 "DM Sans"', color: 'var(--fg-2)', marginTop: 6 }}>Mum · 19:30</div>
          </div>
        </div>
      </div>
    </div>
  );
}

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