// Pricing — toggle between Empresarial (4 plans) / Construtor (3 plans).
// Plans match the official BinGest pricing structure.

const SHARED_FEATURES = [
"Teste de 7 dias grátis",
"Suporte WhatsApp"];


const PLANS = {
  empresarial: [
  {
    name: "Starter",
    price: 159.99,
    desc: "1 obra · 2 usuários · Aptos e serviços ilimitados",
    features: SHARED_FEATURES,
    cta: "Começar grátis",
    highlight: false,
    kind: "plan"
  },
  {
    name: "Pro",
    price: 209.99,
    desc: "2 obras · 3 usuários · Aptos e serviços ilimitados",
    features: SHARED_FEATURES,
    cta: "Começar grátis",
    highlight: true,
    kind: "plan"
  },
  {
    name: "Enterprise",
    price: 379.99,
    desc: "5 obras · 5 usuários · Aptos e serviços ilimitados",
    features: SHARED_FEATURES,
    cta: "Começar grátis",
    highlight: false,
    kind: "plan"
  },
  {
    name: "Planos Especiais",
    desc: "Para empresas com necessidades personalizadas. Fale com nosso time comercial para uma proposta sob medida.",
    cta: "Falar com comercial",
    kind: "custom"
  }],


  construtor: [
  {
    name: "Básico",
    price: 49.0,
    desc: "1 obra ativa",
    features: SHARED_FEATURES,
    cta: "Começar grátis",
    highlight: false,
    kind: "plan"
  },
  {
    name: "Plus",
    price: 69.0,
    desc: "2 obras ativas",
    features: SHARED_FEATURES,
    cta: "Começar grátis",
    highlight: false,
    kind: "plan"
  },
  {
    name: "Pro",
    price: 119.0,
    desc: "Obras ilimitadas",
    features: SHARED_FEATURES,
    cta: "Começar grátis",
    highlight: true,
    kind: "plan"
  }]

};

