/* global React, Reveal */

const FinalCTA = () => {
  return (
    <section
      id="signup"
      data-screen-label="09 Final CTA"
      className="theme-dark"
      style={{
        background: "var(--black)",
        color: "var(--white)",
        padding: "clamp(96px, 12vw, 160px) 24px",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Faint dotted-line motif */}
      <div aria-hidden="true" style={{
        position: "absolute",
        left: "50%",
        top: "12%",
        transform: "translateX(-50%)",
        width: 260, height: 4,
        backgroundImage: "radial-gradient(circle, var(--brand-lime) 1.6px, transparent 2px)",
        backgroundSize: "14px 4px",
        opacity: 0.7,
      }} />

      <div style={{
        maxWidth: 980, margin: "0 auto", textAlign: "center", position: "relative",
      }}>
        <Reveal>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 900,
            fontSize: "clamp(44px, 7vw, 96px)",
            lineHeight: 0.95, letterSpacing: "-0.03em",
            textTransform: "uppercase", margin: 0,
            color: "var(--white)",
            textWrap: "balance",
          }}>
            Don't figure it out <span style={{ color: "var(--brand-lime)" }}>alone.</span>
          </h2>
          <p style={{
            marginTop: 28,
            fontFamily: "var(--font-body)",
            fontSize: "clamp(17px, 1.5vw, 21px)",
            lineHeight: 1.5,
            color: "#C8C8C8",
            maxWidth: 640, marginInline: "auto",
          }}>
            Start your free personalized timeline — it takes 2 minutes.
          </p>

          <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
            <a href="https://app.myhstimeline.com/register" className="btn-primary" style={{
              padding: "20px 36px", fontSize: 18,
            }}>
              Start your timeline <span className="arrow">→</span>
            </a>
          </div>

          <div style={{
            marginTop: 24,
            fontFamily: "var(--font-body)", fontSize: 13,
            color: "var(--ink-400)",
            display: "inline-flex", alignItems: "center", gap: 12, flexWrap: "wrap",
            justifyContent: "center",
          }}>
            <span>Free forever</span>
            <span className="dots"><span/><span/><span/></span>
            <span>No data sold</span>
            <span className="dots"><span/><span/><span/></span>
            <span>Built by students, for students</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

window.FinalCTA = FinalCTA;