/*
 * Temporary featured-event promo (World Cup Final screening).
 * Two global components — <PromoBanner /> (slim top bar) and <Promo /> (#world-cup section).
 * Both are driven by the PROMO config below and self-hide once `endsAt` passes.
 * To remove after the event: delete this file, its <script> line in index.html,
 * and the <PromoBanner />/<Promo /> lines in App.jsx. (It also auto-expires.)
 */
const PROMO = {
  enabled: true,
  endsAt: '2026-07-20T05:00:00+04:00', // morning after the Sun 19 Jul match
  eyebrow: 'Live Screening · One Night Only',
  image: './brand-assets/world-cup-final.webp',
  imageAlt: 'After5 Lounge Bar — live screening of the World Cup Final, Sunday 19 July 2026, buffet night from Rs 1,200 per person',
  subtitle: 'The biggest match of the year, live at After5 — giant screen, buffet night, great drinks and prizes to be won. Bring your crew and roar it on under the palms.',
  facts: [
    { label: 'Match Night', value: 'Sun, 19 July 2026' },
    { label: 'Buffet From', value: '6:00 PM' },
    { label: 'Kick-Off', value: '11:00 PM' },
  ],
  price: { label: 'Buffet Night', value: 'Rs 1,200', unit: 'per person' },
  perks: ['Great deals on drinks', 'Games & fun', 'Exciting prizes to win'],
  note: 'Limited seats — reservation required.',
  phone: '23058582020',
  phoneDisplay: '+230 58 58 20 20',
  waMessage: "Hi After5! I'd like to reserve seats for the World Cup Final buffet night on Sunday 19 July ⚽🏆",
  banner: {
    text: 'World Cup Final — live on the giant screen',
    meta: 'Sun 19 July · Buffet 6PM · Kick-off 11PM',
    cta: 'Reserve',
  },
};

function promoWa(msg) {
  return 'https://wa.me/' + PROMO.phone + '?text=' + encodeURIComponent(msg);
}
function promoExpired() {
  return !PROMO.enabled || Date.now() >= new Date(PROMO.endsAt).getTime();
}

/* ─────────────────────────── Announcement bar ─────────────────────────── */
function PromoBanner() {
  const [hidden, setHidden] = React.useState(false);
  const HEIGHT = 44;

  React.useLayoutEffect(() => {
    const root = document.documentElement;
    let dismissed = false;
    try { dismissed = sessionStorage.getItem('a5_wc_banner_dismissed') === '1'; } catch (e) {}
    if (promoExpired() || dismissed) {
      root.style.setProperty('--promo-bar-h', '0px');
      setHidden(true);
    } else {
      root.style.setProperty('--promo-bar-h', HEIGHT + 'px');
    }
    return () => root.style.setProperty('--promo-bar-h', '0px');
  }, []);

  const dismiss = () => {
    try { sessionStorage.setItem('a5_wc_banner_dismissed', '1'); } catch (e) {}
    document.documentElement.style.setProperty('--promo-bar-h', '0px');
    setHidden(true);
  };

  if (hidden) return null;

  return (
    <>
      <style>{`
        .wcb {
          position: fixed; top: 0; left: 0; right: 0; z-index: 990;
          height: 44px; display: flex; align-items: center; justify-content: center;
          gap: clamp(10px, 2.5vw, 20px);
          padding: 0 46px;
          background: linear-gradient(90deg, #E84800 0%, #C81A7A 100%);
          color: #fff; overflow: hidden; white-space: nowrap;
        }
        .wcb-msg {
          display: inline-flex; align-items: center; gap: 10px; min-width: 0;
          color: #fff; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
        }
        .wcb-msg strong {
          font-family: 'Josefin Sans', sans-serif;
          font-size: clamp(11px, 1.6vw, 12.5px); font-weight: 600;
          letter-spacing: 0.14em; text-transform: uppercase;
          overflow: hidden; text-overflow: ellipsis;
        }
        .wcb-msg:hover strong { text-decoration: underline; }
        .wcb-meta {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 11px; font-weight: 300; letter-spacing: 0.08em;
          color: rgba(255,255,255,0.9);
        }
        .wcb-cta {
          display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
          height: 30px; padding: 0 16px;
          background: #0F0F0F; color: #fff; border-radius: 100px;
          font-family: 'Josefin Sans', sans-serif;
          font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
          text-decoration: none; white-space: nowrap;
          transition: transform 0.2s ease, background 0.2s ease;
        }
        .wcb-cta:hover { transform: translateY(-1px); background: #000; }
        .wcb-close {
          position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
          width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
          background: rgba(0,0,0,0.18); border: none; border-radius: 50%;
          color: #fff; cursor: pointer; font-size: 13px; line-height: 1;
          transition: background 0.2s ease;
        }
        .wcb-close:hover { background: rgba(0,0,0,0.34); }
        @media (max-width: 620px) { .wcb-meta { display: none; } }
        @media (max-width: 400px) { .wcb-msg strong { max-width: 46vw; } }
      `}</style>
      <div className="wcb" role="region" aria-label="World Cup Final promotion">
        <a className="wcb-msg" href="#world-cup">
          <span aria-hidden="true" style={{ fontSize: 14 }}>⚽</span>
          <strong>{PROMO.banner.text}</strong>
          <span className="wcb-meta">{PROMO.banner.meta}</span>
        </a>
        <a className="wcb-cta" href={promoWa(PROMO.waMessage)} target="_blank" rel="noopener noreferrer">
          {PROMO.banner.cta} <span aria-hidden="true">→</span>
        </a>
        <button className="wcb-close" onClick={dismiss} aria-label="Dismiss announcement">✕</button>
      </div>
    </>
  );
}

