// Curated imagery — warm, elegant rooftop / corporate-gathering aesthetic.
// No concerts, no clubs. Sunset, candles, linens, conversation, golden hour.
const IMAGES = {
  hero: "assets/portada.png",
  // Hero video — drop your own MP4 at assets/hero-video.mp4 to override.
  heroVideo: "assets/hero-video.mp4",
  heroVideoFallback: "https://videos.pexels.com/video-files/3045163/3045163-hd_1920_1080_24fps.mp4",

  theArtist: "https://hoteltheartist.com/wp-content/uploads/2024/07/The-Artist-The-Rooftop-Tardeo-1-1024x683.jpg",
  radisson: "https://dynamic-media-cdn.tripadvisor.com/media/photo-o/31/e2/29/8f/rooftop-bar.jpg?w=900&h=500&s=1",
  vincci: "https://www.vincciconsuladodebilbao.com/media/uploads/galeriahoteles/terrace3.jpg?q=pr:sharp/rs:fill/w:800/h:600/f:jpg",

  rooftopNight: "https://images.unsplash.com/photo-1591890844477-c290f0629a49?auto=format&fit=crop&w=1920&q=80",

  // "Nuestra propuesta" framed image — elegant rooftop sunset dinner setup
  propuesta: "https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?auto=format&fit=crop&w=1200&q=85",

  // Outdoor gallery
  panoramica: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1800&q=85",
  cocktails: "https://images.unsplash.com/photo-1551751299-1b51cab2694c?auto=format&fit=crop&w=1200&q=85",
  gastronomia: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1200&q=85",
  sunsetView: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1200&q=85",
  candles: "https://images.unsplash.com/photo-1543007630-9710e4a00a20?auto=format&fit=crop&w=1200&q=85",

  // Indoor gallery — elegant interiors, not bars/clubs
  interior1: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1800&q=85",
  interior2: "https://images.unsplash.com/photo-1542628682-88321d2a4828?auto=format&fit=crop&w=1200&q=85",
  interior3: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1200&q=85",
  interior4: "https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=1800&q=85",
  interior5: "https://images.unsplash.com/photo-1530023367847-a683933f4172?auto=format&fit=crop&w=1200&q=85",
  interior6: "https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=1200&q=85",
};

function useScrollReveal() {
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) entry.target.classList.add("visible");
        });
      },
      { threshold: 0.08, rootMargin: "0px 0px -40px 0px" }
    );
    const elements = document.querySelectorAll(".fade-up, .fade-in");
    elements.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTitle": "Eventos corporativos que se recuerdan",
  "heroSubtitle": "Diseñamos experiencias de wellbeing en los mejores rooftops de Bilbao para que las empresas celebren, conecten y cuiden a sus equipos durante todo el año.",
  "accent": "#886E58",
  "surface": "warm",
  "headlineScale": 1.0,
  "sectionDensity": "regular",
  "strangerEffect": true,
  "showGallery": true,
  "showReviews": true,
  "showPublic": true,
  "showMarquee": true,
  "darkBands": true,
  "formatsLayout": "cards"
}/*EDITMODE-END*/;

