const { useState, useEffect } = React;

/* === Image helper === */
const uImg = (id, w = 600, h = 800) =>
  `https://images.unsplash.com/photo-${id}?w=${w}&h=${h}&fit=crop&auto=format&q=80`;

/* ===================== URGENCY BAR ===================== */
function UrgencyBar() {
  return null;
}

/* ===================== HERO ===================== */
const HEADLINES = {
  A: ["Você imagina o ensaio. ", "A Robô VISI cria o PROMPT! 🤖"],
  B: ["O Robô que transforma uma foto em ", "ensaio de R$5.000 — em segundos."],
  C: ["Para de criar prompt na mão. ", "Existe um robô fazendo isso melhor do que você."]
};

function HeroSection({ variant = "A" }) {
  const [txt, hl] = HEADLINES[variant] || HEADLINES.A;
  return (
    <section className="hero">
      <div className="container">
        <div className="trend-badge">
          <span className="pulse-dot"></span>
          🔥TENDÊNCIA QUE ESTÁ EXPLODINDO EM 2026
        </div>
        <h1 className="hero-headline">
          {txt}<span className="highlight">{hl}</span>
        </h1>
        <p className="hero-sub">
          A Robô VISI é o <span className="emph">jeito mais fácil</span> de gerar
          prompts fotográficos ultra-realistas para ensaios de praia, luxo, casais,
          futebol e muito mais. Mesmo sem ideia, ela tem modelos para prompts em segundos🔥.
        </p>

      </div>
    </section>
  );
}

