// sections.jsx — Graficom (clean redesign closer to original)

const { useEffect, useRef } = React;

function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          obs.unobserve(el);
        }
      }),
      { threshold: 0.12 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return <As ref={ref} className={className + " reveal"} {...rest}>{children}</As>;
}

/* Icons (stroke, simple) */
const Icon = {
  Edit: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/>
      <path d="M14.06 6.19l3.75 3.75M19 4l1 1"/>
    </svg>
  ),
  Layers: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3 2 8l10 5 10-5-10-5z"/>
      <path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>
    </svg>
  ),
  Book: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h11a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V4z"/>
      <path d="M4 17a3 3 0 0 1 3-3h11"/>
    </svg>
  ),
  Box: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 8L12 3 3 8v8l9 5 9-5V8z"/>
      <path d="M3 8l9 5 9-5M12 13v8"/>
    </svg>
  ),
  Tag: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20.6 13.4L13 21l-9-9 7.6-7.6c.4-.4.9-.6 1.4-.6H20a1 1 0 0 1 1 1v6c0 .5-.2 1-.6 1.4z"/>
      <circle cx="16" cy="8" r="1.3"/>
    </svg>
  ),
  Calendar: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2"/>
      <path d="M8 3v4M16 3v4M3 10h18"/>
    </svg>
  ),
  Gift: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="8" width="18" height="13" rx="1"/>
      <path d="M12 8v13M3 13h18M7 8a2 2 0 0 1 0-4c2 0 5 4 5 4M17 8a2 2 0 0 0 0-4c-2 0-5 4-5 4"/>
    </svg>
  ),
  Briefcase: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="7" width="18" height="13" rx="2"/>
      <path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18"/>
    </svg>
  ),
  Megaphone: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 11v2a1 1 0 0 0 1 1h2l6 5V5L6 10H4a1 1 0 0 0-1 1z"/>
      <path d="M16 8a5 5 0 0 1 0 8"/>
    </svg>
  ),
  Pin: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/>
      <circle cx="12" cy="9" r="2.5"/>
    </svg>
  ),
  Phone: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 13 13 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 13 13 0 0 0 2.8.7 2 2 0 0 1 1.7 2z"/>
    </svg>
  ),
  Mail: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="16" rx="2"/>
      <path d="M22 6l-10 7L2 6"/>
    </svg>
  ),
  Clock: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <path d="M12 7v5l3 2"/>
    </svg>
  ),
  Logo: (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M7 4h10v10a5 5 0 1 1-10 0V4z" fill="currentColor"/>
      <circle cx="12" cy="14" r="1.6" fill="#2D6FD7"/>
    </svg>
  ),
};

/* ───── Nav ───── */
function Nav() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <nav className={"nav" + (open ? " is-open" : "")}>
      <div className="nav-inner">
        <a href="#top" className="brand" onClick={close}>
          <img src="logo.png" alt="Graficom" className="brand-logo"/>
        </a>
        <div className="nav-right">
          <div className="nav-links">
            <a href="#top" onClick={close}>Inicio</a>
            <a href="#servicios" onClick={close}>Servicios</a>
            <a href="#trabajos" onClick={close}>Trabajos</a>
            <a href="#nosotros" onClick={close}>Nosotros</a>
            <a href="#clientes" onClick={close}>Clientes</a>
            <a href="#faq" onClick={close}>FAQ</a>
          </div>
          <a href="#contacto" className="btn sm nav-cta-btn" onClick={close}>Contactanos</a>
        </div>
        <button
          type="button"
          className="nav-burger"
          aria-label={open ? "Cerrar menú" : "Abrir menú"}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span/>
          <span/>
          <span/>
        </button>
      </div>
    </nav>
  );
}