/* ───────────────────────── Featured promo section ─────────────────────── */
function Promo() {
  const sectionRef = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const [expired, setExpired] = React.useState(false);

  React.useEffect(() => { if (promoExpired()) setExpired(true); }, []);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } },
      { threshold: 0.12 }
    );
    if (sectionRef.current) observer.observe(sectionRef.current);
    return () => observer.disconnect();
  }, []);

  if (expired) return null;

  const tel = 'tel:+' + String(PROMO.phone).replace(/\D/g, '');

  return (
    <>
      <style>{`
        .wc {
          position: relative; overflow: hidden;
          background: #0D0D0D;
          padding: clamp(80px, 10vw, 130px) 0;
          scroll-margin-top: calc(var(--promo-bar-h, 0px) + 90px);
        }
        .wc-glow {
          position: absolute; inset: 0; pointer-events: none; z-index: 0;
          background:
            radial-gradient(60% 55% at 50% -8%, rgba(232,72,0,0.16) 0%, transparent 62%),
            radial-gradient(55% 60% at 8% 100%, rgba(200,114,10,0.12) 0%, transparent 60%),
            radial-gradient(55% 55% at 94% 20%, rgba(200,26,122,0.12) 0%, transparent 60%);
        }
        .wc-grain {
          position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.16;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
        }
        .wc-inner {
          position: relative; z-index: 2;
          max-width: 1180px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px);
          display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
          gap: clamp(32px, 5vw, 68px); align-items: center;
        }

        /* Poster frame — portrait 2:3, never stretched */
        .wc-poster {
          position: relative; margin: 0 auto; max-width: 440px; width: 100%;
          border: 1px solid rgba(232,72,0,0.35);
          border-radius: 4px; overflow: hidden;
          box-shadow: 0 24px 70px rgba(0,0,0,0.6);
          opacity: 0; transform: translateY(26px);
          transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
        }
        .wc.in .wc-poster { opacity: 1; transform: translateY(0); }
        .wc-poster img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 1536; }

        .wc-detail > * {
          opacity: 0; transform: translateY(18px);
          transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
        }
        .wc.in .wc-detail > * { opacity: 1; transform: translateY(0); }
        .wc.in .wc-detail > *:nth-child(1) { transition-delay: 0.10s; }
        .wc.in .wc-detail > *:nth-child(2) { transition-delay: 0.18s; }
        .wc.in .wc-detail > *:nth-child(3) { transition-delay: 0.26s; }
        .wc.in .wc-detail > *:nth-child(4) { transition-delay: 0.34s; }
        .wc.in .wc-detail > *:nth-child(5) { transition-delay: 0.42s; }

        .wc-eyebrow {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 10px; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase;
          color: #E84800; display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
        }
        .wc-eyebrow-rule { width: 32px; height: 1px; background: #E84800; opacity: 0.6; }

        .wc-title {
          font-family: 'Playfair Display', serif;
          font-size: clamp(34px, 4.2vw, 58px); font-weight: 400; font-style: italic;
          color: #F5F0EA; line-height: 1.06; letter-spacing: -0.02em; margin: 0; max-width: 15ch;
        }
        .wc-title .accent { color: #E84800; font-style: italic; }

        .wc-sub {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 13px; font-weight: 300; letter-spacing: 0.04em; line-height: 1.85;
          color: rgba(245,240,234,0.5); max-width: 48ch; margin-top: 20px;
        }

        .wc-facts {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 26px); margin-top: 34px;
        }
        .wc-fact { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; }
        .wc-fact-label {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
          color: #E84800; margin-bottom: 8px;
        }
        .wc-fact-value {
          font-family: 'Playfair Display', serif; font-size: clamp(15px, 1.5vw, 19px); font-weight: 400;
          color: #F5F0EA; line-height: 1.2;
        }

        .wc-offer {
          display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 30px); margin-top: 32px;
        }
        .wc-price {
          display: flex; flex-direction: column; gap: 4px;
          background: rgba(15,15,15,0.55); border: 1px solid rgba(232,72,0,0.35);
          border-radius: 4px; padding: 14px 22px;
        }
        .wc-price-label {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
          color: rgba(255,255,255,0.4);
        }
        .wc-price-value {
          font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 400; font-style: italic; color: #E84800; line-height: 1;
        }
        .wc-price-unit {
          font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 300;
          letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-left: 8px;
        }
        .wc-perks { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; }
        .wc-perk {
          display: inline-flex; align-items: center; gap: 7px;
          font-family: 'Josefin Sans', sans-serif; font-size: 10px; font-weight: 400;
          letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,240,234,0.7);
          border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; padding: 7px 14px;
        }
        .wc-perk::before { content: '✦'; color: #E84800; font-size: 9px; }

        .wc-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
        .wc-cta-primary {
          display: inline-flex; align-items: center; justify-content: center; gap: 11px;
          font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 600;
          letter-spacing: 0.22em; text-transform: uppercase; color: #fff; background: #E84800;
          text-decoration: none; padding: 15px 34px; border-radius: 100px; min-width: 170px;
          box-shadow: 0 4px 28px rgba(232,72,0,0.38);
          transition: background 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
        }
        .wc-cta-primary:hover { background: #ff5c1a; transform: translateY(-2px); box-shadow: 0 8px 40px rgba(232,72,0,0.52); }
        .wc-cta-primary:active { transform: translateY(0); }
        .wc-cta-secondary {
          font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 400;
          letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6);
          text-decoration: none; position: relative; padding: 15px 2px;
          transition: color 0.22s ease;
        }
        .wc-cta-secondary::after {
          content: ''; position: absolute; bottom: 10px; left: 0; width: 0; height: 1px;
          background: rgba(255,255,255,0.5); transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
        }
        .wc-cta-secondary:hover { color: rgba(255,255,255,0.92); }
        .wc-cta-secondary:hover::after { width: 100%; }

        .wc-note {
          font-family: 'Josefin Sans', sans-serif; font-size: 10px; font-weight: 300;
          letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 18px;
        }

        @media (max-width: 900px) {
          .wc-inner { grid-template-columns: 1fr; gap: 40px; }
          .wc-poster { max-width: 380px; }
        }
        @media (max-width: 560px) {
          .wc-facts { grid-template-columns: 1fr; gap: 14px; }
          .wc-ctas { flex-direction: column; align-items: stretch; }
          .wc-cta-primary { width: 100%; }
          .wc-cta-secondary { text-align: center; }
        }
      `}</style>

      <section className={`wc ${visible ? 'in' : ''}`} ref={sectionRef} id="world-cup" aria-label="World Cup Final live screening">
        <div className="wc-glow" aria-hidden="true" />
        <div className="wc-grain" aria-hidden="true" />

        <div className="wc-inner">
          {/* Poster */}
          <div className="wc-poster">
            <img src={PROMO.image} alt={PROMO.imageAlt} width="1024" height="1536" loading="lazy" />
          </div>

          {/* Details */}
          <div className="wc-detail">
            <div>
              <p className="wc-eyebrow"><span className="wc-eyebrow-rule" />{PROMO.eyebrow}</p>
              <h2 className="wc-title">The <span className="accent">World Cup Final,</span><br />on the big screen.</h2>
              <p className="wc-sub">{PROMO.subtitle}</p>
            </div>

            <div className="wc-facts">
              {PROMO.facts.map((f) => (
                <div className="wc-fact" key={f.label}>
                  <div className="wc-fact-label">{f.label}</div>
                  <div className="wc-fact-value">{f.value}</div>
                </div>
              ))}
            </div>

            <div className="wc-offer">
              <div className="wc-price">
                <span className="wc-price-label">{PROMO.price.label}</span>
                <span>
                  <span className="wc-price-value">{PROMO.price.value}</span>
                  <span className="wc-price-unit">{PROMO.price.unit}</span>
                </span>
              </div>
              <ul className="wc-perks">
                {PROMO.perks.map((p) => <li className="wc-perk" key={p}>{p}</li>)}
              </ul>
            </div>

            <div className="wc-ctas">
              <a className="wc-cta-primary" href={promoWa(PROMO.waMessage)} target="_blank" rel="noopener noreferrer">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                Reserve Your Seats
              </a>
              <a className="wc-cta-secondary" href={tel}>Call {PROMO.phoneDisplay}</a>
            </div>

            <p className="wc-note">🎟 {PROMO.note}</p>
          </div>
        </div>
      </section>
    </>
  );
}