/* HEY!BEAR — Product page (PDP) + Shop + Sobre + Contato */
const { useState: useStateP } = React;

function Accordion({ q, children, defaultOpen }) {
  const [o, setO] = useStateP(!!defaultOpen);
  return (
    <div className="acc">
      <button className="acc-q" onClick={() => setO(!o)}>{q}<span style={{ color: "var(--pink)", fontSize: 22 }}>{o ? "–" : "+"}</span></button>
      <div className="acc-a" style={{ maxHeight: o ? 1600 : 0 }}><div>{children}</div></div>
    </div>
  );
}

function NutritionTable({ n }) {
  if (!n) return null;
  return (
    <div className="nutri">
      <div className="nutri-head">Informação Nutricional</div>
      <div className="nutri-meta">
        <span>{n.porcoes}</span>
        <span>Porção: {n.porcao}</span>
      </div>
      <table className="nutri-table">
        <thead>
          <tr><th></th><th>{n.amount}</th><th>%VD (*)</th></tr>
        </thead>
        <tbody>
          {n.rows.map((r, i) => {
            const indent = r[0].startsWith("   ");
            return (
              <tr key={i} className={indent ? "sub" : ""}>
                <td>{r[0].trim()}</td><td>{r[1]}</td><td>{r[2]}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <p className="nutri-note">{n.note}</p>
      <p className="nutri-star">(*) Percentual de valores diários fornecidos pela porção. (**) Valor diário não estabelecido.</p>
      <p className="nutri-ing"><b>Ingredientes:</b> {n.ingredientes}</p>
      <div className="nutri-free">{n.free.split(" · ").map((f, i) => <span key={i}>{f}</span>)}</div>
    </div>
  );
}

function PDP({ p, nav, add }) {
  useReveal();
  const [qty, setQty] = useStateP(1);
  const [thumb, setThumb] = useStateP(0);
  const [fl, setFl] = useStateP(0);
  const pc = p.phColors || ["#FFD0E6", "#FFB6D9"];
  const flavors = p.flavors || null;
  const heroImg = flavors ? flavors[fl].img : p.photo;
  const flavorName = flavors ? flavors[fl].name : p.flavor;
  const isGreen = flavors && fl === 1;
  const mainBg = isGreen ? "#EAF3DB" : "var(--pink-50)";
  const gallery = [
    heroImg ? { img: heroImg } : { ph: ["foto · pote", pc] },
    ...(p.gallery || []).map((img) => ({ img })),
    { ph: ["gomas em destaque", pc] },
    { ph: ["rótulo / nutricional", ["#CFEFFF", "#AEE2FF"]] },
  ].slice(0, 4);
  const cross = HB.products.filter((x) => x.id !== p.id).slice(0, 3);
  return (
    <main className="pdp">
      <div className="wrap">
        <div style={{ fontSize: 14, color: "var(--ink-soft)", marginBottom: 22 }}>
          <a onClick={() => nav("home")} style={{ cursor: "pointer" }}>Início</a> &nbsp;/&nbsp;
          <a onClick={() => nav("shop")} style={{ cursor: "pointer" }}>Shop</a> &nbsp;/&nbsp;
          <span style={{ color: "var(--ink)" }}>{p.name}</span>
        </div>
        <div className="pdp-grid">
          <div className="pdp-gallery">
            <div className="pdp-main" style={{ background: thumb === 0 ? mainBg : "var(--pink-50)" }}>
              {gallery[thumb].img
                ? <img src={gallery[thumb].img} alt={p.name} />
                : <Placeholder label={gallery[thumb].ph[0]} a={gallery[thumb].ph[1][0]} b={gallery[thumb].ph[1][1]} />}
            </div>
            <div className="pdp-thumbs">
              {gallery.map((g, i) => (
                <button key={i} className={thumb === i ? "active" : ""} onClick={() => setThumb(i)}>
                  {g.img ? <img src={g.img} alt="" /> : <Placeholder label="" a={g.ph[1][0]} b={g.ph[1][1]} />}
                </button>
              ))}
            </div>
          </div>

          <div className="pdp-info">
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", marginBottom: 14 }}>
              <span className="pcard-flag" style={{ position: "static", background: p.tint }}>{p.flag}</span>
              <span className="nova-badge">✨ Nova fórmula Hey!Bear</span>
            </div>
            <h1>{p.name}</h1>
            <p className="pdp-flavor">{isGreen ? "🍏" : "🍓"} Sabor {flavorName} · {p.contains}</p>
            {flavors && (
              <div className="flavor-picker">
                <span className="fp-label">Sabor:</span>
                {flavors.map((f, i) => (
                  <button key={i} className={"fp-chip" + (fl === i ? " active" : "")}
                    onClick={() => { setFl(i); setThumb(0); }} style={{ "--fc": f.tint }}>
                    <span className="fp-dot" /> {f.name}
                  </button>
                ))}
              </div>
            )}
            <p className="lead" style={{ margin: "16px 0 0", color: "var(--ink)", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22 }}>{p.headline}</p>
            <p className="lead" style={{ margin: "8px 0 0" }}>{p.sub}</p>

            <div className="pdp-price">
              {BRL(p.price)}
              {p.compareAt && <><s>{BRL(p.compareAt)}</s><span className="save">-{Math.round((1 - p.price / p.compareAt) * 100)}%</span></>}
            </div>

            <ul className="pdp-bullets">
              {p.bullets.map((b, i) => <li key={i}><span className="tick">✓</span>{b}</li>)}
            </ul>

            <div className="pdp-buy">
              <div className="qty">
                <button onClick={() => setQty(Math.max(1, qty - 1))}>–</button>
                <span>{qty}</span>
                <button onClick={() => setQty(qty + 1)}>+</button>
              </div>
              <button className="btn btn-primary btn-lg" style={{ flex: 1, justifyContent: "center" }} onClick={() => buyProduct(p, add, qty)}>
                {p.checkout ? "Comprar agora" : "Adicionar"} · {BRL(p.price * qty)}
              </button>
            </div>
            <div style={{ display: "flex", gap: 18, flexWrap: "wrap", fontSize: 13, color: "var(--ink-soft)", marginBottom: 24 }}>
              <span>🚚 Frete grátis acima de R$199</span>
              <span>🔒 Pagamento seguro</span>
              <span>↩️ Troca garantida</span>
            </div>

            <Accordion q="Informação nutricional" defaultOpen>
              {p.nutrition ? <NutritionTable n={p.nutrition} /> : p.ingredients}
            </Accordion>
            <Accordion q="Como tomar">Mastigue de 1 a 2 gomas por dia, no horário que preferir. Sem água, sem shaker. Dica: guarde na geladeira e experimente geladinha.</Accordion>
            <Accordion q="Envio e devolução">Enviamos para todo o Brasil. Frete grátis acima de R$199. Não amou? Você tem 30 dias para trocar ou devolver.</Accordion>
          </div>
        </div>

        {/* Cross-sell */}
        <div className="section" style={{ paddingBottom: 20 }}>
          <h2 className="h-mid" style={{ marginBottom: 24 }}>Combina com</h2>
          <div className="line-grid">
            {cross.map((x) => <ProductCard key={x.id} p={x} nav={nav} add={add} />)}
          </div>
        </div>
      </div>
    </main>
  );
}

/* ---------- Shop ---------- */
function Shop({ nav, add }) {
  useReveal();
  return (
    <main>
      <section className="section" style={{ paddingBottom: 24 }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>Shop</span>
          <h1 className="h-big" style={{ marginTop: 14 }}>Toda a linha Hey!Bear.</h1>
          <p className="lead" style={{ maxWidth: 520, margin: "14px auto 0" }}>Gomas premium para força, glow, sono e controle de vontade.</p>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="line-grid">
            {HB.products.map((p) => <ProductCard key={p.id} p={p} nav={nav} add={add} />)}
          </div>
        </div>
      </section>
      <BearPack add={add} />
    </main>
  );
}

/* ---------- Sobre ---------- */
function Sobre({ nav }) {
  useReveal();
  return (
    <main>
      <section className="section" style={{ background: "var(--blue)" }}>
        <div className="wrap" style={{ textAlign: "center", maxWidth: 760 }}>
          <GummyBear size={80} style={{ margin: "0 auto 18px" }} />
          <span className="eyebrow" style={{ color: "var(--blue-ink)", justifyContent: "center" }}>A marca</span>
          <h1 className="h-big" style={{ margin: "14px 0 18px" }}>Uma marca de doces premium que por acaso vende suplementos.</h1>
          <p className="lead">O mercado fitness é dominado por potes pretos, linguagem agressiva, scoop, shaker e gosto ruim. A Hey!Bear existe para transformar suplementação numa experiência divertida, prática e prazerosa.</p>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div className="benefits-grid">
            {[["Diversão", "Suplemento não precisa ser sofrido."], ["Praticidade", "Sem água, sem shaker, sem complicação."], ["Bem-estar", "Autocuidado que cabe na sua rotina."], ["Premium", "Design e qualidade de marca de doces fina."]].map(([h, p], i) => (
              <div className="benefit reveal" key={i} style={{ transitionDelay: i * 60 + "ms" }}>
                <div className="b-ic"><GummyBear size={30} /></div>
                <h3>{h}</h3><p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CTABand nav={nav} />
    </main>
  );
}

/* ---------- Contato ---------- */
function Contato() {
  const [sent, setSent] = useStateP(false);
  return (
    <main>
      <section className="section">
        <div className="wrap" style={{ maxWidth: 620 }}>
          <span className="eyebrow">Contato</span>
          <h1 className="h-big" style={{ margin: "14px 0 10px" }}>Fala com a gente 🐻</h1>
          <p className="lead" style={{ marginBottom: 30 }}>Dúvida, parceria ou só um oi? A gente responde rapidinho.</p>
          {sent ? (
            <div style={{ background: "var(--pink-50)", borderRadius: "var(--r-lg)", padding: 40, textAlign: "center" }}>
              <GummyBear size={64} style={{ margin: "0 auto 12px" }} />
              <h3 className="h-mid">Mensagem enviada!</h3>
              <p className="lead">Logo logo a gente te responde.</p>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[["Seu nome", "text"], ["Seu e-mail", "email"]].map(([ph, t]) => (
                <input key={ph} required type={t} placeholder={ph} style={inpStyle} />
              ))}
              <textarea required placeholder="Sua mensagem" rows={4} style={{ ...inpStyle, resize: "vertical" }} />
              <button className="btn btn-primary btn-lg" type="submit" style={{ justifyContent: "center" }}>Enviar mensagem</button>
            </form>
          )}
        </div>
      </section>
    </main>
  );
}
const inpStyle = { padding: "15px 18px", borderRadius: "var(--r-md)", border: "2px solid var(--line)", fontFamily: "var(--font-body)", fontSize: 16, outline: "none", background: "#fff" };

Object.assign(window, { PDP, Shop, Sobre, Contato });