// sales-hero.jsx — Top of the sales page.
// Top bar, hero (headline + CTA + 5-PDF stack mockup), trust strip.

// ─── PDF cover mock — used in the hero stack and the contents section ────
function GuideCover({ dir, guide, size = "md" }) {
  // A stylized PDF "cover" — paper with a corner tag, big short label.
  const w = size === "lg" ? 220 : size === "sm" ? 110 : 160;
  const h = w * 1.4;
  return (
    <div style={{
      width: w, height: h, borderRadius: 14, position: "relative", overflow: "hidden",
      background: `linear-gradient(160deg, ${dir.surface}, ${dir.surfaceAlt})`,
      border: `0.5px solid ${dir.hairline}`,
      boxShadow: `inset 0 1px 0 rgba(255,255,255,0.6), ${dir.shadowSoft}`,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      padding: 12, color: dir.ink, flexShrink: 0
    }}>
      {/* corner: HPTA mark */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <EixoSymbol variant="hpta" size={size === "lg" ? 22 : 16} fg={dir.accent} thick />
        {guide.badge &&
        <span style={{
          fontFamily: dir.mono, fontSize: 7, padding: "2px 6px",
          background: dir.accent, color: dir.accentOn,
          letterSpacing: "0.12em", borderRadius: 99, fontWeight: 600
        }}>{guide.badge}</span>
        }
      </div>

      {/* big short label */}
      <div style={{
        fontFamily: dir.display, fontSize: size === "lg" ? 28 : 20, fontWeight: 700,
        letterSpacing: "-0.025em", lineHeight: 0.95
      }}>
        {guide.short.split(" ").map((w, i) => <div key={i}>{w}</div>)}
      </div>

      {/* footer */}
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        fontFamily: dir.mono, fontSize: 8, color: dir.inkMuted, letterSpacing: "0.08em",
        textTransform: "uppercase"
      }}>
        <span>EIXO · PDF</span>
        <span>{guide.pages}p</span>
      </div>

      {/* subtle paper texture */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: `repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,0.025) 3px 4px)`,
        opacity: 0.5
      }} />
    </div>);

}

