// sales-bottom.jsx — Bottom-of-page sections: garantia, FAQ, last CTA, footer.
// Two font families only. Sizes bumped for legibility. Tiny mono-style
// uppercase microcopy removed where it cluttered.

// ─── GARANTIA ───────────────────────────────────────────────────────────
function SecGarantia({ dir }) {
  return (
    <SalesSection dir={dir}>
      <div style={{
        padding: 30, borderRadius: 26,
        background: `linear-gradient(160deg, ${dir.surface}, ${dir.surfaceAlt})`,
        border: `0.5px solid ${dir.hairline}`, boxShadow: dir.shadowSoft,
        display: "flex", flexDirection: "column", gap: 18, position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: dir.highlight,
        }} />

        <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 18 }}>
          {/* Seal */}
          <div style={{
            width: 92, height: 92, borderRadius: "50%",
            background: dir.ink, color: dir.surface,
            display: "grid", placeItems: "center", position: "relative", flexShrink: 0,
            boxShadow: `inset 0 1px 0 rgba(255,255,255,0.1), 0 14px 30px -10px rgba(0,0,0,0.4)`,
          }}>
            <div style={{
              position: "absolute", inset: 5, borderRadius: "50%",
              border: `0.5px dashed rgba(242,239,230,0.3)`,
            }} />
            <div style={{ textAlign: "center", lineHeight: 1 }}>
              <div style={{ fontFamily: dir.display, fontSize: 34, fontWeight: 700, color: dir.accent, letterSpacing: "-0.03em" }}>7</div>
              <div style={{ fontFamily: dir.display, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", marginTop: 5, fontWeight: 700 }}>DIAS</div>
            </div>
          </div>

          <div>
            <div style={{
              fontFamily: dir.display, fontSize: 13, letterSpacing: "0.14em",
              textTransform: "uppercase", color: dir.accent, fontWeight: 600,
            }}>Garantia incondicional</div>
            <div style={{
              fontFamily: dir.display, fontSize: 24, fontWeight: 700,
              letterSpacing: "-0.03em", lineHeight: 1.1, marginTop: 8,
            }}>7 dias pra ler tudo —<br/>ou devolver sem dor.</div>
          </div>
        </div>

        <div style={{ position: "relative", fontSize: 16, lineHeight: 1.55, color: dir.inkSoft }}>
          Compra, baixa, lê. Se em <strong style={{ color: dir.ink, fontWeight: 600 }}>7 dias</strong> você achar que não vale, manda um e-mail e a gente devolve 100%. Sem justificativa, sem ligação, sem questionário.
        </div>
      </div>
    </SalesSection>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────────────────
function SecFAQ({ dir }) {
  return (
    <SalesSection dir={dir} accentBg
      eyebrow="Perguntas frequentes"
      title="A gente já ouviu todas.">
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {FAQ.map((it, i) => (
          <details key={i} style={{
            background: dir.surface, borderRadius: 18, padding: "18px 22px",
            border: `0.5px solid ${dir.hairline}`,
            boxShadow: "inset 0 0.5px 0 rgba(255,255,255,0.5)",
          }}>
            <summary style={{
              cursor: "pointer", listStyle: "none",
              display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14,
              fontFamily: dir.display, fontSize: 17, fontWeight: 600,
              letterSpacing: "-0.02em", lineHeight: 1.3, color: dir.ink,
            }}>
              <span>{it.q}</span>
              <span style={{
                fontFamily: dir.display, fontSize: 20, color: dir.accent, marginTop: -2,
                flexShrink: 0, fontWeight: 400,
              }}>+</span>
            </summary>
            <div style={{ fontSize: 15, lineHeight: 1.55, color: dir.inkSoft, marginTop: 12 }}>
              {it.a}
            </div>
          </details>
        ))}
      </div>
    </SalesSection>
  );
}

// ─── CTA FINAL ───────────────────────────────────────────────────────────
function SecFinalCTA({ dir, priceMode, onCTA }) {
  return (
    <section style={{ padding: "80px 22px 110px", position: "relative", overflow: "hidden" }}>
      {/* glow blob */}
      <div style={{
        position: "absolute", top: -100, left: "50%", width: 500, height: 500,
        transform: "translateX(-50%)", borderRadius: "50%", filter: "blur(80px)",
        background: `radial-gradient(circle, ${dir.accent}25, transparent 65%)`,
        pointerEvents: "none",
      }} />

      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 26, alignItems: "center", textAlign: "center" }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          fontFamily: dir.display, fontSize: 13, letterSpacing: "0.16em",
          textTransform: "uppercase", color: dir.accent, fontWeight: 600,
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: dir.accent, boxShadow: `0 0 0 4px ${dir.accent}22` }} />
          Último passo
        </div>

        <EixoSymbol variant="hpta" size={80} fg={dir.ink} thick />

        <h2 style={{
          fontFamily: dir.display, fontSize: 40, fontWeight: 700,
          letterSpacing: "-0.04em", lineHeight: 1, color: dir.ink, margin: 0,
          maxWidth: 460, textWrap: "balance",
        }}>
          Da próxima vez<br/>
          que você for ciclar —<br/>
          <span style={{ color: dir.accent }}>já vai com base.</span>
        </h2>

        <p style={{ fontSize: 17, lineHeight: 1.55, color: dir.inkSoft, margin: 0, maxWidth: 420 }}>
          R$ 67 à vista. 5 PDFs no seu e-mail em segundos. 7 dias de garantia. Comunidade opcional no checkout.
        </p>

        <div style={{ width: "100%", maxWidth: 400 }}>
          <SalesCTA dir={dir} priceMode={priceMode} onCTA={onCTA} prominence="final" />
        </div>

        {/* badges — bigger and softer */}
        <div style={{
          display: "flex", gap: 18, flexWrap: "wrap", justifyContent: "center",
          fontFamily: dir.body, fontSize: 14, color: dir.inkSoft, marginTop: 4, fontWeight: 500,
        }}>
          <span>★ Kiwify</span>
          <span>PIX · cartão · boleto</span>
          <span>Acesso imediato</span>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────
function SalesFooter({ dir }) {
  return (
    <footer style={{
      background: dir.ink, color: "rgba(242,239,230,0.85)",
      padding: "44px 22px 120px", // extra bottom for sticky bar room
      position: "relative",
    }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <EixoSymbol variant="hpta" size={24} fg={dir.accent} thick />
          <span style={{
            fontFamily: dir.display, fontWeight: 700, fontSize: 18, letterSpacing: "-0.01em",
            color: "#F2EFE6",
          }}>EIXO<span style={{ color: dir.accent }}>.</span></span>
        </div>

        <div style={{
          fontSize: 15, lineHeight: 1.6, fontFamily: dir.body, fontWeight: 400,
          color: "rgba(242,239,230,0.85)",
        }}>
          Eixo Pharma é <strong style={{ color: "#F2EFE6", fontWeight: 600 }}>educação em farmacologia esportiva</strong>. Não substitui médico, não indica fornecedor, não prescreve. A decisão é sua.
        </div>

        <div style={{
          display: "flex", gap: 22, flexWrap: "wrap",
          fontFamily: dir.body, fontSize: 15, fontWeight: 500,
          color: "#F2EFE6",
        }}>
          <a href="/termos" style={{ color: "inherit", textDecoration: "none" }}>Termos</a>
          <a href="/privacidade" style={{ color: "inherit", textDecoration: "none" }}>Privacidade</a>
          <a href="mailto:contato@eixopharma.com.br" style={{ color: "inherit", textDecoration: "none" }}>Contato</a>
          <a href="https://instagram.com/eixopharma" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>@eixopharma</a>
        </div>

        <div style={{
          paddingTop: 20, borderTop: `0.5px solid rgba(242,239,230,0.18)`,
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8,
          fontFamily: dir.body, fontSize: 13, color: "rgba(242,239,230,0.7)",
        }}>
          <span>© 2026 Eixo Pharma</span>
          <span style={{ color: dir.accent }}>PT-BR · Brasil</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SecGarantia, SecFAQ, SecFinalCTA, SalesFooter });
