/* global React, CLIENTS, PAYMENTS, Icon */

function Services() {
  const items = [
    {
      tag: 'Consultoría',
      title: 'Broker financiero',
      desc: 'Arrendamiento puro y financiero de vehículos nuevos y semi-nuevos. Financiera principal: PEICAR.',
      meta: 'CDMX · Toluca · Guadalajara',
    },
    {
      tag: 'Consultoría',
      title: 'Fleet Planning',
      desc: 'Gestión integral: líneas de crédito, negociación con distribuidores, gestoría, post-venta.',
      meta: 'Corto, mediano y largo plazo',
    },
    {
      tag: 'Consultoría',
      title: 'Desarrollo BDC',
      desc: 'Implementación comercial: call center, CRM y procesos de venta para distribuidores.',
      meta: 'Implementación 4 a 8 semanas',
    },
    {
      tag: 'Training',
      title: 'Coaching empresarial',
      desc: 'Equipos de alto rendimiento, coaching organizacional y transformacional.',
      meta: 'Trainers certificados ante STPS / CICEDH',
    },
  ];

  return (
    <section className="section" id="servicios">
      <div className="container">
        <div className="serv-head">
          <div>
            <span className="eyebrow">Más allá del GPS</span>
            <h2 className="display serv-title">
              Una consultora completa<br/>
              <em>para tu operación.</em>
            </h2>
          </div>
          <p className="serv-sub">
            Setza es una consultora automotriz integral. Además de rastreo satelital, acompañamos a nuestros socios comerciales con consultoría financiera y capacitación.
          </p>
        </div>

        <div className="serv-grid">
          {items.map((it, i) => (
            <article key={i} className="serv-card">
              <div className="serv-card-head">
                <span className="mono serv-tag">{it.tag}</span>
                <span className="serv-num mono">{String(i + 1).padStart(2, '0')}</span>
              </div>
              <h3 className="serv-name display">{it.title}</h3>
              <p className="serv-desc">{it.desc}</p>
              <div className="serv-meta mono">{it.meta}</div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .serv-head {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 40px;
          align-items: end;
          margin-bottom: 40px;
        }
        @media (max-width: 900px) { .serv-head { grid-template-columns: 1fr; } }
        .serv-title {
          font-size: clamp(36px, 4.6vw, 64px);
          margin: 14px 0 0;
          font-weight: 500;
          line-height: 1;
        }
        .serv-title em { color: var(--petrol); font-style: italic; font-weight: 400; }
        .serv-sub {
          color: var(--ink-2);
          font-size: 16px;
          margin: 0;
          line-height: 1.55;
          text-wrap: pretty;
        }
        .serv-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        @media (max-width: 700px) { .serv-grid { grid-template-columns: 1fr; } }
        .serv-card {
          padding: 28px;
          background: var(--bg-3);
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
          display: flex;
          flex-direction: column;
          gap: 12px;
          transition: border-color .25s ease, transform .25s ease;
        }
        .serv-card:hover {
          border-color: var(--petrol);
          transform: translateY(-3px);
        }
        .serv-card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .serv-tag { color: var(--peach-deep); font-size: 10px; }
        .serv-num { color: var(--ink-mute); font-size: 10px; }
        .serv-name {
          font-size: 26px;
          font-weight: 500;
          letter-spacing: -0.02em;
          font-style: italic;
          margin: 0;
        }
        .serv-desc {
          color: var(--ink-2);
          font-size: 14px;
          line-height: 1.55;
          margin: 0;
        }
        .serv-meta {
          color: var(--ink-mute);
          font-size: 10px;
          padding-top: 12px;
          border-top: 1px dashed var(--line);
        }
      `}</style>
    </section>
  );
}

window.Services = Services;