// MEMBERS PROMO STRIP — the ₱100 welcome credit, in the customer's words.
//
// ── WHY IT IS NOT STICKY ────────────────────────────────────────────────────
// <Nav> is already `position: sticky; top: 0`. A second sticky bar above it
// would eat ~50px of every screen for the whole visit and push the product
// below the fold on a phone. This strip scrolls away instead. The part that
// must always be reachable is the "Get the App · ₱100 Off" pill inside the
// sticky header, and that is where it lives.
//
// ── WHY BOTH TERMS ARE ON THE STRIP ITSELF ──────────────────────────────────
// "₱100 off" on its own is an offer the customer only discovers they did not
// qualify for at checkout. The profile requirement and the ₱500 minimum travel
// with it, always, on every surface that names the amount.
//
// ── WHAT IT DELIBERATELY DOES NOT SAY ───────────────────────────────────────
// No "automatic installation", no App Store or Google Play wording, and no
// claim about how the app arrives on the device — /install works that out from
// the device itself and says only what that device can actually do.
const SZ_PROMO_DISMISS_KEY = 'sz_members_promo_dismissed_v1';

function MembersPromo() {
  const Icon = window.Icon;

  // Read straight away rather than in an effect: an effect would paint the
  // strip and then remove it, so a customer who already dismissed it would see
  // it flash back on every page load. `szLoadCart` reads storage the same way.
  //
  // Every access is guarded. localStorage throws outright in a locked-down
  // browser or a third-party iframe, and a storefront that fails to render
  // because a privacy setting refused a read is a far worse outcome than a
  // promo strip that shows one more time than it should.
  const [hidden, setHidden] = React.useState(function () {
    try { return window.localStorage.getItem(SZ_PROMO_DISMISS_KEY) === '1'; } catch (e) { return false; }
  });

  const dismiss = () => {
    setHidden(true);
    try { window.localStorage.setItem(SZ_PROMO_DISMISS_KEY, '1'); } catch (e) { /* not worth breaking the page over */ }
  };

  if (hidden) return null;

  return (
    <div className="sz-promo-strip" role="region" aria-label="Shoyuzuke Members Club offer" style={{
      position: 'relative', zIndex: 51,
      background: 'linear-gradient(90deg, rgba(240,96,34,0.16), rgba(240,96,34,0.07) 55%, rgba(240,96,34,0.14))',
      borderBottom: '1px solid var(--border-orange)',
    }}>
      <div className="sz-promo-inner" style={{
        display: 'flex', alignItems: 'center', gap: 12,
        maxWidth: 1240, margin: '0 auto', padding: '9px 28px',
      }}>
        <a
          className="sz-promo-link"
          href={window.szMembersInstallUrl('website-strip')}
          style={{
            display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0,
            textDecoration: 'none', color: 'inherit',
          }}
        >
          <span className="sz-promo-icon" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 26, height: 26, flexShrink: 0, borderRadius: 999,
            background: 'var(--shoyu-orange)', color: 'var(--soy-black)',
          }}>
            <Icon name="Gift" size={15} />
          </span>

          <span className="sz-promo-copy" style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap', minWidth: 0 }}>
            <strong style={{
              fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 14,
              color: 'var(--text-strong)', letterSpacing: '0.01em',
            }}>Get ₱100 off your first app order</strong>
            <span style={{
              fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.45,
              color: 'var(--text-muted)',
            }}>Complete your member profile and spend at least ₱500.</span>
          </span>

          <span className="sz-promo-cta" style={{
            marginLeft: 'auto', flexShrink: 0, whiteSpace: 'nowrap',
            fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 13,
            color: 'var(--shoyu-orange)',
          }}>Get the App →</span>
        </a>

        <button
          className="sz-promo-dismiss"
          onClick={dismiss}
          aria-label="Dismiss the Members Club offer"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 28, height: 28, flexShrink: 0, cursor: 'pointer',
            background: 'none', border: 'none', borderRadius: 999,
            color: 'var(--text-faint)',
            transition: 'color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)',
          }}
        >
          <Icon name="X" size={16} />
        </button>
      </div>
    </div>
  );
}
window.MembersPromo = MembersPromo;