// Maquicenter — Landing page sections
// All sections exported to window at bottom.

const { useState } = React;

const Icon = ({ name, size, color }) => (
  <i data-lucide={name} style={{ width: size, height: size, color }}></i>
);

const WA_URL = "https://wa.me/573114877207";
const EMAIL  = "mailto:gerenciamaquicentermr@gmail.com";
const IG_URL = "https://www.instagram.com/maquicenter_mr/";
const LI_URL = "https://www.linkedin.com/in/maquicentermr-undefined-808091354/";
const FB_URL = "https://www.facebook.com/profile.php?id=61580266080431";

// ---------------- Header ----------------
function Header() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  return (
    <header className="mc-header">
      <div className="container">
        <div className="row">
          <a href="#top" className="mc-logo" onClick={close}>
            <img src="assets/logo-maquicenter-dark.png" alt="Maquicenter MR" />
          </a>
          <nav className="mc-nav">
            <a href="#servicios">Servicios</a>
            <a href="#nosotros">Nosotros</a>
            <a href="#proyectos">Proyectos</a>
            <a href="#contacto">Contacto</a>
          </nav>
          <div className="mc-header-cta">
            <a className="btn btn-primary" href={WA_URL} target="_blank" rel="noopener">
              Cotizar por WhatsApp <Icon name="arrow-right" />
            </a>
          </div>
          <button className="mc-burger" aria-label="Menú" onClick={() => setOpen(o => !o)}>
            <Icon name={open ? "x" : "menu"} />
          </button>
        </div>
      </div>
      <div className={"mc-mobile-menu" + (open ? " open" : "")}>
        <a href="#servicios" onClick={close}>Servicios</a>
        <a href="#nosotros" onClick={close}>Nosotros</a>
        <a href="#proyectos" onClick={close}>Proyectos</a>
        <a href="#contacto" onClick={close}>Contacto</a>
        <a className="btn btn-primary" href={WA_URL} target="_blank" rel="noopener" onClick={close}>
          Cotizar por WhatsApp <Icon name="arrow-right" />
        </a>
      </div>
    </header>
  );
}

// ---------------- Hero ----------------
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg"></div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">Maquinaria pesada · Medellín, Colombia</span>
            <h1>Soluciones <span className="y">confiables</span> para sus obras civiles.</h1>
            <p className="lead">
              Venta, alquiler, repuestos y ejecución de obra con maquinaria en óptimas
              condiciones. Más de 25 años respaldando proyectos de infraestructura en todo el país.
            </p>
            <div className="hero-actions">
              <a className="btn btn-primary btn-lg" href={WA_URL} target="_blank" rel="noopener">
                Cotizar por WhatsApp <Icon name="arrow-right" />
              </a>
              <a className="btn btn-secondary btn-lg" href={EMAIL}>
                Escribir un correo
              </a>
            </div>
          </div>
          <div className="hero-visual">
            <img className="photo" src="assets/hero-image.png" alt="Obra en Medellín" />
            <span className="stamp">Disponible · 25 a operando</span>
            <div className="footstamp">
              <span>MQ-MED-COL</span>
              <span>01 / 06</span>
            </div>
          </div>
        </div>
      </div>
      <div className="hero-stripe"></div>
    </section>
  );
}

