/* ═══════════════════════════════════════════════════════════════════
   Mid sections: PainPoints · Imagine · Features  (Poligus)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ PAIN ═════════════════════════════════════════════════════════ */
const PainPoints = () =>
  <section style={{ padding: "120px 5%", position: "relative", overflow: "hidden",
    background: "linear-gradient(180deg, #050810 0%, #0a0612 100%)" }}>
    <div style={{ maxWidth: 1000, margin: "0 auto", position: "relative", zIndex: 2 }}>
      <div style={{ textAlign: "center", marginBottom: 60 }}>
        <div className="tag-pill reveal" style={{ marginBottom: 22, display: "inline-flex",
          background: "rgba(255,120,120,0.08)", borderColor: "rgba(255,140,140,0.3)", color: "#ffb4b4" }}>
          <span></span>O · PROBLEMA · REAL
        </div>
        <h2 className="reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(30px, 4vw, 52px)", lineHeight: 1.08, letterSpacing: "-0.03em" }}>
          <span style={{ color: "var(--ink-0)" }}>O problema não é falta de clientes.</span><br />
          <span style={{ background: "linear-gradient(135deg,#FF8C8C,#FF5F57)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>É falta de resposta.</span>
        </h2>
        <p className="reveal" style={{ color: "var(--ink-2)", marginTop: 22, fontSize: 18 }}>{PAINS.intro}</p>
      </div>

      <div className="stagger pain-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16, marginBottom: 44 }}>
        {PAINS.items.map((t, i) => (
          <div key={i} className="reveal card-light card-warn" style={{
            display: "flex", alignItems: "center", gap: 14, padding: "20px 22px",
          }}>
            <span className="warn-badge" style={{ flexShrink: 0, width: 30, height: 30, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center",
              fontWeight: 700, fontSize: 15 }}>✕</span>
            <span style={{ fontSize: 16.5, color: "#3A1414", fontWeight: 600 }}>{t}</span>
          </div>
        ))}
      </div>
      <p className="reveal" style={{ textAlign: "center", color: "var(--ink-2)", fontSize: 17.5, maxWidth: 640, margin: "0 auto", lineHeight: 1.7 }}>{PAINS.outro}</p>
    </div>
  </section>;


/* ═══ IMAGINE ══════════════════════════════════════════════════════ */
const Imagine = () =>
  <section style={{ padding: "120px 5%", position: "relative", overflow: "hidden",
    background: "radial-gradient(ellipse at 50% 0%, #0a1838 0%, #050810 60%)" }}>
    <Aurora />
    <div style={{ maxWidth: 880, margin: "0 auto", position: "relative", zIndex: 2 }}>
      <div style={{ textAlign: "center", marginBottom: 50 }}>
        <div className="tag-pill reveal" style={{ marginBottom: 22, display: "inline-flex" }}><span></span>O · OUTRO · CENÁRIO</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)" }}>
          Imagine acordar amanhã <span style={{ background: "linear-gradient(135deg,#A8E4FF,#2B7BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>e descobrir que:</span>
        </h2>
      </div>

      <div className="stagger" style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 640, margin: "0 auto 40px" }}>
        {IMAGINE.items.map((t, i) => (
          <div key={i} className="reveal-left card-light" style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 24px" }}>
            <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
              background: "linear-gradient(135deg,#1FB47A,#0E8F5E)" }}>
              <Icon name="check" size={15} color="#fff" />
            </span>
            <span style={{ fontSize: 17, color: "#10233F", fontWeight: 600 }}>{t}</span>
          </div>
        ))}
      </div>
      <p className="reveal" style={{ textAlign: "center", fontFamily: "var(--font-display)", fontWeight: 600,
        fontSize: "clamp(22px, 2.4vw, 30px)", letterSpacing: "-0.02em",
        background: "linear-gradient(135deg,#A8E4FF,#7DD3FF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>
        {IMAGINE.outro}
      </p>
    </div>
  </section>;


/* ═══ FEATURES — O que a Poligus faz (light cards) ═════════════════ */
const Features = () =>
  <section id="recursos" style={{ padding: "130px 5%", position: "relative", overflow: "hidden",
    background: "linear-gradient(180deg, #050810 0%, #07091a 100%)" }}>
    <div style={{ position: "absolute", inset: 0, opacity: 0.5,
      backgroundImage: "linear-gradient(rgba(125,211,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,255,0.03) 1px, transparent 1px)",
      backgroundSize: "48px 48px", pointerEvents: "none" }} />
    <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative", zIndex: 2 }}>
      <div style={{ textAlign: "center", marginBottom: 64 }}>
        <div className="tag-pill reveal" style={{ marginBottom: 22, display: "inline-flex" }}><span></span>O · QUE · A · POLIGUS · FAZ</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)" }}>
          Um time inteiro de atendimento,<br />
          <span className="h-shine" style={{ background: "linear-gradient(135deg,#A8E4FF,#2B7BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>dentro do seu WhatsApp.</span>
        </h2>
      </div>

      <div className="stagger feature-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 22 }}>
        {FEATURES.map((f, i) => (
          <div key={i} className="reveal-scale card-light" style={{ padding: 28 }}>
            <span className="cl-icon" style={{ width: 50, height: 50, marginBottom: 18 }}>
              <Icon name={f.icon} size={24} />
            </span>
            <div className="cl-title" style={{ fontSize: 20, marginBottom: 9 }}>{f.title}</div>
            <div className="cl-desc" style={{ fontSize: 16, lineHeight: 1.6 }}>{f.desc}</div>
          </div>
        ))}
      </div>
    </div>
  </section>;


Object.assign(window, { PainPoints, Imagine, Features });
