/* global React */

/* === PLANS === */
const Plans = () => {
  const plans = [
    {
      name: "Vitrine",
      tag: "Pra começar",
      price: "797",
      priceSub: "ou 12x de R$ 78,12 no cartão",
      tagline: "Pra quem está começando agora e quer um site simples e funcional.",
      color: "#7B2DD6",
      featured: false,
      features: [
        "Site WordPress profissional",
        "60 produtos do seu nicho",
        "Galeria de produtos profissional",
        "Header com menu personalizado",
        "Painel simplificado (modo cliente)",
        "Vídeo-tutorial de uso",
        "Suporte técnico de 15 dias",
      ],
    },
    {
      name: "Loja Completa",
      tag: "Pra escalar",
      price: "1.497",
      priceSub: "ou 12x de R$ 146,72 no cartão",
      tagline: "Pra quem quer crescer no Google com blog e SEO trabalhando a seu favor.",
      color: "#FF6B57",
      featured: true,
      features: [
        "Tudo do Vitrine, mais:",
        "120 produtos (o dobro)",
        "3 hero banners rotativos",
        "5 banners de categoria",
        "15 posts de blog otimizados pra SEO",
        "Categorias organizadas",
        "Página de Ofertas em destaque",
      ],
    },
  ];

  return (
    <section className="bg-purple-deep section-pad" id="planos" style={{ overflow: "hidden", position: "relative" }}>
      <div className="blob" style={{ width: 500, height: 500, background: "#FF6B57", top: "20%", right: -200, opacity: 0.2 }} />
      <div className="blob" style={{ width: 400, height: 400, background: "#FFCB47", bottom: -100, left: -150, opacity: 0.18 }} />

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 64px" }}>
          <span className="pill pill-yellow" style={{ marginBottom: 18 }}>Planos UPCOM Afiliados</span>
          <h2 style={{ color: "white", marginBottom: 16 }}>
            Escolha o plano ideal <span style={{ color: "#FFCB47" }}>pro seu momento</span>
          </h2>
          <p style={{ fontSize: 18, color: "rgba(255,255,255,0.8)" }}>
            Pagamento único. Sem mensalidade. Você paga uma vez e o site é seu.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 24,
          alignItems: "stretch",
          maxWidth: 840,
          margin: "0 auto",
        }} className="plans-grid">
          {plans.map((p) => (
            <div key={p.name} style={{
              background: p.featured ? "white" : "rgba(255,255,255,0.06)",
              border: p.featured ? "none" : "1px solid rgba(255,255,255,0.15)",
              borderRadius: 28,
              padding: "40px 32px",
              color: p.featured ? "#1A0B33" : "white",
              position: "relative",
              transform: p.featured ? "scale(1.03)" : "none",
              boxShadow: p.featured ? "0 30px 80px -20px rgba(255, 107, 87, 0.6)" : "none",
              backdropFilter: p.featured ? "none" : "blur(8px)",
              display: "flex",
              flexDirection: "column",
            }}>
              {p.featured && (
                <div style={{
                  position: "absolute", top: -16, left: "50%", transform: "translateX(-50%)",
                  background: "#FF6B57", color: "white",
                  padding: "8px 18px", borderRadius: 999,
                  fontSize: 12, fontWeight: 800, letterSpacing: "0.06em", textTransform: "uppercase",
                  whiteSpace: "nowrap",
                }}>★ Mais procurado</div>
              )}

              <div style={{ marginBottom: 24 }}>
                <span style={{
                  display: "inline-block",
                  padding: "5px 12px",
                  borderRadius: 999,
                  background: p.featured ? "var(--purple-100)" : "rgba(255,255,255,0.12)",
                  color: p.featured ? "var(--purple-700)" : "white",
                  fontSize: 11, fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase",
                  marginBottom: 14,
                }}>{p.tag}</span>
                <h3 style={{ fontSize: 32, fontWeight: 900, color: p.featured ? "#1A0B33" : "white" }}>{p.name}</h3>
                <p style={{ fontSize: 14.5, marginTop: 10, opacity: p.featured ? 0.7 : 0.8, lineHeight: 1.45 }}>{p.tagline}</p>
              </div>

              <div style={{ marginBottom: 28 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                  <span style={{ fontSize: 18, fontWeight: 700, opacity: 0.7 }}>R$</span>
                  <span style={{ fontSize: 56, fontWeight: 900, letterSpacing: "-0.03em", lineHeight: 1 }}>{p.price}</span>
                </div>
                <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{p.priceSub}</div>
                <span style={{ fontSize: 13, opacity: 0.65 }}>pagamento único · sem mensalidade</span>
              </div>

              <div className="stack" style={{ gap: 12, marginBottom: 28, flex: 1 }}>
                {p.features.map((f, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14.5 }}>
                    <Check color={p.color} />
                    <span style={{ lineHeight: 1.4 }}>{f}</span>
                  </div>
                ))}
              </div>

              <a href="https://wa.me/5511999999999" className={p.featured ? "btn btn-primary btn-lg" : "btn btn-lg"} style={{
                width: "100%",
                ...(p.featured ? {} : {
                  background: "white",
                  color: "var(--purple-700)",
                }),
              }}>
                Quero o {p.name} <ArrowRight />
              </a>
            </div>
          ))}
        </div>

        <p style={{ textAlign: "center", color: "rgba(255,255,255,0.7)", marginTop: 32, fontSize: 14 }}>
          🛡️ Garantia técnica de 15 dias · Hospedagem contratada direto na Hostinger
        </p>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .plans-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .plans-grid > div { transform: none !important; }
        }
      `}</style>
    </section>
  );
};

/* === COMPARE === */
const Compare = () => {
  const rows = [
    { feat: "Aprender WordPress", others: "20–40h de YouTube", upcom: "0h" },
    { feat: "Configurar tema e plugins", others: "10–15h", upcom: "0h" },
    { feat: "Encontrar produtos com link de afiliado", others: "25–30h", upcom: "0h" },
    { feat: "Escrever posts de blog", others: "15–20h ou R$ 750+", upcom: "0h" },
    { feat: "Criar banners e visual", others: "R$ 300–800 ou 10h no Canva", upcom: "0h" },
    { feat: "Painel profissional (WP escondido)", others: "Você nem sabe que dá pra fazer", upcom: true },
    { feat: "Tempo total", others: "80–100 horas + dor de cabeça", upcom: "3 dias úteis" },
    { feat: "Custo total", others: "R$ 1.050 a R$ 3.050+", upcom: "A partir de R$ 797" },
  ];

  return (
    <section className="bg-white-soft section-pad-sm">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <span className="eyebrow">Compare</span>
          <h2 style={{ marginTop: 14, marginBottom: 12 }}>
            Fazer sozinho <span className="text-coral">vs</span> contratar com a UPCOM
          </h2>
        </div>

        <div style={{
          background: "white",
          borderRadius: 24,
          overflow: "hidden",
          boxShadow: "var(--sh-card)",
          border: "1px solid var(--purple-100)",
          maxWidth: 920,
          margin: "0 auto",
        }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", background: "var(--purple-700)", color: "white", padding: "20px 28px" }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.05em", textTransform: "uppercase", opacity: 0.8 }}>Item</div>
            <div style={{ textAlign: "center", fontSize: 15, fontWeight: 800, opacity: 0.8 }}>Você sozinho</div>
            <div style={{ textAlign: "center", fontSize: 18, fontWeight: 900 }}>Com a UPCOM</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "1.4fr 1fr 1fr",
              padding: "18px 28px",
              borderBottom: i < rows.length - 1 ? "1px solid var(--purple-100)" : "none",
              alignItems: "center",
            }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--ink-900)" }}>{r.feat}</div>
              <div style={{ display: "flex", justifyContent: "center" }}>
                <span style={{ fontWeight: 700, color: "var(--ink-500)", fontSize: 13, textAlign: "center" }}>{r.others}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "center" }}>
                {r.upcom === true
                  ? <Check />
                  : <span style={{ fontWeight: 800, color: "var(--coral-500)", fontSize: 14 }}>{r.upcom}</span>
                }
              </div>
            </div>
          ))}
        </div>

        <p style={{ textAlign: "center", marginTop: 28, fontSize: 16, color: "var(--ink-500)", maxWidth: 640, margin: "28px auto 0", lineHeight: 1.6 }}>
          Você economiza tempo, dinheiro e estresse — e ainda recebe um site melhor do que conseguiria fazer sozinho.
        </p>
      </div>
    </section>
  );
};

window.Plans = Plans;
window.Compare = Compare;