/* global React, ReactDOM, Nav, Hero, Marquee, About, Configurator, Gallery, Contact, FAQ, Footer */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#2dd4ff",
  "secondary": "#c026d3",
  "displayFont": "Bebas Neue",
  "bodyFont": "Inter",
  "heroStyle": "photo"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  display: [
    { value: 'Bebas Neue', label: 'Bebas Neue' },
    { value: 'Anton', label: 'Anton' },
    { value: 'Oswald', label: 'Oswald' },
    { value: 'Archivo Black', label: 'Archivo Black' },
    { value: 'Racing Sans One', label: 'Racing Sans' }
  ],
  body: [
    { value: 'Inter', label: 'Inter' },
    { value: 'DM Sans', label: 'DM Sans' },
    { value: 'Manrope', label: 'Manrope' },
    { value: 'Space Grotesk', label: 'Space Grotesk' }
  ]
};

const PALETTES = [
  ['#2dd4ff', '#c026d3'],   // logo (default)
  ['#fbbf24', '#dc2626'],   // sunset / racing red+gold
  ['#22d3ee', '#84cc16'],   // pit-lane verde
  ['#f472b6', '#8b5cf6']    // miami
];

function App() {
  const [tweaks, setTweaks] = useTweaksLite(TWEAK_DEFAULTS);

  // apply CSS vars
  useEffect(() => {
    document.documentElement.style.setProperty('--primary', tweaks.primary);
    document.documentElement.style.setProperty('--secondary', tweaks.secondary);
    document.documentElement.style.setProperty('--font-display', `'${tweaks.displayFont}', Impact, sans-serif`);
    document.documentElement.style.setProperty('--font-body', `'${tweaks.bodyFont}', -apple-system, sans-serif`);
  }, [tweaks]);

  // scroll reveal
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero heroStyle={tweaks.heroStyle} />
      <Marquee />
      <About />
      <Configurator />
      <Gallery />
      <Contact />
      <FAQ />
      <Footer />

      <a href="https://wa.me/5491100000000?text=Hola%20Vamo%20Nene" target="_blank" rel="noopener" className="fab-wsp" aria-label="WhatsApp">
        <svg viewBox="0 0 24 24" fill="currentColor"><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.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
      </a>

      <TweaksUI tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

// ===== Tweaks logic =====
function useTweaksLite(defaults) {
  const [tweaks, setTweaks] = useState(defaults);
  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
    } catch (e) {}
  };
  return [tweaks, update];
}

function TweaksUI({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    try {
      window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const close = () => {
    setOpen(false);
    try {
      window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
    } catch (e) {}
  };

  if (!open) return null;

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <span>Tweaks</span>
        <button onClick={close} aria-label="Cerrar">×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweaks-section">
          <h6>Paleta</h6>
          <div className="palette-grid">
            {PALETTES.map((p, i) => (
              <button
                key={i}
                className={`palette-swatch ${tweaks.primary === p[0] ? 'active' : ''}`}
                onClick={() => setTweaks({ primary: p[0], secondary: p[1] })}
              >
                <span style={{ background: p[0] }}></span>
                <span style={{ background: p[1] }}></span>
              </button>
            ))}
          </div>
        </div>

        <div className="tweaks-section">
          <h6>Display Font</h6>
          <select
            value={tweaks.displayFont}
            onChange={e => setTweaks({ displayFont: e.target.value })}
            style={{ fontFamily: tweaks.displayFont }}
          >
            {FONT_PAIRS.display.map(f => (
              <option key={f.value} value={f.value}>{f.label}</option>
            ))}
          </select>
        </div>

        <div className="tweaks-section">
          <h6>Body Font</h6>
          <select
            value={tweaks.bodyFont}
            onChange={e => setTweaks({ bodyFont: e.target.value })}
            style={{ fontFamily: tweaks.bodyFont }}
          >
            {FONT_PAIRS.body.map(f => (
              <option key={f.value} value={f.value}>{f.label}</option>
            ))}
          </select>
        </div>

        <div className="tweaks-section">
          <h6>Estilo de hero</h6>
          <div className="hero-style-grid">
            {[
              { id: 'photo', label: 'Bar', img: 'assets/bar1.jpg' },
              { id: 'video', label: 'Zona', img: 'assets/zonabar.jpg' },
              { id: 'hud', label: 'Simus', img: 'assets/simus.jpg' }
            ].map(o => (
              <button
                key={o.id}
                className={`hero-pick ${tweaks.heroStyle === o.id ? 'active' : ''}`}
                onClick={() => setTweaks({ heroStyle: o.id })}
              >
                <img src={o.img} alt={o.label} />
                <span>{o.label}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);