/* global React, Icon */
const { useState, useEffect } = React;

function Dashboard() {
  return (
    <section className="section dash-section" id="app">
      <div className="container">
        <div className="dash-head">
          <div>
            <span className="eyebrow">App 24/7</span>
            <h2 className="display dash-title">
              Toda tu flota en una<br/>
              <em>misma cuenta.</em>
            </h2>
            <p className="dash-sub">
              Visualiza, monitorea y actúa desde tu celular, tablet u ordenador. Soporte técnico real, una sola sesión, todas tus unidades.
            </p>
            <div className="dash-points">
              <Point text="Visualización en cualquier dispositivo" />
              <Point text="Soporte técnico humano 24/7" />
              <Point text="Cuenta espejo para familiares y gestores" />
              <Point text="Compatible con ordenador o equipo de cómputo" />
            </div>
          </div>

          <DashboardMockup />
        </div>
      </div>

      <style>{`
        .dash-section {
          background: var(--petrol-deep);
          color: var(--bg);
          border-radius: 0;
        }
        [data-theme='dark'] .dash-section {
          background: var(--bg-2);
          color: var(--ink);
        }
        .dash-section .eyebrow { color: color-mix(in oklab, var(--peach) 80%, transparent); }
        .dash-head {
          display: grid;
          grid-template-columns: 0.85fr 1.15fr;
          gap: 60px;
          align-items: center;
        }
        @media (max-width: 1000px) {
          .dash-head { grid-template-columns: 1fr; gap: 40px; }
        }
        .dash-title {
          font-size: clamp(40px, 5vw, 72px);
          margin: 14px 0 24px;
          font-weight: 500;
          line-height: 0.98;
        }
        .dash-title em {
          font-style: italic;
          color: var(--peach);
          font-weight: 400;
        }
        .dash-sub {
          color: color-mix(in oklab, var(--bg) 75%, transparent);
          font-size: 17px;
          margin: 0 0 24px;
          line-height: 1.5;
          max-width: 42ch;
        }
        [data-theme='dark'] .dash-sub { color: var(--ink-2); }
        .dash-points { display: flex; flex-direction: column; gap: 10px; }
      `}</style>
    </section>
  );
}

function Point({ text }) {
  return (
    <div className="point">
      <span className="point-tick">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12l4 4 10-10"/>
        </svg>
      </span>
      <span>{text}</span>
      <style>{`
        .point {
          display: flex; gap: 12px; align-items: center;
          font-family: var(--font-body);
          font-size: 15px;
        }
        .point-tick {
          width: 22px; height: 22px;
          border-radius: 999px;
          background: var(--peach);
          color: #1a1208;
          display: grid; place-items: center;
          flex: 0 0 22px;
        }
      `}</style>
    </div>
  );
}

