// Contact page components — Imcopartes

const { useState, useEffect, useMemo } = React;

/* ===== Nav, Footer, WhatsAppFAB, CookieBanner vienen de shared-components.jsx ===== */

/* ===== Page head ===== */
function PageHead() {
  return (
    <header className="page-head">
      <div className="page-head__diagonal"></div>
      <div className="page-head__inner">
        <div>
          <div className="page-head__eyebrow">Contáctanos</div>
          <h1 className="page-head__title">
            <em>Hablemos</em>.
          </h1>
          <p className="page-head__lead">
            Escríbenos por el formulario o WhatsApp. Atendemos a distribuidores, talleres
            y comercializadores en Colombia
            <strong style={{ color: '#fff', fontWeight: 700 }}> con RUT vigente</strong>.
          </p>
        </div>
        <div className="page-head__quickfacts">
          <div className="qfact">
            <i data-lucide="truck" style={{ width: 18, height: 18 }}></i>
            <div>
              <strong>Solo mayoristas</strong>
              Distribuidores y talleres
            </div>
          </div>
          <div className="qfact">
            <i data-lucide="map-pin" style={{ width: 18, height: 18 }}></i>
            <div>
              <strong>Cobertura nacional</strong>
              Solo en Colombia
            </div>
          </div>
          <div className="qfact">
            <i data-lucide="shield-check" style={{ width: 18, height: 18 }}></i>
            <div>
              <strong>Garantía</strong>
              Respaldo del fabricante
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ===== Contact form ===== */
// Integración con servicio externo: Web3Forms (free tier, sin backend propio).
// Para activarlo en producción:
//   1. Registrarse en https://web3forms.com con pedidos@imcopartes.com
//   2. Copiar el "Access Key" recibido por correo
//   3. Pegarlo en FORM_ACCESS_KEY abajo (o exponerlo vía window.IMCO_FORM_KEY)
// Mientras esté vacío, el formulario funciona en modo "simulación":
// valida, genera un código de referencia, y muestra el estado de éxito,
// pero NO envía nada a un servidor. Útil para QA visual.
const FORM_ENDPOINT = "https://api.web3forms.com/submit";
const FORM_ACCESS_KEY = (typeof window !== "undefined" && window.IMCO_FORM_KEY) || ""; // TODO: pegar access key

function ContactForm() {
  const [audience, setAudience] = useState('distribuidor');
  const [values, setValues] = useState({
    nombre: '', empresa: '', email: '', tel: '', cc: '+57',
    consulta: 'cotizacion', mensaje: '',
    referencia: '', consent: false,
  });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [refCode, setRefCode] = useState('');

  const set = (k) => (e) => {
    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setValues((s) => ({ ...s, [k]: v }));
    if (errors[k]) setErrors((s) => ({ ...s, [k]: null }));
  };

  function validate() {
    const e = {};
    if (!values.nombre.trim()) e.nombre = 'Ingresa tu nombre.';
    if (!values.email.trim()) e.email = 'Ingresa un correo.';
    else if (!/^\S+@\S+\.\S+$/.test(values.email)) e.email = 'Correo inválido.';
    if (!values.tel.trim()) e.tel = 'Ingresa un teléfono.';
    else if (!/^[0-9 \-]{7,}$/.test(values.tel)) e.tel = 'Teléfono inválido.';
    if (!values.mensaje.trim() || values.mensaje.trim().length < 10) e.mensaje = 'Cuéntanos un poco más (mín. 10 caracteres).';
    if (!values.empresa.trim()) e.empresa = 'Ingresa la razón social.';
    if (!values.referencia.trim()) e.referencia = 'Ingresa tu RUT (NIT o cédula).';
    if (!values.consent) e.consent = 'Debes aceptar la política.';
    return e;
  }

  async function handleSubmit(ev) {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length !== 0) return;

    const code = 'IMC-' + Math.random().toString(36).slice(2, 7).toUpperCase();
    setSubmitting(true);

    // Si hay access key configurado, POST real a Web3Forms.
    // Si no, simulación (útil para QA visual y vistas previas).
    if (FORM_ACCESS_KEY) {
      try {
        const payload = {
          access_key: FORM_ACCESS_KEY,
          subject: `[Imcopartes ${code}] Nueva ${values.consulta} · ${audience}`,
          from_name: values.nombre,
          replyto: values.email,
          audiencia: audience,
          ref_code: code,
          ...values,
        };
        await fetch(FORM_ENDPOINT, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
      } catch (err) {
        // Falla silenciosa: aún así mostramos éxito al usuario, pero
        // logueamos para que el dev lo capture (Sentry / GA / etc).
        console.warn('[Imcopartes] Form submit failed:', err);
      }
    }

    setRefCode(code);
    setSubmitted(true);
    setSubmitting(false);
    requestAnimationFrame(() => window.lucide?.createIcons?.());
  }

  if (submitted) {
    return (
      <div className="form-success">
        <div className="form-success__check">
          <i data-lucide="check" style={{ width: 32, height: 32 }}></i>
        </div>
        <h2>Recibimos tu mensaje.</h2>
        <p>
          Gracias, {values.nombre.split(' ')[0]}. Un asesor de Imcopartes te contactará
          al correo <strong>{values.email}</strong> a la brevedad.
        </p>
        <div className="form-success__ref">
          <i data-lucide="hash" style={{ width: 14, height: 14, color: 'var(--imco-blue)' }}></i>
          Referencia: <strong>{refCode}</strong>
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button
            className="btn btn-secondary"
            onClick={() => {
              setSubmitted(false);
              setValues({
                nombre: '', empresa: '', email: '', tel: '', cc: '+57',
                consulta: 'cotizacion', mensaje: '', referencia: '', consent: false,
              });
              requestAnimationFrame(() => window.lucide?.createIcons?.());
            }}
          >
            Enviar otro mensaje
          </button>
          <a className="btn btn-primary" href="#">
            <i data-lucide="layout-grid" style={{ width: 16, height: 16 }}></i>
            Ver catálogo
          </a>
        </div>
      </div>
    );
  }

  const audiences = [
    { id: 'distribuidor', label: 'Distribuidor', icon: 'truck' },
    { id: 'taller', label: 'Taller', icon: 'wrench' },
    { id: 'comercializador', label: 'Comercializador', icon: 'store' },
  ];

  return (
    <form className="form-card" onSubmit={handleSubmit} noValidate>
      <h2>Solicita tu cotización mayorista.</h2>
      <p className="form-card__sub">
        Atendemos pedidos al por mayor con RUT vigente. Diligencia el formulario y un asesor comercial te contactará a la brevedad.
      </p>

      <div className="wholesale-banner">
        <i data-lucide="info" style={{ width: 18, height: 18 }}></i>
        <div>
          <strong>Servicio exclusivo para mayoristas.</strong>
          <span> Atendemos a distribuidores, talleres y comercializadores con RUT vigente en Colombia. Si eres consumidor final, contáctanos vía nuestros distribuidores autorizados.</span>
        </div>
      </div>

      <div className="segmented" role="tablist" aria-label="Tipo de cliente">
        {audiences.map((a) => (
          <button
            key={a.id}
            type="button"
            role="tab"
            aria-selected={audience === a.id}
            className={audience === a.id ? 'active' : ''}
            onClick={() => setAudience(a.id)}
          >
            <i data-lucide={a.icon}></i> {a.label}
          </button>
        ))}
      </div>

      <div className="form-row">
        <div className={'field' + (errors.nombre ? ' field--error' : '')}>
          <label htmlFor="nombre">Nombre completo <span className="req">*</span></label>
          <input id="nombre" type="text" placeholder="Andrés Ramírez"
                 value={values.nombre} onChange={set('nombre')} />
          {errors.nombre && (
            <div className="field__err">
              <i data-lucide="alert-circle" style={{ width: 12, height: 12 }}></i> {errors.nombre}
            </div>
          )}
        </div>
        <div className={'field' + (errors.empresa ? ' field--error' : '')}>
          <label htmlFor="empresa">Razón social <span className="req">*</span></label>
          <input
            id="empresa"
            type="text"
            placeholder="Taller Ramírez S.A.S."
            value={values.empresa}
            onChange={set('empresa')}
          />
          {errors.empresa && (
            <div className="field__err">
              <i data-lucide="alert-circle" style={{ width: 12, height: 12 }}></i> {errors.empresa}
            </div>
          )}
        </div>
      </div>

      <div className="form-row">
        <div className={'field' + (errors.email ? ' field--error' : '')}>
          <label htmlFor="email">Correo electrónico <span className="req">*</span></label>
          <input id="email" type="email" placeholder="andres@taller.com"
                 value={values.email} onChange={set('email')} />
          {errors.email && (
            <div className="field__err">
              <i data-lucide="alert-circle" style={{ width: 12, height: 12 }}></i> {errors.email}
            </div>
          )}
        </div>
        <div className={'field' + (errors.tel ? ' field--error' : '')}>
          <label htmlFor="tel">Teléfono / WhatsApp <span className="req">*</span></label>
          <div className="phone-wrap">
            <select value={values.cc} onChange={set('cc')} aria-label="País">
              <option value="+57">+57</option>
            </select>
            <input id="tel" type="tel" placeholder="300 000 0000"
                   value={values.tel} onChange={set('tel')} />
          </div>
          {errors.tel && (
            <div className="field__err">
              <i data-lucide="alert-circle" style={{ width: 12, height: 12 }}></i> {errors.tel}
            </div>
          )}
        </div>
      </div>

      <div className="form-row">
        <div className="field">
          <label htmlFor="consulta">Tipo de consulta</label>
          <select id="consulta" value={values.consulta} onChange={set('consulta')}>
            <option value="cotizacion">Cotización al por mayor</option>
            <option value="distribuidor">Convenio de distribución</option>
            <option value="referencia">Disponibilidad de referencia</option>
            <option value="marca-novparts">Marca representada — Novparts</option>
            <option value="marca-mrshift">Marca representada — MrShift</option>
            <option value="marca-mrswitch">Marca representada — MrSwitch</option>
            <option value="marca-prolift">Marca representada — ProLift</option>
            <option value="garantia">Garantía</option>
            <option value="otro">Otro</option>
          </select>
        </div>
        <div className={'field' + (errors.referencia ? ' field--error' : '')}>
          <label htmlFor="nit">RUT (NIT o cédula) <span className="req">*</span></label>
          <input id="nit" type="text" placeholder="900.000.000-0"
                 value={values.referencia} onChange={set('referencia')}
                 style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }} />
          {errors.referencia && (
            <div className="field__err">
              <i data-lucide="alert-circle" style={{ width: 12, height: 12 }}></i> {errors.referencia}
            </div>
          )}
        </div>
      </div>

      <div className="form-row form-row--single">
        <div className={'field' + (errors.mensaje ? ' field--error' : '')}>
          <label htmlFor="mensaje">Mensaje <span className="req">*</span></label>
          <textarea
            id="mensaje"
            placeholder="Cuéntanos qué necesitas: referencias, cantidades estimadas, marcas y modelos…"
            value={values.mensaje}
            onChange={set('mensaje')}
          />
          {errors.mensaje && (
            <div className="field__err">
              <i data-lucide="alert-circle" style={{ width: 12, height: 12 }}></i> {errors.mensaje}
            </div>
          )}
        </div>
      </div>

      <label className={'consent' + (errors.consent ? ' field--error' : '')}>
        <input type="checkbox" checked={values.consent} onChange={set('consent')} />
        <span>
          He leído y acepto la <a href="#">Política de tratamiento de datos personales</a> de Imcopartes S.A.S. conforme a la <strong>Ley 1581 de 2012</strong> y autorizo el contacto comercial. Conozco que puedo ejercer mis derechos de acceso, rectificación y supresión escribiendo a <a href={`mailto:${IMCO.emailHabeas}`}>{IMCO.emailHabeas}</a>.
          {errors.consent && (
            <span style={{ color: 'var(--danger)', display: 'block', marginTop: 4, fontWeight: 600 }}>
              {errors.consent}
            </span>
          )}
        </span>
      </label>

      <div className="submit-row">
        <div className="submit-row__meta">
          <i data-lucide="shield-check"></i>
          Te respondemos a la brevedad por correo o WhatsApp.
        </div>
        <button type="submit" className="btn btn-primary btn-lg" disabled={submitting}>
          {submitting ? 'Enviando…' : 'Enviar mensaje'}
          <i data-lucide={submitting ? 'loader-2' : 'arrow-right'} style={{ width: 16, height: 16 }}></i>
        </button>
      </div>
    </form>
  );
}

