const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "extraordinarios",
  "showBlue": true
}/*EDITMODE-END*/;

/* ============================================================ LOGO */
function Logo({ size = 32 }) {
  return (
    <img src="assets/solen-logo.png" alt="Solen" width={size} height={size * (134/121)} style={{ display: "block" }} />
  );
}

/* ============================================================ NAV */
function Nav({ scrolled }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["empresas", "Empresas"],
    ["servicios", "Servicios"],
    ["portafolio", "Portafolio"],
    ["proceso", "Proceso"],
    ["contacto", "Contacto"],
  ];
  const go = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 1, behavior: "smooth" });
  };
  return (
    <header className="r-header" style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: "20px 40px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      background: scrolled || open ? "rgba(0,0,0,0.92)" : "transparent",
      backdropFilter: scrolled || open ? "blur(14px)" : "none",
      borderBottom: scrolled || open ? "1px solid var(--line)" : "1px solid transparent",
      transition: "all 240ms ease"
    }}>
      <a onClick={() => go("index")} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
        <Logo size={30} />
        <span className="black" style={{ fontSize: 20, letterSpacing: "-0.04em" }}>SOLEN</span>
      </a>
      <nav className="r-nav" style={{ display: "flex", gap: 32, alignItems: "center" }}>
        {links.map(([id, label]) => (
          <a key={id} onClick={() => go(id)} className="mono" style={{
            cursor: "pointer", textDecoration: "none", fontSize: 11, color: "var(--fg-2)"
          }}
            onMouseEnter={(e) => e.currentTarget.style.color = "var(--fg)"}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--fg-2)"}
          >{label}</a>
        ))}
        <button onClick={() => go("contacto")} style={{
          padding: "12px 22px",
          border: "none",
          background: "var(--brand)",
          color: "#000",
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          cursor: "pointer",
          borderRadius: 0
        }}>Cotizar →</button>
      </nav>

      {/* mobile burger */}
      <button
        className="r-burger"
        onClick={() => setOpen(o => !o)}
        aria-label="Menú"
        style={{
          display: "none",
          background: "transparent",
          border: "1px solid var(--line)",
          width: 44, height: 44,
          padding: 0,
          cursor: "pointer",
          color: "var(--fg)"
        }}
      >
        <span style={{
          display: "block", width: 18, height: 1.5,
          background: "currentColor", margin: "0 auto",
          transform: open ? "translateY(2px) rotate(45deg)" : "translateY(-3px)",
          transition: "transform 200ms"
        }}/>
        <span style={{
          display: "block", width: 18, height: 1.5,
          background: "currentColor", margin: "5px auto 0",
          transform: open ? "translateY(-4px) rotate(-45deg)" : "translateY(0)",
          transition: "transform 200ms"
        }}/>
      </button>

      {/* mobile drawer */}
      {open && (
        <div className="r-drawer" style={{
          position: "fixed",
          top: 76, left: 0, right: 0,
          background: "rgba(0,0,0,0.96)",
          backdropFilter: "blur(18px)",
          borderBottom: "1px solid var(--line)",
          padding: "32px 40px 40px",
          display: "none",
          flexDirection: "column",
          gap: 4,
          zIndex: 49
        }}>
          {links.map(([id, label]) => (
            <a key={id} onClick={() => go(id)} className="black" style={{
              cursor: "pointer", textDecoration: "none",
              fontSize: 32, color: "var(--fg)",
              padding: "14px 0",
              borderBottom: "1px solid var(--line)",
              textTransform: "uppercase", letterSpacing: "-0.02em"
            }}>{label}</a>
          ))}
          <button onClick={() => go("contacto")} style={{
            marginTop: 24,
            padding: "18px 22px",
            border: "none",
            background: "var(--brand)",
            color: "#000",
            fontSize: 13,
            fontWeight: 800,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            cursor: "pointer",
            borderRadius: 0
          }}>Cotizar →</button>
        </div>
      )}
    </header>
  );
}

