/* global React */
/* BOHAM Praia — Part A: i18n, shared scroll util, Nav, Hero video */
(function () {
const { Button, Tag } = window.BOHAMDesignSystem_8e9a1f;

// ---- i18n (shared across all part files) ---------------------------------
const LANG_KEY = 'boham-lang';
const SUPPORTED = ['en', 'pt', 'fr'];
// Default English. Only a ?lang= in the URL changes the landing language,
// so shared links (e.g. ?lang=fr) open in the right language and a plain
// boham.com.br always lands in English.
let stored = 'en';
try {
  const urlLang = new URLSearchParams(window.location.search).get('lang');
  if (urlLang && SUPPORTED.indexOf(urlLang) !== -1) stored = urlLang;
} catch (e) {}
window.BohamLangStore = window.BohamLangStore || { current: stored, listeners: new Set() };
window.bohamSetLang = (l) => {
  const s = window.BohamLangStore;
  s.current = l;
  try { localStorage.setItem(LANG_KEY, l); } catch (e) {}
  try {
    const u = new URL(window.location.href);
    u.searchParams.set('lang', l);
    window.history.replaceState({}, '', u);
  } catch (e) {}
  try { document.documentElement.lang = l; } catch (e) {}
  try { window.bohamApplyMeta(l); } catch (e) {}
  try { if (typeof window.gtag === 'function') window.gtag('event', 'language_change', { language: l }); } catch (e) {}
  s.listeners.forEach((fn) => fn(l));
};
try { document.documentElement.lang = window.BohamLangStore.current; } catch (e) {}
window.BOHAM_TITLES = {
  en: 'BOHAM - Kite point and restaurant in Barra Grande, PI',
  pt: 'BOHAM - Kite point e restaurante em Barra Grande, PI',
  fr: 'BOHAM - Kite point et restaurant à Barra Grande, PI',
};
window.BOHAM_DESCRIPTIONS = {
  en: 'BOHAM is the kite point and restaurant on the beach of Barra Grande, Piauí (Brazil), a top flat-water kitesurf spot on the Rota das Emoções. Food, caipirinhas, sunset DJ & live music. What to do in Barra Grande: kite, eat, dance.',
  pt: 'O BOHAM é o kite point e restaurante na praia de Barra Grande, no Piauí (Brasil), um dos melhores pontos de kitesurf da Rota das Emoções. Comida, caipirinhas, DJ ao pôr do sol e música ao vivo. O que fazer em Barra Grande: praticar kitesurf, comer, dançar.',
  fr: 'BOHAM est le kite point et restaurant situé sur la plage de Barra Grande, dans l’État du Piauí (Brésil), l’un des meilleurs spots de kitesurf de la « Rota das Emoções ». Cuisine, caipirinhas, DJ au coucher du soleil et concerts. Que faire à Barra Grande : pratiquer le kitesurf, manger, danser.',
};
// Option B: rewrite title + description + OG/Twitter tags on language change.
// (English remains the crawler-indexed default since it's the server-sent HTML.)
window.bohamApplyMeta = (l) => {
  const title = window.BOHAM_TITLES[l] || window.BOHAM_TITLES.en;
  const desc = window.BOHAM_DESCRIPTIONS[l] || window.BOHAM_DESCRIPTIONS.en;
  document.title = title;
  const set = (sel, attr, val) => { const el = document.head.querySelector(sel); if (el) el.setAttribute(attr, val); };
  set('meta[name="description"]', 'content', desc);
  set('meta[property="og:title"]', 'content', title);
  set('meta[property="og:description"]', 'content', desc);
  set('meta[property="og:locale"]', 'content', l === 'pt' ? 'pt_BR' : l === 'fr' ? 'fr_FR' : 'en_US');
  set('meta[name="twitter:title"]', 'content', title);
  set('meta[name="twitter:description"]', 'content', desc);
  document.documentElement.lang = l;
};
try { window.bohamApplyMeta(window.BohamLangStore.current); } catch (e) {}
window.useBohamLang = () => {
  const s = window.BohamLangStore;
  const [lang, set] = React.useState(s.current);
  React.useEffect(() => {
    const fn = (l) => set(l);
    s.listeners.add(fn);
    return () => s.listeners.delete(fn);
  }, []);
  return lang;
};
// L(lang, english, portuguese, french) — french falls back to english if omitted
window.L = (lang, en, pt, fr) => (lang === 'fr' ? (fr != null ? fr : en) : lang === 'pt' ? pt : en);
const L = window.L;

// ---- analytics: GA4 event helper + delegated click & scroll tracking -----
window.bohamTrack = window.bohamTrack || function (name, params) {
  try { if (typeof window.gtag === 'function') window.gtag('event', name, params || {}); } catch (e) {}
};
if (!window.__bohamAnalytics) {
  window.__bohamAnalytics = true;
  // every link + button click, categorised by destination / label
  document.addEventListener('click', function (e) {
    const t = e.target;
    if (!t || !t.closest) return;
    const a = t.closest('a[href]');
    if (a) {
      const href = a.getAttribute('href') || '';
      let dest = 'link';
      if (/wa\.me|whatsapp/i.test(href)) dest = 'whatsapp';
      else if (/instagram/i.test(href)) dest = 'instagram';
      else if (/tiktok/i.test(href)) dest = 'tiktok';
      else if (/tripadvisor/i.test(href)) dest = 'tripadvisor';
      else if (/windguru/i.test(href)) dest = 'windguru';
      else if (/drive\.google|\/menu/i.test(href)) dest = 'menu';
      else if (/share\.google|google\.|maps/i.test(href)) dest = 'google_maps';
      window.bohamTrack('outbound_click', { destination: dest, url: href, label: (a.textContent || '').trim().slice(0, 60) });
      return;
    }
    const btn = t.closest('button');
    if (btn) {
      const label = (btn.textContent || btn.getAttribute('aria-label') || '').trim().slice(0, 60);
      if (label) window.bohamTrack('cta_click', { label: label });
    }
  }, true);
  // scroll depth milestones (fire once each)
  const marks = [25, 50, 75, 100]; const seen = {};
  const onScrollDepth = function () {
    const h = document.documentElement;
    const max = h.scrollHeight - h.clientHeight;
    if (max <= 0) return;
    const pct = Math.round(((h.scrollTop || document.body.scrollTop) / max) * 100);
    marks.forEach(function (m) { if (pct >= m && !seen[m]) { seen[m] = true; window.bohamTrack('scroll_depth', { percent: m }); } });
  };
  window.addEventListener('scroll', onScrollDepth, { passive: true });
}

// ---- shared smooth-scroll to a section id ("sec-<id>") -------------------
window.bohamScrollTo = (id) => {
  if (id === 'home') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
  const el = document.getElementById('sec-' + id);
  if (!el) return;
  const navH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--nav-h')) || 84;
  const y = el.getBoundingClientRect().top + window.scrollY - navH + 1;
  window.scrollTo({ top: y, behavior: 'smooth' });
};
const WA = 'https://wa.me/5586999857676';
window.BOHAM_WA = WA;
const MENU_URL = 'https://drive.google.com/file/d/17MZFCa8g6qj_ptal4HEUmx6xoTE6mw1N/view?usp=drive_link';

// ---- WhatsApp glyph + brand-green button (shared) ------------------------
function WAIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ flex: 'none' }}>
      <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.064 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-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-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 0 1 2.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.359.101 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.585 0 11.946-5.359 11.949-11.893a11.821 11.821 0 0 0-3.421-8.453" />
    </svg>
  );
}

