// Pricing

// ─── Section 9: Planos ───
const Pricing = ({ layout = "cards" }) => {
  const plans = [
  {
    key: "starter",
    name: "Starter", price: "R$ 389", setup: null,
    tagline: "Para quem atende sozinho",
    bullets: [
    "Agente conversacional 24/7 no WhatsApp",
    "Integração com calendário Google ou Hotmail",
    "Confirmação automática 24h antes",
    "Reativação de base parada",
    "1 especialista cadastrado",
    "Implementação em até 48h"],

    cta: "Assine agora"
  },
  {
    key: "clinica",
    name: "Pro", price: "R$ 729", setup: null,
    tagline: "Para negócios com 2+ profissionais",
    featured: true,
    includes: "Tudo do Starter, mais:",
    bullets: [
    "2 ou mais especialistas",
    "Volume maior de agendamentos",
    "Distribuição inteligente entre profissionais",
    "Suporte prioritário no WhatsApp"],

    cta: "Assine agora"
  },
  {
    key: "premium",
    name: "Premium", price: "R$ 1.329", setup: "+ R$ 1.500 implantação",
    tagline: "Para quem quer personalização",
    includes: "Tudo do Pro, mais:",
    bullets: [
    "Onboarding 1:1 com o time Allora",
    "Customização da ferramenta pro seu fluxo",
    "Dashboard de visualização da base",
    "Relatórios de conversão de leads"],

    cta: "Falar com o time"
  }];


  return (
    <section className="section" id="planos">
      <div className="container">
        <div className="section-head" style={{ textAlign: "left", marginInline: 0 }}>
          <div className="eyebrow">Planos</div>
          <h2 style={{ margin: 0, fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 22, letterSpacing: "-0.01em", color: "var(--ink)" }}>
            Escolha o melhor plano para você.
          </h2>
        </div>

        {layout === "table" ? <PricingTable plans={plans} /> : <PricingCards plans={plans} />}

        {/* common terms strip */}
        <div className="card" style={{
          padding: "20px 24px", marginTop: 24,
          display: "flex", gap: 24, alignItems: "center", justifyContent: "center", flexWrap: "wrap",
          background: "var(--bg-elev)"
        }}>
          <Bullet>Cancela com 1 clique, sem multa</Bullet>
          <span style={{ color: "var(--muted-2)" }}>·</span>
          <Bullet>No ar em até 48h</Bullet>
        </div>
      </div>
    </section>);

};

const Bullet = ({ children }) =>
<span style={{ display: "inline-flex", gap: 8, alignItems: "center", fontSize: 14, color: "var(--ink)" }}>
    <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--accent-tint)", color: "var(--accent-deep)", display: "grid", placeItems: "center" }}>
      <G.Check width={12} height={12} strokeWidth={3.2} />
    </span>
    {children}
  </span>;


const PricingCards = ({ plans }) =>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
    {plans.map((p) =>
  <div key={p.key} className="card reveal" style={{
    padding: "32px 28px 28px",
    display: "flex", flexDirection: "column", gap: 18,
    background: p.featured ? "var(--accent-tint)" : "var(--bg-card)",
    color: "var(--ink)",
    border: p.featured ? "1px solid color-mix(in srgb, var(--accent) 45%, transparent)" : "1px solid var(--line)",
    position: "relative",
    minHeight: 480,
    boxShadow: p.featured ? "var(--shadow-md)" : "var(--shadow-sm)"
  }}>
        {p.featured &&
    <div style={{ position: "absolute", top: -12, left: 28, padding: "5px 10px", background: "var(--accent)", color: "var(--accent-ink)", fontSize: 11, fontWeight: 700, borderRadius: 999, fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.08em", textTransform: "uppercase" }}>
            Mais escolhido
          </div>
    }
        <div>
          <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 20, letterSpacing: "-0.01em" }}>{p.name}</div>
          <div className="small" style={{ color: "var(--muted)", marginTop: 4 }}>{p.tagline}</div>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
            <span className="display display-md tabular" style={{ margin: 0, color: "var(--ink)", fontWeight: 700 }}>{p.price}</span>
            <span style={{ fontSize: 14, color: "var(--muted)" }}>/mês</span>
          </div>
          {p.setup && <div className="small" style={{ color: "var(--muted)" }}>{p.setup}</div>}
        </div>
        {p.includes && <div className="small" style={{ color: "var(--brand-green)", fontWeight: 600 }}>{p.includes}</div>}
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
          {p.bullets.map((b, i) =>
      <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.45 }}>
              <span style={{ flexShrink: 0, marginTop: 2, color: "var(--brand-green)" }}>
                <G.Check width={14} height={14} strokeWidth={3} />
              </span>
              <span style={{ color: "var(--ink-2)" }}>{b}</span>
            </li>
      )}
        </ul>
        <a className={`btn ${p.featured ? "btn-primary" : "btn-ghost"} btn-lg`} href="#cta" style={{ justifyContent: "center", marginTop: 4 }}>
          {p.cta}
        </a>
      </div>
  )}
  </div>;