/* ============================================================ HERO */
function Hero() {
  const [t, setT] = useState(0);
  useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = () => {
      setT((performance.now() - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section id="index" className="r-hero" style={{
      background: "var(--bg)",
      minHeight: "100vh",
      position: "relative",
      paddingTop: 140,
      paddingBottom: 80,
      overflow: "hidden"
    }}>
      {/* radial vignette */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse at 50% 0%, rgba(74,144,217,0.10) 0%, transparent 55%)"
      }}/>
      {/* faint grid */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: `linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)`,
        backgroundSize: "100px 100px",
        maskImage: "radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%)"
      }}/>

      <div style={{ padding: "0 40px", position: "relative" }}>
        {/* top meta */}
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 80 }}>
          <span className="mono" style={{ color: "var(--fg-3)" }}>Cancún · Q. Roo · Est. 2008</span>
          <span className="mono" style={{ color: "var(--fg-3)" }}>{new Date().getFullYear()} / Producción integral</span>
        </div>

        {/* headline — bold/light contrast */}
        <h1 style={{
          fontSize: "clamp(64px, 11vw, 184px)",
          lineHeight: 0.88,
          margin: 0,
          letterSpacing: "-0.05em"
        }}>
          <span className="light" style={{ display: "block", color: "var(--fg-2)" }}>Eventos</span>
          <span className="black" style={{ display: "block" }}>EXTRA<span style={{ color: "var(--brand)" }}>ORDINARIOS</span></span>
          <span className="light" style={{ display: "block", color: "var(--fg-2)" }}>hechos en el</span>
          <span className="black" style={{ display: "block" }}>CARIBE.</span>
        </h1>

        {/* lower row */}
        <div className="r-hero-grid" style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 0.8fr 1fr",
          gap: 60,
          marginTop: 100,
          alignItems: "end"
        }}>
          <div>
            <div className="mono" style={{ color: "var(--brand)", marginBottom: 14 }}>— Quiénes somos</div>
            <p className="light" style={{ fontSize: 19, lineHeight: 1.5, margin: 0, maxWidth: 420, color: "var(--fg)" }}>
              Una compañía de seis empresas dedicadas a la planeación, producción y logística de bodas <em style={{ fontWeight: 300 }}>destination</em>, eventos corporativos y experiencias de marca en Cancún y la Riviera Maya.
            </p>
          </div>

          <div style={{ alignSelf: "end", justifySelf: "center" }}>
            <SunDial t={t} />
          </div>

          <div style={{ justifySelf: "end", textAlign: "right" }}>
            <div className="mono" style={{ color: "var(--fg-3)", marginBottom: 14 }}>— Disponibilidad</div>
            <div className="black" style={{ fontSize: 56, lineHeight: 0.95 }}>
              2026<br/>—<br/><span className="light" style={{ color: "var(--fg-2)" }}>2027</span>
            </div>
          </div>
        </div>
      </div>

      {/* marquee ticker */}
      <div style={{ marginTop: 100, paddingTop: 24, paddingBottom: 24, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", overflow: "hidden" }}>
        <div className="marquee-track">
          {Array.from({ length: 2 }).flatMap((_, j) => [
            <Tick key={`a${j}`} bold="17" light="años de producción" />,
            <Tick key={`b${j}`} bold="1,400+" light="eventos producidos" />,
            <Tick key={`c${j}`} bold="6" light="empresas hermanas" />,
            <Tick key={`d${j}`} bold="32" light="destinos" />,
            <Tick key={`e${j}`} bold="ES · EN" light="equipo bilingüe" />,
            <Tick key={`f${j}`} bold="24/7" light="coordinación en sitio" />,
          ])}
        </div>
      </div>
    </section>
  );
}

function Tick({ bold, light }) {
  return (
    <span style={{ display: "inline-flex", gap: 12, alignItems: "baseline", fontSize: 32 }}>
      <span className="black" style={{ color: "var(--fg)" }}>{bold}</span>
      <span className="light" style={{ color: "var(--fg-3)", fontSize: 18 }}>{light}</span>
      <span style={{ color: "var(--brand)", marginLeft: 8 }}>◆</span>
    </span>
  );
}

function SunDial({ t }) {
  const dash = (60 + Math.sin(t * 0.6) * 8).toFixed(1);
  return (
    <svg width="180" height="180" viewBox="0 0 200 200">
      <circle cx="100" cy="100" r="90" fill="none" stroke="var(--fg)" strokeWidth="0.6" opacity="0.25"/>
      <circle cx="100" cy="100" r="72" fill="none" stroke="var(--brand)" strokeWidth="0.8" opacity="0.7" strokeDasharray={`${dash} ${dash * 0.4}`} style={{ transformOrigin: "100px 100px", transform: `rotate(${t * 6}deg)` }}/>
      <circle cx="100" cy="100" r="54" fill="none" stroke="var(--fg)" strokeWidth="0.6" opacity="0.4"/>
      <circle cx="100" cy="100" r="36" fill="none" stroke="var(--brand)" strokeWidth="0.6" opacity="0.5" strokeDasharray="2 4" style={{ transformOrigin: "100px 100px", transform: `rotate(${-t * 12}deg)` }}/>
      <circle cx="100" cy="100" r="3" fill="var(--brand)"/>
      <text x="100" y="186" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--fg-3)" letterSpacing="2">21°09'N · 86°50'W</text>
    </svg>
  );
}

