// Social proof, Objections, FAQ, Final CTA, Footer
const { useState: useState4 } = React;

// ====== Social Proof ======
function SocialProof() {
  const reviews = [
  { stars: 5, text: 'Melhor atendimento de laser que já tive na vida! Perfeição!!', author: 'Shirkit' },
  { stars: 5, text: 'Minha sessão foi extremamente agradável e indolor.', author: 'Pamella Luize' },
  { stars: 5, text: 'Fui muito bem atendida, tiraram todas as minhas dúvidas e me deixaram super segura.', author: 'Natalia Ohanna' },
  { stars: 5, text: 'Atendimento excepcional e personalizado. Equipamentos de ponta. Me surpreendi positivamente.', author: 'Ricardo Areias' },
  { stars: 5, text: 'Encontrei uma clínica onde me vejo como um ser importante da forma que sou, e como posso transformar a minha autoestima.', author: 'Ana Cassia' },
  { stars: 5, text: 'Sou cliente da Nubelle desde a abertura em Salvador. Retorno com frequência pela qualidade dos serviços.', author: 'Ivan Pessoa' }];

  return (
    <section className="py-24 md:py-32 overflow-hidden" style={{ background: C.cream, color: C.ink }}>
      <div className="max-w-[1400px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-10 mb-12 items-end">
          <div className="md:col-span-7">
            <div className="text-xs uppercase tracking-[0.25em] mb-4" style={{ color: C.coralDeep }}>quem já passou pela Nubelle</div>
            <h2 className="font-serif" style={{ fontSize: 'clamp(32px, 4.2vw, 56px)', lineHeight: 1.05, fontWeight: 400 }}>
              <em style={{ color: C.coralDeep }}>5.0</em> no Google. <br />
              150+ avaliações. <br />
              Histórias reais.
            </h2>
          </div>
          <div className="md:col-span-5 flex items-center gap-4 p-5 rounded-2xl" style={{ background: C.white, border: `1px solid ${C.bone}` }}>
            <div className="font-serif text-6xl" style={{ color: C.coralDeep, fontWeight: 400 }}>5.0</div>
            <div>
              <div className="flex gap-0.5 mb-1">
                {[1, 2, 3, 4, 5].map((i) => <span key={i} style={{ color: C.coral, fontSize: 18 }}>★</span>)}
              </div>
              <div className="text-sm font-medium">Google Reviews</div>
              <div className="text-xs" style={{ color: 'rgba(14,59,58,0.6)' }}>150+ avaliações verificadas</div>
            </div>
          </div>
        </div>

        {/* Featured testimonial, Luiza */}
        <div className="mb-12 p-8 md:p-12 rounded-[32px]" style={{ background: C.ink, color: C.cream }}>
          <div className="grid md:grid-cols-12 gap-8">
            <div className="md:col-span-3">
              <div className="text-xs uppercase tracking-[0.25em] mb-3" style={{ color: C.coral }}>Depoimento em destaque</div>
              <div className="flex gap-0.5 mb-4">
                {[1, 2, 3, 4, 5].map((i) => <span key={i} style={{ color: C.coral, fontSize: 18 }}>★</span>)}
              </div>
              <div className="font-serif text-2xl" style={{}}>Luiza M.</div>
              <div className="text-sm mt-1" style={{ color: 'rgba(244,237,227,0.6)' }}>cliente Nubelle Salvador</div>
            </div>
            <div className="md:col-span-9 space-y-3 text-base md:text-lg" style={{ color: 'rgba(244,237,227,0.85)', lineHeight: 1.55 }}>
              <p>"Fiz 8 sessões em uma clínica bem conhecida aqui em Salvador. Pacote fechado, preço atrativo. Mas <em>em nenhum momento alguém me explicou nada</em>, as meninas chegavam, executavam e pronto. Quando os pelos voltaram quase todos na 6ª sessão, não sabia nem pra quem reclamar."</p>
              <p>"Vi um anúncio da Nubelle falando exatamente sobre isso. Fui muito cética. Mas quando fui pessoalmente, me encantei. Havia <strong style={{ color: C.coral }}>interesse real em mim</strong>, no meu histórico, no meu fototipo, no que eu esperava. Da primeira à terceira sessão já percebi o que nunca tinha percebido antes."</p>
              <p>"Estou na oitava sessão. Já ajustaram a forma de aplicar em duas regiões, e me contaram o motivo de cada mudança. <strong style={{ color: C.cream }}>É diferente de tudo que vivi antes.</strong>"</p>
            </div>
          </div>
        </div>

        {/* Reviews grid */}
        <div className="grid md:grid-cols-3 gap-4">
          {reviews.map((r, i) =>
          <div key={i} className="p-6 rounded-2xl transition hover:-translate-y-1" style={{ background: C.white, border: `1px solid ${C.bone}` }}>
              <div className="flex gap-0.5 mb-3">
                {Array(r.stars).fill(0).map((_, j) => <span key={j} style={{ color: C.coral }}>★</span>)}
              </div>
              <p className="text-sm mb-4" style={{ color: 'rgba(14,59,58,0.8)', lineHeight: 1.55 }}>"{r.text}"</p>
              <div className="text-xs font-medium" style={{ color: C.ink }}>— {r.author}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ====== Objections / FAQ ======
function FAQ() {
  const [open, setOpen] = useState4(0);
  const faqs = [
  ['Dói muito?', 'Dor é individual e varia por região, por dia, para mulheres, pelo ciclo hormonal. Antes de cada sessão avaliamos sua sensibilidade e ajustamos os parâmetros. A ponteira de resfriamento a −12°C reduz muito o desconforto. A maioria descreve como formigamento leve.'],
  ['Vai manchar minha pele?', 'Para pele morena e negra, essa é a pergunta mais legítima. O risco existe quando a tecnologia é errada ou o protocolo descuidado. O Hakon 4D tem o 1064nm (Nd:YAG), indicado para fototipos altos. Avaliamos seu fototipo, fazemos teste de disparo e calibramos antes de qualquer sessão. Não disparamos sem calibrar.'],
  ['É definitivo?', 'Não existe laser definitivo, qualquer clínica que prometa isso está sendo desonesta. O que entregamos é redução permanente de longa duração: a maioria para de depender da depilação tradicional. Pelos que voltam são mais finos e ralos. Para isso existe a Garantia Nubelle.'],
  ['Tem lugar mais barato.', 'Tem. A diferença está no que está incluso. Em redes, você compra sessões em série. Aqui você tem consulta, protocolo personalizado, reavaliação a cada 3 sessões, garantia e cashback. Para o menor preço por sessão, qualquer lugar serve. Para resultado acompanhado, a escolha muda.'],
  ['Já fiz laser e não funcionou.', 'Acontece mais do que deveria, geralmente por protocolo inadequado para o fototipo ou ausência de acompanhamento. Resultado em laser depende de calibração, constância e avaliação. Nossa consulta existe para entender o que aconteceu e o que faz sentido para a sua pele agora.'],
  ['Posso parcelar?', 'Sim. Ritual Completo e Ciclo Inicial: até 10× sem juros (parcela mínima R$90). Combos têm parcelamento sobre o valor total, geralmente parcelas menores. PIX: 8% de desconto (até 22% nos Combos do Ritual).'],
  ['Vocês atendem homens?', 'Sim, com protocolo masculino técnico e discreto. Costas, tórax, barba, faixa de barba, axilas, abdômen, nuca. Atendimento direto, sem constrangimento, orientado a resultado prático. Combos específicos disponíveis.'],
  ['Como marcar?', 'Pelo WhatsApp, clicando em qualquer botão desta página. Respondemos rápido. Estamos no Rio Vermelho, Salvador, com estacionamento no local.']];

  return (
    <section id="duvidas" className="py-24 md:py-32" style={{ background: C.paper, color: C.ink }}>
      <div className="max-w-[1100px] mx-auto px-5 md:px-8">
        <div className="text-xs uppercase tracking-[0.25em] mb-4" style={{ color: C.coralDeep }}>perguntas que você está fazendo</div>
        <h2 className="font-serif mb-12" style={{ fontSize: 'clamp(32px, 4.2vw, 56px)', lineHeight: 1.05, fontWeight: 400 }}>
          Respondidas com <em style={{ color: C.coralDeep }}>honestidade.</em>
        </h2>

        <div className="space-y-2">
          {faqs.map(([q, a], i) =>
          <div key={i} className="rounded-2xl overflow-hidden transition" style={{ background: C.white, border: `1px solid ${C.bone}` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} className="w-full flex items-center justify-between gap-6 p-6 text-left">
                <span className="font-medium text-lg" style={{ color: C.ink }}>{q}</span>
                <span className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-xl transition" style={{
                background: open === i ? C.coral : C.paper,
                color: open === i ? C.ink : C.ink,
                transform: open === i ? 'rotate(45deg)' : 'none'
              }}>+</span>
              </button>
              {open === i &&
            <div className="px-6 pb-6 text-base" style={{ color: 'rgba(14,59,58,0.75)', lineHeight: 1.6 }}>{a}</div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ====== Final CTA, black + neon ======
function FinalCTA() {
  return (
    <section id="agendar" className="relative py-24 md:py-36 overflow-hidden grain" style={{ background: '#051a1a', color: C.cream }}>
      {/* layered glows */}
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 20% 30%, rgba(255,139,122,0.18) 0%, transparent 45%), radial-gradient(ellipse at 80% 70%, rgba(255,139,122,0.14) 0%, transparent 45%)`
      }}></div>
      <div className="absolute inset-0 opacity-[0.04] pointer-events-none" style={{
        backgroundImage: 'linear-gradient(rgba(255,139,122,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,139,122,0.6) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse at center, black 20%, transparent 75%)'
      }}></div>

      {/* neon marquee top */}
      <div className="absolute top-0 left-0 right-0 py-3 overflow-hidden border-b" style={{ borderColor: 'rgba(255,139,122,0.15)', background: 'rgba(0,0,0,0.3)' }}>
        <div className="flex gap-8 whitespace-nowrap animate-marquee-fast" style={{ width: 'max-content' }}>
          {Array(4).fill(0).map((_, i) =>
          <div key={i} className="flex gap-8 items-center text-xs uppercase tracking-[0.3em]">
              <span style={{ color: 'var(--neon)' }}>● AGENDA MAIO · VAGAS LIMITADAS</span>
              <span className="opacity-30">/</span>
              <span style={{ color: 'rgba(244,237,227,0.5)' }}>CONSULTA GRATUITA ESTA CAMPANHA</span>
              <span className="opacity-30">/</span>
              <span style={{ color: 'var(--neon)' }}>● Rio Vermelho · Salvador</span>
              <span className="opacity-30">/</span>
              <span style={{ color: 'rgba(244,237,227,0.5)' }}>resposta em minutos no WhatsApp</span>
              <span className="opacity-30">/</span>
            </div>
          )}
        </div>
      </div>

      <div className="relative max-w-[1100px] mx-auto px-5 md:px-8 text-center pt-8">
        <div className="inline-flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] mb-6 px-3 py-1.5 rounded-full" style={{ color: 'var(--neon)', border: '1px solid rgba(255,139,122,0.3)', background: 'rgba(255,139,122,0.06)' }}>
          <span className="w-1.5 h-1.5 rounded-full bg-[var(--neon)]" style={{ boxShadow: '0 0 12px var(--neon)' }}></span>
          a agenda tem limite
        </div>
        <h2 className="font-display" style={{ fontSize: 'clamp(44px, 7vw, 104px)', lineHeight: 0.92, fontWeight: 700, letterSpacing: '-0.04em' }}>
          Sua pele. <br />
          Sua rotina. <br />
          <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>O protocolo</span>
          <span style={{ fontWeight: 300 }}> que ela merece.</span>
        </h2>
        <p className="mt-10 text-lg md:text-xl max-w-2xl mx-auto" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.55 }}>
          Salvador tem sol o ano inteiro, sua pele não precisa mais ficar a reboque da sua depilação. Por tempo limitado, a consulta de <span style={{ color: 'var(--neon)' }}>R$ 189 está sem custos</span> nesta campanha de lançamento. A taxa de reserva também. Vagas limitadas.
        </p>

        <div className="mt-12 flex flex-col sm:flex-row gap-4 justify-center">
          <a href={window.waLink('Olá! Vim do site da Nubelle e quero solicitar minha sessão experimental de depilação a laser.')} target="_blank" rel="noopener" className="group relative inline-flex items-center justify-center gap-3 px-8 py-5 rounded-full transition hover:scale-[1.03] neon-glow" style={{ background: 'var(--neon)', color: '#051a1a' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.9L4 20l4.2-1.1a7.93 7.93 0 0 0 3.84.98h.01a7.94 7.94 0 0 0 5.55-13.56zm-2.04 8.85c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1s-.51.64-.62.78c-.12.13-.23.15-.42.05-.2-.1-.84-.31-1.6-.99-.59-.52-.99-1.17-1.1-1.37-.12-.2-.01-.3.09-.4.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.06-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.38-.01a.74.74 0 0 0-.53.25c-.18.2-.7.69-.7 1.67 0 .98.71 1.93.81 2.07.1.13 1.4 2.13 3.4 2.99.47.2.84.33 1.13.42.48.15.91.13 1.25.08.38-.06 1.17-.48 1.34-.94.16-.46.16-.86.12-.94-.05-.09-.18-.14-.38-.24z" /></svg>
            <span className="font-medium">Solicitar sessão experimental</span>
            <span className="text-sm opacity-70">(71) 99262-8880</span>
          </a>
          <a href={window.waLink('Olá! Vim do site da Nubelle e tenho dúvidas sobre depilação a laser antes de agendar. Pode me ajudar?')} target="_blank" rel="noopener" className="inline-flex items-center justify-center gap-2 px-8 py-5 rounded-full transition hover:bg-white/5" style={{ border: '1px solid rgba(255,139,122,0.4)', color: C.cream }}>
            Tenho dúvidas antes
          </a>
        </div>

        {/* P.S. */}
        <div className="mt-20 p-8 md:p-10 rounded-3xl text-left relative overflow-hidden" style={{ background: 'rgba(255,139,122,0.04)', border: '1px solid rgba(255,139,122,0.15)' }}>
          <div className="absolute -top-10 -left-10 w-40 h-40 rounded-full opacity-30 spin-slow pointer-events-none" style={{
            background: 'conic-gradient(from 0deg, transparent, var(--neon), transparent 30%)',
            filter: 'blur(40px)'
          }}></div>
          <div className="font-display text-2xl md:text-3xl mb-3" style={{ color: 'var(--neon)', fontWeight: 900, fontStyle: 'italic' }}>P.S.</div>
          <p className="relative text-base md:text-lg" style={{ color: 'rgba(244,237,227,0.85)', lineHeight: 1.65 }}>
            Se você chegou até aqui, já está mais perto do que imagina. A única coisa que separa você de entender o que é possível para a sua pele é uma conversa, sem compromisso, sem pressão, com quem trata pele todos os dias e sabe que <em>a sua tem história própria</em>. As vagas desta semana são limitadas. Se o botão ainda está disponível, ainda há horário para você.
          </p>
        </div>
      </div>
    </section>);

}

// ====== Footer ======
function Footer() {
  return (
    <footer className="py-16" style={{ background: C.inkDeep, color: 'rgba(244,237,227,0.7)' }}>
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 grid md:grid-cols-4 gap-10">
        <div className="md:col-span-2">
          <div className="flex items-center gap-3 mb-4">
            <img src="assets/nubelle-logo-rosa.png" alt="" className="h-12 w-12 rounded-full" />
            <span className="text-2xl font-serif" style={{ color: C.cream }}>Nubelle Salvador</span>
          </div>
          <p className="text-sm max-w-md mb-4">
            Depilação a laser com protocolo acompanhado. Tecnologia Hakon 4D. Atendimento humanizado para todos os fototipos. Rio Vermelho, Salvador-BA.
          </p>
          <div className="flex gap-3 mt-4">
            {['IG', 'WA', 'GG'].map((s) =>
            <a key={s} href="#" className="w-9 h-9 rounded-full flex items-center justify-center text-xs transition hover:scale-110" style={{ background: 'rgba(244,237,227,0.08)', color: C.coral }}>{s}</a>
            )}
          </div>
        </div>
        <div>
          <div className="text-xs uppercase tracking-wider mb-4" style={{ color: C.coral }}>Endereço</div>
          <p className="text-sm leading-relaxed">Rua Ilhéus, 187 - Rio Vermelho<br />Salvador, BA<br />Estacionamento no local</p>
        </div>
        <div>
          <div className="text-xs uppercase tracking-wider mb-4" style={{ color: C.coral }}>Contato</div>
          <p className="text-sm leading-relaxed">WhatsApp<br />(71) 99262-8880<br />Resposta rápida</p>
        </div>
      </div>
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 mt-12 pt-8 text-xs flex flex-wrap justify-between gap-4" style={{ borderTop: '1px solid rgba(244,237,227,0.08)', color: 'rgba(244,237,227,0.4)' }}>
        <div>© 2026 Nubelle Salvador · Todos os direitos reservados</div>
        <div>Tecnologia Hakon 4D · Medical San · ANVISA 82338020001</div>
      </div>
    </footer>);

}

Object.assign(window, { SocialProof, FAQ, FinalCTA, Footer });