/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
const { IconWarn, IconHelmet, IconAudit, IconHand, IconList, IconArrow, IconLinkedIn, IconFacebook, IconInstagram } = window.NexIcons;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E31E24",
  "heroAuto": true,
  "heroInterval": 5
}/*EDITMODE-END*/;

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
      });
    }, { threshold: .12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useScrolled() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return scrolled;
}

// ---------- Nav ----------
function Nav() {
  const scrolled = useScrolled();
  const [open, setOpen] = useState(false);
  const cls = `nav ${scrolled ? 'is-scrolled' : 'is-hero'}`;
  return (
    <header className={cls}>
      <div className="container nav-inner">
        <a className="nav-logo" href="#top">
          <img src="assets/nex-logo.png" alt="NEX Higiene y Seguridad" />
        </a>
        <nav className="nav-links">
          <a href="#nosotros">Nosotros</a>
          <a href="#servicios">Servicios</a>
          <a href="#clientes">Clientes</a>
          <a href="#contacto">Contacto</a>
        </nav>
        <a className="nav-cta" href="#presupuesto">
          Cotizar <IconArrow size={12} />
        </a>
        <button className={`nav-burger ${open ? 'open' : ''}`} onClick={() => setOpen(o => !o)} aria-label="Menú">
          <span /><span /><span />
        </button>
        {open && (
          <div className="mobile-menu">
            <a href="#nosotros" onClick={() => setOpen(false)}>Nosotros</a>
            <a href="#servicios" onClick={() => setOpen(false)}>Servicios</a>
            <a href="#clientes" onClick={() => setOpen(false)}>Clientes</a>
            <a href="#contacto" onClick={() => setOpen(false)}>Contacto</a>
            <a className="nav-cta" href="#presupuesto" onClick={() => setOpen(false)}>Cotizar <IconArrow size={12} /></a>
          </div>
        )}
      </div>
    </header>
  );
}

// ---------- Hero (defined in hero.jsx, loaded as window.Hero) ----------
const Hero = window.Hero;
const FormularioPresupuesto = window.FormularioPresupuesto;

// ---------- Servicios ----------
const SERVICIOS_DATA = [
  {
    icon: 'assets/icon-emergencia.png',
    title: 'Planes de emergencia',
    desc: <span>Confeccionamos <strong>planes de evacuación</strong> de acuerdo a las condiciones de cada cliente. Capacitamos al equipo y hacemos <strong>simulacros en vivo</strong> de cómo llevar a cabo cada plan.</span>,
  },
  {
    icon: 'assets/icon-soporte.png',
    title: 'Soporte en proyectos',
    desc: <span>Generación de avisos de riesgos en función de peligros detectados en higiene y seguridad. Se diseña un plan de acción para <strong>evitar accidentes laborales</strong> en determinados proyectos.</span>,
  },
  {
    icon: 'assets/icon-auditoria.png',
    title: 'Auditorías',
    desc: <span>Visitas mensuales para control del personal. Se exige cumplir las <strong>condiciones de seguridad</strong> explícitas según desarrolla la ley.</span>,
  },
  {
    icon: 'assets/icon-tierra.png',
    title: 'Estudio puesta a tierra',
    desc: <span>Medidas de seguridad para evitar desvíos de la corriente hacia la tierra, con el fin de <strong>impedir que los trabajadores entren en contacto directo</strong> con la electricidad.</span>,
  },
  {
    icon: 'assets/icon-mediciones.png',
    title: 'Mediciones',
    desc: <span>Para brindarle nuestro servicio de mediciones contamos con equipos tecnológicos de <strong>última generación</strong>, con certificación anual, operados por <strong>profesionales acreditados</strong>.</span>,
  },
];