/* ============================================================ EMPRESAS */
const EMPRESAS = [
  {
    id: "solen", code: "01", name: "EVENTOS", full: "Solen Event Masterminds",
    logo: "assets/empresa-solen-cut.png", photo: "assets/showcase-solen.jpg", tag: "Producción integral",
    tagline: "Strategic, creative, professional production.",
    desc: "Empresa enfocada a la planeación, organización, producción, logística y asesoría de eventos corporativos, sociales y experiencias de marca. Conceptualizamos ideas para crear eventos originales que garantizan el éxito.",
    img: "evento corporativo · stage 24m · LED arch",
    services: [
      { icon: "spark",    label: "Conceptualización" },
      { icon: "calendar", label: "Planeación" },
      { icon: "grid",     label: "Producción 360°" },
      { icon: "route",    label: "Logística" },
      { icon: "users",    label: "Coordinación" },
      { icon: "speaker",  label: "Sonido & Audio" }
    ]
  },
  {
    id: "bodas", code: "02", name: "BODAS", full: "Solen Bodas",
    logo: "assets/empresa-bodas-cut.png", photo: "assets/showcase-bodas.jpg", tag: "Wedding planning",
    tagline: "Creative, elegant, professional design.",
    desc: "Empresa enfocada a servicios de Wedding Planner en Cancún y la Riviera Maya. Nuestro trabajo es crear con sentido bodas únicas y excepcionales, partiendo de la idea de cada pareja. Los detalles engrandecen y eso es lo que cada uno de los invitados recordará de su boda.",
    img: "ceremonia destination · sailcloth · maroma",
    services: [
      { icon: "route",    label: "Logística & Coordinación" },
      { icon: "car",      label: "Transportación" },
      { icon: "hotel",    label: "Hoteles" },
      { icon: "dish",     label: "Catering" },
      { icon: "pin",      label: "Locaciones" },
      { icon: "flower",   label: "Decoración & Flores" }
    ]
  },
  {
    id: "leds", code: "03", name: "LEDS", full: "Icon LEDs",
    logo: "assets/empresa-leds-cut.png", photo: "assets/showcase-leds.jpg", tag: "Iluminación · pantallas",
    tagline: "Light, screens, atmosphere.",
    desc: "Especialistas en pantallas LED de alta densidad, mapping arquitectónico y diseño lumínico. Convertimos cualquier espacio en una experiencia visual envolvente con tecnología de última generación.",
    img: "led arch · 18×6m · brand reveal",
    services: [
      { icon: "screen",   label: "Pantallas LED HD" },
      { icon: "spark",    label: "Mapping arquitectónico" },
      { icon: "bulb",     label: "Diseño lumínico" },
      { icon: "grid",     label: "Estructuras truss" },
      { icon: "video",    label: "Video walls" },
      { icon: "remote",   label: "Control DMX" }
    ]
  },
  {
    id: "armor", code: "04", name: "DECK", full: "Armor Deck",
    logo: "assets/empresa-deck-cut.png", photo: "assets/showcase-armor.jpg", tag: "Pisos modulares",
    tagline: "Flooring solutions, anywhere.",
    desc: "Pisos de duela y plataformas estructurales sobre arena, alberca o terreno irregular. Sistema modular certificado que soporta carga estructural y permite armar pistas, comedores y escenarios donde antes era imposible.",
    img: "piso modular · sobre arena · 800m²",
    services: [
      { icon: "grid",     label: "Piso de duela" },
      { icon: "pool",     label: "Plataforma sobre alberca" },
      { icon: "beach",    label: "Piso sobre arena" },
      { icon: "stage",    label: "Escenarios estructurales" },
      { icon: "ramp",     label: "Rampas & accesos" },
      { icon: "tools",    label: "Montaje certificado" }
    ]
  },
  {
    id: "tents", code: "05", name: "TENTS", full: "Escala Tents",
    logo: "assets/empresa-tents-cut.png", photo: "assets/showcase-tents.jpg", tag: "Carpas & estructuras",
    tagline: "Architecture in fabric.",
    desc: "Carpas pico, sailcloth y estructuras transparentes para 60 a 1,200 invitados. Diseño estructural de carpa adaptado al terreno, viento y proyecto creativo del evento.",
    img: "sailcloth · 24m · 240 invitados",
    services: [
      { icon: "tent",     label: "Carpas pico" },
      { icon: "sail",     label: "Sailcloth" },
      { icon: "diamond",  label: "Estructuras transparentes" },
      { icon: "frame",    label: "Carpas marco" },
      { icon: "wind",     label: "Anclaje certificado" },
      { icon: "ruler",    label: "Diseño a medida" }
    ]
  },
  {
    id: "house", code: "06", name: "WORKHOUSE", full: "Workhouse Custom",
    logo: "assets/empresa-workhouse-cut.png", photo: "assets/showcase-house.jpg", tag: "Mobiliario & rentals",
    tagline: "Custom furniture & rentals.",
    desc: "Catálogo de mobiliario editorial, lounge, vajillas y cristalería de autor. Producimos piezas a medida y mantenemos un inventario rotativo de mobiliario contemporáneo para eventos sociales y corporativos.",
    img: "mobiliario lounge · cristalería · long table",
    services: [
      { icon: "chair",    label: "Mobiliario lounge" },
      { icon: "dish",     label: "Vajilla & cristalería" },
      { icon: "hammer",   label: "Producción a medida" },
      { icon: "lamp",     label: "Iluminación decorativa" },
      { icon: "frame",    label: "Backdrops & escenografía" },
      { icon: "truck",    label: "Logística de entrega" }
    ]
  },
];

