// Hadid Group — About + Stats band
const { SectionLabel, Button, StatCard, Icon } = window.HadidGroupDesignSystem_9f7d08;

function About() {
  const img = 'https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&w=1200&q=80';
  return (
    <section id="about" 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-about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 'clamp(40px, 6vw, 90px)', alignItems: 'center' }}>
          {/* image */}
          <Reveal>
            <div style={{ position: 'relative' }}>
              <div style={{
                height: 'clamp(360px, 42vw, 540px)', borderRadius: 'var(--radius-sm)', overflow: 'hidden',
                backgroundImage: `url(${img})`, backgroundSize: 'cover', backgroundPosition: 'center',
                boxShadow: 'var(--shadow-card-dark)',
              }} />
              <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--radius-sm)', background: 'linear-gradient(180deg, rgba(8,18,30,0) 55%, rgba(8,18,30,0.45) 100%)' }} />
              {/* floating badge */}
              <div style={{
                position: 'absolute', right: -18, bottom: -22, background: 'var(--gold-500)',
                padding: '24px 30px', borderRadius: 'var(--radius-sm)', boxShadow: 'var(--shadow-lg)',
                display: 'flex', flexDirection: 'column', gap: 2,
              }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '2.6rem', lineHeight: 1, color: 'var(--navy-950)' }}>25+</span>
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '0.78rem', letterSpacing: '0.06em', color: 'rgba(8,18,30,0.78)', textTransform: 'uppercase' }}>Years of Excellence</span>
              </div>
              {/* corner accent */}
              <div style={{ position: 'absolute', left: -14, top: -14, width: 70, height: 70, borderTop: '2px solid var(--gold-500)', borderLeft: '2px solid var(--gold-500)' }} />
            </div>
          </Reveal>

          {/* text */}
          <div>
            <Reveal><SectionLabel rule="before">About Hadid Group</SectionLabel></Reveal>
            <Reveal delay={90} as="h2" style={{ margin: '22px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', lineHeight: 1.08, color: '#fff' }}>
              Trust. Quality.<br /><span style={{ color: 'var(--gold-500)' }}>Commitment.</span>
            </Reveal>
            <Reveal delay={160} as="p" style={{ margin: '24px 0 0', maxWidth: 560, fontFamily: 'var(--font-sans)', fontSize: '1.02rem', lineHeight: 1.72, color: 'var(--on-dark-body)' }}>
              Founded in 2001 by <strong style={{ color: '#fff', fontWeight: 600 }}>Sami Hadid</strong>, Hadid Group has grown from a regional
              contractor into an established international construction group. From our Prague headquarters we deliver
              complex developments across Central Europe and the Middle East.
            </Reveal>
            <Reveal delay={220} as="p" style={{ margin: '16px 0 0', maxWidth: 560, fontFamily: 'var(--font-sans)', fontSize: '1.02rem', lineHeight: 1.72, color: 'var(--on-dark-body)' }}>
              Two decades on, our reputation rests on a simple principle — build to the highest standard, deliver on every
              promise, and create assets that stand for generations.
            </Reveal>

            <Reveal delay={280} style={{ display: 'flex', flexWrap: 'wrap', gap: '14px 32px', margin: '26px 0 0' }}>
              {['ISO 9001 Certified', 'International Project Delivery', 'In-House Engineering'].map((t) => (
                <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, color: 'var(--on-dark-body)', fontSize: '0.92rem', fontWeight: 500 }}>
                  <Icon name="check" size={18} strokeWidth={2.4} color="var(--gold-500)" />{t}
                </span>
              ))}
            </Reveal>

            <Reveal delay={340} style={{ marginTop: 34 }}>
              <Button variant="outline" icon="arrow-right" onClick={() => window.scrollToId('services')}>Read more</Button>
            </Reveal>
          </div>
        </div>
      </div>

      {/* stats band */}
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <Reveal delay={120} style={{ marginTop: 'clamp(56px, 7vw, 96px)' }}>
          <div className="hg-stats-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, borderTop: '1px solid var(--border-dark)', paddingTop: 40 }}>
            {window.SITE.stats.map((s) => <StatCard key={s.label} icon={s.icon} value={s.value} label={s.label} />)}
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.About = About;