function Pricing() {
  const [mode, setMode] = React.useState("empresarial");
  const plans = PLANS[mode];
  const cols = mode === "empresarial" ? "repeat(4, 1fr)" : "repeat(3, 1fr)";

  return (
    <section id="precos" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto 48px" }}>
          <div className="t-eyebrow" style={{ marginBottom: 16 }}>PLANOS</div>
          <h2 className="t-h1" style={{ margin: 0, marginBottom: 16 }}>
            Pague menos que um almoço de equipe.<br />
            <span style={{ color: "rgba(255,255,255,.5)" }}>Economize o equivalente a uma obra inteira.</span>
          </h2>
          <p className="t-lead">Teste grátis de 7 dias em qualquer plano.

          </p>
        </div>

        {/* Audience toggle */}
        <div style={{
          display: "flex", justifyContent: "center", marginBottom: 40
        }}>
          <div style={{
            display: "inline-flex", padding: 5,
            borderRadius: 999, background: "rgba(255,255,255,.04)",
            border: "1px solid rgba(255,255,255,.10)",
            position: "relative",
            backdropFilter: "blur(8px)"
          }}>
            <div style={{
              position: "absolute",
              top: 5, bottom: 5,
              left: mode === "empresarial" ? 5 : "calc(50% + 2px)",
              width: "calc(50% - 7px)",
              background: "rgba(255,255,255,.10)",
              borderRadius: 999,
              boxShadow: "0 1px 0 rgba(255,255,255,.10) inset",
              transition: "left .4s cubic-bezier(.5,.1,.3,1)"
            }} />
            {["empresarial", "construtor"].map((k) =>
            <button key={k}
            onClick={() => setMode(k)}
            style={{
              position: "relative", zIndex: 1,
              background: "transparent", border: "none",
              padding: "11px 22px",
              color: mode === k ? "#fff" : "rgba(255,255,255,.6)",
              fontWeight: mode === k ? 600 : 500, fontSize: 14,
              display: "inline-flex", alignItems: "center", gap: 8,
              cursor: "pointer"
            }}>
                {k === "empresarial" ? <IconBuilding size={14} /> : <IconHelmet size={14} />}
                {k === "empresarial" ? "Empresarial" : "Construtor"}
              </button>
            )}
          </div>
        </div>

        {/* Plans grid */}
        <div key={mode} style={{
          display: "grid",
          gridTemplateColumns: cols,
          gap: 16,
          maxWidth: mode === "empresarial" ? 1280 : 1000,
          margin: "0 auto",
          animation: "fade-up .4s ease both"
        }} className={`plans-grid ${mode === "empresarial" ? "plans-empresarial" : "plans-construtor"}`}>
          {plans.map((p) =>
          p.kind === "plan" ?
          <PlanCard key={p.name} plan={p} /> :
          <CustomCard key={p.name} plan={p} />
          )}
        </div>

        <p style={{
          textAlign: "center", marginTop: 22, fontSize: 13, color: "rgba(255,255,255,.55)"
        }}>

        </p>
      </div>

      <style>{`
        @media (max-width: 1080px) {
          .plans-empresarial { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 720px) {
          .plans-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

// --- Standard plan card (Starter, Pro, Enterprise, Básico, Plus...) ---------
function PlanCard({ plan }) {
  const isHi = plan.highlight;
  // Split price into integer + decimals
  const [intPart, decPart] = plan.price.toFixed(2).split(".");

  return (
    <div style={{
      position: "relative",
      background: "rgba(255,255,255,.04)",
      color: "#fff",
      border: isHi ?
      "1.5px solid var(--blue-600)" :
      "1px solid rgba(255,255,255,.10)",
      borderRadius: 16,
      padding: "26px 24px 26px",
      backdropFilter: "blur(8px)",
      boxShadow: isHi ?
      "0 30px 70px -25px rgba(42,91,255,.45), 0 1px 0 rgba(255,255,255,.08) inset" :
      "0 20px 50px -30px rgba(0,0,0,.5)",
      display: "flex", flexDirection: "column",
      transition: "transform .25s ease, box-shadow .25s ease"
    }}>
      {/* MAIS POPULAR pill on top */}
      {isHi &&
      <div style={{
        position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
        padding: "5px 14px", borderRadius: 999,
        background: "var(--blue-600)", color: "#fff",
        fontSize: 11, fontWeight: 700, letterSpacing: ".08em",
        textTransform: "uppercase",
        whiteSpace: "nowrap",
        boxShadow: "0 8px 20px -6px rgba(42,91,255,.55)"
      }}>MAIS POPULAR</div>
      }

      {/* 7 dias grátis chip */}
      <div style={{
        display: "inline-flex", alignItems: "center",
        padding: "6px 12px", borderRadius: 8,
        background: "rgba(34,197,94,.12)",
        color: "#7BE89A",
        fontSize: 12, fontWeight: 600,
        marginBottom: 18,
        alignSelf: "flex-start",
        border: "1px solid rgba(34,197,94,.20)"
      }}>7 dias grátis</div>

      {/* Plan name */}
      <h3 style={{
        margin: 0, marginBottom: 14,
        fontSize: 20, fontWeight: 600, letterSpacing: "-0.01em",
        color: "#fff"
      }}>{plan.name}</h3>

      {/* Price */}
      <div style={{
        display: "flex", alignItems: "flex-start", gap: 4, marginBottom: 12
      }}>
        <span style={{
          fontSize: 14, fontWeight: 500,
          color: "rgba(255,255,255,.7)",
          marginTop: 8
        }}>R$</span>
        <span className="mono tabular" style={{
          fontSize: 44, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1,
          color: "#fff"
        }}>{intPart}</span>
        <span className="mono tabular" style={{
          fontSize: 18, fontWeight: 500,
          color: "rgba(255,255,255,.55)",
          alignSelf: "flex-end",
          marginBottom: 4
        }}>,{decPart}</span>
        <span style={{
          fontSize: 13,
          color: "rgba(255,255,255,.55)",
          marginLeft: 4,
          alignSelf: "flex-end",
          marginBottom: 6
        }}>/mês</span>
      </div>

      {/* Description */}
      <p style={{
        margin: 0, marginBottom: 22,
        fontSize: 13.5,
        color: "rgba(255,255,255,.65)",
        lineHeight: 1.5
      }}>{plan.desc}</p>

      {/* Divider */}
      <div style={{
        height: 1, background: "rgba(255,255,255,.10)",
        marginBottom: 20
      }} />

      {/* Features */}
      <ul style={{
        margin: 0, marginBottom: 24, padding: 0, listStyle: "none",
        display: "grid", gap: 12, flex: 1
      }}>
        {plan.features.map((f, i) =>
        <li key={i} style={{
          display: "flex", alignItems: "flex-start", gap: 10,
          fontSize: 13.5,
          color: "rgba(255,255,255,.85)",
          lineHeight: 1.4
        }}>
            <span style={{
            flex: "0 0 16px", width: 16, height: 16,
            color: "#7BE89A",
            display: "grid", placeItems: "center",
            marginTop: 1
          }}>
              <IconCheck size={14} />
            </span>
            {f}
          </li>
        )}
      </ul>

      {/* CTA */}
      <a href="#" style={{
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: "12px 16px",
        borderRadius: 10,
        background: isHi ? "var(--blue-600)" : "transparent",
        border: isHi ? "1px solid var(--blue-600)" : "1px solid var(--blue-600)",
        color: "#fff",
        fontWeight: 600, fontSize: 14,
        textDecoration: "none",
        boxShadow: isHi ? "0 10px 24px -10px rgba(42,91,255,.6)" : "none",
        transition: "background .2s, transform .2s"
      }}>
        {plan.cta}
      </a>
    </div>);

}

// --- Custom card (Planos Especiais) -----------------------------------------
function CustomCard({ plan }) {
  return (
    <div style={{
      position: "relative",
      background: "rgba(255,255,255,.04)",
      color: "#fff",
      border: "1px solid rgba(255,255,255,.10)",
      borderRadius: 16,
      padding: "26px 24px 26px",
      backdropFilter: "blur(8px)",
      boxShadow: "0 20px 50px -30px rgba(0,0,0,.5)",
      display: "flex", flexDirection: "column"
    }}>
      {/* Sparkle icon block */}
      <div style={{
        width: 44, height: 44, borderRadius: 10,
        background: "rgba(42,91,255,.20)",
        color: "#7DA7FF",
        display: "grid", placeItems: "center",
        marginBottom: 18
      }}>
        <IconSpark size={20} />
      </div>

      {/* Plan name */}
      <h3 style={{
        margin: 0, marginBottom: 14,
        fontSize: 20, fontWeight: 600, letterSpacing: "-0.01em",
        color: "#fff"
      }}>{plan.name}</h3>

      {/* Description */}
      <p style={{
        margin: 0, marginBottom: 24,
        fontSize: 14,
        color: "rgba(255,255,255,.75)",
        lineHeight: 1.6,
        flex: 1
      }}>{plan.desc}</p>

      {/* CTA */}
      <a href="#" style={{
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: "12px 16px",
        borderRadius: 10,
        background: "var(--blue-600)",
        color: "#fff",
        fontWeight: 600, fontSize: 14,
        textDecoration: "none",
        boxShadow: "0 10px 24px -10px rgba(42,91,255,.6)",
        transition: "background .2s"
      }}>
        {plan.cta}
      </a>
    </div>);

}

window.Pricing = Pricing;