// ─── Top bar: minimal, brand mark only ───────────────────────────────────
function SalesTopBar({ dir }) {
  return (
    <div style={{
      padding: "16px 20px", display: "flex", justifyContent: "flex-start", alignItems: "center",
      position: "relative", zIndex: 2
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <EixoSymbol variant="hpta" size={22} fg={dir.ink} thick />
        <span style={{
          fontFamily: dir.display, fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em"
        }}>EIXO<span style={{ color: dir.accent }}>.</span></span>
      </div>
    </div>);

}

// ─── Hero ─────────────────────────────────────────────────────────────────
function SalesHero({ dir, priceMode, onCTA }) {
  return (
    <section style={{
      padding: "8px 20px 36px", position: "relative", overflow: "hidden"
    }}>
      {/* radial glow */}
      <div style={{
        position: "absolute", top: -80, right: -120, width: 380, height: 380,
        borderRadius: "50%", filter: "blur(60px)",
        background: `radial-gradient(circle, ${dir.accent}22, transparent 65%)`,
        pointerEvents: "none"
      }} />

      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 22 }}>
        {/* eyebrow */}
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          fontFamily: dir.display, fontSize: 13, letterSpacing: "0.14em",
          textTransform: "uppercase", color: dir.accent, fontWeight: 600,
          alignSelf: "flex-start"
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: dir.accent, boxShadow: `0 0 0 4px ${dir.accent}22` }} />
          5 GUIAS · ENTREGA IMEDIATA
        </div>

        {/* headline */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <h1 style={{
            fontFamily: dir.display, fontSize: 40, fontWeight: 700,
            letterSpacing: "-0.04em", lineHeight: 1.02,
            color: dir.ink, margin: 0, textWrap: "balance"
          }}>
            Antes do primeiro ciclo.
          </h1>
          <div style={{
            fontFamily: dir.display, fontSize: 22, fontWeight: 500,
            letterSpacing: "-0.025em", lineHeight: 1.25, color: dir.inkSoft,
            textWrap: "balance"
          }}>
            E antes de <span style={{ color: dir.accent, fontWeight: 600 }}>repetir o próximo.</span>
          </div>
        </div>

        {/* sub */}
        <p style={{
          fontSize: 17, lineHeight: 1.5, color: dir.inkSoft, margin: 0, maxWidth: 480
        }}>
          5 PDFs em PT-BR. <strong style={{ color: dir.ink, fontWeight: 600 }}>Ciclo masculino, feminino, TPC, suplementos e glossário.</strong> Tudo o que importa, num só pacote.
        </p>

        {/* PDF stack mockup */}
        <div style={{
          position: "relative", height: 280, marginTop: 4, marginBottom: 4,
          display: "flex", justifyContent: "center", alignItems: "center"
        }}>
          {/* 5 covers fanned slightly */}
          {[
          { i: 0, rot: -10, dx: -100, dz: 0 },
          { i: 1, rot: -5, dx: -50, dz: 1 },
          { i: 2, rot: 0, dx: 0, dz: 2 },
          { i: 3, rot: 5, dx: 50, dz: 1 },
          { i: 4, rot: 10, dx: 100, dz: 0 }].
          map((p) =>
          <div key={p.i} style={{
            position: "absolute",
            transform: `translateX(${p.dx}px) rotate(${p.rot}deg)`,
            zIndex: p.dz
          }}>
              <GuideCover dir={dir} guide={GUIDES[p.i]} size="md" />
            </div>
          )}
        </div>

        {/* primary CTA */}
        <SalesCTA dir={dir} priceMode={priceMode} onCTA={onCTA} prominence="hero" />

        {/* trust strip */}
        <div style={{
          padding: "18px 16px",
          background: dir.glassBg,
          WebkitBackdropFilter: "blur(28px) saturate(180%)",
          backdropFilter: "blur(28px) saturate(180%)",
          border: `0.5px solid ${dir.glassBorder}`,
          borderRadius: 18,
          boxShadow: dir.shadowGlass,
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8,
          fontFamily: dir.body, color: dir.inkSoft, textAlign: "center"
        }}>
          {[
          ["5", "PDFs incluídos"],
          ["7 dias", "garantia total"],
          ["Imediato", "no e-mail"]].
          map(([a, b]) =>
          <div key={a}>
              <div style={{ fontFamily: dir.display, fontWeight: 700, fontSize: 18, color: dir.ink, letterSpacing: "-0.02em" }}>{a}</div>
              <div style={{ marginTop: 4, fontFamily: dir.body, fontSize: 13, color: dir.inkSoft, fontWeight: 500 }}>{b}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── CTA block — flexible: hero / inline / sticky / final ────────────────
function SalesCTA({ dir, priceMode, onCTA, prominence = "inline", onDark = false }) {
  const big = prominence === "hero" || prominence === "final";

  const showDiscount = priceMode === "discount";

  // Color tokens swap when the CTA sits on a dark surface (e.g., SecStack reveal card).
  const priceInk    = onDark ? "#F2EFE6"                 : dir.ink;
  const softInk     = onDark ? "rgba(242,239,230,0.75)"  : dir.inkSoft;
  const microInk    = onDark ? "rgba(242,239,230,0.65)"  : dir.inkSoft;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {/* real launch-price scarcity line */}
      <div style={{
        fontFamily: dir.display, fontSize: 12, letterSpacing: "0.14em",
        textTransform: "uppercase", color: dir.accent, fontWeight: 700
      }}>
        Preço de lançamento · sobe para R$ 97 em breve
      </div>

      {/* price line */}
      {showDiscount &&
      <div style={{
        display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap",
        fontFamily: dir.body, fontSize: 14, color: softInk, fontWeight: 500
      }}>
          <span>de</span>
          <span style={{ textDecoration: "line-through", textDecorationColor: "#C24A1C99", textDecorationThickness: "1.5px" }}>
            {brl(TOTAL_FULL)}
          </span>
          <span style={{
          padding: "4px 10px", borderRadius: 99,
          background: "#C24A1C", color: "#fff", fontWeight: 700, fontSize: 12, letterSpacing: "0.06em"
        }}>−{SAVINGS_PERCENT}%</span>
        </div>
      }

      <div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }}>
        <span style={{
          fontFamily: dir.display, fontSize: big ? 52 : 36, fontWeight: 700,
          letterSpacing: "-0.04em", lineHeight: 1, color: priceInk,
          whiteSpace: "nowrap", flex: "0 0 auto"
        }}>{brl(BUNDLE_PRICE)}</span>
        <span style={{
          fontFamily: dir.body, fontSize: 14, color: softInk, fontWeight: 500,
          whiteSpace: "nowrap"
        }}>
          à vista · ou 12× R$ 6,69
        </span>
      </div>

      <button onClick={onCTA} style={{
        background: `linear-gradient(180deg, ${dir.accent}, ${dir.accent}dd)`,
        color: dir.accentOn, border: "none",
        padding: big ? "18px 22px" : "14px 18px",
        fontFamily: dir.display, fontWeight: 700,
        fontSize: big ? 17 : 15, letterSpacing: "-0.01em",
        borderRadius: 999, cursor: "pointer", width: "100%",
        boxShadow: `0 14px 30px -8px ${dir.accent}66, inset 0 0.5px 0 rgba(255,255,255,0.35)`,
        display: "flex", alignItems: "center", justifyContent: "center", gap: 8
      }}>
        Comprar por R$ 67 →
      </button>

      <div style={{
        fontFamily: dir.body, fontSize: 13, color: microInk,
        textAlign: "center", fontWeight: 500, marginTop: 2
      }}>
        Pagamento seguro pela Kiwify · Acesso imediato
      </div>
    </div>);

}

