/* global React, ReactDOM, ElementaPanels, ContactForm, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakToggle, TweakSelect, useT, useLang */
const { useState, useEffect, useCallback, useRef } = React;

// ───────────────────────────────────────────────────────────────────
// Tweak defaults — host rewrites the JSON block on persist
const ELEMENTA_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#b3f0d8", "#cfe1ea", "#9ba8f0"],
  "showGrain": true,
  "logoMotion": "none"
} /*EDITMODE-END*/;

// Palette options offered in Tweaks (curated, not free-pick)
const PALETTES = [
["#b3f0d8", "#cfe1ea", "#9ba8f0"], // mint→lavender (default brand)
["#f5d77a", "#f0a07a", "#e57aa4"], // amber→rose
["#a6e9ff", "#88b8ff", "#7d6dff"], // ice→indigo
["#d5ffb3", "#80e0a0", "#46a08e"], // chartreuse→teal
["#ffffff", "#cfcfd5", "#7a7a85"] // mono / steel
];

// ───────────────────────────────────────────────────────────────────
// Nav config defined inline inside App() so they react to the language change.

// ───────────────────────────────────────────────────────────────────
function App() {
  const [tweaks, setTweak] = useTweaks(ELEMENTA_DEFAULTS);
  const t = useT();
  const [lang, switchLang] = useLang();
  const NAV_LEFT = t.nav.left;
  const NAV_RIGHT = t.nav.right;
  const [openPanel, setOpenPanel] = useState(null);
  const [presupuestoOpen, setPresupuestoOpen] = useState(false);
  const [time, setTime] = useState(() => new Date());
  const [mounted, setMounted] = useState(false);
  const [compact, setCompact] = useState(
    typeof window !== "undefined" ? window.innerWidth < 1180 : false
  );
  const [mobile, setMobile] = useState(
    typeof window !== "undefined" ? window.innerWidth < 640 : false
  );
  const [menuOpen, setMenuOpen] = useState(null); // "left" | "right" | null

  // Watch viewport for compact mode
  useEffect(() => {
    const onResize = () => {
      setCompact(window.innerWidth < 1180);
      setMobile(window.innerWidth < 640);
    };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // Close hamburger menus when leaving compact
  useEffect(() => {
    if (!compact) setMenuOpen(null);
  }, [compact]);

  // Apply palette to CSS vars
  useEffect(() => {
    const p = tweaks.palette || PALETTES[0];
    const root = document.documentElement;
    root.style.setProperty("--mint", p[0]);
    root.style.setProperty("--lav", p[2]);
    root.style.setProperty(
      "--grad",
      `linear-gradient(110deg, ${p[0]} 0%, ${p[1]} 45%, ${p[2]} 100%)`
    );
  }, [tweaks.palette]);

  // Toggle grain
  useEffect(() => {
    document.body.style.setProperty("--grain-opacity", tweaks.showGrain ? "0.5" : "0");
    const styleId = "__grain-override";
    let style = document.getElementById(styleId);
    if (!style) {
      style = document.createElement("style");
      style.id = styleId;
      document.head.appendChild(style);
    }
    style.textContent = `body::after { opacity: ${tweaks.showGrain ? 0.5 : 0} !important; }`;
  }, [tweaks.showGrain]);

  // Tick clock for contact strip
  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 30000);
    return () => clearInterval(id);
  }, []);

  // Mount animation
  useEffect(() => {
    // Reveal #root once React has actually committed — kills the FOUC of
    // the empty container appearing before the staggered entrance runs.
    document.body.classList.add("elm-booted");
    const t = setTimeout(() => setMounted(true), 40);
    return () => clearTimeout(t);
  }, []);

  // Toggle a body class while any panel/form is open so the background
  // radial bloom + grain can dim via CSS (avoids the abrupt "flash").
  useEffect(() => {
    const cls = "elm-panel-open";
    if (openPanel || presupuestoOpen) document.body.classList.add(cls);
    else document.body.classList.remove(cls);
    return () => document.body.classList.remove(cls);
  }, [openPanel, presupuestoOpen]);

  // ESC to close
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") {
        if (presupuestoOpen) setPresupuestoOpen(false);else
        if (openPanel) setOpenPanel(null);else
        if (menuOpen) setMenuOpen(null);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [openPanel, presupuestoOpen, menuOpen]);

  const openSection = useCallback((id) => {
    if (id === "presupuesto") {setPresupuestoOpen(true);return;}
    if (id === "contacto") {setPresupuestoOpen(true);setOpenPanel(null);return;}
    setOpenPanel(id);
  }, []);

  const anyOpen = openPanel || presupuestoOpen;

  return (
    <div className="elm-shell" style={appStyle.shell}>
      <CenterStage
        mounted={mounted}
        dimmed={!!anyOpen}
        motion={tweaks.logoMotion}
        onCTAClick={() => setPresupuestoOpen(true)}
        time={time}
        t={t} />
      

      {/* Top-left nav */}
      <CornerNav
        items={NAV_LEFT}
        side="left"
        mounted={mounted}
        active={openPanel}
        dimmed={!!anyOpen}
        onSelect={(id) => { openSection(id); setMenuOpen(null); }}
        compact={compact}
        mobile={mobile}
        menuOpen={menuOpen === "left"}
        onToggleMenu={() => setMenuOpen(menuOpen === "left" ? null : "left")}
        t={t} />
      

      {/* Top-right nav */}
      <CornerNav
        items={NAV_RIGHT}
        side="right"
        mounted={mounted}
        active={openPanel}
        dimmed={!!anyOpen}
        onSelect={(id) => { openSection(id); setMenuOpen(null); }}
        cta={{ label: t.common.requestQuote, onClick: () => { setPresupuestoOpen(true); setMenuOpen(null); } }}
        compact={compact}
        mobile={mobile}
        menuOpen={menuOpen === "right"}
        onToggleMenu={() => setMenuOpen(menuOpen === "right" ? null : "right")}
        t={t} />
      

      {/* Bottom status strip */}
      <BottomStrip mounted={mounted} dimmed={!!anyOpen} time={time} mobile={mobile} t={t} />

      {/* Language toggle */}
      <LangToggle mounted={mounted} dimmed={!!anyOpen} mobile={mobile} lang={lang} onSwitch={switchLang} />

      {/* Brand badge top-center when a panel is open (extra fallback nav) */}
      <BrandBadge visible={!!anyOpen} onClick={() => {setOpenPanel(null);setPresupuestoOpen(false);}} />

      {/* Section panels */}
      <ElementaPanels
        openId={openPanel}
        onClose={() => setOpenPanel(null)}
        onOpenPresupuesto={() => {setPresupuestoOpen(true);setOpenPanel(null);}}
        t={t} />
      

      {/* Presupuesto / contacto form */}
      <ContactForm open={presupuestoOpen} onClose={() => setPresupuestoOpen(false)} t={t} />

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta de marca">
          <TweakColor
            label="Gradiente"
            value={tweaks.palette}
            options={PALETTES}
            onChange={(v) => setTweak("palette", v)} />
          
        </TweakSection>
        <TweakSection label="Visual">
          <TweakToggle
            label="Textura grain"
            value={tweaks.showGrain}
            onChange={(v) => setTweak("showGrain", v)} />
          
          <TweakSelect
            label="Movimiento del logo"
            value={tweaks.logoMotion}
            options={["none", "drift", "breathe", "pulse"]}
            onChange={(v) => setTweak("logoMotion", v)} />
          
        </TweakSection>
      </TweaksPanel>
    </div>);

}

