/**
 * Hero.jsx — v3 (advogado como herói).
 *
 * Regras de copy (invioláveis): a IA é um VENDEDOR (qualifica e fecha),
 * nunca "secretária". A LP vende a IA; a reunião de 30 min é o canal/CTA.
 * O ADVOGADO é o herói — headlines colocam o leitor como sujeito.
 *
 * Foco por variante:
 *   A — advogado como sujeito (imperativo de resultado)
 *   B — dor da inação, mas com o leitor virando o que ganha
 *   C — vendedor IA + treino de nicho (identidade do produto)
 *
 * O lado direito troca o antigo HeroVSL (player morto) por um mockup de
 * WhatsApp animado (HeroChatMockup), mostrando a IA atendendo de verdade.
 */

const HERO_ACTIVE_VARIANT = 'A';
const HERO_MICRO_VARIANT = 'A';

const HERO_VARIANTS = {
  // VARIANT-A — advogado como sujeito (imperativo + remoção de objeção)
  A: {
    headlineTop: 'Tenha um time comercial inteiro de IAs.',
    headlineAccent: 'Sem contratar mais ninguém',
    subhead: (
      <>
        Agora você pode deixar a IA atender, qualificar, ler documentos, agendar atendimentos e fechar contratos. <strong>Tudo isso com apenas uma ferramenta.</strong>
      </>
    ),
    vslIntro: 'Veja o vendedor IA atendendo um lead jurídico, ao vivo.',
    cta: 'Quero conhecer esta IA',
    ctaNavFull: 'Quero conhecer esta IA',
    ctaNavShort: 'Conhecer a IA',
  },

  // VARIANT-B — dor da inação, leitor vira quem responde primeiro
  B: {
    headlineTop: 'O lead das 22h fecha com quem responde primeiro.',
    headlineAccent: 'Agora, esse alguém é você.',
    subhead: (
      <>
        Enquanto seu concorrente vê a mensagem só de manhã, seu <strong>vendedor IA</strong> atende no segundo em que o WhatsApp toca, qualifica o caso e agenda a consulta — treinado especificamente pra sua área do direito. O lead que ia embora fica.
      </>
    ),
    vslIntro: 'Veja como o vendedor IA vira esse jogo.',
    cta: 'Quero parar de perder esses leads',
    ctaNavFull: 'Quero parar de perder leads',
    ctaNavShort: 'Parar perda',
  },

  // VARIANT-C — vendedor IA + treino de nicho (identidade do produto)
  C: {
    headlineTop: 'Seu novo vendedor atende no WhatsApp 24/7,',
    headlineAccent: 'treinado na sua área do direito.',
    subhead: (
      <>
        Não é chatbot de árvore. É um <strong>vendedor de IA</strong> que conversa de verdade: lê CAT, CNIS e contrato, transcreve áudio, qualifica pelos seus critérios e agenda direto na sua agenda. Implementação feita por nós — você não precisa entender nada de IA.
      </>
    ),
    vslIntro: 'O vendedor IA configurado num caso real.',
    cta: 'Ver o sistema pro meu nicho',
    ctaNavFull: 'Ver o sistema pro meu nicho',
    ctaNavShort: 'Ver sistema',
  },
};

// Microcopy abaixo do CTA — promessa do call sem perder framing de produto.
const HERO_MICRO_VARIANTS = {
  // VARIANT-A — entregável do call (diagnóstico)
  A: 'Reunião de 30 min · diagnóstico do funil incluído',
  // VARIANT-B — prova ao vivo (ver IA configurada)
  B: 'Veja a IA configurada pro seu nicho ao vivo · 30 min · Google Meet',
};

// Métrica-âncora — 3 stat-cards. Placeholders semânticos. Detector mais
// abaixo esconde a faixa se TODOS ainda forem placeholder.
const HERO_STATS = [
  { value: '{PCT_CONVERSAO}x', label: 'mais contratos fechados — média nos primeiros 60 dias' },
  { value: '<{N_SEGUNDOS}s',   label: 'tempo médio de primeira resposta — 24/7' },
  { value: '{N_NICHOS}+',       label: 'áreas do direito com playbook pronto' },
];

const isStatPlaceholder = (s) =>
  typeof s === 'string' && /\{[A-Z_0-9]+\}/.test(s);