function Services() {
  return (
    <section id="servicios" className="svc2-section">
      <div className="svc2-inner">
        <h2 className="svc2-heading">Servicios</h2>
        <div className="svc2-grid">
          {SERVICIOS_DATA.map((s, i) => (
            <div key={i} className="svc2-card">
              <img src={s.icon} alt={s.title} className="svc2-icon" />
              <h3 className="svc2-title">{s.title}</h3>
              <p className="svc2-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .svc2-section {
          padding: 80px 0;
          background: #F9F9F9;
        }
        .svc2-inner {
          width: 100%;
          max-width: 1240px;
          margin: 0 auto;
          padding: 0 28px;
        }
        .svc2-heading {
          font-family: 'Roboto', sans-serif;
          font-weight: 700;
          font-size: 28px;
          line-height: 1.1;
          letter-spacing: 0.15px;
          color: #000000;
          margin: 0 0 40px;
        }
        .svc2-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 16px;
        }
        .svc2-card {
          background: #FFFFFF;
          border: 1px solid #E6E6E6;
          border-radius: 12px;
          padding: 24px 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .svc2-icon {
          width: 48px;
          height: 48px;
          object-fit: contain;
          display: block;
        }
        .svc2-title {
          font-family: 'Roboto', sans-serif;
          font-weight: 600;
          font-size: 14px;
          color: #FF0000;
          margin: 0;
          line-height: 1.3;
        }
        .svc2-desc {
          font-family: 'Rubik', sans-serif;
          font-weight: 300;
          font-size: 14px;
          line-height: 20px;
          color: #2E2E2E;
          margin: 0;
        }
        @media (max-width: 1024px) and (min-width: 768px) {
          .svc2-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 767px) {
          .svc2-section { padding: 60px 0; }
          .svc2-inner { padding: 0 16px; }
          .svc2-grid { grid-template-columns: 1fr; gap: 24px; }
        }
      `}</style>
    </section>
  );
}

// ---------- Nosotros ----------
function Metodo() {
  return (
    <section id="nosotros" className="nos-section">
      <div className="nos-inner">
        <div className="nos-grid">

          <div className="nos-col-text">
            <h2 className="nos-title">Nosotros</h2>
            <p className="nos-body">
              Somos una consultora de Higiene y Seguridad en la región de Córdoba, fundada en 2016
              con un propósito claro: <strong>acompañar a las empresas a construir entornos
              laborales más seguros, saludables y conscientes.</strong> A lo largo de estos años
              trabajamos junto a más de 30 empresas de distintos sectores, brindando soluciones
              adaptadas a la realidad de cada organización. Nuestro equipo está liderado por
              el <strong>Lic. Juan Ledesma</strong>, cuya trayectoria en el campo de la seguridad
              laboral son el respaldo detrás de cada servicio que ofrecemos.
            </p>
          </div>

          <div className="nos-col-img">
            <img
              src="assets/image%2019.png"
              alt="Obra de construcción"
              className="nos-img"
              loading="lazy"
            />
          </div>

        </div>
      </div>

      <style>{`
        .nos-section {
          padding: 80px 0;
          background: #FFFFFF;
        }
        .nos-inner {
          width: 100%;
          max-width: 1240px;
          margin: 0 auto;
          padding: 0 28px;
        }
        .nos-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 32px;
          align-items: stretch;
        }
        .nos-col-text {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }
        .nos-title {
          font-family: 'Roboto', sans-serif;
          font-weight: 700;
          font-size: 28px;
          line-height: 1.1;
          letter-spacing: 0.15px;
          color: #000000;
          margin: 0;
        }
        .nos-body {
          font-family: 'Rubik', sans-serif;
          font-weight: 300;
          font-size: 16px;
          line-height: 22px;
          letter-spacing: 0.15px;
          color: #000000;
          margin: 0;
        }
        .nos-col-img {
          display: flex;
        }
        .nos-img {
          width: 100%;
          height: 100%;
          min-height: 280px;
          object-fit: cover;
          border-radius: 12px;
          display: block;
        }
        /* Responsive */
        @media (max-width: 767px) {
          .nos-section { padding: 60px 0; }
          .nos-inner { padding: 0 20px; }
          .nos-grid { grid-template-columns: 1fr; gap: 24px; }
          .nos-col-img { order: -1; }
          .nos-img { min-height: 200px; height: 220px; }
          .nos-title { font-size: 24px; }
          .nos-body { font-size: 15px; }
        }
      `}</style>
    </section>
  );
}

// ---------- Clientes ----------
const CLI_LOGOS = [
  { name: 'Becerra',          src: 'assets/client-becerra.png' },
  { name: 'Betania',          src: 'assets/client-betania.png' },
  { name: 'Falda del Carmen', src: 'assets/client-falda.png' },
  { name: 'Farmacity',        src: 'assets/client-farmacity.png' },
  { name: 'El Obraje',        src: 'assets/client-obraje.png' },
  { name: 'Santa Ana',        src: 'assets/client-santaana.png' },
];

function Clientes() {
  const track = [...CLI_LOGOS, ...CLI_LOGOS];
  return (
    <section id="clientes" className="cli-section">
      <div className="cli-inner">
        <h2 className="cli-title">Clientes</h2>
      </div>

      <div className="cli-marquee-wrap">
        <div className="cli-marquee-track">
          {track.map((logo, i) => (
            <div key={i} className="cli-logo">
              <img src={logo.src} alt={logo.name} loading="lazy" />
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .cli-section {
          padding: 48px 0;
          background: #FFFFFF;
          overflow: hidden;
        }
        .cli-inner {
          max-width: 1240px;
          margin: 0 auto;
          padding: 0 28px;
          margin-bottom: 32px;
        }
        .cli-title {
          font-family: 'Roboto', sans-serif;
          font-weight: 700;
          font-size: 28px;
          line-height: 1.1;
          letter-spacing: 0.15px;
          color: #000000;
          margin: 0;
        }
        .cli-marquee-wrap {
          overflow: hidden;
          width: 100%;
        }
        .cli-marquee-track {
          display: flex;
          align-items: center;
          gap: 72px;
          width: max-content;
          animation: cliScroll 20s linear infinite;
        }
        @keyframes cliScroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .cli-logo {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #FFFFFF;
          border: 1px solid #E0E0E0;
          border-radius: 999px;
          padding: 12px 24px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.06);
          filter: grayscale(1) opacity(0.6);
          transition: filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .cli-logo:hover {
          filter: grayscale(0) opacity(1);
          border-color: #FF0000;
          box-shadow: 0 4px 12px rgba(255,0,0,0.1);
        }
        .cli-logo img {
          height: 70px;
          width: auto;
          max-width: 160px;
          object-fit: contain;
          display: block;
        }
        @media (max-width: 767px) {
          .cli-logo img { height: 55px; max-width: 130px; }
          .cli-logo { padding: 10px 20px; }
          .cli-marquee-track { gap: 48px; }
        }
      `}</style>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer id="contacto" style={{
      background: '#1a1a1a',
      padding: '32px 40px',
    }}>
      <div style={{
        maxWidth: '1240px',
        margin: '0 auto',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '24px',
      }}>

        {/* Logo */}
        <img src="assets/nex-logo.png" alt="NEX Higiene y Seguridad" style={{ height: '36px', width: 'auto', display: 'block' }} />

        {/* Copyright */}
        <p style={{
          fontFamily: "'Rubik', sans-serif",
          fontWeight: 300,
          fontSize: '14px',
          color: '#888888',
          margin: 0,
          textAlign: 'center',
          flex: 1,
        }}>
          © 2026 NEX Higiene &amp; Seguridad. Todos los derechos reservados.
        </p>

        {/* Redes sociales */}
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexShrink: 0 }}>
          <a
            href="https://www.instagram.com/nex.higieneyseguridad/"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Instagram"
            style={{ color: '#888888', display: 'flex', transition: 'color .2s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#FFFFFF'}
            onMouseLeave={e => e.currentTarget.style.color = '#888888'}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
              <circle cx="12" cy="12" r="4"/>
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
            </svg>
          </a>
          <a
            href="mailto:"
            aria-label="Email"
            style={{ color: '#888888', display: 'flex', transition: 'color .2s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#FFFFFF'}
            onMouseLeave={e => e.currentTarget.style.color = '#888888'}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="4" width="20" height="16" rx="2"/>
              <polyline points="2,4 12,13 22,4"/>
            </svg>
          </a>
        </div>

      </div>

      <style>{`
        @media (max-width: 767px) {
          #contacto > div {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
          }
        }
      `}</style>
    </footer>
  );
}