// ---------------- Trust bar ----------------
function TrustBar() {
  const items = [
    ["shield-check", "Pólizas y seguros",     "con Sura"],
    ["user-cog",     "CEO Yohan Mira",        "Ingeniero Civil"],
    ["clock",        "25+ años",              "de experiencia"],
    ["construction", "6+ contratos",          "con infraestructura nacional"],
    ["badge-check",  "Empresa",               "certificada"],
  ];
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-row">
          {items.map(([ic, b, sub]) => (
            <div key={b} className="trust-item">
              <div className="ic"><Icon name={ic} /></div>
              <div className="txt"><strong>{b}</strong>{sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Services ----------------
const SERVICES = [
  ["01", "truck",       "Alquiler de Maquinaria",          "Desde equipos livianos hasta maquinaria pesada — todos en excelentes condiciones de mantenimiento. Arrendamos según el alcance real de su obra, sin compromisos innecesarios.", "assets/services/01-alquiler.png"],
  ["02", "package",     "Venta de Maquinaria para Obra",   "Equipos livianos y pesados para desarrollo de obras civiles: motores diésel y gasolina, mezcladoras de concreto, plantas dosificadoras, equipos de movimiento de tierra y compactación.", "assets/services/02-venta.webp"],
  ["03", "wrench",      "Repuestos y Lubricantes",         "Suministro de repuestos originales y lubricantes especializados para maquinaria pesada. Garantía de continuidad operativa y vida útil prolongada de sus equipos.", "assets/services/03-repuestos.png"],
  ["04", "clipboard-list", "Asesoría Técnica en Obra",     "Acompañamiento experto en control de ciclos de maquinaria, eficiencia operativa, mantenimiento preventivo y cuidado de equipos en sitio.", "assets/services/04-asesoria.jpeg"],
  ["05", "construction", "Ejecución de Obras Civiles",     "Ejecutamos directamente movimientos de tierra con equipos mecánicos y fabricación de pisos en concreto industriales.", "assets/services/05-ejecucion.png"],
  ["06", "headset",     "Atención Personalizada",          "Analizamos cada proyecto en detalle para ofrecer soluciones prácticas y adaptadas. No vendemos catálogos: resolvemos necesidades reales.", "assets/services/06-atencion.png"],
];
function Services() {
  return (
    <section className="section" id="servicios">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Nuestros servicios</span>
          <h2>Todo lo que su obra necesita, en un solo lugar.</h2>
          <p>Desde el alquiler de maquinaria hasta la ejecución directa de obra civil. Soluciones integrales con respaldo técnico real.</p>
        </div>
        <div className="services-grid">
          {SERVICES.map(([n, ic, t, d, photo]) => (
            <div key={n} className="service">
              <div className="photo-slot">
                <img src={photo} alt={t} />
              </div>
              <div className="body">
                <div className="head">
                  <div className="num">{n}</div>
                  <div className="ic"><Icon name={ic} /></div>
                </div>
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Audience ----------------
const AUDIENCE = [
  ["hard-hat",       "Directores de obra",         "Necesita maquinaria confiable, lista y con respaldo técnico. Le respondemos rápido y cumplimos en sitio."],
  ["building-2",     "Empresas constructoras",     "Busca un aliado estable para múltiples proyectos. Le ofrecemos cobertura nacional, pólizas Sura y experiencia comprobada."],
  ["user-check",     "Contratistas independientes","Requiere ejecución directa de movimientos de tierra o pisos industriales. Llegamos con equipo propio y cumplimos plazos."],
];
function Audience() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Trabajamos para</span>
          <h2>Soluciones diseñadas para quienes mueven la construcción.</h2>
        </div>
        <div className="audience-grid">
          {AUDIENCE.map(([ic, t, d]) => (
            <div key={t} className="aud-card">
              <div className="ic"><Icon name={ic} /></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Why ----------------
const WHY = [
  ["target",         "Atención personalizada",   "Cada obra es distinta. Analizamos su caso antes de cotizar."],
  ["wrench",         "Experiencia operativa",    "Más de 25 años en el sector. Conocemos la obra desde adentro."],
  ["shield-check",   "Respaldo con Sura",        "Pólizas y seguros vigentes en todos nuestros servicios."],
  ["map",            "Cobertura nacional",       "Operamos desde Medellín hacia todo el territorio colombiano."],
  ["user-cog",       "Liderazgo técnico",        "Dirigidos por un ingeniero civil con visión moderna del negocio."],
  ["check-circle-2", "Cumplimiento garantizado", "Entregamos lo prometido, en los tiempos acordados."],
];
function Why() {
  return (
    <section className="section" id="nosotros">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Por qué Maquicenter</span>
          <h2>Compromiso con cada proyecto.</h2>
          <p>Lo que nos diferencia no es solo la maquinaria — es cómo trabajamos con usted.</p>
        </div>
        <div className="why-grid">
          {WHY.map(([ic, t, d]) => (
            <div key={t} className="why-item">
              <div className="ic"><Icon name={ic} /></div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Clients ----------------
function Clients() {
  const logos = [
    { src: "assets/clients/sura.png",     alt: "Sura",     style: { maxHeight: 64 } },
    { src: "assets/clients/condor.webp",  alt: "Cóndor",   style: { maxHeight: 32 } },
    { src: "assets/clients/mincivil.png", alt: "Mincivil", style: { maxHeight: 56 } },
    { src: "assets/clients/vinus.png",    alt: "Vinus",    style: { maxHeight: 52 } },
    { src: "assets/clients/vincol.png",   alt: "Vincol",   style: { maxHeight: 48 } },
  ];
  return (
    <section className="section clients-section" id="proyectos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Empresas que han trabajado con nosotros</span>
          <h2>Respaldados por la industria.</h2>
          <p>Hemos sido aliados de empresas constructoras y proyectos de infraestructura en toda Colombia.</p>
        </div>
        <div className="clients-grid">
          {logos.map(l => (
            <div key={l.alt} className="client-logo" title={l.alt}>
              <img src={l.src} alt={l.alt} style={l.style} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Testimonial ----------------
function Testimonial() {
  return (
    <section className="testimonial">
      <div className="container">
        <span className="eyebrow">Lo que dicen nuestros clientes</span>
        <blockquote>
          “Destacamos el excelente servicio, cumplimiento y calidad de los equipos de Maquicenter.
          Su compromiso y atención oportuna han sido fundamentales para el desarrollo de nuestra obra.
          Recomendamos ampliamente su trabajo y profesionalismo.”
        </blockquote>
        <cite>
          <span className="who">Verónica Mesa</span>
          <span className="role">Departamento de Contratación · Obra Magdalena 2</span>
        </cite>
      </div>
    </section>
  );
}

// ---------------- FAQ ----------------
const FAQ = [
  ["¿Sus equipos tienen mantenimiento al día?",          "Sí. Toda nuestra maquinaria pasa por mantenimiento preventivo y correctivo programado. Entregamos equipos listos para operar desde el primer día."],
  ["¿Trabajan fuera de Medellín?",                       "Sí. Tenemos sede en Medellín pero atendemos proyectos en todo el territorio nacional. Coordinamos transporte y logística según el destino."],
  ["¿Manejan pólizas y seguros?",                        "Sí. Contamos con respaldo de Sura para nuestros servicios y maquinaria. Le entregamos toda la documentación requerida."],
  ["¿Cuánto demora una cotización?",                     "Respondemos cotizaciones en menos de 24 horas hábiles. Para proyectos urgentes, atendemos por WhatsApp en el mismo día."],
  ["¿Puedo alquilar por días o solo por obra completa?", "Manejamos alquileres flexibles: por días, semanas, meses o por proyecto completo. Adaptamos el contrato a su cronograma."],
  ["¿Ejecutan obra civil directamente o solo alquilan?", "Hacemos ambas. Ejecutamos movimientos de tierra y pisos industriales con equipo propio, además de vender y alquilar maquinaria."],
];
function FAQs() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2>Resolvemos sus dudas antes de cotizar.</h2>
        </div>
        <div className="faq-list">
          {FAQ.map(([q, a], i) => (
            <div key={q} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q}</span>
                <span className="plus"><Icon name="plus" /></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- CTA final ----------------
function CTAFinal() {
  return (
    <section className="cta-final" id="contacto">
      <div className="container">
        <span className="eyebrow">Hablemos de su obra</span>
        <h2>¿Tiene un <span className="y">proyecto</span><br/>en mente?</h2>
        <p>
          Le respondemos por WhatsApp en menos de 24 horas con una propuesta clara
          y a la medida de su obra.
        </p>
        <div className="cta-final-actions">
          <a className="btn btn-primary btn-lg" href={WA_URL} target="_blank" rel="noopener">
            Escribir por WhatsApp <Icon name="arrow-right" />
          </a>
          <a className="btn btn-secondary btn-lg" href={EMAIL}>
            <Icon name="mail" /> gerenciamaquicentermr@gmail.com
          </a>
        </div>
        <div className="meta">
          <div className="item"><Icon name="map-pin" /> Medellín, Colombia</div>
          <div className="item"><Icon name="phone" /> +57 311 487 7207</div>
          <div className="item"><Icon name="clock" /> Respuesta en menos de 24 h hábiles</div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Footer ----------------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="brand">
            <img src="assets/logo-maquicenter-dark.png" alt="Maquicenter MR" />
            <p><em>Soluciones integrales para construcción y maquinaria en Colombia.</em></p>
          </div>
          <div>
            <h6>Servicios</h6>
            <ul>
              <li><a href="#servicios">Alquiler de maquinaria</a></li>
              <li><a href="#servicios">Venta de maquinaria</a></li>
              <li><a href="#servicios">Repuestos y lubricantes</a></li>
              <li><a href="#servicios">Asesoría técnica</a></li>
              <li><a href="#servicios">Ejecución de obras</a></li>
            </ul>
          </div>
          <div>
            <h6>Contacto</h6>
            <ul>
              <li><a href={WA_URL} target="_blank" rel="noopener">WhatsApp · +57 311 487 7207</a></li>
              <li><a href={EMAIL}>gerenciamaquicentermr@gmail.com</a></li>
              <li><a>Medellín, Colombia</a></li>
            </ul>
          </div>
          <div>
            <h6>Redes</h6>
            <ul>
              <li><a className="social" href={IG_URL} target="_blank" rel="noopener"><Icon name="instagram" /> Instagram</a></li>
              <li><a className="social" href={LI_URL} target="_blank" rel="noopener"><Icon name="linkedin" /> LinkedIn</a></li>
              <li><a className="social" href={FB_URL} target="_blank" rel="noopener"><Icon name="facebook" /> Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="meta">
          <div>© 2026 Maquicenter MR SAS · Todos los derechos reservados</div>
          <div className="right">
            <a>Términos</a>
            <a>Privacidad</a>
            <a>Habeas data</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------------- WA Float ----------------
function WAFloat() {
  return (
    <a className="wa-float" href={WA_URL} target="_blank" rel="noopener" aria-label="WhatsApp">
      <Icon name="message-circle" />
    </a>
  );
}

Object.assign(window, {
  Icon, Header, Hero, TrustBar, Services, Audience, Why, Clients,
  Testimonial, FAQs, CTAFinal, Footer, WAFloat,
});