/* simple line icons */
function Icon({ name, size = 22, color = "currentColor" }) {
  const s = size, c = color;
  const sw = 1.2;
  const wrap = (children) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{children}</svg>
  );
  switch (name) {
    case "route":    return wrap(<><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h8a4 4 0 0 1 0 8H8a4 4 0 0 0 0 8h8"/></>);
    case "car":      return wrap(<><path d="M3 13l2-5h14l2 5"/><path d="M3 13v5h2v-2h14v2h2v-5"/><circle cx="7" cy="15.5" r="1"/><circle cx="17" cy="15.5" r="1"/></>);
    case "hotel":    return wrap(<><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21v-6h6v6"/><path d="M9 11h.01M15 11h.01"/></>);
    case "dish":     return wrap(<><circle cx="12" cy="13" r="7"/><path d="M5 13h14M12 13v7"/></>);
    case "pin":      return wrap(<><path d="M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></>);
    case "flower":   return wrap(<><circle cx="12" cy="12" r="2"/><path d="M12 7a3 3 0 0 1 0 0a3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3z"/><path d="M12 7V3M12 21v-4M5 12H1M23 12h-4"/></>);
    case "calendar": return wrap(<><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 10h18M8 3v4M16 3v4"/></>);
    case "spark":    return wrap(<><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2"/></>);
    case "grid":     return wrap(<><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>);
    case "users":    return wrap(<><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M15 20c0-2.5 2-4.5 4.5-4.5"/></>);
    case "speaker":  return wrap(<><path d="M11 5L6 9H3v6h3l5 4z"/><path d="M15 9a4 4 0 0 1 0 6"/></>);
    case "screen":   return wrap(<><rect x="2" y="4" width="20" height="13" rx="1"/><path d="M8 21h8M12 17v4"/></>);
    case "bulb":     return wrap(<><path d="M9 18h6M10 21h4M12 2a6 6 0 0 0-4 10.5C9 14 9 15 9 16h6c0-1 0-2 1-3.5A6 6 0 0 0 12 2z"/></>);
    case "video":    return wrap(<><rect x="2" y="6" width="14" height="12" rx="1"/><path d="M16 10l6-3v10l-6-3z"/></>);
    case "remote":   return wrap(<><rect x="6" y="2" width="12" height="20" rx="2"/><circle cx="12" cy="7" r="1.5"/><path d="M9 12h6M9 16h6"/></>);
    case "pool":     return wrap(<><path d="M2 18c2 0 2-1.5 4-1.5S8 18 10 18s2-1.5 4-1.5S16 18 18 18s2-1.5 4-1.5"/><path d="M2 14c2 0 2-1.5 4-1.5S8 14 10 14s2-1.5 4-1.5S16 14 18 14s2-1.5 4-1.5"/><path d="M7 14V5a2 2 0 0 1 2-2M17 14V5a2 2 0 0 0-2-2"/></>);
    case "beach":    return wrap(<><circle cx="6" cy="8" r="3"/><path d="M6 11v10M2 21h20M9 14c2-2 6-2 9 0"/></>);
    case "stage":    return wrap(<><path d="M3 14l9-7 9 7"/><path d="M5 14v6h14v-6"/><path d="M9 20v-3M15 20v-3"/></>);
    case "ramp":     return wrap(<><path d="M3 19h18M3 19l14-12h4v12"/></>);
    case "tools":    return wrap(<><path d="M14 6l4 4M4 18l8-8 4 4-8 8H4z"/><path d="M14 4l6 6-2 2-6-6z"/></>);
    case "tent":     return wrap(<><path d="M3 21l9-16 9 16M8 21v-5l4-3M16 21v-5l-4-3"/></>);
    case "sail":     return wrap(<><path d="M5 21l7-18v18M5 21h14M19 21L12 8"/></>);
    case "diamond":  return wrap(<><path d="M6 8h12l3 4-9 10L3 12z"/><path d="M6 8l3 4h6l3-4M9 12l3 10 3-10"/></>);
    case "frame":    return wrap(<><rect x="3" y="5" width="18" height="14"/><path d="M3 8h18M3 16h18"/></>);
    case "wind":     return wrap(<><path d="M3 8h11a3 3 0 1 0-3-3M3 12h17a3 3 0 1 1-3 3M3 16h11a3 3 0 1 1-3 3"/></>);
    case "ruler":    return wrap(<><path d="M3 17L17 3l4 4L7 21z"/><path d="M7 13l2 2M11 9l2 2M15 5l2 2"/></>);
    case "chair":    return wrap(<><path d="M5 9V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4M5 9h14v4H5zM7 13v8M17 13v8"/></>);
    case "hammer":   return wrap(<><path d="M14 4l6 6-2 2-2-2-8 8-3-3 8-8-2-2z"/></>);
    case "lamp":     return wrap(<><path d="M9 2h6l3 7H6zM12 9v8M8 21h8M9 17h6"/></>);
    case "truck":    return wrap(<><rect x="2" y="7" width="12" height="9"/><path d="M14 10h5l3 3v3h-8"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></>);
    default: return null;
  }
}

function Empresas() {
  const [active, setActive] = useState(0);
  const e = EMPRESAS[active];
  return (
    <section id="empresas" className="r-section" style={{ background: "var(--bg)", padding: "140px 40px", borderTop: "1px solid var(--line)" }}>
      <SectionHead kicker="02 · Estructura"
        light="Seis empresas,"
        bold="UNA SOLA PRODUCCIÓN."
        sub="Cada disciplina opera bajo su propia firma especializada — coordinadas por un solo project manager. Sin intermediarios, sin sub-rentas, sin sorpresas en presupuesto." />

      {/* logo grid */}
      <div className="r-emp-grid" style={{
        marginTop: 80,
        display: "grid",
        gridTemplateColumns: "repeat(6, 1fr)",
        gap: 1,
        background: "var(--line)",
        border: "1px solid var(--line)"
      }}>
        {EMPRESAS.map((emp, i) => (
          <div
            key={emp.id}
            onMouseEnter={() => setActive(i)}
            style={{
              background: active === i ? "var(--bg-3)" : "var(--bg)",
              padding: "40px 20px",
              cursor: "pointer",
              transition: "background 220ms",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 16,
              position: "relative"
            }}
          >
            <div style={{
              position: "absolute", top: 12, left: 12,
              fontFamily: "JetBrains Mono, monospace", fontSize: 10,
              letterSpacing: "0.08em", color: active === i ? "var(--brand)" : "var(--fg-3)"
            }}>{emp.code}</div>
            <div style={{
              width: "100%",
              aspectRatio: "2/1",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              overflow: "hidden",
              transition: "transform 240ms",
              transform: active === i ? "scale(1.04)" : "scale(1)"
            }}>
              <img src={emp.logo} alt={emp.full} style={{
                maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block"
              }} />
            </div>
            <div className="bold" style={{
              fontSize: 14, textTransform: "uppercase", letterSpacing: "0.02em",
              color: active === i ? "var(--brand)" : "var(--fg)",
              transition: "color 220ms"
            }}>{emp.name}</div>
          </div>
        ))}
      </div>

      {/* detail panel — rich content per empresa */}
      <div key={e.id} className="r-emp-panel" style={{
        marginTop: 1,
        background: "var(--bg-3)",
        border: "1px solid var(--line)",
        borderTop: "none",
        padding: "64px 56px",
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 64,
        alignItems: "stretch",
        animation: "fadeIn 380ms ease"
      }}>
        {/* LEFT: copy + services */}
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div className="mono" style={{ color: "var(--brand)", fontSize: 11, letterSpacing: "0.12em" }}>
            {e.code} · {e.full.toUpperCase()}
          </div>

          <div className="black" style={{
            fontSize: 56, lineHeight: 0.95, color: "var(--fg)",
            marginTop: 18, letterSpacing: "-0.02em"
          }}>
            {e.name}
          </div>

          <div className="black" style={{
            fontSize: 22, lineHeight: 1.15, color: "var(--brand)",
            marginTop: 14, textTransform: "uppercase", letterSpacing: "0.01em",
            maxWidth: 460
          }}>
            {e.tagline}
          </div>

          <div className="light" style={{
            fontSize: 15, color: "var(--fg-2)", lineHeight: 1.65,
            marginTop: 28, maxWidth: 520
          }}>
            {e.desc}
          </div>

          {/* services grid */}
          <div style={{ marginTop: 40 }}>
            <div className="mono" style={{
              color: "var(--fg-3)", fontSize: 11, letterSpacing: "0.14em",
              textTransform: "uppercase", marginBottom: 22,
              paddingBottom: 12, borderBottom: "1px solid var(--line)"
            }}>
              ✦ Servicios
            </div>
            <div className="r-services-list" style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: "18px 28px"
            }}>
              {e.services.map((s) => (
                <div key={s.label} style={{
                  display: "flex", alignItems: "center", gap: 14
                }}>
                  <div style={{
                    width: 40, height: 40, flexShrink: 0,
                    border: "1px solid var(--line-2)",
                    borderRadius: "50%",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "var(--fg-2)"
                  }}>
                    <Icon name={s.icon} size={18} />
                  </div>
                  <div style={{
                    fontSize: 13.5, color: "var(--fg)",
                    fontFamily: "Inter, sans-serif", fontWeight: 400
                  }}>
                    {s.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT: hero image */}
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "stretch" }}>
          <div style={{
            flex: 1,
            minHeight: 480,
            position: "relative",
            overflow: "hidden",
            background: "var(--bg-2)"
          }}>
            <img
              src={e.photo}
              alt={e.full}
              style={{
                position: "absolute", inset: 0,
                width: "100%", height: "100%",
                objectFit: "cover", display: "block"
              }}
            />
            {/* gradient overlay for label legibility */}
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%)",
              pointerEvents: "none"
            }} />
            <div style={{
              position: "absolute", top: 16, left: 16,
              fontFamily: "JetBrains Mono, monospace", fontSize: 10,
              letterSpacing: "0.12em", color: "rgba(255,255,255,0.85)",
              textTransform: "uppercase",
              padding: "6px 10px",
              border: "1px solid rgba(255,255,255,0.25)",
              background: "rgba(0,0,0,0.35)",
              backdropFilter: "blur(4px)"
            }}>
              {e.code} · {e.img}
            </div>
            <div style={{
              position: "absolute", bottom: 16, right: 16,
              fontSize: 28, color: "var(--brand)",
              width: 56, height: 56,
              border: "1px solid var(--brand)",
              borderRadius: "50%",
              display: "flex", alignItems: "center", justifyContent: "center",
              background: "rgba(0,0,0,0.55)",
              backdropFilter: "blur(4px)",
              cursor: "pointer"
            }}>→</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ SERVICIOS */
function Servicios() {
  const services = [
    { code: "S/01", name: "BODAS",         soft: "destination",     img: "playa · ceremonia · sailcloth" },
    { code: "S/02", name: "CORPORATIVO",   soft: "& lanzamientos",  img: "convention · brand reveal" },
    { code: "S/03", name: "ACTIVACIONES",  soft: "de marca",        img: "experience · roadshow" },
    { code: "S/04", name: "GALAS",         soft: "& aniversarios",  img: "gala · cena premiación" },
  ];

  return (
    <section id="servicios" className="r-section" style={{ background: "var(--bg-2)", padding: "140px 40px", borderTop: "1px solid var(--line)" }}>
      <SectionHead kicker="03 · Servicios"
        light="De la concepción"
        bold="A LA ÚLTIMA COPA SERVIDA."
        sub="Producimos cuatro categorías principales. Cada una se opera con un equipo dedicado, un timeline propio y un protocolo de proveedores aprobados." />

      <div className="r-services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, marginTop: 80, background: "var(--line)" }}>
        {services.map((s, i) => <ServiceCard key={s.code} {...s} index={i} />)}
      </div>
    </section>
  );
}

function ServiceCard({ code, name, soft, img }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--bg-3)" : "var(--bg-2)",
        padding: 40,
        cursor: "pointer",
        transition: "background 240ms"
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 32 }}>
        <span className="mono" style={{ color: "var(--fg-3)" }}>{code}</span>
        <span style={{ fontSize: 22, color: "var(--brand)", transform: hover ? "translate(4px,-4px)" : "none", transition: "transform 220ms" }}>↗</span>
      </div>
      <div className="ph" data-label={img} style={{ aspectRatio: "16/10", marginBottom: 32 }}/>
      <h3 style={{ margin: 0, lineHeight: 0.95 }}>
        <span className="black" style={{ fontSize: 56, display: "block", color: hover ? "var(--brand)" : "var(--fg)", transition: "color 220ms" }}>{name}</span>
        <span className="light" style={{ fontSize: 28, display: "block", color: "var(--fg-2)", marginTop: 4 }}>{soft}</span>
      </h3>
    </div>
  );
}