function WAButton({ size = 'md', label = 'WhatsApp', style = {} }) {
  const [hover, setHover] = React.useState(false);
  const sizes = { sm: { padding: '8px 18px', fontSize: 13, gap: 8, icon: 15 }, md: { padding: '12px 24px', fontSize: 14, gap: 9, icon: 17 } };
  const s = sizes[size] || sizes.md;
  return (
    <button onClick={() => window.open(WA, '_blank')} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: s.gap,
        padding: s.padding, borderRadius: 'var(--radius-pill)', border: '1px solid transparent', cursor: 'pointer',
        background: '#25D366', color: '#fff', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: s.fontSize,
        letterSpacing: '0.08em', textTransform: 'uppercase', lineHeight: 1, whiteSpace: 'nowrap',
        filter: hover ? 'brightness(0.95)' : 'none', boxShadow: hover ? 'var(--shadow-sm)' : 'none',
        transition: 'filter var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)', ...style,
      }}>
      <WAIcon size={s.icon} />{label}
    </button>
  );
}
window.BohamWAButton = WAButton;

// ---- Menu pill button (orange CTA, opens the menu PDF) -------------------
function MenuButton({ size = 'sm', style = {} }) {
  const lang = window.useBohamLang();
  const [hover, setHover] = React.useState(false);
  const sizes = { sm: { padding: '8px 16px', fontSize: 13, gap: 8, icon: 15 }, md: { padding: '12px 24px', fontSize: 14, gap: 9, icon: 17 } };
  const s = sizes[size] || sizes.sm;
  return (
    <button onClick={() => window.open(MENU_URL, '_blank')} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: s.gap,
        padding: s.padding, borderRadius: 'var(--radius-pill)', border: '1px solid transparent', cursor: 'pointer',
        background: 'var(--boham-orange)', color: '#fff', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: s.fontSize,
        letterSpacing: '0.08em', textTransform: 'uppercase', lineHeight: 1, whiteSpace: 'nowrap',
        filter: hover ? 'brightness(0.95)' : 'none', boxShadow: hover ? 'var(--shadow-sm)' : 'none',
        transition: 'filter var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)', ...style,
      }}>
      <svg width={s.icon} height={s.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: 'none' }}>
        <path d="M4 6h13M4 12h13M4 18h13M20 6v12" />
      </svg>
      {L(lang, 'Food menu', 'Cardápio', 'Menu')}
    </button>
  );
}
window.BohamMenuButton = MenuButton;

