// ===== Services + Account =====

const Services = ({ navigate }) => {
  const [selectedShop, setSelectedShop] = useState('s1');

  return (
    <div className="page-fade page" data-comment-anchor="fb993b08ef-div-7-5">
      <div className="services-hero">
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>— LA TALACHA · SERVICIOS</div>
          <h1 className="service-mega">
            HACEMOS<br />
            <span className="accent">LA</span> TALACHA<br />
            DE A DE VERAS.
          </h1>
        </div>
        <div>
          <p style={{ fontSize: 16, color: 'var(--text-mute)', lineHeight: 1.6 }}>
            Más que vender llantas. Somos un taller premium con mecánicos certificados, equipo de calibración 3D, y garantía de por vida en mano de obra. 18 sucursales en CDMX. Reservas en línea. Sin esperas.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
            <button className="btn btn-primary btn-lg" onClick={() => navigate('checkout')}>
              <Icon name="calendar" size={16} /> AGENDAR AHORA
            </button>
            <button className="btn btn-ghost btn-lg"><Icon name="pin" size={16} /> VER TALLERES</button>
          </div>
        </div>
      </div>

      {/* Service grid */}
      <div className="service-grid" style={{ marginTop: 60 }}>
        {SERVICES.map((s) =>
        <div key={s.id} className="service-tile">
            <div className="num">{s.num}</div>
            <h3>{s.name}</h3>
            <p>{s.sub}</p>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 'auto' }}>
              <div className="price">{fmt(s.price)}<span style={{ fontSize: 12, color: 'var(--text-mute)', marginLeft: 6 }}>MXN</span></div>
              <button className="btn btn-ghost" style={{ padding: '8px 12px', fontSize: 12 }} onClick={() => navigate('checkout')}>
                AGENDAR <Icon name="arrow" size={12} />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Process steps */}
      <div style={{ marginTop: 80 }}>
        <div className="section-head">
          <div>
            <div className="s">— EL PROCESO</div>
            <div className="t">4 pasos.<br />45 minutos.</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--line)' }}>
          {[
          { n: '01', t: 'LLEGAS', s: 'Sin cita previa o con reserva. Te recibe tu mecánico asignado.', i: 'pin' },
          { n: '02', t: 'DIAGNÓSTICO', s: 'Inspección visual + medición de profundidad con láser 3D. 5 min.', i: 'spark' },
          { n: '03', t: 'TALACHA', s: 'Desmonta, balancea, monta, infla con N₂ y revisa torque final.', i: 'wrench' },
          { n: '04', t: 'TE VAS', s: 'Calibración TPMS, reporte digital por WhatsApp. Listo en 45 min.', i: 'check' }].
          map((p) =>
          <div key={p.n} style={{ background: 'var(--bg)', padding: '32px 24px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, color: 'var(--accent)', lineHeight: 1 }}>{p.n}</div>
                <Icon name={p.i} size={28} stroke={1.4} />
              </div>
              <div className="display" style={{ fontSize: 24, marginBottom: 8 }}>{p.t}</div>
              <p style={{ color: 'var(--text-mute)', fontSize: 13, margin: 0, lineHeight: 1.5 }}>{p.s}</p>
            </div>
          )}
        </div>
      </div>

      {/* Shop locator */}
      <div style={{ marginTop: 80 }}>
        <div className="section-head">
          <div>
            <div className="s">— NUESTROS TALLERES</div>
            <div className="t">18 puntos<br />en CDMX.</div>
          </div>
          <button className="btn btn-ghost"><Icon name="map" size={14} /> VER MAPA COMPLETO</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '400px 1fr', gap: 16 }}>
          <div>
            {SHOPS.map((s) =>
            <div key={s.id} className={'shop-card ' + (selectedShop === s.id ? 'on' : '')} onClick={() => setSelectedShop(s.id)} style={{ marginBottom: 8, padding: 20 }}>
                <div className="pin"><Icon name="pin" size={18} /></div>
                <div className="shop-info">
                  <div className="name" style={{ fontSize: 16 }}>{s.name}</div>
                  <div className="addr">{s.addr}</div>
                  <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
                    <span className="chip chip-outline" style={{ fontSize: 9, padding: '2px 8px' }}>LUN-SAB 9-19h</span>
                    <span className="chip chip-outline" style={{ fontSize: 9, padding: '2px 8px', color: s.slots === 'amplios' ? 'var(--green)' : s.slots === 'pocos' ? 'var(--accent-hot)' : 'var(--accent)' }}>● {s.slots.toUpperCase()}</span>
                  </div>
                </div>
                <div className="dist">{s.dist}</div>
              </div>
            )}
          </div>
          {/* Map mock */}
          <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 16, minHeight: 500, position: 'relative', overflow: 'hidden' }}>
            <svg viewBox="0 0 600 500" width="100%" height="100%" style={{ display: 'block' }}>
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
                </pattern>
              </defs>
              <rect width="600" height="500" fill="url(#grid)" />
              {/* Mock roads */}
              <path d="M 0 200 Q 200 180 600 220" stroke="rgba(255,255,255,0.1)" strokeWidth="6" fill="none" />
              <path d="M 0 300 Q 300 280 600 320" stroke="rgba(255,255,255,0.08)" strokeWidth="4" fill="none" />
              <path d="M 200 0 Q 250 200 220 500" stroke="rgba(255,255,255,0.08)" strokeWidth="4" fill="none" />
              <path d="M 400 0 Q 420 250 410 500" stroke="rgba(255,255,255,0.06)" strokeWidth="3" fill="none" />
              {/* Mock parks */}
              <ellipse cx="120" cy="350" rx="60" ry="40" fill="rgba(125,216,125,0.08)" />
              <ellipse cx="480" cy="120" rx="50" ry="35" fill="rgba(125,216,125,0.08)" />
              {/* Shop pins */}
              {[
              { id: 's1', x: 250, y: 200 },
              { id: 's2', x: 280, y: 280 },
              { id: 's3', x: 120, y: 350 },
              { id: 's4', x: 380, y: 380 }].
              map((p) => {
                const isOn = selectedShop === p.id;
                return (
                  <g key={p.id} style={{ cursor: 'pointer' }} onClick={() => setSelectedShop(p.id)}>
                    {isOn && <circle cx={p.x} cy={p.y} r="30" fill="var(--accent)" opacity="0.2" />}
                    <circle cx={p.x} cy={p.y} r={isOn ? 12 : 8} fill="var(--accent)" stroke="#000" strokeWidth="2" />
                    <text x={p.x} y={p.y + 4} textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono, monospace" fill="#000" fontWeight="700">R</text>
                  </g>);

              })}
              {/* Random extra pins */}
              {[[100, 150], [440, 250], [170, 80], [520, 380], [330, 420], [80, 420], [470, 440], [60, 250], [300, 40], [540, 180]].map(([x, y], i) =>
              <circle key={i} cx={x} cy={y} r="5" fill="var(--accent)" opacity="0.5" />
              )}
              {/* "You are here" */}
              <g>
                <circle cx="320" cy="240" r="30" fill="var(--blue)" opacity="0.15" />
                <circle cx="320" cy="240" r="6" fill="var(--blue)" stroke="#fff" strokeWidth="2" />
              </g>
              <text x="320" y="225" textAnchor="middle" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--blue)" letterSpacing="1.5">TU UBICACIÓN</text>
            </svg>
          </div>
        </div>
      </div>

      {/* Why RUTA */}
      <div className="stats-strip" style={{ marginTop: 80 }}>
        <div className="stat-cell">
          <div className="num">100%</div>
          <div className="lbl">MECÁNICOS CERTIFICADOS</div>
        </div>
        <div className="stat-cell">
          <div className="num"><span className="accent">∞</span></div>
          <div className="lbl">GARANTÍA EN MANO DE OBRA</div>
        </div>
        <div className="stat-cell">
          <div className="num">3D</div>
          <div className="lbl">ALINEACIÓN LÁSER</div>
        </div>
        <div className="stat-cell">
          <div className="num">N<sub>2</sub></div>
          <div className="lbl">INFLADO CON NITRÓGENO</div>
        </div>
      </div>
    </div>);

};

