/* ═══════════════════════════════════════════════════════════════════
   Bottom sections: HowItWorks · Segments · Results · Compare (Poligus)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ HOW IT WORKS ═════════════════════════════════════════════════ */
const HowItWorks = () =>
  <section id="como-funciona" style={{ padding: "130px 5%", position: "relative", overflow: "hidden",
    background: "radial-gradient(ellipse at 50% 0%, #0a1230 0%, #050810 60%)" }}>
    <Aurora />
    <div style={{ maxWidth: 1080, 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>COMO · FUNCIONA</div>
        <h2 className="reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(30px, 4vw, 50px)", lineHeight: 1.08, letterSpacing: "-0.03em", color: "var(--ink-0)" }}>
          Em 3 passos, sua operação <span style={{ background: "linear-gradient(135deg,#A8E4FF,#2B7BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>roda sozinha.</span>
        </h2>
      </div>

      <div className="stagger steps-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
        {STEPS.map((s, i) => (
          <div key={i} className={(i === 0 ? "reveal-left" : i === 2 ? "reveal-right" : "reveal") + " card-light"} style={{ padding: 32, textAlign: "left" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 40, lineHeight: 1,
                background: "linear-gradient(135deg,#2B7BFF,#8C5BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>{s.num}</span>
              <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg, rgba(43,123,255,0.4), transparent)" }} />
            </div>
            <div className="cl-title" style={{ fontSize: 21, marginBottom: 10 }}>{s.title}</div>
            <div className="cl-desc" style={{ fontSize: 16, lineHeight: 1.6 }}>{s.desc}</div>
          </div>
        ))}
      </div>
    </div>
  </section>;


/* ═══ SEGMENTS — Para quem é ═══════════════════════════════════════ */
const Segments = () =>
  <section style={{ padding: "120px 5%", position: "relative", overflow: "hidden",
    background: "linear-gradient(180deg, #050810 0%, #07091a 100%)" }}>
    <div style={{ maxWidth: 1080, 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>PARA · QUEM · É</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)" }}>
          Feito para quem vive <span style={{ background: "linear-gradient(135deg,#A8E4FF,#2B7BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>de atendimento.</span>
        </h2>
      </div>

      {(() => {
        const half = Math.ceil(SEGMENTS.length / 2);
        const rowA = SEGMENTS.slice(0, half);
        const rowB = SEGMENTS.slice(half).concat(SEGMENTS.slice(0, 1));
        const Chip = ({ s, k }) => (
          <div key={k} className="seg-chip" style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 22px" }}>
            <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center",
              background: "linear-gradient(135deg,#2B7BFF,#1857C9)", color: "#EAF4FF",
              boxShadow: "0 6px 16px rgba(43,123,255,0.4)" }}><Icon name="check" size={15} /></span>
            <span style={{ fontSize: 16, fontWeight: 600, color: "#0C1B3D", whiteSpace: "nowrap" }}>{s}</span>
          </div>
        );
        return (
          <div className="reveal">
            <div className="marquee"><div className="marquee__track ltr">
              {[...rowA, ...rowA].map((s, i) => <Chip key={"a" + i} s={s} k={"a" + i} />)}
            </div></div>
            <div className="marquee"><div className="marquee__track rtl">
              {[...rowB, ...rowB].map((s, i) => <Chip key={"b" + i} s={s} k={"b" + i} />)}
            </div></div>
          </div>
        );
      })()}
    </div>
  </section>;


/* ═══ RESULTS — antes / depois ═════════════════════════════════════ */
const Results = () =>
  <section style={{ padding: "120px 5%", position: "relative", overflow: "hidden",
    background: "radial-gradient(ellipse at 50% 100%, #0a1230 0%, #050810 60%)" }}>
    <div style={{ maxWidth: 1000, 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>RESULTADOS</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)" }}>
          O que muda quando a Poligus <span style={{ background: "linear-gradient(135deg,#A8E4FF,#2B7BFF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>entra na operação.</span>
        </h2>
      </div>

      <div className="results-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
        {/* ANTES */}
        <div className="reveal-left card-light card-warn" style={{ padding: 32 }}>
          <div className="acc-red" style={{ fontFamily: "var(--font-mono)", fontSize: 14, letterSpacing: 2, textTransform: "uppercase",
            marginBottom: 22, fontWeight: 700 }}>Antes</div>
          {RESULTS.before.map((t, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 0", borderBottom: i < RESULTS.before.length - 1 ? "1px solid var(--line)" : "none" }}>
              <span className="acc-red" style={{ fontSize: 16, fontWeight: 700 }}>✕</span>
              <span style={{ fontSize: 16.5, fontWeight: 600 }}>{t}</span>
            </div>
          ))}
        </div>
        {/* DEPOIS */}
        <div className="reveal card-light" style={{ padding: 32 }}>
          <div className="acc-cyan" style={{ fontFamily: "var(--font-mono)", fontSize: 14, letterSpacing: 2, textTransform: "uppercase",
            marginBottom: 22, fontWeight: 700 }}>Depois</div>
          {RESULTS.after.map((t, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 0", borderBottom: i < RESULTS.after.length - 1 ? "1px solid var(--line)" : "none" }}>
              <span style={{ flexShrink: 0, width: 24, height: 24, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                background: "linear-gradient(135deg,#2B7BFF,#1857C9)", color: "#fff" }}><Icon name="check" size={13} color="#fff" /></span>
              <span style={{ fontSize: 16.5, fontWeight: 600 }}>{t}</span>
            </div>
          ))}
        </div>
      </div>

      {/* COMPARATIVO */}
      <div className="reveal panel-light" style={{ marginTop: 28, overflow: "hidden", padding: 0 }}>
        <div className="compare-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
          borderBottom: "1px solid var(--line)", background: "rgba(43,123,255,0.06)" }}>
          <div className="acc-red" style={{ padding: "16px 24px", fontFamily: "var(--font-mono)", fontSize: 14, letterSpacing: 1.5, textTransform: "uppercase", fontWeight: 600 }}>Sem Poligus</div>
          <div className="acc-cyan" style={{ padding: "16px 24px", fontFamily: "var(--font-mono)", fontSize: 14, letterSpacing: 1.5, textTransform: "uppercase", fontWeight: 700, borderLeft: "1px solid var(--line)" }}>Com Poligus</div>
        </div>
        {COMPARE.map((row, i) => (
          <div key={i} className="compare-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
            borderBottom: i < COMPARE.length - 1 ? "1px solid var(--line)" : "none" }}>
            <div style={{ padding: "16px 24px", fontSize: 16 }}>{row[0]}</div>
            <div style={{ padding: "16px 24px", fontSize: 16, fontWeight: 600, borderLeft: "1px solid var(--line)",
              display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ flexShrink: 0, width: 20, height: 20, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                background: "linear-gradient(135deg,#2B7BFF,#1454C6)" }}><Icon name="check" size={11} color="#fff" /></span>{row[1]}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>;


Object.assign(window, { HowItWorks, Segments, Results });
