// V2 — Copilot Console
// Stripe-dashboard-like density. Cool blues, warm off-white panel bg.
// Left nav + dense center + pinned AI copilot right rail (400px).

const v2 = {
  bg: '#f6f7f9',
  panel: '#ffffff',
  ink: '#0f172a',
  ink2: '#475569',
  ink3: '#94a3b8',
  ink4: '#cbd5e1',
  line: '#e4e8ee',
  line2: '#f0f2f6',
  blue: '#2563eb',
  blueDeep: '#1d4ed8',
  blueSoft: '#eef3ff',
  indigo: '#4f46e5',
  mint: '#059669',
  mintSoft: '#ecfdf5',
  amber: '#d97706',
  amberSoft: '#fef3c7',
  red: '#dc2626',
  sans: '"Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

function V2Copilot() {
  return (
    <div style={{
      width: '100%', height: '100%', background: v2.bg,
      fontFamily: v2.sans, color: v2.ink, fontSize: 13,
      display: 'grid', gridTemplateColumns: '220px 1fr 400px',
      letterSpacing: '-0.005em',
    }}>
      <V2Sidebar />
      <V2Main />
      <V2Copilot_Panel />
    </div>
  );
}

function V2Sidebar() {
  const sections = [
    { head: null, items: [
      { n: 'Home',        icon: '◈', active: true },
      { n: 'Projects',    icon: '▤', badge: '12' },
      { n: 'Schedule',    icon: '◷' },
      { n: 'Inbox',       icon: '✉', badge: '4' },
    ]},
    { head: 'Operate', items: [
      { n: 'Accounting',  icon: '$' },
      { n: 'Invoices',    icon: '▦', badge: '3' },
      { n: 'Budgets',     icon: '◧' },
      { n: 'Purchasing',  icon: '⌘' },
    ]},
    { head: 'Field', items: [
      { n: 'Crew',        icon: '⚇' },
      { n: 'Materials',   icon: '▢' },
      { n: 'Daily logs',  icon: '◉' },
      { n: 'Safety',      icon: '◐' },
    ]},
    { head: 'Records', items: [
      { n: 'Documents',   icon: '▭' },
      { n: 'RFIs',        icon: '◇' },
      { n: 'Contracts',   icon: '⎔' },
      { n: 'Client portal', icon: '☗' },
    ]},
  ];
  return (
    <div style={{
      background: v2.panel, borderRight: `1px solid ${v2.line}`,
      display: 'flex', flexDirection: 'column', padding: '14px 10px 12px',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '6px 8px 14px',
      }}>
        <div style={{
          width: 26, height: 26, background: v2.ink, color: '#fff',
          borderRadius: 6, display: 'grid', placeItems: 'center',
          fontFamily: v2.mono, fontSize: 13, fontWeight: 600,
        }}>C</div>
        <div>
          <div style={{ fontWeight: 600, fontSize: 13 }}>Ridgeline Dev.</div>
          <div style={{ fontSize: 11, color: v2.ink3 }}>GC · Portland ME</div>
        </div>
        <div style={{ marginLeft: 'auto', color: v2.ink3, fontSize: 14 }}>⌄</div>
      </div>

      <div style={{
        margin: '0 4px 14px', padding: '8px 10px',
        border: `1px solid ${v2.line}`, borderRadius: 6,
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 12, color: v2.ink3,
      }}>
        <span style={{ color: v2.ink3 }}>⌕</span> Search…
        <span style={{
          marginLeft: 'auto', fontFamily: v2.mono, fontSize: 10,
          background: v2.line2, padding: '1px 4px', borderRadius: 3,
        }}>⌘K</span>
      </div>

      {sections.map((s, si) => (
        <div key={si} style={{ marginBottom: 6 }}>
          {s.head && (
            <div style={{
              fontSize: 10, letterSpacing: '0.08em',
              color: v2.ink3, textTransform: 'uppercase',
              padding: '10px 12px 6px', fontWeight: 500,
            }}>{s.head}</div>
          )}
          {s.items.map((it) => (
            <div key={it.n} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '6px 10px', margin: '1px 0', borderRadius: 5,
              background: it.active ? v2.blueSoft : 'transparent',
              color: it.active ? v2.blueDeep : v2.ink2,
              fontWeight: it.active ? 500 : 400, fontSize: 13,
            }}>
              <span style={{
                width: 18, textAlign: 'center', fontSize: 13,
                color: it.active ? v2.blue : v2.ink3,
              }}>{it.icon}</span>
              <span>{it.n}</span>
              {it.badge && (
                <span style={{
                  marginLeft: 'auto', fontFamily: v2.mono, fontSize: 10,
                  background: it.active ? v2.blue : v2.line2,
                  color: it.active ? '#fff' : v2.ink2,
                  padding: '1px 6px', borderRadius: 8,
                }}>{it.badge}</span>
              )}
            </div>
          ))}
        </div>
      ))}

      <div style={{ marginTop: 'auto', padding: '8px 10px', fontSize: 11, color: v2.ink3, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#cbb79a', color: v2.ink, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600 }}>MR</div>
        <span>Marcus Reyes</span>
      </div>
    </div>
  );
}

function V2Main() {
  return (
    <div style={{ padding: '20px 24px 24px', overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: v2.ink3, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 4 }}>
            Tuesday · Apr 21, 2026
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>
            Good morning, Marcus.
          </div>
        </div>
        <V2Seg />
        <div style={{
          padding: '6px 12px', background: v2.ink, color: '#fff',
          borderRadius: 6, fontSize: 12, fontWeight: 500,
        }}>+ New project</div>
      </div>

      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        <V2Kpi label="Active projects" value="12" delta="+2 this qtr" tone="mint" />
        <V2Kpi label="Revenue YTD"     value="$8.42M" delta="+14.2% vs 2025" tone="mint" spark="up" />
        <V2Kpi label="Outstanding AR" value="$1.26M" delta="18 invoices · 4 >60d" tone="amber" spark="flat" />
        <V2Kpi label="Margin (avg)"   value="18.4%" delta="−0.8pp vs plan" tone="red" spark="down" />
      </div>

      {/* middle: two columns */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12, flex: 1, minHeight: 0 }}>
        <V2GanttCard />
        <V2CashCard />
      </div>

      {/* bottom: invoices */}
      <V2InvoicesCard />
    </div>
  );
}