/* ===== Info column ===== */
function useNowOpen() {
  // Horario comercial Imcopartes: L–V 9:00 a.m. – 5:00 p.m. (hora Bogotá).
  return useMemo(() => {
    const now = new Date();
    const day = now.getDay();         // 0 Sun .. 6 Sat
    const h = now.getHours() + now.getMinutes() / 60;
    if (day === 0 || day === 6) return false;
    return h >= 9 && h < 17;
  }, []);
}

function InfoColumn() {
  const isOpen = useNowOpen();
  return (
    <aside className="info-stack">
      <div className="info-card">
        <div className="info-card__icon"><i data-lucide="map-pin"></i></div>
        <div className="info-card__body">
          <div className="info-card__label">Sede principal</div>
          <p className="info-card__value">{IMCO.direccion}</p>
          <p className="info-card__meta">{IMCO.ciudad}</p>
          <a className="info-card__link" href="https://www.google.com/maps/search/?api=1&query=Diagonal+46+Sur+%2350-79+Bogot%C3%A1" target="_blank" rel="noopener noreferrer">
            Ver en Google Maps <i data-lucide="external-link"></i>
          </a>
        </div>
      </div>

      <div className="info-card">
        <div className="info-card__icon"><i data-lucide="phone"></i></div>
        <div className="info-card__body">
          <div className="info-card__label">Teléfono</div>
          <p className="info-card__value"><a href={`tel:${IMCO.telLink}`} style={{ color: 'inherit', textDecoration: 'none' }}>{IMCO.telDisplay}</a></p>
          <p className="info-card__meta">Línea comercial · Lun–Vie 9:00 a.m. – 5:00 p.m.</p>
          <a className="info-card__link" href={waLink('Hola Imcopartes, quisiera más información.')} target="_blank" rel="noopener noreferrer">
            <i data-lucide="message-circle"></i> WhatsApp {IMCO.whatsappDisplay}
          </a>
        </div>
      </div>

      <div className="info-card">
        <div className="info-card__icon"><i data-lucide="mail"></i></div>
        <div className="info-card__body">
          <div className="info-card__label">Correo mayorista</div>
          <p className="info-card__value">{IMCO.emailMayoristas}</p>
          <p className="info-card__meta">Cotizaciones por volumen y convenios de distribución.</p>
          <a className="info-card__link" href={`mailto:${IMCO.emailContacto}`}>
            {IMCO.emailContacto} <i data-lucide="arrow-up-right"></i>
          </a>
        </div>
      </div>

      <div className="info-card">
        <div className="info-card__icon"><i data-lucide="clock"></i></div>
        <div className="info-card__body">
          <div className="info-card__label">Horario de atención</div>
          <div className="hours">
            <div><strong>Lunes — Viernes</strong> · 9:00 a.m. – 5:00 p.m.</div>
            <div><strong>Sábados, domingos y festivos</strong> · cerrado</div>
            {isOpen ? (
              <span className="open-now">Abierto ahora</span>
            ) : (
              <span className="open-now" style={{
                color: 'var(--warning)', background: 'var(--warning-soft)',
              }}>
                <style>{`.open-now[style*="warning"]::before { background: var(--warning); box-shadow: 0 0 0 3px rgb(197 122 18 / 0.18); }`}</style>
                Fuera de horario
              </span>
            )}
          </div>
        </div>
      </div>

      <div className="info-card" style={{ alignItems: 'center' }}>
        <div className="info-card__body" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <div>
            <div className="info-card__label">Síguenos</div>
            <p className="info-card__meta" style={{ margin: 0 }}>Catálogo, novedades y promos.</p>
          </div>
          <div className="socials">
            <a
              href="https://instagram.com/imcopartes"
              target="_blank" rel="noopener noreferrer"
              aria-label="Síguenos en Instagram @imcopartes"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
              </svg>
            </a>
            <a
              href="https://facebook.com/imcopartes"
              target="_blank" rel="noopener noreferrer"
              aria-label="Síguenos en Facebook @imcopartes"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </aside>
  );
}

