// ===== BAHIA =====
function Bahia() {
  return (
    <section className="relative overflow-hidden py-24 md:py-32" style={{ background: C.inkDark, color: C.cream }}>
      {/* foto aérea de Salvador · Rio Vermelho */}
      <img src="assets/bahia-bg.jpg" alt="Vista aérea do Rio Vermelho, Salvador, com a Igreja de Sant'Ana e barcos" className="absolute inset-0 w-full h-full object-cover" />
      {/* tinted overlay para legibilidade */}
      <div className="absolute inset-0" style={{
        background: 'linear-gradient(180deg, rgba(5,7,8,0.78) 0%, rgba(14,59,58,0.88) 55%, rgba(5,7,8,0.96) 100%)'
      }}></div>
      <div className="absolute inset-0 opacity-25" style={{
        backgroundImage: `repeating-linear-gradient(45deg, rgba(244,237,227,0.04) 0 12px, rgba(244,237,227,0.07) 12px 24px)`,
        maskImage: 'linear-gradient(180deg, black 0%, transparent 80%)'
      }}></div>

      <div className="relative max-w-[1100px] mx-auto px-5 md:px-8">
        <Pill dark>Rio Vermelho · Bahia</Pill>
        <h2 className="font-display mt-6 max-w-3xl" style={{ fontSize: 'clamp(32px, 4.6vw, 60px)', lineHeight: 1.04, fontWeight: 700, letterSpacing: '-0.025em' }}>
          Beleza feita para o povo da <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>nossa Bahia.</em>
        </h2>
        <p className="mt-8 text-lg max-w-2xl" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
          A maior cidade negra fora da África. Diversidade não é discurso aqui, é identidade. <strong style={{ color: C.cream }}>A Nubelle Salvador nasceu entendendo isso</strong>, e não trocaria essa raiz por nenhuma receita pronta de fora.
        </p>

        {/* stats */}
        <div className="mt-12 grid grid-cols-3 gap-6 md:gap-12 max-w-2xl">
          {[
            ['83%', 'da população de Salvador é preta ou parda'],
            ['2,9M', 'habitantes · 3ª maior cidade do Brasil'],
            ['100%', 'baiana · protocolos adaptados à nossa realidade'],
          ].map(([n, l], i) => (
            <div key={i}>
              <div className="font-display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 900, fontStyle: 'italic', color: C.coral, lineHeight: 1, letterSpacing: '-0.03em' }}>{n}</div>
              <div className="text-xs mt-3" style={{ color: 'rgba(244,237,227,0.6)', lineHeight: 1.45, fontFamily: 'Inter, sans-serif' }}>{l}</div>
            </div>
          ))}
        </div>

        <p className="mt-12 text-base max-w-2xl" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.65 }}>
          O Rio Vermelho é boêmio, diverso e vibrante. Respira arte, gastronomia, frutos do mar e ancestralidade. Atendemos pacientes de toda a Bahia, do Brasil e do mundo. <strong style={{ colorr: C.cream }}>Sem receita pronta de fora, sem padrão importado.</strong> Com o olhar de quem nasceu nesse território e respeita cada história que chega.
        </p>

        <div className="mt-10">
          <PrimaryCTA href="#consulta">
            Conheça a Nubelle Salvador
          </PrimaryCTA>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Bahia });