// ---- language switch -----------------------------------------------------
function LangSwitch({ dark }) {
  const lang = window.useBohamLang();
  const [open, setOpen] = React.useState(false);
  const langs = [['en', 'EN'], ['pt', 'PT'], ['fr', 'FR']];
  const names = { en: 'English', pt: 'Português', fr: 'Français' };
  const onCol = dark ? 'var(--boham-espresso)' : 'rgba(251,246,234,0.95)';
  const curLabel = (langs.find(([c]) => c === lang) || langs[0])[1];
  const ref = React.useRef(null);
  React.useEffect(() => {
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, []);
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button onClick={() => setOpen((o) => !o)} aria-label={names[lang]} aria-expanded={open} style={{
        display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', cursor: 'pointer',
        border: '1px solid ' + (dark ? 'rgba(42,36,32,0.25)' : 'rgba(251,246,234,0.45)'), borderRadius: 'var(--radius-pill)',
        padding: '5px 11px', fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: onCol,
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" style={{ flex: 'none' }}>
          <circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18" />
        </svg>
        {curLabel}
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" aria-hidden="true" style={{ flex: 'none', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}><path d="M6 9l6 6 6-6" /></svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 8px)', right: 0, minWidth: 132, zIndex: 80,
          background: 'var(--boham-cream)', border: '1px solid var(--line-soft)', borderRadius: 'var(--radius-md)',
          boxShadow: 'var(--shadow-md)', overflow: 'hidden', padding: '4px',
        }}>
          {langs.map(([code, label]) => (
            <button key={code} onClick={() => { window.bohamSetLang(code); setOpen(false); }} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, width: '100%',
              background: code === lang ? 'var(--boham-sand)' : 'none', border: 'none', cursor: 'pointer',
              padding: '9px 12px', borderRadius: 'var(--radius-sm, 8px)', textAlign: 'left',
              fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: code === lang ? 600 : 500, color: 'var(--boham-ink)',
            }}>
              <span>{names[code]}</span>
              <span style={{ fontSize: 11, letterSpacing: '0.1em', color: code === lang ? 'var(--boham-clay)' : 'var(--boham-stone)' }}>{label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// ---- Nav -----------------------------------------------------------------
function Nav() {
  const lang = window.useBohamLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled((window.scrollY || 0) > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const dark = scrolled || open;
  const links = [
    { id: 'about', label: L(lang, 'The place', 'O lugar', 'Le lieu') },
    { id: 'eat', label: L(lang, 'Eat & drink', 'Comer & beber', 'Manger & boire') },
    { id: 'kite', label: L(lang, 'Kite', 'Kite', 'Kite') },
    { id: 'barra', label: 'Barra Grande' },
    { id: 'visit', label: L(lang, 'Visit', 'Visite', 'Visiter') },
  ];
  const go = (id) => { setOpen(false); window.bohamScrollTo(id); };
  const handle = (l) => { setOpen(false); if (l.href) { window.open(l.href, '_blank'); } else { window.bohamScrollTo(l.id); } };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60,
      background: dark ? 'rgba(251,246,234,0.86)' : 'transparent',
      backdropFilter: dark ? 'var(--blur-glass)' : 'none', WebkitBackdropFilter: dark ? 'var(--blur-glass)' : 'none',
      borderBottom: dark ? '1px solid var(--line-soft)' : '1px solid transparent',
      transition: 'background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
    }}>
      <div style={{ height: 'var(--nav-h)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 clamp(20px,4vw,40px)', maxWidth: 1480, margin: '0 auto' }}>
        <button onClick={() => go('home')} aria-label="BOHAM Praia home" style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0, lineHeight: 0, display: 'inline-flex', alignItems: 'center',
        }}>
          <img src={dark ? window.RES('boham-site/logos/logo-rose.png') : window.RES('boham-site/logos/logo-butter.png')} alt="BOHAM Praia"
            style={{ height: 'clamp(30px,4.4vw,40px)', width: 'auto', display: 'block', transition: 'opacity var(--dur-base) var(--ease-out)' }} />
        </button>

        <nav className="boham-navlinks" style={{ display: 'flex', gap: 28, alignItems: 'center', marginLeft: 'clamp(24px,4vw,56px)', marginRight: 'auto' }}>
          {links.map((l) => (
            <button key={l.id} onClick={() => handle(l)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '6px 0',
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: dark ? 'var(--boham-espresso)' : 'rgba(251,246,234,0.92)',
            }}>{l.label}</button>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <LangSwitch dark={dark} />
          <MenuButton size="sm" style={{ marginLeft: 4 }} />
          <WAButton size="sm" label={L(lang, 'Say hi', 'Olá', 'Contact')} />
          <button className="boham-burger" onClick={() => setOpen((o) => !o)} aria-label="Menu" style={{
            display: 'none', flexDirection: 'column', gap: 5, width: 30, height: 26, justifyContent: 'center',
            background: 'none', border: 'none', cursor: 'pointer',
          }}>
            {[0,1,2].map((i) => <span key={i} style={{ height: 2, borderRadius: 2, background: dark ? 'var(--boham-teal)' : 'var(--boham-cream)', transition: 'transform .2s' }} />)}
          </button>
        </div>
      </div>

      {/* mobile panel */}
      <div className="boham-mobilemenu" style={{
        display: 'none', overflow: 'hidden', maxHeight: open ? 460 : 0,
        transition: 'max-height var(--dur-base) var(--ease-out)', background: 'rgba(251,246,234,0.97)',
        borderTop: open ? '1px solid var(--line-soft)' : '1px solid transparent',
      }}>
        <div style={{ padding: open ? '8px 24px 22px' : '0 24px' }}>
          {links.map((l) => (
            <button key={l.id} onClick={() => handle(l)} style={{
              display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer',
              padding: '13px 0', borderBottom: '1px solid var(--line-soft)',
              fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500, letterSpacing: '0.06em', color: 'var(--boham-espresso)',
            }}>{l.label}</button>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 940px){
          header .boham-navlinks{ display: none !important; }
          header .boham-burger{ display: flex !important; }
          header .boham-mobilemenu{ display: block !important; }
        }
      `}</style>
    </header>
  );
}

// ---- Hero: auto-playing, muted brand video -------------------------------
function Hero() {
  const lang = window.useBohamLang();
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true; v.volume = 0; v.defaultMuted = true;
    const START = 4, END = 49;
    const seekStart = () => { try { v.currentTime = START; } catch (e) {} };
    const onMeta = () => { seekStart(); v.play().catch(() => {}); };
    const onEnded = () => { seekStart(); v.play().catch(() => {}); };
    const onTime = () => { if (v.currentTime >= END) { seekStart(); v.play().catch(() => {}); } };
    if (v.readyState >= 1) onMeta(); else v.addEventListener('loadedmetadata', onMeta);
    v.addEventListener('ended', onEnded);
    v.addEventListener('timeupdate', onTime);
    return () => { v.removeEventListener('loadedmetadata', onMeta); v.removeEventListener('ended', onEnded); v.removeEventListener('timeupdate', onTime); };
  }, []);

  return (
    <section style={{ position: 'relative', minHeight: 'min(94vh, 880px)', display: 'flex', flexDirection: 'column', marginTop: 'calc(var(--nav-h) * -1)', overflow: 'hidden' }}>
      {window.BOHAM_NO_VIDEO ? (
        <img src={window.RES('boham-site/photos/aerial-beachclub.jpg')} alt="BOHAM Praia from above, the beach club at golden hour"
          className="boham-kb" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 55%' }} />
      ) : (
        <video ref={videoRef} autoPlay muted playsInline preload="auto" disablePictureInPicture
          poster={window.RES('boham-site/photos/aerial-beachclub.jpg')}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 55%' }}>
          <source src={window.RES('boham-site/video/this-is-boham.mp4')} type="video/mp4" />
        </video>
      )}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(42,36,32,0.30) 0%, rgba(214,140,136,0.10) 26%, rgba(42,36,32,0.18) 58%, rgba(42,36,32,0.66) 100%)' }} />

      <div className="boham-rise" style={{ position: 'relative', marginTop: 'auto', padding: '0 clamp(20px,4vw,40px) clamp(48px,7vw,84px)', maxWidth: 1480, width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
        <div style={{ marginBottom: 20 }}><span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--boham-cream)', textShadow: '0 1px 10px rgba(42,36,32,0.5)' }}>{L(lang, 'Barra Grande · Piauí, Brazil', 'Barra Grande · Piauí, Brasil', 'Barra Grande · Piauí, Brésil')}</span></div>
        <h1 style={{ margin: 0, fontFamily: 'var(--font-headline)', fontWeight: 400, color: 'var(--boham-cream)', fontSize: 'clamp(40px, 6.4vw, 92px)', lineHeight: 0.92, letterSpacing: '0.01em', textTransform: 'uppercase' }}>
          {L(lang, 'Where Barra Grande', 'Onde Barra Grande', 'Le rendez-vous')}
          <br />
          {L(lang, 'comes together', 'se encontra', 'de Barra Grande')}
        </h1>
        <div style={{ display: 'flex', gap: 8, marginTop: 26, flexWrap: 'wrap' }}>
          <Tag tone="solid">{L(lang, 'Kite point', 'Kite point', 'Kite point')}</Tag>
          <Tag tone="solid">{L(lang, 'Bar & restaurant', 'Bar & restaurante', 'Bar & restaurant')}</Tag>
          <span style={{ display: 'inline-flex', alignItems: 'center', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--boham-ink)', background: 'var(--boham-butter)', padding: '5px 12px', borderRadius: 'var(--radius-pill)', boxShadow: '0 2px 12px rgba(42,36,32,0.28)' }}>{L(lang, 'No dress code', 'No dress code', 'No dress code')}</span>
        </div>
      </div>

      <div onClick={() => window.bohamScrollTo('about')} className="boham-scrollcue" style={{ position: 'absolute', bottom: 22, left: '50%', transform: 'translateX(-50%)', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(251,246,234,0.7)' }}>{L(lang, 'Scroll', 'Role', 'Scroll')}</span>
        <span style={{ width: 1, height: 26, background: 'rgba(251,246,234,0.6)' }} />
      </div>
    </section>
  );
}

window.BohamNav = Nav;
window.BohamHero = Hero;
})();