/* ===== Departments ===== */
function Departments() {
  const depts = [
    {
      icon: 'truck',
      name: 'Distribuidores',
      desc: 'Convenios comerciales, precios por volumen y descuentos exclusivos para clientes constantes.',
      email: IMCO.emailDistribuidores,
      phone: IMCO.telDisplay,
    },
    {
      icon: 'shopping-cart',
      name: 'Pedidos al por mayor',
      desc: 'Pedidos mayoristas, disponibilidad de referencias y tiempos de despacho.',
      email: IMCO.emailMayoristas,
      phone: IMCO.telDisplay,
    },
    {
      icon: 'shield-check',
      name: 'Garantías',
      desc: 'Casos de garantía bajo la Ley 1480 · respaldo comercial del fabricante o importador.',
      email: IMCO.emailSoporte,
      phone: IMCO.telDisplay,
    },
  ];
  return (
    <section className="depts-section">
      <div className="depts-inner">
        <div className="depts-head">
          <span className="eye">Equipos</span>
          <h2>Escribe directo al área que necesitas.</h2>
        </div>
        <div className="depts">
          {depts.map((d) => (
            <div key={d.name} className="dept-card">
              <div className="dept-card__icon"><i data-lucide={d.icon}></i></div>
              <h3>{d.name}</h3>
              <p>{d.desc}</p>
              <div className="dept-card__contact">
                <a href={`mailto:${d.email}`}><i data-lucide="mail"></i> {d.email}</a>
                <a href="#"><i data-lucide="phone"></i> {d.phone}</a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Map strip (stylized; no third-party) ===== */
function MapStrip() {
  return (
    <section className="map-strip">
      <div className="map-inner">
        <div className="map-info">
          <span className="eye" style={{ display: 'block', marginBottom: 4 }}>Visítanos</span>
          <h3>Oficina en Bogotá D.C.</h3>
          <p>
            Recibimos clientes y aliados de lunes a viernes. Ven a conocer
            nuestro centro de distribución y sala de exhibición.
          </p>
          <div style={{ fontSize: 14, color: '#fff', lineHeight: 1.6 }}>
            <div style={{ fontWeight: 700 }}>{IMCO.direccion}</div>
            <div style={{ color: 'var(--neutral-300)' }}>{IMCO.ciudad}</div>
          </div>
          <a className="btn btn-primary" href="#" style={{ background: '#fff', color: 'var(--imco-blue)' }}>
            <i data-lucide="navigation" style={{ width: 16, height: 16 }}></i>
            Cómo llegar
          </a>
        </div>
        <div className="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" 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)" />
            {/* "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>
            {/* roads */}
            <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>
            {/* highlighted route */}
            <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>
  );
}

/* ===== FAQ ===== */
function FAQ() {
  const [openIdx, setOpenIdx] = useState(0);
  const items = [
    {
      q: '¿Atienden a consumidores finales?',
      a: 'No. Imcopartes es un canal mayorista. Solo atendemos a clientes mayoristas con RUT vigente (personas naturales o jurídicas). Si eres consumidor final, ubica un distribuidor autorizado en tu ciudad.',
    },
    {
      q: '¿Hay un pedido mínimo?',
      a: 'Sí, manejamos un monto mínimo de pedido. Nuestro asesor comercial te lo confirma al momento de cotizar, junto con los precios mayoristas y condiciones aplicables según tu volumen.',
    },
    {
      q: '¿Cómo funciona el despacho?',
      a: 'Revisamos cada pedido, lo alistamos y lo enviamos a tu ciudad a través de operador logístico aliado. Tu asesor comercial te confirma los tiempos según disponibilidad y destino.',
    },
    {
      q: '¿Qué marcas representa Imcopartes?',
      a: 'Distribuimos varias marcas representadas en Colombia. Consulta la sección de marcas en el Inicio para conocerlas en detalle. Si te interesa ser distribuidor autorizado de alguna de ellas, agenda una llamada con nuestro equipo comercial.',
    },
    {
      q: '¿Atienden pedidos fuera de Colombia?',
      a: 'No. Actualmente solo atendemos a clientes dentro del territorio colombiano. Contamos con vendedores en varias zonas del país para acompañarte donde estés.',
    },
    {
      q: '¿Qué garantía tienen los productos?',
      a: 'Todas las referencias cuentan con garantía respaldada conforme a la Ley 1480 (Estatuto del Consumidor) y respaldo comercial del fabricante o importador.',
    },
  ];
  return (
    <section className="faq-section">
      <div className="faq-inner">
        <div className="faq-head">
          <span className="eye">Preguntas frecuentes</span>
          <h2>Antes de escribirnos, mira si está aquí.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <details
              key={i}
              className={'faq-item' + (openIdx === i ? ' open' : '')}
              open={openIdx === i}
              onToggle={(e) => {
                if (e.target.open) {
                  setOpenIdx(i);
                  requestAnimationFrame(() => window.lucide?.createIcons?.());
                } else if (openIdx === i) {
                  setOpenIdx(-1);
                }
              }}
            >
              <summary>
                <span>{it.q}</span>
                <i data-lucide="plus"></i>
              </summary>
              <div className="faq-body">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Marcas representadas strip ===== */
function BrandsStrip() {
  return (
    <section className="depts-section" style={{ background: '#fff' }}>
      <div className="depts-inner">
        <div className="depts-head">
          <span className="eye">Marcas representadas en Colombia</span>
          <h2>Las marcas que distribuimos.</h2>
        </div>
        <div className="depts">
          {BRANDS.map((b) => (
            <div key={b.id} className="dept-card" style={{ borderTop: `4px solid ${b.color}` }}>
              <div className="dept-card__icon" style={{ background: b.color }}>
                <i data-lucide="badge-check"></i>
              </div>
              <h3 style={{ color: b.color, letterSpacing: '-0.02em', fontSize: 22 }}>{b.name}</h3>
              <p style={{ textTransform: 'uppercase', fontSize: 11, letterSpacing: '0.12em', fontWeight: 700, color: 'var(--fg-muted)', margin: 0 }}>{b.tagline}</p>
              <p>{b.desc}</p>
              <div className="dept-card__contact">
                <a href={waLink(`Hola Imcopartes, quisiera más información sobre la marca ${b.name}.`)} target="_blank" rel="noopener noreferrer">
                  <i data-lucide="arrow-right"></i> Solicitar catálogo {b.name}
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== App ===== */
function App() {
  useLucide();
  return (
    <div data-screen-label="Contacto">
      <Nav active="contacto" />
      <PageHead />
      <section className="contact-section" id="cotizar">
        <div className="contact-grid">
          <ContactForm />
          <InfoColumn />
        </div>
      </section>
      {/* Eliminados: Departments, BrandsStrip, MapStrip (duplicados con otras páginas) */}
      <FAQ />
      <Footer />
      <WhatsAppFAB message="Hola Imcopartes, estoy en la página de contacto y quisiera hablar con un asesor." />
      <CookieBanner />
    </div>
  );
}

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