// app.jsx — root + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper",
  "accent": "#B8612C",
  "displayFont": "Cormorant Garamond",
  "bodyFont": "Manrope"
}/*EDITMODE-END*/;

const PALETTES = {
  interiores: {
    label: "Interiores · plaster & latón",
    paper: "#ECE5D7",
    paperSoft: "#E3DBC9",
    stone: "#CDC1A8",
    ink: "#2A2218",
    heroBg: "#2A2218",
    accent: "#A6824A",
    ink2: "#3C3326",
    inkSoft: "#7C705C",
    inkMute: "#AB9E86",
    line: "rgba(42,34,24,0.15)",
    lineSoft: "rgba(42,34,24,0.07)",
  },
  natura: {
    label: "Natura · bosque & agua",
    paper: "#E9EBE2",
    paperSoft: "#DFE3D6",
    stone: "#C7CEBB",
    ink: "#1A2620",
    heroBg: "#243A2D",
    accent: "#3C5A45",
    ink2: "#2C3A30",
    inkSoft: "#5C6A5C",
    inkMute: "#93A08E",
    line: "rgba(26,38,32,0.15)",
    lineSoft: "rgba(26,38,32,0.07)",
  },
  paper: {
    label: "Papel cálido",
    paper: "#F2EDE4",
    paperSoft: "#EBE4D6",
    stone: "#DAD1BE",
    ink: "#161413",
    accent: "#B8612C",
  },
  bone: {
    label: "Hueso · más claro",
    paper: "#F7F4EE",
    paperSoft: "#EFEBE2",
    stone: "#DDD6C7",
    ink: "#1C1A18",
  },
  shadow: {
    label: "Sombra · modo oscuro",
    paper: "#1C1A18",
    paperSoft: "#252220",
    stone: "#3A3530",
    ink: "#F2EDE4",
  },
  greige: {
    label: "Greige · piedra fría",
    paper: "#ECE9E3",
    paperSoft: "#E2DED5",
    stone: "#CDC8BC",
    ink: "#1A1A1A",
    accent: "#9C7340",
  },
  mairen: {
    label: "Mairen · arena & bosque",
    paper: "#E7E2D6",
    paperSoft: "#DCD6C7",
    stone: "#C9C2AF",
    ink: "#23231E",
    accent: "#3A4A3A",
  },
};

const ACCENTS = ["#B8612C", "#8C4520", "#9C7340", "#6F7E66", "#A6824A", "#3C5A45"];

const DISPLAY_FONTS = ["Cormorant Garamond", "Playfair Display", "EB Garamond", "Tenor Sans"];
const BODY_FONTS = ["Manrope", "DM Sans", "Work Sans", "IBM Plex Sans"];

function applyTokens(t) {
  const root = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES.paper;
  root.style.setProperty("--paper", p.paper);
  root.style.setProperty("--paper-soft", p.paperSoft);
  root.style.setProperty("--stone", p.stone);
  root.style.setProperty("--ink", p.ink);
  root.style.setProperty("--hero-bg", p.heroBg || p.ink);
  // derived neutrals — palette may override, else fall back by light/dark
  const isDark = t.palette === "shadow";
  root.style.setProperty("--ink-2", p.ink2 || (isDark ? "#D8D2C5" : "#2A2622"));
  root.style.setProperty("--ink-soft", p.inkSoft || (isDark ? "#9C948A" : "#6B645A"));
  root.style.setProperty("--ink-mute", p.inkMute || (isDark ? "#6B645A" : "#9C948A"));
  root.style.setProperty("--line", p.line || (isDark ? "rgba(242,237,228,0.14)" : "rgba(22,20,19,0.14)"));
  root.style.setProperty("--line-soft", p.lineSoft || (isDark ? "rgba(242,237,228,0.07)" : "rgba(22,20,19,0.07)"));

  root.style.setProperty("--terracota", t.accent);

  root.style.setProperty("--font-display", `"${t.displayFont}", Georgia, serif`);
  root.style.setProperty("--font-body", `"${t.bodyFont}", -apple-system, system-ui, sans-serif`);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    applyTokens(t);
  }, [t.palette, t.accent, t.displayFont, t.bodyFont]);

  // Page load sequence: curtain lifts → hero text reveals
  React.useEffect(() => {
    const curtain = document.getElementById("page-curtain");
    const headline = document.getElementById("hero-headline");
    const id = setTimeout(() => {
      if (curtain) {
        curtain.style.opacity = "0";
        setTimeout(() => { try { curtain.remove(); } catch(e){} }, 1900);
      }
      if (headline) setTimeout(() => headline.classList.add("loaded"), 280);
    }, 80);
    return () => clearTimeout(id);
  }, []);

  // Init cinematic motion once everything is mounted
  React.useEffect(() => {
    const id = setTimeout(() => {
      if (window.LavistaMotion) window.LavistaMotion.init(document);
    }, 200);
    return () => clearTimeout(id);
  }, []);

  const choosePalette = (v) => {
    const p = PALETTES[v];
    if (p && p.accent) setTweak({ palette: v, accent: p.accent });
    else setTweak("palette", v);
  };

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Manifiesto />
      <CinemaBreak />
      <Vista />
      <Arquitectura />
      <HGallery />
      <Departamento />
      <Tipologias />
      <Amenidades />
      <Sustentabilidad />
      <Entorno />
      <Mapa />
      <Contacto />
      <Footer />

      {/* Botón flotante WhatsApp */}
      <a
        href="https://wa.me/529844416238?text=Hola%2C%20me%20interesa%20información%20sobre%20LAVISTA%20Residences"
        target="_blank"
        rel="noopener noreferrer"
        className="wa-float"
        aria-label="Contactar por WhatsApp"
      >
        <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
          <path d="M12 0C5.373 0 0 5.373 0 12c0 2.125.558 4.118 1.528 5.845L0 24l6.335-1.652A11.954 11.954 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.818 9.818 0 01-5.003-1.368l-.36-.214-3.735.979.995-3.63-.235-.374A9.818 9.818 0 012.182 12C2.182 6.57 6.57 2.182 12 2.182S21.818 6.57 21.818 12 17.43 21.818 12 21.818z"/>
        </svg>
      </a>

      <TweaksPanel>
        <TweakSection label="Paleta" />
        <TweakSelect
          label="Tono"
          value={t.palette}
          options={Object.keys(PALETTES).map((k) => ({ value: k, label: PALETTES[k].label }))}
          onChange={choosePalette}
        />
        <TweakColor
          label="Acento"
          value={t.accent}
          options={ACCENTS}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Tipografía" />
        <TweakSelect
          label="Display (titulares)"
          value={t.displayFont}
          options={DISPLAY_FONTS}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <TweakSelect
          label="Body (texto)"
          value={t.bodyFont}
          options={BODY_FONTS}
          onChange={(v) => setTweak("bodyFont", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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