// sections-extra.jsx — seções novas da v2: vídeo do YouTube e planos.
// Tudo que você provavelmente vai querer editar está nas duas constantes
// de configuração aqui em cima. O resto é só marcação.

/* =====================================================
   CONFIG 1 — VÍDEO
   Cada item vira um botão acima da moldura. Toca na ordem, e
   quando um acaba já emenda no próximo sozinho.
   `id` = só o ID, não a URL inteira.
   Ex: https://youtu.be/TNXaAKl9P2g  →  'TNXaAKl9P2g'
   Lista vazia mostra o espaço reservado.
   ===================================================== */
const VIDEOS = [
  { id: 'TNXaAKl9P2g', botao: 'Lado do cliente' },
  // TEMPORÁRIO: segundo vídeo fora do ar. Descomente pra trazer de volta
  // (com dois itens na lista os botões de aba voltam a aparecer sozinhos).
  // { id: 'piltP0hDvS0', botao: 'Seu lado' },
];

// duração do giro; precisa bater com o CSS (.video-frame__flip)
const GIRO_MS = 300;

function thumbDe(id) {
  return `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`;
}

const VIDEO_COPY = {
  overline: 'Veja funcionando',
  title: 'Dois minutos. Você entende o que a LUE faz.',
  lede: 'Uma conversa real, do "oi" até o lead cair no painel. Sem slide, sem promessa. É a tela do produto rodando.',
  duration: '2 min',
};

/* =====================================================
   CONFIG 3 — FUNCIONALIDADES
   Mesma lista de recursos dos planos, agora explicada uma a uma.

   `mockup` = nome de um componente de mockups.jsx. Deixe '' pra
   mostrar o quadrado reservado.

   Pra usar um print de verdade no lugar do mockup, preencha `img`
   com o caminho do arquivo (ex: 'assets/func-04.png'). `img` ganha
   da `mockup`.
   ===================================================== */
const FUNCS_COPY = {
  overline: 'Por dentro da LUE',
  title: 'Funcionalidades',
  lede: 'Do primeiro "oi" no WhatsApp até o pedido fechado no painel. Escolhe uma tela e vê como funciona. Tudo isso vem em todos os planos.',
};

