/**
 * TestimonialVideo — facade do YouTube. Renderiza apenas a thumbnail estática
 * até o usuário clicar; só então monta o iframe (com autoplay). Resolve a
 * "travada" de scroll causada pelo player do YouTube (~1MB de JS) carregando
 * conforme o usuário entra na seção.
 */
const TestimonialVideo = ({ videoId, caption }) => {
  const [playing, setPlaying] = React.useState(false);
  const thumb = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;
  const embed = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`;

  return (
    <article className="t-video-card">
      <div className="t-video-frame">
        {playing ? (
          <iframe
            src={embed}
            title="Depoimento em vídeo — Conversapp IA"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
            referrerPolicy="strict-origin-when-cross-origin"
          />
        ) : (
          <button
            type="button"
            className="t-video-poster"
            onClick={() => setPlaying(true)}
            aria-label="Reproduzir depoimento"
          >
            <img src={thumb} alt={caption} loading="lazy" decoding="async"/>
            <span className="t-video-play" aria-hidden="true">
              <svg viewBox="0 0 68 48" width="68" height="48">
                <path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="#f00"/>
                <path d="M27 14v20l18-10L27 14z" fill="#fff"/>
              </svg>
            </span>
          </button>
        )}
      </div>
      <p className="t-video-caption">{caption}</p>
    </article>
  );
};

window.TestimonialVideo = TestimonialVideo;

/**
 * Testimonials — 5 shells com placeholders nominais. 4ª onda: lógica defensiva
 * pra NUNCA renderizar texto bruto com chaves {X}.
 *
 *   - Faixa de números agregados: se TODOS os 3 stats ainda forem placeholder,
 *     a faixa não é renderizada (display: none).
 *   - Cards de depoimento: se TODOS os 5 shells ainda têm {NOME_REAL} placeholder,
 *     renderiza apenas 3 placeholders visuais neutros ("Depoimento em breve")
 *     sem mostrar nenhuma chave na tela.
 *   - Quando algum shell tiver dados parciais, cada campo individual é passado
 *     por safe(): valores placeholder viram string vazia (ou label fallback).
 */
const Testimonials = () => {
  const aggregates = [
    { value: '{N_ESCRITORIOS}', label: 'escritórios usando hoje' },
    { value: '{N_CONTRATOS}',   label: 'contratos fechados via IA' },
    { value: '{N_MENSAGENS}M+', label: 'mensagens processadas/mês' },
  ];

  // 5ª onda — 5 ângulos pós-implementação. Cada shell sugere um RESULTADO
  // que a IA entregou no escritório (não a experiência da demo). Placeholders
  // nominais preservados — usuário substitui por dado real.
  const shells = [
    {
      // SHELL 01 — VELOCIDADE: IA qualificando leads e agendando consultas
      // no curto prazo (poucos dias após estar no ar). Sugestão de quote:
      // "A IA agendou {N_AGENDAMENTOS} consultas qualificadas nos primeiros
      // {N_DIAS_OPERACAO} dias. Levei mais tempo pra revisar a agenda do que
      // pra ela qualificar."
      quote: '{DEPOIMENTO}',
      nome: '{NOME_REAL}',
      titulo: '{TITULO}',
      role: '{NICHO}',
      escritorio: '{ESCRITORIO}',
      cidade: '{CIDADE}',
      foto: '{FOTO_URL_REAL}',
      metricas: [
        { value: '{N_LEADS}/dia',         label: 'leads qualificados' },
        { value: '{N_AGENDAMENTOS}/mês',  label: 'agendamentos' },
        { value: '<{N_SEGUNDOS}s',        label: 'tempo de resposta' },
      ],
      accent: 'neon',
    },
    {
      // SHELL 02 — CUSTO EQUIVALENTE: IA substituindo a contratação de um
      // vendedor/SDR a fração do custo. Sugestão de quote: "Ia abrir vaga de
      // SDR. O vendedor IA atende {N_LEADS_MES} leads/mês por uma fração do
      // custo de um CLT — e ainda cobre fim de semana."
      quote: '{DEPOIMENTO}',
      nome: '{NOME_REAL}',
      titulo: '{TITULO}',
      role: '{NICHO}',
      escritorio: '{ESCRITORIO}',
      cidade: '{CIDADE}',
      foto: '{FOTO_URL_REAL}',
      metricas: [
        { value: '−R$ {VALOR_ECONOMIA}/mês', label: 'vs CLT + encargos' },
        { value: '24/7',                       label: 'cobertura sem plantão' },
        { value: '{N_LEADS_MES}',              label: 'leads atendidos/mês' },
      ],
      accent: 'amber',
    },
    {
      // SHELL 03 — CETICISMO → CONVERSÃO: advogado cético que ouviu a IA
      // respondendo cliente real e fechou no mesmo dia. Sugestão de quote:
      // "Achei que IA não ia conversar com cliente jurídico. Ouvi um áudio
      // de atendimento real e contratei na hora. Hoje somos {N_MESES} meses
      // dentro e fechamos +{N_CONTRATOS_EXTRA} contratos a mais por mês."
      quote: '{DEPOIMENTO}',
      nome: '{NOME_REAL}',
      titulo: '{TITULO}',
      role: '{NICHO}',
      escritorio: '{ESCRITORIO}',
      cidade: '{CIDADE}',
      foto: '{FOTO_URL_REAL}',
      metricas: [
        { value: '+{N_CONTRATOS_EXTRA}/mês', label: 'contratos a mais' },
        { value: '{N_MESES} meses',           label: 'na operação' },
        { value: '{PCT_RECOMPRA}%',           label: 'cliente que volta' },
      ],
      accent: 'neon',
    },
    {
      // SHELL 04 — PÓS-VENDA: IA cuidando de cliente ativo, reduzindo churn
      // e liberando o time. Sugestão de quote: "A IA de pós-venda responde
      // andamento de processo e prazos de audiência sem tomar tempo do time.
      // Churn caiu {PCT_CHURN}% no semestre e meu time voltou a focar em
      // tese, não em recado."
      quote: '{DEPOIMENTO}',
      nome: '{NOME_REAL}',
      titulo: '{TITULO}',
      role: '{NICHO}',
      escritorio: '{ESCRITORIO}',
      cidade: '{CIDADE}',
      foto: '{FOTO_URL_REAL}',
      metricas: [
        { value: '−{PCT_CHURN}%',        label: 'churn do contrato ativo' },
        { value: '{N_HORAS}h/semana',    label: 'liberadas no time' },
        { value: '{N_PROCESSOS}',         label: 'processos acompanhados' },
      ],
      accent: 'neon',
    },
    {
      // SHELL 05 — ESCALA: dobrou mídia sem contratar mais ninguém. Sugestão
      // de quote: "Aumentei a mídia paga em {PCT_MIDIA}% e a IA absorveu o
      // volume sem nova contratação. Antes, dobrar a mídia exigia dobrar o
      // time de atendimento. Agora é só apertar o botão do tráfego."
      quote: '{DEPOIMENTO}',
      nome: '{NOME_REAL}',
      titulo: '{TITULO}',
      role: '{NICHO}',
      escritorio: '{ESCRITORIO}',
      cidade: '{CIDADE}',
      foto: '{FOTO_URL_REAL}',
      metricas: [
        { value: '+{PCT_MIDIA}%',        label: 'mídia paga absorvida' },
        { value: '0 novas contratações', label: 'pra dobrar' },
        { value: '+{PCT_MARGEM}%',       label: 'margem do funil' },
      ],
      accent: 'amber',
    },
  ];

  // Helpers — detectam placeholders e renderizam fallback neutro.
  const isPlaceholder = (v) =>
    typeof v === 'string' && /\{[A-Z_0-9]+\}/.test(v);
  const safe = (v, fallback = '') => (isPlaceholder(v) ? fallback : v);

  // 4ª onda: só renderiza faixa de agregados se PELO MENOS UM valor estiver real.
  const aggHasRealData = aggregates.some((a) => !isPlaceholder(a.value));

  // 4ª onda: se TODOS os 5 shells ainda têm nome placeholder, mostra 3 placeholders
  // visuais neutros (sem chaves). Quando o user começar a preencher, mostra
  // os shells reais com os campos parciais ainda escondidos.
  const allShellsPlaceholder = shells.every((s) => isPlaceholder(s.nome));
  const visibleShells = allShellsPlaceholder ? [] : shells;

  const initialsOf = (full) => {
    if (!full || isPlaceholder(full)) return '··';
    const parts = full.trim().split(/\s+/);
    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
  };

  return (
    <section className="section section-testimonials-dark" id="depoimentos" data-screen-label="05 Depoimentos">
      <div className="container">
        <div className="section-heading section-heading-depoimentos">
          <div className="eyebrow"><span className="dot"></span>ESCRITÓRIOS QUE PARARAM DE PERDER CLIENTES</div>
          <h2>Veja relatos de Advogados que cortaram custo de equipe e aumentaram a sua conversão com a IA do Conversapp</h2>
        </div>

        {/* Faixa de agregados — só renderiza se houver dado real */}
        {aggHasRealData && (
          <ul className="testimonials-aggregate">
            {aggregates.map((a, i) => {
              const ph = isPlaceholder(a.value);
              return (
                <li key={i} className={`agg-item ${ph ? 'agg-item-placeholder' : ''}`}>
                  <span className="agg-stat">{ph ? '—' : a.value}</span>
                  <span className="agg-label">{a.label}</span>
                </li>
              );
            })}
          </ul>
        )}

        {/* Depoimentos em vídeo (YouTube Shorts) — grid responsiva.
            Cada card usa facade: até clicar, mostra só uma thumbnail estática
            (sem iframe). O iframe do YouTube traz ~1MB de JS que trava o
            scroll quando carrega; sob demanda elimina o jank. */}
        <div className="t-video-wrap">
          <TestimonialVideo
            videoId="kwnnyKcU1Qg"
            caption="Cliente Conversapp · relato em vídeo"
          />
          <TestimonialVideo
            videoId="7snnr9i0xrs"
            caption="Cliente Conversapp · relato em vídeo"
          />
        </div>

        {/* Grid de cards reais (renderiza só quando shells forem preenchidos) */}
        {allShellsPlaceholder ? null : (
          <div className="testimonials-grid testimonials-grid-5">
            {visibleShells.map((t, i) => {
              const fotoReal = !isPlaceholder(t.foto);
              const nome = safe(t.nome, 'Cliente ConversApp');
              const role = safe(t.role, 'Escritório jurídico');
              const escritorio = safe(t.escritorio, '');
              const cidade = safe(t.cidade, '');
              const titulo = safe(t.titulo, '');
              const orgLine = [escritorio, cidade].filter(Boolean).join(' · ');
              const quote = safe(t.quote, 'Depoimento em preparação.');

              return (
                <article key={i} className={`t-card t-card-text reveal accent-${t.accent}`}>
                  <div className="t-card-body">
                    <svg className="t-card-quote-mark" width="40" height="32" viewBox="0 0 40 32" fill="none" aria-hidden="true">
                      <path d="M0 32V20C0 8.954 8.954 0 20 0v8c-6.627 0-12 5.373-12 12h12v12H0zm22 0V20c0-11.046 8.954-20 20-20v8c-6.627 0-12 5.373-12 12h12v12H22z" fill="currentColor" opacity="0.18"/>
                    </svg>
                    <p className="t-card-quote">{quote}</p>
                    <ul className="t-metrics" aria-label="Métricas do case">
                      {t.metricas.map((m, k) => {
                        const ph = isPlaceholder(m.value);
                        return (
                          <li key={k} className={`t-metric ${ph ? 't-metric-placeholder' : ''}`}>
                            <span className="t-metric-value">{ph ? '—' : m.value}</span>
                            <span className="t-metric-label">{m.label}</span>
                          </li>
                        );
                      })}
                    </ul>
                    <div className="t-card-author">
                      {fotoReal ? (
                        <img className="t-avatar t-avatar-img" src={t.foto} alt={nome} loading="lazy"/>
                      ) : (
                        <div className="t-avatar t-avatar-placeholder" aria-hidden="true">
                          {initialsOf(t.nome)}
                        </div>
                      )}
                      <div className="t-author-meta">
                        <p className="t-card-name">
                          {titulo && <>{titulo} </>}
                          {nome}
                        </p>
                        {role && <p className="t-card-role">{role}</p>}
                        {orgLine && <p className="t-card-org">{orgLine}</p>}
                      </div>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
};

window.Testimonials = Testimonials;