/* global React, CityBackdrop */
const { useEffect, useRef, useState } = React;

/* ============================================================================
   Closer — the tagline moment (locked verbatim) and footer.

   Layout:
   1. Massive tagline ("927 DEVELOPMENT. FOR OWNERS BUILDING THE REAL THING.")
      composited over the closer JPEG with parallax. Below it, a single huge
      DISCORD button with magnetic snap.
   2. Footer with logo, columns, and a 927-mark that bleeds off the bottom.
   ============================================================================ */

function Closer() {
  return (
    <React.Fragment>
      <CTAPanel />
      <Footer />
    </React.Fragment>
  );
}

function CTAPanel() {
  const ref = useRef(null);
  const [py, setPy] = useState(0);
  useEffect(() => {
    const el = ref.current;
    const onScroll = () => {
      if (!el) return;
      const r = el.getBoundingClientRect();
      const p = Math.max(0, Math.min(1, (window.innerHeight - r.top) / (window.innerHeight + r.height)));
      setPy(p);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section
      id="contact"
      ref={ref}
      data-screen-label="08 CTA"
      style={{
        position: "relative",
        minHeight: "100vh",
        padding: "10rem clamp(2rem, 6vw, 6rem)",
        background: "var(--color-base)",
        overflow: "hidden",
        display: "flex", flexDirection: "column", justifyContent: "center",
      }}
    >
      {/* Procedural cinematic backdrop */}
      <div style={{
        position: "absolute", inset: 0,
        transform: `translateY(${(py - 0.5) * 60}px) scale(1.05)`,
        transition: "transform 0.12s linear",
        opacity: 0.85,
      }}>
        <CityBackdrop parallax={{ mx: 0, my: 0, y: py }} intensity={1.1} />
      </div>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: `
          linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.30) 30%, rgba(10,10,10,0.95) 100%),
          radial-gradient(60% 60% at 30% 50%, rgba(200,204,210,0.14), transparent 65%),
          radial-gradient(50% 50% at 80% 70%, rgba(200,48,47,0.16), transparent 65%)
        `,
      }}></div>

      <div style={{ position: "relative", zIndex: 2 }}>
        {/* Eyebrow */}
        <div className="reveal-up" style={{
          fontFamily: "var(--font-body)", fontSize: 10,
          letterSpacing: "0.4em", textTransform: "uppercase",
          color: "var(--color-accent)",
          display: "flex", alignItems: "center", gap: 12, marginBottom: "2rem",
        }}>
          <span style={{ width: 36, height: 1, background: "var(--color-accent)" }}></span>
          [08] // FIRST CALL IS FREE
        </div>

        {/* The tagline, locked verbatim */}
        <h2 className="reveal-up" style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(2.6rem, 9vw, 9rem)",
          letterSpacing: "-0.04em", lineHeight: 0.88,
          textTransform: "uppercase",
          color: "var(--color-ink)",
          margin: 0,
          maxWidth: "16ch",
        }}>
          927 Development.
          <br />
          <span style={{ color: "var(--color-accent-warm)" }}>For owners</span>
          <br />
          <span className="outline-text">building</span> the
          <br />
          real thing.
        </h2>

        {/* Locked CTA copy */}
        <p className="reveal-up" style={{
          fontFamily: "var(--font-body)",
          fontSize: "clamp(0.95rem, 1.3vw, 1.15rem)",
          lineHeight: 1.6,
          color: "var(--color-ink-muted)",
          margin: "3rem 0 0",
          maxWidth: "44ch",
        }}>
          First call is free. Bring whatever's been bothering you lately
          and we'll tell you straight if it's a 30-minute fix or a real project.
        </p>

        {/* The big magnetic Discord button */}
        <div className="reveal-up" style={{ marginTop: "2.5rem" }}>
          <BigDiscordCTA />
        </div>
      </div>
    </section>
  );
}

