/* global React */

function Pricing() {
  const [mode, setMode] = React.useState("subs");

  const plans = [
    { id: "essential", n: "Essential", price: 450,  tokens: "25",  perTok: "€18", bp: "—",     bs: "€250/mês", bi: "€150/mês", sla: false, ga: false },
    { id: "growth",    n: "Growth",    price: 800,  tokens: "50",  perTok: "€16", bp: "−20%",  bs: "€250/mês", bi: "€120/mês", sla: false, ga: false, pop: true },
    { id: "scale",     n: "Scale",     price: 1500, tokens: "100", perTok: "€15", bp: "−50%",  bs: "−50%",     bi: "€99/mês",  sla: "48–72h", ga: true },
    { id: "agency",    n: "Agency",    price: 2500, tokens: "Fila contínua", perTok: "—", bp: "Grátis", bs: "Incluído", bi: "Incluído", sla: "48–72h", ga: true }
  ];
  const packs = [
    { id: "pack_base", n: "Pack Base", tokens: 10, total: 280, per: "€28" },
    { id: "pack_pro",  n: "Pack Pro",  tokens: 20, total: 500, per: "€25", pop: true },
    { id: "pack_max",  n: "Pack Max",  tokens: 30, total: 660, per: "€22" }
  ];

  return (
    <Section id="pricing" tone="paper">
      <SectionHead
        num="10 / Pricing"
        title="Preços <em>visíveis.</em><br/>Compromissos claros."
        sub="Subscrição mensal recomendada. Packs avulso para teste. Be Cinematic sob consulta. Sem letra pequena."
      />

      {/* Bloco 1 — Setup */}
      <div className="card card--cream" style={{ background: "var(--cream)", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center", marginBottom: 32 }}>
        <BeTag name="Blueprint" size="lg" />
        <div>
          <span className="mono">Setup único</span>
          <div className="display" style={{ fontSize: 44, letterSpacing: "-0.035em", lineHeight: 1, marginTop: 4 }}>
            €1.000 <span className="mono" style={{ color: "var(--muted)" }}>· 2–3 semanas</span>
          </div>
          <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--muted)" }}>Manual de marca AI · prompts-base · LoRA treinado · descontos progressivos com plano</p>
        </div>
        <a href="#contact" className="btn btn--ghost">Marcar Blueprint <span className="arrow">→</span></a>
      </div>

      {/* Toggle */}
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 32 }}>
        <div style={{ display: "inline-flex", border: "1px solid var(--rule-strong)", borderRadius: 999, padding: 4 }}>
          {[["subs", "Subscrição mensal"], ["packs", "Packs avulso"]].map(([k, l]) => (
            <button key={k} onClick={() => setMode(k)} style={{
              padding: "10px 18px",
              border: "none",
              background: mode === k ? "var(--ink)" : "transparent",
              color: mode === k ? "#FFF" : "var(--ink)",
              borderRadius: 999,
              cursor: "pointer",
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.08em",
              textTransform: "uppercase"
            }}>{l}</button>
          ))}
        </div>
      </div>

      {/* Bloco 2 — Subscrições */}
      {mode === "subs" && (
        <div className="grid-4">
          {plans.map((p, i) => (
            <Reveal key={i} delay={i + 1} className="card" style={{
              padding: 0,
              borderColor: p.pop ? "var(--coral)" : "var(--rule)",
              position: "relative",
              display: "flex", flexDirection: "column"
            }}>
              {p.pop && (
                <span className="mono" style={{
                  position: "absolute", top: -10, left: 16,
                  background: "var(--coral)", color: "#FFF",
                  padding: "4px 10px", borderRadius: 999
                }}>★ Recomendado</span>
              )}
              <div style={{ padding: "20px 20px 16px", borderBottom: "1px solid var(--rule)" }}>
                <span className="mono mono-ink">{p.n}</span>
                <div className="display" style={{ fontSize: 44, letterSpacing: "-0.035em", lineHeight: 1, marginTop: 8 }}>
                  €{p.price}<span className="mono" style={{ color: "var(--muted)", marginLeft: 4 }}>/mês</span>
                </div>
                <span className="mono" style={{ display: "block", marginTop: 8 }}>
                  {p.tokens} {typeof p.tokens === "string" && p.tokens.includes("contínua") ? "" : "tokens"} · {p.perTok}/un
                </span>
              </div>
              <ul style={{ listStyle: "none", padding: "16px 20px", margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 13, flex: 1 }}>
                <Row k="Blueprint" v={p.bp} />
                <Row k="Be Social" v={p.bs} />
                <Row k="Be Informed" v={p.bi} />
                <Row k="SLA prioritário" v={p.sla || "—"} on={!!p.sla} />
                <Row k="Gestor de conta" v={p.ga ? "Incluído" : "—"} on={p.ga} />
              </ul>
              <div style={{ padding: 16, borderTop: "1px solid var(--rule)" }}>
                <a href={`/signup.html?pack=${p.id}`} className="btn" style={{
                  width: "100%", justifyContent: "center",
                  background: p.pop ? "var(--coral)" : "var(--ink)",
                  borderColor: p.pop ? "var(--coral)" : "var(--ink)"
                }}>
                  Subscrever <span className="arrow">→</span>
                </a>
                <span className="mono" style={{ display: "block", textAlign: "center", marginTop: 10 }}>Fidelização 6 meses</span>
              </div>
            </Reveal>
          ))}
        </div>
      )}

      {/* Bloco 3 — Packs */}
      {mode === "packs" && (
        <div className="grid-3">
          {packs.map((p, i) => (
            <Reveal key={i} delay={i + 1} className="card" style={{
              padding: "28px 24px",
              borderColor: p.pop ? "var(--coral)" : "var(--rule)",
              position: "relative"
            }}>
              {p.pop && <span className="mono" style={{ position: "absolute", top: -10, left: 16, background: "var(--coral)", color: "#FFF", padding: "4px 10px", borderRadius: 999 }}>★ Mais escolhido</span>}
              <span className="mono mono-ink">{p.n}</span>
              <div className="display" style={{ fontSize: 56, letterSpacing: "-0.04em", lineHeight: 1, marginTop: 12 }}>
                {p.tokens} <span className="mono" style={{ color: "var(--muted)", fontSize: 14 }}>tokens</span>
              </div>
              <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingTop: 14, borderTop: "1px solid var(--rule)" }}>
                <span className="display" style={{ fontSize: 32, letterSpacing: "-0.03em" }}>€{p.total}</span>
                <span className="mono">{p.per}/token</span>
              </div>
              <span className="mono" style={{ display: "block", marginTop: 8, color: "var(--muted)" }}>Validade · 3 meses · sem fidelização</span>
              <a href={`/signup.html?pack=${p.id}`} className="btn btn--ghost" style={{ width: "100%", justifyContent: "center", marginTop: 18 }}>Comprar pack <span className="arrow">→</span></a>
            </Reveal>
          ))}
        </div>
      )}

      {/* Bloco 4 — Add-ons Social */}
      <div style={{ marginTop: 48 }}>
        <span className="mono mono-ink" style={{ display: "block", marginBottom: 16 }}>Add-ons · Gestão de conteúdo</span>
        <div className="grid-2">
          <Reveal>
            <div className="card card--cream" style={{ background: "var(--cream)" }}>
              <span className="chip"><span className="dot" />Be Social</span>
              <h3 className="display" style={{ fontSize: 32, margin: "12px 0 8px", letterSpacing: "-0.02em" }}>Do post ao reporting.</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", fontSize: 14, display: "flex", flexDirection: "column", gap: 8 }}>
                {["Calendário editorial mensal", "Copy IA + revisão humana", "Agendamento multi-rede", "Relatório base mensal"].map((x, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, color: "var(--muted)" }}>
                    <span style={{ color: "var(--coral)" }}>+</span>{x}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="display" style={{ fontSize: 32, letterSpacing: "-0.03em" }}>€250<span className="mono" style={{ marginLeft: 4 }}>/mês</span></span>
                <span className="mono">add-on</span>
              </div>
            </div>
          </Reveal>
          <Reveal delay={1}>
            <div className="card" style={{ borderColor: "var(--coral)" }}>
              <span className="chip" style={{ borderColor: "var(--coral)", color: "var(--coral)" }}>
                <span className="dot" />Be Informed · premium
              </span>
              <h3 className="display" style={{ fontSize: 32, margin: "12px 0 8px", letterSpacing: "-0.02em" }}>Insights <em>humano-curados</em>.</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", fontSize: 14, display: "flex", flexDirection: "column", gap: 8 }}>
                {["Relatório premium mensal", "3 sugestões de campanha", "Análise competitiva", "Workshop trimestral"].map((x, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, color: "var(--muted)" }}>
                    <span style={{ color: "var(--coral)" }}>+</span>{x}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="display" style={{ fontSize: 32, letterSpacing: "-0.03em" }}>€99–150<span className="mono" style={{ marginLeft: 4 }}>/mês</span></span>
                <span className="mono">por plano</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      {/* Bloco 5 — Be Cinematic */}
      <div style={{ marginTop: 56 }}>
        <div className="card card--ink" style={{
          background: "var(--ink)", color: "#FFF",
          padding: "clamp(28px, 3.4vw, 48px)",
          display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center"
        }} >
          <div style={{ borderRight: "1px solid rgba(255,255,255,0.18)", paddingRight: 32 }}>
            <span className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>★ Módulo</span>
            <h4 className="display" style={{ fontSize: 28, margin: "6px 0 0", color: "#FFF", letterSpacing: "-0.02em" }}>
              <em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300, color: "var(--coral)" }}>Be</em> Cinematic
            </h4>
          </div>
          <div>
            <span className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>Projeto a projeto</span>
            <div className="display" style={{ fontSize: 36, letterSpacing: "-0.03em", lineHeight: 1, marginTop: 6, color: "#FFF" }}>
              Sob consulta
            </div>
            <p style={{ margin: "8px 0 0", fontSize: 14, color: "rgba(255,255,255,0.65)" }}>Filmes acabados · briefing → conceito → produção (AI/híbrida/tradicional) → pós</p>
          </div>
          <a href="#contact" className="btn">Pedir proposta <span className="arrow">→</span></a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          #pricing .card[style*="grid-template-columns: auto 1fr auto"] { grid-template-columns: 1fr !important; gap: 16px !important; }
        }
      `}</style>
    </Section>
  );
}

function Row({ k, v, on }) {
  return (
    <li style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8, alignItems: "baseline", color: "var(--muted)" }}>
      <span style={{ color: "var(--muted)" }}>{k}</span>
      <span className="mono" style={{ color: on ? "var(--coral)" : v === "—" ? "var(--muted-2)" : "var(--ink)" }}>{v}</span>
    </li>
  );
}

window.Pricing = Pricing;