// ───────────────────────────────────────────────────────────────────
function CenterStage({ mounted, dimmed, motion, onCTAClick, time, t }) {
  const motionClass = motion && motion !== "none" ? `motion-${motion}` : "";
  // Apply rise on every render so the very first paint already starts at
  // opacity:0 — otherwise the logo flashes for one frame before the
  // animation kicks in.
  const rise = "elm-rise";
  return (
    <div
      className="elm-center"
      style={{
        ...appStyle.center,
        opacity: dimmed ? 0.22 : 1,
        transform: "translate(-50%, -50%)",
        filter: dimmed ? "blur(3px)" : "blur(0)",
        transition: "opacity 360ms cubic-bezier(.2,.7,.25,1), filter 360ms cubic-bezier(.2,.7,.25,1)",
        pointerEvents: dimmed ? "none" : "auto"
      }}>

      <div className={`elm-eyebrow ${rise}`} style={{ ...appStyle.eyebrow, "--d": "120ms" }}>
        <span style={appStyle.eyebrowDot} />
        {t.common.brandTag}
      </div>

      <h1 className={`grad-text elm-logo ${motionClass} ${rise}`} style={{ ...appStyle.logo, "--d": "260ms" }}>ELEMENTA</h1>

      <div className={`elm-subtitle ${rise}`} style={{ ...appStyle.subtitle, "--d": "440ms" }}>{t.brand.tagline}</div>

      <p className={`elm-desc ${rise}`} style={{ ...appStyle.description, "--d": "600ms" }}>
        {t.brand.descIntro}{" "}
        <span style={{ color: "var(--text)" }}>{t.brand.descVerbs[0]}</span>,{" "}
        <span style={{ color: "var(--text)" }}>{t.brand.descVerbs[1]}</span>,{" "}
        <span style={{ color: "var(--text)" }}>{t.brand.descVerbs[2]}</span> {t.brand.descConnector}{" "}
        <span style={{ color: "var(--text)" }}>{t.brand.descLast}</span> {t.brand.descTail}
      </p>

      <div className={`elm-cta-row ${rise}`} style={{ ...appStyle.ctaRow, "--d": "760ms" }}>
        <button className="elm-cta-primary" style={appStyle.btnPrimary} onClick={onCTAClick}
        onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-1px)"}
        onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>

          {t.common.requestQuote}
          <span style={{ marginLeft: 10, fontFamily: "var(--mono)" }}>→</span>
        </button>
        <a href="mailto:elementa.uy@gmail.com" style={appStyle.btnGhost}>
          elementa.uy@gmail.com
        </a>
      </div>

      {/* Motion keyframes */}
      <style>{`
        @keyframes drift {
          0%,100% { transform: translateY(0px); }
          50% { transform: translateY(-4px); }
        }
        @keyframes breathe {
          0%,100% { letter-spacing: 0px; }
          50% { letter-spacing: 1.5px; }
        }
        @keyframes pulse {
          0%,100% { filter: drop-shadow(0 0 0px rgba(179,240,216,0)); }
          50% { filter: drop-shadow(0 0 28px rgba(179,240,216,0.18)); }
        }
        .motion-drift   { animation: drift 6s ease-in-out infinite; }
        .motion-breathe { animation: breathe 7s ease-in-out infinite; }
        .motion-pulse   { animation: pulse 5s ease-in-out infinite; }
      `}</style>
    </div>);

}

