/* global React */
/* BOHAM — dedicated kitesurf page (Kitesurf Barra Grande) */
(function () {
  const { Tag } = window.BOHAMDesignSystem_8e9a1f;
  const L = window.L;
  const PRICES = 'https://drive.google.com/file/d/1V4wpFTFZEXam-83n-LdLN14nbA9ZtaJl/view?usp=drive_link';
  const IG_SCHOOL = 'https://www.instagram.com/bohamkiteschool/';

  function PillLink({ href, children, tone = 'teal' }) {
    const bg = tone === 'teal' ? 'var(--boham-teal)' : 'var(--boham-butter)';
    const fg = tone === 'teal' ? 'var(--boham-butter)' : 'var(--boham-teal)';
    return (
      <a href={href} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: fg, background: bg, padding: '11px 20px', borderRadius: 'var(--radius-pill)', textDecoration: 'none', lineHeight: 1 }}>{children}</a>);
  }

  // ---- Hero ---------------------------------------------------------------
  function KiteHero() {
    const lang = window.useBohamLang();
    const IgIcon = window.BohamIgIcon;
    return (
      <section style={{ position: 'relative', marginTop: 'calc(var(--nav-h) * -1)', minHeight: 'min(86vh, 760px)', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
        <img className="boham-kb" src={window.RES('boham-site/photos/real-beach-aerial-kite.jpg')} alt="Kitesurfers on the beach in front of BOHAM at Barra Grande, Piauí, seen from the air" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 45%' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(19,75,75,0.45) 0%, rgba(19,75,75,0.15) 40%, rgba(42,36,32,0.78) 100%)' }} />
        <div style={{ position: 'relative', width: '100%', maxWidth: 1240, margin: '0 auto', padding: 'clamp(90px,12vw,150px) clamp(20px,4vw,44px) clamp(40px,5vw,64px)' }}>
          <div className="boham-eyebrow" style={{ color: 'var(--boham-rose)', marginBottom: 14 }}>{L(lang, 'Barra Grande · Piauí · Brazil', 'Barra Grande · Piauí · Brasil', 'Barra Grande · Piauí · Brésil')}</div>
          <h1 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(38px,7vw,96px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-butter)', margin: 0, lineHeight: 0.92, maxWidth: 14 + 'ch' }}>
            {L(lang, 'Kitesurf in Barra Grande', 'Kitesurf em Barra Grande', 'Kitesurf à Barra Grande')}
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'clamp(16px,2vw,19px)', lineHeight: 1.55, color: 'var(--boham-cream)', margin: '20px 0 0', maxWidth: 620 }}>
            {L(lang,
              'Flat water, side-onshore trades from July to January, and a kite school on the sand at BOHAM: lessons, brand-new Reedin 2026 rental gear, storage, beach assistance and guided downwinders.',
              'Água plana, alísios side-onshore de julho a janeiro e uma escola de kite na areia do BOHAM: aulas, equipamento Reedin 2026 novo para alugar, guardaria, assistência na praia e downwinds guiados.',
              'Eau plate, alizés side-on de juillet à janvier, et une école de kite sur le sable du BOHAM : cours, matériel Reedin 2026 neuf en location, stockage, assistance plage et downwinds guidés.')}
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', marginTop: 26 }}>
            <window.BohamWAButton size="md" label={L(lang, 'Book a lesson', 'Marcar uma aula', 'Réserver un cours')} />
            <PillLink href={PRICES} tone="butter">{L(lang, 'Lessons & rental prices ↗', 'Tabela de preços ↗', 'Tarifs cours & location ↗')}</PillLink>
            <a href={IG_SCHOOL} target="_blank" rel="noopener" aria-label="@bohamkiteschool on Instagram" title="@bohamkiteschool" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46, borderRadius: '50%', background: 'var(--boham-teal)', color: 'var(--boham-cream)', flex: 'none' }}>
              {IgIcon && <IgIcon size={20} color="var(--boham-cream)" />}
            </a>
          </div>
        </div>
      </section>);
  }

  // ---- The spot: conditions + live forecast --------------------------------
  function Spot() {
    const lang = window.useBohamLang();
    const stats = [
    { n: '18–30', u: L(lang, 'knots', 'nós', 'nœuds'), k: L(lang, 'Gusts to 35 in peak season', 'Rajadas até 35 na alta temporada', 'Rafales jusqu’à 35 en haute saison') },
    { n: 'SIDE-ON', u: L(lang, 'shore', 'shore'), k: L(lang, 'A downed kite drifts you back in', 'Kite na água te traz de volta à praia', 'Un vent régulier qui ramène vers la plage') },
    { n: 'JUL–JAN', u: '', k: L(lang, 'Wind season, peak Sep–Nov', 'Temporada de vento, pico set–nov', 'Saison de vent, pic sept–nov') },
    { n: '27°', u: 'C', k: L(lang, 'Warm water, no wetsuit', 'Água quente o ano todo', 'Eau chaude toute l’année') }];

    const facts = [
    { k: L(lang, 'Flat water at low tide', 'Água plana na maré baixa', 'Flat à marée basse'), v: L(lang, 'Large shallow areas open up right in front of BOHAM: waist-deep, forgiving, and ideal for first lessons, water starts and freestyle.', 'Grandes áreas rasas surgem bem na frente do BOHAM: água na cintura, perdoa erros, ideal para as primeiras aulas, water start e freestyle.', 'De grandes zones peu profondes s’ouvrent juste devant BOHAM : eau à la taille, indulgente, idéale pour les premiers cours, les water starts et le freestyle.') },
    { k: L(lang, 'Choppier at high tide', 'Mais mexido na maré alta', 'Plus clapoteux à marée haute'), v: L(lang, 'The water gets livelier as the tide fills in, with enough push to work on jumps and transitions. All levels, all tides.', 'A água fica mais viva conforme a maré enche, com impulso suficiente para treinar saltos e transições. Todos os níveis, todas as marés.', 'Le plan d’eau s’anime à marée montante, avec assez de relief pour travailler sauts et transitions. Tous niveaux, toutes marées.') },
    { k: L(lang, 'Space on the water', 'Espaço na água', 'De l’espace sur l’eau'), v: L(lang, 'Barra Grande is still a fishing village. Even in peak season the beach stays wide and the line-up uncrowded.', 'Barra Grande ainda é uma vila de pescadores. Mesmo na alta temporada a praia é larga e a água, vazia.', 'Barra Grande reste un village de pêcheurs. Même en pleine saison, la plage est large et l’eau peu fréquentée.') }];

    return (
      <section id="sec-spot" style={{ background: 'var(--surface-page)', padding: 'clamp(64px,8vw,104px) clamp(20px,4vw,44px)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div className="boham-eyebrow" style={{ color: 'var(--boham-clay-ink)', marginBottom: 14 }}>{L(lang, 'The spot', 'O pico', 'Le spot')}</div>
          <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(32px,4.6vw,58px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: 0, lineHeight: 0.96, maxWidth: 900 }}>
            {L(lang, 'Kitesurfing conditions in Barra Grande', 'Condições de kitesurf em Barra Grande', 'Les conditions de kitesurf à Barra Grande')}
          </h2>

          <div style={{ marginTop: 'clamp(28px,3.6vw,44px)', background: 'var(--boham-clay)', padding: 'clamp(26px,3.6vw,44px)', display: 'flex', flexDirection: 'column', gap: 'clamp(24px,3vw,34px)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 'clamp(18px,2.4vw,30px)' }}>
              {stats.map((s) =>
                <div key={s.k}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                    <span style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, lineHeight: 1, color: 'var(--boham-butter)', fontSize: 'clamp(30px,3.4vw,40px)' }}>{s.n}</span>
                    {s.u && <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, letterSpacing: '0.04em', color: 'var(--boham-cream)' }}>{s.u}</span>}
                  </div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, lineHeight: 1.4, color: 'rgba(251,246,234,0.82)', marginTop: 7 }}>{s.k}</div>
                </div>)}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'clamp(20px,3vw,40px)' }}>
              {facts.map((f) =>
                <div key={f.k} style={{ borderTop: '1px solid rgba(251,246,234,0.3)', paddingTop: 16 }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--boham-butter)', marginBottom: 6 }}>{f.k}</div>
                  <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.55, color: 'rgba(251,246,234,0.9)', margin: 0 }}>{f.v}</p>
                </div>)}
            </div>

            <div style={{ borderTop: '1px solid rgba(251,246,234,0.3)', paddingTop: 'clamp(20px,2.6vw,28px)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, marginBottom: 14 }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--boham-butter)' }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--boham-orange)' }}></span>
                  {L(lang, 'Live forecast · Windguru', 'Previsão ao vivo · Windguru', 'Prévisions en direct · Windguru')}
                </div>
                <a href="https://www.windguru.cz/620599" target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--boham-cream)', fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 3 }}>{L(lang, 'Full forecast ↗', 'Previsão completa ↗', 'Prévisions complètes ↗')}</a>
              </div>
              <window.BohamWindguru />
            </div>
          </div>
        </div>
      </section>);
  }

  // ---- How a course works ---------------------------------------------------
  function Lessons() {
    const lang = window.useBohamLang();
    const levels = [
    { t: L(lang, 'Never kited', 'Nunca velejou', 'Jamais kité'), h: L(lang, '6–9 h, usually 3 days', '6–9 h, normalmente 3 dias', '6–9 h, souvent 3 jours'), d: L(lang, 'Wind window and safety systems, body drag, board recovery, first water starts and first rides in the shallows.', 'Janela de vento e sistemas de segurança, body drag, recuperar a prancha, primeiros water starts e primeiras navegadas na água rasa.', 'Fenêtre de vent et systèmes de sécurité, body drag, récupération de planche, premiers water starts et premiers bords dans le shallow.') },
    { t: L(lang, 'Riding, not independent', 'Já navega, sem autonomia', 'Navigue, pas autonome'), h: L(lang, '2–4 h', '2–4 h', '2–4 h'), d: L(lang, 'Upwind riding, transitions, self-launch and self-rescue, reading the tide and choosing the right kite size.', 'Navegar contra o vento, transições, decolagem e auto-resgate, ler a maré e escolher o tamanho de kite certo.', 'Remonter au vent, transitions, décollage seul et auto-sauvetage, lire la marée et choisir la bonne taille d’aile.') },
    { t: L(lang, 'Progression & coaching', 'Evolução & coaching', 'Progression & coaching'), h: L(lang, 'By the hour', 'Por hora', 'À l’heure'), d: L(lang, 'Jumps, first tricks, strapless or foil sessions, filmed and reviewed between runs, plus guided downwinders.', 'Saltos, primeiras manobras, sessões strapless ou foil, filmadas e analisadas entre as séries, além de downwinds guiados.', 'Sauts, premières figures, sessions strapless ou foil, filmées et débriefées entre deux bords, et downwinds guidés.') }];

    const included = [
    L(lang, 'Reedin 2026 kite, board, bar and harness', 'Kite, prancha, barra e trapézio Reedin 2026', 'Aile, planche, barre et harnais Reedin 2026'),
    L(lang, 'Helmet, impact vest and radio helmet', 'Capacete, colete de impacto e capacete com rádio', 'Casque, gilet d’impact et casque radio'),
    L(lang, 'One instructor, individual lessons', 'Um instrutor, aulas individuais', 'Un moniteur, cours individuels'),
    L(lang, 'Beach assistance, launch and landing', 'Assistência na praia, decolagem e pouso', 'Assistance plage, décollage et atterrissage')];

    const bring = [
    L(lang, 'Lycra or rashguard, boardshorts or bikini', 'Lycra, bermuda ou biquíni', 'Lycra, boardshort ou maillot'),
    L(lang, 'Reef-safe sunscreen and a cap', 'Protetor solar e boné', 'Crème solaire et casquette'),
    L(lang, 'Sunglasses with a leash', 'Óculos de sol com cordinha', 'Lunettes avec cordon'),
    L(lang, 'No wetsuit needed: the water is 27 °C', 'Sem roupa de neoprene: a água tem 27 °C', 'Pas de combinaison : l’eau est à 27 °C')];

    const Col = ({ title, items }) =>
      <div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--boham-clay-ink)', marginBottom: 12 }}>{title}</div>
        <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
          {items.map((it) =>
            <li key={it} style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--boham-espresso)', display: 'flex', gap: 10 }}>
              <span aria-hidden="true" style={{ color: 'var(--boham-teal)', flex: 'none' }}>—</span>{it}
            </li>)}
        </ul>
      </div>;

    return (
      <section id="sec-lessons" style={{ background: 'var(--surface-page)', padding: 'clamp(64px,8vw,104px) clamp(20px,4vw,44px)', borderTop: '1px solid var(--line-soft)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div className="boham-eyebrow" style={{ color: 'var(--boham-clay-ink)', marginBottom: 14 }}>{L(lang, 'Learning here', 'Aprender aqui', 'Apprendre ici')}</div>
          <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(30px,4.2vw,54px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: 0, lineHeight: 0.96, maxWidth: 900 }}>
            {L(lang, 'How a kite course works', 'Como funciona um curso de kite', 'Comment se déroule un cours')}
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--boham-espresso)', margin: '16px 0 0', maxWidth: 640 }}>
            {L(lang, 'Lessons run in the morning when the wind is lighter, or in the afternoon once it fills in. We follow the tide: shallow flat water for the first hours, deeper water as you get independent.', 'As aulas acontecem de manhã, com vento mais leve, ou à tarde quando ele entra. Seguimos a maré: água rasa e plana nas primeiras horas, água mais funda conforme você ganha autonomia.', 'Les cours ont lieu le matin quand le vent est plus léger, ou l’après-midi une fois qu’il est établi. On suit la marée : eau plate et peu profonde pour les premières heures, plus profonde à mesure que vous devenez autonome.')}
          </p>

          <div className="boham-levels" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(18px,2.4vw,30px)', marginTop: 'clamp(30px,3.6vw,46px)' }}>
            {levels.map((l) =>
              <div key={l.t} style={{ borderTop: '2px solid var(--boham-teal)', paddingTop: 14 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', marginBottom: 6 }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--boham-teal)' }}>{l.t}</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--boham-clay-ink)' }}>{l.h}</span>
                </div>
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--boham-espresso)', margin: 0 }}>{l.d}</p>
              </div>)}
          </div>

          <div className="boham-levels2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(24px,3vw,48px)', marginTop: 'clamp(30px,3.6vw,46px)', borderTop: '1px solid var(--line-soft)', paddingTop: 'clamp(24px,3vw,34px)' }}>
            <Col title={L(lang, "What's included", 'O que está incluído', 'Ce qui est inclus')} items={included} />
            <Col title={L(lang, 'What to bring', 'O que trazer', 'À apporter')} items={bring} />
          </div>
        </div>
        <style>{`@media (max-width: 860px){ .boham-levels{ grid-template-columns: 1fr !important; } .boham-levels2{ grid-template-columns: 1fr !important; } }`}</style>
      </section>);
  }

  // ---- Downwinds, lagoons & the Delta --------------------------------------
  function Downwind() {
    const lang = window.useBohamLang();
    return (
      <section id="sec-downwind" style={{ background: 'var(--surface-page)', color: 'var(--boham-teal-deep)', padding: 'clamp(56px,7vw,92px) clamp(20px,4vw,44px)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div className="boham-split rev" style={{ gap: 'clamp(30px,5vw,68px)', alignItems: 'center' }}>
            <figure style={{ margin: 0 }}>
              <img src={window.RES('boham-site/photos/real-downwind-lagoon.jpg')} alt="A kitesurfer on the downwind route through the Macapá lagoons and mangrove channels near Barra Grande" style={{ width: '100%', height: 'clamp(280px,36vw,440px)', objectFit: 'cover', boxShadow: 'var(--shadow-md)' }} />
            </figure>
            <div>
              <div className="boham-eyebrow" style={{ color: 'var(--boham-clay-ink)', marginBottom: 14 }}>{L(lang, 'Beyond the beach', 'Além da praia', 'Au-delà de la plage')}</div>
              <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(30px,4.2vw,54px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: 0, lineHeight: 0.96 }}>
                {L(lang, 'Downwinds, lagoons & the Delta', 'Downwinds, lagoas & o Delta', 'Downwinds, lagunes & le Delta')}
              </h2>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16.5, lineHeight: 1.62, color: 'var(--boham-espresso)', marginTop: 20, maxWidth: 560 }}>
                {L(lang,
                  'A few minutes downwind of BOHAM: the Macapá lagoons, mangrove channels and kilometres of empty beach. Further west, the Delta do Parnaíba opens into one of the wildest kite playgrounds in northeast Brazil. We run guided downwinders with boat and support.',
                  'A poucos minutos de downwind do BOHAM: as lagoas de Macapá, os canais de mangue e quilômetros de praia vazia. Mais a oeste, o Delta do Parnaíba abre um dos cenários de kite mais selvagens do nordeste. Organizamos downwinds guiados com barco e apoio.',
                  'À quelques minutes de downwind de BOHAM : les lagunes de Macapá, les chenaux de mangrove et des kilomètres de plage déserte. Plus à l’ouest, le Delta do Parnaíba ouvre l’un des terrains de jeu les plus sauvages du nordeste. Nous organisons des downwinds guidés avec bateau et assistance.')}
              </p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 20 }}>
                <Tag tone="teal">{L(lang, 'Macapá lagoons', 'Lagoas de Macapá', 'Lagunes de Macapá')}</Tag>
                <Tag tone="teal">{L(lang, 'Mangroves', 'Manguezais', 'Mangroves')}</Tag>
                <Tag tone="teal">{L(lang, 'Delta do Parnaíba', 'Delta do Parnaíba', 'Delta do Parnaíba')}</Tag>
              </div>
            </div>
          </div>
        </div>
      </section>);
  }

  // ---- FAQ ------------------------------------------------------------------
  function FAQ() {
    const lang = window.useBohamLang();
    const qs = [
    { q: L(lang, 'When is the kite season in Barra Grande?', 'Qual é a temporada de kite em Barra Grande?', 'Quelle est la saison de kite à Barra Grande ?'),
      a: L(lang, 'Wind blows from July to January, with the strongest and most consistent conditions from September to November. Kite in the morning at Barrinha and from 11h at Barra Grande, right at BOHAM.', 'O vento sopra de julho a janeiro, com as condições mais fortes e constantes de setembro a novembro. De manhã velejamos na Barrinha e a partir das 11h em Barra Grande, bem na frente do BOHAM.', 'Le vent souffle de juillet à janvier, avec les conditions les plus fortes et les plus régulières de septembre à novembre. Le matin on kite à Barrinha, et à partir de 11h à Barra Grande, juste devant BOHAM.') },
    { q: L(lang, 'Is Barra Grande good for beginners?', 'Barra Grande é bom para iniciantes?', 'Barra Grande convient-il aux débutants ?'),
      a: L(lang, 'Yes. At low tide there are large shallow, flat-water areas right in front of the school, and the side-onshore wind brings a downed kite back to the beach.', 'Sim. Na maré baixa há grandes áreas rasas e de água plana em frente à escola, e o vento side-onshore traz o kite de volta à praia.', 'Oui. À marée basse, de grandes zones d’eau plate et peu profonde s’ouvrent devant l’école, et le vent side-on ramène l’aile vers la plage.') },
    { q: L(lang, 'What equipment do you use?', 'Qual equipamento vocês usam?', 'Quel matériel utilisez-vous ?'),
      a: L(lang, 'The whole school and rental fleet is brand-new Reedin 2026: kites, twintips, bars and harnesses, in every size.', 'Toda a frota da escola e do aluguel é Reedin 2026 nova: kites, pranchas, barras e trapézios, em todos os tamanhos.', 'Toute la flotte école et location est en Reedin 2026 neuf : ailes, twintips, barres et harnais, dans toutes les tailles.') },
    { q: L(lang, 'Which languages do you teach in?', 'Em quais idiomas vocês dão aula?', 'Dans quelles langues enseignez-vous ?'),
      a: L(lang, 'Portuguese, English, French and Spanish.', 'Português, inglês, francês e espanhol.', 'Portugais, anglais, français et espagnol.') },
    { q: L(lang, 'Can I store my own gear at BOHAM?', 'Posso guardar meu equipamento no BOHAM?', 'Puis-je stocker mon matériel à BOHAM ?'),
      a: L(lang, 'Yes. Leave your kit with us between sessions or for your whole stay, and our beach team will rig, launch and land it for you.', 'Sim. Deixe seu equipamento com a gente entre as sessões ou durante toda a estadia, e nosso time na praia monta, ajuda a decolar e a pousar.', 'Oui. Laissez votre matériel entre deux sessions ou pour tout votre séjour, et notre équipe plage le gréé, vous aide au décollage et à l’atterrissage.') },
    { q: L(lang, 'How do I get to Barra Grande?', 'Como chegar em Barra Grande?', 'Comment venir à Barra Grande ?'),
      a: L(lang, 'Fly into Parnaíba (about 1 h by road) or Fortaleza (about 5 h). Jericoacoara is roughly 2 h away, so Barra Grande fits naturally into a Rota das Emoções kite trip.', 'Voe para Parnaíba (cerca de 1 h de carro) ou Fortaleza (cerca de 5 h). Jericoacoara fica a cerca de 2 h, então Barra Grande encaixa bem numa viagem de kite pela Rota das Emoções.', 'Volez sur Parnaíba (environ 1 h de route) ou Fortaleza (environ 5 h). Jericoacoara est à environ 2 h : Barra Grande s’intègre naturellement à un kite trip sur la Rota das Emoções.') }];

    return (
      <section id="sec-faq" style={{ background: 'var(--surface-page)', padding: 'clamp(64px,8vw,104px) clamp(20px,4vw,44px)' }}>
        <div style={{ maxWidth: 900, margin: '0 auto' }}>
          <div className="boham-eyebrow" style={{ color: 'var(--boham-clay-ink)', marginBottom: 14 }}>FAQ</div>
          <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(30px,4.2vw,54px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: '0 0 clamp(24px,3vw,36px)', lineHeight: 0.96 }}>
            {L(lang, 'Kiting here, in short', 'Kite aqui, em resumo', 'Le kite ici, en bref')}
          </h2>
          {qs.map((x) =>
            <div key={x.q} style={{ borderTop: '1px solid var(--line-soft)', padding: 'clamp(16px,2vw,22px) 0' }}>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 600, color: 'var(--boham-ink)', margin: '0 0 6px' }}>{x.q}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.6, color: 'var(--boham-espresso)', margin: 0 }}>{x.a}</p>
            </div>)}
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', marginTop: 'clamp(26px,3vw,36px)' }}>
            <window.BohamWAButton size="sm" label={L(lang, 'Ask us on WhatsApp', 'Fale no WhatsApp', 'Demandez sur WhatsApp')} />
            <PillLink href={PRICES}>{L(lang, 'Prices ↗', 'Preços ↗', 'Tarifs ↗')}</PillLink>
          </div>
        </div>
      </section>);
  }

  // ---- Back to the club -----------------------------------------------------
  function BackHome() {
    const lang = window.useBohamLang();
    const home = (document.querySelector('meta[name="boham-home"]') || {}).content || 'index.html';
    return (
      <section style={{ background: 'var(--surface-page)', padding: 'clamp(56px,7vw,92px) clamp(20px,4vw,44px)', borderTop: '1px solid var(--line-soft)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div className="boham-split" style={{ gap: 'clamp(28px,4vw,60px)', alignItems: 'center' }}>
            <div>
              <div className="boham-eyebrow" style={{ color: 'var(--boham-clay-ink)', marginBottom: 14 }}>{L(lang, 'After the session', 'Depois da sessão', 'Après la session')}</div>
              <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(30px,4.2vw,54px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: 0, lineHeight: 0.96 }}>
                {L(lang, 'The beach club is right there', 'O beach club está logo ali', 'Le beach club est juste là')}
              </h2>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16.5, lineHeight: 1.62, color: 'var(--boham-espresso)', marginTop: 18, maxWidth: 520 }}>
                {L(lang, 'Pool, long lunches, fresh fish, caipirinhas and a DJ at sunset. The board goes down and the afternoon keeps going.', 'Piscina, almoços longos, peixe fresco, caipirinhas e DJ no pôr do sol. A prancha desce e a tarde continua.', 'Piscine, longs déjeuners, poisson frais, caipirinhas et DJ au coucher du soleil. La planche se pose, l’après-midi continue.')}
              </p>
              <div style={{ marginTop: 22 }}>
                <a href={home} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--boham-butter)', background: 'var(--boham-teal)', padding: '11px 20px', borderRadius: 'var(--radius-pill)', textDecoration: 'none', lineHeight: 1 }}>{L(lang, 'Discover BOHAM Praia', 'Conheça o BOHAM Praia', 'Découvrir BOHAM Praia')}</a>
              </div>
            </div>
            <figure style={{ margin: 0 }}>
              <img src={window.RES('boham-site/photos/real-crowd-sunset.jpg')} alt="Sunset crowd at BOHAM Praia after a kite session" style={{ width: '100%', height: 'clamp(240px,30vw,380px)', objectFit: 'cover', boxShadow: 'var(--shadow-md)' }} />
            </figure>
          </div>
        </div>
      </section>);
  }

  function KitePage() {
    const { BohamNav, BohamSchool, BohamFooter, BohamCookieBanner } = window;
    return (
      <div style={{ background: 'var(--surface-page)' }}>
        <BohamNav />
        <KiteHero />
        <Spot />
        <div id="sec-school"><BohamSchool /></div>
        <Lessons />
        <Downwind />
        <FAQ />
        <BackHome />
        <BohamFooter />
        <BohamCookieBanner />
      </div>);
  }

  window.BohamKitePage = KitePage;
})();