/* ===================== VIDEO ===================== */
function VideoPlayer() {
  const playerRef = React.useRef(null);
  const pollRef = React.useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [showOverlay, setShowOverlay] = useState(true);
  const [showRestart, setShowRestart] = useState(false);
  const [progress, setProgress] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [isMuted, setIsMuted] = useState(false);
  const [showControls, setShowControls] = useState(false);
  const [showCta, setShowCta] = useState(false);
  const hideTimer = React.useRef(null);
  const VIDEO_ID = 'Tg4P51gTSoY';

  const formatTime = (t) => {
    if (!t || isNaN(t)) return '0:00';
    const m = Math.floor(t / 60);
    const s = Math.floor(t % 60);
    return m + ':' + (s < 10 ? '0' : '') + s;
  };

  const stopPoll = () => clearInterval(pollRef.current);
  const startPoll = () => {
    stopPoll();
    pollRef.current = setInterval(() => {
      const p = playerRef.current;
      if (!p || !p.getCurrentTime) return;
      const ct = p.getCurrentTime() || 0;
      const d = p.getDuration() || 0;
      setCurrentTime(ct);
      if (d) { setDuration(d); setProgress((ct / d) * 100); }
    }, 250);
  };

  const scheduleHide = () => {
    clearTimeout(hideTimer.current);
    hideTimer.current = setTimeout(() => {
      const p = playerRef.current;
      if (p && p.getPlayerState && p.getPlayerState() === 1) {
        setShowControls(false);
      }
    }, 3000);
  };

  const handleFirstPlay = () => {
    const p = playerRef.current;
    if (!p) return;
    p.unMute();
    setIsMuted(false);
    p.playVideo();
    setShowOverlay(false);
    setShowControls(true);
    scheduleHide();
  };

  const togglePlay = () => {
    const p = playerRef.current;
    if (!p) return;
    if (p.getPlayerState() === 1) p.pauseVideo();
    else p.playVideo();
    setShowControls(true);
    scheduleHide();
  };

  const toggleMute = (e) => {
    e.stopPropagation();
    const p = playerRef.current;
    if (!p) return;
    if (p.isMuted()) { p.unMute(); setIsMuted(false); }
    else { p.mute(); setIsMuted(true); }
  };

  const restart = (e) => {
    if (e) e.stopPropagation();
    const p = playerRef.current;
    if (!p) return;
    setShowRestart(false);
    setProgress(0);
    setCurrentTime(0);
    p.seekTo(0, true);
    p.playVideo();
    setShowControls(true);
    scheduleHide();
  };

  const handleAreaTap = () => {
    if (showOverlay || showRestart) return;
    if (showControls) togglePlay();
    else { setShowControls(true); scheduleHide(); }
  };

  useEffect(() => {
    let cancelled = false;
    const onState = (e) => {
      const S = window.YT.PlayerState;
      if (e.data === S.PLAYING) {
        setIsPlaying(true); setShowRestart(false);
        startPoll(); setShowControls(true); scheduleHide();
      } else if (e.data === S.PAUSED) {
        setIsPlaying(false); setShowControls(true);
        clearTimeout(hideTimer.current);
      } else if (e.data === S.ENDED) {
        setIsPlaying(false); stopPoll();
        setProgress(100); setShowControls(false); setShowRestart(true);
      }
    };
    const createPlayer = () => {
      if (cancelled) return;
      playerRef.current = new window.YT.Player('vp-yt', {
        videoId: VIDEO_ID,
        playerVars: {
          controls: 0, disablekb: 1, modestbranding: 1, rel: 0,
          fs: 0, playsinline: 1, iv_load_policy: 3, showinfo: 0
        },
        events: {
          onReady: (e) => { setDuration(e.target.getDuration() || 0); },
          onStateChange: onState
        }
      });
    };
    if (window.YT && window.YT.Player) {
      createPlayer();
    } else {
      const prev = window.onYouTubeIframeAPIReady;
      window.onYouTubeIframeAPIReady = () => { if (prev) prev(); createPlayer(); };
      if (!document.getElementById('yt-iframe-api')) {
        const s = document.createElement('script');
        s.id = 'yt-iframe-api';
        s.src = 'https://www.youtube.com/iframe_api';
        document.body.appendChild(s);
      }
    }
    const ctaTimer = setTimeout(() => setShowCta(true), 30000);
    return () => {
      cancelled = true;
      stopPoll();
      clearTimeout(hideTimer.current);
      clearTimeout(ctaTimer);
      if (playerRef.current && playerRef.current.destroy) playerRef.current.destroy();
    };
  }, []);

  return (
    <section className="video-section">
      <div className="container">
        <div className="vp-wrapper">
          <div className="vp-yt-holder">
            <div id="vp-yt"></div>
          </div>

          {/* Restart overlay — after video ends (never loads another video) */}
          {showRestart && (
            <div className="vp-overlay vp-restart" onClick={(e) => { e.stopPropagation(); restart(e); }}>
              <div className="vp-play-big">
                <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
              </div>
              <p className="vp-label">Assistir novamente</p>
            </div>
          )}

        </div>
        <div className="vp-caption">
          <span className="vp-audio-note">🔊 Verifique seu Áudio!</span>
        </div>
        <div style={{ textAlign: 'center', marginTop: 28, opacity: showCta ? 1 : 0, transform: showCta ? 'translateY(0)' : 'translateY(12px)', transition: 'opacity 0.6s ease, transform 0.6s ease', pointerEvents: showCta ? 'auto' : 'none' }}>
          <a href="https://pay.kiwify.com.br/tasvfMr" target="_blank" rel="noopener" className="cta-btn">Quero meu Robô VISI agora</a>
          <p className="micro-copy">⚡ Acesso imediato após pagamento</p>
        </div>
      </div>
    </section>
  );
}

/* ===================== TREND ===================== */
const TREND_CARDS = [
  { emoji: "🏖️", title: "Ensaios de praia", text: "Resultados que parecem produção de R$5.000 com 1 foto sua." },
  { emoji: "⚽", title: "Jogos de futebol", text: "Ação e emoção com luz cinematográfica. Sem estádio." },
  { emoji: "💑", title: "Casais & datas", text: "Fotos românticas com cenários que não existem — até viram reais." },
  { emoji: "💎", title: "Luxo & fashion", text: "Editorial de revista com roupas e ambientes de alto padrão." }
];