function DashboardMockup() {
  const [activeUnit, setActiveUnit] = useState(0);
  const [time, setTime] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  const units = [
    { id: 'MX-2294', model: 'Camioneta',  driver: 'L. Pérez',   speed: 78, status: 'En ruta',     loc: 'Periférico Norte' },
    { id: 'MX-1142', model: 'Tráiler',    driver: 'A. Mendoza', speed: 0,  status: 'Detenido',    loc: 'Querétaro Centro' },
    { id: 'MX-3081', model: 'Sedan',      driver: 'M. Cruz',    speed: 52, status: 'En ruta',     loc: 'Insurgentes Sur' },
    { id: 'MX-7720', model: 'Camión',     driver: 'D. Hernández',speed: 0, status: 'Geo-cerca',   loc: 'Patio principal' },
    { id: 'MX-4453', model: 'Moto',       driver: 'R. Gómez',   speed: 38, status: 'En ruta',     loc: 'Reforma' },
  ];

  const formatTime = () => {
    const d = new Date();
    return d.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
  };

  return (
    <div className="mockup">
      <div className="mockup-laptop">
        <div className="mockup-bar">
          <div className="mockup-dots">
            <span /><span /><span />
          </div>
          <div className="mockup-url mono">SETZA</div>
          <div className="mockup-time mono">{formatTime()}</div>
        </div>

        <div className="mockup-body">
          {/* sidebar */}
          <aside className="mockup-side">
            <div className="mockup-side-section">
              <div className="mockup-side-title mono">Unidades</div>
              {units.map((u, i) => (
                <button
                  key={u.id}
                  className={'mockup-unit' + (i === activeUnit ? ' is-active' : '')}
                  onClick={() => setActiveUnit(i)}>
                  <span className={`unit-led ${u.status === 'En ruta' ? 'k-good' : u.status === 'Detenido' ? 'k-alert' : 'k-info'}`} />
                  <span className="unit-id">{u.id}</span>
                  <span className="unit-speed mono">{u.speed} km/h</span>
                </button>
              ))}
            </div>
          </aside>

          {/* main */}
          <main className="mockup-main">
            <div className="mockup-mini-map">
              <MiniMap activeUnit={activeUnit} time={time} />
            </div>

            <div className="mockup-detail">
              <div className="detail-row">
                <div>
                  <div className="mono detail-label">Unidad activa</div>
                  <div className="detail-id display">{units[activeUnit].id}</div>
                </div>
                <div className="detail-status">
                  <span className={`unit-led ${units[activeUnit].status === 'En ruta' ? 'k-good' : units[activeUnit].status === 'Detenido' ? 'k-alert' : 'k-info'}`} />
                  <span className="mono">{units[activeUnit].status}</span>
                </div>
              </div>
              <div className="detail-grid">
                <DetailCell label="Conductor" value={units[activeUnit].driver} />
                <DetailCell label="Modelo" value={units[activeUnit].model} />
                <DetailCell label="Velocidad" value={`${units[activeUnit].speed} km/h`} />
                <DetailCell label="Ubicación" value={units[activeUnit].loc} />
              </div>
            </div>
          </main>
        </div>
      </div>

      {/* small phone */}
      <div className="mockup-phone">
        <div className="phone-screen">
          <div className="phone-pill">●</div>
          <div className="phone-card">
            <div className="phone-card-row">
              <span className="mono" style={{ color: 'var(--peach-deep)' }}>EN RUTA</span>
              <span className="mono" style={{ opacity: 0.6 }}>1m</span>
            </div>
            <div className="phone-card-title">{units[activeUnit].id}</div>
            <div className="phone-card-meta">{units[activeUnit].loc}</div>
            <div className="phone-card-bar">
              <div className="phone-card-fill" style={{ width: `${Math.min(100, units[activeUnit].speed * 1.1)}%` }} />
            </div>
            <div className="phone-card-foot mono">
              <span>{units[activeUnit].speed} km/h</span>
              <span>78 km/h máx</span>
            </div>
          </div>
          <div className="phone-mini">
            <div className="mono" style={{ opacity: 0.7 }}>Geo-cerca</div>
            <div style={{ fontWeight: 600 }}>Dentro de zona</div>
          </div>
        </div>
      </div>

      <style>{`
        .mockup {
          position: relative;
          aspect-ratio: 16 / 11;
        }
        .mockup-laptop {
          position: absolute;
          inset: 0;
          background: #0c2a31;
          color: #d6efe9;
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 14px;
          overflow: hidden;
          box-shadow: 0 50px 120px -40px rgba(0,0,0,0.6);
          display: flex;
          flex-direction: column;
        }
        .mockup-bar {
          display: flex; align-items: center; gap: 14px;
          padding: 10px 14px;
          background: #08191e;
          border-bottom: 1px solid rgba(255,255,255,0.06);
          font-size: 11px;
        }
        .mockup-dots { display: flex; gap: 6px; }
        .mockup-dots span {
          width: 10px; height: 10px;
          border-radius: 50%;
          background: rgba(255,255,255,0.18);
        }
        .mockup-dots span:first-child { background: #ef6f4a; }
        .mockup-dots span:nth-child(2) { background: #f2c792; }
        .mockup-dots span:last-child  { background: #58c79e; }
        .mockup-url {
          flex: 1;
          padding: 5px 10px;
          background: rgba(255,255,255,0.06);
          border-radius: 6px;
          color: rgba(255,255,255,0.65);
          font-size: 10px;
        }
        .mockup-time { color: rgba(255,255,255,0.45); font-size: 10px; }

        .mockup-body {
          flex: 1;
          display: grid;
          grid-template-columns: 200px 1fr;
        }
        @media (max-width: 600px) {
          .mockup-body { grid-template-columns: 1fr; }
          .mockup-side { display: none !important; }
        }
        .mockup-side {
          background: #06161a;
          padding: 14px 10px;
          border-right: 1px solid rgba(255,255,255,0.06);
          font-size: 11px;
          overflow-y: hidden;
        }
        .mockup-side-title {
          color: rgba(255,255,255,0.35);
          font-size: 9px;
          padding: 4px 8px 10px;
        }
        .mockup-unit {
          width: 100%;
          display: grid;
          grid-template-columns: 8px 1fr auto;
          gap: 8px;
          align-items: center;
          padding: 8px 10px;
          background: transparent;
          border: 0;
          border-radius: 6px;
          color: rgba(255,255,255,0.7);
          text-align: left;
          font-family: var(--font-body);
          font-size: 11px;
          margin-bottom: 2px;
          transition: background .2s ease;
        }
        .mockup-unit:hover { background: rgba(255,255,255,0.04); }
        .mockup-unit.is-active {
          background: rgba(79, 179, 196, 0.15);
          color: #fff;
        }
        .unit-led {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--ink-mute);
        }
        .unit-led.k-good   { background: #58c79e; box-shadow: 0 0 0 0 #58c79e; animation: pulse 1.6s infinite; }
        .unit-led.k-alert  { background: #ef6f4a; }
        .unit-led.k-info   { background: #6ed1de; }
        .unit-id { font-family: var(--font-mono); font-size: 10px; }
        .unit-speed { color: rgba(255,255,255,0.5); font-size: 9px; }

        .mockup-main {
          display: grid;
          grid-template-rows: 1fr auto;
          min-height: 0;
        }
        .mockup-mini-map {
          background: #06161a;
          position: relative;
          overflow: hidden;
        }
        .mockup-detail {
          padding: 12px 16px;
          background: #07191e;
          border-top: 1px solid rgba(255,255,255,0.06);
        }
        .detail-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-bottom: 10px;
        }
        .detail-label {
          color: rgba(255,255,255,0.4);
          font-size: 9px;
        }
        .detail-id { font-size: 18px; font-weight: 600; }
        .detail-status {
          display: inline-flex;
          gap: 6px;
          align-items: center;
          padding: 4px 8px;
          border-radius: 999px;
          background: rgba(88, 199, 158, 0.15);
          color: #58c79e;
          font-size: 10px;
        }
        .detail-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
          font-size: 11px;
        }
        @media (max-width: 800px) {
          .detail-grid { grid-template-columns: repeat(2, 1fr); }
        }

        /* Phone */
        .mockup-phone {
          position: absolute;
          bottom: -14px;
          right: -14px;
          width: 26%;
          aspect-ratio: 9 / 17;
          background: #03090b;
          border: 8px solid #1c2a2e;
          border-radius: 24px;
          padding: 0;
          box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
          overflow: hidden;
        }
        @media (max-width: 600px) {
          .mockup-phone { display: none; }
        }
        .phone-screen {
          background: linear-gradient(180deg, #0c2a31, #06161a);
          width: 100%;
          height: 100%;
          padding: 20px 10px 10px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          color: #f3ece0;
          position: relative;
        }
        .phone-pill {
          position: absolute;
          top: 5px; left: 50%;
          transform: translateX(-50%);
          font-size: 6px;
          width: 32px;
          height: 6px;
          background: #000;
          border-radius: 4px;
          color: transparent;
        }
        .phone-card {
          margin-top: 8px;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 10px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        .phone-card-row { display: flex; justify-content: space-between; font-size: 8px; }
        .phone-card-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 12px;
          letter-spacing: -0.01em;
        }
        .phone-card-meta { font-size: 9px; color: rgba(255,255,255,0.6); }
        .phone-card-bar {
          height: 4px;
          background: rgba(255,255,255,0.08);
          border-radius: 999px;
          margin-top: 6px;
          overflow: hidden;
        }
        .phone-card-fill {
          height: 100%;
          background: linear-gradient(90deg, var(--petrol-bright), var(--peach));
          transition: width .6s ease;
        }
        .phone-card-foot {
          display: flex;
          justify-content: space-between;
          font-size: 7px;
          color: rgba(255,255,255,0.55);
          margin-top: 4px;
        }
        .phone-mini {
          background: rgba(242,199,146,0.10);
          border: 1px solid rgba(242,199,146,0.25);
          border-radius: 8px;
          padding: 8px 10px;
          font-size: 9px;
        }
      `}</style>
    </div>
  );
}