// ───────────────────────────────────────────────────────────────────
function CornerNav({ items, side, mounted, active, dimmed, onSelect, cta, compact, mobile, menuOpen, onToggleMenu, t }) {
  const align = side === "left" ? "flex-start" : "flex-end";
  const labelKey = side === "left" ? "menuConocer" : "menuTrabajar";
  const bracketLabel = side === "left" ? t.nav.conocerLabel : t.nav.trabajarLabel;

  // Compact: hamburger button + drop-down sheet
  if (compact) {
    return (
      <div style={{
        position: "fixed",
        top: mobile ? 16 : 24,
        [side]: mobile ? 16 : 24,
        zIndex: 20,
        opacity: mounted ? dimmed ? 0.25 : 1 : 0,
        transform: mounted ? "translateY(0)" : "translateY(-12px)",
        transition: "opacity 780ms cubic-bezier(.2,.7,.25,1) 880ms, transform 780ms cubic-bezier(.2,.7,.25,1) 880ms",
        pointerEvents: dimmed ? "none" : "auto",
      }}>
        <HamburgerButton
          open={menuOpen}
          onClick={onToggleMenu}
          label={t.common[labelKey]}
          side={side}
          count={items.length + (cta ? 1 : 0)}
          mobile={mobile} />
        <HamburgerSheet
          open={menuOpen}
          items={items}
          side={side}
          active={active}
          onSelect={onSelect}
          cta={cta}
          mobile={mobile}
          bracketLabel={bracketLabel} />
      </div>
    );
  }

  // Full corner nav
  return (
    <nav
      style={{
        position: "fixed",
        top: 52,
        [side]: 56,
        display: "flex",
        flexDirection: "column",
        gap: 8,
        alignItems: align,
        opacity: mounted ? dimmed ? 0.25 : 1 : 0,
        transform: mounted ? "translateY(0)" : "translateY(-12px)",
        transition: `opacity 780ms cubic-bezier(.2,.7,.25,1) ${side === "left" ? 920 : 1040}ms, transform 780ms cubic-bezier(.2,.7,.25,1) ${side === "left" ? 920 : 1040}ms`,
        pointerEvents: dimmed ? "none" : "auto",
        zIndex: 10
      }}>
      <div style={{ ...appStyle.navLabel, alignSelf: align }}>
        {bracketLabel}
      </div>
      {items.map((it) =>
      <NavLink
        key={it.id}
        item={it}
        side={side}
        active={active === it.id}
        onClick={() => onSelect(it.id)} />
      )}
      {cta &&
      <button
        onClick={cta.onClick}
        style={{
          ...appStyle.navCta,
          alignSelf: align
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = "var(--mint)";
          e.currentTarget.style.color = "#0a0a0a";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = "transparent";
          e.currentTarget.style.color = "var(--mint)";
        }}>
          {cta.label} <span style={{ marginLeft: 8 }}>→</span>
        </button>
      }
    </nav>);
}

