// Nosotros · Imcopartes

const { useState, useEffect } = React;

function AboutHead() {
  return (
    <header className="page-head">
      <div className="page-head__diagonal"></div>
      <div className="page-head__inner">
        <div>
          <div className="page-head__eyebrow">Más de dos décadas de experiencia</div>
          <h1 className="page-head__title">
            Una nueva generación de marcas.<br />Respaldadas por una <em>trayectoria</em>.
          </h1>
          <p className="page-head__lead">
            Más de dos décadas importando, distribuyendo e innovando en repuestos automotrices
            al por mayor en Colombia. Hoy ponemos a disposición de distribuidores, talleres
            y comercializadores una nueva generación de marcas: <strong>mejor precio, mejor
            calidad y mejor imagen</strong> que la caja blanca tradicional.
          </p>
        </div>
      </div>
    </header>
  );
}

function Story() {
  return (
    <section className="content-section">
      <div className="story-grid">
        <div>
          <span className="eye">Quiénes somos</span>
          <h2>Mayoristas desde Bogotá.<br />Servicio en toda Colombia.</h2>
          <p>
            Imcopartes es una empresa colombiana dedicada a la importación y distribución
            mayorista de repuestos automotrices. Atendemos exclusivamente al canal mayorista
            — clientes con RUT vigente, personas naturales o jurídicas — desde nuestro
            centro de distribución en Bogotá.
          </p>
          <p>
            Combinamos catálogo curado, atención comercial directa y respaldo de marcas
            representadas para que distribuidores, talleres y comercializadores crezcan con
            nosotros: con condiciones preferenciales, garantía respaldada y un asesor que
            conoce el catálogo y conoce el negocio.
          </p>
        </div>
        <div className="story-stats">
          <div>
            <div className="story-stat__num">+3.000</div>
            <div className="story-stat__label">Referencias en catálogo</div>
            <div className="story-stat__desc">Switches eléctricos, motores, amortiguadores a gas, palancas, manijas y cerraduras.</div>
          </div>
          <div>
            <div className="story-stat__num">Marcas</div>
            <div className="story-stat__label">Representadas en Colombia</div>
            <div className="story-stat__desc">Distribución directa con respaldo comercial del fabricante o importador.</div>
          </div>
          <div>
            <div className="story-stat__num">Nacional</div>
            <div className="story-stat__label">Cobertura comercial</div>
            <div className="story-stat__desc">Vendedores en varias zonas del país para acompañar al cliente donde esté.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Where() {
  return (
    <section className="where">
      <div className="where__inner">
        <div className="where__info">
          <span className="eye">Dónde estamos</span>
          <h2>Oficina en Bogotá D.C.</h2>
          <div className="where__addr">
            <div className="where__addr-row">
              <i data-lucide="map-pin"></i>
              <div>
                <strong>{IMCO.direccion}</strong>
                <span>{IMCO.ciudad}</span>
              </div>
            </div>
            <div className="where__addr-row">
              <i data-lucide="phone"></i>
              <div>
                <strong>{IMCO.telDisplay}</strong>
                <span>Línea comercial · Lun–Vie 9:00 a.m. – 5:00 p.m.</span>
              </div>
            </div>
            <div className="where__addr-row">
              <i data-lucide="message-circle"></i>
              <div>
                <strong>{IMCO.whatsappDisplay}</strong>
                <span>WhatsApp comercial · Mismos horarios</span>
              </div>
            </div>
            <div className="where__addr-row">
              <i data-lucide="mail"></i>
              <div>
                <strong>{IMCO.emailContacto}</strong>
                <span>Cotizaciones y nuevos convenios</span>
              </div>
            </div>
            <a
              className="btn btn-secondary"
              href="https://www.google.com/maps/search/?api=1&query=Diagonal+46+Sur+%2350-79+Bogot%C3%A1"
              target="_blank" rel="noopener noreferrer"
              style={{ alignSelf: "flex-start", marginTop: 6 }}
            >
              <i data-lucide="navigation" style={{ width: 16, height: 16 }}></i>
              Cómo llegar
            </a>
          </div>
        </div>
        <div className="where__map map-canvas" aria-label="Mapa de ubicación">
          <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
            <defs>
              <pattern id="grid-where" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#E2E2E0" strokeWidth="0.5" />
              </pattern>
            </defs>
            <rect width="800" height="500" fill="url(#grid-where)" />
            {/* "blocks" */}
            <g fill="#EFEFEE" stroke="#E2E2E0" strokeWidth="1">
              <rect x="60" y="80" width="160" height="100" rx="2" />
              <rect x="240" y="80" width="120" height="60" rx="2" />
              <rect x="380" y="80" width="100" height="120" rx="2" />
              <rect x="500" y="80" width="140" height="80" rx="2" />
              <rect x="660" y="80" width="100" height="100" rx="2" />
              <rect x="60" y="200" width="100" height="140" rx="2" />
              <rect x="180" y="200" width="180" height="80" rx="2" />
              <rect x="180" y="300" width="80" height="80" rx="2" />
              <rect x="280" y="300" width="100" height="100" rx="2" />
              <rect x="400" y="220" width="120" height="80" rx="2" />
              <rect x="540" y="180" width="100" height="120" rx="2" />
              <rect x="660" y="200" width="100" height="80" rx="2" />
              <rect x="60" y="360" width="200" height="100" rx="2" />
              <rect x="280" y="420" width="140" height="60" rx="2" />
              <rect x="440" y="320" width="120" height="100" rx="2" />
              <rect x="580" y="320" width="160" height="140" rx="2" />
            </g>
            <g stroke="#fff" strokeWidth="6">
              <line x1="0" y1="190" x2="800" y2="190" />
              <line x1="0" y1="310" x2="800" y2="310" />
              <line x1="220" y1="0" x2="220" y2="500" />
              <line x1="540" y1="0" x2="540" y2="500" />
              <line x1="380" y1="0" x2="380" y2="500" />
            </g>
            <g stroke="#C9C9C6" strokeWidth="1" strokeDasharray="4 4">
              <line x1="0" y1="190" x2="800" y2="190" />
              <line x1="0" y1="310" x2="800" y2="310" />
              <line x1="220" y1="0" x2="220" y2="500" />
              <line x1="540" y1="0" x2="540" y2="500" />
              <line x1="380" y1="0" x2="380" y2="500" />
            </g>
            <path d="M 0 310 L 380 310 L 380 250" fill="none" stroke="#145D9E" strokeWidth="4" strokeLinecap="round" />
          </svg>
          <div className="map-pin">
            <div className="map-pin__label">Imcopartes · Sede Bogotá</div>
            <div className="map-pin__dot"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="cta-strip">
      <div className="cta-strip__shape"></div>
      <div className="cta-strip__inner">
        <h3>¿Listos para trabajar juntos?</h3>
        <p>
          Si eres distribuidor, taller o comercializador en Colombia, escríbenos y
          un asesor comercial te responde a la brevedad.
        </p>
        <div className="cta-strip__btns">
          <a
            className="btn btn-on-blue btn-lg"
            href={waLink("Hola Imcopartes, quisiera más información sobre sus productos.")}
            target="_blank" rel="noopener noreferrer"
          >
            <i data-lucide="message-circle" style={{ width: 16, height: 16 }}></i>
            Escribir por WhatsApp
          </a>
          <a className="btn btn-on-blue-outline btn-lg" href="Contacto.html">
            Ir a contacto
            <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
          </a>
        </div>
      </div>
    </section>
  );
}

function App() {
  useLucide();
  return (
    <div data-screen-label="Nosotros">
      <Nav active="nosotros" />
      <AboutHead />
      <Story />
      <Where />
      <FinalCTA />
      <Footer />
      <WhatsAppFAB message="Hola Imcopartes, vi su sitio web y quisiera más información." />
      <CookieBanner />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);