/* HEY!BEAR — Feedbacks (UGC wall) */
const { useState: useStateF, useRef: useRefF, useEffect: useEffectF } = React;

function FBReel({ src }) {
  const vref = useRefF(null);
  const [muted, setMuted] = useStateF(true);
  const [playing, setPlaying] = useStateF(false);
  useEffectF(() => {
    const v = vref.current; if (!v) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => {
        if (e.isIntersecting) { v.play().then(() => setPlaying(true)).catch(() => {}); }
        else { v.pause(); }
      });
    }, { threshold: 0.5 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  const toggle = () => { const v = vref.current; if (!v) return; if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); } };
  const toggleMute = (e) => { e.stopPropagation(); const v = vref.current; v.muted = !v.muted; setMuted(v.muted); };
  return (
    <div className="fb-item fb-video" onClick={toggle}>
      <video ref={vref} src={src} muted loop playsInline preload="metadata" />
      {!playing && <div className="fb-play"><span><Icon.play /></span></div>}
      <button className="fb-mute" onClick={toggleMute} aria-label={muted ? "Ativar som" : "Silenciar"}>{muted ? "🔇" : "🔊"}</button>
      <a className="fb-badge" href="https://www.instagram.com/use.heybear/" target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}><GummyBear size={16} color="#fff" /> @use.heybear</a>
    </div>
  );
}

function Feedbacks({ nav, add }) {
  useReveal();
  const items = [
    { t: "img", src: "assets/ugc/img1.jpg" },
    { t: "vid", src: "assets/ugc/vid1.mp4" },
    { t: "img", src: "assets/ugc/img2.jpg" },
    { t: "vid", src: "assets/ugc/vid2.mp4" },
    { t: "img", src: "assets/ugc/img3.jpg" },
    { t: "vid", src: "assets/ugc/vid3.mp4" },
    { t: "img", src: "assets/ugc/img4.jpg" },
    { t: "vid", src: "assets/ugc/vid4.mp4" },
    { t: "img", src: "assets/ugc/img5.jpg" },
    { t: "vid", src: "assets/ugc/vid5.mp4" },
  ];
  const stats = [["4,9/5", "avaliação média"], ["+2.000", "clientes apaixonadas"], ["+500", "marcações no Insta"]];
  return (
    <main>
      <section className="section" style={{ paddingBottom: 30, background: "radial-gradient(90% 80% at 50% -10%, var(--pink-50), transparent 60%)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <a className="eyebrow" href="https://www.instagram.com/use.heybear/" target="_blank" rel="noopener" style={{ justifyContent: "center" }}>@use.heybear</a>
          <h1 className="h-big" style={{ margin: "16px 0 14px" }}>Quem usa, ama. 🐻💕</h1>
          <p className="lead" style={{ maxWidth: 560, margin: "0 auto 30px" }}>Stories, reels e desabafos reais de quem trocou o pote preto pela goma. Marque <a href="https://www.instagram.com/use.heybear/" target="_blank" rel="noopener" style={{ color: "var(--pink)", fontWeight: 700 }}>@use.heybear</a> que a gente reposta.</p>
          <div className="fb-stats">
            {stats.map(([n, l], i) => (
              <div className="fb-stat" key={i}>
                <b>{n}</b><span>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 10 }}>
        <div className="wrap">
          <div className="fb-masonry">
            {items.map((it, i) => (
              it.t === "img"
                ? <div className="fb-item reveal" key={i}><img src={it.src} alt="Feedback Hey!Bear" loading="lazy" /></div>
                : <div className="reveal" key={i}><FBReel src={it.src} /></div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="cta-band reveal">
            <Floaties items={[
              { l: "8%", t: "22%", size: 44, color: "rgba(255,255,255,.22)", shape: "drop", dur: 7 },
              { r: "9%", bt: "16%", size: 58, bear: true, color: "rgba(255,255,255,.22)", dur: 9 },
            ]} />
            <div style={{ position: "relative", zIndex: 2 }}>
              <h2 className="h-big">Bora ser o próximo feedback?</h2>
              <p className="lead" style={{ maxWidth: 460, margin: "14px auto 26px" }}>Experimente a Creatina que parece doce e conte pra gente.</p>
              <button className="btn btn-blue btn-lg" onClick={() => nav("creatina")}>Quero experimentar</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Feedbacks });