const { useState, useEffect } = React;

function JamonesCarbo() {
      const [page, setPage] = useState("inicio");
      const [filter, setFilter] = useState("todos");
      const [scrolled, setScrolled] = useState(false);
      const [menuOpen, setMenuOpen] = useState(false);
      const [formData, setFormData] = useState({ nombre: "", email: "", telefono: "", mensaje: "", website: "" });
      const [formStatus, setFormStatus] = useState(null); // null | "sending" | "ok" | "error"
      const [formError, setFormError] = useState("");

      const handleFormChange = (e) => {
        const { name, value } = e.target;
        setFormData((prev) => ({ ...prev, [name]: value }));
      };

      const handleFormSubmit = async (e) => {
        e.preventDefault();
        setFormStatus("sending");
        setFormError("");
        try {
          const res = await fetch(SITE.apiContact, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(formData),
          });
          const data = await res.json();
          if (!res.ok || !data.success) throw new Error(data.message || "Error al enviar");
          setFormStatus("ok");
          setFormData({ nombre: "", email: "", telefono: "", mensaje: "", website: "" });
        } catch (err) {
          setFormStatus("error");
          setFormError(err.message || "No se pudo enviar el mensaje. Inténtalo de nuevo.");
        }
      };


      useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 30);
        window.addEventListener("scroll", onScroll);
        return () => window.removeEventListener("scroll", onScroll);
      }, []);

      useEffect(() => {
        window.scrollTo(0, 0);
        setMenuOpen(false);
      }, [page]);

      useEffect(() => {
        const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                entry.target.classList.add("in-view");
                observer.unobserve(entry.target);
              }
            });
          },
          { threshold: 0.15, rootMargin: "0px 0px -60px 0px" }
        );
        const elements = document.querySelectorAll(".reveal, .reveal-line");
        elements.forEach((el) => observer.observe(el));
        return () => observer.disconnect();
      }, [page]);

      // CATÁLOGO REAL Jamones Carbó
      const productos = [
        // JAMONES (3)
        {
          nombre: "Jamón D.O.P. Teruel — CaminJamón",
          tipo: "jamones",
          origen: "Caminreal, Teruel",
          desc: "Nuestro jamón insignia con Denominación de Origen Protegida Jamón de Teruel. Curado en el clima seco y frío de la Sierra de Albarracín.",
          img: IMG("jamon_caminjamon"),
          dark: false,
        },
        {
          nombre: "Jamón Reserva Carbó",
          tipo: "jamones",
          origen: "Selección Carbó",
          desc: "Selección especial de la casa. Pieza de larga curación con perfil aromático profundo y veteado pronunciado.",
          img: IMG("jamon_carbo"),
          dark: false,
        },
        {
          nombre: "Paletilla",
          tipo: "jamones",
          origen: "Caminreal, Teruel",
          desc: "Pieza más pequeña y manejable que el jamón, pero con la misma curación cuidada. Ideal para hogares pequeños o para regalar. Mismo origen y proceso que nuestros jamones.",
          img: IMG("paletilla"),
          dark: false,
        },
        {
          nombre: "Maza de Jamón Ibérico",
          tipo: "jamones",
          origen: "Selección Carbó",
          desc: "La parte más noble del jamón ibérico, deshuesada y lista para cortar. Veteado intenso, sabor profundo y aprovechamiento total. Una joya para los grandes momentos.",
          img: IMG("maza_jamon"),
          dark: false,
        },
        // EMBUTIDOS (12)
        {
          nombre: "Longaniza con Trufa Negra",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Nuestra longaniza tradicional aragonesa enriquecida con trufa negra. Aroma intenso y sabor profundo. Sin gluten.",
          img: IMG("longaniza_trufa"),
          dark: false,
        },
        {
          nombre: "Chorizo con Trufa Negra",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Chorizo curado con pimentón y trufa negra. Una combinación elegante que eleva el chorizo tradicional. Sin gluten.",
          img: IMG("chorizo_trufa"),
          dark: false,
        },
        {
          nombre: "Salchichón de Trufa",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Nuestro salchichón curado elevado con trufa negra. Mezcla noble de pimienta, carne seleccionada y el aroma inconfundible de la trufa. Sin gluten.",
          img: IMG("salchichon_trufa"),
          dark: false,
        },
        {
          nombre: "Longaniza de Aragón Curada",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Receta tradicional aragonesa con carne de cerdo seleccionada y especias. Curación lenta al aire de la sierra. Sin gluten.",
          img: IMG("longaniza_aragon"),
          dark: false,
        },
        {
          nombre: "Longaniza de Pascua",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Vainas finas de longaniza y chorizo curado. Formato ideal para tapeo y aperitivo. Sin gluten.",
          img: IMG("longaniza_pascua"),
          dark: false,
        },
        {
          nombre: "Chorizo",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Chorizo curado de receta tradicional, con pimentón de calidad y curación lenta. El sabor de toda la vida, sin atajos. Sin gluten.",
          img: IMG("chorizo"),
          dark: false,
        },
        {
          nombre: "Chorizo Picante",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Misma receta tradicional con un toque de pimentón picante. Para los que buscan un punto de carácter. Sin gluten.",
          img: IMG("chorizo_picante"),
          dark: false,
        },
        {
          nombre: "Salchichón Curado",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Salchichón gordo de receta tradicional, con pimienta negra y curación lenta. Textura firme y sabor noble. Sin gluten.",
          img: IMG("salchichon_curado"),
          dark: true,
        },
        {
          nombre: "Lomo Embuchado",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Lomo de cerdo entero, adobado con pimentón y ajo, embuchado y curado. Una pieza noble para los grandes momentos.",
          img: IMG("lomo_embuchado"),
          dark: false,
        },
        {
          nombre: "Cabezada de Lomo",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Cabeza de lomo, parte más jugosa y veteada del cerdo. Embuchada y curada con receta tradicional. Sin gluten.",
          img: IMG("cabezada_lomo"),
          dark: false,
        },
        {
          nombre: "Picadillo de Jamón",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Recortes nobles de nuestro jamón, picados y curados. Producto típico aragonés, perfecto para freír al momento o degustar tal cual con un buen pan.",
          img: IMG("picadillo_jamon"),
          dark: true,
        },
        {
          nombre: "Panceta Curada",
          tipo: "embutidos",
          origen: "Caminreal, Teruel",
          desc: "Panceta de cerdo curada al estilo tradicional. Veteado intenso, ideal para cortar fina y degustar.",
          img: IMG("panceta"),
          dark: true,
        },
      ];

      const filtrados = filter === "todos" ? productos : productos.filter((p) => p.tipo === filter);

      const Logo = ({ className = "h-10" }) => (
        <img src={IMG("logo")} alt="Jamones Carbó" className={`${className} w-auto`} />
      );

      const WAIcon = ({ size = 16 }) => (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
      );

      const PhoneIcon = ({ size = 18 }) => (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
        </svg>
      );
      const MobileIcon = ({ size = 18 }) => (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
          <line x1="12" y1="18" x2="12" y2="18"/>
        </svg>
      );
      const MailIcon = ({ size = 18 }) => (
        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
          <polyline points="22,6 12,13 2,6"/>
        </svg>
      );

      const ContactButtons = () => (
        <div className="contact-buttons mt-12 grid grid-cols-2 md:grid-cols-4 gap-3 max-w-4xl mx-auto">
          <a href={`tel:+34${SITE.phone}`} className="contact-btn">
            <div className="contact-btn-icon"><PhoneIcon /></div>
            <div className="contact-btn-label">Teléfono</div>
            <div className="contact-btn-value">{SITE.phoneDisplay}</div>
          </a>
          <a href={`tel:+34${SITE.phoneMobile}`} className="contact-btn">
            <div className="contact-btn-icon"><MobileIcon /></div>
            <div className="contact-btn-label">Móvil</div>
            <div className="contact-btn-value">{SITE.phoneMobileDisplay}</div>
          </a>
          <a href={wa("Hola, me gustaría hacer una consulta sobre vuestros productos.")} target="_blank" rel="noopener noreferrer" className="contact-btn contact-btn-wa">
            <div className="contact-btn-icon"><WAIcon size={18} /></div>
            <div className="contact-btn-label">WhatsApp</div>
            <div className="contact-btn-value">{SITE.whatsappDisplay}</div>
          </a>
          <a href={`mailto:${SITE.email}`} className="contact-btn">
            <div className="contact-btn-icon"><MailIcon /></div>
            <div className="contact-btn-label">Email</div>
            <div className="contact-btn-value">Escríbenos</div>
          </a>
        </div>
      );

      return (
        <div className="bg-[#0a0707] text-stone-200 min-h-screen overflow-x-hidden">
          <div className="grain"></div>

          <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${scrolled ? "bg-[#0a0707]/95 backdrop-blur-md py-3 border-b border-white/5" : "bg-transparent py-5"}`}>
            <div className="max-w-7xl mx-auto px-6 md:px-12 flex items-center justify-between">
              <button onClick={() => setPage("inicio")} className="block">
                <Logo className={scrolled ? "h-14" : "h-20"} />
              </button>
              <div className="hidden md:flex items-center gap-12 font-body text-[14px] uppercase tracking-[0.25em]">
                {[{ id: "inicio", label: "Inicio" }, { id: "catalogo", label: "Catálogo" }, { id: "contacto", label: "Contacto" }].map((item) => (
                  <button key={item.id} onClick={() => setPage(item.id)} className={`nav-link ${page === item.id ? "active" : "text-stone-300"}`}>{item.label}</button>
                ))}
                <a href={wa("Hola, me gustaría hacer una consulta sobre vuestros productos.")} target="_blank" rel="noopener noreferrer" className="wa-btn text-white font-body text-[12px] uppercase tracking-[0.25em] px-6 py-3 inline-flex items-center gap-2 transition-colors">
                  <WAIcon /> WhatsApp
                </a>
              </div>
              <button onClick={() => setMenuOpen(!menuOpen)} className="md:hidden text-stone-200 p-2" aria-label="Menú">
                <div className="w-6 flex flex-col gap-1.5">
                  <span className={`h-px bg-current transition-transform ${menuOpen ? "rotate-45 translate-y-1.5" : ""}`}></span>
                  <span className={`h-px bg-current transition-opacity ${menuOpen ? "opacity-0" : ""}`}></span>
                  <span className={`h-px bg-current transition-transform ${menuOpen ? "-rotate-45 -translate-y-1.5" : ""}`}></span>
                </div>
              </button>
            </div>
            {menuOpen && (
              <div className="md:hidden bg-[#0a0707] border-t border-white/5 px-6 py-6 flex flex-col gap-5 font-body text-[11px] uppercase tracking-[0.25em]">
                {[{ id: "inicio", label: "Inicio" }, { id: "catalogo", label: "Catálogo" }, { id: "contacto", label: "Contacto" }].map((item) => (
                  <button key={item.id} onClick={() => setPage(item.id)} className={`text-left ${page === item.id ? "text-red-600" : "text-stone-300"}`}>{item.label}</button>
                ))}
                <a href={wa("Hola, me gustaría hacer una consulta.")} target="_blank" rel="noopener noreferrer" className="wa-btn text-white px-5 py-3 inline-flex items-center justify-center gap-2 mt-2"><WAIcon /> WhatsApp</a>
              </div>
            )}
          </nav>

          {page === "inicio" && (
            <main>
              {/* HERO con foto real del pasillo de bodega */}
              <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
                <div className="absolute inset-0 anim-zoom">
                  <img src={IMG("hero_pasillo")} alt="" className="w-full h-full object-cover opacity-45" />
                  <div className="absolute inset-0 bg-gradient-to-b from-[#0a0707] via-[#0a0707]/40 to-[#0a0707]"></div>
                  <div className="absolute inset-0 bg-gradient-to-r from-[#0a0707]/85 via-[#0a0707]/30 to-[#0a0707]/85"></div>
                  <div className="absolute inset-0 vellum opacity-40 mix-blend-overlay"></div>
                </div>
                <div className="hidden lg:block absolute left-8 top-1/2 -translate-y-1/2 z-10">
                  <div className="vertical-text font-body text-[10px] uppercase tracking-[0.4em] text-stone-500">D.O.P. Jamón de Teruel — Caminreal</div>
                </div>
                <div className="relative z-10 text-center px-6 max-w-5xl">
                  <div className="anim-fadein delay-1 mb-10 flex items-center justify-center gap-4">
                    <span className="h-px w-12" style={{ background: "var(--copper)" }}></span>
                    <span className="font-body text-[10px] uppercase tracking-[0.4em]" style={{ color: "var(--copper)" }}>Jamones &amp; Embutidos · Teruel</span>
                    <span className="h-px w-12" style={{ background: "var(--copper)" }}></span>
                  </div>
                  <h1 className="font-display anim-fadeup delay-2 text-6xl md:text-8xl lg:text-[10rem] leading-[0.92] text-stone-100 mb-10" style={{ fontWeight: 400 }}>
                    El arte de la
                    <br />
                    <span className="font-italic text-red-600" style={{ fontWeight: 500 }}>curación lenta</span>
                  </h1>
                  <p className="font-body anim-fadeup delay-3 text-stone-400 text-base md:text-lg max-w-2xl mx-auto leading-relaxed mb-14">
                    Desde Caminreal, en el corazón de Teruel. Curación lenta en el frío Valle del Jiloca, recetas tradicionales aragonesas y el sabor inconfundible de la D.O.P. Jamón de Teruel.
                  </p>
                  <div className="anim-fadeup delay-4 flex flex-col sm:flex-row items-center justify-center gap-4">
                    <button onClick={() => setPage("catalogo")} className="group bg-red-600 hover:bg-red-700 text-white font-body text-[11px] uppercase tracking-[0.3em] px-10 py-5 transition-all">
                      <span className="inline-flex items-center gap-3">Ver catálogo<span className="transition-transform group-hover:translate-x-1">→</span></span>
                    </button>
                    <a href={wa("Hola, me gustaría hacer un pedido. ¿Me podéis informar?")} target="_blank" rel="noopener noreferrer" className="border text-stone-200 font-body text-[11px] uppercase tracking-[0.3em] px-10 py-5 transition-all inline-flex items-center gap-3" style={{ borderColor: "rgba(184,137,90,0.3)" }} onMouseOver={(e) => e.currentTarget.style.borderColor = "var(--copper)"} onMouseOut={(e) => e.currentTarget.style.borderColor = "rgba(184,137,90,0.3)"}>
                      Pedir por WhatsApp
                    </a>
                  </div>
                </div>
                <div className="absolute bottom-10 left-1/2 -translate-x-1/2 anim-fadein delay-5">
                  <div className="w-px h-16 bg-gradient-to-b from-transparent to-red-600 mx-auto"></div>
                </div>
              </section>

              {/* HISTORIA */}
              <section className="py-32 md:py-44 px-6 md:px-12 relative" style={{ background: "var(--black-1)" }}>
                <div className="absolute inset-0 vellum opacity-20 pointer-events-none"></div>
                <div className="max-w-7xl mx-auto grid md:grid-cols-12 gap-16 items-center relative">
                  <div className="md:col-span-5 md:col-start-1 reveal">
                    <div className="relative">
                      <img src={IMG("etiquetas_teruel")} alt="Jamones D.O. Teruel" className="w-full aspect-[3/4] object-cover" style={{ boxShadow: "0 0 100px -20px rgba(184, 137, 90, 0.25)" }} />
                      <svg className="absolute -top-6 -left-6 opacity-70" width="80" height="80" viewBox="0 0 80 80" fill="none">
                        <circle cx="40" cy="40" r="38" stroke="#b8895a" strokeWidth="0.5" fill="none" />
                        <circle cx="40" cy="40" r="32" stroke="#b8895a" strokeWidth="0.5" fill="none" strokeDasharray="2 4" />
                        <text x="40" y="44" textAnchor="middle" fill="#b8895a" fontSize="11" fontFamily="EB Garamond" fontStyle="italic">Carbó</text>
                      </svg>
                    </div>
                  </div>
                  <div className="md:col-span-6 md:col-start-7">
                    <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6 reveal" style={{ color: "var(--copper)" }}>— Nuestra historia</div>
                    <h2 className="font-display text-5xl md:text-7xl leading-[1.02] text-stone-100 mb-8 reveal reveal-delay-1" style={{ fontWeight: 400 }}>
                      Una familia,
                      <br />
                      <span className="font-italic" style={{ fontWeight: 500 }}>una sola obsesión</span>
                    </h2>
                    <div className="hairline-copper mb-10 reveal-line"></div>
                    <div className="font-body text-stone-400 leading-relaxed space-y-5 text-[15px] reveal reveal-delay-2">
                      <p>En Caminreal, en pleno corazón de Teruel, la familia Carbó lleva generaciones curando jamones y elaborando embutidos al estilo tradicional aragonés.</p>
                      <p>Aquí no hay prisa. Cada pieza pasa por las mismas manos que conocen su punto exacto, su tiempo, su momento. El frío seco del Valle del Jiloca hace el resto.</p>
                    </div>
                    <blockquote className="font-display text-3xl md:text-4xl leading-snug pt-10 reveal reveal-delay-3" style={{ color: "var(--copper)", fontWeight: 300 }}>
                      <span className="font-italic">"Un buen jamón no se hace.</span>
                      <br />
                      <span className="font-italic">Se espera."</span>
                    </blockquote>
                  </div>
                </div>
              </section>

              {/* PROCESO con imágenes reales por etapa */}
              <section className="py-32 md:py-44 px-6 md:px-12 relative" style={{ background: "var(--black-2)" }}>
                <div className="absolute inset-0 vellum opacity-30 pointer-events-none"></div>
                <div className="max-w-7xl mx-auto relative">
                  <div className="text-center mb-24">
                    <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6 reveal" style={{ color: "var(--copper)" }}>— El proceso</div>
                    <h2 className="font-display text-5xl md:text-7xl text-stone-100 leading-[1.02] reveal reveal-delay-1" style={{ fontWeight: 400 }}>
                      Cuatro etapas.
                      <br />
                      <span className="font-italic" style={{ fontWeight: 500 }}>Un único objetivo.</span>
                    </h2>
                  </div>
                  <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px" style={{ background: "rgba(184,137,90,0.12)" }}>
                    {[
                      { n: "01", titulo: "Selección", desc: "Cerdos seleccionados que cumplen los estándares de la D.O.P. Jamón de Teruel.", img: IMG("salazon_2") },
                      { n: "02", titulo: "Salazón", desc: "Cubrimos cada pieza con sal marina durante el tiempo justo. Ni un día más, ni uno menos.", img: IMG("salazon") },
                      { n: "03", titulo: "Secado", desc: "Las piezas reposan colgadas, recibiendo el aire frío y seco que solo da el Valle del Jiloca.", img: IMG("secado") },
                      { n: "04", titulo: "Bodega", desc: "Aquí no manda el calendario, sino la pieza. Cuando cada jamón alcanza su punto exacto, sale a la mesa. Ni un día antes.", img: IMG("bodega_pasillo") },
                    ].map((step, i) => (
                      <div
                        key={i}
                        className={`transition-all duration-700 group relative overflow-hidden reveal reveal-delay-${i + 1}`}
                        style={{ background: "var(--black-2)" }}
                      >
                        <div className="aspect-[4/3] overflow-hidden relative">
                          <img src={step.img} alt={step.titulo} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" />
                          <div className="absolute inset-0 bg-gradient-to-t from-[#141010] via-transparent to-transparent"></div>
                          <div className="absolute top-4 left-4 font-display text-6xl" style={{ color: "rgba(184,137,90,0.85)", fontWeight: 300 }}>
                            {step.n}
                          </div>
                        </div>
                        <div className="p-8 md:p-10">
                          <h3 className="font-display text-2xl md:text-3xl text-stone-100 mb-4" style={{ fontWeight: 400 }}>{step.titulo}</h3>
                          <p className="font-body text-stone-400 text-sm leading-relaxed">{step.desc}</p>
                        </div>
                        <div className="absolute bottom-0 left-0 right-0 h-px transition-transform duration-700 origin-left scale-x-0 group-hover:scale-x-100" style={{ background: "var(--copper)" }}></div>
                      </div>
                    ))}
                  </div>
                </div>
              </section>

              {/* ORIGEN con foto bodega real */}
              <section className="py-32 md:py-44 px-6 md:px-12 relative overflow-hidden" style={{ background: "var(--black-1)" }}>
                <div className="absolute inset-0 vellum opacity-20 pointer-events-none"></div>
                <div className="max-w-7xl mx-auto grid md:grid-cols-12 gap-16 items-center relative">
                  <div className="md:col-span-6 md:order-1 order-2">
                    <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6 reveal" style={{ color: "var(--copper)" }}>— El origen</div>
                    <h2 className="font-display text-5xl md:text-7xl leading-[1.02] text-stone-100 mb-8 reveal reveal-delay-1" style={{ fontWeight: 400 }}>
                      Donde nace
                      <br />
                      <span className="font-italic" style={{ fontWeight: 500 }}>el sabor de Teruel</span>
                    </h2>
                    <div className="hairline-copper mb-10 reveal-line"></div>
                    <div className="font-body text-stone-400 leading-relaxed space-y-5 text-[15px] reveal reveal-delay-2">
                      <p>Caminreal está a 920 metros de altitud, en pleno Sistema Ibérico turolense. El aire seco, las noches frías y los inviernos largos crean las condiciones perfectas para la curación.</p>
                      <p>La D.O.P. Jamón de Teruel es la primera Denominación de Origen otorgada en España a un jamón curado. Solo unos pocos elaboradores cumplimos sus estrictos requisitos.</p>
                    </div>
                    <div className="grid grid-cols-3 gap-6 mt-14 reveal reveal-delay-3">
                      {[
                        { num: "920", label: "Metros de altitud" },
                        { num: "D.O.P.", label: "Jamón de Teruel" },
                        { num: "1937", label: "Año de fundación" },
                      ].map((stat, i) => (
                        <div key={i}>
                          <div className="font-display text-4xl md:text-5xl font-italic" style={{ color: "var(--copper)", fontWeight: 400 }}>{stat.num}</div>
                          <div className="hairline-copper mt-3 mb-3"></div>
                          <div className="font-body text-[10px] uppercase tracking-[0.25em] text-stone-500">{stat.label}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="md:col-span-6 md:order-2 order-1 grid grid-cols-2 gap-4 reveal">
                    <img src={IMG("secado_close")} alt="Secado" className="w-full aspect-[3/4] object-cover translate-y-8" />
                    <img src={IMG("chorizos_secadero")} alt="Embutidos" className="w-full aspect-[3/4] object-cover" />
                  </div>
                </div>
              </section>

              {/* VISITA */}
              <section className="py-32 md:py-44 px-6 md:px-12 border-t border-white/5 relative" style={{ background: "var(--black-1)" }}>
                <div className="absolute inset-0 vellum opacity-20 pointer-events-none"></div>
                <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center relative">
                  <div>
                    <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6 reveal" style={{ color: "var(--copper)" }}>— Visítanos</div>
                    <h2 className="font-display text-5xl md:text-7xl text-stone-100 leading-[1.02] mb-8 reveal reveal-delay-1" style={{ fontWeight: 400 }}>
                      Te esperamos
                      <br />
                      <span className="font-italic" style={{ fontWeight: 500 }}>en Caminreal</span>
                    </h2>
                    <p className="font-body text-stone-400 leading-relaxed text-[15px] mb-10 reveal reveal-delay-2">
                      Cada cliente nos importa. Por eso preferimos el trato personal — ya sea por WhatsApp o pasándote por la tienda, te atendemos, te recomendamos y resolvemos cualquier duda que tengas.
                    </p>
                    <button onClick={() => setPage("contacto")} className="group inline-flex items-center gap-4 font-body text-[11px] uppercase tracking-[0.3em] transition-colors reveal reveal-delay-3" style={{ color: "var(--copper)" }}>
                      <span className="h-px w-10 transition-all group-hover:w-16" style={{ background: "var(--copper)" }}></span>
                      Cómo llegar y horarios
                      <span className="transition-transform group-hover:translate-x-1">→</span>
                    </button>
                  </div>
                  <div className="relative aspect-[4/3] overflow-hidden reveal">
                    <img src={IMG("edificio_exterior")} alt="Jamones Carbó - exterior" className="w-full h-full object-cover" />
                    <div className="absolute inset-0 bg-gradient-to-t from-[#0a0707]/70 to-transparent"></div>
                  </div>
                </div>
              </section>
            </main>
          )}

          {page === "catalogo" && (
            <main className="pt-32 pb-32 px-6 md:px-12">
              <div className="max-w-7xl mx-auto">
                <div className="text-center mb-16">
                  <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6" style={{ color: "var(--copper)" }}>— Catálogo</div>
                  <h1 className="font-display text-6xl md:text-8xl text-stone-100 leading-[0.95]" style={{ fontWeight: 400 }}>Nuestros<br /><span className="font-italic" style={{ fontWeight: 500 }}>productos</span></h1>
                  <p className="font-body text-stone-400 max-w-xl mx-auto mt-8 text-[15px] leading-relaxed">Jamón D.O.P. Teruel y embutidos artesanos elaborados en Caminreal según receta tradicional aragonesa.</p>
                  <p className="font-body text-stone-400 max-w-2xl mx-auto mt-5 text-[15px] leading-relaxed">Preferimos el trato personal. Para consultar precios, disponibilidad o resolver cualquier duda, contáctanos por el canal que prefieras y te atendemos al momento.</p>
                  <ContactButtons />
                </div>
                <div className="flex flex-wrap items-center justify-center gap-3 mb-16">
                  {[{ id: "todos", label: "Todos" }, { id: "jamones", label: "Jamones" }, { id: "embutidos", label: "Embutidos" }].map((f) => (
                    <button key={f.id} onClick={() => setFilter(f.id)} className={`filter-btn font-body text-[10px] uppercase tracking-[0.3em] px-8 py-4 ${filter === f.id ? "active" : "text-stone-300"}`}>{f.label}</button>
                  ))}
                  <span className="font-body text-[10px] uppercase tracking-[0.3em] text-stone-600 ml-3">— {filtrados.length} {filtrados.length === 1 ? "producto" : "productos"}</span>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
                  {filtrados.map((p) => (
                    <article key={p.nombre} className="product-card group">
                      <div className={`relative overflow-hidden mb-6 aspect-[4/3] ${p.dark ? 'product-bg-blend' : ''}`}>
                        <img src={p.img} alt={p.nombre} className="product-img w-full h-full object-contain p-2" />
                        {!p.dark && <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent"></div>}
                        <div className="absolute top-4 left-4 bg-red-600 text-white font-body text-[9px] uppercase tracking-[0.3em] px-3 py-1.5 z-10">{p.tipo}</div>
                      </div>
                      <div className="font-body text-[10px] uppercase tracking-[0.3em] text-stone-500 mb-2">{p.origen}</div>
                      <h3 className="font-display text-2xl md:text-3xl text-stone-100 mb-3 leading-tight" style={{ fontWeight: 400 }}>{p.nombre}</h3>
                      <p className="font-body text-stone-400 text-sm leading-relaxed">{p.desc}</p>
                    </article>
                  ))}
                </div>
              </div>
            </main>
          )}

          {page === "contacto" && (
            <main className="pt-32 pb-32 px-6 md:px-12">
              <div className="max-w-7xl mx-auto">
                <div className="text-center mb-20">
                  <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6" style={{ color: "var(--copper)" }}>— Visítanos</div>
                  <h1 className="font-display text-6xl md:text-8xl text-stone-100 leading-[0.95]" style={{ fontWeight: 400 }}>Te esperamos<br /><span className="font-italic" style={{ fontWeight: 500 }}>en Caminreal</span></h1>
                  <p className="font-body text-stone-400 max-w-xl mx-auto mt-8 text-[15px] leading-relaxed">Pásate a probar, a llevarte una pieza recién cortada o simplemente a saludar. También atendemos pedidos por teléfono y WhatsApp.</p>
                </div>
                <div className="grid md:grid-cols-12 gap-px bg-white/5 mb-16">
                  <div className="md:col-span-7 bg-[#0a0707] relative aspect-[4/3] md:aspect-auto md:min-h-[480px] overflow-hidden" style={{ background: "linear-gradient(135deg, #0e0a09 0%, #14100e 50%, #0a0707 100%)" }}>
                    {/* MAPA REAL Caminreal */}
                    <img src={IMG("mapa_caminreal")} alt="Caminreal - Jamones Carbó" className="absolute inset-0 w-full h-full object-cover" />

                    {/* Marcador rojo Carbó */}
                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
                      <div className="relative">
                        <div className="absolute -inset-4 bg-red-600 rounded-full animate-ping opacity-30"></div>
                        <div className="relative w-10 h-10 bg-red-600 rounded-full border-4 border-[#0a0707] flex items-center justify-center" style={{ boxShadow: "0 0 30px rgba(220,38,38,0.7)" }}>
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="white"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                        </div>
                      </div>
                    </div>

                    {/* Overlay sutil oscurecimiento bordes */}
                    <div className="absolute inset-0 pointer-events-none" style={{ background: "radial-gradient(ellipse at center, transparent 40%, rgba(10,7,7,0.85) 100%)" }}></div>

                    {/* Texto dirección sobre el mapa */}
                    <div className="absolute bottom-8 left-8 right-8 z-10">
                      <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-3" style={{ color: "var(--copper)" }}>La tienda</div>
                      <div className="font-display text-3xl md:text-4xl text-stone-100 font-italic">Calle Real 207<br />44350 Caminreal · Teruel</div>
                    </div>
                  </div>
                  <div className="md:col-span-5 bg-[#0a0707] p-10 md:p-12 flex flex-col justify-between">
                    <div>
                      <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6" style={{ color: "var(--copper)" }}>Horario</div>
                      <div className="font-body text-stone-200 space-y-3 mb-10">
                        <div className="flex justify-between border-b border-white/5 pb-3"><span className="text-stone-500 text-sm">Lunes — Viernes</span><span className="text-sm">9:00 — 14:00 · 17:00 — 19:00</span></div>
                        <div className="flex justify-between border-b border-white/5 pb-3"><span className="text-stone-500 text-sm">Sábado</span><span className="text-sm">9:30 — 13:00</span></div>
                        <div className="flex justify-between"><span className="text-stone-500 text-sm">Domingo</span><span className="text-sm text-red-600/80">Cerrado</span></div>
                      </div>
                    </div>
                    <div className="space-y-3">
                      <a href="https://maps.google.com/?q=Calle+Real+207+Caminreal+Teruel" target="_blank" rel="noopener noreferrer" className="block bg-red-600 hover:bg-red-700 text-white font-body text-[11px] uppercase tracking-[0.3em] px-6 py-4 transition-all text-center">
                        <span className="inline-flex items-center gap-3">Cómo llegar<span>→</span></span>
                      </a>
                      <a href={wa("Hola, me gustaría hacer una consulta.")} target="_blank" rel="noopener noreferrer" className="block wa-btn text-white font-body text-[11px] uppercase tracking-[0.3em] px-6 py-4 transition-all text-center">
                        <span className="inline-flex items-center justify-center gap-2"><WAIcon /> Pedir por WhatsApp</span>
                      </a>
                    </div>
                  </div>
                </div>
                <div className="mb-20">
                  <ContactButtons />
                </div>
                <div className="grid md:grid-cols-12 gap-12">
                  <div className="md:col-span-5">
                    <div className="font-body text-[10px] uppercase tracking-[0.4em] mb-6" style={{ color: "var(--copper)" }}>— Pedidos especiales</div>
                    <h2 className="font-display text-4xl md:text-5xl text-stone-100 leading-[1.05] mb-6" style={{ fontWeight: 400 }}>¿Necesitas algo<br /><span className="font-italic" style={{ fontWeight: 500 }}>a medida?</span></h2>
                    <p className="font-body text-stone-400 text-[15px] leading-relaxed">Cestas para empresas, regalos personalizados, eventos privados o grandes pedidos para restauración. Cuéntanos qué necesitas y preparamos una propuesta.</p>
                  </div>
                  <form className="md:col-span-7 space-y-6" onSubmit={handleFormSubmit}>
                    <input type="text" name="website" value={formData.website} onChange={handleFormChange} tabIndex={-1} autoComplete="off" aria-hidden="true" className="absolute opacity-0 pointer-events-none h-0 w-0" />
                    <div className="grid sm:grid-cols-2 gap-6">
                      <div>
                        <label htmlFor="nombre" className="block font-body text-[10px] uppercase tracking-[0.3em] text-stone-500 mb-3">Nombre</label>
                        <input id="nombre" name="nombre" type="text" required value={formData.nombre} onChange={handleFormChange} className="w-full bg-transparent border-b border-stone-700 focus:border-red-600 outline-none py-3 font-body text-stone-200 transition-colors" />
                      </div>
                      <div>
                        <label htmlFor="email" className="block font-body text-[10px] uppercase tracking-[0.3em] text-stone-500 mb-3">Email</label>
                        <input id="email" name="email" type="email" required value={formData.email} onChange={handleFormChange} className="w-full bg-transparent border-b border-stone-700 focus:border-red-600 outline-none py-3 font-body text-stone-200 transition-colors" />
                      </div>
                    </div>
                    <div>
                      <label htmlFor="telefono" className="block font-body text-[10px] uppercase tracking-[0.3em] text-stone-500 mb-3">Teléfono</label>
                      <input id="telefono" name="telefono" type="tel" value={formData.telefono} onChange={handleFormChange} className="w-full bg-transparent border-b border-stone-700 focus:border-red-600 outline-none py-3 font-body text-stone-200 transition-colors" />
                    </div>
                    <div>
                      <label htmlFor="mensaje" className="block font-body text-[10px] uppercase tracking-[0.3em] text-stone-500 mb-3">Mensaje</label>
                      <textarea id="mensaje" name="mensaje" rows={4} required value={formData.mensaje} onChange={handleFormChange} className="w-full bg-transparent border-b border-stone-700 focus:border-red-600 outline-none py-3 font-body text-stone-200 resize-none transition-colors"></textarea>
                    </div>
                    {formStatus === "ok" && <p className="font-body text-sm text-green-500">Mensaje enviado correctamente. Te responderemos pronto.</p>}
                    {formStatus === "error" && <p className="font-body text-sm text-red-500">{formError}</p>}
                    <button type="submit" disabled={formStatus === "sending"} className="group bg-red-600 hover:bg-red-700 disabled:opacity-50 text-white font-body text-[11px] uppercase tracking-[0.3em] px-10 py-5 transition-all">
                      <span className="inline-flex items-center gap-3">{formStatus === "sending" ? "Enviando…" : "Enviar mensaje"}<span className="transition-transform group-hover:translate-x-1">→</span></span>
                    </button>
                  </form>
                </div>
              </div>
            </main>
          )}

          <footer className="border-t border-white/5 px-6 md:px-12 py-16">
            <div className="max-w-7xl mx-auto">
              <div className="grid md:grid-cols-3 gap-12 mb-12">
                <div>
                  <Logo className="h-20 mb-4" />
                  <p className="font-body text-sm text-stone-500 leading-relaxed max-w-xs">Jamones D.O.P. Teruel y embutidos artesanos. Tradición aragonesa desde Caminreal.</p>
                </div>
                <div>
                  <div className="font-body text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: "var(--copper)" }}>Navegación</div>
                  <div className="space-y-2 font-body text-sm text-stone-400">
                    {[{ id: "inicio", label: "Inicio" }, { id: "catalogo", label: "Catálogo" }, { id: "contacto", label: "Contacto" }].map((item) => (
                      <button key={item.id} onClick={() => setPage(item.id)} className="block hover:text-red-600 transition-colors">{item.label}</button>
                    ))}
                  </div>
                </div>
                <div>
                  <div className="font-body text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: "var(--copper)" }}>Contacto</div>
                  <div className="space-y-2 font-body text-sm text-stone-400">
                    <a href={"mailto:" + SITE.email} className="hover:text-red-600 transition-colors">{SITE.email}</a>
                    <div>{SITE.phoneDisplay}</div>
                    <div>{SITE.address}</div>
                  </div>
                </div>
              </div>
              <div className="hairline mb-8"></div>
              <div className="flex flex-col md:flex-row items-center justify-between gap-4 font-body text-[10px] uppercase tracking-[0.3em] text-stone-600">
                <div>© 2026 Jamones Carbó S.L. · Todos los derechos reservados</div>
                <div>Aviso legal · Privacidad · Cookies</div>
              </div>
            </div>
          </footer>
        </div>
      );
    }

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<JamonesCarbo />);