const FUNCS = [
  {
    nome: 'IA no WhatsApp',
    hint: 'Atendimento',
    titulo: 'A conversa inteira, do "oi" ao pedido fechado.',
    texto: 'A LUE atende no WhatsApp que sua loja já divulga. Mostra a peça, responde as perguntas de sempre, monta o resumo do pedido com itens e valores e confirma pagamento e entrega. O vendedor entra depois, só na hora de fechar.',
    destaque: 'O número continua sendo o mesmo da sua loja.',
    mockup: '', img: 'assets/whats-pedido.png',
  },
  {
    nome: 'Envio de fotos',
    hint: 'Atendimento',
    titulo: 'Cliente pede pra ver. A peça aparece.',
    texto: 'O disparo é automático: a LUE encontra o produto no seu catálogo e manda a foto na conversa junto com nome, preço, tamanhos e cores disponíveis. Tudo de uma vez, enquanto o cliente ainda está com vontade de comprar.',
    destaque: 'Foto, preço, tamanho e cor na mesma mensagem.',
    mockup: '', img: 'assets/whats-fotos.png',
  },
  {
    nome: 'Conversas',
    hint: 'Painel',
    titulo: 'Tudo acontecendo, numa tela só.',
    texto: 'Cada canal da loja cai na mesma caixa de entrada. Você acompanha a IA trabalhando em tempo real e, no segundo em que quiser assumir, aperta "Pausar IA" e continua de onde ela parou, com todo o histórico na tela.',
    destaque: 'Você entra na conversa sem começar do zero.',
    mockup: '', img: 'assets/painel-conversas.png',
  },
  {
    nome: 'Leads',
    hint: 'Painel',
    titulo: 'Todo mundo que falou com a loja fica registrado.',
    texto: 'O menu Leads guarda cada pessoa que entrou em contato, não só quem comprou. Todas ficam na fila com o que a LUE apurou sobre o que procuravam, então você consegue voltar depois em quem ficou pelo caminho.',
    destaque: 'Nenhum contato se perde por falta de anotação.',
    mockup: 'LeadQueue', img: '',
  },
  {
    nome: 'Pedidos',
    hint: 'Painel',
    titulo: 'A ficha que o vendedor precisa pra fechar.',
    texto: 'Itens com tamanho e cor, valor bruto, desconto de atacado já calculado, forma de pagamento e de entrega. Ao lado, o resumo de interesse do cliente e um botão que abre a conversa direto no WhatsApp.',
    destaque: 'O vendedor abre a ficha já sabendo o que oferecer.',
    mockup: '', img: 'assets/painel-pedidos.png',
  },
  {
    nome: 'Estoque',
    hint: 'Catálogo',
    titulo: 'Seu catálogo, do jeito que a IA precisa dele.',
    texto: 'Importe do FácilZap e acompanhe produtos, unidades, estoque baixo e valor parado em estoque. A LUE ainda escreve a descrição de cada peça e deixa esperando a sua revisão, pra você aprovar ou reverter antes que vá pro ar.',
    destaque: 'A IA escreve a descrição. Você só revisa.',
    mockup: '', img: 'assets/painel-estoque.png',
  },
  {
    nome: 'Loja',
    hint: 'Catálogo',
    titulo: 'É aqui que você configura a IA.',
    texto: 'Logo, nome, bio e categorias de produtos ensinam a LUE a se apresentar como a sua loja e definem sobre o que ela fala. O que você preenche aqui aparece no topo do chat e no link público, e as categorias já vêm carregadas do seu catálogo.',
    destaque: 'A IA atende do jeito que você configurar.',
    mockup: '', img: 'assets/painel-loja.png',
  },
  {
    nome: 'Equipe',
    hint: 'Gestão',
    titulo: 'Seu time dentro do painel.',
    texto: 'Convide cada vendedor por e-mail e ele entra com o próprio login, sem senha compartilhada. Você controla quem tem acesso às conversas e aos pedidos da loja, e tira o acesso quando alguém sai do time.',
    destaque: 'Cada vendedor com o próprio login.',
    mockup: '', img: 'assets/painel-equipe.png',
  },
];

/* =====================================================
   CONFIG 2 — PLANOS
   ===================================================== */
const PLANS_COPY = {
  overline: 'Planos',
  title: 'Preço fixo por mês. Sem cobrar por lead.',
  lede: 'Você não paga por lead capturado nem por pedido fechado. Escolhe o plano pelo volume de conversas e pelo tamanho do time. Todos os recursos vêm em todos os planos.',
};

/* Os 11 recursos são os mesmos nos três planos.
   Ficam aqui numa lista só pra não repetir texto três vezes.
   Se algum dia um recurso deixar de valer pra um plano, coloque o
   nome dele em `excecoes` no plano — ele aparece cinza e riscado. */
const PLAN_FEATURES = [
  { nome: 'Vendedor virtual com IA', hint: 'Treinado no catálogo' },
  { nome: 'LUE no navegador', hint: 'Chat no site da loja' },
  { nome: 'Captura automática de leads', hint: 'Nome, WhatsApp, e-mail' },
  { nome: 'Fechamento de pedidos', hint: 'Itens, pagamento e entrega' },
  { nome: 'Desconto de atacado / pedido mínimo', hint: 'Aplicado pela IA' },
  { nome: 'Painel de conversas em tempo real', hint: '' },
  { nome: 'LUE no WhatsApp', hint: 'Mesmo número da loja' },
  { nome: 'Foto e vídeo nativos no WhatsApp', hint: 'A IA envia mídia dos produtos' },
  { nome: 'Interrupção da IA p/ atendimento humano', hint: 'Assuma a conversa quando quiser' },
  { nome: 'Análise de intenções e gaps', hint: 'Veja o que falta no catálogo' },
  { nome: 'Métricas de desempenho da IA', hint: 'Conversão, intenção, recorrência' },
];

