// Inicio · Imcopartes

const { useState, useEffect } = React;

/* ===== Hero ===== */
function HomeHero() {
  return (
    <section className="hero">
      <div className="hero__diagonal"></div>
      <div className="hero__inner">
        <div>
          <span className="hero__eyebrow">
            <span className="pill">Mayorista automotriz · Importación directa</span>
          </span>
          <h1 className="hero__title">
            Importamos, distribuimos,<br /><em>respaldamos.</em>
          </h1>
          <p className="hero__lead">
            Repuestos automotrices al por mayor para distribuidores, talleres
            y comercializadores en Colombia. Marcas representadas y
            +3.000 referencias en stock.
          </p>
          <div className="hero__ctas">
            <a className="btn btn-primary btn-lg" href="Contacto.html#cotizar">
              Cotizar ahora
              <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
            </a>
            <a className="btn btn-secondary btn-lg" href="Catalogo.html" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.5)' }}>
              Ver catálogo
            </a>
          </div>
          <div className="hero__chips">
            <span className="hero__chip"><i data-lucide="truck" style={{ width: 14, height: 14 }}></i> Solo mayoristas con RUT</span>
            <span className="hero__chip"><i data-lucide="map-pin" style={{ width: 14, height: 14 }}></i> Cobertura nacional</span>
            <span className="hero__chip"><i data-lucide="handshake" style={{ width: 14, height: 14 }}></i> Marcas representadas</span>
          </div>
        </div>
        <div className="hero__art">
          <span className="hero__display-word hero__display-word--top">Movimiento</span>
          <img className="silo" src="assets/logos/imcopartes-blanco.svg" alt="" />
          <span className="hero__display-word hero__display-word--bottom">Evolución</span>
          <div className="hero__diagonal-band"></div>
        </div>
      </div>
    </section>
  );
}