// ───────────────────────────────────────────────────────────────────
function HamburgerButton({ open, onClick, label, side, count, mobile }) {
  const [hover, setHover] = useState(false);
  const accent = hover || open;
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      aria-label={`Menú ${label}`}
      aria-expanded={open}
      style={{
        all: "unset",
        cursor: "pointer",
        display: "flex",
        flexDirection: side === "right" ? "row-reverse" : "row",
        alignItems: "center",
        gap: mobile ? 10 : 14,
        padding: mobile ? "9px 12px" : "11px 16px 11px 14px",
        borderRadius: 12,
        background: accent
          ? "linear-gradient(160deg, rgba(179,240,216,0.06), rgba(13,13,15,0.85))"
          : "rgba(13,13,15,0.75)",
        backdropFilter: "blur(14px)",
        WebkitBackdropFilter: "blur(14px)",
        border: `1px solid ${accent ? "rgba(179,240,216,0.35)" : "var(--line-2)"}`,
        transition: "background 260ms ease, border-color 260ms ease, box-shadow 260ms ease",
        boxShadow: open
          ? "0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(179,240,216,0.08)"
          : "none",
        position: "relative",
      }}
    >
      {/* Count badge — hidden on mobile */}
      {!mobile && (
        <>
          <span style={{
            fontFamily: "var(--mono)",
            fontSize: 11,
            fontWeight: 700,
            color: accent ? "var(--mint)" : "var(--text-3)",
            letterSpacing: 0.5,
            transition: "color 260ms ease",
            minWidth: 18,
            textAlign: "center",
          }}>
            {String(count).padStart(2, "0")}
          </span>
          <span style={{
            width: 1,
            height: 14,
            background: accent ? "rgba(179,240,216,0.25)" : "var(--line-2)",
            transition: "background 260ms ease",
          }} />
        </>
      )}

      {/* Bracketed label */}
      <span style={{
        fontFamily: "var(--mono)",
        fontSize: mobile ? 11 : 12,
        fontWeight: 700,
        letterSpacing: mobile ? 1.2 : 1.6,
        textTransform: "uppercase",
        color: "var(--text)",
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
      }}>
        <span style={{
          color: accent ? "var(--mint)" : "var(--text-3)",
          transition: "color 260ms",
        }}>[</span>
        {label}
        <span style={{
          color: accent ? "var(--mint)" : "var(--text-3)",
          transition: "color 260ms",
        }}>]</span>
      </span>

      {/* Plus that rotates to × when open */}
      <span style={{
        fontFamily: "var(--mono)",
        fontSize: mobile ? 16 : 18,
        fontWeight: 400,
        lineHeight: 1,
        color: accent ? "var(--mint)" : "var(--text-2)",
        display: "inline-block",
        transform: `rotate(${open ? 45 : 0}deg)`,
        transition: "transform 320ms cubic-bezier(.2,.7,.2,1), color 260ms ease",
        marginTop: -1,
      }}>+</span>
    </button>
  );
}

