/* global React, ReactDOM,
   Header, MenuOverlay, NAV_ITEMS,
   Hero, Servicios, Boutique, Galeria, Testimonios,
   Gerente, Reservas, Contacto,
   TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio */

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "goldShade": "#b8924a"
}/*EDITMODE-END*/;

const GOLD_PRESETS = [
  { label: 'Champagne', value: '#c9a868' },
  { label: 'Bread Way', value: '#b8924a' },
  { label: 'Antique', value: '#9c7a36' },
  { label: 'Bronze', value: '#7a5a28' },
];

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [current, setCurrent] = React.useState('home');
  const pageRef = React.useRef(null);

  // Apply gold tweak as CSS var
  React.useEffect(() => {
    document.documentElement.style.setProperty('--gold', tweaks.goldShade);
  }, [tweaks.goldShade]);

  // Scroll-reveal: cada sección aparece suavemente al entrar en pantalla
  // (incluye 'testimonios', que ya no está en el menú pero sigue en la página)
  React.useEffect(() => {
    const revealIds = [...NAV_ITEMS.map((n) => n.id), 'testimonios'];
    const els = revealIds
      .map((id) => pageRef.current?.querySelector('#' + id))
      .filter(Boolean);

    els.forEach((el, i) => {
      el.style.opacity = '0';
      el.style.transform = 'translateY(18px)';
      el.style.transition = `opacity 0.7s ease ${i === 0 ? 0 : 0.05}s, transform 0.7s ease ${i === 0 ? 0 : 0.05}s`;
    });

    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
            io.unobserve(entry.target);
          }
        });
      },
      { root: pageRef.current, threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const onNavigate = (id) => {
    const el = pageRef.current?.querySelector('#' + id);
    if (el && pageRef.current) {
      pageRef.current.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
      setCurrent(id);
    }
  };

  const onScroll = () => {
    const top = pageRef.current?.scrollTop || 0;
    setScrolled(top > 8);
    // Detect current section
    const sections = NAV_ITEMS.map(n => pageRef.current?.querySelector('#' + n.id)).filter(Boolean);
    let active = current;
    for (const s of sections) {
      if (s.offsetTop - 100 <= top) active = s.id;
    }
    if (active !== current) setCurrent(active);
  };

  return (
    <React.Fragment>
      <div
        ref={pageRef}
        onScroll={onScroll}
        className="bb-page bb-shell"
      >
        <Header onMenu={() => setMenuOpen(true)} scrolled={scrolled} />
        <Hero
          onReserve={() => onNavigate('reservas')}
          onProducts={() => onNavigate('boutique')}
        />
        <Servicios onReserve={() => onNavigate('reservas')} />
        <Boutique />
        <Galeria />
        <Gerente onReserve={() => onNavigate('reservas')} />
        <Reservas />
        <Contacto />

        <MenuOverlay
          open={menuOpen}
          onClose={() => setMenuOpen(false)}
          onNavigate={onNavigate}
          current={current}
        />

        {!menuOpen && (
          <a
            href={`https://wa.me/56984740024?text=${encodeURIComponent('Hola! Quiero consultar por una hora en Broadway Barber 💈')}`}
            target="_blank" rel="noreferrer"
            aria-label="WhatsApp"
            style={{
              position: 'absolute', bottom: 24, right: 20, zIndex: 40,
              width: 52, height: 52, borderRadius: '50%',
              background: '#25D366',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
            }}
          >
            <svg width="26" height="26" viewBox="0 0 24 24" fill="#fff">
              <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.43 1.32 4.92L2 22l5.29-1.39a9.9 9.9 0 004.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.02c-.24.68-1.4 1.32-1.93 1.4-.5.08-1.11.11-1.79-.11-.41-.13-.94-.3-1.62-.6-2.85-1.23-4.7-4.11-4.85-4.3-.14-.2-1.16-1.54-1.16-2.94s.73-2.09.99-2.37c.26-.29.57-.36.76-.36l.55.01c.17 0 .41-.06.64.49.24.56.81 1.95.88 2.09.07.14.12.31.02.5-.09.19-.14.31-.28.48-.14.17-.29.37-.42.5-.14.13-.28.28-.12.55.16.28.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.21 1.37.28.14.44.12.6-.07.17-.19.71-.83.9-1.11.19-.28.38-.24.64-.14.26.09 1.65.78 1.93.92.28.14.47.21.54.33.07.12.07.68-.17 1.36z"/>
            </svg>
          </a>
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Tono dorado" subtitle="Acento principal del sitio">
          <TweakRadio
            label="Preset"
            value={tweaks.goldShade}
            options={GOLD_PRESETS.map(p => ({ label: p.label, value: p.value }))}
            onChange={v => setTweak('goldShade', v)}
          />
          <TweakColor
            label="Personalizado"
            value={tweaks.goldShade}
            onChange={v => setTweak('goldShade', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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