function DetailCell({ label, value }) {
  return (
    <div>
      <div className="mono detail-label">{label}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 14 }}>{value}</div>
    </div>
  );
}

function MiniMap({ activeUnit, time }) {
  // Stylized animated map background
  const points = [
    { x: 30, y: 35 }, { x: 60, y: 50 }, { x: 80, y: 30 }, { x: 25, y: 65 },
    { x: 55, y: 75 }, { x: 75, y: 60 }, { x: 90, y: 70 }, { x: 40, y: 25 },
  ];
  const active = points[activeUnit % points.length];
  return (
    <svg width="100%" height="100%" viewBox="0 0 100 80" preserveAspectRatio="none">
      <defs>
        <pattern id="grid" width="6" height="6" patternUnits="userSpaceOnUse">
          <circle cx="3" cy="3" r="0.45" fill="#4FB3C4" opacity="0.25" />
        </pattern>
        <linearGradient id="route" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#4FB3C4" stopOpacity="0" />
          <stop offset="100%" stopColor="#4FB3C4" stopOpacity="0.7" />
        </linearGradient>
      </defs>
      <rect width="100" height="80" fill="url(#grid)" />

      {/* roads */}
      <path d="M 5 65 Q 30 55 50 60 T 95 40" fill="none" stroke="#4FB3C4" strokeOpacity="0.4" strokeWidth="0.6" />
      <path d="M 10 25 Q 35 35 60 30 T 95 55" fill="none" stroke="#4FB3C4" strokeOpacity="0.3" strokeWidth="0.5" />
      <path d="M 50 5 Q 55 35 60 60 T 70 75" fill="none" stroke="#4FB3C4" strokeOpacity="0.25" strokeWidth="0.4" />

      {points.map((p, i) => (
        <g key={i}>
          {i === activeUnit % points.length && (
            <>
              <circle cx={p.x} cy={p.y} r="3.5" fill="none" stroke="#58c79e" strokeWidth="0.5" opacity="0.6">
                <animate attributeName="r" values="3.5;9;3.5" dur="1.6s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.7;0;0.7" dur="1.6s" repeatCount="indefinite" />
              </circle>
              <circle cx={p.x} cy={p.y} r="1.6" fill="#58c79e" />
            </>
          )}
          {i !== activeUnit % points.length && (
            <circle cx={p.x} cy={p.y} r="1.1" fill="#4FB3C4" opacity="0.7" />
          )}
        </g>
      ))}

      {/* moving traveler */}
      <circle r="0.8" fill="#f2c792">
        <animateMotion dur="6s" repeatCount="indefinite" path="M 5 65 Q 30 55 50 60 T 95 40" />
      </circle>
    </svg>
  );
}

window.Dashboard = Dashboard;