/* Dashboard mockup — original illustration of an Orbi financial dashboard.
   Pure HTML/CSS/SVG, no real data. */

function DashboardMockup() {
  // Static sparkline path (a believable but original cash-flow curve)
  const sparkPoints = [
    [0, 38], [12, 30], [24, 34], [36, 22], [48, 26],
    [60, 18], [72, 22], [84, 12], [96, 16], [108, 8]
  ];
  const pathD = sparkPoints.reduce((acc, [x, y], i) =>
    acc + (i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`), '');
  const areaD = pathD + ` L 108 48 L 0 48 Z`;

  // Bar chart values
  const bars = [55, 72, 48, 86, 64, 78, 92];
  const barLabels = ['L','M','M','J','V','S','D'];

  return (
    <div className="mock-frame" role="img" aria-label="Vista previa del dashboard Orbi">
      <div className="mock-topbar">
        <span className="dot" style={{background:'#FF6058'}}></span>
        <span className="dot" style={{background:'#FFBE2E'}}></span>
        <span className="dot" style={{background:'#28C840'}}></span>
        <span className="url">useorbi.finance/dashboard</span>
      </div>
      <div className="dash">
        <aside className="dash-side">
          <div className="dash-brand">
            <OrbiIcon size={24} />
          </div>
          <nav className="dash-nav">
            <a className="active"><span className="ndot"></span>Resumen</a>
            <a>Ingresos</a>
            <a>Gastos</a>
            <a>Deudas</a>
            <a>Reportes</a>
            <a>Cuentas</a>
          </nav>
          <div className="dash-side-foot">
            <div className="acct">
              <div className="acct-av">JR</div>
              <div>
                <div className="acct-name">Jimena R.</div>
                <div className="acct-plan">Plan Control</div>
              </div>
            </div>
          </div>
        </aside>
        <main className="dash-main">
          <header className="dash-head">
            <div>
              <div className="dash-h-tag">Resumen · Mayo 2026</div>
              <h3>Hola, Jimena 👋</h3>
            </div>
            <div className="dash-h-right">
              <div className="pill">USD <span>▾</span></div>
              <div className="pill pill-primary">+ Movimiento</div>
            </div>
          </header>

          <section className="kpis">
            <div className="kpi">
              <div className="kpi-label">Balance neto</div>
              <div className="kpi-value">$12,480<span className="kpi-cents">.32</span></div>
              <div className="kpi-delta up">▲ 8.4% vs abril</div>
            </div>
            <div className="kpi">
              <div className="kpi-label">Ingresos del mes</div>
              <div className="kpi-value">$5,920<span className="kpi-cents">.00</span></div>
              <div className="kpi-delta up">▲ 12.1%</div>
            </div>
            <div className="kpi">
              <div className="kpi-label">Gastos del mes</div>
              <div className="kpi-value">$3,184<span className="kpi-cents">.18</span></div>
              <div className="kpi-delta down">▼ 4.2%</div>
            </div>
          </section>

          <section className="dash-row">
            <div className="card cashflow">
              <div className="card-head">
                <div>
                  <div className="card-eyebrow">Flujo de caja</div>
                  <div className="card-title">$2,736 ahorrado este mes</div>
                </div>
                <div className="legend">
                  <span><i style={{background:'#4B4EE8'}}></i>Ingresos</span>
                  <span><i style={{background:'#C6C7F6'}}></i>Gastos</span>
                </div>
              </div>
              <svg className="spark" viewBox="0 0 108 52" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0" stopColor="#4B4EE8" stopOpacity="0.25"/>
                    <stop offset="1" stopColor="#4B4EE8" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                <path d={areaD} fill="url(#g)"/>
                <path d={pathD} fill="none" stroke="#4B4EE8" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                {sparkPoints.filter((_,i)=>i%3===0).map(([x,y],i)=>(
                  <circle key={i} cx={x} cy={y} r="1.4" fill="#fff" stroke="#4B4EE8" strokeWidth="1"/>
                ))}
              </svg>
              <div className="cashflow-axis">
                <span>Ene</span><span>Feb</span><span>Mar</span><span>Abr</span><span>May</span>
              </div>
            </div>

            <div className="card categories">
              <div className="card-head">
                <div>
                  <div className="card-eyebrow">Categorías</div>
                  <div className="card-title">Gastos por área</div>
                </div>
              </div>
              <ul className="cat-list">
                <li><span className="cdot" style={{background:'#4B4EE8'}}></span>Operación<b>$1,184</b><span className="cpct">37%</span></li>
                <li><span className="cdot" style={{background:'#7B7EF5'}}></span>Marketing<b>$842</b><span className="cpct">26%</span></li>
                <li><span className="cdot" style={{background:'#B3B5F8'}}></span>Software<b>$620</b><span className="cpct">19%</span></li>
                <li><span className="cdot" style={{background:'#DCDDFB'}}></span>Otros<b>$538</b><span className="cpct">17%</span></li>
              </ul>
            </div>
          </section>

          <section className="card txlist">
            <div className="card-head">
              <div>
                <div className="card-eyebrow">Movimientos recientes</div>
                <div className="card-title">7 transacciones esta semana</div>
              </div>
              <div className="bars">
                {bars.map((h,i)=>(
                  <div key={i} className="bar-wrap">
                    <div className="bar" style={{height: `${h}%`}}></div>
                    <span>{barLabels[i]}</span>
                  </div>
                ))}
              </div>
            </div>
            <table className="tx">
              <tbody>
                <tr>
                  <td><div className="tx-ico in">↓</div></td>
                  <td><b>Cliente · Studio Nova</b><div className="muted-sm">Factura #2026-014</div></td>
                  <td className="muted-sm">Hoy</td>
                  <td className="amt pos">+$1,200.00</td>
                </tr>
                <tr>
                  <td><div className="tx-ico out">↑</div></td>
                  <td><b>Notion</b><div className="muted-sm">Software · Suscripción</div></td>
                  <td className="muted-sm">Ayer</td>
                  <td className="amt neg">−$12.00</td>
                </tr>
                <tr>
                  <td><div className="tx-ico out">↑</div></td>
                  <td><b>Aerolíneas</b><div className="muted-sm">Viaje a CDMX</div></td>
                  <td className="muted-sm">2 may</td>
                  <td className="amt neg">−$348.40</td>
                </tr>
              </tbody>
            </table>
          </section>
        </main>
      </div>

      <style>{`
        .dash {
          display: grid;
          grid-template-columns: 180px 1fr;
          min-height: 440px;
          background: #FAFAFD;
        }
        .dash-side {
          background: #fff;
          border-right: 1px solid var(--line);
          padding: 16px 12px;
          display: flex; flex-direction: column; gap: 14px;
        }
        .dash-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-slab); font-weight: 700; font-size: 17px; color: var(--ink); }
        .dash-brand .brand-logo { width: 96px; height: 34px; flex: 0 0 auto; object-fit: contain; object-position: center; }
        .dash-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
        .dash-nav a { font-size: 13px; color: var(--text-soft); padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
        .dash-nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
        .dash-nav a .ndot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
        .dash-nav a:not(.active) .ndot { display: none; }
        .dash-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
        .acct { display: flex; align-items: center; gap: 10px; }
        .acct-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4B4EE8, #1B1F6E); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
        .acct-name { font-size: 13px; font-weight: 600; color: var(--ink); }
        .acct-plan { font-size: 11px; color: var(--muted); }

        .dash-main { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
        .dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
        .dash-head h3 { margin: 4px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
        .dash-h-tag { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
        .dash-h-right { display: flex; gap: 8px; }
        .pill { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
        .pill-primary { background: var(--ink); color: #fff; border-color: var(--ink); }

        .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
        .kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
        .kpi-value { font-family: var(--font-slab); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; }
        .kpi-cents { color: var(--muted); font-weight: 700; font-size: 14px; margin-left: 1px; }
        .kpi-delta { font-size: 11px; font-weight: 500; margin-top: 4px; }
        .kpi-delta.up { color: #0E9F6E; }
        .kpi-delta.down { color: #4B4EE8; }

        .dash-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
        .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
        .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
        .card-eyebrow { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
        .card-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; letter-spacing: -0.01em; }
        .legend { display: flex; gap: 10px; font-size: 11px; color: var(--text-soft); }
        .legend span { display: inline-flex; align-items: center; gap: 4px; }
        .legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
        .spark { width: 100%; height: 80px; margin-top: 8px; }
        .cashflow-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); padding: 0 4px; }

        .cat-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
        .cat-list li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft); }
        .cat-list li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
        .cdot { width: 8px; height: 8px; border-radius: 50%; }
        .cpct { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

        .txlist .bars { display: flex; gap: 4px; align-items: flex-end; height: 36px; }
        .bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .bar { width: 6px; background: linear-gradient(180deg, #4B4EE8 0%, #7B7EF5 100%); border-radius: 2px; }
        .bar-wrap span { font-size: 9px; color: var(--muted); }

        .tx { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .tx td { padding: 6px 4px; border-top: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
        .tx tr:first-child td { border-top: 0; }
        .tx td b { color: var(--ink); font-weight: 600; }
        .muted-sm { font-size: 11px; color: var(--muted); }
        .tx-ico { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
        .tx-ico.in { background: #E6F8EF; color: #0E9F6E; }
        .tx-ico.out { background: var(--brand-soft); color: var(--brand); }
        .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
        .amt.pos { color: #0E9F6E; }
        .amt.neg { color: var(--ink); }

        @media (max-width: 600px) {
          .dash { grid-template-columns: 1fr; }
          .dash-side { display: none; }
          .dash-row { grid-template-columns: 1fr; }
          .kpis { grid-template-columns: 1fr 1fr; }
          .kpi:nth-child(3) { grid-column: span 2; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { DashboardMockup });