const PLANS = [
  {
    nome: 'Essencial',
    resumo: 'Pra lojas começando a automatizar o atendimento.',
    preco: '197',
    periodo: '/mês',
    conversas: '1.000',
    destaque: false,
    cta: 'Ativar LUE',
    excecoes: [],
    specs: [
      ['Canais de atendimento', '2 (WhatsApp + navegador)'],
      ['Vendedores registrados', '1'],
    ],
  },
  {
    nome: 'Profissional',
    resumo: 'Pra lojas com fluxo diário no WhatsApp e no site.',
    preco: '287',
    periodo: '/mês',
    conversas: '2.500',
    destaque: true,
    selo: 'Mais escolhido',
    cta: 'Ativar LUE',
    excecoes: [],
    specs: [
      ['Canais de atendimento', '2 (WhatsApp + navegador)'],
      ['Vendedores registrados', 'até 5'],
    ],
  },
  {
    nome: 'Performance',
    resumo: 'Pra operações em escala, com mais volume e equipe maior.',
    preco: '547',
    periodo: '/mês',
    conversas: '5.000',
    destaque: false,
    cta: 'Ativar LUE',
    excecoes: [],
    specs: [
      ['Canais de atendimento', '2 (WhatsApp + navegador)'],
      ['Vendedores registrados', 'até 10'],
    ],
  },
];

/* =====================================================
   VÍDEO
   Nada do YouTube entra na página antes do clique. Depois do
   clique usamos a IFrame Player API (e não um <iframe> comum),
   porque só ela avisa quando o vídeo termina — que é o gancho
   pra emendar no próximo da fila.
   ===================================================== */

// A API só pode ser carregada uma vez por página. Guardamos a
// promessa em window pra várias chamadas dividirem o mesmo script.
function carregarApiYouTube() {
  if (window.__luePromessaYT) return window.__luePromessaYT;

  window.__luePromessaYT = new Promise((resolve) => {
    if (window.YT && window.YT.Player) return resolve(window.YT);

    // a API chama esse global quando termina de carregar
    const anterior = window.onYouTubeIframeAPIReady;
    window.onYouTubeIframeAPIReady = () => {
      if (typeof anterior === 'function') anterior();
      resolve(window.YT);
    };

    const s = document.createElement('script');
    s.src = 'https://www.youtube.com/iframe_api';
    document.head.appendChild(s);
  });

  return window.__luePromessaYT;
}