function TrendSection() {
  return (
    <section className="section fade-up">
      <div className="container">
        <span className="section-label">POR QUÊ AGORA?</span>
        <h2 className="section-title">A maior virada da fotografia está acontecendo agora</h2>
        <p className="section-sub">
          Fotógrafos e criadores de conteúdo estão usando IA para produzir ensaios
          impossíveis com qualidade de estúdio profissional — sem câmera, sem locação, sem equipe.
        </p>
        <div className="trend-grid">
          {TREND_CARDS.map((c, i) => (
            <div className="trend-card" key={i}>
              <span className="trend-emoji">{c.emoji}</span>
              <h3>{c.title}</h3>
              <p>{c.text}</p>
            </div>
          ))}
        </div>
        <div className="stats-row">
          <div className="stat"><strong>+40</strong><span>estilos de ensaio</span></div>
          <div className="stat"><strong>1</strong><span>foto de referência</span></div>
          <div className="stat"><strong>0</strong><span>precisão de API</span></div>
        </div>
      </div>
    </section>
  );
}

/* ===================== GALLERY ULTRA-REALISM ===================== */
const REALISM_PHOTOS = [
  { src: "images/praia.jpg", tag: "Praia" },
  { src: "images/luxo.jpg", tag: "Luxo" },
  { src: "images/casal.jpg", tag: "Casal" }
];