/* ============================================================ SECTION HEAD */
function SectionHead({ kicker, light, bold, sub }) {
  return (
    <div className="r-sec-head" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
      <div>
        <div className="mono" style={{ color: "var(--brand)", marginBottom: 20 }}>{kicker}</div>
        <h2 style={{ margin: 0, lineHeight: 0.92 }}>
          <span className="light" style={{ fontSize: "clamp(36px, 4.6vw, 80px)", color: "var(--fg-2)", display: "block" }}>{light}</span>
          <span className="black" style={{ fontSize: "clamp(44px, 6vw, 104px)", display: "block" }}>{bold}</span>
        </h2>
      </div>
      <div style={{ paddingTop: 40 }}>
        <p className="light" style={{ fontSize: 18, lineHeight: 1.6, margin: 0, maxWidth: 520, color: "var(--fg-2)" }}>{sub}</p>
      </div>
    </div>
  );
}

/* ============================================================ PORTAFOLIO */
const PROJECTS = [
  { id: 1, t: "Boda Maroma",            cat: "bodas",       y: 2025, loc: "Maroma Beach",       g: 240, label: "ceremonia · sunset · 240 pax" },
  { id: 2, t: "Lanzamiento EQS",        cat: "corporativo", y: 2025, loc: "Hotel Xcaret",       g: 600, label: "auto reveal · LED arch" },
  { id: 3, t: "Hacienda Tulum",         cat: "bodas",       y: 2024, loc: "Tulum",              g: 180, label: "hacienda · 180 pax · sailcloth" },
  { id: 4, t: "Cena ANCM",              cat: "gala",        y: 2024, loc: "Moon Palace",        g: 850, label: "gala · 850 pax · stage 24m" },
  { id: 5, t: "Don Julio Activación",   cat: "marca",       y: 2025, loc: "Mayakoba",           g: 320, label: "brand activation · pop-up bar" },
  { id: 6, t: "Riviera Maya",           cat: "bodas",       y: 2024, loc: "Riviera Maya",       g: 280, label: "garden · long table · 280 pax" },
];