// ───────────────────────────────────────────────────────────────────
function HamburgerSheet({ open, items, side, active, onSelect, cta, mobile, bracketLabel }) {
  return (
    <div
      style={{
        position: "absolute",
        top: "calc(100% + 12px)",
        [side]: 0,
        minWidth: mobile ? "calc(100vw - 32px)" : 280,
        maxWidth: mobile ? "calc(100vw - 32px)" : 360,
        background: "linear-gradient(180deg, rgba(15,15,17,0.94), rgba(10,10,12,0.94))",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        border: "1px solid var(--line-2)",
        borderRadius: 16,
        padding: "14px 12px 12px",
        boxShadow: "0 24px 56px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02)",
        opacity: open ? 1 : 0,
        transform: open ? "translateY(0)" : "translateY(-8px)",
        pointerEvents: open ? "auto" : "none",
        transition: "opacity 220ms ease, transform 320ms cubic-bezier(.2,.7,.2,1)",
        display: "flex",
        flexDirection: "column",
        gap: 2,
      }}
    >
      {/* Top gradient hairline */}
      <span style={{
        position: "absolute",
        top: 0,
        left: 14,
        right: 14,
        height: 1,
        background: "var(--grad)",
        opacity: 0.5,
      }} />

      <div style={{
        fontFamily: "var(--mono)",
        fontSize: 10,
        letterSpacing: 1.8,
        textTransform: "uppercase",
        color: "var(--text-3)",
        padding: "6px 14px 10px",
        display: "flex",
        alignItems: "center",
        gap: 8,
      }}>
        {bracketLabel}
      </div>

      {items.map((it) => {
        const isActive = active === it.id;
        return (
          <button
            key={it.id}
            onClick={() => onSelect(it.id)}
            style={{
              all: "unset",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: 16,
              padding: "12px 14px",
              borderRadius: 10,
              background: isActive ? "rgba(179,240,216,0.07)" : "transparent",
              transition: "background 160ms ease",
            }}
            onMouseEnter={(e) => {
              if (!isActive) e.currentTarget.style.background = "rgba(255,255,255,0.035)";
              e.currentTarget.querySelector("[data-num]").style.color = "var(--mint)";
              e.currentTarget.querySelector("[data-label]").style.color = "var(--text)";
            }}
            onMouseLeave={(e) => {
              if (!isActive) e.currentTarget.style.background = "transparent";
              e.currentTarget.querySelector("[data-num]").style.color = isActive ? "var(--mint)" : "var(--text-3)";
              e.currentTarget.querySelector("[data-label]").style.color = isActive ? "var(--mint)" : "var(--text)";
            }}
          >
            <span data-num style={{
              fontFamily: "var(--mono)",
              fontSize: 12,
              color: isActive ? "var(--mint)" : "var(--text-3)",
              minWidth: 22,
              fontWeight: 700,
              transition: "color 200ms",
            }}>{it.num}</span>
            <span data-label style={{
              fontSize: 15,
              fontWeight: 500,
              color: isActive ? "var(--mint)" : "var(--text)",
              transition: "color 200ms",
              flex: 1,
            }}>{it.label}</span>
            <span style={{
              fontFamily: "var(--mono)",
              color: "var(--text-3)",
              fontSize: 13,
            }}>→</span>
          </button>
        );
      })}
      {cta && (
        <>
          <div style={{ height: 1, background: "var(--line)", margin: "8px 14px 6px" }} />
          <button
            onClick={cta.onClick}
            onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}
            style={{
              all: "unset",
              cursor: "pointer",
              margin: "2px 4px 2px",
              padding: "12px 16px",
              borderRadius: 10,
              background: "var(--grad)",
              color: "#0a0a0a",
              fontWeight: 600,
              fontSize: 13.5,
              textAlign: "center",
              transition: "transform 200ms ease",
              boxShadow: "0 8px 20px rgba(179,240,216,0.15)",
            }}
          >
            {cta.label} →
          </button>
        </>
      )}
    </div>
  );
}

