// CLOSING CTA — confident, warm, no fluff. Plus a small principles strip.

const PRINCIPLES = [
  "Ship working things, not slide decks.",
  "Fixed scope. No hourly games.",
  "Token math, written down, every month.",
  "We sit next to your team, not above them.",
  "If the agent embarrasses you, we built it wrong.",
];

function Closing() {
  return (
    <>
      {/* Principles marquee — warm, human, low-jargon */}
      <section style={{
        padding: "32px 0",
        background: "var(--bg)",
        borderTop: "1px solid var(--rule)",
        borderBottom: "1px solid var(--rule)",
      }}>
        <Marquee speed={50}>
          {PRINCIPLES.concat(PRINCIPLES).map((p, i) => (
            <span key={i} className="serif italic" style={{
              fontSize: "clamp(28px, 4vw, 56px)",
              lineHeight: 1.1,
              color: "var(--ink-2)",
              display: "inline-flex",
              alignItems: "center",
              gap: 32,
            }}>
              {p}
              <span style={{
                width: 8,
                height: 8,
                background: "var(--accent)",
                borderRadius: 1,
                display: "inline-block",
                flexShrink: 0,
              }}></span>
            </span>
          ))}
        </Marquee>
      </section>

      {/* Closing block — the ask */}
      <section className="section" id="contact" style={{ paddingBottom: 48 }}>
        <div className="shell">
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 1fr",
            gap: "clamp(40px, 6vw, 96px)",
            alignItems: "end",
          }} className="closing-grid">
            <div>
              <p className="eyebrow" style={{ marginBottom: 24 }}>§ 07 · LET'S TALK</p>
              <h2 className="display-xl serif" style={{ margin: 0, textWrap: "balance" }}>
                If you've read this far, you already know.
              </h2>
              <p className="lead" style={{ marginTop: 28, maxWidth: "52ch" }}>
                Twenty minutes. We listen, we ask three pointed questions, and
                you leave with an honest answer about whether AI agents are right for you right now —
                or whether you should fix something else first.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
                <a href="contact.html#book" className="btn btn-heat">
                  Book a 20-min intro <span className="arr">→</span>
                </a>
                <a href="mailto:hello@supportgenie.us" className="btn btn-ghost">
                  hello@supportgenie.us
                </a>
              </div>
            </div>

            <aside style={{
              background: "var(--paper)",
              border: "1px solid var(--rule)",
              padding: 32,
              borderRadius: 6,
            }}>
              <p className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-soft)", margin: "0 0 18px 0" }}>
                What good fit looks like
              </p>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 14 }}>
                {[
                  "You're on Salesforce (Sales Cloud, Service Cloud, or both).",
                  "You have a clear bottleneck — too few reps, too many tickets, too long a call queue.",
                  "Someone on your team can give us four hours a week for three weeks.",
                  "You'd rather ship one good agent than plan ten.",
                ].map((t, i) => (
                  <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={{
                      flexShrink: 0,
                      width: 18,
                      height: 18,
                      borderRadius: "50%",
                      background: "var(--accent)",
                      color: "var(--ink)",
                      display: "grid",
                      placeItems: "center",
                      fontFamily: "var(--font-mono)",
                      fontSize: 11,
                      fontWeight: 600,
                      marginTop: 2,
                    }}>✓</span>
                    <span className="body-sm" style={{ color: "var(--ink-2)" }}>{t}</span>
                  </li>
                ))}
              </ul>
            </aside>
          </div>
        </div>

        <style>{`
          @media (max-width: 980px) {
            .closing-grid { grid-template-columns: 1fr !important; align-items: start !important; }
          }
        `}</style>
      </section>
    </>
  );
}

Object.assign(window, { Closing });