/* global React, Icon */

function Fleet() {
  return (
    <section className="section fleet-section" id="flotillas">
      <div className="container">
        <div className="fleet-card">
          <div className="fleet-glyph" aria-hidden>
            <svg viewBox="0 0 200 200" width="100%" height="100%">
              <defs>
                <pattern id="fleetDots" width="8" height="8" patternUnits="userSpaceOnUse">
                  <circle cx="4" cy="4" r="0.7" fill="currentColor" opacity="0.25" />
                </pattern>
              </defs>
              <rect width="200" height="200" fill="url(#fleetDots)" />
              <circle cx="100" cy="100" r="60" fill="none" stroke="currentColor" strokeOpacity="0.3" strokeDasharray="3 5" />
              <circle cx="100" cy="100" r="38" fill="none" stroke="currentColor" strokeOpacity="0.5" />
              <circle cx="100" cy="100" r="6" fill="currentColor" />
            </svg>
          </div>

          <div className="fleet-content">
            <span className="eyebrow">Flotillas · Uber · Didi</span>
            <h2 className="display fleet-title">
              Tu patrimonio<br/>
              <em>en tus manos.</em>
            </h2>
            <p className="fleet-sub">
              Una sola cuenta para toda tu flota. Precios especiales para flotillas y aplicaciones de movilidad. Te ayudamos a planificar, instalar y monitorear todo.
            </p>

            <div className="fleet-bullets">
              <div className="fleet-bullet">
                <span className="fleet-bullet-num display">1</span>
                <div>
                  <div className="fleet-bullet-t">Una cuenta, todas tus unidades</div>
                  <div className="fleet-bullet-d">Visualiza, asigna y monitorea desde un solo panel.</div>
                </div>
              </div>
              <div className="fleet-bullet">
                <span className="fleet-bullet-num display">2</span>
                <div>
                  <div className="fleet-bullet-t">Precio especial para flotillas</div>
                  <div className="fleet-bullet-d">Tarifas dedicadas para flotillas, Uber, Didi y logística.</div>
                </div>
              </div>
              <div className="fleet-bullet">
                <span className="fleet-bullet-num display">3</span>
                <div>
                  <div className="fleet-bullet-t">Instalación nacional</div>
                  <div className="fleet-bullet-d">Cobertura en toda la República Mexicana.</div>
                </div>
              </div>
            </div>

            <div className="fleet-cta">
              <a href="#contacto" className="btn btn-peach">
                Cotización para flotilla
                <Icon name="arrow" size={16} />
              </a>
              <a href="https://wa.me/525611693553" className="btn btn-ghost" target="_blank" rel="noreferrer">
                <Icon name="whatsapp" size={16} />
                Hablar con un asesor
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .fleet-section {
          background: var(--bg-2);
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .fleet-card {
          display: grid;
          grid-template-columns: 0.85fr 1.5fr;
          gap: 56px;
          align-items: center;
          background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-deep) 100%);
          color: #f3ece0;
          border-radius: var(--radius-xl);
          padding: clamp(40px, 5vw, 72px);
          overflow: hidden;
          position: relative;
        }
        @media (max-width: 1000px) {
          .fleet-card { grid-template-columns: 1fr; gap: 40px; }
        }
        .fleet-glyph {
          color: var(--peach);
          opacity: 0.85;
          aspect-ratio: 1;
          width: 100%;
          max-width: 320px;
          margin: 0 auto;
        }
        .fleet-content .eyebrow { color: var(--peach); }
        .fleet-title {
          font-size: clamp(40px, 5vw, 76px);
          margin: 14px 0 24px;
          font-weight: 500;
          line-height: 0.98;
          letter-spacing: -0.025em;
        }
        .fleet-title em { color: var(--peach); font-style: italic; font-weight: 400; }
        .fleet-sub {
          color: rgba(243,236,224,0.75);
          font-size: 17px;
          margin: 0 0 32px;
          line-height: 1.5;
          max-width: 50ch;
          text-wrap: pretty;
        }
        .fleet-bullets {
          display: flex;
          flex-direction: column;
          gap: 14px;
          margin-bottom: 32px;
          padding: 24px 0;
          border-top: 1px solid rgba(243,236,224,0.15);
          border-bottom: 1px solid rgba(243,236,224,0.15);
        }
        .fleet-bullet {
          display: grid;
          grid-template-columns: 30px 1fr;
          gap: 18px;
          align-items: start;
        }
        .fleet-bullet-num {
          color: var(--peach);
          font-size: 22px;
          font-weight: 500;
          font-style: italic;
        }
        .fleet-bullet-t {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 16px;
          letter-spacing: -0.01em;
        }
        .fleet-bullet-d {
          color: rgba(243,236,224,0.7);
          font-size: 14px;
          margin-top: 2px;
          line-height: 1.5;
        }
        .fleet-cta { display: flex; gap: 12px; flex-wrap: wrap; }
        .fleet-cta .btn-ghost {
          color: #f3ece0;
          border-color: rgba(243,236,224,0.3);
        }
        .fleet-cta .btn-ghost:hover { border-color: #f3ece0; }
      `}</style>
    </section>
  );
}

window.Fleet = Fleet;