// JEP — Buy modal (mock checkout)

const { useState: useStateBuy } = React;

function BuyModal({ open, onClose, defaultPlatform }) {
  const [selected, setSelected] = useStateBuy(defaultPlatform || "mac");
  const [stage, setStage] = useStateBuy("choose"); // choose | success
  const [email, setEmail] = useStateBuy("");

  React.useEffect(() => {
    if (open) {
      setStage("choose");
      setEmail("");
      setSelected(defaultPlatform || "mac");
    }
  }, [open, defaultPlatform]);

  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const platforms = [
    { id: "mac", name: "JEP for macOS", meta: "Apple Silicon · macOS 13+", price: "$29.99" },
    { id: "win", name: "JEP for Windows", meta: "Windows 10 / 11 · x64", price: "$19.99" },
  ];

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <span className="modal-title">{stage === "choose" ? "› checkout" : "› order placed"}</span>
          <button className="modal-close" onClick={onClose} aria-label="Close">×</button>
        </div>

        {stage === "choose" && (
          <div className="modal-body">
            <h3>Pick your platform.</h3>
            <p>One-time purchase. No subscription. Sold via Gumroad — they email your license key right after checkout.</p>

            <div className="modal-options">
              {platforms.map(p => (
                <div
                  key={p.id}
                  className="modal-opt"
                  data-selected={selected === p.id}
                  onClick={() => setSelected(p.id)}
                >
                  <div className="opt-platform">
                    <div className="opt-mark"></div>
                    <div>
                      <div className="opt-name">{p.name}</div>
                      <div className="opt-meta">{p.meta}</div>
                    </div>
                  </div>
                  <div className="opt-price">{p.price}</div>
                </div>
              ))}
            </div>

            <p className="modal-fineprint">
              ↳ The Gumroad storefront isn't live yet — we're in pre-launch.<br />
              ↳ Pick a platform below and we'll email you the moment it opens.
            </p>

            <div className="modal-actions">
              <button className="btn ghost" onClick={onClose}>Close</button>
              <a className="btn" href={`mailto:help@justenoughprivacy.com?subject=${encodeURIComponent("Notify me when JEP " + (selected === "mac" ? "macOS" : "Windows") + " is for sale")}&body=${encodeURIComponent("Please let me know when the Gumroad listing opens. — sent from justenoughprivacy.com")}`} style={{ textDecoration: "none" }}>
                Notify me <span className="arrow">→</span>
              </a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.BuyModal = BuyModal;