// AI Panel — prominent, feels live and coaching
function AiPanel() {
  const [dismissed, setDismissed] = React.useState([]);
  const shown = AI_INSIGHTS.filter((_, i) => !dismissed.includes(i));
  return (
    <aside style={{
      position: 'sticky', top: 80, alignSelf: 'start',
      display: 'flex', flexDirection: 'column', gap: 12,
      height: 'calc(100vh - 100px)', overflow: 'auto', paddingRight: 2,
    }}>
      <div style={{
        padding: 18, borderRadius: 16,
        background: 'linear-gradient(140deg, #063B42 0%, var(--brand-700) 45%, var(--brand-500) 100%)',
        color: '#fff', position: 'relative', overflow: 'hidden',
        boxShadow: '0 8px 24px rgba(11, 106, 116, 0.25)',
      }}>
        {/* decorative orbs */}
        <div style={{ position: 'absolute', top: -40, right: -30, width: 140, height: 140,
          borderRadius: '50%', background: 'radial-gradient(circle, rgba(157,239,197,0.25), transparent 70%)', pointerEvents: 'none' }}/>
        <div style={{ position: 'absolute', bottom: -30, left: -20, width: 100, height: 100,
          borderRadius: '50%', background: 'radial-gradient(circle, rgba(124,209,216,0.3), transparent 70%)', pointerEvents: 'none' }}/>

        {/* Top row: brand + live pill */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, position: 'relative' }}>
          <div style={{
            width: 34, height: 34, borderRadius: 10,
            background: 'rgba(255,255,255,0.18)',
            backdropFilter: 'blur(8px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '1px solid rgba(255,255,255,0.25)',
          }}><Icon.sparkle/></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.1, lineHeight: 1.15 }}>Norwill&nbsp;AI</div>
            <div style={{ fontSize: 10.5, opacity: 0.75, letterSpacing: 0.06, textTransform: 'uppercase', fontWeight: 600, marginTop: 1 }}>Always thinking</div>
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '3px 8px 3px 7px', borderRadius: 99,
            background: 'rgba(255,255,255,0.16)',
            border: '1px solid rgba(255,227,168,0.45)',
            fontSize: 10.5, fontWeight: 700, letterSpacing: 0.06,
          }} title="Sample insights — not generated from live data">
            DEMO
          </div>
        </div>

        {/* Hero stat */}
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, lineHeight: 1 }}>
            <div style={{ fontSize: 42, fontWeight: 700, letterSpacing: -1.5 }}>{shown.length}</div>
            <div style={{ fontSize: 14, fontWeight: 600, opacity: 0.95, letterSpacing: -0.1 }}>
              sample insights<br/>
              <span style={{ fontSize: 11.5, opacity: 0.8, fontWeight: 500 }}>preview of what live AI will surface</span>
            </div>
          </div>
        </div>

        {/* Mini stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 14, position: 'relative' }}>
          {[
            { n: '1', l: 'Anomaly', c: '#FFC9C5' },
            { n: '1', l: 'Prediction', c: '#FFE3A8' },
            { n: '2', l: 'Suggestions', c: '#C5F0D5' },
          ].map(s => (
            <div key={s.l} style={{
              padding: '8px 10px', borderRadius: 9,
              background: 'rgba(255,255,255,0.12)',
              border: '1px solid rgba(255,255,255,0.15)',
              backdropFilter: 'blur(4px)',
            }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: s.c, lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontSize: 10, opacity: 0.85, marginTop: 4, letterSpacing: 0.02, fontWeight: 500 }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Footer meta */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 14, paddingTop: 12,
          borderTop: '1px solid rgba(255,255,255,0.18)', fontSize: 10.5, opacity: 0.82, position: 'relative' }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          <span>Demo content · live AI lands once metrics history accrues</span>
        </div>
      </div>

      {shown.map((ins, i) => (
        <InsightCard key={i} insight={ins} onDismiss={() => setDismissed([...dismissed, AI_INSIGHTS.indexOf(ins)])}/>
      ))}

      <div className="card" style={{ padding: 14 }}>
        <div style={{ fontSize: 11.5, color: 'var(--ink-500)', fontWeight: 600,
          textTransform: 'uppercase', letterSpacing: 0.06 }}>Ask Norwill AI</div>
        <div style={{
          marginTop: 8, padding: '8px 10px', border: '1px solid var(--line-strong)',
          borderRadius: 9, display: 'flex', alignItems: 'center', gap: 8,
          background: 'var(--card-alt)',
        }}>
          <Icon.sparkle/>
          <input placeholder="Why is show rate dropping?" style={{
            flex: 1, border: 'none', outline: 'none', background: 'transparent',
            fontSize: 12.5, color: 'var(--ink-800)',
          }}/>
          <button style={{ background: 'var(--brand-700)', color: '#fff', border: 'none',
            borderRadius: 7, padding: '5px 9px', fontSize: 11, fontWeight: 600 }}>Ask</button>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
          {['Draft L10 agenda', 'Suggest Q3 targets', 'Who\u2019s behind on entry?'].map(s => (
            <button key={s} style={{
              fontSize: 11, padding: '4px 9px', borderRadius: 99,
              border: '1px solid var(--line-strong)', background: 'var(--card)',
              color: 'var(--ink-700)', cursor: 'pointer',
            }}>{s}</button>
          ))}
        </div>
      </div>
    </aside>
  );
}