function VideoSection() {
  const [tocando, setTocando] = React.useState(false);
  const [indice, setIndice] = React.useState(0);
  const [fase, setFase] = React.useState('parado');   // parado | saindo | entrando
  const [faceGiro, setFaceGiro] = React.useState(0);  // qual thumb o painel mostra
  const [cobrindo, setCobrindo] = React.useState(false);

  const vagaRef = React.useRef(null);
  const playerRef = React.useRef(null);
  const indiceRef = React.useRef(0);   // o callback da API vive no primeiro render
  const faseRef = React.useRef('parado');
  const tokenRef = React.useRef(0);    // garante uma troca por giro
  const relogioRef = React.useRef(null);
  const destaparRef = React.useRef(null);
  const trocarRef = React.useRef(null); // driblar o closure obsoleto do onStateChange

  const temVideo = VIDEOS.length > 0;
  const tabsRef = React.useRef([]);

  const semMovimento = () =>
    window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const encerrarGiro = (token) => {
    if (token !== tokenRef.current) return;
    if (relogioRef.current) { clearTimeout(relogioRef.current); relogioRef.current = null; }
    setFase('parado');
    faseRef.current = 'parado';
  };

  // Vira a face do painel e entra na segunda metade do giro.
  // Idempotente: só roda pro token corrente.
  const concluirSaida = (token, alvo) => {
    if (token !== tokenRef.current) return;
    if (relogioRef.current) { clearTimeout(relogioRef.current); relogioRef.current = null; }
    setFaceGiro(alvo);
    setFase('entrando');
    faseRef.current = 'entrando';
    // a fase de entrada precisa da MESMA rede da saída: sem ela, um
    // animationend que não vem (aba em segundo plano, animação
    // cancelada) trava faseRef em 'entrando' e mata todos os cliques
    relogioRef.current = setTimeout(() => encerrarGiro(token), GIRO_MS + 80);
  };

  const trocarPara = (alvo) => {
    if (!temVideo || alvo === indiceRef.current) return;
    if (faseRef.current !== 'parado') return;   // já tem giro em curso

    const pl = playerRef.current;
    const podeCarregar = pl && typeof pl.loadVideoById === 'function';

    indiceRef.current = alvo;
    setIndice(alvo);

    // ainda no poster: só começa a tocar o escolhido
    if (!tocando) return;

    // apaga o iframe ANTES de carregar, e já manda carregar:
    // o buffering acontece escondido, atrás do painel
    setCobrindo(true);
    if (podeCarregar) pl.loadVideoById(VIDEOS[alvo].id);

    // se PLAYING nunca vier (autoplay bloqueado, rede ruim), o painel
    // não pode ficar cobrindo o vídeo pra sempre. Destrava a fase junto,
    // pra nunca sobrar um estado que bloqueie os próximos cliques.
    if (destaparRef.current) clearTimeout(destaparRef.current);
    destaparRef.current = setTimeout(() => {
      setCobrindo(false);
      setFase('parado');
      faseRef.current = 'parado';
    }, 4000);

    if (semMovimento()) return;   // sem giro, o painel some no PLAYING

    const token = ++tokenRef.current;
    setFase('saindo');
    faseRef.current = 'saindo';
    // rede de segurança: se animationend não vier, a troca não pode travar
    relogioRef.current = setTimeout(() => concluirSaida(token, alvo), GIRO_MS + 80);
  };

  trocarRef.current = trocarPara;

  const aoFimDaAnimacao = (e) => {
    if (e.target !== e.currentTarget) return;              // animação de filho
    if (e.animationName === 'lueGiroSaida') {
      concluirSaida(tokenRef.current, indiceRef.current);
    } else if (e.animationName === 'lueGiroEntrada') {
      encerrarGiro(tokenRef.current);
    }
  };

  React.useEffect(() => () => {
    if (relogioRef.current) clearTimeout(relogioRef.current);
    if (destaparRef.current) clearTimeout(destaparRef.current);
  }, []);

  React.useEffect(() => {
    if (!tocando || !vagaRef.current) return;
    let vivo = true;

    carregarApiYouTube().then((YT) => {
      if (!vivo || !vagaRef.current) return;

      playerRef.current = new YT.Player(vagaRef.current, {
        host: 'https://www.youtube-nocookie.com',
        videoId: VIDEOS[indiceRef.current].id,
        playerVars: { autoplay: 1, rel: 0, modestbranding: 1, playsinline: 1 },
        events: {
          onStateChange: (e) => {
            if (e.data === YT.PlayerState.PLAYING) {
              if (destaparRef.current) { clearTimeout(destaparRef.current); destaparRef.current = null; }
              setCobrindo(false);   // vídeo rodando: pode descobrir o iframe
              return;
            }
            if (e.data !== YT.PlayerState.ENDED) return;
            const proximo = indiceRef.current + 1;
            if (proximo >= VIDEOS.length) return;   // fim da fila, para aqui
            if (trocarRef.current) trocarRef.current(proximo);
          },
        },
      });
    });

    return () => {
      vivo = false;
      if (playerRef.current && playerRef.current.destroy) playerRef.current.destroy();
      playerRef.current = null;
    };
  }, [tocando]);

  const aoTeclar = (e) => {
    const passo = { ArrowRight: 1, ArrowLeft: -1 }[e.key];
    if (!passo) return;
    e.preventDefault();
    const alvo = (indice + passo + VIDEOS.length) % VIDEOS.length;
    trocarPara(alvo);
    if (tabsRef.current[alvo]) tabsRef.current[alvo].focus();
  };

  return (
    <section className="section section-video" id="video">
      <div className="wrap">
        <div className="video-head reveal">
          <p className="overline">{VIDEO_COPY.overline}</p>
          <h2>{VIDEO_COPY.title}</h2>
          <p className="lede">{VIDEO_COPY.lede}</p>
        </div>

        <div className="video-frame reveal reveal-2">
          {temVideo && tocando ? (
            <>
              {/* a API troca a div de dentro por um iframe; a de fora
                  continua sendo do React. Nunca mexer nos filhos daqui. */}
              <div className={`video-frame__slot${cobrindo ? ' is-oculto' : ''}`}>
                <div ref={vagaRef}/>
              </div>

              {/* irmão do slot, nunca filho. É o ÚNICO que gira. */}
              {cobrindo && (
                <div
                  className={`video-frame__flip is-${fase}`}
                  onAnimationEnd={aoFimDaAnimacao}
                  style={{ backgroundImage: `url(${thumbDe(VIDEOS[faceGiro].id)})` }}
                  aria-hidden="true"
                />
              )}
            </>
          ) : temVideo ? (
            <button
              className="video-frame__poster"
              onClick={() => setTocando(true)}
              aria-label="Reproduzir vídeo"
              style={{ backgroundImage: `url(${thumbDe(VIDEOS[indice].id)})` }}
            >
              <span className="video-play"><PlayGlyph/></span>
            </button>
          ) : (
            <div className="video-frame__empty">
              <span className="video-play video-play--idle"><PlayGlyph/></span>
              <p className="video-frame__empty-title">Espaço reservado pro vídeo</p>
              <p className="video-frame__empty-hint">
                Abra <code>sections-extra.jsx</code> e cole os IDs em <code>VIDEOS</code>.
              </p>
            </div>
          )}
        </div>

        {temVideo && VIDEOS.length > 1 && (
          <div
            className="video-tabs reveal reveal-3"
            role="tablist"
            aria-label="Escolha o ponto de vista do vídeo"
            onKeyDown={aoTeclar}
          >
            {VIDEOS.map((v, i) => (
              <button
                key={v.id}
                type="button"
                role="tab"
                aria-selected={i === indice}
                tabIndex={i === indice ? 0 : -1}
                ref={(el) => { tabsRef.current[i] = el; }}
                className={`video-tab${i === indice ? ' is-on' : ''}`}
                onClick={() => { if (!tocando) { setTocando(true); } trocarPara(i); }}
              >
                {v.botao}
              </button>
            ))}
          </div>
        )}

        <p className="video-foot reveal reveal-3">
          Já sabe como funciona? <a href="#planos">Vai direto pros planos →</a>
        </p>
      </div>
    </section>
  );
}

