/* HEY!BEAR — Home page + ProductCard */
const { useState: useStateH } = React;

/* ---------- Reusable product card ---------- */
function ProductCard({ p, nav, add }) {
  return (
    <div className="pcard reveal" onClick={() => nav(p.id)}>
      <div className="pcard-media" style={{ background: "var(--pink-50)" }}>
        {p.photo
          ? <img src={p.photo} alt={p.name} />
          : <Placeholder label={"foto · " + p.name.split(" ")[0]} a={p.phColors[0]} b={p.phColors[1]} />}
        <span className="pcard-flag" style={{ background: p.tint }}>{p.flag}</span>
      </div>
      <div className="pcard-body">
        <h3>{p.name}</h3>
        <span className="pcard-goal">{p.goal}</span>
        <div className="pcard-foot">
          <span className="pcard-price">{BRL(p.price)}</span>
          <button className="pcard-add" aria-label={"Comprar " + p.name}
            onClick={(e) => { e.stopPropagation(); buyProduct(p, add, 1); }}>{p.checkout ? "→" : "+"}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ nav, add }) {
  return (
    <section className="hero">
      <Floaties items={[
        { l: "4%", t: "16%", size: 64, color: "var(--t-creatina)", shape: "drop", rot: -12, dur: 8 },
        { l: "10%", bt: "12%", size: 38, color: "var(--blue-200)", rot: 8, dur: 6, delay: .5 },
        { r: "44%", t: "8%", size: 30, color: "var(--pink-light)", dur: 7, delay: 1 },
        { r: "3%", bt: "18%", size: 54, bear: true, color: "var(--pink-light)", dur: 9, delay: .3 },
      ]} />
      <div className="wrap">
        <div className="hero-grid">
          <div style={{ position: "relative", zIndex: 2 }}>
            <span className="hero-badge"><i className="pulse" /> Nova fórmula · Creatina Gummies sabor frutas vermelhas</span>
            <h1 className="h-mega">Sua suplementação<br />nunca foi tão <em>gostosa.</em></h1>
            <p className="lead hero-sub">3g de creatina monohidratada por goma. Sem shaker. Sem complicação. É só mastigar.</p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={() => nav("creatina")}>Quero experimentar</button>
              <button className="btn btn-ghost btn-lg" onClick={() => nav("shop")}>Ver a linha</button>
            </div>
            <div className="hero-proof">
              <span className="stars">★★★★★</span>
              <small>+2.000 clientes apaixonadas · 4,9/5</small>
            </div>
          </div>
          <div className="hero-photo">
            <div className="photo-card">
              <img src="assets/creatina-pink.png" alt="Hey!Bear Creatina Gummies sabor frutas vermelhas" />
            </div>
            <div className="float-chip" style={{ top: "8%", left: "-6%", animation: "drift 6s ease-in-out infinite" }}>
              <span className="big">3g</span><div><small>creatina</small><small>por goma</small></div>
            </div>
            <div className="float-chip" style={{ bottom: "10%", right: "-6%", animation: "drift 7s ease-in-out .8s infinite" }}>
              <span style={{ fontSize: 22 }}>❄️</span><div><b style={{ fontSize: 14 }}>Experimente</b><small>geladinha</small></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Benefits ---------- */
function Benefits() {
  const items = [
    { ic: <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26, color: "var(--pink)" }}>3g</span>, h: "3g por goma", p: "O dobro da concorrência. Dose cheia de creatina monohidratada em cada gominha." },
    { ic: <Icon.pack />, h: "Embaladas individualmente", p: "Higiênicas e práticas. Cada goma no seu sachê para levar a qualquer lugar." },
    { ic: <Icon.snow />, h: "Experimente geladinha", p: "Na geladeira fica ainda mais gostosa. Seu docinho do dia sem culpa." },
    { ic: <Icon.bag />, h: "Leve para qualquer lugar", p: "Cabe na bolsa, na mochila, no carro. Sua creatina vai junto, sempre." },
  ];
  return (
    <section className="section benefits">
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <span className="eyebrow" style={{ color: "var(--blue-ink)" }}>Por que Hey!Bear</span>
          <h2 className="h-big" style={{ marginTop: 14 }}>Suplemento que dá vontade de tomar.</h2>
        </div>
        <div className="benefits-grid">
          {items.map((b, i) => (
            <div className="benefit reveal" key={i} style={{ transitionDelay: i * 60 + "ms" }}>
              <div className="b-ic">{b.ic}</div>
              <h3>{b.h}</h3>
              <p>{b.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Comparativo ---------- */
function Compare() {
  const rows = [
    ["Creatina por goma", "1,5g", "3g"],
    ["Formato", "Pó", "Goma macia"],
    ["Para consumir", "Shaker + água", "É só mastigar"],
    ["Açúcar", "Às vezes", "Zero"],
    ["Na bolsa", "Impossível", "Sempre comigo"],
  ];
  return (
    <section className="section compare">
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <span className="eyebrow">O comparativo</span>
          <h2 className="h-big" style={{ marginTop: 14 }}>Goma vs. pote preto.</h2>
        </div>
        <div className="compare-card reveal">
          <div className="compare-row head">
            <div className="cc-label"></div>
            <div className="cc-them">Concorrentes</div>
            <div className="cc-us"><GummyBear size={26} color="#fff" /> Hey!Bear</div>
          </div>
          {rows.map((r, i) => (
            <div className="compare-row" key={i}>
              <div className="cc-label">{r[0]}</div>
              <div className="cc-them"><span className="cross">✕</span> {r[1]}</div>
              <div className="cc-us"><span className="check">✓</span> {r[2]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Lifestyle ---------- */
function Lifestyle() {
  const tiles = [
    { label: "academia", cls: "tall", a: "#FFD0E6", b: "#FFB6D9" },
    { label: "bolsa feminina", cls: "", a: "#CFEFFF", b: "#AEE2FF" },
    { label: "escritório", cls: "", a: "#FFE3F0", b: "#FFD0E6" },
    { label: "viagem", cls: "wide", a: "#E6F6FF", b: "#CFEFFF" },
    { label: "no carro", cls: "", a: "#FFE9CC", b: "#FFD79B" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
          <div>
            <span className="eyebrow">No seu ritmo</span>
            <h2 className="h-big" style={{ marginTop: 14 }}>Vai com você<br />para todo lugar.</h2>
          </div>
          <p className="lead" style={{ maxWidth: 360 }}>Academia, bolsa, escritório, viagem, carro. Sua suplementação acompanha o seu dia — não o contrário.</p>
        </div>
        <div className="lifestyle-grid reveal">
          {tiles.map((t, i) => (
            <div className={"life " + t.cls} key={i}>
              <Placeholder label={t.label} a={t.a} b={t.b} />
              <span className="life-label">{t.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Video feature (reel) ---------- */
function VideoFeature({ nav }) {
  const vref = React.useRef(null);
  const [playing, setPlaying] = useStateH(true);
  const [muted, setMuted] = useStateH(true);
  const togglePlay = () => {
    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; if (!v) return; v.muted = !v.muted; setMuted(v.muted); };
  return (
    <section className="section videofeat-sec">
      <div className="wrap">
        <div className="videofeat reveal">
          <div className="reel" onClick={togglePlay}>
            <video ref={vref} src="assets/heybear-video.mp4" autoPlay muted loop playsInline preload="metadata" />
            {!playing && <div className="reel-play"><span><Icon.play /></span></div>}
            <button className="reel-mute" onClick={toggleMute} aria-label={muted ? "Ativar som" : "Silenciar"}>
              {muted ? "🔇" : "🔊"}
            </button>
            <span className="reel-tag">@heybear</span>
          </div>
          <div className="videofeat-copy">
            <span className="eyebrow">Hey!Bear em movimento</span>
            <h2 className="h-big" style={{ margin: "14px 0 16px" }}>Goma que vira conteúdo.</h2>
            <p className="lead" style={{ maxWidth: 440 }}>Frescor, lifestyle e diversão em cada frame. A Hey!Bear é daquelas marcas que você quer mostrar — não esconder na gaveta de suplementos.</p>
            <div style={{ display: "flex", gap: 14, marginTop: 26, flexWrap: "wrap" }}>
              <button className="btn btn-primary btn-lg" onClick={() => nav("creatina")}>Quero experimentar</button>
              <button className="btn btn-ghost btn-lg" onClick={() => nav("sobre")}>Conheça a marca</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Product line ---------- */
function LineUp({ nav, add }) {
  return (
    <section className="section" id="shop" style={{ background: "var(--pink-50)" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <span className="eyebrow">A linha completa</span>
          <h2 className="h-big" style={{ marginTop: 14 }}>Escolha o seu mood.</h2>
          <p className="lead" style={{ maxWidth: 540, margin: "14px auto 0" }}>Quatro gomas para quatro objetivos. Comece pela Creatina e monte a sua rotina.</p>
        </div>
        <div className="line-grid">
          {HB.products.map((p) => <ProductCard key={p.id} p={p} nav={nav} add={add} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Bear Pack ---------- */
function BearPack({ add }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="pack reveal">
          <Floaties items={[
            { r: "6%", t: "14%", size: 70, bear: true, color: "rgba(255,255,255,.25)", dur: 8 },
            { r: "30%", bt: "10%", size: 40, color: "rgba(255,255,255,.18)", dur: 6, delay: .6 },
          ]} />
          <div className="pack-grid">
            <div>
              <span className="eyebrow" style={{ color: "#fff" }}>Kit premium</span>
              <h2 className="h-big" style={{ margin: "14px 0 16px" }}>Bear Pack</h2>
              <p className="lead" style={{ color: "rgba(255,255,255,.92)", maxWidth: 420 }}>A linha completa: Creatina, Glow, Sleep e Cravings. A rotina Hey!Bear inteira, com o melhor preço.</p>
              <div className="pack-price" style={{ margin: "22px 0" }}><s>{BRL(944)}</s>{BRL(697)}</div>
              <button className="btn btn-blue btn-lg" onClick={() => buyProduct(HB.pack, add)}>Quero o Bear Pack</button>
            </div>
            <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
              {HB.products.map((p, i) => (
                <div key={p.id} style={{ width: 96, height: 130, borderRadius: 18, overflow: "hidden", boxShadow: "var(--sh-md)", transform: `rotate(${i % 2 ? 4 : -4}deg) translateY(${i % 2 ? 10 : 0}px)`, border: "4px solid #fff" }}>
                  {p.photo ? <img src={p.photo} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label="" a={p.phColors[0]} b={p.phColors[1]} />}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Feedbacks (home) ---------- */
function HomeFeedbacks({ nav }) {
  const tiles = [
    { 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/img4.jpg" },
    { t: "vid", src: "assets/ugc/vid3.mp4" },
    { t: "img", src: "assets/ugc/img5.jpg" },
    { t: "vid", src: "assets/ugc/vid4.mp4" },
  ];
  return (
    <section className="section proof">
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <a className="eyebrow" href="https://www.instagram.com/use.heybear/" target="_blank" rel="noopener" style={{ justifyContent: "center" }}>Feedbacks · @use.heybear</a>
          <h2 className="h-big" style={{ marginTop: 14 }}>Quem usa, ama. 🐻</h2>
          <p className="lead" style={{ maxWidth: 520, margin: "14px auto 0" }}>Stories e reels reais de quem trocou o pote preto pela goma.</p>
        </div>
        <div className="fb-masonry">
          {tiles.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 className="proof-grid" style={{ marginTop: 26 }}>
          {HB.reviews.map((r, i) => (
            <div className="review reveal" key={i} style={{ transitionDelay: i * 70 + "ms" }}>
              <span className="stars">★★★★★</span>
              <p>"{r.text}"</p>
              <div className="who">
                <div className="av" style={{ background: r.av }} />
                <div><b>{r.name}</b><small>{r.tag}</small></div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 36 }}>
          <button className="btn btn-primary btn-lg" onClick={() => nav("feedbacks")}>Ver todos os feedbacks</button>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = useStateH(0);
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <span className="eyebrow">Dúvidas</span>
          <h2 className="h-big" style={{ marginTop: 14 }}>Perguntas rápidas.</h2>
        </div>
        <div className="faq-list">
          {HB.faq.map((f, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {f.q}<span className="pm">+</span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 200 : 0 }}><div>{f.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA band ---------- */
function CTABand({ nav }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="cta-band reveal">
          <Floaties items={[
            { l: "8%", t: "20%", size: 46, color: "rgba(255,255,255,.2)", shape: "drop", dur: 7 },
            { r: "10%", bt: "16%", size: 60, bear: true, color: "rgba(255,255,255,.22)", dur: 9 },
            { l: "30%", bt: "12%", size: 28, color: "rgba(207,239,255,.4)", dur: 6, delay: .5 },
          ]} />
          <div style={{ position: "relative", zIndex: 2 }}>
            <GummyBear size={64} color="#fff" style={{ margin: "0 auto 14px" }} />
            <h2 className="h-big">Pronta para experimentar?</h2>
            <p className="lead" style={{ maxWidth: 480, margin: "14px auto 26px" }}>Sua suplementação nunca foi tão gostosa. Comece pela Creatina e descubra.</p>
            <button className="btn btn-blue btn-lg" onClick={() => nav("creatina")}>Quero experimentar</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Home ---------- */
function Home({ nav, add }) {
  useReveal();
  return (
    <main>
      <Hero nav={nav} add={add} />
      <Benefits />
      <Compare />
      <VideoFeature nav={nav} />
      <LineUp nav={nav} add={add} />
      <BearPack add={add} />
      <HomeFeedbacks nav={nav} />
      <FAQ />
      <CTABand nav={nav} />
    </main>
  );
}

Object.assign(window, { Home, ProductCard });