function Portafolio() {
  const [filter, setFilter] = useState("todos");
  const [open, setOpen] = useState(null);
  const filtered = filter === "todos" ? PROJECTS : PROJECTS.filter(p => p.cat === filter);

  const cats = [
    ["todos", "Todos"],
    ["bodas", "Bodas"],
    ["corporativo", "Corporativo"],
    ["gala", "Galas"],
    ["marca", "Activaciones"],
  ];

  return (
    <section id="portafolio" className="r-section" style={{ background: "var(--bg)", padding: "140px 40px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 60, flexWrap: "wrap", gap: 24 }}>
        <div>
          <div className="mono" style={{ color: "var(--brand)", marginBottom: 20 }}>04 · Portafolio</div>
          <h2 style={{ margin: 0, lineHeight: 0.92 }}>
            <span className="light" style={{ fontSize: "clamp(36px, 4.6vw, 80px)", color: "var(--fg-2)", display: "block" }}>Trabajos</span>
            <span className="black" style={{ fontSize: "clamp(44px, 6vw, 104px)", display: "block" }}>RECIENTES.</span>
          </h2>
        </div>
        <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
          {cats.map(([k, l]) => (
            <button
              key={k}
              onClick={() => setFilter(k)}
              className="mono"
              style={{
                padding: "12px 18px",
                border: "1px solid var(--line)",
                background: filter === k ? "var(--brand)" : "transparent",
                color: filter === k ? "#000" : "var(--fg-2)",
                cursor: "pointer",
                fontSize: 11,
                borderRadius: 0,
                fontWeight: filter === k ? 700 : 400
              }}
            >{l}</button>
          ))}
        </div>
      </div>

      <div className="r-port-grid" style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 16 }}>
        {filtered.map((p, i) => {
          const span = [6, 6, 4, 8, 5, 7][i % 6];
          const aspect = [3/4, 4/3, 1, 16/9, 3/4, 4/3][i % 6];
          return (
            <div
              key={p.id}
              onClick={() => setOpen(p)}
              style={{ gridColumn: `span ${span}`, cursor: "pointer", display: "flex", flexDirection: "column", gap: 16 }}
            >
              <div className="ph" data-label={p.label} style={{ aspectRatio: aspect, transition: "transform 400ms" }}
                onMouseEnter={(e) => e.currentTarget.style.transform = "scale(0.99)"}
                onMouseLeave={(e) => e.currentTarget.style.transform = "none"}
              />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div>
                  <div className="bold" style={{ fontSize: 22, lineHeight: 1, textTransform: "uppercase" }}>{p.t}</div>
                  <div className="mono" style={{ color: "var(--fg-3)", marginTop: 8 }}>{p.loc} · {p.g} pax</div>
                </div>
                <span className="mono" style={{ color: "var(--fg-3)" }}>{p.y}</span>
              </div>
            </div>
          );
        })}
      </div>

      {open && <Lightbox project={open} onClose={() => setOpen(null)} />}
    </section>
  );
}

function Lightbox({ project, onClose }) {
  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.96)",
      zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center",
      padding: 60, cursor: "zoom-out", backdropFilter: "blur(20px)"
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        maxWidth: 1100, width: "100%", background: "var(--bg-2)", padding: 40, cursor: "default", border: "1px solid var(--line)"
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
          <span className="mono" style={{ color: "var(--brand)" }}>Proyecto · {project.y}</span>
          <button onClick={onClose} className="mono" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--fg)", fontSize: 12 }}>✕ cerrar</button>
        </div>
        <div className="ph" data-label={project.label} style={{ aspectRatio: "16/9", marginBottom: 28 }}/>
        <h3 className="black" style={{ fontSize: 64, margin: 0, lineHeight: 0.95, textTransform: "uppercase" }}>{project.t}</h3>
        <div className="r-modal-stats" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
          <Stat label="Locación" value={project.loc} />
          <Stat label="Invitados" value={project.g} />
          <Stat label="Categoría" value={project.cat} />
          <Stat label="Año" value={project.y} />
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div>
      <div className="mono" style={{ color: "var(--fg-3)", marginBottom: 8 }}>{label}</div>
      <div className="bold" style={{ fontSize: 22, textTransform: "capitalize" }}>{value}</div>
    </div>
  );
}

