// aerOS Guest v3 — Home: hero + outlet selection + services grid + announcement (v2 themed).
const { useState: _h3S, useEffect: _h3E } = React;
const OUTLET_ICON3 = { restaurant: 'utensils', lobby: 'wine', pool: 'spa', cafe: 'coffee' };

function G3Home({ C, t, lang, tw, onOutlet, onService, onLang, onSettings }) {
  const D = window.G2DATA;
  const [announce, setAnnounce] = _h3S(true);
  const head = G2THEME.headFont(tw);

  // Real announcement: the active popup event drives both the home banner and a
  // one-time modal. No popup event -> no demo banner (nothing hard-coded shows).
  const [popup, setPopup] = _h3S(null);     // active popup event (modal + banner source)
  const [showPopup, setShowPopup] = _h3S(false);
  _h3E(() => {
    let on = true;
    (async () => {
      try {
        const ev = window.guestApi && window.guestApi.popupEvent ? await window.guestApi.popupEvent() : null;
        if (!on || !ev) return;
        setPopup(ev);
        // Show the modal once per event per session.
        let seen = ''; try { seen = sessionStorage.getItem('aeros-popup-seen') || ''; } catch (e) {}
        if (String(ev.id) !== seen) setShowPopup(true);
      } catch (e) {}
    })();
    return () => { on = false; };
  }, []);
  const dismissPopup = () => { setShowPopup(false); try { sessionStorage.setItem('aeros-popup-seen', String(popup && popup.id)); } catch (e) {} };
  const evTitle = popup ? (lang === 'en' ? popup.en : popup.title) : '';
  const evInfo = popup ? (lang === 'en' ? popup.info_en : popup.info) : '';

  return (
    <div className="g2-noscroll" style={{ height: '100%', overflowY: 'auto', background: C.bg, fontFamily: G2THEME.BODY_FONT }}>
      {/* header */}
      <div style={{ padding: '50px 18px 8px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ width: 44, height: 44, borderRadius: 13, overflow: 'hidden', background: D.BRAND.logo ? '#fff' : `linear-gradient(135deg, ${C.accent}, ${C.accentDark})`, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontFamily: head, fontSize: 21 }}>{D.BRAND.logo ? <img src={D.BRAND.logo} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} /> : (D.BRAND.name || 'R').charAt(0)}</div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 15.5, color: C.ink, lineHeight: 1.1 }}>{D.BRAND.name}</div>
              <div style={{ fontSize: 12, color: C.muted }}>{D.BRAND.sub}</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <G2Seg value={lang} onChange={onLang} options={[['tr', 'TR'], ['en', 'EN']]} C={C} />
            {onSettings && <button onClick={onSettings} aria-label={t.settings} style={{ width: 40, height: 40, borderRadius: 12, border: `1px solid ${C.line}`, background: C.bg2, color: C.ink2, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>{Icon.settings({ size: 19 })}</button>}
          </div>
        </div>
        <div style={{ marginTop: 22 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: C.accent }}>{t.welcome}</div>
          <h1 style={{ fontFamily: head, fontWeight: 600, fontSize: 30, color: C.ink, lineHeight: 1.08, marginTop: 6, maxWidth: 300 }}>{t.selectOutlet}</h1>
        </div>
      </div>

      {/* outlets */}
      <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {D.OUTLETS.map(o => (
          <button key={o.id} onClick={() => onOutlet(o)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 13, borderRadius: 18, border: tw.corners === 'sharp' ? `1px solid ${C.line}` : 'none', background: C.bg2, boxShadow: tw.corners === 'sharp' ? 'none' : C.cardShadow, cursor: 'pointer', textAlign: 'left', fontFamily: G2THEME.BODY_FONT, transition: 'transform 140ms' }} onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'} onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
            <div style={{ width: 56, height: 56, borderRadius: 15, overflow: 'hidden', background: o.image ? C.line : `linear-gradient(135deg, ${o.color}, color-mix(in oklab, ${o.color} 55%, #000))`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0 }}>{o.image ? <img src={o.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : Icon[OUTLET_ICON3[o.type] || 'utensils']({ size: 25 })}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: head, fontSize: 18, fontWeight: 600, color: C.ink }}>{o.name}</div>
              <div style={{ fontSize: 12.5, color: C.muted, marginTop: 2 }}>{(lang === 'en' ? o.en : o.desc)} · {t['ot_' + o.type]}</div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 7, fontSize: 11.5, fontWeight: 700, color: '#5FAE5F' }}><span style={{ width: 6, height: 6, borderRadius: 6, background: '#5FAE5F' }} />{t.open}</div>
            </div>
            <span style={{ color: C.accent, display: 'flex' }}>{Icon.chevRight({ size: 21 })}</span>
          </button>
        ))}
      </div>

      {/* services grid */}
      <div style={{ padding: '24px 16px 0' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: C.muted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 13 }}>{t.services}</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 10 }}>
          {D.SERVICE_TILES.map(s => { const m = D.SERVICE_META[s]; return (
            <button key={s} onClick={() => onService(s)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, padding: '14px 4px', borderRadius: 16, border: tw.corners === 'sharp' ? `1px solid ${C.line}` : 'none', background: C.bg2, boxShadow: tw.corners === 'sharp' ? 'none' : C.cardShadow, cursor: 'pointer', fontFamily: G2THEME.BODY_FONT }}>
              <span style={{ width: 44, height: 44, borderRadius: 13, background: `color-mix(in oklab, ${m.color} 16%, ${C.bg2})`, color: m.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icon[m.icon]({ size: 21 })}</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: C.ink2, textAlign: 'center', lineHeight: 1.2 }}>{t[s]}</span>
            </button>
          ); })}
        </div>
      </div>

      {/* announcement — driven by the active popup event (hidden when none) */}
      {announce && popup && (
        <div style={{ padding: '22px 16px 28px' }}>
          <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', boxShadow: C.cardShadow }}>
            <div style={{ height: 96, background: popup.image ? '#000' : `linear-gradient(135deg, ${C.accent}, ${C.accentDark})`, position: 'relative' }}>
              {popup.image
                ? <img src={popup.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                : <div style={{ position: 'absolute', inset: 0, opacity: 0.22, backgroundImage: 'radial-gradient(circle at 85% 20%, #fff 0, transparent 45%)' }} />}
              <span style={{ position: 'absolute', top: 14, left: 16, color: '#fff', fontSize: 10.5, fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>{Icon.ticket({ size: 14 })}{t.events}</span>
              <button onClick={() => setAnnounce(false)} aria-label={t.close} style={{ position: 'absolute', top: 10, right: 10, width: 28, height: 28, borderRadius: '50%', border: 'none', background: 'rgba(0,0,0,0.25)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backdropFilter: 'blur(4px)' }}>{Icon.x({ size: 15 })}</button>
            </div>
            <div style={{ background: C.bg2, padding: 16 }}>
              <div style={{ fontFamily: head, fontSize: 19, fontWeight: 600, color: C.ink }}>{evTitle}</div>
              {evInfo && <p style={{ fontSize: 13, color: C.ink2, lineHeight: 1.5, margin: '6px 0 13px' }}>{evInfo}</p>}
              <G2Btn C={C} size="sm" variant="soft" onClick={() => onService('events')} iconRight={Icon.chevRight}>{t.announceCta || (lang === 'en' ? 'See details' : 'Detayları gör')}</G2Btn>
            </div>
          </div>
        </div>
      )}

      {/* popup modal — opens automatically when an event is flagged "show popup" */}
      {showPopup && popup && (
        <div onClick={dismissPopup} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, backdropFilter: 'blur(2px)' }}>
          <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 360, background: C.bg2, borderRadius: 22, overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.4)', animation: tw.animate ? 'g2up .3s cubic-bezier(.22,1,.36,1)' : 'none' }}>
            <div style={{ height: 150, background: popup.image ? '#000' : `linear-gradient(135deg, ${C.accent}, ${C.accentDark})`, position: 'relative' }}>
              {popup.image
                ? <img src={popup.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                : <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', opacity: 0.85 }}>{Icon.ticket({ size: 40 })}</span>}
              <button onClick={dismissPopup} aria-label={t.close} style={{ position: 'absolute', top: 12, right: 12, width: 32, height: 32, borderRadius: '50%', border: 'none', background: 'rgba(0,0,0,0.4)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backdropFilter: 'blur(4px)' }}>{Icon.x({ size: 17 })}</button>
            </div>
            <div style={{ padding: 20 }}>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.accent }}>{t.events}</div>
              <div style={{ fontFamily: head, fontSize: 22, fontWeight: 600, color: C.ink, marginTop: 6 }}>{evTitle}</div>
              {popup.date && <div style={{ fontSize: 12.5, color: C.muted, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>{Icon.calendar({ size: 14 })}{popup.date}</div>}
              {evInfo && <p style={{ fontSize: 13.5, color: C.ink2, lineHeight: 1.55, marginTop: 12 }}>{evInfo}</p>}
              <div style={{ marginTop: 18 }}><G2Btn full C={C} onClick={() => { dismissPopup(); onService('events'); }} iconRight={Icon.chevRight}>{lang === 'en' ? 'See details' : 'Detayları gör'}</G2Btn></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.G3Home = G3Home;