// Language chooser splash — shown on first visit, then stored in localStorage.

function LanguageChooser({ onChoose }) {
  const [entering, setEntering] = React.useState(null);

  function choose(lang) {
    setEntering(lang);
    // Apply immediately so the transition reads the right typography
    window.setLang(lang);
    setTimeout(() => onChoose(lang), 650);
  }

  return (
    <div style={{
      position:'fixed', inset:0, zIndex:9999,
      background:'#f3eee5',
      display:'flex', alignItems:'center', justifyContent:'center',
      opacity: entering ? 0 : 1,
      transition:'opacity .55s ease',
      pointerEvents: entering ? 'none' : 'auto',
    }}>
      {/* faint architectural lines backdrop */}
      <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice"
        style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.08, pointerEvents:'none'}}>
        <defs>
          <pattern id="lc-grid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M48 0H0V48" fill="none" stroke="#8a6a3b" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#lc-grid)"/>
      </svg>

      {/* A very light UAE silhouette in the background */}
      <svg viewBox="0 0 400 300" style={{position:'absolute', right:-60, bottom:-40, width:540, opacity:0.06, pointerEvents:'none'}}>
        <path d="M60,150 L90,120 L140,110 L180,120 L210,105 L245,115 L280,100 L310,90 L340,110 L345,145 L320,180 L290,195 L250,205 L210,210 L170,215 L130,210 L95,200 L70,180 Z"
          fill="#8a6a3b"/>
      </svg>

      <div style={{textAlign:'center', position:'relative', zIndex:2, padding:'0 24px'}}>
        {/* Monogram */}
        <div style={{
          fontFamily:"'Italiana', serif",
          fontSize:72,
          letterSpacing:'0.16em',
          lineHeight:1,
          marginBottom:14,
          color:'#121212',
        }}>
          HAMZA
        </div>
        <div style={{
          fontFamily:"'Archivo Narrow', sans-serif",
          textTransform:'uppercase',
          letterSpacing:'0.3em',
          fontSize:10,
          color:'#8a6a3b',
          marginBottom:72,
        }}>
          Private Real Estate · UAE &nbsp;·&nbsp; <span style={{fontFamily:"'Noto Kufi Arabic', sans-serif", letterSpacing:'0.1em'}}>عقارات خاصة · الإمارات</span>
        </div>

        {/* Divider line */}
        <div style={{
          width:1, height:48,
          background:'#c9bfae',
          margin:'0 auto 44px',
        }}/>

        {/* Two language pillars */}
        <div style={{
          display:'flex',
          gap:56,
          alignItems:'stretch',
          justifyContent:'center',
        }}>
          <ChoiceCard
            label="English"
            sub="Welcome"
            locale="en"
            serif="'Italiana', serif"
            onClick={() => choose('en')}
            dir="ltr"
          />
          <div style={{width:1, background:'#c9bfae'}}/>
          <ChoiceCard
            label="العربية"
            sub="أهلاً وسهلاً"
            locale="ar"
            serif="'Amiri', serif"
            onClick={() => choose('ar')}
            dir="rtl"
          />
        </div>

        <div style={{
          marginTop:72,
          fontFamily:"'Archivo Narrow', sans-serif",
          textTransform:'uppercase',
          letterSpacing:'0.3em',
          fontSize:9,
          color:'#6b6258',
        }}>
          Dubai &nbsp;·&nbsp; Abu Dhabi &nbsp;·&nbsp; Est. 2011
        </div>
      </div>
    </div>
  );
}

function ChoiceCard({ label, sub, serif, onClick, dir, locale }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      dir={dir}
      style={{
        display:'flex', flexDirection:'column', alignItems:'center',
        padding:'28px 48px',
        background:'transparent', border:'none', cursor:'pointer',
        transition:'all .3s ease',
        color: hover ? '#8a6a3b' : '#121212',
      }}>
      <div style={{
        fontFamily: serif,
        fontSize:56,
        lineHeight:1,
        marginBottom:14,
        fontWeight: 400,
      }}>
        {label}
      </div>
      <div style={{
        fontFamily: locale === 'ar' ? "'Amiri', serif" : "'Italiana', serif",
        fontStyle: locale === 'ar' ? 'normal' : 'italic',
        fontSize:18,
        color:'#6b6258',
        marginBottom:24,
      }}>
        {sub}
      </div>
      <div style={{
        display:'flex', alignItems:'center', gap:8,
        fontFamily:"'Archivo Narrow', sans-serif",
        textTransform:'uppercase', letterSpacing:'0.3em', fontSize:9,
        opacity: hover ? 1 : 0.7,
        transition:'opacity .25s',
      }}>
        <span>{dir === 'ltr' ? 'Enter' : 'الدخول'}</span>
        <span style={{
          width: hover ? 28 : 20, height:1, background:'currentColor',
          transition:'width .25s',
        }}/>
        <span>{dir === 'ltr' ? '→' : '←'}</span>
      </div>
    </button>
  );
}

window.LanguageChooser = LanguageChooser;