/* ───── Hero ───── */
function Hero() {
  return (
    <header id="top" className="hero">
      <div className="hero-bg">
        <div className="photo"/>
        <div className="overlay"/>
      </div>
      <div className="hero-content">
        <Reveal as="h1" delay={80}>
          Tradición gráfica y <span className="em">tecnología en cada etapa.</span>
        </Reveal>
        <Reveal as="p" className="sub" delay={160}>
          Imprenta familiar con taller propio: pre-impresión CTP, offset
          y digital, encuadernado y terminación — todo bajo un mismo techo.
        </Reveal>
        <Reveal className="hero-ctas" delay={240}>
          <a href="#contacto" className="btn">Pedir presupuesto</a>
          <a href="#trabajos" className="btn ghost">Ver trabajos</a>
        </Reveal>
      </div>
    </header>
  );
}

/* ───── Trust strip ───── */
function TrustStrip() {
  return (
    <div className="trust-strip">
      <div className="trust-inner">
        <div className="trust-cell">
          <div className="n">70<sup>+</sup></div>
          <div className="l">Años de trayectoria</div>
        </div>
        <div className="trust-cell">
          <div className="n">900<sup>m²</sup></div>
          <div className="l">Taller operativo propio</div>
        </div>
        <div className="trust-cell">
          <div className="n">24<sup>hs</sup></div>
          <div className="l">Entregas CTP y digital</div>
        </div>
        <div className="trust-cell">
          <div className="n">+200</div>
          <div className="l">Marcas que confiaron</div>
        </div>
      </div>
    </div>
  );
}