const PricingTable = ({ plans }) => {
  // Build the union of features for the table
  const features = [
  { l: "Agente conversacional 24/7", k: ["starter", "clinica", "premium"] },
  { l: "Integração com calendário Google/Hotmail", k: ["starter", "clinica", "premium"] },
  { l: "Confirmação automática 24h antes", k: ["starter", "clinica", "premium"] },
  { l: "Reativação de base parada", k: ["starter", "clinica", "premium"] },
  { l: "Implementação em até 48h", k: ["starter", "clinica", "premium"] },
  { l: "Especialistas cadastrados", v: { starter: "1", clinica: "Ilimitado", premium: "Ilimitado" } },
  { l: "Distribuição inteligente entre profissionais", k: ["clinica", "premium"] },
  { l: "Suporte prioritário no WhatsApp", k: ["clinica", "premium"] },
  { l: "Onboarding 1:1 com o time", k: ["premium"] },
  { l: "Customização do fluxo", k: ["premium"] },
  { l: "Dashboard + relatórios", k: ["premium"] }];

  return (
    <div className="card" style={{ overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(220px, 1.4fr) repeat(3, 1fr)", gap: 0 }}>
        <div style={{ padding: "26px 24px" }}></div>
        {plans.map((p) =>
        <div key={p.key} style={{ padding: "26px 24px", borderLeft: "1px solid var(--line)", background: p.featured ? "var(--bg-elev)" : "transparent" }}>
            <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 20 }}>{p.name}</div>
            <div className="small" style={{ marginTop: 4, fontSize: "13px" }}>{p.tagline}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 12 }}>
              <span className="display display-sm tabular" style={{ margin: 0, fontWeight: 700, fontSize: 32 }}>{p.price}</span>
              <span className="small">/mês</span>
            </div>
            {p.setup && <div className="small">{p.setup}</div>}
          </div>
        )}
        {features.map((f, i) =>
        <React.Fragment key={i}>
            <div style={{ padding: "16px 24px", borderTop: "1px solid var(--line)", fontSize: 14, color: "var(--ink-2)" }}>{f.l}</div>
            {plans.map((p) =>
          <div key={p.key} style={{
            padding: "16px 24px", borderLeft: "1px solid var(--line)", borderTop: "1px solid var(--line)",
            fontSize: 14, color: "var(--ink-2)",
            background: p.featured ? "var(--bg-elev)" : "transparent"
          }}>
                {f.v ? f.v[p.key] : f.k.includes(p.key) ? <span style={{ color: "var(--accent-deep)" }}><G.Check width={16} height={16} strokeWidth={3} /></span> : <span style={{ color: "var(--muted-2)" }}>—</span>}
              </div>
          )}
          </React.Fragment>
        )}
        <div style={{ padding: "20px 24px", borderTop: "1px solid var(--line)" }}></div>
        {plans.map((p) =>
        <div key={p.key} style={{ padding: "20px 24px", borderLeft: "1px solid var(--line)", borderTop: "1px solid var(--line)", background: p.featured ? "var(--bg-elev)" : "transparent" }}>
            <a className={`btn ${p.featured ? "btn-primary" : "btn-ghost"} btn-sm`} href="#cta" style={{ width: "100%", justifyContent: "center" }}>{p.cta}</a>
          </div>
        )}
      </div>
    </div>);

};

// Stubs for components removed from the layout (kept so window globals don't break older callers)
const SocialProof = () => null;
const Objections = () => null;

Object.assign(window, { SocialProof, Pricing, Objections });