function InsightCard({ insight, onDismiss }) {
  const kindMeta = {
    anomaly: { label: 'ANOMALY', color: 'var(--bad)',   bg: 'var(--bad-bg)'  },
    goal:    { label: 'SUGGESTED GOAL', color: 'var(--brand-700)', bg: 'var(--brand-100)' },
    predict: { label: 'PREDICTION',     color: 'var(--warn)', bg: 'var(--warn-bg)' },
    coach:   { label: 'COACHING',       color: 'var(--ink-700)', bg: 'var(--ink-100)' },
  }[insight.kind];
  return (
    <div className="card" style={{ padding: 14, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
        <span style={{
          fontSize: 10, fontWeight: 700, letterSpacing: 0.06,
          padding: '3px 7px', borderRadius: 5, background: kindMeta.bg, color: kindMeta.color,
        }}>{kindMeta.label}</span>
        {insight.demo && <span title="Sample content — not generated from live data" style={{
          fontSize: 9.5, fontWeight: 700, letterSpacing: 0.08,
          padding: '2px 6px', borderRadius: 4,
          background: 'var(--warn-bg)', color: 'var(--warn)',
          border: '1px solid var(--warn)',
        }}>DEMO</span>}
        <span style={{ flex: 1 }}/>
        <button onClick={onDismiss} style={{ background: 'none', border: 'none', color: 'var(--ink-400)', cursor: 'pointer', padding: 2 }}>
          <Icon.close/>
        </button>
      </div>
      <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.3, color: 'var(--ink-900)' }}>{insight.title}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-600)', marginTop: 6, lineHeight: 1.5 }}>{insight.body}</div>
      <ul style={{ margin: '8px 0 0', paddingLeft: 14, color: 'var(--ink-700)', fontSize: 11.5, lineHeight: 1.55 }}>
        {insight.bullets.map((b, i) => <li key={i} style={{ marginBottom: 3 }}>{b}</li>)}
      </ul>
      <div style={{
        marginTop: 10, padding: '8px 10px', borderRadius: 8,
        background: 'var(--brand-50)', border: '1px dashed var(--brand-300)',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <Icon.sparkle/>
        <div style={{ fontSize: 11.5, color: 'var(--brand-800)', flex: 1 }}>{insight.suggest}</div>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
        <button style={{
          background: 'var(--brand-700)', color: '#fff', border: 'none',
          fontSize: 11.5, padding: '6px 10px', borderRadius: 7, fontWeight: 600,
        }}>Apply</button>
        <button style={{
          background: 'var(--card)', color: 'var(--ink-700)',
          border: '1px solid var(--line-strong)', fontSize: 11.5,
          padding: '6px 10px', borderRadius: 7, fontWeight: 500,
        }}>Explain more</button>
      </div>
    </div>
  );
}

Object.assign(window, { AiPanel, InsightCard });