function BigDiscordCTA() {
  const ref = useRef(null);
  const [t, setT] = useState({ x: 0, y: 0 });
  const [hover, setHover] = useState(false);

  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    setT({ x: (e.clientX - cx) * 0.18, y: (e.clientY - cy) * 0.3 });
  };

  return (
    <a
      ref={ref}
      href="https://discord.gg/hRZeHwWyHG"
      target="_blank"
      rel="noreferrer"
      data-cursor="OPEN DISCORD"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setT({ x: 0, y: 0 }); }}
      onMouseMove={onMove}
      style={{
        display: "inline-flex", alignItems: "center", gap: 24,
        padding: "26px 34px",
        background: hover ? "var(--color-accent-warm)" : "rgba(200,204,210,0.10)",
        border: `1px solid ${hover ? "var(--color-accent-warm)" : "var(--color-accent)"}`,
        color: hover ? "var(--color-base)" : "var(--color-ink)",
        textDecoration: "none",
        transform: `translate(${t.x}px, ${t.y}px)`,
        transition: "transform 0.35s var(--ease-out), background 0.25s ease, border-color 0.25s ease, color 0.25s ease",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Animated background sweep */}
      <span aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%)",
        transform: `translateX(${hover ? "150%" : "-150%"})`,
        transition: "transform 1.2s var(--ease-out)",
      }}></span>

      <span style={{
        fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: "clamp(1.4rem, 3vw, 2.4rem)",
        letterSpacing: "-0.02em", textTransform: "uppercase",
      }}>
        Open Discord
      </span>
      <span style={{
        width: 1, height: 32,
        background: hover ? "rgba(10,10,10,0.5)" : "rgba(255,255,255,0.18)",
      }}></span>
      <span style={{
        fontFamily: "var(--font-body)", fontSize: 11,
        letterSpacing: "0.4em", textTransform: "uppercase",
      }}>
        START A CONVERSATION →
      </span>
    </a>
  );
}

/* ----- FOOTER ------------------------------------------------------------- */
function Footer() {
  return (
    <footer style={{
      position: "relative",
      padding: "8rem clamp(2rem, 6vw, 6rem) 4rem",
      background: "var(--color-base)",
      borderTop: "1px solid rgba(255,255,255,0.08)",
      overflow: "hidden",
    }}>
      {/* Massive 927 watermark bleeding off the bottom */}
      <div aria-hidden="true" style={{
        position: "absolute",
        left: "50%", bottom: "-15vw",
        transform: "translateX(-50%)",
        width: "min(140vw, 1800px)",
        opacity: 0.10,
        pointerEvents: "none",
      }}>
        <img
          src="assets/927-logo-white.png"
          alt=""
          style={{ width: "100%", height: "auto" }}
        />
      </div>

      <div style={{ position: "relative", zIndex: 1 }}>
        {/* Top row */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-start",
          gap: "3rem", flexWrap: "wrap",
        }}>
          {/* Brand */}
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <img src="assets/927-logo-white.png" alt="927" style={{ width: 56, height: "auto" }} />
            <div style={{
              fontFamily: "var(--font-body)", fontSize: 10,
              letterSpacing: "0.4em", textTransform: "uppercase",
              color: "var(--color-ink-muted)", lineHeight: 1.8,
            }}>
              927 DEVELOPMENT<br />
              <span style={{ color: "var(--color-accent)" }}>EST. 2024</span>
            </div>
          </div>

          {/* Discord */}
          <a
            href="https://discord.gg/hRZeHwWyHG"
            target="_blank"
            rel="noreferrer"
            data-cursor="JOIN"
            style={{
              fontFamily: "var(--font-body)", fontSize: 11,
              letterSpacing: "0.3em", textTransform: "uppercase",
              color: "var(--color-ink)", textDecoration: "none",
              padding: "12px 20px",
              border: "1px solid var(--color-accent)",
              background: "rgba(200,204,210,0.10)",
              display: "inline-flex", alignItems: "center", gap: 10,
            }}
          >
            Open Discord <span style={{ opacity: 0.7 }}>↗</span>
          </a>
        </div>

        {/* Tagline strip */}
        <div style={{
          marginTop: "5rem",
          paddingTop: "2rem",
          borderTop: "1px solid rgba(255,255,255,0.08)",
        }}>
          <div style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(1.4rem, 2.8vw, 2.4rem)",
            letterSpacing: "-0.04em", lineHeight: 1.0,
            textTransform: "uppercase",
            color: "var(--color-ink)",
          }}>
            927 Development.{" "}
            <span style={{ color: "var(--color-accent-warm)" }}>For owners building the real thing.</span>
          </div>
        </div>

        {/* Legal row */}
        <div style={{
          marginTop: "3rem",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: "var(--font-body)", fontSize: 10,
          letterSpacing: "0.35em", textTransform: "uppercase",
          color: "var(--color-ink-muted)",
          flexWrap: "wrap", gap: "1rem",
        }}>
          <div>© 2026 // 927 DEVELOPMENT</div>
          <div>FIVEM // GTA V MULTIPLAYER</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 560px) {
          footer h2 { font-size: 1.4rem; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Closer });