/* global React */
/* BOHAM Praia — Part B: About / manifesto, Eat & Drink, Music */
(function () {
  const { Card, Tag, Button, Avatar } = window.BOHAMDesignSystem_8e9a1f;
  const L = window.L;

  // ---- About / manifesto (rose) -------------------------------------------
  function About() {
    const lang = window.useBohamLang();
    return (
      <section style={{ background: 'var(--boham-rose)', color: 'var(--boham-teal)', padding: 0, overflow: 'hidden' }}>
        <div className="boham-split" style={{ gap: 0, alignItems: 'stretch' }}>
          <div style={{ padding: 'clamp(40px,5vw,68px) clamp(20px,4vw,56px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div className="boham-eyebrow" style={{ color: 'var(--boham-teal)', marginBottom: 18 }}>{L(lang, 'Welcome to BOHAM', 'Bem-vindo ao BOHAM', 'Bienvenue au BOHAM')}</div>
            <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(22px,2.6vw,34px)', lineHeight: 1.22, color: 'var(--boham-teal-deep)', maxWidth: 560, margin: 0, textWrap: 'balance' }}>
              {L(lang,
                'Good people. Good music. Good days. The social beach club where travelers, locals and kiters meet around food, sunsets and the ',
                'Gente boa. Música boa. Dias bons. O beach club social onde viajantes, locais e velejadores se encontram em torno da comida, do pôr do sol e do ',
                'Du vent, du soleil, et tout ce qui va avec. Le Beach Club où voyageurs, locaux et kiteurs se retrouvent autour d’une bonne table, d’un verre au soleil et des plus beaux moments de la ')}
                <em style={{ fontFamily: 'var(--font-sans)', fontStyle: 'italic' }}>{L(lang, 'sound of the afternoon', 'som da tarde', 'journée')}</em>.
            </p>
          </div>

          <figure className="boham-rise" style={{ margin: 0, position: 'relative', minHeight: 'clamp(300px,38vw,440px)' }}>
            <img src={window.RES('boham-site/photos/real-club-aerial.jpg')} alt="The BOHAM beach club from above, bamboo roof, terracotta terraces, umbrellas on the sand" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 50%', boxShadow: 'var(--shadow-md)' }} />
          </figure>
        </div>
    </section>);

  }

  // ---- The day: Eat · Drink · Dance (merged, visual-led) -------------------
  function DayLife() {
    const lang = window.useBohamLang();
    const tiles = [
      { img: 'boham-site/photos/real-dj.jpg', label: L(lang, 'Sunset vibes', 'Sunset vibes', 'Sunset vibes'), ar: '3 / 4' },
      { img: 'boham-site/photos/real-drink-cucumber.jpg', label: L(lang, 'Fresh drinks', 'Caipirinhas', 'Cocktails frais'), ar: '3 / 4', pos: 'center 45%' },
      { img: 'boham-site/photos/real-band.jpg', label: L(lang, 'Live music', 'Música ao vivo', 'Musique live'), ar: '3 / 4', pos: 'center 35%' },
      { img: 'boham-site/photos/real-group.jpg', label: L(lang, 'Good people, always', 'Gente boa, sempre', 'Toujours du beau monde'), ar: '3 / 4', pos: 'center 35%' },
      { img: 'boham-site/photos/real-food.jpg', label: L(lang, 'Catch of the day', 'Peixe fresco do dia', 'Pêche du jour'), ar: '3 / 4', pos: 'center 50%' },
      { img: 'boham-site/photos/real-pool.jpg', label: L(lang, 'Pool & long afternoons', 'Piscina & tardes longas', 'Piscine & longs après-midi'), ar: '3 / 4', pos: 'center 40%' },
    ];
    return (
      <section style={{ background: 'var(--boham-butter)', color: 'var(--boham-rose-deep)', padding: 'clamp(64px,8vw,104px) clamp(20px,4vw,44px)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div style={{ marginBottom: 'clamp(28px,3.5vw,44px)' }}>
            <div style={{ maxWidth: 720 }}>
              <div className="boham-eyebrow" style={{ color: 'var(--boham-rose-deep)', marginBottom: 16 }}>{L(lang, 'Eat · Drink · Dance', 'Comer · Beber · Dançar', 'Manger · Boire · Danser')}</div>
              <h2 style={{ fontFamily: 'var(--font-headline)', fontWeight: 400, fontSize: 'clamp(34px,5vw,64px)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--boham-rose-deep)', margin: 0, lineHeight: 0.96 }}>{L(lang, 'Good drinks. Good food. Good wind. Long afternoons.', 'Boa bebida. Boa comida. Bom vento. Tardes longas.', 'À table. Au bar. Au bord de l’eau.')}</h2>
              <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(16px,1.8vw,19px)', lineHeight: 1.55, color: 'var(--boham-clay)', marginTop: 16, maxWidth: 560 }}>
                {L(lang,
                  'Lunch that drifts into sunset. Caipirinhas and gengibradas, fresh fish, and a DJ when the light turns gold. The day has a rhythm, just follow it.',
                  'Almoço que vira pôr do sol. Caipirinhas e gengibradas, peixe fresco e DJ set ou música ao vivo quando a luz fica dourada. O dia tem um ritmo, é só seguir.',
                  'Des déjeuners qui s’éternisent, des caïpirinhas savoureuses, du poisson frais et un DJ ou une roda de samba qui prend le relais à l’heure du sunset. Ici, personne ne regarde sa montre.')}
              </p>
              <div style={{ marginTop: 22 }}>
                <Button variant="primary" size="sm" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--boham-butter)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flex: 'none' }}><path d="M3 5h13M3 12h13M3 19h13M19 5v14" /></svg>} style={{ background: 'var(--boham-orange)', borderColor: 'var(--boham-orange)', color: 'var(--boham-cream)', boxShadow: 'var(--shadow-md)' }} onClick={() => window.open('https://drive.google.com/file/d/17MZFCa8g6qj_ptal4HEUmx6xoTE6mw1N/view?usp=drive_link', '_blank')}>{L(lang, 'See the full menu', 'Ver o menu completo', 'Voir le menu complet')}</Button>
              </div>
            </div>
          </div>

          <div className="boham-strip" style={{ display: 'flex', gap: 'clamp(6px,0.8vw,10px)', overflowX: 'auto', alignItems: 'stretch', height: 'clamp(300px,40vw,460px)', paddingBottom: 12, scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch' }}>
            {tiles.map((t, n) => (
              <figure key={n} className="boham-tile" style={{ flex: 'none', height: '100%', aspectRatio: t.ar, margin: 0, position: 'relative', overflow: 'hidden', scrollSnapAlign: 'start' }}>
                <img src={window.RES(t.img)} alt={t.label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: t.pos || 'center', transition: 'transform var(--dur-slow,480ms) var(--ease-out)' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(42,36,32,0) 55%, rgba(42,36,32,0.5) 100%)', pointerEvents: 'none' }} />
                <figcaption style={{ position: 'absolute', left: 16, bottom: 13, fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--boham-cream)', textShadow: '0 1px 10px rgba(42,36,32,0.6)' }}>{t.label}</figcaption>
              </figure>
            ))}
          </div>
        </div>
        <style>{`
          .boham-tile:hover img{ transform: scale(1.05); }
          .boham-strip{ scrollbar-width: thin; scrollbar-color: var(--boham-clay) transparent; }
          .boham-strip::-webkit-scrollbar{ height: 6px; }
          .boham-strip::-webkit-scrollbar-thumb{ background: rgba(197,107,74,0.45); border-radius: 999px; }
          @media (max-width: 760px){
            .boham-strip{ height: 64vw !important; }
          }
        `}</style>
    </section>);

  }

  window.BohamAbout = About;
  window.BohamDayLife = DayLife;
})();