// Page sections: intro/header, about Hamza, guides, trust, footer.

const { useState: useStateS } = React;

function SiteHeader({ onNav, L, lang, onToggleLang }) {
  const isRTL = lang === 'ar';
  const items = [
    [L.nav.map, 'map'],
    [L.nav.residences, 'residences'],
    [L.nav.guides, 'guides'],
    [L.nav.about, 'about'],
    [L.nav.contact, 'contact'],
  ];
  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      display:'flex', justifyContent:'space-between', alignItems:'center',
      padding:'22px 36px',
      background:'linear-gradient(to bottom, rgba(243,238,229,0.96), rgba(243,238,229,0.7) 70%, transparent)',
      pointerEvents:'none',
    }}>
      <div style={{pointerEvents:'auto'}}>
        <div style={{fontFamily: isRTL ? "'Amiri', serif" : 'Italiana, serif', fontSize:22, letterSpacing: isRTL ? 0 : '0.12em', lineHeight:1}}>
          {isRTL ? 'حمزة' : 'HAMZA'}
        </div>
        <div className="mono" style={{color:'var(--mute)', marginTop:4, fontSize:9}}>
          {isRTL ? 'عقارات خاصة · الإمارات' : 'Private Real Estate · UAE'}
        </div>
      </div>
      <nav style={{pointerEvents:'auto', display:'flex', gap:32, alignItems:'center'}}>
        {items.map(([label, id]) => (
          <button key={id} className="mono" onClick={() => onNav(id)}
            style={{color:'var(--ink-2)', fontSize:10}}>
            {label}
          </button>
        ))}
        <button onClick={onToggleLang}
          className="mono"
          style={{
            color:'var(--bronze)', fontSize:10,
            paddingInlineStart:20, borderInlineStart:'1px solid var(--line)',
          }}>
          {lang === 'ar' ? 'EN' : 'ع'}
        </button>
      </nav>
    </header>
  );
}

