// Kotleto · demo disclaimer shown once per browser session

function DemoNotice() {
  const { lang } = useLang();
  const cardRef = useRef(null);
  const actionRef = useRef(null);
  const [open, setOpen] = useState(() => {
    try {
      return sessionStorage.getItem("kotleto-demo-notice-seen") !== "1";
    } catch {
      return true;
    }
  });

  const dismiss = useCallback(() => {
    try { sessionStorage.setItem("kotleto-demo-notice-seen", "1"); } catch { }
    setOpen(false);
  }, []);

  useEffect(() => {
    if (!open) return;
    const previousFocus = document.activeElement;
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const focusTimer = setTimeout(() => actionRef.current?.focus(), 80);
    const onKeyDown = event => {
      if (event.key === "Escape") dismiss();
      if (event.key === "Tab") {
        const focusable = Array.from(cardRef.current?.querySelectorAll('a[href], button:not([disabled])') || []);
        if (!focusable.length) return;
        event.preventDefault();
        const currentIndex = focusable.indexOf(document.activeElement);
        const nextIndex = event.shiftKey
          ? (currentIndex <= 0 ? focusable.length - 1 : currentIndex - 1)
          : (currentIndex >= focusable.length - 1 ? 0 : currentIndex + 1);
        focusable[nextIndex]?.focus();
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => {
      clearTimeout(focusTimer);
      window.removeEventListener("keydown", onKeyDown);
      document.body.style.overflow = previousOverflow;
      previousFocus?.focus?.();
    };
  }, [open, dismiss]);

  if (!open) return null;
  const fa = lang === "fa";

  return (
    <div className="demo-notice-layer" role="presentation">
      <div className="demo-notice-scrim" aria-hidden="true" />
      <section
        ref={cardRef}
        className="demo-notice-card"
        role="dialog"
        aria-modal="true"
        aria-labelledby="demo-notice-title"
        aria-describedby="demo-notice-description"
      >
        <div className="demo-notice-icon" aria-hidden="true">i</div>
        <span className="chip brand">{fa ? "نسخه نمایشی" : "Demo version"}</span>
        <h2 id="demo-notice-title" className="display">
          {fa ? "به نسخه نمایشی کتلتو خوش اومدی!" : "Welcome to the Kotleto demo"}
        </h2>
        <p id="demo-notice-description">
          {fa
            ? "این سایت صرفاً نمایشی است و هنوز تکمیل نشده است."
            : "This website is for demonstration purposes only and is not yet complete."}
          {" "}
          {fa
            ? "برای سفارش یک سایت مشابه، باکیفیت و کاملاً تکمیل‌شده به آتیکُد سر بزنید."
            : "Visit Aticode to order a polished, complete website like this."}
        </p>
        <div className="demo-notice-actions">
          <a href="https://aticode.ir" target="_blank" rel="noopener noreferrer"
            className="btn btn-primary btn-lg"
            aria-label={fa ? "سفارش سایت مشابه از آتیکُد؛ باز شدن در تب جدید" : "Order a similar website from Aticode; opens in a new tab"}>
            {fa ? (
              <><Ico.Arrow /><span>سفارش سایت مشابه از آتیکُد</span></>
            ) : (
              <><span>Order a similar website from Aticode</span><Ico.Arrow /></>
            )}
          </a>
          <button ref={actionRef} type="button" className="btn btn-ghost btn-lg" onClick={dismiss}>
            {fa ? (
              <><Ico.Arrow /><span>بیخیال، ورود به کتلتو</span></>
            ) : (
              <><span>Skip, enter Kotleto</span><Ico.Arrow /></>
            )}
          </button>
        </div>
      </section>

      <style>{`
        .demo-notice-layer {
          position: fixed; inset: 0; z-index: 300; display: grid;
          grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px;
        }
        .demo-notice-scrim {
          position: absolute; inset: 0; background: rgba(26, 20, 16, .68);
          backdrop-filter: blur(9px);
        }
        .demo-notice-card {
          position: relative; width: min(520px, calc(100vw - 40px)); min-width: 0;
          max-width: 100%; max-height: calc(100dvh - 40px);
          overflow-y: auto; padding: clamp(26px, 6vw, 44px);
          border: 1px solid rgba(26, 20, 16, .14); border-radius: 28px;
          background: linear-gradient(155deg, #fffaf1 0%, var(--paper) 70%, var(--paper-2) 100%);
          color: var(--ink); box-shadow: 0 28px 90px rgba(0, 0, 0, .42), 0 7px 0 var(--ink);
          text-align: center; animation: demoNoticeIn .24s ease-out both;
        }
        .demo-notice-icon {
          width: 54px; height: 54px; margin: 0 auto 18px; display: grid; place-items: center;
          border-radius: 18px; background: var(--gold); border: 2px solid var(--ink);
          box-shadow: 4px 4px 0 var(--ink); font-family: var(--serif);
          font-size: 32px; font-weight: 900; font-style: italic;
        }
        .demo-notice-card h2 {
          margin: 18px 0 12px; font-size: clamp(28px, 6vw, 42px); line-height: 1.18;
        }
        .demo-notice-card p {
          max-width: 44ch; margin: 0 auto 26px; color: var(--ink-3);
          font-size: 16px; line-height: 1.9;
        }
        .demo-notice-actions {
          display: grid; gap: 12px; min-width: 0;
        }
        .demo-notice-card .btn {
          width: 100%; max-width: 100%; min-width: 0; min-height: 48px;
          justify-content: center; white-space: normal; line-height: 1.5;
        }
        @keyframes demoNoticeIn {
          from { opacity: 0; transform: translateY(14px) scale(.97); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @media (max-width: 480px) {
          .demo-notice-layer { padding: 12px; }
          .demo-notice-card {
            width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
            padding: 24px 16px 22px; border-radius: 22px;
          }
          .demo-notice-card h2 { font-size: clamp(26px, 8vw, 34px); }
          .demo-notice-card p { font-size: 14px; line-height: 1.8; margin-bottom: 22px; }
          .demo-notice-card .btn { padding: 13px 10px; font-size: 14px; white-space: normal; line-height: 1.5; }
        }
        @media (prefers-reduced-motion: reduce) {
          .demo-notice-card { animation: none; }
        }
      `}</style>
    </div>
  );
}

window.DemoNotice = DemoNotice;