/* global React */
/* BOHAM Praia — Part C: A day at BOHAM, Kite & Lifestyle, Barra Grande, Map */
(function () {
  const { Tag, Button } = window.BOHAMDesignSystem_8e9a1f;
  const L = window.L;

  // ---- Windguru live forecast widget (loads on the deployed site) ----------
  function Windguru() {
    const lang = window.useBohamLang();
    const ref = React.useRef(null);
    React.useEffect(() => {
      const host = ref.current;
      if (!host) return;
      const uid = 'wg_fwdg_620599_100_' + Date.now();
      host.innerHTML = '<div id="' + uid + '"></div>';
      const s = document.createElement('script');
      s.id = uid;
      s.src = 'https://www.windguru.cz/js/widget.php?s=620599&m=100&uid=' + uid +
      '&wj=knots&tj=c&waj=m&tij=cm&odh=0&doh=24&fhours=72&hrsm=2&vt=forecasts&lng=' + (
      lang === 'pt' ? 'pt' : 'en') +
      '&idbs=1&p=WINDSPD,GUST,SMER,TMPE';
      s.async = true;
      host.appendChild(s);
    }, []);
    return (
      <div style={{ background: 'var(--boham-cream)', padding: 'clamp(12px,1.6vw,18px)', minHeight: 120, overflowX: 'auto', boxShadow: 'var(--shadow-sm)' }}>
        <div ref={ref}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--boham-stone)', padding: '24px 4px', textAlign: 'center' }}>
            {L(lang, 'Loading the live wind forecast…', 'Carregando a previsão de vento…', 'Chargement des prévisions de vent…')}
          </div>
        </div>
      </div>);

  }
  window.BohamWindguru = Windguru;

  // ---- A day at BOHAM (sand) ----------------------------------------------
  function DayTimeline() {
    const lang = window.useBohamLang();
    const steps = [
    { t: '9h', k: L(lang, 'Swim & coffee', 'Mergulho & café', 'Baignade & café'), d: L(lang, 'Pool, água de coco, slow start', 'Piscina, água de coco, começo lento', 'Piscine, eau de coco, démarrage tranquille'), img: 'boham-site/photos/terracotta-pool.jpg' },
    { t: '12h', k: L(lang, 'Long lunch', 'Almoço longo', 'Long déjeuner'), d: L(lang, 'Fresh fish, fire, a long table', 'Peixe fresco, fogo, uma mesa longa', 'Poisson frais, feu de bois, grande tablée'), img: 'boham-site/photos/food-octopus.jpg' },
    { t: '14h', k: L(lang, "Wind's up", 'Entrou o vento', 'Le vent se lève'), d: L(lang, 'Out for a session, kite on the sand', 'Sessão na água, kite na areia', 'Une session, kite sur le sable'), img: 'boham-site/photos/beach-pair.jpg' },
    { t: '16h', k: L(lang, 'Back in', 'De volta', 'De retour'), d: L(lang, 'Drinks, yoga, music, friends', 'Drinks, yoga, música, amigos', 'Cocktails, yoga, musique, amis'), img: 'boham-site/photos/lounge-people.jpg' },
    { t: '18h', k: L(lang, 'Sunset set', 'Set do pôr do sol', 'Set au coucher du soleil'), d: L(lang, 'DJ, dance, one more round', 'DJ, dança, mais uma rodada', 'DJ, danse, encore une tournée'), img: 'boham-site/photos/night-crowd.jpg', sun: true }];

    return (
      <section style={{ background: 'var(--boham-sand)', padding: 'clamp(72px,9vw,116px) clamp(20px,4vw,44px)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div className="boham-eyebrow" style={{ color: 'var(--boham-clay)', marginBottom: 14 }}>{L(lang, 'Day-to-sunset energy', 'Energia do dia ao pôr do sol', 'Du matin au coucher du soleil')}</div>
        <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(34px,5vw,64px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-ink)', margin: '0 0 8px', lineHeight: 0.96 }}>{L(lang, 'A day at BOHAM', 'Um dia no BOHAM', 'Une journée au BOHAM')}</h2>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--boham-espresso)', maxWidth: 560, margin: 0 }}>
          {L(lang,
            "There's a rhythm to it. Kiting folds in naturally, between a swim, a long lunch, music and the sunset. Not a schedule. A day.",
            'Existe um ritmo nisso. O kite entra naturalmente, entre um mergulho, um almoço longo, música e o pôr do sol. Não é uma agenda. É um dia.', 'Il y a un rythme. Le kite s’y glisse naturellement, entre une baignade, un long déjeuner, la musique et le coucher du soleil. Pas un programme. Une journée.')}
        </p>

        <div className="boham-tl" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 'clamp(10px,1.6vw,22px)', marginTop: 'clamp(40px,5vw,60px)', position: 'relative' }}>
          {steps.map((s, n) =>
            <div key={n} style={{ position: 'relative', textAlign: 'center' }}>
              <div style={{ position: 'relative', width: 'clamp(86px,12vw,130px)', height: 'clamp(86px,12vw,130px)', margin: '0 auto 16px', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
                <img src={window.RES(s.img)} alt={s.k} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minWidth: 46, padding: '4px 12px', borderRadius: 'var(--radius-pill)', background: s.sun ? 'var(--boham-orange)' : 'var(--boham-teal)', color: s.sun ? '#fff' : 'var(--boham-butter)', fontFamily: 'var(--font-display)', fontSize: 14, letterSpacing: '0.08em' }}>{s.t}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16, color: 'var(--boham-ink)', marginTop: 10 }}>{s.k}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, lineHeight: 1.45, color: 'var(--boham-stone)', marginTop: 3 }}>{s.d}</div>
            </div>
            )}
        </div>
      </div>
      <style>{`@media(max-width:760px){ .boham-tl{ grid-template-columns: 1fr !important; gap: 22px !important; text-align: left; } .boham-tl > div{ display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; text-align: left !important; } .boham-tl > div > div:first-child{ margin: 0 !important; } }`}</style>
    </section>);

  }

  // ---- Kite & Lifestyle (cream) — the differentiator -----------------------
  function Kite() {
    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: L(lang, 'SIDE-ON', '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 naturellement vers la plage') },
    { n: L(lang, 'JUL–JAN', 'JUL–JAN'), u: '', k: L(lang, 'Wind season, with peak Sep–Nov', 'Temporada de vento, pico set–nov', 'Des conditions de vent assurées') },
    { n: '27°', u: 'C', k: L(lang, 'Warm water, no wetsuit', 'Água quente o ano todo', 'Une eau chaude toute l’année') }];

    const facts = [
    { k: L(lang, 'Wind season', 'Temporada de vento', 'La saison du vent'), v: L(lang, 'Side-onshore trades blow July to January, light in the morning, building strong through the afternoon for a golden-hour session.', 'Os alísios side-onshore sopram de julho a janeiro, mais leve de manhã, ganhando força à tarde para sessões que acabam com o por do sol.', 'Les alizés side-on soufflent de juillet à janvier, légers le matin, montant en force l’après-midi pour offrir des sessions longues et régulières. Conditions particulièrement exceptionnelles entre septembre et novembre.') },
    { k: L(lang, 'The aspect', 'O pico', 'Le spot'), v: L(lang, "At low tide, large shallow-water areas emerge right in front of BOHAM. Perfect for learning, progressing, or working on new tricks. At high tide, the water becomes more dynamic for those looking for a bit more excitement. All levels, all tides: it's a dream spot for kitesurfing.", 'Na maré baixa, grandes áreas de águas rasas surgem em frente ao BOHAM. Perfeito para aprender, evoluir ou treinar novas manobras. Na maré alta, o mar ganha mais movimento para quem busca um pouco mais de emoção. Seja qual for o nível ou a maré, este é o spot dos sonhos.', 'À marée basse, de grandes zones d’eau peu profonde apparaissent devant le BOHAM. Parfait pour apprendre, progresser ou travailler ses figures. À marée haute, le plan d’eau devient plus dynamique pour ceux qui cherchent davantage de sensations. Tous niveaux, toutes marées, c’est le spot de rêve.') },
    { k: L(lang, 'Downwind & lagoons', 'Downwind & lagoas', 'Downwind & lagunes'), v: L(lang, 'Just a few minutes from BOHAM lie the Macapá lagoons, winding mangrove channels, and miles of downwind routes through some of the most stunning kite terrain in Northeast Brazil. Warm water, unspoiled nature, endless beaches, and plenty of space on the water, even in the heart of the season.', 'A poucos minutos do BOHAM: as lagoas de Macapá, os canais de mangue e quilômetros de downwinds entre alguns dos cenários mais incríveis do Nordeste. Água quente, natureza preservada, praias sem fim e, na maioria dos dias, muito espaço para aproveitar a água sem multidões.', 'À quelques minutes seulement de BOHAM : les lagons de Macapá, les chenaux de mangrove, des kilomètres de downwinds parmi les plus beaux terrains de jeu du Nordeste. Eau chaude, nature préservée, plages à l’infini et rarement beaucoup de monde sur l’eau.') }];

    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-split" style={{ gap: 'clamp(30px,5vw,68px)', alignItems: 'center' }}>
          <div>
            <div className="boham-eyebrow" style={{ color: 'var(--boham-clay)', marginBottom: 16 }}>{L(lang, 'Kite & lifestyle', 'Kite & lifestyle', 'Kite & lifestyle')}</div>
            <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(34px,5vw,64px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-teal)', margin: 0, lineHeight: 0.94 }}>
              {L(lang, 'Wet hair,', 'Cabelo molhado,', 'Cheveux mouillés,')}
              <br />
              <span style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-rose-deep)', fontSize: 'clamp(34px,5vw,64px)', display: 'inline-block', marginTop: 2 }}>{L(lang, 'sandy feet', 'pé na areia', 'pieds dans le sable')}</span>
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16.5, lineHeight: 1.62, color: 'var(--boham-espresso)', marginTop: 22, maxWidth: 520 }}>
              {L(lang,
                'One of Brazil\'s best all-round kite spots, and a spot for every level. Flat water near shore at low tide, ideal for beginners and freestyle; choppier further out to work on your biggest jumps. The kite crowd spends whole days here: between sessions there\'s the pool, long lunches, yoga, music and the sunset. Wet hair, sandy feet, a cold drink. The board goes down; the afternoon keeps going. And our team is right there on the beach to help you launch and land, and to get your gear rigged and ready.',
                'Um dos melhores picos completos do Brasil, e um pico para todos os níveis. Água plana na maré baixa, ideal para iniciantes e freestyle, e até mais picado na maré alta pra mandar seus maiores saltos. A galera do kite passa o dia inteiro aqui: entre as sessões tem piscina, almoços longos, yoga, música e o pôr do sol. Cabelo molhado, pé na areia, uma bebida gelada. A prancha desce, a tarde continua. E nosso time fica ali na praia pra te ajudar a entrar e sair da água, e a deixar seu equipamento pronto.', 'L’un des meilleurs spots de kite polyvalents du Brésil, avec des conditions accessibles aux débutants comme aux riders expérimentés. Plan d’eau flat à marée basse, idéal pour les débutants et le freestyle, mer plus clapoteuse à marée haute pour travailler vos plus beaux jumps. Les kiteurs y passent des journées entières : entre les sessions, la piscine, les longs déjeuners, le yoga, la musique et le coucher du soleil. Cheveux mouillés, pieds dans le sable, une boisson fraîche. La session s’arrête, l’après-midi continue. Et notre équipe est là sur la plage pour vous aider au décollage et à l’atterrissage, et à préparer votre matériel.')}
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 22 }}>
              <Tag tone="teal">{L(lang, 'Flat to choppy water', 'Água flat a mexida', 'Eau flat à clapoteuse')}</Tag><Tag tone="teal">{L(lang, 'Onshore wind', 'Vento side-on', 'Vent side-on')}</Tag><Tag tone="teal">{L(lang, 'Wind Jul–Jan', 'Vento jul–jan', 'Saison juil–jan')}</Tag>
            </div>
          </div>
          <figure style={{ margin: 0, position: 'relative' }}>
            <img src={window.RES('boham-site/photos/real-kite-instructors.jpg')} alt="Two BOHAM Praia kite instructors on the beach, a kite in the sky" style={{ width: '100%', height: 'clamp(380px,56vw,600px)', objectFit: 'cover', objectPosition: 'center 30%', boxShadow: 'var(--shadow-md)' }} />
          </figure>
        </div>

        {/* kite conditions — one terracotta block, live forecast integrated inside */}
        <div style={{ marginTop: 'clamp(40px,5vw,60px)', background: 'var(--boham-clay)', padding: 'clamp(28px,4vw,46px)', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column', gap: 'clamp(26px,3vw,36px)' }}>
          {/* header */}
          <div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(251,246,234,0.75)', marginBottom: 10 }}>{L(lang, 'Barra Grande · Piauí', 'Barra Grande · Piauí')}</div>
            <h3 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-cream)', margin: 0, lineHeight: 0.98, fontSize: 'clamp(24px,2.8vw,32px)' }}>{L(lang, 'Kite conditions, in brief', 'Condições de kite, em resumo', 'Conditions de kite, en bref')}</h3>
          </div>

          {/* quick stats — full-width row */}
          <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>

          {/* detail facts — full-width row, top-ruled */}
          <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>

          {/* live forecast — integrated cream inset (Windguru BGK, spot 620599) */}
          <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 ↗')}</a>
            </div>
            <window.BohamWindguru />
          </div>
        </div>

        {/* kite school + services */}
        {(() => {
            const services = [
            { t: L(lang, 'Kite lessons', 'Aulas de kite', 'Cours de kite'), d: L(lang, 'IKO-style coaching for first-timers to advanced, taught in Portuguese, English, French & Spanish.', 'Do iniciante ao avançado, em português, inglês, francês e espanhol.', 'Du débutant au confirmé, en portugais, anglais, français et espagnol.'), flags: ['🇧🇷', '🇬🇧', '🇫🇷', '🇪🇸'] },
            { t: L(lang, 'Kite gear rental', 'Aluguel de equipamento', 'Location de matériel'), d: L(lang, 'Recent kites, boards, bars and harnesses: rent gear by the session, day or week.', 'Kites, pranchas, barras e trapézios atuais: por sessão, dia ou semana.', 'Ailes, planches, barres et harnais récents disponibles à la session, à la journée ou à la semaine.') },
            { t: L(lang, 'Kite gear storage', 'Guardaria do seu equipamento', 'Stockage du matériel'), d: L(lang, 'Leave your kit with us between sessions and over your whole stay.', 'Deixe seu equipamento com a gente entre as sessões e durante toda a estadia.', 'Laissez votre équipement chez nous pendant toute la durée de votre séjour.') },
            { t: L(lang, 'Downwinds & Delta', 'Downwinds & Delta', 'Downwinds & Delta'), d: L(lang, 'Guided downwinders and a full kite experience in the Delta do Parnaíba.', 'Downwinds guiados e uma experiência completa de kite no Delta do Parnaíba.', 'Des kilomètres de downwinds guidés et une expérience kite complète dans le Delta do Parnaíba.') }];

            return (
              <div style={{ marginTop: 'clamp(14px,2vw,22px)', background: 'var(--boham-butter)', padding: 'clamp(28px,4vw,46px)', boxShadow: 'var(--shadow-sm)' }}>
                <div className="boham-school-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(28px,4vw,56px)', alignItems: 'start' }}>

                  {/* left: title + subtitle + premium beach-boy */}
                  <div>
                    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--boham-clay)', marginBottom: 10 }}>{L(lang, 'On the beach', 'Na praia', 'Sur la plage')}</div>
                    <h3 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.01em', margin: 0, lineHeight: 0.98, fontSize: 'clamp(26px,3.4vw,42px)', color: 'var(--boham-teal)' }}>{L(lang, 'The BOHAM kite school', 'A escola de kite BOHAM', 'La kite school BOHAM')}</h3>
                    <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.6, margin: '12px 0 0', maxWidth: 480, color: 'var(--boham-teal-deep)' }}>
                      {L(lang, "One of the most complete kite services in Barra Grande: kite lessons, equipment rental, beach assistance, gear storage, coaching, downwind trips, and the local knowledge that makes all the difference on the water. We're here to take care of everything, so you can make the most of every session.", 'Um dos serviços de kite mais completos de Barra Grande: aulas de kitesurf, aluguel de equipamentos, assistência na praia, armazenamento de material, coaching, organização de downwinds e todo o conhecimento local para aproveitar o spot ao máximo. Estamos aqui para cuidar de tudo, para que você só precise se preocupar em aproveitar cada sessão.', 'L’un des services kite les plus complets de Barra Grande : cours de kite, location, assistance plage, stockage du matériel, coaching et organisation de downwinds, et la connaissance locale pour profiter du spot. À votre service pour que vous puissiez profiter du spot au maximum.')}
                    </p>

                    {/* premium beach-boy service */}
                    <div style={{ marginTop: 'clamp(22px,3vw,30px)', background: 'var(--boham-teal)', padding: 'clamp(20px,2.6vw,30px)' }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', marginBottom: 10 }}>
                        <h4 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-butter)', margin: 0, fontSize: 'clamp(18px,2.2vw,24px)' }}>{L(lang, 'Premium beach-boy service', 'Serviço premium de beach-boy', 'Service premium « beach-boy »')}</h4>
                        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--boham-teal)', background: 'var(--boham-butter)', padding: '4px 10px', borderRadius: 'var(--radius-pill)' }}>{L(lang, 'Hands-free kiting', 'Kite sem preocupação', 'Kite sans souci')}</span>
                      </div>
                      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.6, color: 'rgba(251,246,234,0.88)', margin: 0 }}>
                        {L(lang,
                          'Our team takes care of your gear from start to finish: rigged and ready before you arrive, swapped for the right kite if the wind shifts mid-session, then dried and stored after you come in. You just kite.',
                          'Nosso time cuida do seu equipamento do início ao fim: montado e pronto antes de você chegar, trocado pelo kite certo se o vento mudar no meio da sessão, e depois seco e guardado quando você sai da água. Você só pensa em velejar. O resto é com a gente.', 'Vous arrivez, on prépare votre matériel. Notre équipe vous aide à gréer, décoller et atterrir votre kite. Besoin de changer d’aile ? On s’en occupe ! Une fois la session terminée, le matériel est séché, rangé et prêt pour le lendemain. Vous ridez, on gère le reste.')}
                      </p>
                    </div>

                    <div style={{ marginTop: 'clamp(16px,2vw,22px)' }}>
                      <window.BohamWAButton size="sm" label={L(lang, 'Get in touch', 'Fale com a gente', 'Contactez-nous')} />
                    </div>
                  </div>

                  {/* right: the four services as a 2×2 */}
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(18px,2.4vw,28px)' }}>
                    {services.map((s) =>
                      <div key={s.t} style={{ borderTop: '2px solid var(--boham-teal)', paddingTop: 14 }}>
                        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--boham-teal)', marginBottom: 6 }}>{s.t}</div>
                        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'rgba(28,102,102,0.82)', margin: 0 }}>{s.d}</p>
                        {s.flags && <div style={{ display: 'flex', gap: 6, marginTop: 9, fontSize: 18, lineHeight: 1 }}>{s.flags.map((f) => <span key={f} aria-hidden="true">{f}</span>)}</div>}
                      </div>
                      )}
                  </div>
                </div>
                <style>{`@media (max-width: 860px){ .boham-school-split{ grid-template-columns: 1fr !important; } }`}</style>
            </div>);

          })()}
      </div>
    </section>);

  }

  // ---- Barra Grande — the village (teal) -----------------------------------
  function Barra() {
    const lang = window.useBohamLang();
    return (
      <section style={{ background: 'var(--boham-teal)', color: 'var(--boham-cream)', padding: 'clamp(40px,5vw,64px) 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, position: 'relative' }}>
            <img src={window.RES('boham-site/photos/real-aerial-coast.jpg')} alt="Barra Grande from above, the beach club, sand and the coastline" style={{ width: '100%', height: 'clamp(300px,40vw,460px)', objectFit: 'cover', boxShadow: 'var(--shadow-md)' }} />
          </figure>
          <div>
            <div className="boham-eyebrow" style={{ color: 'var(--boham-rose)', marginBottom: 16 }}>{L(lang, 'The destination', 'O destino', 'La destination')}</div>
            <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(34px,5vw,64px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-butter)', margin: 0, lineHeight: 0.94 }}>
              {L(lang, 'A village on the', 'Uma vila na', 'Un village sur la')}
              <br />
              <span style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-butter)', fontSize: 'clamp(34px,5vw,64px)', display: 'inline-block', marginTop: 2 }}>{L(lang, 'Road of Emotions', 'Rota das Emoções', 'Route des Émotions')}</span>
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16.5, lineHeight: 1.62, color: 'rgba(251,246,234,0.9)', marginTop: 22, maxWidth: 520 }}>
              {L(lang,
                "Sand streets, slow afternoons, coconut palms, warm wind, and a pace of life that seems to have slowed down just enough. Barra Grande remains a small fishing village at heart and that's exactly what makes it so special. Nestled between Jericoacoara, the Parnaíba Delta and the Lençóis Maranhenses, it's one of the most remarkable stops along Brazil's northeastern coast.",
                'Ruas de areia, tardes lentas, coqueiros e vento quente. Barra Grande continua sendo uma vila de pescadores com tamanho humano, e é justamente isso que faz todo o seu charme. Localizada entre Jericoacoara, o Delta do Parnaíba e os Lençóis Maranhenses, é uma das paradas mais especiais do litoral brasileiro.', 'Rues de sable, après-midi tranquilles, cocotiers, vent chaud, et un rythme de vie qui semble avoir ralenti juste ce qu’il faut. Barra Grande est resté un village de pêcheurs à taille humaine, c’est précisément ce qui fait son charme. Situé entre Jericoacoara, le Delta du Parnaíba et les Lençóis Maranhenses, c’est l’une des plus belles étapes du littoral brésilien.')}
            </p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 22 }}>
              <Tag tone="rose">{L(lang, 'Sand-street village', 'Vila de ruas de areia', 'Village aux rues de sable')}</Tag><Tag tone="rose">{L(lang, 'Strategic location on the coast', 'Localização estratégica no litoral', 'Emplacement stratégique sur la côte')}</Tag><Tag tone="rose">{L(lang, 'Gateway to the Delta', 'Porta de entrada do Delta', 'Porte d’entrée du Delta de Parnaíba')}</Tag>
            </div>
          </div>
        </div>
      </div>
    </section>);

  }

  // ---- The Road of Emotions — map (cream) ----------------------------------
  function BohamMap() {
    const lang = window.useBohamLang();
    const Plane = ({ size = 11, color }) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true" style={{ flex: 'none', display: 'inline-block', verticalAlign: '-1px' }}>
      <path d="M21 16v-2l-8-5V3.5C13 2.67 12.33 2 11.5 2S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z" />
    </svg>;

    const Surfer = ({ left, top, color, flip }) =>
    <svg viewBox="0 0 40 46" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"
    style={{ position: 'absolute', left: left + '%', top: top + '%', width: 'clamp(20px,2.8vw,34px)', height: 'auto', transform: `translate(-50%,-50%) ${flip ? 'scaleX(-1)' : ''}`, opacity: 0.72, pointerEvents: 'none' }}>
      <path d="M3 9 Q20 1 37 9" />
      <path d="M7 10 L19 31" />
      <path d="M33 10 L23 31" />
      <circle cx="21" cy="33" r="2.6" fill={color} stroke="none" />
      <path d="M21 35 L20 41 M20 41 L16 45 M20 41 L24 44 M21 37 L27 39" />
    </svg>;

    // even route line (west → east); Rota das Emoções as a transit-style line
    const LINE_Y = 52; // % — the route line's vertical position
    const pins = [
    { n: 'Lençóis Maranhenses', x: 6, side: 'above', align: 'start' },
    { n: 'Parnaíba & Delta', x: 44, air: true, side: 'below' },
    { n: 'BOHAM · Barra Grande', x: 50, boham: true, side: 'above' },
    { n: 'Jericoacoara', x: 72, air: true, side: 'below' },
    { n: 'Cumbuco', x: 90, side: 'above' },
    { n: 'Fortaleza', x: 95, air: true, side: 'below', align: 'end' }];

    const times = [
    L(lang, 'Parnaíba airport · ~1h', 'Aeroporto de Parnaíba: ~1h', 'Aéroport de Parnaíba : ~1h'),
    L(lang, 'Jericoacoara · ~2h', 'Jericoacoara: ~2h', 'Jericoacoara : ~2h'),
    L(lang, 'Fortaleza · ~5h', 'Fortaleza: ~5h', 'Fortaleza : ~5h'),
    L(lang, 'Delta do Parnaíba · day trip', 'Delta do Parnaíba: bate-volta', 'Delta do Parnaíba : excursion à la journée')];

    return (
      <section style={{ background: 'var(--surface-page)', padding: 'clamp(72px,9vw,116px) clamp(20px,4vw,44px)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto clamp(34px,4vw,52px)' }}>
          <div className="boham-eyebrow" style={{ color: 'var(--boham-clay)', marginBottom: 14 }}>{L(lang, 'Where it sits', 'Onde fica', 'Localisation')}</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, 'One coast. Every reason to be here.', 'Um litoral. Todos os motivos para estar aqui.', 'Une côte. Toutes les raisons d’être là.')}</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--boham-espresso)', marginTop: 16 }}>
            {L(lang,
              "Barra Grande sits in the middle of Brazil's Rota das Emoções, the coastal road linking Jericoacoara to the Lençóis Maranhenses, strung with the northeast's wildest beaches, dunes and kite spots.",
              'Barra Grande está no meio da Rota das Emoções, a estrada litorânea que liga Jericoacoara aos Lençóis Maranhenses, com as praias, dunas e picos de kite mais selvagens do nordeste.', 'Barra Grande est au cœur de la Route des Émotions, la route côtière qui relie Jericoacoara aux Lençóis Maranhenses, jalonnée des plages, dunes et spots de kite les plus sauvages du nordeste brésilien.')}
          </p>
        </div>

        <div style={{ position: 'relative', background: 'var(--boham-sand)', boxShadow: 'var(--shadow-md)', overflow: 'hidden', aspectRatio: '16 / 5.4' }}>
          {/* sea above the line */}
          <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: LINE_Y + '%', background: 'rgba(188,215,224,0.6)', borderBottom: '1px solid rgba(28,102,102,0.18)' }} />
          {/* the route line */}
          <div style={{ position: 'absolute', left: '4%', right: '4%', top: LINE_Y + '%', height: 5, transform: 'translateY(-50%)', background: 'var(--boham-clay)', borderRadius: 3 }} />
          <div style={{ position: 'absolute', left: '4%', right: '4%', top: LINE_Y + '%', height: 0, borderTop: '1.5px dashed rgba(251,246,234,0.75)' }} />
          {/* end caps */}

          <div style={{ position: 'absolute', left: 18, top: 16 }}><Tag tone="teal">{L(lang, 'Piauí ↔ Ceará coast', 'Litoral Piauí ↔ Ceará', 'Côte Piauí ↔ Ceará')}</Tag></div>

          {pins.map((p) =>
            <div key={p.n} style={{ position: 'absolute', left: p.x + '%', top: LINE_Y + '%', zIndex: p.boham ? 3 : 2, pointerEvents: 'none' }}>
              {/* connector tick */}
              <div style={{ position: 'absolute', left: 0, top: 0, width: 1.5, height: 13, background: p.boham ? 'var(--boham-rose-deep)' : 'rgba(28,102,102,0.45)', transform: p.side === 'above' ? 'translate(-50%, -13px)' : 'translate(-50%, 0)' }} />
              {/* station dot */}
              <div style={{
                position: 'absolute', left: 0, top: 0, transform: 'translate(-50%,-50%)',
                width: p.boham ? 17 : 11, height: p.boham ? 17 : 11, borderRadius: '50%',
                background: p.boham ? 'var(--boham-rose-deep)' : 'var(--boham-cream)',
                border: p.boham ? '2px solid var(--boham-cream)' : '2.5px solid var(--boham-teal)', boxShadow: 'var(--shadow-sm)',
                animation: p.boham ? 'bohamPulse 2.4s ease-out infinite' : 'none'
              }} />
              {/* label */}
              <span style={{
                position: 'absolute', left: 0, top: 0,
                transform: `${p.align === 'start' ? 'translateX(0)' : p.align === 'end' ? 'translateX(-100%)' : 'translateX(-50%)'} ${p.side === 'above' ? 'translateY(calc(-100% - 15px))' : 'translateY(15px)'}`,
                display: 'inline-flex', alignItems: 'center', gap: 4,
                fontFamily: p.boham ? 'var(--font-display)' : 'var(--font-sans)',
                fontSize: p.boham ? 'clamp(10px,1.5vw,13px)' : 'clamp(8px,1.2vw,11px)', fontWeight: p.boham ? 400 : 600,
                letterSpacing: p.boham ? '0.08em' : '0.04em',
                textTransform: p.boham ? 'uppercase' : 'none',
                color: p.boham ? 'var(--boham-cream)' : 'var(--boham-teal-deep)',
                background: p.boham ? 'var(--boham-rose-deep)' : 'rgba(251,246,234,0.92)',
                padding: p.boham ? '3px 10px' : '2px 7px', borderRadius: 'var(--radius-pill)', whiteSpace: 'nowrap',
                boxShadow: p.boham ? 'var(--shadow-sm)' : 'none'
              }}>
                {p.air && <Plane size={11} color="var(--boham-teal)" />}
                {p.n}
              </span>
            </div>
            )}
        </div>

        {/* travel times — below the map, responsive */}
        <div style={{ marginTop: 'clamp(18px,2.4vw,26px)', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 'clamp(8px,1.4vw,18px)', textAlign: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--boham-clay)' }}>
            <Plane size={13} color="var(--boham-clay)" />{L(lang, 'Travel times from BOHAM', 'Tempos a partir do BOHAM', 'Temps de trajet depuis BOHAM')}
          </span>
          <span style={{ display: 'inline-flex', flexWrap: 'wrap', justifyContent: 'center', gap: '6px 14px' }}>
            {times.map((t) =>
              <span key={t} style={{ fontFamily: 'var(--font-sans)', fontSize: 'clamp(12px,1.4vw,14px)', color: 'var(--boham-teal-deep)', whiteSpace: 'nowrap' }}>{t}</span>
              )}
          </span>
        </div>
      </div>
    </section>);

  }

  window.BohamDay = DayTimeline;
  window.BohamKite = Kite;
  window.BohamBarra = Barra;
  window.BohamMap = BohamMap;
})();