function PlayGlyph() {
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M8 5.14v13.72a1 1 0 0 0 1.53.85l10.9-6.86a1 1 0 0 0 0-1.7L9.53 4.29A1 1 0 0 0 8 5.14z"/>
    </svg>
  );
}

/* =====================================================
   FUNCIONALIDADES — quadrado à esquerda, texto à direita
   ===================================================== */
function FuncsSection() {
  const [ativo, setAtivo] = React.useState(0);
  const tabsRef = React.useRef([]);
  const f = FUNCS[ativo];
  const num = String(ativo + 1).padStart(2, '0');
  // componentes de mockups.jsx ficam pendurados em window
  const Mock = !f.img && f.mockup ? window[f.mockup] : null;

  // setas do teclado navegam entre as abas (padrão ARIA de tablist)
  const onKeyDown = (e) => {
    const passo = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[e.key];
    if (!passo) return;
    e.preventDefault();
    const alvo = (ativo + passo + FUNCS.length) % FUNCS.length;
    setAtivo(alvo);
    if (tabsRef.current[alvo]) tabsRef.current[alvo].focus();
  };

  return (
    <section className="section-funcs" id="funcionalidades">
      <div className="funcs-aura" aria-hidden="true"/>

      <div className="wrap funcs-wrap">
        <header className="funcs-head reveal">
          <p className="funcs-eyebrow">
            <span className="funcs-eyebrow__bar"/>{FUNCS_COPY.overline}
          </p>
          <h2>{FUNCS_COPY.title}</h2>
          <p className="funcs-lede">{FUNCS_COPY.lede}</p>
        </header>

        <div className="funcs-shell reveal reveal-2">
          <div
            className="funcs-rail"
            role="tablist"
            aria-label="Funcionalidades da LUE"
            aria-orientation="vertical"
            onKeyDown={onKeyDown}
          >
            {FUNCS.map((it, i) => (
              <button
                key={it.nome}
                type="button"
                role="tab"
                id={`fn-tab-${i}`}
                aria-selected={i === ativo}
                aria-controls="fn-painel"
                tabIndex={i === ativo ? 0 : -1}
                ref={(el) => { tabsRef.current[i] = el; }}
                className={`funcs-tab${i === ativo ? ' is-on' : ''}`}
                onClick={() => setAtivo(i)}
              >
                <span className="funcs-tab__num">{String(i + 1).padStart(2, '0')}</span>
                <span className="funcs-tab__nome">{it.nome}</span>
                <span className="funcs-tab__seta" aria-hidden="true">{SecIcon.arrowRight}</span>
              </button>
            ))}
          </div>

          {/* key={ativo} remonta o painel a cada troca, o que reinicia a animação */}
          <div
            className="funcs-panel"
            key={ativo}
            id="fn-painel"
            role="tabpanel"
            aria-labelledby={`fn-tab-${ativo}`}
            tabIndex={-1}
          >
            {/* texto antes da imagem no DOM: quando empilha (telas menores),
                quem lê encontra a explicação primeiro */}
            <div className="funcs-info">
              <p className="funcs-info__kicker">{num} · {f.hint}</p>
              <h3 className="funcs-info__titulo">{f.titulo}</h3>
              <p className="funcs-info__texto">{f.texto}</p>
              <p className="funcs-info__destaque">{f.destaque}</p>
            </div>

            <figure className="funcs-screen">
              <div className="funcs-screen__bar">
                <span className="funcs-screen__dot"/>
                <span className="funcs-screen__dot"/>
                <span className="funcs-screen__dot"/>
                <em className="funcs-screen__label">LUE · {f.nome}</em>
              </div>
              <div className="funcs-screen__view">
                {f.img ? (
                  <img className="funcs-screen__img" src={f.img} alt={`Tela da LUE: ${f.nome}`}/>
                ) : Mock ? (
                  <div className="funcs-screen__mock"><Mock/></div>
                ) : null}
              </div>
            </figure>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =====================================================
   PLANOS
   ===================================================== */
function PlansSection() {
  return (
    <section className="section section-plans" id="planos">
      <div className="wrap">
        <div className="plans-head reveal">
          <p className="overline">{PLANS_COPY.overline}</p>
          <h2>{PLANS_COPY.title}</h2>
          <p className="lede">{PLANS_COPY.lede}</p>
        </div>

        <div className="plans-grid">
          {PLANS.map((p, i) => (
            <article
              className={`plan-card reveal reveal-${i + 1} ${p.destaque ? 'plan-card--featured' : ''}`}
              key={p.nome}
            >
              {p.destaque && p.selo && <span className="plan-card__badge">{p.selo}</span>}

              <header className="plan-card__head">
                <h3>{p.nome}</h3>
                <p className="plan-card__resumo">{p.resumo}</p>
              </header>

              <div className="plan-card__price">
                <span className="plan-card__currency">R$</span>
                <span className="plan-card__value">{p.preco}</span>
                <span className="plan-card__period">{p.periodo}</span>
              </div>

              <div className="plan-card__volume">
                <strong>{p.conversas}</strong>
                <span>conversas / mês</span>
              </div>

              <ul className="plan-card__list">
                {PLAN_FEATURES.map((f) => {
                  const fora = p.excecoes.includes(f.nome);
                  return (
                    <li className={fora ? 'is-out' : ''} key={f.nome}>
                      <span className="plan-card__check">
                        {fora ? SecIcon.x : SecIcon.check}
                      </span>
                      <span className="plan-card__feat">
                        {f.nome}
                        {f.hint && <small>{f.hint}</small>}
                      </span>
                    </li>
                  );
                })}
              </ul>

              <dl className="plan-card__specs">
                {p.specs.map(([rotulo, valor]) => (
                  <div key={rotulo}>
                    <dt>{rotulo}</dt>
                    <dd>{valor}</dd>
                  </div>
                ))}
              </dl>

              <a
                className={`btn ${p.destaque ? 'btn-primary' : 'btn-ghost dark'} plan-card__cta`}
                href="https://ialue.com.br/login"
              >
                {p.cta}
              </a>
            </article>
          ))}
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { VideoSection, FuncsSection, PlansSection });