// Hadid Group — projects portfolio + CTA band
const { SectionLabel, Button, ProjectCard, Icon } = window.HadidGroupDesignSystem_9f7d08;

function Projects() {
  const { useState } = React;
  const S = window.SITE;
  const cats = ['All', 'Residential', 'Commercial', 'Office', 'Mixed-Use'];
  const [active, setActive] = useState('All');
  const shown = active === 'All' ? S.projects : S.projects.filter((p) => p.category === active);

  return (
    <section id="projects" 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: 34 }}>
          <div>
            <Reveal><SectionLabel rule="before">Featured Projects</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' }}>
              Our Projects
            </Reveal>
          </div>
          <Reveal delay={140}><Button variant="outline" icon="arrow-right" onClick={() => window.scrollToId('gallery')}>View gallery</Button></Reveal>
        </div>

        {/* filter chips */}
        <Reveal delay={120} style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 34 }}>
          {cats.map((c) => {
            const on = c === active;
            return (
              <button key={c} onClick={() => setActive(c)} style={{
                fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '0.74rem', letterSpacing: '0.1em', textTransform: 'uppercase',
                padding: '9px 18px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
                background: on ? 'var(--gold-500)' : 'transparent', color: on ? 'var(--navy-950)' : 'var(--on-dark-body)',
                border: `1px solid ${on ? 'transparent' : 'var(--border-dark)'}`, transition: 'all var(--dur-fast)',
              }}>{c}</button>
            );
          })}
        </Reveal>

        <div className="hg-projects-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {shown.map((p, i) => (
            <Reveal key={p.title} delay={(i % 3) * 80}>
              <ProjectCard image={p.image} category={p.category} title={p.title} location={p.location} meta={p.meta} height={400} />
            </Reveal>
          ))}
        </div>
      </div>

      {/* CTA gold band */}
      <Reveal delay={80} style={{ marginTop: 'clamp(64px, 8vw, 110px)' }}>
        <div style={{ background: 'var(--gold-band)' }}>
          <div className="hg-cta-band" style={{
            maxWidth: 'var(--container)', margin: '0 auto', padding: 'clamp(36px, 5vw, 56px) var(--gutter)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 30, flexWrap: 'wrap',
          }}>
            <div>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', lineHeight: 1.1, color: 'var(--navy-950)' }}>
                Let's Build Your Next Project Together
              </h3>
              <p style={{ margin: '10px 0 0', fontFamily: 'var(--font-sans)', fontSize: '1.05rem', color: 'rgba(8,18,30,0.72)' }}>We turn ambitious ideas into landmark realities.</p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
              <Button variant="solid-dark" size="lg" onClick={() => window.scrollToId('contact')}>Contact us</Button>
              <a href={`tel:${window.SITE.phoneRaw}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
                <span style={{ display: 'inline-flex', width: 50, height: 50, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--navy-950)' }}>
                  <Icon name="phone" size={22} color="var(--gold-400)" />
                </span>
                <span style={{ display: 'flex', flexDirection: 'column' }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(8,18,30,0.6)' }}>Call us</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: '1.05rem', fontWeight: 700, color: 'var(--navy-950)' }}>{window.SITE.phone}</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}
window.Projects = Projects;