// V6 — Briefing
// Editorial morning-paper vibe. Serif hero, typewritten daily brief,
// counting numbers, vertical day spine, weather-per-site strip.

const v6 = {
  bg: '#f7f3ec',
  paper: '#ffffff',
  ink: '#121010',
  ink2: '#4a423a',
  ink3: '#8a7f72',
  line: '#e5ddcf',
  line2: '#efe8dc',
  accent: '#a8341f',
  gold: '#b8860b',
  mint: '#3f6f52',
  serif: '"Instrument Serif", "Playfair Display", Georgia, serif',
  sans: '"Inter Tight", -apple-system, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

function V6Briefing() {
  return (
    <div style={{
      width: '100%', height: '100%', background: v6.bg, color: v6.ink,
      fontFamily: v6.sans, fontSize: 13, overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '68px 1fr',
    }}>
      <V6Spine />
      <V6Main />
      <style>{`
        @keyframes v6TypeIn { from { width: 0 } to { width: var(--w, 100%) } }
        @keyframes v6FadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
        @keyframes v6Caret { 50% { opacity: 0 } }
        @keyframes v6InkSpread { 0% { transform: scaleX(0); transform-origin: left } 100% { transform: scaleX(1); transform-origin: left } }
        @keyframes v6BarGrow { from { transform: scaleY(0.05); transform-origin: bottom } to { transform: scaleY(1); transform-origin: bottom } }
      `}</style>
    </div>
  );
}

function V6Spine() {
  const days = ['S','M','T','W','T','F','S'];
  const today = 2;
  return (
    <div style={{
      borderRight: `1px solid ${v6.line}`, background: v6.paper,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '18px 0', gap: 18,
    }}>
      <div style={{ width: 30, height: 30, background: v6.ink, color: v6.bg, borderRadius: 6, display: 'grid', placeItems: 'center', fontFamily: v6.serif, fontSize: 16, fontWeight: 600, fontStyle: 'italic' }}>C</div>
      <div style={{ fontFamily: v6.mono, fontSize: 9, letterSpacing: '0.15em', color: v6.ink3, writingMode: 'vertical-rl', transform: 'rotate(180deg)', marginTop: 4 }}>
        DAILY  ·  VOL. 28  ·  APR 21
      </div>
      <div style={{ flex: 1 }} />
      {days.map((d, i) => (
        <div key={i} style={{
          width: 36, padding: '8px 0', textAlign: 'center',
          borderRadius: 4, background: i === today ? v6.ink : 'transparent',
          color: i === today ? v6.bg : v6.ink2,
          fontFamily: v6.serif, fontStyle: 'italic', fontSize: 15,
        }}>
          <div style={{ fontSize: 9, letterSpacing: '0.1em', fontFamily: v6.mono, fontStyle: 'normal', opacity: 0.7 }}>{d}</div>
          <div style={{ marginTop: 2 }}>{19 + i}</div>
        </div>
      ))}
      <div style={{ flex: 1 }} />
    </div>
  );
}

function V6Main() {
  return (
    <div style={{ display: 'grid', gridTemplateRows: 'auto 1fr auto', overflow: 'hidden' }}>
      <V6Masthead />
      <V6Body />
      <V6Weather />
    </div>
  );
}

function V6Masthead() {
  return (
    <div style={{ padding: '20px 28px 12px', borderBottom: `2px solid ${v6.ink}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: v6.mono, fontSize: 10, letterSpacing: '0.1em', color: v6.ink3, textTransform: 'uppercase' }}>
        <span>Ridgeline Development  ·  Portland, ME</span>
        <span>Tuesday, April 21</span>
        <span>All-weather</span>
      </div>
      <div style={{ fontFamily: v6.serif, fontStyle: 'italic', fontSize: 54, letterSpacing: '-0.02em', lineHeight: 1, marginTop: 8 }}>
        The <span style={{ color: v6.accent }}>Daily</span> Brief.
      </div>
      <div style={{ fontFamily: v6.serif, fontSize: 14, color: v6.ink2, marginTop: 6, fontStyle: 'italic' }}>
        Everything that moved since you closed the laptop — in four paragraphs and twelve numbers.
      </div>
    </div>
  );
}

function V6Body() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 0, overflow: 'hidden' }}>
      <V6Lead />
      <V6Numbers />
    </div>
  );
}

function V6Lead() {
  const lines = [
    'Framing at Harborview Block B crossed 62% overnight — three days ahead of the baseline.',
    'Brannigan Concrete filed $184,220 for slab B; the ticket is 8.2% over budget and likely tied to a rebar price jump.',
    'Calloway Co signed Draw #7 at 06:41. $842k is on its way; payouts to four subs are prepared and waiting on your approval.',
    'One item needs your signature today: CO-017 on Low-E glazing, quoted at $42,180.',
  ];
  const [n, setN] = React.useState(0);
  React.useEffect(() => { const t = setInterval(() => setN(v => Math.min(v + 1, lines.length)), 1200); return () => clearInterval(t); }, []);
  return (
    <div style={{ padding: '20px 28px', borderRight: `1px solid ${v6.line}`, display: 'flex', flexDirection: 'column', gap: 14, overflow: 'auto' }}>
      <div style={{ fontFamily: v6.mono, fontSize: 10, letterSpacing: '0.1em', color: v6.ink3 }}>LEAD  ·  WRITTEN BY CONTRO · 06:48</div>
      <div style={{ fontFamily: v6.serif, fontSize: 22, fontStyle: 'italic', letterSpacing: '-0.01em', lineHeight: 1.2 }}>
        Four things happened while you slept.
      </div>
      <div style={{ columnCount: 1, fontFamily: v6.serif, fontSize: 16, lineHeight: 1.55, color: v6.ink }}>
        {lines.map((l, i) => (
          <p key={i} style={{
            margin: '0 0 10px', opacity: i < n ? 1 : 0, transform: i < n ? 'translateY(0)' : 'translateY(6px)',
            transition: 'all 700ms cubic-bezier(.2,.8,.2,1)',
          }}>
            <span style={{
              fontFamily: v6.serif, fontSize: 26, color: v6.accent, fontWeight: 600,
              float: 'left', lineHeight: 0.9, marginRight: 6, marginTop: 4,
              opacity: i === 0 ? 1 : 0,
            }}>{i === 0 ? 'F' : ''}</span>
            {i === 0 ? l.slice(1) : l}
            {i === n - 1 && <span style={{ display: 'inline-block', width: 2, height: 18, background: v6.accent, marginLeft: 2, verticalAlign: 'text-bottom', animation: 'v6Caret 1s steps(2) infinite' }} />}
          </p>
        ))}
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', gap: 8 }}>
        {['Read aloud','Sign CO-017','Approve payouts','Ask Contro'].map((a, i) => (
          <span key={a} style={{
            padding: '6px 11px', fontSize: 11, fontFamily: v6.serif, fontStyle: 'italic',
            border: `1px solid ${i === 1 ? v6.ink : v6.line}`,
            background: i === 1 ? v6.ink : v6.paper,
            color: i === 1 ? v6.bg : v6.ink,
            borderRadius: 4, animation: `v6FadeUp 500ms ${i * 120}ms both`,
          }}>{a}</span>
        ))}
      </div>
    </div>
  );
}

function V6Numbers() {
  return (
    <div style={{ padding: '20px 28px', display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 18, overflow: 'hidden' }}>
      <div style={{ fontFamily: v6.mono, fontSize: 10, letterSpacing: '0.1em', color: v6.ink3 }}>BY THE NUMBERS</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignContent: 'start' }}>
        <V6Number label="Revenue YTD" target={5.27} prefix="$" suffix="M" delta="+8.1% MoM" />
        <V6Number label="Margin" target={18.4} suffix="%" delta="+0.4 pts" />
        <V6Number label="Crew on site" target={41} suffix=" / 44" delta="3 out sick" />
        <V6Number label="Open RFIs" target={7} delta="2 overdue" negative />
      </div>
      <V6Sparks />
    </div>
  );
}

function V6Number({ label, target, prefix='', suffix='', delta, negative }) {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    const start = Date.now(); const dur = 1400;
    const id = setInterval(() => {
      const t = Math.min(1, (Date.now() - start) / dur);
      const eased = 1 - Math.pow(1 - t, 3);
      setV(eased * target);
      if (t >= 1) clearInterval(id);
    }, 24);
    return () => clearInterval(id);
  }, [target]);
  const display = target % 1 === 0 ? Math.round(v) : v.toFixed(target < 10 ? 2 : 1);
  return (
    <div style={{ borderTop: `1px solid ${v6.line}`, paddingTop: 10 }}>
      <div style={{ fontSize: 10, letterSpacing: '0.08em', color: v6.ink3, fontFamily: v6.mono, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontFamily: v6.serif, fontSize: 38, fontStyle: 'italic', letterSpacing: '-0.03em', lineHeight: 1.05, marginTop: 4 }}>
        {prefix}{display}{suffix}
      </div>
      <div style={{ fontSize: 11, color: negative ? v6.accent : v6.mint, marginTop: 2, fontFamily: v6.serif, fontStyle: 'italic' }}>
        {delta}
      </div>
    </div>
  );
}

function V6Sparks() {
  const bars = [3,4,3,5,6,5,7,6,8,7,9,10,9,11];
  return (
    <div style={{ borderTop: `1px solid ${v6.line}`, paddingTop: 10 }}>
      <div style={{ fontSize: 10, letterSpacing: '0.08em', color: v6.ink3, fontFamily: v6.mono, textTransform: 'uppercase' }}>Cash balance · 14d</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 42, marginTop: 6 }}>
        {bars.map((h, i) => (
          <div key={i} style={{
            flex: 1, height: `${(h / 11) * 100}%`, background: i === bars.length - 1 ? v6.accent : v6.ink,
            animation: `v6BarGrow 800ms ${i * 60}ms cubic-bezier(.2,.8,.2,1) both`,
          }} />
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: v6.mono, fontSize: 9, color: v6.ink3, marginTop: 4 }}>
        <span>Apr 8</span><span>today</span>
      </div>
    </div>
  );
}

function V6Weather() {
  const sites = [
    ['Harborview Blk B',  'Clear',    '58°', '☀'],
    ['Pine Ridge L3',     'Breeze',   '54°', '◌'],
    ['East Bay Lofts',    'Light rain 2pm','61°', '☂'],
    ['Meridian Tower',    'Clear',    '57°', '☀'],
    ['Foster & 9th',      'Overcast', '52°', '☁'],
    ['Warehouse Fit-out', 'Clear',    '56°', '☀'],
  ];
  return (
    <div style={{
      borderTop: `1px solid ${v6.ink}`, background: v6.paper, padding: '10px 28px',
      display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 20, alignItems: 'center',
    }}>
      <div style={{ fontFamily: v6.serif, fontStyle: 'italic', fontSize: 18, letterSpacing: '-0.01em' }}>Across the sites</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
        {sites.map((s, i) => (
          <div key={i} style={{ borderLeft: `1px solid ${v6.line}`, paddingLeft: 10, animation: `v6FadeUp 500ms ${i*80}ms both` }}>
            <div style={{ fontSize: 10, color: v6.ink3, letterSpacing: '0.04em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s[0]}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 2 }}>
              <span style={{ fontFamily: v6.serif, fontSize: 20, fontStyle: 'italic' }}>{s[2]}</span>
              <span style={{ fontSize: 11, color: v6.ink2 }}>{s[1]}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { V6Briefing });