// ── Cinematic Marquee strip ──────────────────────────────────────────────────
function Marquee() {
  const items = [
    "Rooftops exclusivos",
    "Bilbao",
    "Atardecer",
    "Wellbeing corporativo",
    "Catering de temporada",
    "Coordinación completa",
    "Experiencias a medida",
    "Cultura de equipo",
  ];
  const doubled = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-inner">
        {doubled.map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

function Home() {
  useScrollReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [legalModal, setLegalModal] = React.useState(null);
  const heroBgRef = React.useRef(null);
  const heroVideoRef = React.useRef(null);

  React.useEffect(() => {
    const handleScroll = () => {
      if (heroBgRef.current) {
        const offset = window.scrollY * 0.25;
        heroBgRef.current.style.backgroundPosition = `center calc(30% + ${offset}px)`;
      }
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Apply tweaks as CSS variables + data attributes for global styling
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--headline-scale", t.headlineScale);
    document.body.dataset.surface = t.surface;
    document.body.dataset.density = t.sectionDensity;
    document.body.dataset.formatsLayout = t.formatsLayout;
  }, [t.accent, t.headlineScale, t.surface, t.sectionDensity, t.formatsLayout]);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div className="min-h-screen zerua-app">
      <Navbar />

      {/* ── HERO ─────────────────────────────────────────────────────────────── */}
      <section id="hero" className="relative min-h-screen flex items-start overflow-hidden" style={{ backgroundColor: "#1a0e07" }}>
        <div
          ref={heroBgRef}
          className="absolute inset-0 bg-cover bg-center hero-bg"
          style={{ backgroundImage: `url(${IMAGES.hero})`, backgroundPosition: "center 30%" }}
        />

        {/* Stranger Things-style ZERUA EVENTS mask reveal — lives INSIDE the hero,
            resolves in ~2s, then fades out leaving the regular hero. Toggled via tweak. */}
        {t.strangerEffect && (
          <div className="hero-stranger" aria-hidden="true">
            <svg viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
              <defs>
                <mask id="zerua-hero-mask" maskUnits="userSpaceOnUse">
                  <rect width="1920" height="1080" fill="black" />
                  <text x="960" y="560" textAnchor="middle" className="mz">ZERUA</text>
                  <text x="960" y="690" textAnchor="middle" className="me">EVENTS</text>
                </mask>
              </defs>
              <rect width="1920" height="1080" fill="#0a0502" />
              <image
                href={IMAGES.hero}
                x="0" y="0" width="1920" height="1080"
                preserveAspectRatio="xMidYMid slice"
                mask="url(#zerua-hero-mask)"
              />
            </svg>
          </div>
        )}
        {/* Video layer — only mounts if a video file has been provided at assets/hero-video.mp4.
            To enable: drop the file in /assets and set USE_VIDEO=true. */}
        {false && (
          <video
            ref={heroVideoRef}
            className="absolute inset-0 w-full h-full object-cover hero-video"
            autoPlay muted loop playsInline preload="auto"
            poster={IMAGES.hero}
            onLoadedData={(e) => e.currentTarget.classList.add("loaded")}
            aria-hidden="true"
          >
            <source src={IMAGES.heroVideo} type="video/mp4" />
          </video>
        )}
        <div
          className="absolute inset-0"
          style={{ background: "linear-gradient(to bottom, rgba(26,14,7,0.55) 0%, rgba(26,14,7,0.5) 40%, rgba(26,14,7,0.25) 70%, rgba(26,14,7,0.6) 100%)" }}
        />
        <div
          className="absolute inset-0"
          style={{ background: "linear-gradient(to bottom-left, rgba(26,14,7,1) 0%, rgba(26,14,7,0.85) 10%, transparent 25%)" }}
        />
        <div
          className="absolute inset-0 pointer-events-none"
          style={{ background: "radial-gradient(ellipse at bottom right, rgba(26,14,7,1) 0%, rgba(26,14,7,0.95) 6%, transparent 16%)" }}
        />

        {/* Cinematic warm glow */}
        <div className="hero-glow" />

        {/* Floating ember particles */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
          {Array.from({ length: 18 }).map((_, i) => {
            const left = (i * 53) % 100;
            const delay = (i * 0.7) % 14;
            const dur = 14 + (i % 6) * 2.5;
            const drift = ((i % 5) - 2) * 30;
            const size = 2 + (i % 4);
            return (
              <span
                key={i}
                className="ember"
                style={{
                  left: `${left}%`,
                  width: size,
                  height: size,
                  animationDuration: `${dur}s`,
                  animationDelay: `${delay}s`,
                  "--drift": `${drift}px`,
                }}
              />
            );
          })}
        </div>

        <div className="hero-vignette" />

        <div className="relative z-10 container pt-36 pb-16">
          <div className="max-w-3xl">
            <h1 className="hero-title text-5xl md:text-7xl font-normal leading-tight mb-6" style={{ fontFamily: "'Playfair Display', serif", color: "#F5EDE0" }}>
              {t.heroTitle.split(" ").map((w, i) => (
                <React.Fragment key={i}>
                  <span className="word">
                    <span style={{ "--idx": i }}>{w}</span>
                  </span>
                  {" "}
                </React.Fragment>
              ))}
            </h1>
            <div className="hero-divider zerua-divider" style={{ backgroundColor: "#886E58" }} />
            <p className="hero-text text-lg md:text-xl leading-relaxed mb-10 max-w-xl" style={{ color: "rgba(245, 237, 224, 0.85)", fontFamily: "'DM Sans', sans-serif", fontWeight: 300 }}>
              {t.heroSubtitle}
            </p>
            <div className="hero-btns flex flex-wrap gap-4">
              <a href="#contacto" onClick={scrollTo("contacto")} className="zerua-btn-outline">
                Solicitar propuesta
              </a>
              <a href="#que-hacemos" onClick={scrollTo("que-hacemos")} className="zerua-btn-outline-dark">
                Descubrir más
              </a>
            </div>
          </div>
        </div>
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2">
          <span className="text-xs tracking-widest uppercase" style={{ color: "rgba(245,237,224,0.5)", fontFamily: "'DM Sans', sans-serif" }}>Scroll</span>
          <ChevronDown size={18} className="animate-bounce" style={{ color: "rgba(245,237,224,0.5)" }} />
        </div>
      </section>

      {/* ── STATS BAR ────────────────────────────────────────────────────────── */}
      <section style={{ backgroundColor: "#5E3719" }}>
        <div className="container">
          <div className="grid grid-cols-2 md:grid-cols-4 divide-x-white">
            {[
              { value: "3", label: "Rooftops exclusivos" },
              { value: "3", label: "Formatos de evento" },
              { value: "10–80", label: "Personas por evento" },
              { value: "100%", label: "Personalizable" },
            ].map((stat, i) => (
              <div key={i} className="py-8 px-6 text-center">
                <div className="text-3xl md:text-4xl font-light mb-1" style={{ fontFamily: "'Playfair Display', serif", color: "#F5EDE0" }}>{stat.value}</div>
                <div className="text-xs tracking-widest uppercase" style={{ color: "rgba(245,237,224,0.6)", fontFamily: "'DM Sans', sans-serif" }}>{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── QUÉ HACEMOS ──────────────────────────────────────────────────────── */}
      {t.showMarquee && <Marquee />}

      <section id="que-hacemos" className="py-28" style={{ backgroundColor: "#F5EDE0" }}>
        <div className="container">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div className="fade-up">
              <div className="section-label mb-4">Nuestra propuesta</div>
              <h2 className="h-section mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", color: "#5E3719" }}>
                Una experiencia <em>completa</em>, no solo un espacio
              </h2>
              <div className="zerua-divider" />
              <p className="text-base leading-relaxed mb-6" style={{ color: "#735238", fontFamily: "'DM Sans', sans-serif", fontWeight: 300, lineHeight: "1.8" }}>
                Zerua Events diseña experiencias de wellbeing y conexión para empresas que quieren cuidar a sus equipos de una forma más atractiva que una comida corporativa tradicional.
              </p>
              <p className="text-base leading-relaxed mb-10" style={{ color: "#735238", fontFamily: "'DM Sans', sans-serif", fontWeight: 300, lineHeight: "1.8" }}>
                La propuesta combina tres elementos: un rooftop con buena ubicación, una experiencia social cuidada y una capa de bienestar elegante y adaptada a la cultura de cada empresa.
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {[
                  { Icon: Building2, title: "Para RRHH", desc: "Una acción de cuidado que mejora clima, pertenencia y reconocimiento interno." },
                  { Icon: TrendingUp, title: "Para Dirección", desc: "Evento visible, controlado y adaptable a presupuesto, con impacto en cultura." },
                  { Icon: Camera, title: "Para Marketing", desc: "Experiencia fotografiable, alineada con employer branding y comunicación interna." },
                  { Icon: Users, title: "Para Comercial", desc: "Formato premium para reunir clientes o partners en un ambiente memorable." },
                ].map(({ Icon, title, desc }, i) => (
                  <div key={i} className="flex gap-4">
                    <Icon size={20} className="mt-0.5 flex-shrink-0" style={{ color: "#886E58" }} />
                    <div>
                      <div className="text-sm font-semibold mb-1" style={{ color: "#5E3719", fontFamily: "'DM Sans', sans-serif" }}>{title}</div>
                      <div className="text-sm leading-relaxed" style={{ color: "#9D8977", fontFamily: "'DM Sans', sans-serif", fontWeight: 300 }}>{desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="fade-in relative">
              <div className="absolute -top-4 -left-4 w-full h-full" style={{ border: "1px solid #B2A496", zIndex: 0 }} />
              <img src={IMAGES.propuesta} alt="Evento corporativo Zerua Events" className="relative z-10 w-full object-cover" style={{ height: "520px" }} />
            </div>
          </div>
        </div>
      </section>

      {/* ── ESPACIOS / ROOFTOPS ──────────────────────────────────────────────── */}
      <section id="espacios" className={`py-28 ${t.darkBands ? "dark-band" : ""}`}
        style={{ backgroundColor: t.darkBands ? "#1A0E07" : "#EDE0CF" }}>
        <div className="container">
          <div className="text-center mb-16 fade-up">
            <div className="section-label mb-4">Nuestros espacios</div>
            <h2 className="h-section" style={{ fontFamily: "'Cormorant Garamond', serif", color: "#5E3719" }}>
              Tres rooftops <em>exclusivos</em> en Bilbao
            </h2>
            <div className="zerua-divider-center mt-4" />
            <p className="text-base max-w-2xl mx-auto mt-6" style={{ color: "#735238", fontFamily: "'DM Sans', sans-serif", fontWeight: 300, lineHeight: "1.8" }}>
              Trabajamos con espacios seleccionados y validados. Cada rooftop se elige según el tipo de evento, aforo y experiencia deseada.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                name: "The Artist",
                img: IMAGES.theArtist,
                desc: "Espacio de diseño contemporáneo con vistas panorámicas al skyline de Bilbao. Ideal para eventos creativos y equipos con sensibilidad estética.",
                tags: ["Diseño contemporáneo", "Vistas panorámicas", "Hasta 80 personas"],
              },
              {
                name: "Radisson Collection Bilbao",
                img: IMAGES.radisson,
                desc: "El rooftop del hotel más icónico de Bilbao. Lujo moderno, servicio impecable y una ubicación privilegiada en el corazón de la ciudad.",
                tags: ["Lujo premium", "Servicio 5 estrellas", "Hasta 120 personas"],
              },
              {
                name: "Hotel Vincci Consulado",
                img: IMAGES.vincci,
                desc: "Elegancia clásica renovada con vistas al Nervión. El escenario perfecto para eventos de alta dirección y experiencias con clientes clave.",
                tags: ["Elegancia clásica", "Vistas al Nervión", "Hasta 60 personas"],
              },
            ].map((space, i) => (
              <div key={i} className="fade-up group overflow-hidden space-card" style={{ backgroundColor: "#FAF6F0", boxShadow: "0 4px 24px rgba(94, 55, 25, 0.08)", transitionDelay: `${i * 0.1}s` }}>
                <div className="relative overflow-hidden" style={{ height: "280px" }}>
                  <img src={space.img} alt={space.name} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                  <div className="absolute inset-0" style={{ background: "linear-gradient(to top, rgba(94,55,25,0.5) 0%, transparent 60%)" }} />
                  <div className="absolute bottom-4 left-4">
                    <h3 className="text-lg font-medium" style={{ fontFamily: "'Playfair Display', serif", color: "#F5EDE0" }}>{space.name}</h3>
                  </div>
                </div>
                <div className="p-6">
                  <p className="text-sm leading-relaxed mb-5" style={{ color: "#735238", fontFamily: "'DM Sans', sans-serif", fontWeight: 300, lineHeight: "1.7" }}>{space.desc}</p>
                  <div className="flex flex-wrap gap-2">
                    {space.tags.map((tag, j) => (
                      <span key={j} className="text-xs px-3 py-1 tag" style={{ backgroundColor: "#F5EDE0", color: "#886E58", border: "1px solid #B2A496", fontFamily: "'DM Sans', sans-serif", letterSpacing: "0.05em" }}>{tag}</span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── EXPERIENCIAS / FORMATOS ──────────────────────────────────────────── */}
      <section id="experiencias" className="py-28" style={{ backgroundColor: "#F5EDE0" }}>
        <div className="container">
          <div className="text-center mb-16 fade-up">
            <div className="section-label mb-4">Formatos</div>
            <h2 className="h-section mb-4" style={{ fontFamily: "'Cormorant Garamond', serif", color: "#5E3719" }}>
              Tres formatos, una experiencia <em>a medida</em>
            </h2>
            <div className="zerua-divider-center mt-4" />
            <p className="text-base max-w-2xl mx-auto mt-6" style={{ color: "#735238", fontFamily: "'DM Sans', sans-serif", fontWeight: 300, lineHeight: "1.8" }}>
              Cada evento se diseña según el objetivo, presupuesto, número de asistentes y cultura de la empresa. Pulsa en un formato para conocer todos los detalles.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 formats-grid">
            {[
              {
                slug: "corporate-afterwork",
                title: "Corporate Afterwork",
                tagline: "Cerrar la semana, celebrar un hito o desconectar juntos fuera de la oficina.",
                audience: "15–60 personas",
                duration: "2–4 h",
                img: "https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=1200&q=80",
              },
              {
                slug: "team-celebration",
                title: "Team Celebration",
                tagline: "Reconocer al equipo de verdad. Una celebración con estructura y momentos de reconocimiento real.",
                audience: "20–80 personas",
                duration: "Comida o cena",
                img: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1200&q=80",
              },
              {
                slug: "client-rooftop-experience",
                title: "Client Rooftop Experience",
                tagline: "Reforzar relaciones con clientes clave en un entorno diferencial que asocie tu marca al detalle.",
                audience: "10–40 personas",
                duration: "Llegada → momento → cierre",
                img: "https://images.unsplash.com/photo-1561489413-985b06da5bee?auto=format&fit=crop&w=1200&q=80",
              },
            ].map((fmt, i) => (
              <a
                key={fmt.slug}
                href={`formato.html?id=${fmt.slug}`}
                className="fade-up group overflow-hidden flex flex-col transition-all duration-500 format-card"
                style={{
                  backgroundColor: "#FAF6F0",
                  border: "1px solid #EDE0CF",
                  boxShadow: "0 4px 24px rgba(94, 55, 25, 0.06)",
                  transitionDelay: `${i * 0.1}s`,
                  textDecoration: "none",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.boxShadow = "0 16px 40px rgba(94, 55, 25, 0.18)";
                  e.currentTarget.style.transform = "translateY(-4px)";
                  e.currentTarget.style.borderColor = "#886E58";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.boxShadow = "0 4px 24px rgba(94, 55, 25, 0.06)";
                  e.currentTarget.style.transform = "translateY(0)";
                  e.currentTarget.style.borderColor = "#EDE0CF";
                }}
              >
                <div className="relative overflow-hidden format-card-img" style={{ height: "260px" }}>
                  <img
                    src={fmt.img}
                    alt={fmt.title}
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  <div className="absolute inset-0" style={{ background: "linear-gradient(to top, rgba(94,55,25,0.55) 0%, transparent 60%)" }} />
                  <div className="absolute top-4 right-4">
                    <span
                      className="text-[10px] px-2.5 py-1 tracking-widest uppercase"
                      style={{
                        backgroundColor: "rgba(245, 237, 224, 0.92)",
                        color: "#5E3719",
                        fontFamily: "'DM Sans', sans-serif",
                        letterSpacing: "0.18em",
                      }}
                    >
                      {fmt.audience}
                    </span>
                  </div>
                </div>
                <div className="p-7 flex-1 flex flex-col">
                  <h3 className="text-xl mb-3 leading-tight" style={{ fontFamily: "'Playfair Display', serif", color: "#5E3719" }}>
                    {fmt.title}
                  </h3>
                  <p className="text-sm leading-relaxed mb-6 flex-1" style={{ color: "#735238", fontFamily: "'DM Sans', sans-serif", fontWeight: 300, lineHeight: "1.75" }}>
                    {fmt.tagline}
                  </p>
                  <div className="flex items-center justify-between pt-4" style={{ borderTop: "1px solid #EDE0CF" }}>
                    <span className="flex items-center gap-2 text-xs" style={{ color: "#886E58", fontFamily: "'DM Sans', sans-serif" }}>
                      <Clock size={12} /> {fmt.duration}
                    </span>
                    <span
                      className="text-xs tracking-widest uppercase transition-all duration-300"
                      style={{
                        color: "#5E3719",
                        fontFamily: "'DM Sans', sans-serif",
                        letterSpacing: "0.2em",
                      }}
                    >
                      Ver detalle →
                    </span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ── GALERÍA ──────────────────────────────────────────────────────────── */}
      {t.showGallery && (
      <section id="galeria" className={`py-28 ${t.darkBands ? "dark-band" : ""}`}
        style={{ backgroundColor: t.darkBands ? "#0E0805" : "#F5EDE0" }}>
        <div className="container">
          <div className="text-center mb-16 fade-up">
            <div className="section-label mb-4">Eventos pasados</div>
            <h2 className="h-section" style={{ fontFamily: "'Cormorant Garamond', serif", color: "#5E3719" }}>
              Momentos que <em>hablan por sí solos</em>
            </h2>
            <div className="zerua-divider-center mt-4" />
          </div>

          {/* Outdoor gallery */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mb-3">
            {[
              { img: IMAGES.panoramica, span: "col-span-2 row-span-2", height: "h-96" },
              { img: IMAGES.cocktails, span: "", height: "h-44" },
              { img: IMAGES.gastronomia, span: "", height: "h-44" },
              { img: IMAGES.sunsetView, span: "", height: "h-44" },
              { img: IMAGES.candles, span: "", height: "h-44" },
            ].map((item, i) => (
              <div key={i} className={`fade-in overflow-hidden group ${item.span}`} style={{ transitionDelay: `${i * 0.06}s` }}>
                <img
                  src={item.img}
                  alt={`Evento Zerua ${i + 1}`}
                  className={`w-full ${item.height} object-cover transition-transform duration-700 group-hover:scale-105`}
                  onError={(e) => {
                    if (!e.target.dataset.fb) {
                      e.target.dataset.fb = "1";
                      e.target.src = "assets/portada.png";
                      e.target.style.objectPosition = "center 40%";
                    }
                  }}
                />
              </div>
            ))}
          </div>

          {/* Indoor events */}
          <div className="mt-10 fade-up">
            <div className="section-label mb-6">Espacios indoor</div>
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
              {[
                { img: IMAGES.interior1, span: "col-span-2", height: "h-64" },
                { img: IMAGES.interior2, span: "", height: "h-64" },
                { img: IMAGES.interior3, span: "", height: "h-64" },
                { img: IMAGES.interior4, span: "col-span-2", height: "h-56" },
                { img: IMAGES.interior5, span: "", height: "h-56" },
                { img: IMAGES.interior6, span: "", height: "h-56" },
              ].map((item, i) => (
                <div key={i} className={`fade-in overflow-hidden group ${item.span}`} style={{ transitionDelay: `${i * 0.06}s` }}>
                  <img
                    src={item.img}
                    alt={`Evento indoor Zerua ${i + 1}`}
                    className={`w-full ${item.height} object-cover transition-transform duration-700 group-hover:scale-105`}
                    onError={(e) => {
                      if (!e.target.dataset.fb) {
                        e.target.dataset.fb = "1";
                        e.target.src = "assets/portada.png";
                        e.target.style.objectPosition = "center 40%";
                      }
                    }}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      )}

      {/* ── PÚBLICO OBJETIVO ─────────────────────────────────────────────────── */}
      {t.showPublic && (
      <section className="py-24" style={{ backgroundColor: "#EDE0CF" }}>
        <div className="container">
          <div className="text-center mb-14 fade-up">
            <div className="section-label mb-4">A quién va dirigido</div>
            <h2 className="h-section" style={{ fontFamily: "'Cormorant Garamond', serif", color: "#5E3719" }}>
              Diseñado para empresas <em>con visión</em>
            </h2>
            <div className="zerua-divider-center mt-4" />
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {[
              { sector: "Cooperativas y economía social", message: "Una experiencia para reforzar equipo y celebrar antes del verano.", why: "Cultura de personas, comunidad y cuidado interno" },
              { sector: "Consultoras y servicios profesionales", message: "Un afterwork premium para cuidar al equipo sin hacer otro evento genérico.", why: "Equipos jóvenes, presión laboral y necesidad de retención" },
              { sector: "Tecnología e innovación", message: "Una acción de cultura y conexión en un espacio diferencial.", why: "Valoran experiencias, marca empleadora y formatos menos tradicionales" },
              { sector: "Despachos, banca y seguros", message: "Una experiencia elegante para equipo, dirección o clientes clave.", why: "Presupuesto y necesidad de relaciones internas o con clientes" },
              { sector: "Industria, energía e ingeniería", message: "Un evento de reconocimiento y cierre de trimestre en Bilbao.", why: "Equipos grandes, cierres de proyecto y necesidad de cohesión" },
              { sector: "Startups consolidadas", message: "Un evento de cultura que refuerza la identidad de equipo.", why: "Crecimiento rápido, necesidad de cohesión y employer branding" },
            ].map((seg, i) => (
              <div key={i} className="fade-up p-7" style={{ backgroundColor: "#FAF6F0", border: "1px solid #D4C4B0", transitionDelay: `${i * 0.07}s` }}>
                <h3 className="text-base font-medium mb-3" style={{ fontFamily: "'Playfair Display', serif", color: "#5E3719" }}>{seg.sector}</h3>
                <p className="text-sm italic mb-4 leading-relaxed" style={{ color: "#886E58", fontFamily: "'Playfair Display', serif" }}>"{seg.message}"</p>
                <p className="text-xs leading-relaxed" style={{ color: "#9D8977", fontFamily: "'DM Sans', sans-serif", fontWeight: 300 }}>{seg.why}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* ── FULL WIDTH IMAGE BREAK ──────────────────────────────────────────── */}
      <section className="relative h-80 md:h-96 overflow-hidden">
        <img src={IMAGES.rooftopNight} alt="Rooftop nocturno Bilbao" className="w-full h-full object-cover" style={{ objectPosition: "center 40%" }} />
        <div className="absolute inset-0 flex items-start justify-center pt-10 md:pt-14" style={{ backgroundColor: "rgba(94, 55, 25, 0.55)" }}>
          <div className="text-center px-6 max-w-4xl">
            <p className="text-2xl md:text-4xl font-normal italic leading-tight" style={{ fontFamily: "'Playfair Display', serif", color: "#F5EDE0" }}>
              "Creamos eventos en rooftops para que las empresas celebren, conecten y cuiden a sus equipos antes del verano."
            </p>
          </div>
        </div>
      </section>

      {/* ── RESEÑAS ──────────────────────────────────────────────────────────── */}
      {t.showReviews && (
      <section id="resenas" className="py-24" style={{ backgroundColor: "#F5EDE0" }}>
        <div className="container max-w-5xl">
          <h2 className="h-section text-center mb-16" style={{ fontFamily: "'Playfair Display', serif", color: "#5E3719" }}>
            Lo que dicen quienes ya han vivido<br />un <em>evento Zerua</em>
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="p-10 shadow-sm relative bg-white flex flex-col justify-between" style={{ borderColor: "rgba(136,110,88,0.2)", borderWidth: "1px" }}>
              <Quote className="absolute top-8 right-8" size={64} style={{ color: "rgba(136,110,88,0.1)" }} strokeWidth={1} />
              <p className="italic mb-10 relative z-10 leading-relaxed text-base" style={{ fontFamily: "'DM Sans', sans-serif", color: "#5E3719" }}>
                "Organizábamos el cierre de año desde hacía cuatro años siempre en el mismo restaurante. El cambio al rooftop del Radisson con Zerua fue total. El equipo llegó sin saber qué esperar y salió hablando del evento durante semanas. El nivel de detalle en cada parte del evento fue impresionante."
              </p>
              <div className="flex items-center gap-4 relative z-10 mt-auto">
                <div className="w-10 h-10 rounded-full flex items-center justify-center font-medium" style={{ backgroundColor: "#F5EDE0", color: "#5E3719" }}>L</div>
                <div>
                  <div className="font-semibold text-sm" style={{ color: "#5E3719" }}>Laura Mendizábal</div>
                  <div className="text-xs" style={{ color: "#886E58" }}>Directora de RRHH, empresa industrial, Bilbao</div>
                </div>
              </div>
            </div>

            <div className="p-10 shadow-sm relative bg-white flex flex-col justify-between" style={{ borderColor: "rgba(136,110,88,0.2)", borderWidth: "1px" }}>
              <Quote className="absolute top-8 right-8" size={64} style={{ color: "rgba(136,110,88,0.1)" }} strokeWidth={1} />
              <p className="italic mb-10 relative z-10 leading-relaxed text-base" style={{ fontFamily: "'DM Sans', sans-serif", color: "#5E3719" }}>
                "Necesitábamos presentar resultados a nuestros principales clientes en un entorno que transmitiera quiénes somos. La terraza del Vincci con vistas a la ría lo hizo por nosotros antes de que empezáramos a hablar. Zerua coordinó todo y nosotros solo tuvimos que estar presentes."
              </p>
              <div className="flex items-center gap-4 relative z-10 mt-auto">
                <div className="w-10 h-10 rounded-full flex items-center justify-center font-medium" style={{ backgroundColor: "#F5EDE0", color: "#5E3719" }}>I</div>
                <div>
                  <div className="font-semibold text-sm" style={{ color: "#5E3719" }}>Iñigo Azkue</div>
                  <div className="text-xs" style={{ color: "#886E58" }}>Director Comercial, firma de consultoría, Bilbao</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      )}

      {/* ── CONTACTO ─────────────────────────────────────────────────────────── */}
      <section id="contacto" className="py-28" style={{ backgroundColor: "#735238" }}>
        <div className="container">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
            <div className="fade-up">
              <div className="section-label mb-4" style={{ color: "#B2A496" }}>Contacto</div>
              <h2 className="h-section h-section--light mb-6" style={{ fontFamily: "'Cormorant Garamond', serif", color: "#F5EDE0" }}>
                Cuéntanos qué tipo de evento <em>quieres crear</em>
              </h2>
              <div className="zerua-divider" style={{ backgroundColor: "#B2A496" }} />
              <p className="text-base leading-relaxed mb-10" style={{ color: "rgba(245,237,224,0.75)", fontFamily: "'DM Sans', sans-serif", fontWeight: 300, lineHeight: "1.8" }}>
                Nos pondremos en contacto contigo en menos de 24 horas con una propuesta personalizada en dos o tres niveles para que sea fácil presentarla internamente.
              </p>
              <div className="space-y-5 mb-10">
                {[
                  "Diseñamos y coordinamos la experiencia completa",
                  "Seleccionamos el rooftop según tu objetivo y aforo",
                  "Gestionamos proveedores: catering, barra, música y activaciones",
                  "Producción y ejecución el día del evento",
                  "Propuesta en 2–3 niveles de inversión",
                ].map((item, i) => (
                  <div key={i} className="flex items-start gap-3">
                    <span style={{ color: "#B2A496" }}>—</span>
                    <span className="text-sm" style={{ color: "rgba(245,237,224,0.8)", fontFamily: "'DM Sans', sans-serif", fontWeight: 300 }}>{item}</span>
                  </div>
                ))}
              </div>
              <div className="space-y-3">
                <div className="flex items-center gap-3">
                  <MapPin size={16} style={{ color: "#B2A496" }} />
                  <span className="text-sm" style={{ color: "rgba(245,237,224,0.7)", fontFamily: "'DM Sans', sans-serif" }}>Bilbao, País Vasco</span>
                </div>
                <a href="mailto:zeruaevents@gmail.com" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
                  <Mail size={16} style={{ color: "#B2A496" }} />
                  <span className="text-sm" style={{ color: "rgba(245,237,224,0.7)", fontFamily: "'DM Sans', sans-serif" }}>zeruaevents@gmail.com</span>
                </a>
                <a href="https://instagram.com/zeruaevents" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
                  <Instagram size={16} style={{ color: "#B2A496" }} />
                  <span className="text-sm" style={{ color: "rgba(245,237,224,0.7)", fontFamily: "'DM Sans', sans-serif" }}>@zeruaevents</span>
                </a>
                <a href="https://linkedin.com/company/zeruaevents" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
                  <Linkedin size={16} style={{ color: "#B2A496" }} />
                  <span className="text-sm" style={{ color: "rgba(245,237,224,0.7)", fontFamily: "'DM Sans', sans-serif" }}>Zerua Events</span>
                </a>
              </div>
            </div>
            <div className="fade-in">
              <div className="text-center mb-8">
                <h3 className="text-3xl md:text-4xl mb-2" style={{ fontFamily: "'Playfair Display', serif", color: "#F5EDE0" }}>
                  Cuéntanos tu evento.
                </h3>
                <p className="text-xl md:text-2xl italic" style={{ fontFamily: "'Playfair Display', serif", color: "#D4B896" }}>
                  Te respondemos en menos de 24 horas.
                </p>
              </div>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

      {/* ── FOOTER ───────────────────────────────────────────────────────────── */}
      <footer style={{ backgroundColor: "#5E3719" }} className="py-12">
        <div className="container">
          <div className="flex flex-col md:flex-row items-start justify-between gap-10 mb-10">
            <div>
              <img
                src="assets/logo-zerua.png"
                alt="Zerua Events"
                className="logo-on-dark mb-5"
                style={{ height: 44, width: "auto", opacity: 0.95 }}
              />
              <div className="space-y-2">
                <a href="mailto:zeruaevents@gmail.com" className="flex items-center gap-2 text-sm hover:opacity-80 transition-opacity" style={{ color: "rgba(245,237,224,0.55)", fontFamily: "'DM Sans', sans-serif" }}>
                  <Mail size={13} style={{ color: "#886E58" }} /> zeruaevents@gmail.com
                </a>
                <a href="https://instagram.com/zeruaevents" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm hover:opacity-80 transition-opacity" style={{ color: "rgba(245,237,224,0.55)", fontFamily: "'DM Sans', sans-serif" }}>
                  <Instagram size={13} style={{ color: "#886E58" }} /> @zeruaevents
                </a>
                <a href="https://linkedin.com/company/zeruaevents" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm hover:opacity-80 transition-opacity" style={{ color: "rgba(245,237,224,0.55)", fontFamily: "'DM Sans', sans-serif" }}>
                  <Linkedin size={13} style={{ color: "#886E58" }} /> Zerua Events
                </a>
                <div className="flex items-center gap-2 text-sm" style={{ color: "rgba(245,237,224,0.55)", fontFamily: "'DM Sans', sans-serif" }}>
                  <MapPin size={13} style={{ color: "#886E58" }} /> Bilbao, País Vasco
                </div>
              </div>
            </div>

            <div>
              <div className="section-label mb-4" style={{ color: "#B2A496" }}>Legal</div>
              <div className="flex flex-col gap-3">
                {[
                  { label: "Aviso Legal", page: "aviso" },
                  { label: "Política de Cookies", page: "cookies" },
                  { label: "Política de Privacidad", page: "privacidad" },
                ].map(({ label, page }) => (
                  <button
                    key={page}
                    onClick={() => setLegalModal(page)}
                    className="text-sm text-left transition-colors duration-200"
                    style={{ color: "rgba(245,237,224,0.5)", fontFamily: "'DM Sans', sans-serif" }}
                    onMouseEnter={(e) => (e.target.style.color = "#F5EDE0")}
                    onMouseLeave={(e) => (e.target.style.color = "rgba(245,237,224,0.5)")}
                  >
                    {label}
                  </button>
                ))}
              </div>
            </div>
          </div>

          <div className="border-t pt-6" style={{ borderColor: "rgba(245,237,224,0.1)" }}>
            <div className="text-xs text-center" style={{ color: "rgba(245,237,224,0.35)", fontFamily: "'DM Sans', sans-serif" }}>
              © 2026 Zerua Events · Bilbao
            </div>
          </div>
        </div>
      </footer>

      <LegalModal page={legalModal} onClose={() => setLegalModal(null)} />

      {/* ── TWEAKS PANEL ─────────────────────────────────────────────────────── */}
      <TweaksPanel title="Tweaks · Variante A">
        <TweakSection label="Contenido" />
        <TweakText label="Título hero" value={t.heroTitle}
                   onChange={(v) => setTweak("heroTitle", v)} />
        <TweakText label="Subtítulo hero" value={t.heroSubtitle}
                   onChange={(v) => setTweak("heroSubtitle", v)} />

        <TweakSection label="Color y superficie" />
        <TweakColor label="Acento" value={t.accent}
                    options={["#886E58", "#A0654A", "#5E8A6A", "#8A4A3A"]}
                    onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Tono base" value={t.surface}
                    options={["warm", "cream", "sand"]}
                    onChange={(v) => setTweak("surface", v)} />

        <TweakSection label="Tamaño y aire" />
        <TweakSlider label="Tamaño titulares" value={t.headlineScale}
                     min={0.7} max={1.4} step={0.05} unit="x"
                     onChange={(v) => setTweak("headlineScale", v)} />
        <TweakRadio label="Densidad" value={t.sectionDensity}
                    options={["compact", "regular", "loose"]}
                    onChange={(v) => setTweak("sectionDensity", v)} />

        <TweakSection label="Hero" />
        <TweakToggle label="Efecto Stranger Things" value={t.strangerEffect}
                     onChange={(v) => setTweak("strangerEffect", v)} />

        <TweakSection label="Mostrar secciones" />
        <TweakToggle label="Marquee animado" value={t.showMarquee}
                     onChange={(v) => setTweak("showMarquee", v)} />
        <TweakToggle label="Bandas oscuras" value={t.darkBands}
                     onChange={(v) => setTweak("darkBands", v)} />
        <TweakToggle label="Galería" value={t.showGallery}
                     onChange={(v) => setTweak("showGallery", v)} />
        <TweakToggle label="Público objetivo" value={t.showPublic}
                     onChange={(v) => setTweak("showPublic", v)} />
        <TweakToggle label="Reseñas" value={t.showReviews}
                     onChange={(v) => setTweak("showReviews", v)} />

        <TweakSection label="Formatos" />
        <TweakRadio label="Layout" value={t.formatsLayout}
                    options={["cards", "list", "minimal"]}
                    onChange={(v) => setTweak("formatsLayout", v)} />
      </TweaksPanel>
    </div>
  );
}

window.Home = Home;