// ─── Sticky purchase bar — appears once user scrolls past hero ──────────
function StickyBar({ dir, priceMode, onCTA, visible }) {
  return (
    <div style={{
      position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 50,
      transform: visible ? "translateY(0)" : "translateY(100%)",
      transition: "transform .25s cubic-bezier(.2,.7,.3,1)",
      padding: 12, pointerEvents: visible ? "auto" : "none"
    }}>
      <div style={{
        margin: "0 auto", maxWidth: 540,
        background: dir.glassBg,
        WebkitBackdropFilter: "blur(28px) saturate(180%)",
        backdropFilter: "blur(28px) saturate(180%)",
        border: `0.5px solid ${dir.glassBorder}`,
        borderRadius: 18, padding: "10px 12px 10px 16px",
        boxShadow: `${dir.shadowGlass}, 0 -20px 60px -20px rgba(0,0,0,0.18)`,
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10
      }}>
        <div style={{ minWidth: 0, lineHeight: 1.15 }}>
          <div style={{
            fontFamily: dir.display, fontSize: 13, fontWeight: 600,
            letterSpacing: "-0.005em", color: dir.inkSoft
          }}>Pacote Eixo · 5 PDFs</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 2 }}>
            <span style={{
              fontFamily: dir.display, fontSize: 24, fontWeight: 700,
              letterSpacing: "-0.025em", color: dir.ink
            }}>{brl(BUNDLE_PRICE)}</span>
            {priceMode === "discount" &&
            <span style={{
              fontFamily: dir.body, fontSize: 13, color: dir.inkSoft, fontWeight: 500,
              textDecoration: "line-through", textDecorationColor: "#C24A1C88"
            }}>{brl(TOTAL_FULL)}</span>
            }
          </div>
        </div>
        <button onClick={onCTA} style={{
          background: `linear-gradient(180deg, ${dir.accent}, ${dir.accent}dd)`,
          color: dir.accentOn, border: "none",
          padding: "13px 20px", fontFamily: dir.display, fontWeight: 700,
          fontSize: 14, letterSpacing: "-0.005em", borderRadius: 999,
          boxShadow: `0 10px 24px -6px ${dir.accent}66, inset 0 0.5px 0 rgba(255,255,255,0.35)`,
          cursor: "pointer", whiteSpace: "nowrap"
        }}>R$ 67 →</button>
      </div>
    </div>);

}

Object.assign(window, { GuideCover, SalesTopBar, SalesHero, SalesCTA, StickyBar });