function V2Seg() {
  return (
    <div style={{
      display: 'flex', border: `1px solid ${v2.line}`, borderRadius: 6,
      overflow: 'hidden', background: v2.panel, fontSize: 12,
    }}>
      {['Today','7d','30d','QTR','YTD'].map((t, i) => (
        <div key={t} style={{
          padding: '6px 11px',
          background: i === 3 ? v2.ink : 'transparent',
          color: i === 3 ? '#fff' : v2.ink2,
          borderRight: i < 4 ? `1px solid ${v2.line}` : 'none',
          fontWeight: i === 3 ? 500 : 400,
        }}>{t}</div>
      ))}
    </div>
  );
}

function V2Kpi({ label, value, delta, tone, spark }) {
  const toneCol = { mint: v2.mint, amber: v2.amber, red: v2.red }[tone] || v2.ink2;
  return (
    <div style={{
      background: v2.panel, border: `1px solid ${v2.line}`, borderRadius: 8,
      padding: '14px 16px',
    }}>
      <div style={{ fontSize: 12, color: v2.ink2, marginBottom: 8 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10 }}>
        <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1 }}>
          {value}
        </div>
        <V2Spark tone={tone} shape={spark} />
      </div>
      <div style={{ fontSize: 11, color: toneCol, marginTop: 8, fontWeight: 500 }}>
        {delta}
      </div>
    </div>
  );
}

