// Hadid Group — Why Choose Us + Locations
const { SectionLabel, FeatureCard, Badge, Icon, Button } = window.HadidGroupDesignSystem_9f7d08;

function WhyUs() {
  const S = window.SITE;
  return (
    <section id="why" style={{ background: 'var(--cream)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ maxWidth: 620, marginBottom: 'clamp(40px, 5vw, 64px)' }}>
          <Reveal><SectionLabel rule="before" variant="light">Why Choose Us</SectionLabel></Reveal>
          <Reveal delay={90} as="h2" style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', lineHeight: 1.08, color: 'var(--navy-850)' }}>
            Built on Four Pillars
          </Reveal>
          <Reveal delay={150} as="p" style={{ margin: '18px 0 0', fontFamily: 'var(--font-sans)', fontSize: '1.05rem', lineHeight: 1.7, color: 'var(--text-body)' }}>
            The principles that have guided every Hadid Group project for over two decades.
          </Reveal>
        </div>
        <div className="hg-why-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(28px, 3vw, 44px)' }}>
          {S.why.map((w, i) => (
            <Reveal key={w.title} delay={(i % 4) * 70}>
              <FeatureCard icon={w.icon} number={w.number} title={w.title} description={w.desc} variant="light" />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Locations() {
  const S = window.SITE;
  return (
    <section id="locations" style={{ background: 'var(--navy-900)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div className="hg-section-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 30, flexWrap: 'wrap', marginBottom: 'clamp(40px, 5vw, 60px)' }}>
          <div>
            <Reveal><SectionLabel rule="before">Our Locations</SectionLabel></Reveal>
            <Reveal delay={90} as="h2" style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', lineHeight: 1.08, color: '#fff' }}>
              Where We Operate
            </Reveal>
          </div>
          <Reveal delay={140} as="p" style={{ maxWidth: 380, margin: 0, fontFamily: 'var(--font-sans)', fontSize: '1rem', lineHeight: 1.7, color: 'var(--on-dark-body)' }}>
            Three offices across Europe and the Middle East, anchored by our Prague headquarters.
          </Reveal>
        </div>

        <div className="hg-loc-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {S.locations.map((l, i) => (
            <Reveal key={l.city} delay={(i % 3) * 90}>
              <div style={{ background: 'var(--navy-800)', border: '1px solid var(--border-dark)', borderRadius: 'var(--radius-sm)', overflow: 'hidden', height: '100%' }}>
                <div style={{ position: 'relative', height: 210, backgroundImage: `url(${l.image})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,18,30,0.1) 0%, rgba(8,18,30,0.7) 100%)' }} />
                  <div style={{ position: 'absolute', top: 14, left: 14 }}><Badge variant="glass">{l.tag}</Badge></div>
                </div>
                <div style={{ padding: '26px 26px 30px' }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                    <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.7rem', color: '#fff' }}>{l.city}</h3>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: '0.82rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gold-500)' }}>{l.country}</span>
                  </div>
                  <p style={{ margin: '14px 0 0', display: 'flex', gap: 10, fontFamily: 'var(--font-sans)', fontSize: '0.92rem', lineHeight: 1.6, color: 'var(--on-dark-body)' }}>
                    <Icon name="map-pin" size={18} strokeWidth={1.8} color="var(--gold-500)" style={{ marginTop: 2 }} />
                    {l.address}
                  </p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;
window.Locations = Locations;