// === Account ===
const Account = ({ navigate, favs, user, onLogout, onAuth }) => {
  const [tab, setTab] = useState('orders');

  // Not logged in → show login / register
  if (!user) {
    return <LoginRegister navigate={navigate} onAuth={onAuth} />;
  }

  const firstName = (user.name || 'Cliente').split(' ')[0];
  const initial = firstName.charAt(0).toUpperCase();

  const orders = [
  { id: 'RUTA-29384', date: '02 MAR 2026', status: 'scheduled', statusLbl: 'AGENDADA', items: 4, total: 22050, eta: 'MAÑANA · 11:00', tire: TIRES[0] },
  { id: 'RUTA-28921', date: '14 FEB 2026', status: 'delivered', statusLbl: 'COMPLETADA', items: 4, total: 18450, eta: 'INSTALADA', tire: TIRES[2] },
  { id: 'RUTA-27154', date: '08 ENE 2026', status: 'delivered', statusLbl: 'COMPLETADA', items: 2, total: 7850, eta: 'INSTALADA', tire: TIRES[5] },
  { id: 'RUTA-26012', date: '03 NOV 2025', status: 'delivered', statusLbl: 'COMPLETADA', items: 4, total: 15890, eta: 'INSTALADA', tire: TIRES[3] }];


  return (
    <div className="page-fade page">
      <div style={{ marginBottom: 24 }}>
        <div className="eyebrow">— MI CUENTA</div>
        <h1 className="display" style={{ fontSize: 64, margin: '8px 0 0' }}>HOLA, {firstName.toUpperCase()}.</h1>
      </div>

      <div className="account-grid">
        <aside className="account-side">
          <div className="account-user">
            <div className="avatar">{initial}</div>
            <div className="info">
              <div className="n">{user.name}</div>
              <div className="s">CLIENTE GOLD · 4 ÓRDENES</div>
            </div>
          </div>
          <div className="account-nav">
            <div className={'account-nav-item ' + (tab === 'orders' ? 'on' : '')} onClick={() => setTab('orders')}><Icon name="box" size={16} /> Mis órdenes</div>
            <div className={'account-nav-item ' + (tab === 'garage' ? 'on' : '')} onClick={() => setTab('garage')}><Icon name="car" size={16} /> Mi garage</div>
            <div className={'account-nav-item ' + (tab === 'tires' ? 'on' : '')} onClick={() => setTab('tires')}><Icon name="tire" size={16} /> Mis llantas</div>
            <div className={'account-nav-item ' + (tab === 'favs' ? 'on' : '')} onClick={() => setTab('favs')}><Icon name="heart" size={16} /> Favoritos ({favs.length})</div>
            <div className={'account-nav-item ' + (tab === 'shops' ? 'on' : '')} onClick={() => setTab('shops')}><Icon name="pin" size={16} /> Talleres guardados</div>
            <div className={'account-nav-item ' + (tab === 'profile' ? 'on' : '')} onClick={() => setTab('profile')}><Icon name="settings" size={16} /> Perfil</div>
            <div className="account-nav-item account-logout" onClick={onLogout}><Icon name="logout" size={16} /> Cerrar sesión</div>
          </div>
        </aside>

        <div>
          {tab === 'orders' &&
          <>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
                <div className="card" style={{ padding: 20 }}>
                  <div className="eyebrow">— PRÓX. SERVICIO</div>
                  <div className="display" style={{ fontSize: 28, lineHeight: 1, marginTop: 8 }}>MAÑANA</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-mute)', marginTop: 4 }}>RUTA POLANCO · 11:00</div>
                </div>
                <div className="card" style={{ padding: 20 }}>
                  <div className="eyebrow">— TOTAL GASTADO</div>
                  <div className="display" style={{ fontSize: 28, lineHeight: 1, marginTop: 8, color: 'var(--accent)' }}>$64,240</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-mute)', marginTop: 4 }}>4 ÓRDENES · 14 LLANTAS</div>
                </div>
                <div className="card" style={{ padding: 20 }}>
                  <div className="eyebrow">— PUNTOS RUTA</div>
                  <div className="display" style={{ fontSize: 28, lineHeight: 1, marginTop: 8 }}>2,840 ★</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-mute)', marginTop: 4 }}>= $568 MXN DE CRÉDITO</div>
                </div>
              </div>

              {orders.map((o) =>
            <div key={o.id} className="order-card">
                  <div className="order-head">
                    <div>
                      <div className="order-id">{o.id}</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)', marginTop: 4 }}>{o.date}</div>
                    </div>
                    <div className={'order-status ' + o.status}>
                      <span className="dot"></span> {o.statusLbl}
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 20, alignItems: 'center' }}>
                    <div style={{ width: 70, height: 70, background: 'var(--bg-elev-2)', borderRadius: 10, display: 'grid', placeItems: 'center' }}>
                      <TireSVG size={60} brand={o.tire.brand.substring(0, 4).toUpperCase()} spec="" accent={o.tire.accent} />
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{o.tire.brand}</div>
                      <div className="display" style={{ fontSize: 22, lineHeight: 1, margin: '4px 0' }}>{o.tire.name}</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)' }}>x{o.items} · {o.eta}</div>
                    </div>
                    <div className="price">{fmt(o.total)}</div>
                    <button className="btn btn-ghost">
                      {o.status === 'scheduled' ? 'VER DETALLE' : 'COMPRAR DE NUEVO'} <Icon name="arrow" size={14} />
                    </button>
                  </div>
                </div>
            )}
            </>
          }

          {tab === 'garage' &&
          <div>
              <p style={{ color: 'var(--text-mute)', marginBottom: 20 }}>Tus vehículos guardados para checkout rápido.</p>
              {[
            { brand: 'Volkswagen', model: 'Jetta MK7', year: 2022, plate: 'ABC-12-34', size: '205/55R16', primary: true, type: 'sedan' },
            { brand: 'Honda', model: 'CR-V', year: 2020, plate: 'XYZ-56-78', size: '225/65R17', primary: false, type: 'suv' }].
            map((c, i) =>
            <div key={i} className="card" style={{ padding: 24, marginBottom: 12, display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 24, alignItems: 'center', borderColor: c.primary ? 'var(--accent)' : 'var(--line)' }}>
                  <CarSilhouette type={c.type} size={140} color="var(--text-mute)" />
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{c.brand}</div>
                    <div className="display" style={{ fontSize: 32, lineHeight: 1, margin: '4px 0' }}>{c.model.toUpperCase()} · {c.year}</div>
                    <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                      <span className="chip chip-outline">{c.plate}</span>
                      <span className="chip chip-outline">{c.size}</span>
                      {c.primary && <span className="chip chip-accent">PRIMARIO</span>}
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button className="btn btn-ghost">EDITAR</button>
                    <button className="btn btn-primary" onClick={() => navigate('catalog')}>VER LLANTAS</button>
                  </div>
                </div>
            )}
              <button className="btn btn-ghost btn-block" style={{ padding: 24, borderStyle: 'dashed', marginTop: 12 }} onClick={() => navigate('garage')}>
                <Icon name="plus" size={14} /> AGREGAR OTRO VEHÍCULO
              </button>
            </div>
          }

          {tab === 'tires' &&
          <div>
              <p style={{ color: 'var(--text-mute)', marginBottom: 20 }}>Tus llantas instaladas · seguimiento de desgaste y recordatorios.</p>
              <div className="card" style={{ padding: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24 }}>
                  <div>
                    <div className="eyebrow">— VW JETTA · INSTALADAS 14 FEB 2026</div>
                    <div className="display" style={{ fontSize: 28, marginTop: 8 }}>BRIDGESTONE TURANZA T005</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)' }}>KM RECORRIDOS</div>
                    <div className="display" style={{ fontSize: 28, color: 'var(--accent)' }}>4,820</div>
                  </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
                  {['FRONT-L', 'FRONT-R', 'REAR-L', 'REAR-R'].map((pos, i) => {
                  const pct = [85, 84, 88, 87][i];
                  return (
                    <div key={pos} style={{ background: 'var(--bg-elev-2)', padding: 16, borderRadius: 10 }}>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{pos}</div>
                        <div className="display" style={{ fontSize: 32, marginTop: 6 }}>{pct}<span style={{ fontSize: 18, color: 'var(--text-mute)' }}>%</span></div>
                        <div style={{ height: 4, background: 'var(--bg-elev-3)', borderRadius: 2, marginTop: 8, overflow: 'hidden' }}>
                          <div style={{ height: '100%', width: pct + '%', background: pct > 30 ? 'var(--green)' : 'var(--accent-hot)' }}></div>
                        </div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.12em' }}>VIDA RESTANTE</div>
                      </div>);

                })}
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 16, padding: 16, background: 'var(--bg-elev-2)', borderRadius: 10 }}>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase' }}>PRÓX. ROTACIÓN</div>
                    <div className="display" style={{ fontSize: 20, marginTop: 4 }}>EN 3,180 KM</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase' }}>RECAMBIO ESTIMADO</div>
                    <div className="display" style={{ fontSize: 20, marginTop: 4 }}>OCT 2028</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase' }}>GARANTÍA</div>
                    <div className="display" style={{ fontSize: 20, marginTop: 4, color: 'var(--green)' }}>● VIGENTE</div>
                  </div>
                </div>

                <button className="btn btn-primary btn-block" style={{ marginTop: 16 }}>
                  <Icon name="calendar" size={14} /> AGENDAR ROTACIÓN
                </button>
              </div>
            </div>
          }

          {tab === 'favs' &&
          <div>
              {favs.length === 0 ?
            <div style={{ padding: 60, textAlign: 'center', background: 'var(--bg-elev)', borderRadius: 16, border: '1px solid var(--line)' }}>
                  <Icon name="heart" size={48} />
                  <h3 className="display" style={{ fontSize: 28, margin: '16px 0 8px' }}>SIN FAVORITOS</h3>
                  <p style={{ color: 'var(--text-mute)' }}>Marca las llantas que te interesen para compararlas después.</p>
                  <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => navigate('catalog')}>VER CATÁLOGO</button>
                </div> :

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                  {favs.map((id) => {
                const t = TIRES.find((x) => x.id === id);
                if (!t) return null;
                return (
                  <div key={id} className="product" onClick={() => navigate('product', { id: t.id })}>
                        <div className="product-img">
                          <TireSVG size={220} brand={t.brand.toUpperCase()} spec="" accent={t.accent} />
                        </div>
                        <div className="product-body">
                          <div className="product-brand">{t.brand}</div>
                          <h3 className="product-name">{t.name}</h3>
                          <div className="price" style={{ marginTop: 8 }}><span className="currency">$</span>{t.price.toLocaleString('es-MX')}</div>
                        </div>
                      </div>);

              })}
                </div>
            }
            </div>
          }

          {tab === 'shops' &&
          <div>
              {SHOPS.slice(0, 2).map((s) =>
            <div key={s.id} className="card" style={{ padding: 20, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 16 }}>
                  <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--bg-elev-2)', display: 'grid', placeItems: 'center', color: 'var(--accent)' }}>
                    <Icon name="pin" size={18} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="display" style={{ fontSize: 22, lineHeight: 1 }}>{s.name}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)', marginTop: 4 }}>{s.addr} · {s.dist}</div>
                  </div>
                  <button className="btn btn-primary">AGENDAR</button>
                </div>
            )}
            </div>
          }

          {tab === 'profile' &&
          <div className="card" style={{ padding: 32 }}>
              <div className="checkout-form">
                <Field label="Nombre completo" icon="user" autoComplete="name" full
              value={user.name} onChange={() => {}} />
                <FieldEmail value={user.email} onChange={() => {}} />
                <FieldPhone value="55 4567 8901" onChange={() => {}} />
                <Field label="Fecha de nacimiento" icon="calendar" type="date" autoComplete="bday"
              value="1989-09-14" onChange={() => {}} />
                <Field label="Dirección" icon="pin" autoComplete="street-address" full
              placeholder="Av. Río Mixcoac 234, Col. del Valle, CDMX"
              value="Av. Río Mixcoac 234, Col. del Valle, CDMX" onChange={() => {}} />
                <FieldNumeric label="Código postal" icon="pin" maxLength={5} value="03100" placeholder="03100" onChange={() => {}} />
              </div>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 24 }}>GUARDAR CAMBIOS</button>
            </div>
          }
        </div>
      </div>
    </div>);

};

Object.assign(window, { Services, Account });