// Main app: map hero + drawer + all sections.

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sand",
  "typePairing": "italiana-archivo",
  "mapMood": "daylight"
}/*EDITMODE-END*/;

const TYPE_PAIRINGS = {
  'italiana-archivo':   { display: "'Italiana', serif",           body: "'Archivo', sans-serif",    label: 'Italiana × Archivo' },
  'cormorant-worksans': { display: "'Cormorant Garamond', serif", body: "'Work Sans', sans-serif",  label: 'Cormorant × Work Sans' },
  'instrument-archivo': { display: "'Instrument Serif', serif",   body: "'Archivo', sans-serif",    label: 'Instrument × Archivo' },
  'cardo-worksans':     { display: "'Cardo', serif",              body: "'Work Sans', sans-serif",  label: 'Cardo × Work Sans' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeNh, setActiveNh] = useStateA(null);
  const [openProperty, setOpenProperty] = useStateA(null);
  const [drawerOpen, setDrawerOpen] = useStateA(false);
  const [lang, setLang] = useStateA(window.LANG);  // null on first visit
  const [heroCardDismissed, setHeroCardDismissed] = useStateA(() => {
    try { return localStorage.getItem('hm_hero_dismissed') === '1'; } catch { return false; }
  });
  const L = window.I18N[lang || 'en'];

  function dismissHeroCard() {
    setHeroCardDismissed(true);
    try { localStorage.setItem('hm_hero_dismissed', '1'); } catch {}
  }
  function restoreHeroCard() {
    setHeroCardDismissed(false);
    try { localStorage.removeItem('hm_hero_dismissed'); } catch {}
  }

  useEffectA(() => {
    document.body.setAttribute('data-palette', t.palette);
    document.body.setAttribute('data-map-mood', t.mapMood);
    const pair = TYPE_PAIRINGS[t.typePairing] || TYPE_PAIRINGS['italiana-archivo'];
    document.documentElement.style.setProperty('--display-font', pair.display);
    document.documentElement.style.setProperty('--body-font', pair.body);
  }, [t.palette, t.typePairing, t.mapMood]);

  function handleLanguageChoose(chosen) {
    setLang(chosen);
  }
  function toggleLang() {
    const next = lang === 'ar' ? 'en' : 'ar';
    window.setLang(next);
    setLang(next);
  }

  // Language chooser splash — shown until a language is picked
  if (!lang) {
    return <LanguageChooser onChoose={handleLanguageChoose}/>;
  }

  function onSelectNeighborhood(id) {
    setActiveNh(id);
    setDrawerOpen(true);
    setOpenProperty(null);
  }
  function closeDrawer() {
    setDrawerOpen(false);
    setOpenProperty(null);
  }
  function nav(id) {
    const el = document.getElementById(id);
    if (id === 'map') { window.scrollTo({top:0, behavior:'smooth'}); return; }
    if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
  }

  return (
    <>
      <SiteHeader onNav={nav} L={L} lang={lang} onToggleLang={toggleLang}/>

      {/* Hero: map (full-bleed) + floating editorial copy block */}
      <section id="map" data-screen-label="Home · Map" style={{
        position:'relative',
        minHeight:'100vh',
        paddingTop:0,
        overflow:'hidden',
      }}>
        {/* Map — full-bleed */}
        <div style={{position:'absolute', inset:0}}>
          <UAEMap
            active={activeNh}
            setActive={setActiveNh}
            onSelectNeighborhood={onSelectNeighborhood}
            L={L}
            lang={lang}
          />
        </div>

        {/* Floating editorial card (top-left) — hides when a pin is locked or user dismisses */}
        <div style={{
          position:'absolute',
          top: 112,
          [lang === 'ar' ? 'right' : 'left']: 48,
          zIndex: 400,
          maxWidth: lang === 'ar' ? 460 : 420,
          background: 'rgba(243,238,229,0.92)',
          backdropFilter: 'blur(10px)',
          border: '1px solid var(--line)',
          padding: '28px 32px 26px',
          boxShadow: '0 24px 48px -28px rgba(18,18,18,0.22)',
          opacity: (activeNh || heroCardDismissed) ? 0 : 1,
          transform: (activeNh || heroCardDismissed) ? 'translateY(-8px)' : 'translateY(0)',
          pointerEvents: (activeNh || heroCardDismissed) ? 'none' : 'auto',
          transition: 'opacity .35s ease, transform .35s ease',
        }}>
          {/* Close button */}
          <button onClick={dismissHeroCard}
            className="mono"
            aria-label="Dismiss"
            style={{
              position:'absolute',
              top: 12,
              [lang === 'ar' ? 'left' : 'right']: 12,
              width: 28, height: 28,
              border: 'none',
              background: 'transparent',
              color: 'var(--mute)',
              fontSize: 16,
              cursor: 'pointer',
              lineHeight: 1,
              transition: 'color .2s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--mute)'}
          >✕</button>
          <div className="mono" style={{color:'var(--bronze)', marginBottom:14, fontSize:10}}>
            {L.hero.kicker}
          </div>
          <h1 className="display" style={{
            fontSize:'clamp(36px, 3.4vw, 52px)',
            lineHeight:0.98,
            margin:'0 0 16px',
            letterSpacing: lang === 'ar' ? 0 : '0.005em',
          }}>
            {L.hero.title1}<br/>
            {L.hero.title2}<br/>
            <em style={{fontStyle: lang === 'ar' ? 'normal' : 'italic', color:'var(--bronze)'}}>{L.hero.title3}</em>
          </h1>
          <div style={{fontSize:14, lineHeight:1.7, color:'var(--ink-2)'}}>
            {L.hero.body}
          </div>
          <div style={{
            display:'flex', gap:28, marginTop:20, paddingTop:18,
            borderTop:'1px solid var(--line-2)',
          }}>
            <div>
              <div className="mono" style={{fontSize:9, color:'var(--mute)', marginBottom:4}}>{L.hero.counterA}</div>
              <div style={{fontFamily:'var(--display-font-ar, Italiana), serif', fontSize:26, color:'var(--ink)', lineHeight:1}}>34</div>
              <div className="mono" style={{fontSize:8, color:'var(--mute)', marginTop:3}}>{L.hero.counterB}</div>
            </div>
            <div style={{width:1, background:'var(--line-2)'}}/>
            <div>
              <div className="mono" style={{fontSize:9, color:'var(--mute)', marginBottom:4}}>{L.hero.counterC}</div>
              <div style={{fontFamily:'var(--display-font-ar, Italiana), serif', fontSize:26, color:'var(--ink)', lineHeight:1}}>11</div>
              <div className="mono" style={{fontSize:8, color:'var(--mute)', marginTop:3}}>{L.hero.counterD}</div>
            </div>
          </div>
        </div>

        {/* "Show intro" tab — visible when card is dismissed and no pin locked */}
        <button onClick={restoreHeroCard}
          className="mono"
          style={{
            position:'absolute',
            top: 112,
            [lang === 'ar' ? 'right' : 'left']: 48,
            zIndex: 400,
            padding: '10px 16px',
            background: 'rgba(243,238,229,0.92)',
            backdropFilter: 'blur(10px)',
            border: '1px solid var(--line)',
            color: 'var(--ink)',
            fontSize: 10,
            letterSpacing: '0.18em',
            cursor: 'pointer',
            opacity: (heroCardDismissed && !activeNh) ? 1 : 0,
            transform: (heroCardDismissed && !activeNh) ? 'translateY(0)' : 'translateY(-8px)',
            pointerEvents: (heroCardDismissed && !activeNh) ? 'auto' : 'none',
            transition: 'opacity .35s ease, transform .35s ease',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
          <span style={{fontSize: 14, lineHeight: 1}}>＋</span>
          <span>{lang === 'ar' ? 'عرض المقدّمة' : 'SHOW INTRO'}</span>
        </button>

        {/* Hint */}
        <div style={{
          position:'absolute', left:'50%', bottom:24, transform:'translateX(-50%)',
          display:'flex', alignItems:'center', gap:10,
          color:'var(--mute)', fontSize:11, zIndex:400, pointerEvents:'none',
        }}>
          <span style={{width:24, height:1, background:'var(--mute)'}}/>
          <span className="mono">{L.hero.tap}</span>
          <span style={{width:24, height:1, background:'var(--mute)'}}/>
        </div>

        {/* Drawer */}
        <Drawer open={drawerOpen} onClose={closeDrawer} lang={lang}>
          {activeNh && !openProperty && (
            <PropertyList neighborhoodId={activeNh} onOpenProperty={setOpenProperty} L={L} lang={lang}/>
          )}
          {openProperty && (
            <PropertyDetail propertyId={openProperty} onClose={() => setOpenProperty(null)} L={L} lang={lang}/>
          )}
        </Drawer>
      </section>

      <FeaturedStrip L={L} lang={lang} onOpenProperty={(id) => {
        const prop = window.DATA.PROPERTIES.find(p => p.id === id);
        if (prop) {
          setActiveNh(prop.nh);
          setOpenProperty(id);
          setDrawerOpen(true);
          window.scrollTo({top:0, behavior:'smooth'});
        }
      }}/>

      <AboutSection L={L} lang={lang}/>
      <Testimonials L={L} lang={lang}/>
      <GuidesSection L={L} lang={lang}/>
      <ContactCTA L={L} lang={lang}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio value={t.palette}
          options={['sand', 'pearl', 'ink']}
          onChange={(v) => setTweak('palette', v)} />
        <TweakSection label="Type pairing" />
        <TweakSelect value={t.typePairing}
          options={Object.keys(TYPE_PAIRINGS).map(k => ({value:k, label:TYPE_PAIRINGS[k].label}))}
          onChange={(v) => setTweak('typePairing', v)} />
        <TweakSection label="Map mood" />
        <TweakRadio value={t.mapMood}
          options={['daylight', 'dusk', 'nocturne']}
          onChange={(v) => setTweak('mapMood', v)} />
      </TweaksPanel>
    </>
  );
}

// ---- Drawer ----
function Drawer({open, onClose, children, lang}) {
  const isRTL = lang === 'ar';
  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onClose}
        style={{
          position:'absolute', inset:0,
          background: open ? 'rgba(18,18,18,0.22)' : 'transparent',
          pointerEvents: open ? 'auto' : 'none',
          transition:'background .3s',
          zIndex:5,
        }}
      />
      {/* Panel — slides from the side away from the "reading flow" (right in LTR, left in RTL) */}
      <aside style={{
        position:'absolute', top:0, bottom:0,
        [isRTL ? 'left' : 'right']: 0,
        width:'min(560px, 92vw)',
        background:'var(--ivory)',
        [isRTL ? 'borderRight' : 'borderLeft']:'1px solid var(--line)',
        transform: open ? 'translateX(0)' : `translateX(${isRTL ? '-' : ''}105%)`,
        transition:'transform .45s cubic-bezier(0.4, 0, 0.15, 1)',
        zIndex:6,
        overflow:'auto',
        boxShadow: open ? `${isRTL ? '30' : '-30'}px 0 60px -20px rgba(18,18,18,0.2)` : 'none',
      }}>
        {/* Close */}
        <button onClick={onClose}
          className="mono"
          style={{
            position:'absolute', top:20,
            [isRTL ? 'left' : 'right']: 20, zIndex:3,
            width:36, height:36, border:'1px solid var(--line)',
            display:'flex', alignItems:'center', justifyContent:'center',
            background:'var(--ivory)', color:'var(--ink)', fontSize:14,
          }}>✕</button>
        {children}
      </aside>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);