const Hero = () => {
  const v = HERO_VARIANTS[HERO_ACTIVE_VARIANT] || HERO_VARIANTS.A;
  const micro = HERO_MICRO_VARIANTS[HERO_MICRO_VARIANT] || HERO_MICRO_VARIANTS.A;

  return (
    <section className="hero" data-screen-label="01 Hero">
      {/* Vídeo cinematográfico em loop. Coloque seu arquivo em
          assets/hero-video.mp4 (curto, mudo). Sem o arquivo, o gradiente azul +
          o grid estático seguem renderizando — não quebra a página. */}
      <video
        className="hero-video"
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        src="assets/hero-video.mp4"
        poster="assets/hero-video-poster.jpg"
        aria-hidden="true"
      />
      <div className="hero-grid" aria-hidden="true"></div>
      <div className="hero-bg"></div>

      {/* Motifs da identidade visual: estrelas/sparkles verde-limão + halftone */}
      <div className="hero-deco" aria-hidden="true">
        <svg className="spark spark-1" viewBox="0 0 24 24"><path d="M12 1.6c.9 6 4.4 9.5 10.4 10.4C16.4 12.9 12.9 16.4 12 22.4 11.1 16.4 7.6 12.9 1.6 12 7.6 11.1 11.1 7.6 12 1.6Z"/></svg>
        <svg className="spark spark-2" viewBox="0 0 24 24"><path d="M12 1.6c.9 6 4.4 9.5 10.4 10.4C16.4 12.9 12.9 16.4 12 22.4 11.1 16.4 7.6 12.9 1.6 12 7.6 11.1 11.1 7.6 12 1.6Z"/></svg>
        <svg className="spark spark-3" viewBox="0 0 24 24"><path d="M12 1.6c.9 6 4.4 9.5 10.4 10.4C16.4 12.9 12.9 16.4 12 22.4 11.1 16.4 7.6 12.9 1.6 12 7.6 11.1 11.1 7.6 12 1.6Z"/></svg>
      </div>

      {/* Nav vive dentro do Hero pra grid + atmosfera passarem por trás dele */}
      <nav className="nav">
        <a className="nav-logo" href="#" aria-label="Conversapp">
          <Logo height={30} variant="branco" />
        </a>
        <ul className="nav-links" aria-label="Navegação principal">
          <li><a href="#ia">O que faz</a></li>
          <li><a href="#comparativo">Comparativo</a></li>
          <li><a href="#resultados">Resultados</a></li>
          <li><a href="#depoimentos">Depoimentos</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </nav>

      <div className="container hero-inner">
        <div className="hero-copy">
          <h1>
            <span className="line">{v.headlineTop}</span>
            <span className="line line-accent">{v.headlineAccent}</span>
          </h1>
          <p className="hero-sub">{v.subhead}</p>
          <button
            type="button"
            className="btn btn-primary hero-copy-cta"
            onClick={() => window.dispatchEvent(new CustomEvent('open-demo-modal'))}
          >
            Quero conhecer a IA
            <Icon.Arrow/>
          </button>
        </div>
        <div className="hero-vsl-wrap">
          <HeroChatMockup/>
          <button
            type="button"
            className="btn btn-primary hero-vsl-cta"
            onClick={() => window.dispatchEvent(new CustomEvent('open-demo-modal'))}
          >
            {v.cta}
            <Icon.Arrow/>
          </button>
          {/* Só renderiza stats se pelo menos UM valor estiver real,
              pra nunca exibir chaves cruas {X} na tela. */}
          {HERO_STATS.some((s) => !isStatPlaceholder(s.value)) && (
            <ul className="hero-stats" aria-label="Métricas-âncora">
              {HERO_STATS.map((s, i) => {
                const ph = isStatPlaceholder(s.value);
                return (
                  <li key={i} className={`hero-stat ${ph ? 'hero-stat-placeholder' : ''}`}>
                    <span className="hero-stat-value">{ph ? '—' : s.value}</span>
                    <span className="hero-stat-label">{s.label}</span>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>

      {/* Indicador de scroll — some quando o usuário começa a descer (GSAP) */}
      <div className="hero-scroll-ind" aria-hidden="true">
        <span className="hero-scroll-label">SCROLL</span>
        <span className="hero-scroll-line"><i></i></span>
      </div>
    </section>
  );
};

window.Hero = Hero;