// Hadid Group — hero
const { Button, SectionLabel, Icon } = window.HadidGroupDesignSystem_9f7d08;

function Hero() {
  const heroImg = 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2000&q=80';
  return (
    <section id="home" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      {/* background image with slow zoom */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${heroImg})`, backgroundSize: 'cover', backgroundPosition: 'center',
        animation: 'hgKenburns 22s ease-out forwards',
      }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(5,16,28,0.94) 0%, rgba(7,19,32,0.82) 38%, rgba(8,18,30,0.42) 72%, rgba(8,18,30,0.25) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(5,16,28,0.5) 0%, rgba(5,16,28,0) 22%, rgba(5,16,28,0) 70%, rgba(5,16,28,0.7) 100%)' }} />

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 'var(--container)', margin: '0 auto', padding: '120px var(--gutter) 80px', width: '100%' }}>
        <div style={{ maxWidth: 680 }}>
          <Reveal delay={80}>
            <SectionLabel rule="before">Hadid Group · Established 2001</SectionLabel>
          </Reveal>
          <Reveal delay={180} as="h1" style={{
            margin: '24px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(3rem, 6.2vw, 5.6rem)', lineHeight: 1.0, letterSpacing: '-0.012em', color: '#fff',
          }}>
            Building Excellence.<br />Creating <span style={{ color: 'var(--gold-500)', fontStyle: 'italic' }}>Legacies.</span>
          </Reveal>
          <Reveal delay={300} as="p" style={{
            margin: '28px 0 0', maxWidth: 540, fontFamily: 'var(--font-sans)',
            fontSize: 'clamp(1rem, 1.3vw, 1.18rem)', lineHeight: 1.65, color: 'rgba(225,231,238,0.9)',
          }}>
            A leading international contracting and construction company delivering landmark
            residential, commercial, and infrastructure projects across Europe, Jordan, and Lebanon.
          </Reveal>
          <Reveal delay={420} style={{ display: 'flex', flexWrap: 'wrap', gap: 16, marginTop: 38 }}>
            <Button variant="primary" size="lg" icon="arrow-right" onClick={() => window.scrollToId('projects')}>Our projects</Button>
            <Button variant="outline" size="lg" onClick={() => window.scrollToId('about')}>About us</Button>
          </Reveal>
        </div>
      </div>

      {/* scroll cue */}
      <button onClick={() => window.scrollToId('about')} aria-label="Scroll down" style={{
        position: 'absolute', bottom: 30, left: '50%', transform: 'translateX(-50%)', zIndex: 2,
        background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      }}>
        <span style={{ fontSize: '0.62rem', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase' }}>Scroll</span>
        <span style={{ animation: 'hgBob 1.8s ease-in-out infinite' }}><Icon name="chevron-down" size={20} strokeWidth={2} /></span>
      </button>
    </section>
  );
}
window.Hero = Hero;