// Sections A — Hero · Concept · Menu
(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;
  var useRef    = React.useRef;
  var useInView          = window.useInView;
  var useCursorParallax  = window.useCursorParallax;
  var SectionTag         = window.SectionTag;
  var Reveal             = window.Reveal;

  var HERO_IMG = 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1920&q=80';
  var CHEF_IMG = 'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?auto=format&fit=crop&w=900&q=80';

  // ─── HERO ──────────────────────────────────────────────────────────────────
  function HeroSection(props) {
    var t         = props.t;
    var canvasRef = useRef(null);
    var pair      = useState(false);
    var loaded    = pair[0], setLoaded = pair[1];

    useEffect(function() {
      var timer   = setTimeout(function() { setLoaded(true); }, 80);
      var cleanup = window.initHeroCanvas(canvasRef.current);
      return function() { clearTimeout(timer); cleanup(); };
    }, []);

    function anim(delay, extra) {
      return Object.assign({
        opacity:   loaded ? 1 : 0,
        transform: loaded ? 'translateY(0)' : 'translateY(18px)',
        transition:'opacity 1.2s ' + delay + 's cubic-bezier(0.4,0,0.2,1), transform 1.2s ' + delay + 's cubic-bezier(0.4,0,0.2,1)'
      }, extra || {});
    }

    return React.createElement('section', {
      id: 'hero',
      'data-screen-label': 'Hero',
      style: {
        position: 'relative', height: '100svh', minHeight: '600px',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden', background: 'var(--bg)'
      }
    }, [
      // bg image
      React.createElement('div', { key: 'bg', style: {
        position: 'absolute', inset: 0,
        backgroundImage: "url('" + HERO_IMG + "')",
        backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.22
      }}),
      // gradient overlay
      React.createElement('div', { key: 'ov', style: {
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to bottom, rgba(13,27,42,0.25) 0%, rgba(13,27,42,0.55) 55%, rgba(9,20,34,1) 100%)'
      }}),
      // canvas
      React.createElement('canvas', { key: 'cv', ref: canvasRef, style: {
        position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none'
      }}),
      // content
      React.createElement('div', { key: 'ct', style: {
        position: 'relative', zIndex: 2,
        textAlign: 'center', padding: '0 clamp(24px,6vw,80px)',
        maxWidth: '920px', width: '100%'
      }}, [
        React.createElement('div', { key: 'ey', style: anim(0.15, {
          fontSize: '0.67rem', letterSpacing: '0.28em', textTransform: 'uppercase',
          color: 'var(--accent)', marginBottom: '28px', fontFamily: "'Inter',sans-serif"
        })}, t.hero.eyebrow),

        React.createElement('h1', { key: 'h1', style: {
          fontFamily: "'Cormorant Garamond',Georgia,serif",
          fontSize: 'clamp(3.2rem,12vw,9.5rem)',
          fontWeight: 300, fontStyle: 'italic', lineHeight: 1.0,
          color: 'var(--text)', marginBottom: '24px', whiteSpace: 'pre-line',
          opacity:   loaded ? 1 : 0,
          filter:    loaded ? 'blur(0)' : 'blur(20px)',
          transform: loaded ? 'translateY(0)' : 'translateY(24px)',
          transition:'opacity 2.2s 0.35s cubic-bezier(0.4,0,0.2,1), filter 2.2s 0.35s, transform 1.8s 0.35s'
        }}, t.hero.title),

        React.createElement('p', { key: 'sb', style: anim(0.9, {
          fontSize: 'clamp(0.85rem,2.2vw,1.05rem)', fontWeight: 300,
          color: 'var(--text-muted)', letterSpacing: '0.06em',
          marginBottom: '52px', fontFamily: "'Inter',sans-serif"
        })}, t.hero.subtitle),

        React.createElement('div', { key: 'ct2', style: anim(1.25) },
          React.createElement('a', {
            href: '#concepto',
            className: 'btn-gold',
            onClick: function(e) { e.preventDefault(); var el = document.querySelector('#concepto'); if (el) el.scrollIntoView({ behavior:'smooth' }); }
          }, t.hero.cta)
        )
      ]),
      // scroll indicator
      React.createElement('div', { key: 'sc', style: Object.assign({
        position: 'absolute', bottom: '32px', left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px'
      }, anim(1.8)) }, [
        React.createElement('span', { key: 'sl', style: {
          fontSize: '0.6rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--text-dim)'
        }}, t.hero.scroll),
        React.createElement('div', { key: 'ln', className: 'scroll-line' })
      ])
    ]);
  }

  // ─── CONCEPT ───────────────────────────────────────────────────────────────
  function ConceptSection(props) {
    var t      = props.t;
    var cursor = useCursorParallax(14);
    var inImg  = useInView(0.08);
    var imgRef = inImg[0], imgVis = inImg[1];

    return React.createElement('section', {
      id: 'concepto',
      'data-screen-label': 'Conceito',
      style: { background: 'var(--bg-alt)', padding: 'clamp(80px,12vw,140px) 0', overflow: 'hidden' }
    },
      React.createElement('div', { className: 'container' },
        React.createElement('div', { style: {
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 420px), 1fr))',
          gap: 'clamp(48px,8vw,100px)', alignItems: 'center'
        }}, [
          // Left text
          React.createElement('div', { key: 'txt' }, [
            React.createElement(Reveal, { key: 'tg', delay: 0 }, React.createElement(SectionTag, null, t.concept.section)),
            React.createElement(Reveal, { key: 'h2', delay: 0.1 },
              React.createElement('h2', { style: {
                fontFamily: "'Cormorant Garamond',serif",
                fontSize: 'clamp(2.8rem,6.5vw,6.5rem)',
                fontWeight: 300, lineHeight: 1.04, color: 'var(--text)',
                marginBottom: '28px', whiteSpace: 'pre-line'
              }}, t.concept.title)
            ),
            React.createElement(Reveal, { key: 'p1', delay: 0.2 },
              React.createElement('p', { style: {
                fontSize: 'clamp(0.85rem,1.8vw,0.98rem)', lineHeight: 1.85,
                color: 'var(--text-muted)', marginBottom: '18px', maxWidth: '480px'
              }}, t.concept.p1)
            ),
            React.createElement(Reveal, { key: 'p2', delay: 0.3 },
              React.createElement('p', { style: {
                fontSize: 'clamp(0.85rem,1.8vw,0.98rem)', lineHeight: 1.85,
                color: 'var(--text-muted)', marginBottom: '40px', maxWidth: '480px'
              }}, t.concept.p2)
            ),
            React.createElement(Reveal, { key: 'ch', delay: 0.4 },
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '16px' }}, [
                React.createElement('div', { key: 'ln', style: { width: '36px', height: '1px', background: 'var(--accent)', flexShrink: 0 }}),
                React.createElement('div', { key: 'nm' }, [
                  React.createElement('div', { key: 'n', style: { fontFamily: "'Cormorant Garamond',serif", fontSize: '1.15rem', fontWeight: 400, color: 'var(--text)' }}, t.concept.chef),
                  React.createElement('div', { key: 't', style: { fontSize: '0.65rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent)', marginTop: '4px' }}, t.concept.chefTitle)
                ])
              ])
            )
          ]),
          // Right image
          React.createElement('div', { key: 'img', ref: imgRef, style: {
            position: 'relative', aspectRatio: '3/4', maxHeight: '580px', width: '100%'
          }}, [
            // decorative border
            React.createElement('div', { key: 'fr', style: {
              position: 'absolute', inset: '18px',
              border: '1px solid var(--border)', zIndex: 1, pointerEvents: 'none',
              transform: 'translate(' + (-cursor.x * 0.5) + 'px, ' + (-cursor.y * 0.5) + 'px)',
              transition: 'transform 0.5s ease-out'
            }}),
            React.createElement('div', { key: 'ph', style: {
              position: 'absolute', inset: 0, overflow: 'hidden',
              transform: 'translate(' + cursor.x + 'px, ' + cursor.y + 'px)',
              transition: 'transform 0.5s ease-out'
            }}, [
              React.createElement('img', { key: 'i', src: CHEF_IMG, alt: t.concept.chef, loading: 'lazy', style: {
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                opacity: imgVis ? 1 : 0, transition: 'opacity 1.2s 0.3s'
              }}),
              React.createElement('div', { key: 'ov', style: {
                position: 'absolute', inset: 0,
                background: 'linear-gradient(to top, rgba(9,20,34,0.65) 0%, rgba(9,20,34,0) 50%)'
              }})
            ])
          ])
        ])
      )
    );
  }

  // ─── MENU ──────────────────────────────────────────────────────────────────
  function MenuSection(props) {
    var t       = props.t;

    return React.createElement('section', {
      id: 'menu',
      'data-screen-label': 'Menu',
      style: { background: 'var(--bg)', padding: 'clamp(80px,12vw,140px) 0' }
    },
      React.createElement('div', { className: 'container' }, [
        React.createElement(Reveal, { key: 'tg' }, React.createElement(SectionTag, null, t.menu.section)),
        React.createElement('div', { key: 'hd', style: {
          display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between',
          alignItems: 'flex-end', marginBottom: 'clamp(36px,6vw,64px)', gap: '16px'
        }}, [
          React.createElement(Reveal, { key: 'h2', delay: 0.1 },
            React.createElement('h2', { style: {
              fontFamily: "'Cormorant Garamond',serif",
              fontSize: 'clamp(2.8rem,6.5vw,6.5rem)',
              fontWeight: 300, lineHeight: 1.04, color: 'var(--text)', whiteSpace: 'pre-line'
            }}, t.menu.title)
          ),
          React.createElement(Reveal, { key: 'sb', delay: 0.2 },
            React.createElement('p', { style: { fontSize: '0.88rem', color: 'var(--text-dim)', maxWidth: '280px', lineHeight: 1.6 }}, t.menu.subtitle)
          )
        ]),
        React.createElement('div', { key: 'grid', style: {
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 290px), 1fr))',
          gap: '1px', background: 'var(--border)'
        }},
          t.menu.items.map(function(item, i) {
            return React.createElement(Reveal, { key: i, delay: (i % 3) * 0.08 },
              React.createElement('div', { className: 'menu-card', style: { background: 'var(--bg)' }}, [
                // Gradient art header
                React.createElement('div', { key: 'ci', className: 'card-img', style: { height: '170px' }},
                  React.createElement('div', { className: 'card-img-inner', style: {
                    width: '100%', height: '100%', background: item.g,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative'
                  }}, [
                    React.createElement('div', { key: 'glow', style: {
                      position: 'absolute', inset: 0,
                      background: 'radial-gradient(ellipse at center, rgba(200,169,110,0.07) 0%, transparent 70%)'
                    }}),
                    React.createElement('div', { key: 'num', style: {
                      fontFamily: "'Cormorant Garamond',serif", fontSize: '3.5rem',
                      fontWeight: 200, color: 'rgba(200,169,110,0.12)', fontStyle: 'italic', userSelect: 'none'
                    }}, String(i + 1).padStart(2, '0')),
                    // corner accent
                    React.createElement('div', { key: 'cr', style: {
                      position: 'absolute', top: '12px', right: '12px',
                      width: '16px', height: '16px',
                      borderTop: '1px solid rgba(200,169,110,0.3)',
                      borderRight: '1px solid rgba(200,169,110,0.3)'
                    }})
                  ])
                ),
                // text content
                React.createElement('div', { key: 'bd', style: { padding: '22px 22px 24px' }}, [
                  React.createElement('div', { key: 'tg', style: {
                    fontSize: '0.58rem', letterSpacing: '0.22em', textTransform: 'uppercase',
                    color: 'var(--accent)', marginBottom: '9px', fontWeight: 400
                  }}, item.tag),
                  React.createElement('h3', { key: 'nm', style: {
                    fontFamily: "'Cormorant Garamond',serif", fontSize: '1.3rem',
                    fontWeight: 400, color: 'var(--text)', marginBottom: '9px', lineHeight: 1.2
                  }}, item.name),
                  React.createElement('p', { key: 'ds', style: {
                    fontSize: '0.8rem', color: 'var(--text-dim)', lineHeight: 1.65, marginBottom: '16px'
                  }}, item.desc),
                  React.createElement('div', { key: 'pr', style: {
                    fontFamily: "'Cormorant Garamond',serif", fontSize: '1.2rem',
                    fontWeight: 500, color: 'var(--accent)'
                  }}, item.price)
                ])
              ])
            );
          })
        )
      ])
    );
  }

  // patch MenuSection to add QR link button at bottom
  var _OrigMenu = MenuSection;
  MenuSection = function(props) {
    var base = _OrigMenu(props);
    var t = props.t;
    var children = Array.isArray(base.props.children) ? base.props.children.slice() : [base.props.children];
    var linkBtn = React.createElement('div', { key:'qr-link', style:{ textAlign:'center', padding:'clamp(32px,5vw,56px) 0 0' }},
      React.createElement('a', {
        href:'Aurum Menu.html',
        className:'btn-gold',
        style:{ fontSize:'0.7rem', letterSpacing:'0.2em' }
      }, t.nav.menuLink || (t.nav.cta === 'Reservar' ? 'Ver Cardápio Completo' : 'Ver Carta Completa'))
    );
    children.push(linkBtn);
    return React.cloneElement(base, {}, React.createElement('div', { className:'container' }, children));
  };

  Object.assign(window, { HeroSection: HeroSection, ConceptSection: ConceptSection, MenuSection: MenuSection });
})();