function NavLink({ item, side, active, onClick }) {
  const [hover, setHover] = useState(false);
  const dir = side === "left" ? "row" : "row-reverse";
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        all: "unset",
        cursor: "pointer",
        display: "flex",
        flexDirection: dir,
        alignItems: "baseline",
        gap: 18,
        padding: "8px 0",
        color: active || hover ? "var(--text)" : "var(--text-2)",
        transition: "color 220ms ease"
      }}>
      
      <span
        style={{
          fontFamily: "var(--mono)",
          fontSize: 13,
          fontWeight: 700,
          color: active || hover ? "var(--mint)" : "var(--text-3)",
          transition: "color 220ms ease",
          minWidth: 32,
          textAlign: side === "left" ? "left" : "right"
        }}>
        
        {item.num}
      </span>
      <span style={{
        fontSize: 22,
        fontWeight: 500,
        letterSpacing: -0.2,
        position: "relative",
        lineHeight: 1.2
      }}>
        {item.label}
        <span style={{
          position: "absolute",
          left: 0, right: 0, bottom: -2,
          height: 1,
          background: "var(--grad)",
          transform: `scaleX(${hover || active ? 1 : 0})`,
          transformOrigin: side === "left" ? "left center" : "right center",
          transition: "transform 320ms cubic-bezier(.2,.7,.2,1)"
        }} />
      </span>
    </button>);

}

// ───────────────────────────────────────────────────────────────────
function BottomStrip({ mounted, dimmed, time, mobile, t }) {
  return (
    <footer
      style={{
        position: "fixed",
        bottom: mobile ? 18 : 28,
        left: "50%",
        transform: `translateX(-50%) translateY(${mounted ? 0 : 8}px)`,
        opacity: mounted ? dimmed ? 0.2 : 1 : 0,
        transition: "opacity 780ms cubic-bezier(.2,.7,.25,1) 1100ms, transform 780ms cubic-bezier(.2,.7,.25,1) 1100ms",
        display: "flex",
        alignItems: "center",
        gap: mobile ? 14 : 22,
        fontFamily: "var(--mono)",
        fontSize: mobile ? 10 : 11,
        color: "var(--text-3)",
        letterSpacing: 0.4,
        zIndex: 5,
        whiteSpace: "nowrap",
        maxWidth: "calc(100vw - 32px)",
        overflow: "hidden"
      }}>
      
      <span><a href="mailto:elementa.uy@gmail.com" style={appStyle.footLink}>elementa.uy@gmail.com</a></span>
      <span style={appStyle.dot} />
      <span><a href="https://wa.me/59897574450" style={appStyle.footLink}>{t.common.whatsapp}</a></span>
      {!mobile && <>
        <span style={appStyle.dot} />
        <span style={{ color: "var(--mint)" }}>● {t.common.online}</span>
      </>}
    </footer>);

}