// ---- About Hamza: editorial split ----
function AboutSection({ L, lang }) {
  const isRTL = lang === 'ar';
  const a = L.about;
  return (
    <section id="about" style={{
      padding:'140px 48px 120px',
      background:'var(--paper)',
      borderTop:'1px solid var(--line)',
      borderBottom:'1px solid var(--line)',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'start'}}>
        <div style={{position:'sticky', top:120}}>
          <div style={{
            width:'100%', aspectRatio:'3/4',
            backgroundImage:`url(assets/hamza-portrait.png)`,
            backgroundSize:'cover', backgroundPosition:'center 20%',
            border:'1px solid var(--line)',
          }}/>
          <div style={{
            marginTop:16, paddingTop:14,
            borderTop:'1px solid var(--line-2)',
            fontSize:12, color:'var(--mute)',
            display:'flex', justifyContent:'space-between',
          }}>
            <span className="mono">{isRTL ? a.sig : 'Hamza Eleiwat'}</span>
            <span className="mono">{a.est}</span>
          </div>
        </div>

        <div>
          <div className="mono" style={{color:'var(--bronze)', marginBottom:18}}>{a.kicker}</div>
          <h2 className="display" style={{fontSize:64, lineHeight:1.08, margin:'0 0 32px', maxWidth:640, letterSpacing: isRTL ? 0 : '0.01em'}}>
            {a.title}
          </h2>

          <div style={{fontSize:16, lineHeight:1.85, color:'var(--ink-2)', maxWidth:620, marginBottom:24}}>
            {a.p1}
          </div>
          <div style={{fontSize:16, lineHeight:1.85, color:'var(--ink-2)', maxWidth:620, marginBottom:48}}>
            {a.p2}
          </div>

          {/* Signature */}
          <div style={{
            fontFamily: isRTL ? "'Amiri', serif" : 'Italiana, serif',
            fontSize:36, opacity:0.7, marginBottom:64,
            transform: isRTL ? 'rotate(2deg)' : 'rotate(-2deg)',
            display:'inline-block',
          }}>
            {a.sig}
          </div>

          <div style={{
            display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32,
            paddingTop:40, borderTop:'1px solid var(--line)',
          }}>
            <Stat big={a.stat1[0]} unit={a.stat1[1]} label={a.stat1[2]}/>
            <Stat big={a.stat2[0]} unit={a.stat2[1]} label={a.stat2[2]}/>
            <Stat big={a.stat3[0]} unit={a.stat3[1]} label={a.stat3[2]}/>
            <Stat big={a.stat4[0]} unit={a.stat4[1]} label={a.stat4[2]}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({big, unit, label}) {
  return (
    <div>
      <div className="display" style={{fontSize:40, lineHeight:1, marginBottom:4}}>
        {big}<span style={{fontSize:16, color:'var(--bronze)', marginInlineStart:4}}>{unit}</span>
      </div>
      <div className="mono" style={{color:'var(--mute)', fontSize:9}}>{label}</div>
    </div>
  );
}

// ---- Testimonial row ----
function Testimonials({ L }) {
  const quotes = L.quotes.items;
  return (
    <section style={{
      padding:'120px 48px',
      background:'var(--ivory)',
      borderBottom:'1px solid var(--line-2)',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div className="mono" style={{color:'var(--bronze)', marginBottom:16}}>{L.quotes.kicker}</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:48}}>
          {quotes.map((q, i) => (
            <div key={i}>
              <div className="display" style={{fontSize:24, lineHeight:1.45, marginBottom:24, color:'var(--ink)'}}>
                <span style={{color:'var(--bronze)'}}>“</span>{q.q}<span style={{color:'var(--bronze)'}}>”</span>
              </div>
              <div className="mono" style={{color:'var(--ink-2)', marginBottom:4}}>{q.who}</div>
              <div className="mono" style={{color:'var(--mute)', fontSize:9}}>{q.where}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Guides ----
function GuidesSection({ L, lang }) {
  const isRTL = lang === 'ar';
  // Merge structural guide IDs/lengths from DATA with translated strings from I18N
  const { GUIDES: RAW } = window.DATA;
  const GUIDES = RAW.map(g => {
    const tr = (isRTL && window.I18N_GUIDES[g.id]) ? window.I18N_GUIDES[g.id] : null;
    return tr ? { id: g.id, ...tr } : g;
  });
  const [open, setOpen] = useStateS('fees');
  return (
    <section id="guides" style={{
      padding:'140px 48px 120px',
      background:'var(--paper)',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:80, marginBottom:56}}>
          <div>
            <div className="mono" style={{color:'var(--bronze)', marginBottom:16}}>{L.guides.kicker}</div>
            <h2 className="display" style={{fontSize:64, lineHeight:1.08, margin:0, letterSpacing: isRTL ? 0 : '0.005em'}}>
              {L.guides.title1}<br/>{L.guides.title2}
            </h2>
          </div>
          <div style={{paddingTop:16}}>
            <div style={{fontSize:16, lineHeight:1.85, color:'var(--ink-2)', maxWidth:560}}>
              {L.guides.intro}
            </div>
          </div>
        </div>

        <div style={{borderTop:'1px solid var(--line)'}}>
          {GUIDES.map((g) => (
            <GuideAccordion key={g.id} guide={g} open={open === g.id} onToggle={() => setOpen(open === g.id ? null : g.id)}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function GuideAccordion({guide, open, onToggle}) {
  return (
    <div style={{borderBottom:'1px solid var(--line)'}}>
      <button onClick={onToggle}
        style={{
          width:'100%', display:'grid', gridTemplateColumns:'60px 1fr 40px',
          alignItems:'center', gap:24,
          padding:'28px 0', textAlign:'start',
          color:'var(--ink)', transition:'opacity .2s',
        }}>
        <div className="mono" style={{color:'var(--bronze)'}}>
          {guide.items.length.toString().padStart(2,'0')}
        </div>
        <div>
          <div className="display" style={{fontSize:28, lineHeight:1.2, marginBottom: open ? 8 : 0, transition:'margin .3s'}}>
            {guide.title}
          </div>
          {!open && (
            <div style={{fontSize:13.5, color:'var(--mute)', lineHeight:1.6, maxWidth:720}}>
              {guide.summary}
            </div>
          )}
        </div>
        <div style={{
          justifySelf:'end',
          fontFamily:'Italiana, serif', fontSize:28,
          transform: open ? 'rotate(45deg)' : 'none',
          transition:'transform .3s',
          color:'var(--bronze)',
        }}>+</div>
      </button>

      {open && (
        <div style={{paddingBottom:40, paddingInlineStart:84, display:'grid', gridTemplateColumns:'1fr', gap:0}}>
          <div style={{fontSize:15, lineHeight:1.8, color:'var(--ink-2)', maxWidth:720, marginBottom:28}}>
            {guide.summary}
          </div>
          <div>
            {guide.items.map((item, i) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'1.4fr 1fr 1.6fr',
                gap:24, padding:'18px 0',
                borderTop:'1px solid var(--line-2)',
                alignItems:'start',
              }}>
                <div className="display" style={{fontSize:18, lineHeight:1.3}}>{item.label}</div>
                <div className="mono" style={{color:'var(--bronze)'}}>{item.value}</div>
                <div style={{fontSize:13.5, color:'var(--mute)', lineHeight:1.65}}>{item.note}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ---- Contact / CTA footer ----
function ContactCTA({ L, lang }) {
  const isRTL = lang === 'ar';
  const c = L.contact;
  return (
    <section id="contact" style={{
      background:'var(--ink)', color:'var(--ivory)',
      padding:'120px 48px 80px',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:80, marginBottom:96}}>
          <div>
            <div className="mono" style={{color:'var(--gold)', marginBottom:24}}>{c.kicker}</div>
            <h2 className="display" style={{fontSize:88, lineHeight:1.05, margin:'0 0 36px', letterSpacing: isRTL ? 0 : '0.005em', color:'var(--ivory)'}}>
              {c.title1}<br/>{c.title2}<br/>
              <em style={{fontStyle: isRTL ? 'normal' : 'italic', color:'var(--gold)'}}>{c.title3}</em>
            </h2>
            <div style={{fontSize:17, lineHeight:1.8, color:'#d9cdb4', maxWidth:560, marginBottom:40}}>
              {c.body}
            </div>

            <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
              <a href="https://wa.me/971561755171" target="_blank" rel="noopener"
                style={{
                  display:'inline-flex', alignItems:'center', gap:10,
                  padding:'16px 28px', background:'var(--ivory)', color:'var(--ink)',
                  fontFamily: isRTL ? "'Noto Kufi Arabic', sans-serif" : 'Archivo Narrow, sans-serif',
                  letterSpacing: isRTL ? '0.1em' : '0.2em',
                  fontSize:11, textTransform: isRTL ? 'none' : 'uppercase', textDecoration:'none',
                }}>
                <WAIconDark/> {c.waBtn}
              </a>
              <a href="mailto:hamza.eleiwat@psinv.pro"
                className="mono"
                style={{
                  padding:'16px 28px', border:'1px solid #6b6258',
                  fontSize:10, color:'var(--ivory)',
                  display:'inline-flex', alignItems:'center',
                }}>
                hamza.eleiwat@psinv.pro
              </a>
            </div>
          </div>

          <div style={{paddingTop:40}}>
            <ContactRow label={c.directLine} value="+971 56 175 5171"/>
            <ContactRow label={c.emailLabel} value="hamza.eleiwat@psinv.pro"/>
            <ContactRow label={c.office} value={c.officeAddr}/>
            <ContactRow label={c.appt} value={c.apptAddr}/>
            <ContactRow label={c.hours} value={c.hoursVal}/>
            <ContactRow label={c.langs} value={c.langsVal}/>
          </div>
        </div>

        <div style={{
          borderTop:'1px solid #2a2622',
          paddingTop:36,
          display:'flex', justifyContent:'space-between', alignItems:'end',
          flexWrap:'wrap', gap:24,
        }}>
          <div>
            <div style={{
              fontFamily: isRTL ? "'Amiri', serif" : 'Italiana, serif',
              fontSize:40, letterSpacing: isRTL ? 0 : '0.14em', lineHeight:1, marginBottom:6,
            }}>
              {isRTL ? 'حمزة' : 'HAMZA'}
            </div>
            <div className="mono" style={{color:'#6b6258', fontSize:9}}>{c.tagline}</div>
          </div>
          <div className="mono" style={{color:'#6b6258', fontSize:9, textAlign: isRTL ? 'start' : 'end', lineHeight:1.9}}>
            {c.rera}<br/>
            {c.adrec}<br/>
            {c.copy}
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactRow({label, value}) {
  return (
    <div style={{
      display:'grid', gridTemplateColumns:'1fr 1.6fr',
      gap:20, padding:'18px 0',
      borderTop:'1px solid #2a2622',
    }}>
      <div className="mono" style={{color:'#6b6258', fontSize:9, paddingTop:4}}>{label}</div>
      <div className="display" style={{fontSize:20, lineHeight:1.4, color:'var(--ivory)'}}>{value}</div>
    </div>
  );
}

function WAIconDark() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
      <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.297-.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>
  );
}

// ---- Featured residences strip ----
function FeaturedStrip({ onOpenProperty, L, lang }) {
  const isRTL = lang === 'ar';
  const { PROPERTIES, NEIGHBORHOODS } = window.DATA;
  const featured = ['p1', 'p10', 'p12', 'p16', 'p5'].map(id => PROPERTIES.find(p => p.id === id)).filter(Boolean);
  return (
    <section id="residences" style={{
      padding:'120px 48px 100px',
      background:'var(--ivory)',
      borderTop:'1px solid var(--line-2)',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'end',
          marginBottom:56, gap:24, flexWrap:'wrap',
        }}>
          <div>
            <div className="mono" style={{color:'var(--bronze)', marginBottom:16}}>{L.featured.kicker}</div>
            <h2 className="display" style={{fontSize:56, lineHeight:1.15, margin:0, maxWidth:720}}>
              {L.featured.title}
            </h2>
          </div>
          <div className="mono" style={{color:'var(--mute)', maxWidth:320, lineHeight:1.9}}>
            {L.featured.aside}
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr 1fr', gridTemplateRows:'340px 340px', gap:20}}>
          {featured.map((p, i) => {
            const rawNh = NEIGHBORHOODS.find(n => n.id === p.nh);
            const trNh = isRTL ? window.I18N_NEIGHBORHOODS[p.nh] : null;
            const nhName = trNh ? trNh.name : rawNh.name;
            const emirate = isRTL ? (rawNh.emirate === 'Dubai' ? L.mapUI.dubai : L.mapUI.abuDhabi) : rawNh.emirate;
            const big = i === 0;
            return (
              <button key={p.id} onClick={() => onOpenProperty(p.id)}
                style={{
                  gridColumn: big ? 'span 1' : 'auto',
                  gridRow: big ? 'span 2' : 'auto',
                  position:'relative',
                  overflow:'hidden',
                  textAlign:'start', color:'var(--ivory)',
                  border:'none', padding:0, cursor:'pointer',
                  background:'#121212',
                }}>
                <div style={{
                  position:'absolute', inset:0,
                  backgroundImage:`url(${p.gallery[0]})`,
                  backgroundSize:'cover', backgroundPosition:'center',
                  transition:'transform .8s ease',
                }} className="fs-bg"/>
                <div style={{
                  position:'absolute', inset:0,
                  background:'linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0) 55%)',
                }}/>
                <div style={{
                  position:'absolute', insetInlineStart:24, insetInlineEnd:24, bottom:22,
                }}>
                  <div className="mono" style={{color:'var(--gold)', marginBottom:8, fontSize:9}}>
                    {nhName} · {emirate}
                  </div>
                  <div className="display" style={{fontSize: big ? 34 : 22, lineHeight:1.2, marginBottom:6}}>
                    {p.title}
                  </div>
                  <div className="display" style={{fontSize: big ? 22 : 16, opacity:0.85}}>
                    {p.price}
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        <style>{`
          button:hover .fs-bg { transform: scale(1.04); }
        `}</style>
      </div>
    </section>
  );
}

window.SiteHeader = SiteHeader;
window.AboutSection = AboutSection;
window.Testimonials = Testimonials;
window.GuidesSection = GuidesSection;
window.ContactCTA = ContactCTA;
window.FeaturedStrip = FeaturedStrip;