/* ============================================================ PROCESO */
function Proceso() {
  const [active, setActive] = useState(0);
  const steps = [
    { n: "01", t: "BRIEFING",   d: "Sesión de 90 minutos para entender visión, presupuesto y restricciones logísticas. Sin costo." },
    { n: "02", t: "CONCEPTO",   d: "Dirección creativa con moodboards, paleta, dirección floral y propuesta espacial inicial." },
    { n: "03", t: "PRODUCCIÓN", d: "Logística, permisos, contratos de proveedores, timeline maestro y simulacros 3D del montaje." },
    { n: "04", t: "EJECUCIÓN",  d: "Equipo en sitio 48h antes. Coordinador único, walkie-talkies, plan B de clima y contingencias." },
    { n: "05", t: "CIERRE",     d: "Desmontaje silencioso, entrega de fotos y video master, reunión de retroalimentación." },
  ];

  return (
    <section id="proceso" className="r-section" style={{ background: "var(--bg-2)", padding: "140px 40px", borderTop: "1px solid var(--line)" }}>
      <SectionHead kicker="05 · Proceso"
        light="Cinco fases."
        bold="UN CALENDARIO."
        sub="Cada evento sigue el mismo protocolo, ajustado a su escala. Recibes un timeline compartido y revisiones quincenales hasta el día del montaje." />

      <div className="r-proceso" style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
        <div>
          {steps.map((s, i) => (
            <div
              key={s.n}
              onMouseEnter={() => setActive(i)}
              style={{
                padding: "20px 0",
                borderBottom: "1px solid var(--line)",
                cursor: "pointer",
                display: "flex",
                gap: 24,
                alignItems: "center",
                opacity: active === i ? 1 : 0.35,
                transition: "opacity 200ms"
              }}
            >
              <span className="mono" style={{ minWidth: 32, color: "var(--brand)" }}>{s.n}</span>
              <span className="black" style={{ fontSize: 48, lineHeight: 1 }}>{s.t}</span>
            </div>
          ))}
        </div>
        <div style={{ position: "sticky", top: 120, alignSelf: "start" }}>
          <div className="ph" data-label={`fase ${steps[active].n} · ${steps[active].t.toLowerCase()}`} style={{ aspectRatio: "4/3", marginBottom: 28 }}/>
          <p className="light" style={{ fontSize: 22, lineHeight: 1.5, color: "var(--fg)", margin: 0 }}>
            {steps[active].d}
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ TESTIMONIOS */
function Testimonios() {
  const items = [
    { q: "Coordinaron una boda de 240 personas en una playa privada sin un solo detalle fuera de lugar. El piso sobre la arena fue invisible — y eso es lo que queríamos.", a: "Mariana & Diego", r: "Boda · Maroma, 2025" },
    { q: "Producción impecable para el lanzamiento regional. Llegaron con alternativas a problemas que no sabíamos que íbamos a tener.", a: "Andrea Espinoza", r: "Marketing · Mercedes-Benz MX" },
    { q: "Pasamos de tres proveedores a uno. La diferencia en tiempo, costo y calidad es absurda.", a: "Comité ANCM", r: "Cena anual de premiación 2024" },
  ];
  return (
    <section className="r-section r-testi-section" style={{ background: "var(--bg)", padding: "120px 40px", borderTop: "1px solid var(--line)" }}>
      <div className="r-testi" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 60 }}>
        {items.map((t, i) => (
          <figure key={i} style={{ margin: 0 }}>
            <div className="black" style={{ fontSize: 80, lineHeight: 0.6, color: "var(--brand)", marginBottom: 20 }}>“</div>
            <blockquote className="light" style={{ fontSize: 22, lineHeight: 1.45, margin: 0, color: "var(--fg)" }}>
              {t.q}
            </blockquote>
            <figcaption style={{ marginTop: 28, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
              <div className="bold" style={{ fontSize: 14, textTransform: "uppercase", letterSpacing: "0.02em" }}>{t.a}</div>
              <div className="mono" style={{ color: "var(--fg-3)", marginTop: 6 }}>{t.r}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

/* ============================================================ CONTACTO */
function Contacto() {
  const [form, setForm] = useState({ nombre: "", email: "", tipo: "Boda", invitados: "", fecha: "", msg: "" });
  const [sent, setSent] = useState(false);
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); };

  if (sent) {
    return (
      <section id="contacto" style={{ background: "var(--bg)", padding: "180px 40px", textAlign: "center", borderTop: "1px solid var(--line)" }}>
        <div className="mono" style={{ color: "var(--brand)", marginBottom: 24 }}>Solicitud recibida · #SLN-{Math.floor(Math.random()*9000+1000)}</div>
        <h2 style={{ margin: 0, lineHeight: 0.92 }}>
          <span className="light" style={{ fontSize: "clamp(40px, 5vw, 84px)", color: "var(--fg-2)", display: "block" }}>Gracias, {form.nombre.split(" ")[0] || "te"}</span>
          <span className="black" style={{ fontSize: "clamp(56px, 8vw, 132px)", display: "block" }}>ESCRIBIMOS EN 24H.</span>
        </h2>
        <button onClick={() => { setSent(false); setForm({ nombre: "", email: "", tipo: "Boda", invitados: "", fecha: "", msg: "" }); }}
          className="mono" style={{ marginTop: 60, background: "transparent", border: "1px solid var(--line)", color: "var(--fg)", padding: "16px 28px", cursor: "pointer", borderRadius: 0 }}>
          ← Enviar otra solicitud
        </button>
      </section>
    );
  }

  return (
    <section id="contacto" className="r-section" style={{ background: "var(--bg)", padding: "140px 40px", borderTop: "1px solid var(--line)" }}>
      <div className="r-contacto" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100 }}>
        <div>
          <div className="mono" style={{ color: "var(--brand)", marginBottom: 20 }}>06 · Contacto</div>
          <h2 style={{ margin: 0, lineHeight: 0.92 }}>
            <span className="light" style={{ fontSize: "clamp(40px, 5vw, 84px)", color: "var(--fg-2)", display: "block" }}>Cuéntanos</span>
            <span className="black" style={{ fontSize: "clamp(56px, 8vw, 132px)", display: "block" }}>LA <span style={{ color: "var(--brand)" }}>VISIÓN.</span></span>
          </h2>
          <p className="light" style={{ marginTop: 32, fontSize: 17, lineHeight: 1.6, color: "var(--fg-2)", maxWidth: 460 }}>
            Respondemos cada solicitud en menos de 24 horas con un calendario de disponibilidad y rangos de inversión por categoría.
          </p>

          <div style={{ marginTop: 80, display: "grid", gap: 32 }}>
            <ContactBlock label="Oficina" lines={["Calle Monte Líbano 4, MZA. 61, Lote 61, Local 6", "SM 301, Cancún, Q. Roo · CP 77560"]} />
            <ContactBlock label="Email" lines={["ventas@gruposolen.com"]} bold />
            <ContactBlock label="Whatsapp" lines={["+52 998 000 0000 · 9–19h CST"]} bold />
            <ContactBlock label="Síguenos" lines={["instagram · facebook · youtube"]} />
          </div>
        </div>

        <form onSubmit={submit} style={{ display: "grid", gap: 0, alignSelf: "start", marginTop: 40 }}>
          <Field label="Nombre completo" v={form.nombre} on={update("nombre")} required />
          <Field label="Email" type="email" v={form.email} on={update("email")} required />
          <Select label="Tipo de evento" v={form.tipo} on={update("tipo")} options={["Boda","Corporativo","Gala / Premiación","Activación de marca","Otro"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
            <Field label="# invitados" v={form.invitados} on={update("invitados")} />
            <Field label="Fecha tentativa" v={form.fecha} on={update("fecha")} placeholder="Mes / Año" />
          </div>
          <Field label="Cuéntanos sobre el evento" v={form.msg} on={update("msg")} multiline />

          <button type="submit" className="black" style={{
            marginTop: 32, padding: "22px",
            background: "var(--brand)", border: "none", color: "#000",
            fontSize: 22, fontFamily: "Inter, sans-serif",
            cursor: "pointer", borderRadius: 0, letterSpacing: "-0.02em", textTransform: "uppercase"
          }}>
            Enviar solicitud →
          </button>
        </form>
      </div>
    </section>
  );
}

function ContactBlock({ label, lines, bold }) {
  return (
    <div>
      <div className="mono" style={{ color: "var(--fg-3)", marginBottom: 8 }}>{label}</div>
      {lines.map((l, i) => <div key={i} className={bold ? "bold" : "light"} style={{ fontSize: bold ? 20 : 15, lineHeight: 1.5, color: "var(--fg)" }}>{l}</div>)}
    </div>
  );
}

function Field({ label, v, on, type = "text", required, multiline, placeholder }) {
  const [focus, setFocus] = useState(false);
  const sty = {
    width: "100%", background: "transparent", border: "none",
    borderBottom: `1px solid ${focus ? "var(--brand)" : "var(--line)"}`,
    color: "var(--fg)", fontSize: 17, padding: "16px 0", outline: "none",
    fontFamily: "inherit", transition: "border-color 200ms", borderRadius: 0
  };
  return (
    <label style={{ display: "block", paddingTop: 24, paddingBottom: 8 }}>
      <div className="mono" style={{ color: focus ? "var(--brand)" : "var(--fg-3)", transition: "all 200ms" }}>{label}{required && " *"}</div>
      {multiline
        ? <textarea value={v} onChange={on} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} rows="3" placeholder={placeholder} style={{ ...sty, resize: "vertical" }}/>
        : <input value={v} onChange={on} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} type={type} required={required} placeholder={placeholder} style={sty}/>}
    </label>
  );
}

function Select({ label, v, on, options }) {
  return (
    <label style={{ display: "block", paddingTop: 24, paddingBottom: 8 }}>
      <div className="mono" style={{ color: "var(--fg-3)" }}>{label}</div>
      <select value={v} onChange={on} style={{
        width: "100%", background: "transparent", border: "none",
        borderBottom: "1px solid var(--line)",
        color: "var(--fg)", fontSize: 17, padding: "16px 0", outline: "none",
        fontFamily: "inherit", borderRadius: 0, appearance: "none",
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234A90D9' fill='none'/></svg>")`,
        backgroundRepeat: "no-repeat", backgroundPosition: "right 4px center"
      }}>
        {options.map(o => <option key={o} value={o} style={{ background: "var(--bg-2)", color: "var(--fg)" }}>{o}</option>)}
      </select>
    </label>
  );
}

/* ============================================================ FOOTER */
function Footer() {
  return (
    <footer style={{ background: "var(--bg)", color: "var(--fg-3)", padding: "80px 40px 40px", borderTop: "1px solid var(--line)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", marginBottom: 60 }}>
        <h3 style={{ margin: 0 }}>
          <span className="light" style={{ fontSize: 36, color: "var(--fg-2)", display: "block" }}>Producimos donde otros</span>
          <span className="black" style={{ fontSize: 56, color: "var(--fg)", display: "block", lineHeight: 0.95 }}>NO LLEGAN.</span>
        </h3>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 24, alignItems: "center", paddingTop: 32, borderTop: "1px solid var(--line)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Logo size={26} />
          <span className="black" style={{ fontSize: 18, color: "var(--fg)" }}>SOLEN</span>
        </div>
        <div className="mono">© {new Date().getFullYear()} Grupo Solen · Cancún, Q.Roo · Todos los derechos reservados</div>
        <div className="mono">v2.0 · Black edition</div>
      </div>
    </footer>
  );
}

/* ============================================================ APP */
function App() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Nav scrolled={scrolled} />
      <Hero />
      <Empresas />
      <Servicios />
      <Portafolio />
      <Proceso />
      <Testimonios />
      <Contacto />
      <Footer />
    </>
  );
}

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