// welcome-overlay.jsx
// ─────────────────────────────────────────────────────────────────────────
// One-time welcome overlay for visitors forwarded from the OLD domain
// (pointfourfive.com → flairground.com.au) via a Cloudflare 301 that appends
// ?from=pointfourfive. It floats over the live site, reveals its two columns
// (left: eyebrow + flairground wordmark, then right: copy + CTA) in a short
// staggered fade, strips the ?from tag from the URL (no reload, SEO-safe), and
// persists a localStorage flag so it shows at most once per browser.
//
// Exposes window.WelcomeOverlay. Load AFTER React + fg-paths.js (it reuses
// window.FG_WORDMARK_PATH for the static wordmark). Gating is purely
// `?from=pointfourfive && !localStorage["fg_welcome_seen"]`.
//
// The 301 itself is configured in Cloudflare (Rules → Redirect Rules), not here.
// ─────────────────────────────────────────────────────────────────────────

(function () {
  const { useState: useWelState, useEffect: useWelEffect } = React;
  const WM_LETTERS = (typeof window !== "undefined" && window.FG_WORDMARK_LETTERS) || "";
  const WM_DOT = (typeof window !== "undefined" && window.FG_WORDMARK_DOT) || "";

  const WELCOME_CSS = `
  @keyframes fgw-auxIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
  @keyframes fgw-scrimIn{0%{opacity:0}100%{opacity:1}}
  @keyframes fgw-cardIn{0%{opacity:0;transform:translateY(22px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}

  .fgw-scrim{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9,7,5,.74);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);animation:fgw-scrimIn .45s ease both;font-family:'DM Sans',system-ui,sans-serif}
  .fgw-scrim.fgw-closing{opacity:0;pointer-events:none;transition:opacity .4s ease}
  .fgw-card{position:relative;width:100%;max-width:780px;background:#1a1610;border:1px solid rgba(237,230,216,.16);border-radius:10px;padding:56px 60px;box-shadow:0 40px 120px rgba(0,0,0,.55);animation:fgw-cardIn .55s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
  .fgw-blob{position:absolute;top:-120px;left:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(224,142,60,.16),transparent 70%);pointer-events:none}
  .fgw-main{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:54px}

  /* Left group (eyebrow + wordmark) reveals first; right group (copy + CTA) after. */
  .fgw-left{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:28px;text-align:right;opacity:0;animation:fgw-auxIn .7s ease-out .35s forwards}
  .fgw-right{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:28px;opacity:0;animation:fgw-auxIn .7s ease-out .95s forwards}
  .fgw-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:#E08E3C}
  .fgw-wmbox{position:relative;width:288px;height:59px}
  .fgw-wm{position:absolute;inset:0;width:100%;height:100%}
  .fgw-divider{align-self:stretch;width:1px;min-height:188px;background:rgba(237,230,216,.16);flex-shrink:0}
  .fgw-copy{display:flex;flex-direction:column;gap:8px}
  .fgw-headline{font-family:'Barlow Condensed',sans-serif;font-size:25px;line-height:1.15;font-weight:400;letter-spacing:.005em;color:#EDE6D8}
  .fgw-sub{font-size:15px;line-height:1.5;font-weight:400;color:rgba(237,230,216,.6)}
  .fgw-cta{display:inline-flex;align-items:center;gap:11px;background:#E08E3C;color:#14110d;font-family:'DM Sans',system-ui,sans-serif;font-weight:600;font-size:16px;padding:16px 32px;border:none;border-radius:4px;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.3);transition:transform .18s ease}
  .fgw-cta:hover{transform:translateY(-2px)}
  .fgw-cta span{font-size:18px}

  @media (max-width:560px){
    .fgw-card{padding:32px 24px}
    .fgw-main{flex-direction:column;gap:28px}
    .fgw-left,.fgw-right,.fgw-copy{align-items:center;text-align:center}
    .fgw-divider{display:none}
    .fgw-wmbox{width:240px;height:49px}
  }
  @media (prefers-reduced-motion: reduce){
    .fgw-scrim,.fgw-card,.fgw-left,.fgw-right{animation:none!important}
    .fgw-left,.fgw-right{opacity:1!important;transform:none!important}
  }`;

  function WelcomeOverlay() {
    const [show, setShow] = useWelState(false);
    const [closing, setClosing] = useWelState(false);

    useWelEffect(() => {
      let seen = false;
      try { seen = localStorage.getItem("fg_welcome_seen") === "1"; } catch (e) {}
      let params;
      try { params = new URLSearchParams(location.search); } catch (e) { return; }
      if (params.get("from") !== "pointfourfive" || seen) return;
      setShow(true);
      // Strip the ?from tag from the address bar without reloading (keep other
      // params + hash). Keeps the URL clean and avoids the param affecting SEO.
      try {
        params.delete("from");
        const q = params.toString();
        history.replaceState(null, "", location.pathname + (q ? "?" + q : "") + location.hash);
      } catch (e) {}
    }, []);

    if (!show) return null;

    const dismiss = () => {
      try { localStorage.setItem("fg_welcome_seen", "1"); } catch (e) {}
      setClosing(true);
      setTimeout(() => setShow(false), 420);
    };
    const onBackdrop = (e) => { if (e.target === e.currentTarget) dismiss(); };

    return (
      <div className={"fgw-scrim" + (closing ? " fgw-closing" : "")} onClick={onBackdrop}
           role="dialog" aria-modal="true" aria-label="Welcome to flairground">
        <style>{WELCOME_CSS}</style>
        <div className="fgw-card">
          <div className="fgw-blob" />
          <main className="fgw-main">
            <div className="fgw-left">
              <div className="fgw-eyebrow">A new chapter has begun</div>
              <div className="fgw-wmbox">
                <svg className="fgw-wm" viewBox="0 0 161.26669 32.844387" aria-label="flairground">
                  <g transform="translate(-18.146622,-121.99224)">
                    <path d={WM_LETTERS} fill="#EDE6D8" fillRule="evenodd" />
                    <path d={WM_DOT} fill="#E08E3C" />
                  </g>
                </svg>
              </div>
            </div>
            <div className="fgw-divider" />
            <div className="fgw-right">
              <div className="fgw-copy">
                <p className="fgw-headline">pointfourfive is now flairground</p>
                <p className="fgw-sub">You've arrived at our new home. Come on in and have a look around.</p>
              </div>
              <button className="fgw-cta" onClick={dismiss}>Start exploring <span>&rarr;</span></button>
            </div>
          </main>
        </div>
      </div>
    );
  }

  window.WelcomeOverlay = WelcomeOverlay;
})();