// dashboard-mock.jsx — the hero dashboard visual

function HeroDashboard() {
  const kpis = [
    { label: 'Taux transfo', val: '18.4', unit: '%', delta: '+2.1', good: true },
    { label: 'CPL moyen', val: '47', unit: '€', delta: '-8€', good: true },
    { label: 'RDV honorés', val: '71', unit: '%', delta: '+4', good: true },
    { label: 'Panier signé', val: '18.4', unit: 'k€', delta: '+3.2', good: true },
  ];
  const pipeline = [
    { stage: 'Nouveau', n: 42, v: 412, pct: 100 },
    { stage: 'Qualifié', n: 28, v: 298, pct: 72 },
    { stage: 'RDV', n: 19, v: 221, pct: 54 },
    { stage: 'Audit', n: 12, v: 158, pct: 38 },
    { stage: 'Devis', n: 8, v: 104, pct: 25 },
    { stage: 'Signé', n: 5, v: 72, pct: 18 },
  ];
  const actions = [
    { name: 'Martine Lefèvre', loc: '75015 · ITE 120m²', score: 94, hint: 'A ouvert le devis 3× en 24h', cta: 'Appeler', val: '28 400 €', urgent: true },
    { name: 'Romain Garcia', loc: '33000 · PAC air/eau', score: 87, hint: 'RDV honoré hier, aucune relance', cta: 'Envoyer devis', val: '14 200 €', urgent: true },
    { name: 'Sofia Almeida', loc: '69007 · Combles', score: 81, hint: 'Éligible MPR Bleu · +6 200 €', cta: 'Rappeler', val: '8 900 €' },
  ];

  return (
    <div className="mock-window">
      <div className="mock-bar">
        <div className="tl r"/><div className="tl y"/><div className="tl g"/>
        <div className="url">
          <span>app.ecocore.app<b>/dashboard</b></span>
        </div>
        <div style={{ fontSize: 10.5, color: 'var(--text-mute)', fontFamily: 'JetBrains Mono, monospace' }}>LIVE</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: 520 }}>
        {/* Sidebar */}
        <div style={{ borderRight: '1px solid var(--border)', padding: 14, background: '#0c0e0c' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 8px', marginBottom: 16 }}>
            <div style={{ width: 16, height: 16, borderRadius: 4, background: 'var(--accent)' }}/>
            <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: -0.2 }}>ecocore</span>
          </div>
          {[
            { n: 'Tableau de bord', active: true },
            { n: 'Pipeline' }, { n: 'Leads' }, { n: 'Clients' },
            { n: 'Devis' }, { n: 'Dossiers MPR' }, { n: 'Agenda' }, { n: 'Équipe' },
          ].map((it, i) => (
            <div key={i} style={{
              padding: '6px 9px', borderRadius: 5, marginBottom: 1,
              fontSize: 11.5, letterSpacing: -0.1,
              color: it.active ? 'var(--text)' : 'var(--text-mute)',
              background: it.active ? 'var(--card)' : 'transparent',
              border: `1px solid ${it.active ? 'var(--border-hi)' : 'transparent'}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span>{it.n}</span>
              {it.n === 'Leads' && <span style={{ fontSize: 9.5, color: 'var(--accent)', fontFamily: 'JetBrains Mono, monospace' }}>42</span>}
            </div>
          ))}
          <div style={{
            marginTop: 20, padding: 10, borderRadius: 8,
            background: 'color-mix(in oklab, var(--accent) 10%, transparent)',
            border: '1px solid var(--accent-border)',
            fontSize: 10.5, color: 'var(--accent)',
            fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.2,
          }}>
            ● 8 actions IA prêtes
          </div>
        </div>

        {/* Main */}
        <div style={{ padding: 18, overflow: 'hidden' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.2 }}>Vue d'ensemble</div>
              <div style={{ fontSize: 11, color: 'var(--text-mute)', marginTop: 2 }}>Performance · 30 derniers jours</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <div style={{ padding: '3px 8px', border: '1px solid var(--border)', borderRadius: 5, fontSize: 10.5, color: 'var(--text-dim)', fontFamily: 'JetBrains Mono, monospace' }}>30J</div>
              <div style={{ padding: '3px 8px', background: 'var(--accent)', color: '#0a0a0a', borderRadius: 5, fontSize: 10.5, fontWeight: 600, fontFamily: 'JetBrains Mono, monospace' }}>+ Lead</div>
            </div>
          </div>

          {/* KPI row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 14 }}>
            {kpis.map((k, i) => (
              <div key={i} style={{ padding: 11, border: '1px solid var(--border)', borderRadius: 8, background: '#0e100e' }}>
                <div style={{ fontSize: 9.5, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: 0.8, fontFamily: 'JetBrains Mono, monospace' }}>{k.label}</div>
                <div style={{ marginTop: 4, fontSize: 19, fontWeight: 500, letterSpacing: -0.5 }}>
                  {k.val}<span style={{ color: 'var(--accent)', fontSize: 13, marginLeft: 1 }}>{k.unit}</span>
                </div>
                <div style={{ marginTop: 3, fontSize: 10, color: k.good ? 'var(--accent)' : 'var(--danger)', fontFamily: 'JetBrains Mono, monospace' }}>
                  ↗ {k.delta}
                </div>
              </div>
            ))}
          </div>

          {/* Body grid */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 10 }}>
            {/* Pipeline funnel */}
            <div style={{ padding: 14, border: '1px solid var(--border)', borderRadius: 8, background: '#0e100e' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                <div style={{ fontSize: 11.5, fontWeight: 600 }}>Entonnoir de conversion</div>
                <div style={{ fontSize: 10, color: 'var(--text-mute)', fontFamily: 'JetBrains Mono, monospace' }}>284 k€</div>
              </div>
              {pipeline.map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                  <div style={{ width: 52, fontSize: 10, color: 'var(--text-dim)' }}>{s.stage}</div>
                  <div style={{ flex: 1, height: 20, background: '#141713', borderRadius: 3, position: 'relative', overflow: 'hidden' }}>
                    <div style={{
                      position: 'absolute', inset: 0, width: `${s.pct}%`,
                      background: `linear-gradient(90deg, color-mix(in oklab, var(--accent) ${80 - i*8}%, transparent), color-mix(in oklab, var(--accent) ${50 - i*5}%, transparent))`,
                      borderRight: '1px solid var(--accent-border)',
                    }}/>
                    <div style={{ position: 'relative', padding: '3px 7px', fontSize: 9.5, color: '#0a0a0a', fontWeight: 600, fontFamily: 'JetBrains Mono, monospace' }}>
                      {s.n} · {s.v}k€
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* AI next actions */}
            <div style={{ padding: 14, border: '1px solid var(--accent-border)', borderRadius: 8, background: 'color-mix(in oklab, var(--accent) 5%, #0e100e)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
                <div style={{ width: 6, height: 6, borderRadius: 6, background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }}/>
                <div style={{ fontSize: 11.5, fontWeight: 600 }}>Actions IA</div>
                <div style={{ fontSize: 9.5, color: 'var(--text-mute)', marginLeft: 'auto', fontFamily: 'JetBrains Mono, monospace' }}>3 urgentes</div>
              </div>
              {actions.map((a, i) => (
                <div key={i} style={{
                  padding: '8px 10px', marginBottom: 5, borderRadius: 6,
                  border: '1px solid var(--border)',
                  background: a.urgent ? 'color-mix(in oklab, var(--accent) 4%, transparent)' : 'transparent',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ fontSize: 11, fontWeight: 600 }}>{a.name}</div>
                    <div style={{
                      fontSize: 9.5, fontWeight: 600,
                      padding: '1px 6px', borderRadius: 3,
                      background: a.score >= 85 ? 'color-mix(in oklab, var(--accent) 20%, transparent)' : 'color-mix(in oklab, var(--warn) 18%, transparent)',
                      color: a.score >= 85 ? 'var(--accent)' : 'var(--warn)',
                      fontFamily: 'JetBrains Mono, monospace',
                    }}>{a.score}</div>
                  </div>
                  <div style={{ fontSize: 9.5, color: 'var(--text-mute)', marginTop: 1 }}>{a.loc}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 5, lineHeight: 1.3 }}>{a.hint}</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
                    <div style={{ fontSize: 10.5, color: 'var(--accent)', fontWeight: 600, fontFamily: 'JetBrains Mono, monospace' }}>{a.val}</div>
                    <div style={{
                      fontSize: 9.5, padding: '2px 7px', borderRadius: 3,
                      background: 'var(--accent)', color: '#0a0a0a', fontWeight: 600,
                    }}>{a.cta}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.HeroDashboard = HeroDashboard;