/* ===== Stats ===== */
function HomeStats() {
  const items = [
    { num: "+3.000", label: "Referencias en catálogo" },
    { num: "Bogotá", label: "Sede principal" },
    { num: "Colombia", label: "Asesor comercial en tu región" },
  ];
  return (
    <section className="stats">
      <div className="stats__inner">
        {items.map((s, i) => (
          <div key={i} className="stat">
            <div className="stat__num"><em>{s.num}</em></div>
            <div className="stat__label">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== Propuestas de valor ===== */
function ValueProps() {
  const values = [
    {
      icon: "shield-check",
      title: "Repuestos confiables",
      text: "Proveedores verificados. Cada referencia con respaldo y garantía del fabricante o importador.",
    },
    {
      icon: "truck",
      title: "Despacho a nivel nacional",
      text: "Tu pedido revisado, alistado y enviado a tu ciudad con operador logístico aliado. Cobertura en todo el país.",
    },
    {
      icon: "users",
      title: "Asesor comercial dedicado",
      text: "Vendedores en varias zonas del país que conocen el catálogo y conocen tu negocio.",
    },
    {
      icon: "package-check",
      title: "Importación directa",
      text: "Distribuimos directamente nuestras marcas representadas, sin intermediarios y con respaldo del fabricante.",
    },
  ];
  return (
    <section className="values">
      <div className="values__inner">
        {values.map((v, i) => (
          <div key={i} className="value">
            <div className="value__icon"><i data-lucide={v.icon}></i></div>
            <h3>{v.title}</h3>
            <p>{v.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== Líneas de productos ===== */
function ProductLines() {
  const lines = [
    { icon: "zap",        name: "Switches eléctricos",  desc: "Switches de elevavidrios, encendido, luces y principales. Funcionamiento confiable, kilómetro tras kilómetro." },
    { icon: "fan",        name: "Cremalleras y Motores elevavidrios",   desc: "Cremalleras y motores que devuelven el accionamiento original al sistema de elevavidrios." },
    { icon: "rotate-cw",  name: "Cintas de airbag, pito y mandos", desc: "Carretes (clock springs) que conservan la conexión de airbag, pito y controles del volante." },
    { icon: "cylinder",   name: "Amortiguadores a gas",     desc: "Amortiguadores a gas para capó, compuerta y platón. Medidas originales y adaptaciones para cada vehículo." },
    { icon: "gamepad-2",  name: "Peras y palancas de cambio", desc: "Renueva el tacto del cambio. Variedad de modelos para múltiples plataformas y años." },
    { icon: "key-round",  name: "Manijas y cerraduras", desc: "Cerraduras, manijas exteriores e interiores que recuperan la seguridad y el acabado original de cada puerta." },
  ];
  return (
    <section className="lines">
      <div className="lines__inner">
        <div className="section__head" style={{ alignItems: "center" }}>
          <div>
            <span className="eye">Líneas de producto</span>
            <h2>El catálogo Imcopartes,<br />por categoría.</h2>
          </div>
          <a className="btn btn-secondary" href="Catalogo.html">
            Ver catálogo completo
            <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
          </a>
        </div>
        <div className="lines-grid">
          {lines.map((l, i) => (
            <a key={i} className="line-card" href="Catalogo.html">
              <div className="line-card__icon"><i data-lucide={l.icon}></i></div>
              <h3>{l.name}</h3>
              <p>{l.desc}</p>
              <span className="line-card__cta">
                Ver línea <i data-lucide="arrow-right" style={{ width: 12, height: 12 }}></i>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Marcas representadas ===== */
function HomeBrands() {
  return (
    <section className="brands-strip">
      <div className="brands-strip__inner">
        <div className="section__head section__head--center">
          <span className="eye">Marcas representadas</span>
          <h2>Lo que distribuimos en Colombia.</h2>
          <p style={{ maxWidth: "60ch", margin: "12px auto 0", color: "var(--fg-muted)", fontSize: 15, lineHeight: 1.55 }}>
            Cuatro marcas con identidad propia. Cada una pensada para una línea
            específica del negocio automotriz.
          </p>
        </div>
        <div className="brands-grid">
          {BRANDS.map((b) => (
            <article
              key={b.id}
              className={`brand-card brand-card--${b.id}`}
              style={{
                "--brand-color": b.color,
                "--brand-bg": b.bg,
                "--brand-border": b.border,
              }}
            >
              <div className="brand-card__accent"></div>
              <div className="brand-card__head">
                {b.logo ? (
                  <img className="brand-card__logo" src={b.logo} alt={b.name} />
                ) : (
                  <h3 className="brand-card__name">{b.name}</h3>
                )}
                <span className="brand-card__tagline">{b.tagline}</span>
              </div>
              <p className="brand-card__desc">{b.desc}</p>
              <a
                className="brand-card__cta"
                href={waLink(`Hola Imcopartes, quisiera más información sobre la marca ${b.name}.`)}
                target="_blank" rel="noopener noreferrer"
              >
                Solicitar catálogo {b.name}
                <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Cómo trabajamos ===== */
function HowItWorks() {
  const steps = [
    { n: "01", title: "Cotiza",   text: "Escríbenos por WhatsApp o por el formulario con tus referencias o necesidad." },
    { n: "02", title: "Confirma", text: "Recibe tu cotización con precios mayoristas y tiempos reales. Acuerda medio de pago con tu asesor comercial." },
    { n: "03", title: "Recibe",   text: "Revisamos, alistamos y enviamos tu pedido a tu ciudad con operador logístico aliado." },
  ];
  return (
    <section className="how">
      <div className="how__inner">
        <div className="section__head section__head--center">
          <span className="eye">Cómo trabajamos</span>
          <h2>Pedidos mayoristas en 3 pasos.</h2>
        </div>
        <div className="how-grid">
          {steps.map((s, i) => (
            <div key={i} className="how-step">
              <div className="how-step__num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== CTA Catálogo ===== */
function CatalogCTA() {
  return (
    <section className="catalog-cta">
      <div className="catalog-cta__diagonal"></div>
      <div className="catalog-cta__inner">
        <div>
          <span className="eye" style={{ color: "var(--blue-300)" }}>Catálogo y lista de referencias</span>
          <h2 style={{ marginTop: 12 }}>
            Tu próximo pedido<br />empieza acá.
          </h2>
          <p>
            Descarga la lista vigente con todas las referencias disponibles,
            o solicita el catálogo mayorista con precios y condiciones especiales
            para distribuidores autorizados.
          </p>
          <div className="catalog-cta__ctas">
            <a
              className="btn btn-primary btn-lg"
              href="assets/catalogo/Lista-de-Productos-Imcopartes-2026.pdf"
              download="Lista-de-Productos-Imcopartes-2026.pdf"
              target="_blank"
              rel="noopener noreferrer"
            >
              <i data-lucide="file-text" style={{ width: 16, height: 16 }}></i>
              Descargar lista (PDF)
            </a>
            <a
              className="btn btn-ghost btn-lg"
              style={{ color: "#fff", borderColor: "rgb(255 255 255 / 0.2)" }}
              href={waLink("Hola, soy distribuidor y quiero acceso al catálogo mayorista de Imcopartes.")}
              target="_blank"
              rel="noopener noreferrer"
            >
              <i data-lucide="message-circle" style={{ width: 16, height: 16 }}></i>
              Solicitar catálogo mayorista
            </a>
          </div>
        </div>
        <div className="catalog-cta__art">
          <div className="catalog-cta__pdf-glow"></div>
          <div className="catalog-cta__pdf-icon"></div>
          <div style={{ position: "relative", textAlign: "center", display: "flex", flexDirection: "column", gap: 6 }}>
            <h4>Lista de productos</h4>
            <span className="meta">PDF · Versión vigente</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Distribuidores banner ===== */
function DistributorsBanner() {
  return (
    <section className="dist-banner">
      <div className="dist-banner__shape"></div>
      <div className="dist-banner__inner">
        <div>
          <h3>Hablemos de tu próximo pedido.</h3>
          <p>
            Atendemos a distribuidores, talleres y comercializadores en toda Colombia.
            Escríbenos y un asesor te contacta para darte precios mayoristas y
            ayudarte a armar tu pedido.
          </p>
          <div className="dist-banner__benefits">
            <span className="dist-banner__benefit"><i data-lucide="badge-percent" style={{ width: 14, height: 14 }}></i> Precios mayoristas</span>
            <span className="dist-banner__benefit"><i data-lucide="package" style={{ width: 14, height: 14 }}></i> +3.000 referencias en stock</span>
            <span className="dist-banner__benefit"><i data-lucide="handshake" style={{ width: 14, height: 14 }}></i> Asesor que conoce el negocio</span>
          </div>
        </div>
        <div className="dist-banner__cta">
          <a className="btn btn-on-blue btn-lg" href="Catalogo.html">
            Cotizar
            <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
          </a>
          <a
            className="btn btn-on-blue-outline btn-lg"
            href={waLink("Hola Imcopartes, quisiera hablar con un asesor comercial.")}
            target="_blank"
            rel="noopener noreferrer"
          >
            <i data-lucide="message-circle" style={{ width: 16, height: 16 }}></i>
            WhatsApp asesor
          </a>
        </div>
      </div>
    </section>
  );
}

/* ===== App ===== */
function App() {
  useLucide();
  return (
    <div data-screen-label="Inicio">
      <Nav active="inicio" />
      <HomeHero />
      <HomeStats />
      <ValueProps />
      <ProductLines />
      <HomeBrands />
      <HowItWorks />
      <CatalogCTA />
      <DistributorsBanner />
      <Footer />
      <WhatsAppFAB message="Hola Imcopartes, vi su sitio web y quisiera más información." />
      <CookieBanner />
    </div>
  );
}

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