// ---------- WhatsApp FAB ----------
function WhatsAppFab() {
  const msg = encodeURIComponent('Hola NEX, me gustaría una cotización.');
  return (
    <a className="wa-fab" href={`https://wa.me/5493510000000?text=${msg}`} target="_blank" rel="noopener noreferrer" aria-label="Hablar por WhatsApp">
      <span className="wa-tooltip">¿Hablamos por WhatsApp?</span>
      <svg width="30" height="30" viewBox="0 0 32 32" fill="currentColor">
        <path d="M16 0C7.16 0 0 7.16 0 16c0 2.82.74 5.47 2.04 7.78L0 32l8.45-2.21A15.93 15.93 0 0016 32c8.84 0 16-7.16 16-16S24.84 0 16 0zm0 29.2c-2.5 0-4.84-.69-6.85-1.88l-.49-.29-5.02 1.31 1.34-4.89-.32-.5A13.16 13.16 0 012.8 16c0-7.29 5.91-13.2 13.2-13.2S29.2 8.71 29.2 16 23.29 29.2 16 29.2zm7.24-9.88c-.4-.2-2.35-1.16-2.71-1.29-.36-.13-.62-.2-.89.2-.27.4-1.02 1.29-1.25 1.55-.23.27-.46.3-.86.1-.4-.2-1.69-.62-3.22-1.99-1.19-1.06-1.99-2.37-2.22-2.77-.23-.4-.02-.62.18-.82.18-.18.4-.46.6-.7.2-.23.27-.4.4-.66.13-.27.07-.5-.03-.7-.1-.2-.89-2.15-1.22-2.94-.32-.77-.65-.66-.89-.67h-.76c-.27 0-.7.1-1.07.5-.36.4-1.4 1.37-1.4 3.34s1.43 3.87 1.63 4.13c.2.27 2.83 4.32 6.85 6.06.96.41 1.7.66 2.28.84.96.31 1.83.27 2.51.16.77-.11 2.35-.96 2.68-1.89.33-.93.33-1.72.23-1.89-.1-.16-.36-.27-.76-.46z"/>
      </svg>
    </a>
  );
}

// ---------- App ----------
function App() {
  useReveal();
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.documentElement.style.setProperty('--nex-red', tweaks.accent);
  }, [tweaks.accent]);
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Services />
        <Metodo />
        <Clientes />
        <FormularioPresupuesto />
      </main>
      <Footer />
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Color">
          <window.TweakColor label="Acento" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
        </window.TweakSection>
        <window.TweakSection label="Hero">
          <window.TweakToggle label="Auto-rotar" value={tweaks.heroAuto} onChange={v => setTweak('heroAuto', v)} />
          <window.TweakSlider label="Intervalo" value={tweaks.heroInterval} min={3} max={10} step={1} unit="s" onChange={v => setTweak('heroInterval', v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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