// ProblemSection da home-v3 — troca eyebrow/título e substitui os 3 cards por
// um vídeo (loop-2) em loop normal, mais os selos oficiais das 3 lojas.
// Decisão 2026-10-01: o scroll-scrub (vídeo controlado pela posição do
// scroll, seção "alta" com pin) foi removido por ser gimmick desnecessário —
// agora é só autoplay+loop, com pausa no hover (desktop) ou toque (mobile).
// Carregado DEPOIS de problem.jsx; sobrescreve window.ProblemSection.

// Mesmas URLs de loja do header.jsx (duplicadas aqui de propósito — são só 3
// constantes curtas, mais simples que depender do escopo léxico entre scripts).
const APP_STORE_URL_V3 = 'https://apps.apple.com/br/app/id6811130731';
const PLAY_URL_V3 = 'https://play.google.com/store/apps/details?id=br.econome.app';
const MS_STORE_URL_V3 = 'https://apps.microsoft.com/detail/9P59N9X6CB3M?hl=pt-br&gl=BR';

function LoopVideo() {
  const vidRef = React.useRef(null);

  function toggle() {
    const v = vidRef.current;
    if (!v) return;
    v.paused ? v.play().catch(() => {}) : v.pause();
  }

  return (
    <div
      className="loop-video-wrap"
      onClick={toggle}
      role="button"
      aria-label="Pausar ou retomar o vídeo"
    >
      <video
        ref={vidRef}
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        poster="assets/loop-2-poster.jpg"
        aria-label="Vídeo: o Econome acompanha no seu ritmo"
        className="loop-video"
      >
        <source src="assets/loop-2.webm" type="video/webm" />
        <source src="assets/loop-2.mp4" type="video/mp4" />
      </video>

      <style>{`
        .loop-video-wrap { display: flex; justify-content: center; cursor: pointer; }
        .loop-video {
          width: min(52vw, 560px);
          aspect-ratio: 1 / 1;
          object-fit: cover;
          /* sem moldura/sombra — o vídeo se mescla ao fundo (var(--bg-warm))
             via fade nas bordas, em vez de aparecer como um card separado. */
          -webkit-mask-image:
            linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image:
            linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          -webkit-mask-composite: source-in;
          mask-composite: intersect;
        }
        @media (max-width: 880px) {
          .loop-video { width: min(82vw, 420px); }
        }
      `}</style>
    </div>
  );
}

function ProblemSection() {
  return (
    <section id="problema" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Do seu jeito</div>
          <h2>Na correria ou com calma, <br/><span style={{ color: 'var(--purple)' }}>o Econome acompanha.</span></h2>
          <p>
            Tem hora que o celular resolve. Tem hora que você prefere uma tela maior.
            Com o Econome, você escolhe onde cuidar das suas finanças.
          </p>
        </div>

        <LoopVideo />

        <div className="store-badges">
          <a href={APP_STORE_URL_V3} target="_blank" rel="noopener" aria-label="Baixar na App Store">
            <img src="assets/badge-appstore-ptbr.svg" alt="Disponível na App Store" />
          </a>
          <a href={PLAY_URL_V3} target="_blank" rel="noopener" aria-label="Disponível no Google Play">
            <img src="assets/badge-googleplay-ptbr.png" alt="Disponível no Google Play" />
          </a>
          <a href={MS_STORE_URL_V3} target="_blank" rel="noopener" aria-label="Obtenha na Microsoft Store">
            <img src="assets/badge-msstore-ptbr.svg" alt="Disponível na Microsoft Store" />
          </a>
        </div>

        <style>{`
          .store-badges {
            display: flex; align-items: center; justify-content: center;
            gap: 16px;
            margin-top: 20px;
          }
          .store-badges a {
            display: flex; align-items: center; justify-content: center;
            width: 160px; height: 44px;
          }
          .store-badges img { width: 100%; height: 100%; object-fit: contain; display: block; }
          @media (max-width: 880px) {
            .section-header h2 br { display: none; }
            .store-badges { flex-direction: column; margin-top: 14px; gap: 10px; }
            .store-badges a { width: 150px; height: 40px; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.ProblemSection = ProblemSection;