// ───────────────────────────────────────────────────────────────────
function LangToggle({ mounted, dimmed, mobile, lang, onSwitch }) {
  return (
    <div
      style={{
        position: "fixed",
        top: mobile ? 16 : 24,
        left: "50%",
        transform: `translateX(-50%) translateY(${mounted ? 0 : -8}px)`,
        opacity: mounted ? dimmed ? 0 : 1 : 0,
        transition: "opacity 780ms cubic-bezier(.2,.7,.25,1) 980ms, transform 780ms cubic-bezier(.2,.7,.25,1) 980ms",
        pointerEvents: dimmed ? "none" : "auto",
        zIndex: 11,
        display: "flex",
        alignItems: "center",
        gap: 2,
        padding: 3,
        borderRadius: 999,
        background: "rgba(13,13,15,0.75)",
        backdropFilter: "blur(12px)",
        WebkitBackdropFilter: "blur(12px)",
        border: "1px solid var(--line-2)",
      }}
    >
      {["es", "en"].map((l) => {
        const active = lang === l;
        return (
          <button
            key={l}
            onClick={() => onSwitch(l)}
            aria-label={l === "es" ? "Español" : "English"}
            aria-pressed={active}
            style={{
              all: "unset",
              cursor: "pointer",
              padding: mobile ? "5px 10px" : "6px 12px",
              borderRadius: 999,
              fontFamily: "var(--mono)",
              fontSize: mobile ? 10.5 : 11,
              fontWeight: 700,
              letterSpacing: 1.2,
              color: active ? "#0a0a0a" : "var(--text-2)",
              background: active ? "var(--mint)" : "transparent",
              transition: "background 220ms ease, color 220ms ease",
              textTransform: "uppercase",
            }}
            onMouseEnter={(e) => {
              if (!active) e.currentTarget.style.color = "var(--text)";
            }}
            onMouseLeave={(e) => {
              if (!active) e.currentTarget.style.color = "var(--text-2)";
            }}
          >{l}</button>
        );
      })}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────
function BrandBadge({ visible, onClick }) {
  return (
    <button
      onClick={onClick}
      aria-label="Volver al inicio"
      className="elm-brand-badge"
      style={{
        all: "unset",
        position: "fixed",
        top: 32,
        left: "50%",
        transform: `translateX(-50%) translateY(${visible ? 0 : -20}px)`,
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? "auto" : "none",
        transition: "opacity 360ms ease, transform 420ms cubic-bezier(.2,.7,.2,1)",
        cursor: "pointer",
        zIndex: 40,
        fontFamily: "var(--mono)",
        fontWeight: 700,
        fontSize: 14,
        letterSpacing: 3,
        padding: "8px 18px",
        borderRadius: 999,
        background: "rgba(15,15,16,0.7)",
        backdropFilter: "blur(14px)",
        border: "1px solid var(--line)"
      }}>
      
      <span className="grad-text">ELEMENTA</span>
    </button>);

}

// ───────────────────────────────────────────────────────────────────
const appStyle = {
  shell: {
    position: "relative",
    width: "100vw",
    // height is set in CSS (.elm-shell) so we can use dvh with vh fallback
    overflow: "hidden"
  },
  center: {
    position: "absolute",
    top: "50%",
    left: "50%",
    width: "min(720px, 86vw)",
    transform: "translate(-50%, -50%)",
    textAlign: "center",
    zIndex: 4
  },
  eyebrow: {
    fontFamily: "var(--mono)",
    fontSize: 11,
    letterSpacing: 2,
    textTransform: "uppercase",
    color: "var(--text-3)",
    marginBottom: 28,
    display: "inline-flex",
    alignItems: "center",
    gap: 10
  },
  eyebrowDot: {
    width: 6, height: 6, borderRadius: "50%",
    background: "var(--mint)",
    boxShadow: "0 0 12px var(--mint)"
  },
  logo: {
    fontFamily: "var(--mono)",
    fontWeight: 700,
    fontSize: "clamp(56px, 10vw, 132px)",
    letterSpacing: "-0.02em",
    lineHeight: 0.95,
    margin: "0 0 12px"
  },
  subtitle: {
    fontFamily: "var(--sans)",
    fontWeight: 400,
    fontSize: "clamp(20px, 2.4vw, 28px)",
    color: "var(--text-2)",
    letterSpacing: -0.2,
    marginBottom: 28
  },
  description: {
    fontFamily: "var(--mono)",
    fontSize: 14,
    lineHeight: 1.75,
    color: "var(--text-3)",
    maxWidth: 520,
    margin: "0 auto 36px"
  },
  ctaRow: {
    display: "inline-flex",
    alignItems: "center",
    gap: 18,
    flexWrap: "wrap",
    justifyContent: "center"
  },
  btnPrimary: {
    all: "unset",
    cursor: "pointer",
    padding: "13px 22px",
    borderRadius: 999,
    background: "var(--grad)",
    color: "#0a0a0a",
    fontWeight: 600,
    fontSize: 14,
    letterSpacing: 0.2,
    transition: "transform 220ms ease, box-shadow 220ms ease",
    boxShadow: "0 8px 28px rgba(179,240,216,0.16)"
  },
  btnGhost: {
    fontFamily: "var(--mono)",
    fontSize: 12.5,
    color: "var(--text-2)",
    textDecoration: "none",
    borderBottom: "1px dashed var(--line-2)",
    paddingBottom: 2,
    transition: "color 220ms ease, border-color 220ms ease"
  },
  navLabel: {
    fontFamily: "var(--mono)",
    fontSize: 11.5,
    letterSpacing: 2,
    color: "var(--text-3)",
    textTransform: "uppercase",
    marginBottom: 16
  },
  navCta: {
    all: "unset",
    marginTop: 22,
    cursor: "pointer",
    fontFamily: "var(--sans)",
    fontWeight: 600,
    fontSize: 14.5,
    letterSpacing: 0.2,
    color: "var(--mint)",
    background: "transparent",
    border: "1px solid var(--mint)",
    padding: "12px 22px",
    borderRadius: 999,
    transition: "background 220ms ease, color 220ms ease"
  },
  footLink: {
    color: "var(--text-3)",
    textDecoration: "none",
    transition: "color 220ms ease"
  },
  dot: { width: 3, height: 3, borderRadius: "50%", background: "var(--line-2)" }
};

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