function V2Spark({ tone, shape }) {
  if (!shape) return null;
  const c = { mint: v2.mint, amber: v2.amber, red: v2.red }[tone] || v2.ink3;
  const paths = {
    up:   'M0 20 L8 16 L16 18 L24 12 L32 14 L40 7 L48 9 L56 4',
    down: 'M0 5  L8 9  L16 7  L24 14 L32 11 L40 18 L48 15 L56 21',
    flat: 'M0 12 L8 10 L16 13 L24 11 L32 14 L40 11 L48 13 L56 12',
  };
  return (
    <svg width="56" height="24" style={{ marginLeft: 'auto' }}>
      <path d={paths[shape]} fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function V2GanttCard() {
  const projects = [
    { name: 'Harborview Blk B', client: 'Calloway Co', start: 5,  len: 78, done: 28,  on: true },
    { name: 'Willow Heights',   client: 'Arden LLC',   start: 0,  len: 58, done: 52,  on: true  },
    { name: 'Cedar Creek Lofts',client: 'Meridian',    start: 12, len: 54, done: 14, on: false, warn: '+6d' },
    { name: 'Fulton Warehouse', client: 'Brightline',  start: 24, len: 40, done: 6,  on: true  },
    { name: 'Pier 7 Restoration', client: 'Port Auth.', start: 38, len: 52, done: 0,  on: true, planning: true },
    { name: 'Elmwood Retail',   client: 'Vantage RE',  start: 48, len: 34, done: 0,  on: true, planning: true },
  ];
  return (
    <div style={{
      background: v2.panel, border: `1px solid ${v2.line}`, borderRadius: 8,
      display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0,
    }}>
      <V2CardHeader title="Active projects" sub="Gantt · Q2–Q4 2026" action="View schedule →" />
      <div style={{ padding: '0 16px 14px', flex: 1, overflow: 'hidden' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(160px,1.2fr) 3fr 64px',
          fontSize: 10, color: v2.ink3, letterSpacing: '0.06em',
          textTransform: 'uppercase', padding: '8px 0 10px',
          borderBottom: `1px solid ${v2.line2}`, fontWeight: 500,
        }}>
          <span>Project</span>
          <span style={{ display: 'flex', justifyContent: 'space-between', padding: '0 6px' }}>
            <span>APR</span><span>MAY</span><span>JUN</span><span>JUL</span><span>AUG</span><span>SEP</span><span>OCT</span><span>NOV</span>
          </span>
          <span style={{ textAlign: 'right' }}>Prog.</span>
        </div>
        {projects.map((p) => (
          <div key={p.name} style={{
            display: 'grid', gridTemplateColumns: 'minmax(160px,1.2fr) 3fr 64px',
            padding: '11px 0', borderBottom: `1px solid ${v2.line2}`,
            fontSize: 12, alignItems: 'center', gap: 8,
          }}>
            <div>
              <div style={{ fontWeight: 500 }}>{p.name}</div>
              <div style={{ fontSize: 11, color: v2.ink3 }}>{p.client}</div>
            </div>
            <div style={{ position: 'relative', height: 16, padding: '0 6px' }}>
              {/* grid lines */}
              {Array.from({ length: 7 }).map((_, i) => (
                <div key={i} style={{
                  position: 'absolute', top: 0, bottom: 0,
                  left: `${((i+1)*100/8) + 1}%`, width: 1, background: v2.line2,
                }} />
              ))}
              <div style={{
                position: 'absolute', top: 4, bottom: 4,
                left: `${p.start}%`, width: `${p.len}%`,
                background: p.planning ? 'transparent' : p.warn ? v2.amberSoft : v2.blueSoft,
                border: p.planning ? `1px dashed ${v2.ink4}` : `1px solid ${p.warn ? v2.amber : v2.blue}`,
                borderRadius: 3, display: 'flex', alignItems: 'center',
                overflow: 'hidden',
              }}>
                {!p.planning && (
                  <div style={{
                    height: '100%', width: `${p.done}%`,
                    background: p.warn ? v2.amber : v2.blue,
                  }} />
                )}
                {p.warn && (
                  <span style={{
                    position: 'absolute', right: 4, top: 0,
                    fontFamily: v2.mono, fontSize: 9, color: v2.amber,
                  }}>{p.warn}</span>
                )}
              </div>
            </div>
            <span style={{ textAlign: 'right', fontFamily: v2.mono, color: p.on ? v2.ink : v2.amber, fontSize: 11 }}>
              {p.planning ? '—' : p.done + '%'}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function V2CashCard() {
  // stacked bar data
  const months = [
    { m: 'Jan', inflow: 1.2, out: 0.9 },
    { m: 'Feb', inflow: 0.8, out: 1.1 },
    { m: 'Mar', inflow: 1.4, out: 1.0 },
    { m: 'Apr', inflow: 1.6, out: 1.2, current: true },
    { m: 'May', inflow: 1.9, out: 1.4, forecast: true },
    { m: 'Jun', inflow: 2.1, out: 1.5, forecast: true },
  ];
  const max = 2.4;
  return (
    <div style={{
      background: v2.panel, border: `1px solid ${v2.line}`, borderRadius: 8,
      display: 'flex', flexDirection: 'column', minHeight: 0,
    }}>
      <V2CardHeader title="Cash flow" sub="Actual + 2mo forecast" action="Detail →" />
      <div style={{ padding: '4px 16px 14px' }}>
        <div style={{ display: 'flex', gap: 18, fontSize: 11, color: v2.ink2, padding: '0 0 10px' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 8, height: 8, background: v2.blue, borderRadius: 2 }} /> Inflow
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 8, height: 8, background: v2.ink4, borderRadius: 2 }} /> Outflow
          </span>
          <span style={{ marginLeft: 'auto', fontFamily: v2.mono, color: v2.ink3 }}>$M</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14,
          height: 170, alignItems: 'end',
        }}>
          {months.map((mo) => (
            <div key={mo.m} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', gap: 4 }}>
              <div style={{ display: 'flex', gap: 4, alignItems: 'end', height: '100%' }}>
                <div style={{
                  width: 14, height: `${(mo.inflow/max)*100}%`,
                  background: mo.forecast ? 'transparent' : v2.blue,
                  border: mo.forecast ? `1.5px dashed ${v2.blue}` : 'none',
                  borderRadius: 2,
                }} />
                <div style={{
                  width: 14, height: `${(mo.out/max)*100}%`,
                  background: mo.forecast ? 'transparent' : v2.ink4,
                  border: mo.forecast ? `1.5px dashed ${v2.ink4}` : 'none',
                  borderRadius: 2,
                }} />
              </div>
              <div style={{ fontSize: 11, color: mo.current ? v2.ink : v2.ink3, fontWeight: mo.current ? 600 : 400 }}>
                {mo.m}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 14, padding: '10px 12px', background: v2.mintSoft,
          borderRadius: 6, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: '50%', background: v2.mint,
            color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 600,
          }}>↗</div>
          <div style={{ fontSize: 12, lineHeight: 1.4 }}>
            <b>+$680K</b> forecast surplus by Jun 30 — cash on hand sufficient for Pier 7 mobilization.
          </div>
        </div>
      </div>
    </div>
  );
}

function V2InvoicesCard() {
  const rows = [
    { num: 'INV-1142', proj: 'Harborview Blk B',  vend: 'Brannigan Concrete',    amt: '$184,220', age: 'due in 4d', status: 'approval', tone: 'amber' },
    { num: 'INV-1141', proj: 'Willow Heights',    vend: 'Atlas Electric',        amt: '$42,800',  age: 'due in 12d',status: 'approved', tone: 'mint' },
    { num: 'INV-1140', proj: 'Cedar Creek Lofts', vend: 'Northern Roofing',      amt: '$96,410',  age: 'due in 18d',status: 'approved', tone: 'mint' },
    { num: 'INV-1139', proj: 'Harborview Blk B',  vend: 'Marley Freight',        amt: '$8,215',   age: 'overdue 3d',status: 'overdue',  tone: 'red'   },
  ];
  return (
    <div style={{
      background: v2.panel, border: `1px solid ${v2.line}`, borderRadius: 8,
      overflow: 'hidden',
    }}>
      <V2CardHeader title="Invoices · needs attention" sub="7 of 18 outstanding" action="Open accounting →" />
      <div>
        <div style={{
          display: 'grid', gridTemplateColumns: '100px 1.2fr 1.2fr 100px 120px 110px',
          padding: '8px 16px', fontSize: 10, letterSpacing: '0.06em',
          color: v2.ink3, textTransform: 'uppercase', fontWeight: 500,
          borderTop: `1px solid ${v2.line2}`,
        }}>
          <span>Number</span><span>Project</span><span>Vendor</span>
          <span style={{ textAlign: 'right' }}>Amount</span><span>Due</span><span>Status</span>
        </div>
        {rows.map((r) => (
          <div key={r.num} style={{
            display: 'grid', gridTemplateColumns: '100px 1.2fr 1.2fr 100px 120px 110px',
            padding: '10px 16px', fontSize: 12,
            borderTop: `1px solid ${v2.line2}`, alignItems: 'center',
          }}>
            <span style={{ fontFamily: v2.mono, color: v2.ink2 }}>{r.num}</span>
            <span>{r.proj}</span>
            <span style={{ color: v2.ink2 }}>{r.vend}</span>
            <span style={{ textAlign: 'right', fontFamily: v2.mono, fontWeight: 500 }}>{r.amt}</span>
            <span style={{ fontSize: 11, color: r.tone === 'red' ? v2.red : v2.ink2 }}>{r.age}</span>
            <span>
              <span style={{
                padding: '2px 8px', borderRadius: 10, fontSize: 10, fontWeight: 500,
                background: r.tone === 'amber' ? v2.amberSoft : r.tone === 'mint' ? v2.mintSoft : '#fee2e2',
                color: r.tone === 'amber' ? v2.amber : r.tone === 'mint' ? v2.mint : v2.red,
              }}>
                {r.status}
              </span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function V2CardHeader({ title, sub, action }) {
  return (
    <div style={{
      padding: '14px 16px 10px', display: 'flex', alignItems: 'center', gap: 12,
      borderBottom: `1px solid ${v2.line2}`,
    }}>
      <div>
        <div style={{ fontWeight: 600, fontSize: 13 }}>{title}</div>
        {sub && <div style={{ fontSize: 11, color: v2.ink3, marginTop: 2 }}>{sub}</div>}
      </div>
      {action && <div style={{ marginLeft: 'auto', fontSize: 12, color: v2.blue, fontWeight: 500 }}>{action}</div>}
    </div>
  );
}

// ── Copilot right rail ────────────────────────────────────────
function V2Copilot_Panel() {
  return (
    <div style={{
      background: v2.panel, borderLeft: `1px solid ${v2.line}`,
      display: 'flex', flexDirection: 'column', minHeight: 0,
    }}>
      <div style={{
        padding: '14px 18px', borderBottom: `1px solid ${v2.line}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 24, height: 24, borderRadius: 6,
          background: `linear-gradient(135deg, ${v2.blue}, ${v2.indigo})`,
          display: 'grid', placeItems: 'center', color: '#fff',
          fontFamily: v2.mono, fontSize: 11, fontWeight: 600,
        }}>C</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Copilot</div>
          <div style={{ fontSize: 11, color: v2.ink3 }}>Watching 12 projects · live</div>
        </div>
        <div style={{ marginLeft: 'auto', fontSize: 16, color: v2.ink3 }}>⌄</div>
      </div>

      <div style={{ padding: '14px 18px', flex: 1, overflow: 'auto' }}>
        {/* Daily brief */}
        <V2CoSection title="Your morning brief">
          <div style={{ fontSize: 12, lineHeight: 1.55, color: v2.ink, marginBottom: 10 }}>
            3 things need you today. <b>Harborview</b> is trending <b style={{ color: v2.amber }}>3 days behind</b> on framing — I drafted a recovery plan. <b>Cedar Creek</b> has an inspection at 14:00. And <b>INV-1142</b> ($184K) needs your approval before 17:00 to stay on vendor terms.
          </div>
        </V2CoSection>

        {/* Alerts */}
        <V2CoSection title="Watching for you" count="4">
          {[
            { kind: 'risk',  t: 'Cedar Creek — weather may push Thu pour',  meta: 'Rain 60% · Apr 23' },
            { kind: 'cost',  t: 'Permits/fees at 82% of plan',                meta: 'Harborview · line 04' },
            { kind: 'doc',   t: 'New drawing rev D — 14 sheets changed',      meta: 'Arch · Studio North' },
            { kind: 'crew',  t: '2 framers out sick · resched. form framing',  meta: 'Field log · 07:20' },
          ].map((a, i) => (
            <div key={i} style={{
              padding: '10px 0', borderTop: i ? `1px solid ${v2.line2}` : 'none',
              display: 'flex', gap: 10, alignItems: 'flex-start',
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 5,
                background: v2.blueSoft, color: v2.blue,
                display: 'grid', placeItems: 'center', fontSize: 11, flexShrink: 0,
              }}>
                {{risk: '⚠', cost: '$', doc: '▭', crew: '⚇'}[a.kind]}
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, marginBottom: 2, lineHeight: 1.4 }}>{a.t}</div>
                <div style={{ fontSize: 11, color: v2.ink3 }}>{a.meta}</div>
              </div>
            </div>
          ))}
        </V2CoSection>

        {/* Recovery plan card */}
        <V2CoSection title="Drafted for review">
          <div style={{
            border: `1px solid ${v2.line}`, borderRadius: 8, padding: 12,
            background: v2.bg,
          }}>
            <div style={{ fontSize: 10, color: v2.ink3, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>
              Recovery plan · Harborview framing
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.5, marginBottom: 10 }}>
              Add 2 framers from Portland pool for 5 days (+$4,800), compress MEP rough start −2d. Net schedule: <b style={{ color: v2.mint }}>0d</b>.
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <div style={{
                padding: '5px 12px', background: v2.ink, color: '#fff',
                fontSize: 11, fontWeight: 500, borderRadius: 5,
              }}>Apply plan</div>
              <div style={{
                padding: '5px 12px', border: `1px solid ${v2.line}`,
                fontSize: 11, fontWeight: 500, borderRadius: 5, color: v2.ink2,
              }}>Open details</div>
            </div>
          </div>
        </V2CoSection>

        {/* Suggested */}
        <V2CoSection title="Try asking">
          {[
            'Which project has the most at-risk margin?',
            'Summarize all RFIs opened this week',
            'Draft a client update for Calloway',
            'Forecast cash through end of Q3',
          ].map((s, i) => (
            <div key={i} style={{
              padding: '8px 10px', background: v2.line2, borderRadius: 6,
              fontSize: 12, color: v2.ink2, marginBottom: 6,
              display: 'flex', gap: 8, alignItems: 'center',
            }}>
              <span style={{ color: v2.blue }}>→</span> {s}
            </div>
          ))}
        </V2CoSection>
      </div>

      {/* Input */}
      <div style={{
        padding: 14, borderTop: `1px solid ${v2.line}`, background: v2.bg,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 12px', background: v2.panel,
          border: `1px solid ${v2.line}`, borderRadius: 8,
          fontSize: 13, color: v2.ink3,
        }}>
          <span>Ask Copilot anything…</span>
          <span style={{ marginLeft: 'auto', color: v2.ink3, fontSize: 16 }}>↵</span>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 8, fontSize: 11, color: v2.ink3 }}>
          <span style={{ padding: '3px 7px', border: `1px solid ${v2.line}`, borderRadius: 4 }}>@project</span>
          <span style={{ padding: '3px 7px', border: `1px solid ${v2.line}`, borderRadius: 4 }}>/draft</span>
          <span style={{ padding: '3px 7px', border: `1px solid ${v2.line}`, borderRadius: 4 }}>/forecast</span>
        </div>
      </div>
    </div>
  );
}

function V2CoSection({ title, count, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        fontSize: 10, color: v2.ink3, textTransform: 'uppercase',
        letterSpacing: '0.08em', marginBottom: 10, fontWeight: 500,
      }}>
        {title}
        {count && (
          <span style={{
            fontFamily: v2.mono, background: v2.line2,
            color: v2.ink2, padding: '1px 5px', borderRadius: 3,
            letterSpacing: 'normal',
          }}>{count}</span>
        )}
      </div>
      {children}
    </div>
  );
}

Object.assign(window, { V2Copilot });