// ContactModal.jsx — overlay layer that pops up with the contact form
// when a "Get this fitted" / "Book a Fit-Out" / "Tell us what you need"
// button is clicked. Listens for the global `af:pick-service` event.

function ContactModal() {
  const [open, setOpen] = useState(false);
  const [preset, setPreset] = useState([]);

  useEffect(() => {
    const onPick = (e) => {
      const name = e?.detail?.name;
      setPreset(name ? [name] : []);
      setOpen(true);
    };
    window.addEventListener("af:pick-service", onPick);
    return () => window.removeEventListener("af:pick-service", onPick);
  }, []);

  // Esc to close, lock body scroll while open.
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prevOverflow;
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  if (!open) return null;

  return (
    <div onClick={() => setOpen(false)} style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(12, 46, 80, 0.55)",
      backdropFilter: "blur(6px)",
      WebkitBackdropFilter: "blur(6px)",
      display: "flex", alignItems: "flex-start", justifyContent: "center",
      padding: "48px 20px",
      overflowY: "auto",
      animation: "afmodal-fade .18s ease-out",
    }}>
      <style>{`
        @keyframes afmodal-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes afmodal-pop  { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
        @media (max-width: 720px) {
          .afmodal-shell { padding-top: 24px !important; padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 24px !important; }
          .afmodal-card  { border-radius: 16px !important; }
        }
      `}</style>
      <div onClick={(e) => e.stopPropagation()} className="afmodal-card" style={{
        position: "relative",
        width: "100%", maxWidth: 640,
        background: "#fff", borderRadius: 20,
        boxShadow: "0 30px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.04)",
        animation: "afmodal-pop .22s cubic-bezier(.2,.7,.3,1)",
      }}>
        {/* Close button */}
        <button onClick={() => setOpen(false)} aria-label="Close" style={{
          position: "absolute", top: 14, right: 14, zIndex: 2,
          width: 36, height: 36, borderRadius: 10,
          background: "rgba(0,0,0,0.04)", border: "1px solid var(--line)",
          color: "var(--ink-soft)", cursor: "pointer",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          transition: "background .15s, color .15s, transform .12s",
        }}
          onMouseEnter={e => { e.currentTarget.style.background = "rgba(0,0,0,0.08)"; e.currentTarget.style.color = "var(--ink)"; }}
          onMouseLeave={e => { e.currentTarget.style.background = "rgba(0,0,0,0.04)"; e.currentTarget.style.color = "var(--ink-soft)"; }}>
          <i data-lucide="x" style={{ width: 18, height: 18, strokeWidth: 2.25 }}></i>
        </button>

        {/* Header strip — small acknowledgment of which service triggered this */}
        {preset.length > 0 && (
          <div style={{
            padding: "18px 28px 0", display: "flex", alignItems: "center", gap: 10,
            color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: ".08em", textTransform: "uppercase",
          }}>
            <i data-lucide="check-circle" style={{ width: 14, height: 14, color: "var(--success)" }}></i>
            Asking about — {preset[0]}
          </div>
        )}

        <ContactForm presetInterests={preset} compact />
      </div>
    </div>
  );
}

window.ContactModal = ContactModal;