// Navbar + App root
(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;

  var useTweaks    = window.useTweaks;
  var TweaksPanel  = window.TweaksPanel;
  var TweakSection = window.TweakSection;
  var TweakColor   = window.TweakColor;
  var CONTENT      = window.CONTENT;

  var HeroSection         = window.HeroSection;
  var ConceptSection      = window.ConceptSection;
  var MenuSection         = window.MenuSection;
  var GallerySection      = window.GallerySection;
  var AwardsSection       = window.AwardsSection;
  var TestimonialsSection = window.TestimonialsSection;
  var ReservationSection  = window.ReservationSection;
  var LocationSection     = window.LocationSection;
  var FooterSection       = window.FooterSection;

  // ─── MOBILE MENU OVERLAY ─────────────────────────────────────────────────
  function MobileMenu(props) {
    var t      = props.t;
    var onClose = props.onClose;

    function handleLink(e, href) {
      e.preventDefault();
      onClose();
      var el = document.querySelector(href);
      if (el) setTimeout(function() { el.scrollIntoView({ behavior:'smooth' }); }, 60);
    }

    return React.createElement('div', { style:{
      position:'fixed', inset:0, zIndex:9990,
      background:'rgba(9,20,34,0.97)',
      backdropFilter:'blur(24px)', WebkitBackdropFilter:'blur(24px)',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:'36px'
    }}, [
      // close button
      React.createElement('button', { key:'cl', onClick:onClose, style:{
        position:'absolute', top:'clamp(18px,4vw,28px)', right:'clamp(20px,5vw,60px)',
        background:'transparent', border:'none', cursor:'pointer', padding:'8px', color:'var(--text-muted)'
      }},
        React.createElement('svg', { width:'20', height:'20', viewBox:'0 0 20 20', fill:'none', stroke:'currentColor', strokeWidth:'1.2' },
          React.createElement('line', { x1:'1', y1:'1', x2:'19', y2:'19' }),
          React.createElement('line', { x1:'19', y1:'1', x2:'1', y2:'19' })
        )
      ),
      t.nav.links.map(function(link) {
        return React.createElement('a', { key:link.label, href:link.href, onClick:function(e){handleLink(e,link.href)}, style:{
          fontFamily:"'Cormorant Garamond',serif", fontSize:'2.6rem', fontWeight:300,
          fontStyle:'italic', color:'var(--text)', textDecoration:'none', letterSpacing:'0.02em'
        }}, link.label);
      }),
      React.createElement('a', { key:'cta', href:'#reservas', onClick:function(e){handleLink(e,'#reservas')}, className:'btn-gold', style:{marginTop:'12px'} }, t.nav.cta)
    ]);
  }

  // ─── NAVBAR ──────────────────────────────────────────────────────────────
  function Navbar(props) {
    var t        = props.t;
    var lang     = props.lang;
    var setLang  = props.setLang;
    var menuOpen = props.menuOpen;
    var setMenuOpen = props.setMenuOpen;

    var sPair    = useState(false);
    var scrolled = sPair[0], setScrolled = sPair[1];

    useEffect(function() {
      function handler() { setScrolled(window.scrollY > 56); }
      window.addEventListener('scroll', handler, { passive:true });
      return function() { window.removeEventListener('scroll', handler); };
    }, []);

    function handleLink(e, href) {
      e.preventDefault();
      var el = document.querySelector(href);
      if (el) el.scrollIntoView({ behavior:'smooth' });
    }

    return React.createElement('nav', { style:{
      position:'fixed', top:0, left:0, right:0, zIndex:1000,
      padding: (scrolled ? '10px' : '20px') + ' clamp(20px,5vw,60px)',
      background: scrolled ? 'rgba(9,20,34,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'blur(24px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(24px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--border)' : 'transparent'),
      transition:'padding 0.4s, background 0.4s',
      display:'flex', alignItems:'center', justifyContent:'space-between'
    }}, [
      // Brand
      React.createElement('div', { key:'br', style:{
        fontFamily:"'Cormorant Garamond',serif",
        fontSize: scrolled ? '1.3rem' : '1.75rem',
        fontWeight:300, letterSpacing: scrolled ? '0.3em' : '0.5em',
        color:'var(--text)', transition:'all 0.4s', paddingRight:'0.5em',
        cursor:'pointer'
      }, onClick:function(){ window.scrollTo({top:0,behavior:'smooth'}); }}, props.t.nav.brand),

      // Desktop links
      React.createElement('ul', { key:'ul', className:'nav-desktop', style:{ display:'flex', gap:'32px', listStyle:'none', margin:0, padding:0 }},
        props.t.nav.links.map(function(link) {
          return React.createElement('li', { key:link.label },
            React.createElement('a', { href:link.href, onClick:function(e){handleLink(e,link.href)}, className:'nav-link', style:{
              color:'var(--text-muted)', fontSize:'0.72rem', letterSpacing:'0.16em',
              textTransform:'uppercase', textDecoration:'none', transition:'color 0.3s',
              fontFamily:"'Inter',sans-serif", fontWeight:400
            }}, link.label)
          );
        })
      ),

      // Controls
      React.createElement('div', { key:'ctrl', style:{ display:'flex', alignItems:'center', gap:'12px' }}, [
        // Lang toggle
        React.createElement('div', { key:'lg', style:{ display:'flex', border:'1px solid var(--border)', overflow:'hidden' }},
          ['pt','es'].map(function(l) {
            return React.createElement('button', { key:l, onClick:function(){ setLang(l); }, style:{
              padding:'6px 13px', fontSize:'0.62rem', letterSpacing:'0.1em', textTransform:'uppercase',
              background: lang===l ? 'var(--accent)' : 'transparent',
              color: lang===l ? 'var(--bg)' : 'var(--text-muted)',
              border:'none', cursor:'pointer', transition:'all 0.3s',
              fontFamily:"'Inter',sans-serif", fontWeight:500
            }}, l.toUpperCase());
          })
        ),
        // Desktop CTA
        React.createElement('a', { key:'ct', href:'#reservas', onClick:function(e){handleLink(e,'#reservas')}, className:'btn-gold nav-cta', style:{ padding:'9px 22px', fontSize:'0.64rem', letterSpacing:'0.18em' }}, props.t.nav.cta),
        // Hamburger
        React.createElement('button', { key:'hb', onClick:function(){ setMenuOpen(function(o){return !o;}); }, className:'hamburger-btn', style:{
          background:'transparent', border:'none', cursor:'pointer', padding:'4px',
          display:'flex', flexDirection:'column', gap:'5px'
        }}, [
          React.createElement('span', { key:'a', style:{ display:'block', width:'22px', height:'1px', background:'var(--text)', transition:'all 0.3s', transform: menuOpen?'rotate(45deg) translate(4px,4px)':'none' }}),
          React.createElement('span', { key:'b', style:{ display:'block', width:'22px', height:'1px', background:'var(--text)', opacity: menuOpen?0:1, transition:'all 0.3s' }}),
          React.createElement('span', { key:'c', style:{ display:'block', height:'1px', background:'var(--text)', transition:'all 0.3s', width: menuOpen?'22px':'14px', transform: menuOpen?'rotate(-45deg) translate(4px,-4px)':'none' }})
        ])
      ])
    ]);
  }

  // ─── APP ROOT ─────────────────────────────────────────────────────────────
  var TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accentColor": "#C8A96E" }/*EDITMODE-END*/;

  function App() {
    var lPair = useState('pt');
    var lang = lPair[0], setLang = lPair[1];

    var fPair = useState(false);
    var fading = fPair[0], setFading = fPair[1];

    var mPair = useState(false);
    var menuOpen = mPair[0], setMenuOpen = mPair[1];

    var twPair = useTweaks(TWEAK_DEFAULTS);
    var tw = twPair[0], setTweak = twPair[1];

    useEffect(function() {
      document.documentElement.style.setProperty('--accent', tw.accentColor);
    }, [tw.accentColor]);

    function switchLang(newLang) {
      if (newLang === lang) return;
      setFading(true);
      setTimeout(function() { setLang(newLang); setFading(false); }, 220);
    }

    var t = CONTENT[lang];

    return React.createElement(React.Fragment, null, [
      menuOpen && React.createElement(MobileMenu, { key:'mob', t:t, onClose:function(){ setMenuOpen(false); }}),
      React.createElement('div', { key:'pg', style:{ opacity:fading?0:1, transition:'opacity 0.22s' }}, [
        React.createElement(Navbar, { key:'nav', t:t, lang:lang, setLang:switchLang, menuOpen:menuOpen, setMenuOpen:setMenuOpen }),
        React.createElement(HeroSection,         { key:'he', t:t }),
        React.createElement(ConceptSection,      { key:'co', t:t }),
        React.createElement(MenuSection,         { key:'mn', t:t }),
        React.createElement(GallerySection,      { key:'ga', t:t }),
        React.createElement(AwardsSection,       { key:'aw', t:t }),
        React.createElement(TestimonialsSection, { key:'te', t:t }),
        React.createElement(ReservationSection,  { key:'re', t:t }),
        React.createElement(LocationSection,     { key:'lo', t:t }),
        React.createElement(FooterSection,       { key:'fo', t:t })
      ]),
      React.createElement(TweaksPanel, { key:'tw' },
        React.createElement(TweakSection, { label:'Identidade Visual' }),
        React.createElement(TweakColor, {
          label:'Cor de Acento',
          value:tw.accentColor,
          options:['#C8A96E','#D4AF37','#A8B8C8','#B8846A'],
          onChange:function(v){ setTweak('accentColor',v); }
        })
      )
    ]);
  }

  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
})();