/* global React */
/* BOHAM Praia — Part D: Instagram, Visit, Footer */
(function () {
  const { Tag, Button } = window.BOHAMDesignSystem_8e9a1f;
  const WA = window.BOHAM_WA || 'https://wa.me/5586999857676';
  const MAPS = 'https://maps.google.com/?q=BOHAM+Praia+Barra+Grande+Cajueiro+da+Praia+Piaui';
  const MAPS_EMBED = 'https://www.google.com/maps?q=BOHAM%20Praia%20Barra%20Grande%20Piau%C3%AD&output=embed';
  const IG = 'https://instagram.com/bohampraia';
  const IG_HANDLE = '@bohampraia';
  const TIKTOK = 'https://www.tiktok.com/@boham_praia';
  const FACEBOOK = 'https://www.facebook.com/profile.php?id=61561050560191';

  function TtIcon({ size = 17, color = 'currentColor' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true" style={{ flex: 'none' }}>
        <path d="M16.6 5.82a4.28 4.28 0 0 1-1.05-2.82h-3.2v12.86a2.59 2.59 0 0 1-2.59 2.5 2.59 2.59 0 0 1-2.59-2.59 2.59 2.59 0 0 1 3.4-2.46V9.99a5.84 5.84 0 0 0-.81-.06A5.79 5.79 0 0 0 4 15.72a5.79 5.79 0 0 0 9.97 4 5.78 5.78 0 0 0 1.61-4V9.01a7.5 7.5 0 0 0 4.42 1.42V7.23a4.28 4.28 0 0 1-3.4-1.41z" />
      </svg>);

  }

  function FbIcon({ size = 18, color = 'currentColor' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true" style={{ flex: 'none' }}>
        <path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.01 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8v8.44C19.61 23.08 24 18.09 24 12.07z" />
      </svg>);

  }

  function WaIcon({ size = 18, color = 'currentColor' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true" style={{ flex: 'none' }}>
        <path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.22 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.69.25-1.29.18-1.41-.07-.12-.27-.2-.57-.35M12.04 21.5h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.9-9.88 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.9 6.99c0 5.45-4.44 9.88-9.89 9.88M20.52 3.45A11.82 11.82 0 0 0 12.04 0C5.46 0 .1 5.36.1 11.94c0 2.1.55 4.15 1.6 5.95L0 24l6.3-1.65a11.9 11.9 0 0 0 5.7 1.45h.01c6.58 0 11.94-5.36 11.94-11.94 0-3.19-1.24-6.19-3.5-8.45" />
      </svg>);

  }

  function MapPinIcon({ size = 18, color = 'currentColor' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: 'none' }}>
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
        <circle cx="12" cy="10" r="3" />
      </svg>);

  }

  function IgIcon({ size = 18, color = 'currentColor' }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: 'none' }}>
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>);

  }

  // ---- Instagram pill button (brand gradient + glyph, like WhatsApp) -------
  function IGButton({ size = 'md', label = 'Instagram', style = {} }) {
    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.md;
    return (
      <button onClick={() => window.open(IG, '_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: 'linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%)',
        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
      }}>
        <IgIcon size={s.icon} color="#fff" />{label}
      </button>);

  }
  function Insta() {
    const lang = window.useBohamLang();
    const [liveReady, setLiveReady] = React.useState(false);
    React.useEffect(() => {
      if (!window.customElements) return;
      let alive = true;
      window.customElements.whenDefined('behold-widget').then(() => {if (alive) setLiveReady(true);});
      return () => {alive = false;};
    }, []);
    const posts = [
    { src: 'boham-site/photos/real-crowd-sunset.jpg', tag: L(lang, 'Golden hour', 'Hora dourada', 'Heure dorée') },
    { src: 'boham-site/photos/kite-lesson.jpg', tag: L(lang, 'Wind\u2019s up', 'Entrou o vento', 'Le vent se lève') },
    { src: 'boham-site/photos/real-lounge-couple.jpg', tag: L(lang, 'Long afternoons', 'Tardes longas', 'Longs après-midi') },
    { src: 'boham-site/photos/real-pool.jpg', tag: L(lang, 'Pool days', 'Dias de piscina', 'Journées piscine') },
    { src: 'boham-site/photos/real-stairs.jpg', tag: L(lang, 'The space', 'O espaço', 'Le lieu') },
    { src: 'boham-site/photos/real-style.jpg', tag: L(lang, 'Casual chic', 'Casual chic', 'Casual chic') }];

    const open = () => window.open(IG, '_blank');
    return (
      <section style={{ background: 'var(--surface-page)', padding: 'clamp(40px,5vw,68px) clamp(20px,4vw,44px)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto clamp(24px,3vw,34px)' }}>
          <div className="boham-eyebrow" style={{ color: 'var(--boham-clay)', marginBottom: 14 }}>{L(lang, "What's on", 'Programação', 'Quoi de neuf ?')}</div>
          <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(34px,5.4vw,68px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: 0, lineHeight: 0.96 }}>{L(lang, 'Stay in the know', 'Fique por dentro', 'Restez connectés')}</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--boham-espresso)', marginTop: 16 }}>
            {L(lang, 'Sunset line-ups, live music, events and the day’s wind report all land on Instagram first. Follow along so you never miss a good one.', 'Line-ups do sunset, música ao vivo, eventos e a previsão de vento do dia chegam primeiro no Instagram. Acompanhe pra não perder nenhuma.', 'Les événements, la programmation, les conditions de vent, les meilleurs sunsets, et tout ce qui fait vivre BOHAM. Restez connectés pour ne rien manquer.')}
          </p>
        </div>

        {/* profile bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(14px,2vw,20px)', flexWrap: 'wrap', justifyContent: 'center', marginBottom: 'clamp(22px,3vw,30px)' }}>
          <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--boham-rose)', display: 'grid', placeItems: 'center', flex: 'none', boxShadow: 'var(--shadow-sm)' }}>
            <img src={window.RES('boham-site/logos/logo-butter.png')} alt="BOHAM Praia" style={{ width: 40, height: 'auto' }} />
          </div>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 18, color: 'var(--boham-ink)' }}>{IG_HANDLE}</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--boham-stone)' }}>{L(lang, 'Kite point, restaurant & sunset bar in Barra Grande, Piauí', 'Pico de kite, restaurante & bar em Barra Grande, Piauí', 'Spot de kite, restaurant & sunet bar à Barra Grande, Piauí')}</div>
          </div>
        </div>

        {/* feed — constrained width, centered */}
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
        {/* live Instagram feed (Behold) — renders on the deployed site */}
        <behold-widget feed-id="d1i7RKK7W6CI1arxNo4k" style={{ display: liveReady ? 'block' : 'none', width: '100%' }}></behold-widget>

        {/* post grid — fallback shown until the live feed loads */}
        <div className="boham-iggrid" style={{ display: liveReady ? 'none' : 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(8px,1.2vw,16px)' }}>
          {posts.map((p, n) =>
              <button key={n} onClick={open} className="boham-igtile" aria-label={'Open Instagram \u2014 ' + p.tag} style={{
                position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden', border: 'none', padding: 0, cursor: 'pointer', background: 'none'
              }}>
              <img src={window.RES(p.src)} alt={p.tag} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform var(--dur-slow,480ms) var(--ease-out)' }} />
              <span className="boham-igover" style={{
                  position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8,
                  background: 'rgba(28,102,102,0.46)', color: 'var(--boham-cream)', opacity: 0, transition: 'opacity var(--dur-base) var(--ease-out)'
                }}>
                <IgIcon size={26} color="var(--boham-cream)" />
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{p.tag}</span>
              </span>
            </button>
              )}
        </div>
        </div>

        {/* follow — title + social icons, leading into Visit */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, marginTop: 'clamp(28px,3.5vw,42px)' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--boham-clay)' }}>{L(lang, 'Follow', 'Siga', 'Suivez-nous')}</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            {[
              { label: 'Instagram', url: IG, icon: <IgIcon size={20} color="var(--boham-cream)" /> },
              { label: 'TikTok', url: TIKTOK, icon: <TtIcon size={19} color="var(--boham-cream)" /> },
              { label: 'Facebook', url: FACEBOOK, icon: <FbIcon size={20} color="var(--boham-cream)" /> }].
              map((s) =>
              <a key={s.label} href={s.url} target="_blank" rel="noopener" aria-label={s.label} title={s.label} style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46,
                borderRadius: '50%', background: 'var(--boham-teal)', color: 'var(--boham-cream)',
                transition: 'transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.background = 'var(--boham-clay)';}}
              onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.background = 'var(--boham-teal)';}}>
                {s.icon}
              </a>
              )}
          </div>
        </div>
      </div>
      <style>{`
        .boham-igtile:hover img{ transform: scale(1.05); }
        .boham-igtile:hover .boham-igover{ opacity: 1; }
        @media (max-width: 620px){ .boham-iggrid{ grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>);

  }

  // ---- Visit (cream) -------------------------------------------------------
  function Visit() {
    const lang = window.useBohamLang();
    const rows = [
    { k: L(lang, 'Mon – Thu', 'Seg – Qui', 'Lun – Jeu'), v: '11:00 – 18:30' },
    { k: L(lang, 'Fri – Sun', 'Sex – Dom', 'Ven – Dim'), v: L(lang, '11:00 – 19:00 · live music & DJ at sunset', '11:00 – 19:00 · música ao vivo & DJ no pôr do sol', '11:00 – 19:00 musique live & DJ au coucher du soleil') }];

    return (
      <section style={{ background: 'var(--surface-page)', padding: 'clamp(72px,9vw,116px) clamp(20px,4vw,44px)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div className="boham-visit-wrap" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 'clamp(14px,2vw,22px)', alignItems: 'stretch' }}>

          {/* visit card: info panel over photo */}
          <div style={{ boxShadow: 'var(--shadow-md)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ background: 'var(--boham-cream)', padding: 'clamp(32px,4vw,48px) clamp(26px,4vw,48px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
              <div className="boham-eyebrow" style={{ color: 'var(--boham-clay)', marginBottom: 14 }}>{L(lang, 'Visit', 'Visite', 'Visiter')}</div>
              <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(27px,3.4vw,52px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: '0 0 8px', lineHeight: 0.96, whiteSpace: 'nowrap', textAlign: "center" }}>{L(lang, 'SEE YOU AT BOHAM', 'ATÉ JÁ NO BOHAM', 'À BIENTÔT AU BOHAM')}</h2>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.6, color: 'var(--boham-espresso)', margin: '0 auto 26px', maxWidth: 440 }}>{L(lang, 'Walk in off the beach: no reservations, no fuss. Lunch, sunset or somewhere in between, there’s always room for one more.', 'Chega direto da praia: sem reserva, sem complicação. Almoço, pôr do sol ou qualquer hora no meio, sempre tem lugar pra mais um.', 'Entrez directement depuis la plage : sans réservation ni dress code. Pour déjeuner, pour un verre ou pour profiter du meilleur sunset de Barra Grande, il y a toujours une bonne raison de s’arrêter.')}

                </p>

              <div style={{ marginBottom: 28, width: '100%', maxWidth: 360 }}>
                {rows.map((r) =>
                  <div key={r.k} style={{ display: 'flex', alignItems: 'baseline', gap: 14, padding: '12px 0', borderTop: '1px solid var(--line-soft)' }}>
                    <div style={{ flex: '0 0 96px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--boham-clay)', textAlign: "left" }}>{r.k}</div>
                    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--boham-ink)', textAlign: "left" }}>{r.v}</div>
                  </div>
                  )}
              </div>

              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}>
                {[
                  { label: 'WhatsApp', url: WA, icon: <WaIcon size={20} color="var(--boham-cream)" /> },
                  { label: 'Instagram', url: IG, icon: <IgIcon size={20} color="var(--boham-cream)" /> },
                ].map((s) => (
                  <a key={s.label} href={s.url} target="_blank" rel="noopener" aria-label={s.label} title={s.label} style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46,
                    borderRadius: '50%', background: 'var(--boham-teal)', color: 'var(--boham-cream)',
                    transition: 'transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)',
                  }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.background = 'var(--boham-clay)'; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.background = 'var(--boham-teal)'; }}>
                    {s.icon}
                  </a>
                ))}
                <a href={MAPS} target="_blank" rel="noopener" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 7, textDecoration: 'none',
                  fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--boham-teal)',
                }}>
                  <MapPinIcon size={16} color="var(--boham-teal)" />{L(lang, 'Open in Maps ↗', 'Abrir no Maps ↗', 'Ouvrir dans Maps ↗')}
                </a>
              </div>
            </div>
            <div style={{ position: 'relative', height: 'clamp(220px,24vw,300px)', flex: 'none' }}>
              <img src={window.RES('boham-site/photos/real-pool-steps.jpg')} alt="By the pool on the terracotta steps at BOHAM" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 62%' }} />
            </div>
          </div>

          {/* live map — beside the card on big screens */}
          <div className="boham-visit-map" style={{ position: 'relative', boxShadow: 'var(--shadow-md)', overflow: 'hidden', minHeight: 'clamp(300px,40vw,520px)' }}>
            <iframe title="BOHAM Praia on Google Maps" src={MAPS_EMBED} loading="lazy" referrerPolicy="no-referrer-when-downgrade"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, display: 'block', filter: 'saturate(0.92)' }}></iframe>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 860px){ .boham-visit-wrap{ grid-template-columns: 1fr !important; } .boham-visit-map{ min-height: 300px !important; } }`}</style>
    </section>);

  }

  // ---- Footer (teal) -------------------------------------------------------
  function Footer() {
    const lang = window.useBohamLang();
    const cols = [
    { h: L(lang, 'Find us', 'Onde estamos', 'Nous trouver'), items: ['Rua das Flores 35, Barra Grande', L(lang, 'Cajueiro da Praia, Piauí · CEP 64222-000', 'Cajueiro da Praia, Piauí · CEP 64222-000', 'Cajueiro da Praia, Piauí · CEP 64222-000'), L(lang, 'Brazil 🇧🇷', 'Brasil 🇧🇷', 'Brésil 🇧🇷')] },
    { h: L(lang, 'Open everyday', 'Aberto todos os dias', 'Ouvert tous les jours'), items: [L(lang, 'Mon–Thu 11:00–18:30', 'Seg–Qui 11:00–18:30', 'Lun–Jeu 11:00–18:30'), L(lang, 'Fri–Sun 11:00–19:00', 'Sex–Dom 11:00–19:00', 'Ven–Dim 11:00–19:00')] },
    { h: L(lang, 'Say hi', 'Fale com a gente', 'Bonjour'), items: ['@bohampraia', 'bohampraia@gmail.com', '+55 (86) 99985-7676'] }];

    return (
      <footer style={{ background: 'var(--boham-teal)', color: 'var(--boham-cream)', padding: 'clamp(64px,8vw,96px) clamp(20px,4vw,44px) 40px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 40, alignItems: 'start' }}>
          <div>
            <img src={window.RES('boham-site/logos/logo-rose.png')} alt="BOHAM Praia" style={{ height: 60, width: 'auto', display: 'block' }} />
          </div>
          {cols.map((c) =>
            <div key={c.h}>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--boham-rose)', marginBottom: 16 }}>{c.h}</div>
              {c.items.map((it) => <div key={it} style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'rgba(251,246,234,0.85)', lineHeight: 1.9 }}>{it}</div>)}
            </div>
            )}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginTop: 60, paddingTop: 22, borderTop: '1px solid var(--line-on-dark)' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'rgba(251,246,234,0.6)' }}>{L(lang, '© 2026 BOHAM Praia · Barra Grande, Piauí, Brazil', '© 2026 BOHAM Praia · Barra Grande, Piauí, Brasil', '© 2026 BOHAM Praia · Barra Grande, Piauí, Brésil')}</span>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, letterSpacing: '0.06em', color: 'rgba(251,246,234,0.6)' }}>{L(lang, 'Good drinks. Good music. Good people.', 'Boa bebida. Boa música. Gente boa.', 'Du vent. Du soleil. Et des bons moments.')}</span>
        </div>
      </div>
    </footer>);

  }

  window.BohamGallery = Insta;
  window.BohamVisit = Visit;
  window.BohamFooter = Footer;

  // ---- Reviews (rose) — Google + Tripadvisor ratings ----------------------
  // ⚠️ REPLACE these with your real figures (or leave score:null to hide the number
  //    and just show "Read reviews"). For a LIVE Tripadvisor score, paste your
  //    Management-Center widget embed and set tripadvisor.widget = true below.
  const REVIEWS_CFG = {
    google: {
      score: '4.6',
      count: '',
      url: 'https://share.google/rdRDwNuw20nXmpxiy'
    },
    tripadvisor: {
      score: '4.7',
      count: '',
      url: 'https://www.tripadvisor.com.br/Restaurant_Review-g3844531-d28034460-Reviews-Boham_Praia-Barra_Grande_Cajueiro_da_Praia_State_of_Piaui.html',
      widget: false // set true once you paste the official TA widget into TripadvisorWidget()
    }
  };

  function GoogleLogo({ size = 26 }) {
    return (
      <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true" style={{ flex: 'none' }}>
        <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.6-.4-3.5z" />
        <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z" />
        <path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.6 39.6 16.2 44 24 44z" />
        <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.1 5.6l6.2 5.2C39.8 36.5 44 31 44 24c0-1.3-.1-2.6-.4-3.5z" />
      </svg>);

  }
  function TripadvisorLogo({ size = 26 }) {
    return (
      <svg width={size * 1.7} height={size} viewBox="0 0 220 120" aria-hidden="true" style={{ flex: 'none' }}>
        <circle cx="74" cy="60" r="46" fill="#34E0A1" />
        <circle cx="74" cy="60" r="40" fill="#000" />
        <circle cx="74" cy="60" r="25" fill="#fff" />
        <circle cx="74" cy="60" r="11" fill="#000" />
        <circle cx="146" cy="60" r="46" fill="#34E0A1" />
        <circle cx="146" cy="60" r="40" fill="#000" />
        <circle cx="146" cy="60" r="25" fill="#fff" />
        <circle cx="146" cy="60" r="11" fill="#000" />
        <path d="M110 8 C92 8 77 19 71 35 h78 C143 19 128 8 110 8 Z" fill="#000" />
        <path d="M110 112 l-13 -17 h26 z" fill="#000" />
      </svg>);

  }
  function Stars({ n, value, size = 16, color = 'var(--boham-orange)' }) {
    const v = value != null ? value : n != null ? n : 5;
    const empty = 'rgba(42,36,32,0.18)';
    return (
      <span style={{ display: 'inline-flex', gap: 2 }} aria-label={v + ' out of 5'}>
        {Array.from({ length: 5 }).map((_, i) => {
          const fill = Math.max(0, Math.min(1, v - i));
          const id = 'bstar' + i + '_' + Math.round(v * 10) + '_' + size;
          return (
            <svg key={i} width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
              <defs><linearGradient id={id} x1="0" y1="0" x2="1" y2="0">
                <stop offset={fill * 100 + '%'} stopColor={color} />
                <stop offset={fill * 100 + '%'} stopColor={empty} />
              </linearGradient></defs>
              <path fill={'url(#' + id + ')'} d="M12 2l2.9 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77 5.82 21l1.18-6.88-5-4.87 7.1-1.01L12 2z" />
            </svg>);

        })}
      </span>);

  }

  // Live Tripadvisor widget slot — paste your Management-Center embed inside the
  // useEffect (create the <script>/<div> the same way the Windguru widget does),
  // then set REVIEWS_CFG.tripadvisor.widget = true.
  function TripadvisorWidget() {
    const ref = React.useRef(null);
    React.useEffect(() => {






      // const host = ref.current; ... inject TA widget script here ...
    }, []);return <div ref={ref} style={{ minHeight: 120 }} />;}function ReviewCard({ logo, name, cfg, lang }) {const scoreDisp = cfg.score && lang !== 'en' ? cfg.score.replace('.', ',') : cfg.score;const filled = cfg.score ? Math.round(parseFloat(cfg.score)) : 5;
    return (
      <a href={cfg.url} target="_blank" rel="noopener" style={{
        display: 'flex', alignItems: 'center', gap: 18, textDecoration: 'none',
        background: 'var(--boham-cream)', border: '1px solid var(--line-soft)', padding: 'clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px)', boxShadow: 'var(--shadow-sm)', flex: '1 1 280px'
      }}>
        {logo}
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--boham-clay)', marginBottom: 6 }}>{name}</div>
          {cfg.score ?
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(30px,3.6vw,42px)', lineHeight: 0.9, color: 'var(--boham-teal)' }}>{scoreDisp}</span>
              <Stars n={filled} size={15} />
            </div> :

          <div style={{ marginBottom: 2 }}><Stars n={5} size={16} /></div>
          }
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--boham-teal)', fontWeight: 500, marginTop: 6 }}>
            {cfg.count ? cfg.count + ' · ' : ''}{L(lang, 'Read reviews ↗', 'Ver avaliações ↗', 'Voir les avis ↗')}
          </div>
        </div>
      </a>);

  }

  function Reviews() {
    const lang = window.useBohamLang();
    const Chip = ({ logo, name, cfg }) => {
      const scoreDisp = cfg.score && lang !== 'en' ? cfg.score.replace('.', ',') : cfg.score;
      return (
        <a href={cfg.url} target="_blank" rel="noopener" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none',
          background: 'var(--boham-cream)', border: '1px solid var(--line-soft)', padding: '8px 16px', boxShadow: 'var(--shadow-sm)'
        }}>
          {logo}
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--boham-stone)' }}>{name}</span>
          <span style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 22, lineHeight: 1, color: 'var(--boham-teal)' }}>{scoreDisp}</span>
          <Stars value={cfg.score ? parseFloat(cfg.score) : 5} size={13} />
        </a>);

    };
    return (
      <section style={{ background: 'var(--surface-page)', padding: 'clamp(12px,1.6vw,18px) clamp(20px,4vw,44px)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
        <div className="boham-reviews-row" style={{ maxWidth: 1180, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'clamp(14px,3vw,36px)', flexWrap: 'wrap' }}>
          <Chip logo={<GoogleLogo size={22} />} name="Google" cfg={REVIEWS_CFG.google} />
          <Chip logo={<TripadvisorLogo size={18} />} name="Tripadvisor" cfg={REVIEWS_CFG.tripadvisor} />
        </div>
        <style>{`@media (max-width: 600px){ .boham-reviews-row{ flex-wrap: nowrap !important; gap: 16px !important; } }`}</style>
      </section>);

  }
  window.BohamReviews = Reviews;
})();