// Sticky bottom CTA — appears after hero scrolls offscreen, mobile + desktop.
function StickyCTA({ tweaks, onCta }) {
  const [visible, setVisible] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  const monthly = tweaks.priceMonthly || 1490;

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const max = (document.documentElement.scrollHeight - window.innerHeight);
      setVisible(y > 600 && y < max - 200);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  if (hidden) return null;

  return (
    <div
      aria-hidden={!visible}
      style={{
        position: "fixed",
        left: 0, right: 0, bottom: 0,
        zIndex: 60,
        transform: visible ? "translateY(0)" : "translateY(120%)",
        transition: "transform .25s ease",
        padding: "12px 16px calc(12px + env(safe-area-inset-bottom))",
        background: "color-mix(in srgb, var(--paper) 92%, transparent)",
        backdropFilter: "saturate(180%) blur(12px)",
        WebkitBackdropFilter: "saturate(180%) blur(12px)",
        borderTop: "1px solid var(--line)",
      }}
    >
      <div className="container" style={{ display: "flex", alignItems: "center", gap: 12, padding: 0 }}>
        <div style={{ display: "flex", flexDirection: "column", minWidth: 0, flex: 1 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)" }}>
            Bangkok · same-day · 14-day refund
          </span>
          <span style={{ fontSize: 14, color: "var(--ink)", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            Monthly <span style={{ color: "var(--accent-deep)" }}>฿{monthly.toLocaleString()}</span> · Starter ฿6,540
          </span>
        </div>
        <button className="btn btn-accent btn-sm" onClick={onCta} style={{ flexShrink: 0 }}>
          Get my kit <IArrow size={14} />
        </button>
        <button
          aria-label="Dismiss"
          onClick={() => setHidden(true)}
          style={{
            background: "transparent", border: 0, padding: 6, color: "var(--ink-4)",
            cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center",
            flexShrink: 0,
          }}
        >
          <IClose size={16} />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { StickyCTA });