// FinalCTA V2 — Magnetic full-bleed with massive type
const { useState: useStateCTAV2, useRef: useRefCTAV2, useEffect: useEffectCTAV2 } = React;

const IG_URL_CTAV2 = "https://www.instagram.com/confirmari.ro/";

const FinalCTAV2 = () => {
  const btnRef = useRefCTAV2(null);
  const [pos, setPos] = useStateCTAV2({ x: 0, y: 0 });
  const [open, setOpen] = useStateCTAV2(false);
  const [copied, setCopied] = useStateCTAV2(false);
  const [isMobile, setIsMobile] = useStateCTAV2(false);

  useEffectCTAV2(() => {
    const mq = () => setIsMobile(window.innerWidth < 720);
    mq();
    window.addEventListener("resize", mq);
    return () => window.removeEventListener("resize", mq);
  }, []);

  useEffectCTAV2(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    // Lock scroll without letting the page jump to top: `body{overflow:hidden}`
    // propagates to the viewport per spec, which visually snaps scroll to 0
    // even though window.scrollY keeps its old value. Pin body in place instead.
    const scrollY = window.scrollY;
    document.body.style.position = "fixed";
    document.body.style.top = `-${scrollY}px`;
    document.body.style.left = "0";
    document.body.style.right = "0";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.position = "";
      document.body.style.top = "";
      document.body.style.left = "";
      document.body.style.right = "";
      window.scrollTo(0, scrollY);
    };
  }, [open]);

  const copyCode = () => {
    const code = "Confirmari2026";
    const showCopied = () => {
      setCopied(true);
      setTimeout(() => setCopied(false), 5000);
    };
    // navigator.clipboard needs a secure context (HTTPS or localhost) — it's
    // undefined when testing over plain HTTP on a LAN IP, so fall back to the
    // legacy execCommand technique, which works everywhere.
    const fallbackCopy = () => {
      const ta = document.createElement("textarea");
      ta.value = code;
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      try {
        document.execCommand("copy");
        showCopied();
      } catch (_) {}
      document.body.removeChild(ta);
    };
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(code).then(showCopied).catch(fallbackCopy);
    } else {
      fallbackCopy();
    }
  };

  const onMove = (e) => {
    const r = btnRef.current?.getBoundingClientRect();
    if (!r) return;
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    const dx = (e.clientX - cx) * 0.25;
    const dy = (e.clientY - cy) * 0.25;
    setPos({ x: dx, y: dy });
  };
  const onLeave = () => setPos({ x: 0, y: 0 });

  return (
    <div className="ev-stage" style={{
      width: "100%", height: "100%", padding: "60px 80px",
      background: "radial-gradient(ellipse at center, rgba(9,169,85,0.20), transparent 60%), var(--bg-canvas)",
      display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center",
      position: "relative", overflow: "hidden",
    }}>
      {/* Big background type */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: "min(13vw, 165px)", fontWeight: 900, letterSpacing: "-0.06em",
        color: "transparent",
        WebkitTextStroke: "1px rgba(9,169,85,0.18)",
        userSelect: "none", pointerEvents: "none", zIndex: 0,
        whiteSpace: "nowrap",
      }}>Confirmări.ro</div>

      <div style={{ position: "relative", zIndex: 1, maxWidth: 920 }}>
        <h2 style={{
          fontSize: "clamp(56px, 9vw, 120px)",
          fontWeight: 900, color: "#fff",
          letterSpacing: "-0.045em", lineHeight: 0.95,
          margin: 0,
        }}>
          Lasă-i pe<br />
          <span className="ev-text-shimmer">agenți</span> noștri să muncească.
        </h2>

        <p style={{ fontSize: 20, color: "var(--fg-2)", lineHeight: 1.5, margin: "28px auto 40px", maxWidth: 600 }}>
          Tu te ocupi de creștere. Iar de maximizarea comenzilor se ocupă Confirmări.ro
        </p>

        <div onMouseMove={onMove} onMouseLeave={onLeave} style={{ display: "inline-block" }}>
          <window.HoverBorderBtn
            onClick={() => setOpen(true)}
            btnStyle={{
              fontSize: 18, padding: "20px 36px", borderRadius: 16,
              transform: `translate(${pos.x}px, ${pos.y}px)`,
              transition: pos.x === 0 ? "transform .35s cubic-bezier(.2,.7,.2,1)" : "transform .1s linear",
              boxShadow: "var(--glow-purple), 0 16px 40px rgba(9,169,85,0.55), inset 0 1px 0 rgba(255,255,255,0.18)",
              gap: 10,
            }}
          >
            Implementează Acum!
            <window.Icon name="arrow-right" size={18} color="#fff" />
          </window.HoverBorderBtn>
        </div>

      </div>

      {open && ReactDOM.createPortal(
        <div
          onClick={() => setOpen(false)}
          style={{
            position: "fixed", inset: 0, zIndex: 9999,
            background: "rgba(4,10,7,0.72)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: 20, animation: "ctaModalFade .2s ease-out",
          }}>
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              position: "relative",
              maxWidth: 460, width: "100%",
              background: "linear-gradient(180deg, #123322 0%, #0a1f14 100%)",
              border: "1px solid rgba(9,169,85,0.35)",
              borderRadius: 24,
              padding: "36px 32px 28px",
              boxShadow: "0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04), 0 0 60px rgba(9,169,85,0.25)",
              textAlign: "center",
              animation: "ctaModalPop .35s cubic-bezier(.2,.9,.3,1.2)",
            }}>
            <button
              onClick={() => setOpen(false)}
              aria-label="Închide"
              style={{
                position: "absolute", top: 14, right: 14,
                width: 32, height: 32, borderRadius: 10,
                background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.08)",
                color: "var(--fg-2)", cursor: "pointer", fontSize: 16, lineHeight: 1,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>×</button>

            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "6px 12px", borderRadius: 999,
              background: "rgba(9,169,85,0.14)", border: "1px solid rgba(9,169,85,0.35)",
              fontSize: 12, fontWeight: 600, color: "#86efac", letterSpacing: "0.04em", textTransform: "uppercase",
              marginBottom: 18,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#57ff87", animation: "pulseDot 1.4s infinite" }}></span>
              Ofertă limitată
            </div>

            <h3 style={{
              margin: 0, color: "#fff", fontWeight: 800,
              fontSize: 22, lineHeight: 1.25, letterSpacing: "-0.01em",
            }}>
              Spune codul secret la implementare pentru{" "}
              <span style={{
                background: "linear-gradient(135deg, var(--neon-purple), var(--neon-purple-2))",
                WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
              }}>250€ reducere</span>.
            </h3>

            <button
              onClick={copyCode}
              title="Click pentru a copia"
              style={{
                marginTop: 22, marginBottom: 14,
                display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
                width: isMobile ? "100%" : "auto",
                padding: isMobile ? "14px 16px" : "14px 22px", borderRadius: 14,
                background: "rgba(9,169,85,0.10)",
                border: "1.5px dashed rgba(9,169,85,0.55)",
                color: "#fff", fontSize: isMobile ? 17 : 22, fontWeight: 800, letterSpacing: "0.04em",
                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
                cursor: "pointer",
              }}>
              Confirmari2026
              <span style={{ fontSize: 12, fontWeight: 600, color: copied ? "#86efac" : "var(--fg-3)", letterSpacing: "0.04em", textTransform: "uppercase" }}>
                {copied ? "Copiat!" : "Copiază"}
              </span>
            </button>

            <p style={{ margin: "10px auto 0", fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55, maxWidth: 360 }}>
              Au mai rămas <strong style={{ color: "#fff" }}>5 locuri disponibile</strong> pentru reducere.
            </p>

            <a
              href={IG_URL_CTAV2}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => setOpen(false)}
              style={{ textDecoration: "none", display: "block", marginTop: 24 }}>
              <button
                className="ev-btn ev-btn--primary"
                style={{
                  width: "100%", padding: "16px 24px", fontSize: 16,
                  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
                  borderRadius: 14,
                }}>
                Implementează acum
                <window.Icon name="arrow-right" size={16} color="#fff" />
              </button>
            </a>
          </div>
        </div>,
        document.body
      )}

      <style>{`
        @keyframes pulseDot {0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.85);}}
        @keyframes ctaModalFade {from{opacity:0;}to{opacity:1;}}
        @keyframes ctaModalPop {from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
      `}</style>
    </div>
  );
};

window.FinalCTAV2 = FinalCTAV2;