/* ───── Servicios ───── */
function Servicios() {
  return (
    <section id="servicios" className="sec">
      <div className="container">
        <Reveal className="head">
          <div className="eyebrow">Soluciones gráficas para cada necesidad</div>
          <h2>Conocé nuestros servicios</h2>
          <div className="accent-line"/>
        </Reveal>

        <div className="svcs">
          <Reveal className="svc">
            <div className="ico">{Icon.Edit}</div>
            <h3>Pre-impresión</h3>
            <p>Grabado de chapas CTP con tecnología láser para impresión offset. Servicio ágil y preciso — hacemos entregas en el mismo día.</p>
            <ul>
              <li>Pruebas de color</li>
              <li>Imposición y trazado</li>
              <li>Chapas offset CTP láser</li>
              <li>Diseño y armado de arte</li>
            </ul>
          </Reveal>
          <Reveal className="svc" delay={100}>
            <div className="ico">{Icon.Layers}</div>
            <h3>Impresión</h3>
            <p>Offset y digital para tiradas grandes y pequeñas. Ideal para libros, etiquetas, papelería, packaging, diarios, revistas o cualquier necesidad.</p>
            <ul>
              <li>Offset 4 colores + Pantone</li>
              <li>Digital de corta tirada</li>
              <li>Papel · cartulina · cartón</li>
              <li>Pruebas físicas previas</li>
            </ul>
          </Reveal>
          <Reveal className="svc" delay={200}>
            <div className="ico">{Icon.Book}</div>
            <h3>Terminación</h3>
            <p>Encuadernado, laminado, troquelado y armado. Fabricación de cuadernos, agendas, carpetas, productos editoriales y más.</p>
            <ul>
              <li>Anillado · cosido · pegado</li>
              <li>Troquelado a medida</li>
              <li>Stamping · UV · relieve</li>
              <li>Embalado y logística</li>
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ───── Productos estrella ───── */
function Productos() {
  const items = [
    { name: "Cuadernos corporativos", desc: "Tapa dura · cosido · stamping", icon: Icon.Book, tag: "Estrella" },
    { name: "Agendas personalizadas", desc: "Anuales · semanales · espiral", icon: Icon.Calendar, tag: "Estrella" },
    { name: "Calendarios", desc: "Pared · escritorio · base rígida", icon: Icon.Calendar, tag: "Estrella" },
    { name: "Packaging & cajas", desc: "Cartón corrugado · troquelado", icon: Icon.Box, tag: "Estrella" },
  ];
  return (
    <section id="productos" className="sec sec-soft">
      <div className="container">
        <Reveal className="head">
          <div className="eyebrow">Productos estrella</div>
          <h2>Convertimos papel en marca presente todo el año</h2>
          <div className="accent-line"/>
          <p className="sub">Cuadernos, agendas, calendarios y packaging personalizados con tu identidad — la forma más efectiva de estar en la oficina de tus clientes los 365 días.</p>
        </Reveal>

        <div className="products">
          {items.map((it, i) => (
            <Reveal key={i} className="prod" delay={i * 80}>
              <div className="ph">
                <span className="ph-tag">{it.tag}</span>
                <div className="ph-glyph">{it.icon}</div>
              </div>
              <div className="meta">
                <h4>{it.name}</h4>
                <p>{it.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───── Galería ───── */
function Galeria() {
  const items = [
    { name: "Cuadernos Allianz", cat: "Tapa flexible · Espiralado", span: "span-a", img: "img/allianz.jpg" },
    { name: "Tarjetas Federal Valores", cat: "Offset · Personales", span: "span-b", img: "img/tarjetas.jpg" },
    { name: "Sobres Plater", cat: "Offset 4/0", span: "span-c", img: "img/plater.jpg" },
    { name: "Carpetas Fundación Cornell", cat: "Institucional · Tríptico", span: "span-d", img: "img/cornell.jpg" },
    { name: "Calendario DSV", cat: "Escritorio · Espiral", span: "span-e", img: "img/calendario.jpg" },
    { name: "Anotador ACA", cat: "Bolsillo · Espiralado", span: "span-f", img: "img/aca.jpg" },
    { name: "Calendario Rossi", cat: "Pared", span: "span-g", img: "img/rossi.jpg" },
  ];
  return (
    <section id="trabajos" className="sec sec-soft">
      <div className="container">
        <Reveal className="head">
          <div className="eyebrow">Galería de trabajos</div>
          <h2>Lo último que salió del taller</h2>
          <div className="accent-line"/>
          <p className="sub">Una selección reciente de packaging, editorial, corporativo y merchandising. Más trabajos día a día en <a href="https://instagram.com/graficomar" target="_blank" rel="noopener" style={{ color: "var(--brand)", fontWeight: 600 }}>@graficomar</a>.</p>
        </Reveal>

        <div className="gallery">
          {items.map((it, i) => (
            <Reveal key={i} className={"gal-cell " + it.span} delay={i * 50}>
              <img src={it.img} alt={it.name} className="gal-img" loading="lazy"/>
              <div className="gal-info">
                <span className="cat">{it.cat}</span>
                <span className="name">{it.name}</span>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="gallery-foot">
          <a href="#contacto" className="btn ghost">Quiero algo similar →</a>
        </Reveal>
      </div>
    </section>
  );
}

/* ───── Nosotros ───── */
function Nosotros() {
  return (
    <section id="nosotros" className="sec">
      <div className="container">
        <div className="about">
          <Reveal className="about-photo">
            <img src="img/ramiro.png" alt="Ramiro Ares — Director de Graficom" className="about-img"/>
            <div className="badge">
              <small>Director</small>
              <span>Ramiro Ares</span>
            </div>
          </Reveal>
          <Reveal className="about-text" delay={120}>
            <span className="eyebrow">Quiénes somos</span>
            <h2>Una imprenta familiar con más de 70 años haciendo el trabajo bien</h2>
            <p>Graficom es una imprenta familiar con más de 70 años en el sector gráfico, fundada en 1955 en Villa Lynch. Tres generaciones apostando a la mejora continua, la innovación tecnológica y a formar equipos comprometidos con cada pieza que sale del taller.</p>

            <div className="pull">
              "Creo en el trabajo bien hecho, en las relaciones a largo plazo y en el crecimiento constante."
            </div>

            <p>Brindamos un servicio integral — del diseño a la terminación final — para pequeños emprendimientos y grandes empresas, con asesoramiento estratégico en piezas de marketing impreso.</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ───── Casos de uso ───── */
function CasosDeUso() {
  return (
    <section className="sec sec-soft">
      <div className="container">
        <Reveal className="head">
          <div className="eyebrow">Casos de uso</div>
          <h2>Para qué nos contratan los equipos de marketing y RR.HH.</h2>
          <div className="accent-line"/>
        </Reveal>

        <div className="uses">
          <Reveal className="use">
            <div className="ico">{Icon.Megaphone}</div>
            <h4>Merchandising corporativo</h4>
            <p>Objetos publicitarios para impactar a nuevos clientes — agendas, libretas y kits con tu marca presente los 365 días del año en su oficina.</p>
          </Reveal>
          <Reveal className="use" delay={100}>
            <div className="ico">{Icon.Gift}</div>
            <h4>Regalos de fin de año</h4>
            <p>El detalle tradicional para agradecer la confianza de socios, clientes y colaboradores. Producción coordinada con tiempos pactados.</p>
          </Reveal>
          <Reveal className="use" delay={200}>
            <div className="ico">{Icon.Briefcase}</div>
            <h4>Branding interno & kits</h4>
            <p>Material para mantener una estética profesional coherente en oficina y para integrar kits de bienvenida de nuevos empleados.</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ───── Clientes ───── */
function Clientes() {
  const items = [
    { name: "LG", img: "img/clientes/lg.png", style: "allcaps" },
    { name: "MercadoLibre", img: "img/clientes/mercadolibre.png", style: "" },
    { name: "Coca-Cola", img: "img/clientes/coca-cola.png", style: "italic" },
    { name: "Sony", img: "img/clientes/sony.png", style: "" },
    { name: "47 Street", img: "img/clientes/47-street.png", style: "thin" },
    { name: "ACA", img: "img/clientes/aca.png", style: "allcaps" },
    { name: "YPF", img: "img/clientes/ypf.png", style: "allcaps" },
    { name: "Allianz", img: "img/clientes/allianz.png", style: "" },
  ];
  return (
    <section id="clientes" className="sec">
      <div className="container">
        <Reveal className="head">
          <div className="eyebrow">Nuestros clientes</div>
          <h2>Marcas que confiaron en nuestro taller</h2>
          <div className="accent-line"/>
          <p className="sub">Más de 200 empresas — desde startups hasta corporaciones — eligen Graficom para sus piezas impresas. Trabajamos para retail, tecnología, seguros, moda, logística y muchos más.</p>
        </Reveal>

        <Reveal>
          <div className="clients">
            {items.map((c, i) => (
              <div key={i} className="client">
                <img
                  className="client-logo"
                  src={c.img}
                  alt={c.name}
                  loading="lazy"
                  onError={(e) => {
                    e.currentTarget.style.display = "none";
                    const wm = e.currentTarget.nextElementSibling;
                    if (wm) wm.style.display = "block";
                  }}
                />
                <div className={"wm " + (c.style || "")} style={{ display: "none" }}>{c.name}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ───── Testimonio ───── */
function Testimonio() {
  return (
    <section className="testi">
      <Reveal className="testi-inner">
        <div className="avatar">
          <img src="img/laura.png" alt="Laura García"/>
        </div>
        <div className="who">Laura García</div>
        <div className="who-role">Coordinadora de Marketing</div>
        <blockquote>
          "Desde el primer contacto recibimos una orientación clara para elegir
          los mejores materiales. El acompañamiento fue impecable y cumplimos
          con todos los plazos pactados, sin sorpresas."
        </blockquote>
        <div className="stars">★★★★★</div>
      </Reveal>
    </section>
  );
}

/* ───── FAQ ───── */
function FAQ() {
  const items = [
    { q: "¿Trabajan tiradas pequeñas o solo grandes volúmenes?", a: "Ambas. Tenemos impresión offset para tiradas medianas y grandes, y digital para corta tirada — desde una sola pieza. La elección depende del producto, terminación y plazo." },
    { q: "¿En cuánto tiempo entregan un trabajo?", a: "Para CTP y digital corta tirada hacemos entregas en el mismo día. Trabajos más complejos con encuadernado o troquelado se cotizan con plazos pactados — siempre cumplimos lo prometido." },
    { q: "¿Necesito tener el diseño listo para imprimir?", a: "No es obligatorio. Recibimos tu arte final o te asesoramos en pre-impresión: armado, imposición, pruebas de color y ajustes para que el resultado en papel coincida con lo que viste en pantalla." },
    { q: "¿Hacen packaging y etiquetas personalizadas?", a: "Sí. Trabajamos cartón microcorrugado, troquelado custom, etiquetas adhesivas con barniz UV y terminaciones especiales — stamping, relieve, foil." },
    { q: "¿Dónde está el taller y puedo visitarlo?", a: "Estamos en C. M. Cuenca 668, Villa Lynch, partido de San Martín, Provincia de Buenos Aires. Coordinamos visitas con cita previa para que conozcas los equipos y los materiales." },
    { q: "¿Qué productos terminados fabrican?", a: "Cuadernos, agendas, calendarios, carpetas, libros, libretas, blocks, etiquetas, packaging, displays, cartelería, papelería corporativa y kits de merchandising completos." },
  ];
  return (
    <section id="faq" className="sec sec-soft">
      <div className="container">
        <div className="faq-grid">
          <Reveal className="faq-side">
            <span className="eyebrow">Preguntas frecuentes</span>
            <h2>Lo que más nos preguntan antes del primer pedido</h2>
            <p>Si tu duda no está acá, escribinos y la respondemos personalmente. Te orientamos según el tipo de pieza, cantidad y plazo de entrega.</p>
            <a href="#contacto" className="btn" style={{ marginTop: 20 }}>Hacé tu consulta</a>
          </Reveal>
          <Reveal className="faq-list" delay={120}>
            {items.map((it, i) => (
              <details key={i} className="faq-item" name="graficom-faq">
                <summary>
                  <span>{it.q}</span>
                  <span className="plus" aria-hidden="true">
                    <svg viewBox="0 0 24 24" width="14" height="14">
                      <line x1="4" y1="12" x2="20" y2="12" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
                      <line className="plus-v" x1="12" y1="4" x2="12" y2="20" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
                    </svg>
                  </span>
                </summary>
                <div className="ans">{it.a}</div>
              </details>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ───── Contact ───── */
function Contacto() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | ok | error
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    const data = Object.fromEntries(new FormData(e.target).entries());
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(data),
      });
      const json = await res.json();
      if (json.success) { e.target.reset(); window.location.href = "gracias.html"; }
      else setStatus("error");
    } catch (err) {
      setStatus("error");
    }
  };
  return (
    <section id="contacto" className="sec">
      <div className="container">
        <div className="contact-wrap">
          <Reveal className="contact-side">
            <span className="eyebrow">Trabajemos juntos</span>
            <h2>Contanos tu próximo proyecto</h2>
            <p>Si estás buscando una imprenta con experiencia, tecnología y compromiso, completá el formulario y nos pondremos en contacto a la brevedad — siempre en menos de 24 hs hábiles.</p>
            <ul className="contact-info-list">
              <li>
                <div className="ci-ico">{Icon.Pin}</div>
                <div>
                  <div className="ci-k">Taller operativo</div>
                  <div className="ci-v">C. M. Cuenca 668 · B1672 Villa Lynch · San Martín, Buenos Aires</div>
                </div>
              </li>
              <li>
                <div className="ci-ico">{Icon.Phone}</div>
                <div>
                  <div className="ci-k">WhatsApp</div>
                  <div className="ci-v"><a href="https://wa.me/5491132556719" target="_blank" rel="noopener">+54 9 11 3255-6719</a> · <a href="https://wa.me/5491157211612" target="_blank" rel="noopener">+54 9 11 5721-1612</a></div>
                </div>
              </li>
              <li>
                <div className="ci-ico">{Icon.Mail}</div>
                <div>
                  <div className="ci-k">Email</div>
                  <div className="ci-v"><a href="mailto:info@graficom.com.ar">info@graficom.com.ar</a></div>
                </div>
              </li>
              <li>
                <div className="ci-ico">{Icon.Mail}</div>
                <div>
                  <div className="ci-k">Instagram</div>
                  <div className="ci-v"><a href="https://instagram.com/graficomar" target="_blank" rel="noopener">@graficomar</a></div>
                </div>
              </li>
              <li>
                <div className="ci-ico">{Icon.Clock}</div>
                <div>
                  <div className="ci-k">Horarios</div>
                  <div className="ci-v">Lunes a Viernes · 8 a 17 hs</div>
                </div>
              </li>
            </ul>
          </Reveal>

          <Reveal as="form" className="contact-form" delay={120} onSubmit={handleSubmit}>
            <input type="hidden" name="access_key" value="89dc0faf-ec4a-4f32-8b78-3a6f918e0d07"/>
            <input type="hidden" name="subject" value="Nueva consulta desde el sitio web — Graficom"/>
            <input type="hidden" name="from_name" value="Web Graficom"/>
            <input type="checkbox" name="botcheck" tabIndex={-1} autoComplete="off" style={{ display: "none" }}/>
            <div className="row">
              <div className="field">
                <label>Nombre <span className="req">*</span></label>
                <input type="text" name="name" required placeholder="Tu nombre completo"/>
              </div>
              <div className="field">
                <label>Empresa</label>
                <input type="text" name="empresa" placeholder="Nombre de tu empresa"/>
              </div>
            </div>
            <div className="row">
              <div className="field">
                <label>Email <span className="req">*</span></label>
                <input type="email" name="email" required placeholder="tu@dominio.com"/>
              </div>
              <div className="field">
                <label>Teléfono</label>
                <input type="tel" name="telefono" placeholder="+54 9 11..."/>
              </div>
            </div>
            <div className="field">
              <label>Tipo de proyecto</label>
              <input type="text" name="tipo_de_proyecto" placeholder="Cuadernos, packaging, etiquetas, etc."/>
            </div>
            <div className="field">
              <label>Mensaje <span className="req">*</span></label>
              <textarea name="message" rows={4} required placeholder="Contanos qué necesitás imprimir, cantidades y plazos..."/>
            </div>
            {status === "error" ? (
              <div className="form-note err" role="alert">
                Hubo un problema al enviar. Escribinos por WhatsApp al{" "}
                <a href="https://wa.me/5491132556719" target="_blank" rel="noopener">+54 9 11 3255-6719</a> e intentamos de nuevo.
              </div>
            ) : null}
            <button type="submit" className="btn submit" disabled={status === "sending"}>
              {status === "sending" ? "Enviando…" : "Enviar mensaje"}
            </button>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ───── Map ───── */
function MapBand() {
  const q = encodeURIComponent("Graficom, C. M. Cuenca 668, B1672 Villa Lynch, Provincia de Buenos Aires, Argentina");
  return (
    <div className="map-band">
      <iframe
        className="map-iframe"
        title="Ubicación de Graficom — C. M. Cuenca 668, Villa Lynch"
        src={`https://www.google.com/maps?q=${q}&output=embed&z=16`}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen
      />
    </div>
  );
}

/* ───── Footer ───── */
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <a href="#top" className="brand">
              <img src="logo.png" alt="Graficom" className="brand-logo"/>
            </a>
            <p>Imprenta familiar offset y digital con más de 70 años imprimiendo en Villa Lynch, San Martín.</p>
          </div>
          <div className="foot-col">
            <h5>Sitio</h5>
            <ul>
              <li><a href="#top">Inicio</a></li>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#trabajos">Trabajos</a></li>
              <li><a href="#nosotros">Nosotros</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Servicios</h5>
            <ul>
              <li>Pre-impresión CTP</li>
              <li>Offset 4 colores</li>
              <li>Digital corta tirada</li>
              <li>Encuadernado</li>
              <li>Troquelado custom</li>
              <li>Stamping · UV</li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Contacto</h5>
            <ul>
              <li>C. M. Cuenca 668</li>
              <li>B1672 Villa Lynch, San Martín</li>
              <li><a href="https://wa.me/5491132556719" target="_blank" rel="noopener">+54 9 11 3255-6719</a></li>
              <li><a href="https://wa.me/5491157211612" target="_blank" rel="noopener">+54 9 11 5721-1612</a></li>
              <li><a href="mailto:info@graficom.com.ar">info@graficom.com.ar</a></li>
              <li><a href="https://instagram.com/graficomar" target="_blank" rel="noopener">@graficomar</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-meta">
          <span>© 1955–2026 Graficom — Imprenta familiar</span>
          <span>Villa Lynch · San Martín · Buenos Aires · Argentina</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, TrustStrip, Servicios, Productos, Galeria, Nosotros,
  CasosDeUso, Clientes, Testimonio, FAQ, Contacto, MapBand, Footer
});