function GalleryRealism() {
  return (
    <section className="section fade-up">
      <div className="container">
        <span className="section-label">RESULTADOS REAIS</span>
        <h2 className="section-title">Ultra-realismo que você não acredita ser IA</h2>
        <div className="gallery-grid-3">
          {REALISM_PHOTOS.map((p, i) => (
            <div className="gallery-item" key={i}>
              <img src={p.src} alt={p.tag} loading="lazy" />
              <span className="gallery-tag">{p.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== HOW IT WORKS ===================== */
const STEPS_DATA = [
  { title: "Pense na Foto de referência", desc: "Qualquer foto sua, de um cliente ou modelo. Ou siga as orientações do robô." },
  { title: "Escolha o estilo do ensaio", desc: "Praia, futebol, luxo, casal, provador, editorial... mais de 40 estilos disponíveis." },
  { title: "Copie o prompt e gere a imagem", desc: "O Robô entrega o prompt pronto e adaptado para o melhor resultado de Nano Banana — Ele estuda, e entrega em segundos o prompt atualizado para que você gere direto no site do Gemini, o melhor resultado possível." }
];

function HowItWorks() {
  return (
    <section className="section fade-up">
      <div className="container">
        <span className="section-label">COMO FUNCIONA</span>
        <h2 className="section-title">Simples assim — 3 passos</h2>
        <div className="steps-list">
          {STEPS_DATA.map((s, i) => (
            <div className="step-item" key={i}>
              <div className="step-number">{i + 1}</div>
              <div className="step-content">
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== GALLERY ENSAIOS ===================== */
const STYLE_PILLS = [
  "🏖️ Praia", "⚽ Futebol", "💑 Casais", "🪞 Provadores",
  "💎 Luxo", "🏙️ Urbano", "🌿 Natural", "🔥 Ensaio +18"
];

const ENSAIO_GRID = [
  { src: "images/futebol.jpg", tag: "Futebol" },
  { src: "images/masculino-ensaio.jpg", tag: "Masculino" },
  { src: "images/luxo-ensaio.jpg", tag: "Luxo" },
  { src: "images/praia-ensaio.jpg", tag: "Praia" },
  { src: "images/provador-ensaio.jpg", tag: "Provador" },
  { src: "images/ensaio18.png", tag: "Ensaio +18" }
];

function GalleryEnsaios() {
  const [active, setActive] = useState(null);
  return (
    <section className="section fade-up">
      <div className="container">
        <span className="section-label">GALERIA DE ENSAIOS</span>
        <h2 className="section-title">Veja os ensaios prontos que a Robô VISI já gerou</h2>
        <div className="style-pills">
          {STYLE_PILLS.map((pill, i) => (
            <button key={i}
              className={`style-pill${active === i ? " active" : ""}`}
              onClick={() => setActive(active === i ? null : i)}>
              {pill}
            </button>
          ))}
        </div>
        <div className="ensaios-grid">
          {ENSAIO_GRID.map((p, i) => (
            <div className="gallery-item" key={i}>
              <img src={p.src} alt={p.tag} loading="lazy" />
              <span className="gallery-tag">{p.tag}</span>
            </div>
          ))}
        </div>
        <p className="gallery-cta-text">A Robô VISI pode fazer muito mais🔥</p>
      </div>
    </section>
  );
}

/* ===================== MENTOR ===================== */
function MentorSection() {
  return (
    <section className="section mentor-section fade-up">
      <div className="container">
        <span className="section-label">QUEM CRIA OS AGENTES?</span>
        <div className="mentor-layout">
          <div className="mentor-left">
            <div className="mentor-avatar-ring">
              <div className="mentor-avatar">
                <img src="images/mentor-piedro.png" alt="Piedro — Mentor" />
              </div>
            </div>
            <p className="mentor-name">Piedro</p>
            <p className="mentor-role">Mentor</p>
          </div>
          <div className="mentor-right">
            <h2>A mente por trás da Robô VISI.</h2>
            <p>
              Especialista em <u>inteligência artificial aplicada à criação de conteúdo</u>,
              com anos de experiência construindo automações que simplificam processos criativos.
              Depois de investir mais de <strong>R$15 mil em cursos</strong> e incontáveis
              madrugadas testando ferramentas — decidiu criar algo que realmente funcionasse
              para qualquer pessoa.
            </p>
            <div className="mentor-quote">
              <p>
                Eu criei a Robô VISI porque cansei de ver gente boa travada em prompts ruins.
                Esse robô é o atalho que eu queria ter tido — e agora estou entregando de
                bandeja para quem estiver pronto.
              </p>
            </div>
            <p>E não se preocupe: <strong>minha didática é fácil de entender.</strong></p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== BONUSES ===================== */
const BONUSES = [
  { emoji: "🤖", title: "Robô VISI Completo", desc: "+40 estilos, prompts otimizados para o Nano Banana Pro, acesso imediato.", value: "R$197" },
  { emoji: "🔄", title: "60 Dias de Atualizações", desc: "1 mês de atualizações incluídas + 1 mês de bônus = 60 dias de novas gerações de prompts sem pagar nada a mais.", value: "R$47" },
  { emoji: "💬", title: "Grupo Exclusivo no WhatsApp", desc: "Comunidade para tirar dúvidas, compartilhar resultados e receber dicas avançadas que não estão em lugar nenhum.", value: "R$97" },
  { emoji: "⚡", title: "Suporte Via Chat", desc: "Qualquer dúvida sobre uso — geramos prompts juntos. Você nunca fica travado.", value: "R$37" }
];

function BonusSection() {
  return (
    <section className="section fade-up">
      <div className="container">
        <span className="section-label">BÔNUS EXCLUSIVOS</span>
        <h2 className="section-title">Tudo que você leva junto com a Robô VISI</h2>
        <div className="bonus-list">
          {BONUSES.map((b, i) => (
            <div className="bonus-card" key={i}>
              <span className="bonus-emoji">{b.emoji}</span>
              <div className="bonus-info">
                <h3>{b.title}</h3>
                <p>{b.desc}</p>
              </div>
              <span className="bonus-value">{b.value}</span>
            </div>
          ))}
        </div>
        <div className="bonus-total">Valor total: <strong>R$378,00</strong></div>
      </div>
    </section>
  );
}

/* ===================== PRICING ===================== */
function PricingSection() {
  return (
    <section className="section pricing-section fade-up" id="comprar">
      <div className="container">
        <span className="section-label">OFERTA</span>
        <h2 className="section-title" style={{ textAlign: "center" }}>
          Tudo isso por uma oferta especial
        </h2>
        <div className="pricing-card">
          <p className="price-old">Valor real: R$378,00</p>
          <p className="price-main">R$19,90</p>
          <p className="price-desc">Pagamento único • Sem mensalidade • Acesso imediato</p>
          <div className="price-includes">
            {[
              "Robô VISI completo com +40 estilos",
              "60 dias de atualizações (1 mês incluso + 1 mês de presente)",
              "Grupo exclusivo no WhatsApp",
              "Suporte por chat incluso"
            ].map((item, i) => (
              <div className="include-item" key={i}>
                <span className="check">✓</span>{item}
              </div>
            ))}
          </div>
          <a href="https://pay.kiwify.com.br/tasvfMr" target="_blank" rel="noopener" className="cta-btn cta-full">Quero a Robô VISI por R$19,90</a>
          <p className="pricing-micro">🔒 Pagamento seguro via Kiwify • Processamento imediato</p>
        </div>
      </div>
    </section>
  );
}

/* ===================== LEGAL ===================== */
function LegalSection() {
  return (
    <section className="legal-section">
      <div className="container">
        <div className="legal-text">
          <strong>Aviso Legal de Responsabilidade.</strong>{" "}
          Este site e o produto Robô VISI são de responsabilidade exclusiva da nossa empresa.
          Não somos afiliados, patrocinados, endossados ou administrados pelo Instagram,
          Meta Platforms, Inc., TikTok, YouTube, Google ou qualquer outra rede social ou
          plataforma de tecnologia. Toda a oferta, conteúdo, suporte, garantia e processamento
          financeiro são de inteira responsabilidade da IA CinePRO. As marcas e logotipos das
          plataformas mencionadas pertencem a seus respectivos proprietários e foram citados
          apenas a título informativo. Os resultados, depoimentos e números apresentados
          refletem experiências individuais e não representam promessa ou garantia de resultado.
          O sucesso de cada usuário depende de fatores como dedicação, comprometimento e
          contexto pessoal. Pagamento processado de forma segura pela Kiwify.
        </div>
        <div className="legal-links">
          <a href="https://iacinepro.com.br/politica-de-privacidade" target="_blank" rel="noopener">Política de Privacidade</a>
          <a href="/termos-de-uso">Termos de Uso</a>
        </div>
      </div>
    </section>
  );
}

/* ===================== FOOTER ===================== */
function PageFooter() {
  return (
    <footer className="footer">
      <div className="container">© 2026 IA CinePRO — Robô VISI. Todos os direitos reservados.</div>
    </footer>
  );
}

/* ===================== SOCIAL PROOF POPUPS ===================== */
const PROOF_MESSAGES = [
  { name: "Carlos", text: "acabou de comprar o pack" },
  { name: "Ana", text: "acabou de comprar o Pack" },
  { name: "Jonas", text: "acabou de adquirir o Pack Completo + 100 Prompts" },
  { name: "Raíssa", text: "acabou de Comprar o Pack" },
  { name: "Lucas", text: "acabou de comprar o Pack" },
  { name: "Fernanda", text: "acabou de adquirir o Pack" },
  { name: "Rafael", text: "acabou de comprar o Pack Completo" }
];

function SocialProof() {
  const [current, setCurrent] = useState(null);
  const [visible, setVisible] = useState(false);
  const indexRef = React.useRef(0);

  useEffect(() => {
    const showNext = () => {
      setCurrent(PROOF_MESSAGES[indexRef.current]);
      setVisible(true);
      setTimeout(() => {
        setVisible(false);
        indexRef.current = (indexRef.current + 1) % PROOF_MESSAGES.length;
      }, 3500);
    };

    const initialTimer = setTimeout(() => {
      showNext();
      const interval = setInterval(showNext, 15000);
      return () => clearInterval(interval);
    }, 2000);

    return () => clearTimeout(initialTimer);
  }, []);

  if (!current) return null;

  return (
    <div className={`social-proof${visible ? ' show' : ''}`}>
      <div className="social-proof-icon">✅</div>
      <div className="social-proof-text">
        <strong>{current.name}</strong> {current.text}
        <span className="social-proof-time">agora mesmo</span>
      </div>
    </div>
  );
}

/* === Export to window === */
Object.assign(window, {
  UrgencyBar, HeroSection, VideoPlayer, TrendSection,
  GalleryRealism, HowItWorks, GalleryEnsaios, MentorSection,
  BonusSection, PricingSection, LegalSection, PageFooter, SocialProof
});