/* ═══════════════════════════════════════════════════════════════════
   Plans · FAQ · CTAFinal · Footer · FloatingWhatsApp  (Poligus)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ PLANS ════════════════════════════════════════════════════════ */
const Plans = () =>
  <section id="planos" style={{ padding: "130px 5%", position: "relative", overflow: "hidden",
    background: "radial-gradient(ellipse at 50% 0%, #0a1230 0%, #050810 60%)" }}>
    <Aurora />
    <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative", zIndex: 2 }}>
      <div style={{ textAlign: "center", marginBottom: 56, maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
        <div className="tag-pill reveal" style={{ marginBottom: 22, display: "inline-flex" }}><span></span>PLANOS</div>
        <h2 className="reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(30px, 4vw, 52px)", lineHeight: 1.08, letterSpacing: "-0.03em", color: "var(--ink-0)", marginBottom: 20 }}>
          {PLANS_INTRO.title}
        </h2>
        <p className="reveal" style={{ color: "var(--ink-2)", fontSize: 17.5, lineHeight: 1.7 }}>{PLANS_INTRO.sub}</p>
      </div>

      <div className="stagger plans-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, alignItems: "stretch" }}>
        {PLANS.map((p, i) => (
          <div key={i} className={"reveal plan-light" + (p.featured ? " featured" : "")} style={{ padding: 28, display: "flex", flexDirection: "column", position: "relative" }}
            onMouseMove={e => {
              const el = e.currentTarget, r = el.getBoundingClientRect();
              const mx = (e.clientX - r.left) / r.width, my = (e.clientY - r.top) / r.height;
              el.style.setProperty("--mx", (mx * 100) + "%");
              el.style.setProperty("--my", (my * 100) + "%");
              el.style.setProperty("--rx", ((mx - 0.5) * 6) + "deg");
              el.style.setProperty("--ry", (-(my - 0.5) * 6) + "deg");
            }}
            onMouseLeave={e => { e.currentTarget.style.setProperty("--rx", "0deg"); e.currentTarget.style.setProperty("--ry", "0deg"); }}>
            {p.badge && (
              <div style={{ position: "absolute", top: -13, left: "50%", transform: "translateX(-50%)", whiteSpace: "nowrap",
                padding: "6px 16px", borderRadius: 50, fontSize: 13, fontWeight: 700, fontFamily: "var(--font-mono)", letterSpacing: 0.5,
                background: p.featured ? "linear-gradient(135deg,#2B7BFF,#0E4FCC)" : "linear-gradient(135deg,#8C5BFF,#5B3BCC)",
                color: "#fff", boxShadow: "0 8px 22px rgba(43,123,255,0.45)" }}>{p.badge}</div>
            )}
            <div className="acc-strong" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, marginTop: p.badge ? 10 : 0 }}>{p.name}</div>
            <div style={{ fontSize: 14.5, lineHeight: 1.5, marginTop: 8, minHeight: 44 }}>{p.tagline}</div>
            <div style={{ display: "flex", alignItems: "flex-end", gap: 4, margin: "18px 0 6px" }}>
              <span className="acc-strong" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 40, letterSpacing: "-0.02em" }}>{p.price}</span>
              <span style={{ fontSize: 16, marginBottom: 7 }}>{p.period}</span>
            </div>
            {p.plus && <div className="acc-cyan" style={{ fontSize: 14, fontWeight: 700, margin: "10px 0 4px", fontFamily: "var(--font-mono)", letterSpacing: 0.3 }}>{p.plus}</div>}
            <div style={{ display: "flex", flexDirection: "column", gap: 10, margin: "16px 0 22px", flex: 1 }}>
              {p.items.map((it, k) => (
                <div key={k} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 15, lineHeight: 1.4 }}>
                  <span style={{ flexShrink: 0, marginTop: 1, width: 20, height: 20, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                    background: "rgba(125,211,255,0.16)" }}><Icon name="check" size={12} color="#A8E4FF" /></span>
                  {it}
                </div>
              ))}
            </div>
            <div style={{ fontSize: 13.5, fontStyle: "italic", marginBottom: 18, lineHeight: 1.5, opacity: 0.7 }}>{p.ideal}</div>
            <a href={p.link} onClick={openLink(p.link)} target="_blank" rel="noopener noreferrer"
              className="btn-primary" style={{ width: "100%", justifyContent: "center", padding: "14px 18px", fontSize: 16,
                background: p.featured ? "linear-gradient(135deg,#2B7BFF,#0E4FCC)" : "linear-gradient(135deg,#1857C9,#0E4FCC)" }}>
              {p.cta}
            </a>
          </div>
        ))}
      </div>

      {/* todos os planos incluem */}
      <div className="reveal panel-light" style={{ marginTop: 36, padding: "30px 32px" }}>
        <div className="acc-cyan" style={{ fontFamily: "var(--font-mono)", fontSize: 14, letterSpacing: 1.5, textTransform: "uppercase", marginBottom: 18, textAlign: "center", fontWeight: 700 }}>Todos os planos incluem</div>
        <div className="included-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "12px 24px" }}>
          {PLANS_INCLUDED.map((t, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15.5, color: "#1A2C4A", fontWeight: 600 }}>
              <span style={{ flexShrink: 0, width: 20, height: 20, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                background: "linear-gradient(135deg,#1FB47A,#0E8F5E)" }}><Icon name="check" size={11} color="#fff" /></span>{t}
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>;


/* ═══ FAQ ══════════════════════════════════════════════════════════ */
const FAQ = ({ openFaq, setOpenFaq }) =>
  <section id="faq" style={{ padding: "120px 5%", position: "relative", overflow: "hidden",
    background: "linear-gradient(180deg, #050810 0%, #07091a 100%)" }}>
    <div style={{ maxWidth: 820, margin: "0 auto", position: "relative", zIndex: 2 }}>
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <div className="tag-pill reveal" style={{ marginBottom: 22, display: "inline-flex" }}><span></span>PERGUNTAS · FREQUENTES</div>
        <h2 className="reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(28px, 3.6vw, 48px)", lineHeight: 1.1, letterSpacing: "-0.03em", color: "var(--ink-0)" }}>
          Ainda com <span style={{ background: "linear-gradient(135deg,#A8E4FF,#2B7BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>dúvidas?</span>
        </h2>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {FAQS.map((f, i) => {
          const open = openFaq === i;
          return (
            <div key={i} className="reveal faq-light" style={{ overflow: "hidden", padding: 0 }}>
              <button className="faq-question acc-strong" onClick={() => setOpenFaq(open ? null : i)} style={{
                width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
                padding: "22px 24px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left",
                fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17.5, letterSpacing: "-0.01em",
              }}>
                {f.q}
                <span className="acc-cyan" style={{ flexShrink: 0, transition: "transform .3s ease", transform: open ? "rotate(45deg)" : "none" }}>
                  <Icon name="plus" size={20} />
                </span>
              </button>
              <div style={{ maxHeight: open ? 400 : 0, overflow: "hidden", transition: "max-height .4s ease" }}>
                <div style={{ padding: "0 24px 24px", fontSize: 16, color: "#33445F", lineHeight: 1.7 }}>{f.a}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </section>;


/* ═══ CTA FINAL ════════════════════════════════════════════════════ */
const CTAFinal = () =>
  <section id="contato" style={{ padding: "130px 5%", position: "relative", overflow: "hidden",
    background: "radial-gradient(ellipse at 50% 50%, #0e1c44 0%, #050810 70%)" }}>
    <Aurora />
    <div style={{ maxWidth: 800, margin: "0 auto", textAlign: "center", position: "relative", zIndex: 2 }}>
      <div className="reveal" style={{ fontFamily: "var(--font-mono)", fontSize: 15, letterSpacing: 2, textTransform: "uppercase", color: "var(--cyan)", marginBottom: 28 }}>{CTA_FINAL.pre}</div>
      <h2 className="reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 600,
        fontSize: "clamp(30px, 4.4vw, 56px)", lineHeight: 1.06, letterSpacing: "-0.03em", color: "var(--ink-0)", marginBottom: 18 }}>
        {CTA_FINAL.lines[0]}<br />{CTA_FINAL.lines[1]}
      </h2>
      <p className="reveal" style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2.4vw, 30px)", fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 40, lineHeight: 1.3 }}>
        <span style={{ color: "var(--ink-3)" }}>{CTA_FINAL.contrast[0]}</span><br />
        <span className="h-shine" style={{ background: "linear-gradient(135deg,#A8E4FF,#2B7BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>{CTA_FINAL.contrast[1]}</span>
      </p>
      <div className="reveal" style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
        <a href={SIGNUP_URL} onClick={openLink(SIGNUP_URL)} target="_blank" rel="noopener noreferrer" className="btn-whatsapp" style={{ background: "linear-gradient(135deg, #2B7BFF 0%, #0E4FCC 100%)", borderColor: "rgba(125,211,255,0.5)" }}>
          <Icon name="bolt" size={18} /> Testar 7 dias grátis
        </a>
        <a href={WA_URL} onClick={openLink(WA_URL)} target="_blank" rel="noopener noreferrer" className="btn-outline">
          <WhatsAppIcon size={16} /> Falar no WhatsApp
        </a>
      </div>
    </div>
  </section>;


/* ═══ FOOTER ═══════════════════════════════════════════════════════ */
const Footer = () =>
  <footer style={{ padding: "70px 5% 40px", background: "#04060e", borderTop: "1px solid var(--line)", position: "relative" }}>
    <div style={{ maxWidth: 1180, margin: "0 auto" }}>
      <div className="footer-top" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 40, flexWrap: "wrap", marginBottom: 44 }}>
        <div style={{ maxWidth: 340 }}>
          <PoligusLogo height={42} />
          <p style={{ color: "var(--ink-3)", fontSize: 15.5, lineHeight: 1.7, marginTop: 18 }}>
            A Poligus transforma seu WhatsApp em um funcionário digital que atende, faz follow-up e organiza sua operação 24h por dia.
          </p>
        </div>
        <div style={{ display: "flex", gap: 56, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 13.5, letterSpacing: 1.5, textTransform: "uppercase", color: "var(--cyan-2)", marginBottom: 16 }}>Navegação</div>
            {[["Recursos", "#recursos"], ["Planos", "#planos"], ["FAQ", "#faq"], ["Contato", "#contato"]].map(([l, h]) => (
              <a key={l} href={h} className="footer-link" style={{ display: "block", color: "var(--ink-3)", textDecoration: "none", fontSize: 15.5, marginBottom: 11 }}
                onMouseEnter={e => e.currentTarget.style.color = "var(--cyan)"}
                onMouseLeave={e => e.currentTarget.style.color = "var(--ink-3)"}
                onTouchStart={e => e.currentTarget.style.color = "var(--cyan)"}
                onTouchEnd={e => e.currentTarget.style.color = "var(--ink-3)"}>{l}</a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 13.5, letterSpacing: 1.5, textTransform: "uppercase", color: "var(--cyan-2)", marginBottom: 16 }}>Contato</div>
            <a href={WA_URL} onClick={openLink(WA_URL)} target="_blank" rel="noopener noreferrer" className="footer-link" style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink-3)", textDecoration: "none", fontSize: 15.5, marginBottom: 11 }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--cyan)"}
              onMouseLeave={e => e.currentTarget.style.color = "var(--ink-3)"}
              onTouchStart={e => e.currentTarget.style.color = "var(--cyan)"}
              onTouchEnd={e => e.currentTarget.style.color = "var(--ink-3)"}>
              <WhatsAppIcon size={15} /> WhatsApp
            </a>
          </div>
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--line)", paddingTop: 26, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
        fontSize: 14.5, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
        <span>© {new Date().getFullYear()} Poligus · IA para WhatsApp</span>
        <span>Feito para vender enquanto você dorme.</span>
      </div>
    </div>
  </footer>;


/* ═══ FLOATING WHATSAPP ════════════════════════════════════════════ */
const FloatingWhatsApp = () =>
  <a href={WA_URL} onClick={openLink(WA_URL)} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" style={{
    position: "fixed", bottom: 26, right: 26, zIndex: 90, width: 62, height: 62, borderRadius: "50%",
    background: "linear-gradient(135deg, #25D366, #128C7E)", display: "flex", alignItems: "center", justifyContent: "center",
    color: "#fff", textDecoration: "none", cursor: "pointer",
    boxShadow: "0 12px 36px rgba(37,211,102,0.5), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2)",
    transition: "transform .3s ease, box-shadow .3s ease",
  }}
    onMouseEnter={e => { e.currentTarget.style.transform = "scale(1.1) translateY(-2px)"; e.currentTarget.style.boxShadow = "0 18px 48px rgba(37,211,102,0.65), 0 0 0 8px rgba(37,211,102,0.12)"; }}
    onMouseLeave={e => { e.currentTarget.style.transform = "scale(1)"; e.currentTarget.style.boxShadow = "0 12px 36px rgba(37,211,102,0.5), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2)"; }}
    onTouchStart={e => { e.currentTarget.style.transform = "scale(1.1) translateY(-2px)"; e.currentTarget.style.boxShadow = "0 18px 48px rgba(37,211,102,0.65), 0 0 0 8px rgba(37,211,102,0.12)"; }}
    onTouchEnd={e => { e.currentTarget.style.transform = "scale(1)"; e.currentTarget.style.boxShadow = "0 12px 36px rgba(37,211,102,0.5), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.2)"; }}>
    <WhatsAppIcon size={30} />
  </a>;


Object.assign(window, { Plans, FAQ, CTAFinal, Footer, FloatingWhatsApp });