// HOME page
function PageHome({ go }) {
  const featured = window.ATG.PROJECTS.filter(p => p.featured);
  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-media">
          <img src="media/home-hero-banner.webp" alt="Hero project interior" />
        </div>
        <div className="wrap hero-inner">
          <div className="row row-12" style={{ alignItems: 'end' }}>
            <div className="col-span-8">
              <div className="eyebrow rise" style={{ color: '#C8C1B0' }}>
                <span className="idx" style={{ color: 'var(--bronze-soft)' }}>00</span>Dubai · Riyadh &middot; Since 2009
              </div>
              <h1 className="mt-4 rise rise-d1">
                Interior fit-out &amp; <span className="editorial">turnkey design-and-build</span>
                <span style={{ color: '#C8C1B0' }}> across the UAE &amp; KSA.</span>
              </h1>
              <p className="lead mt-4 rise rise-d2" style={{ color: '#DCD5C5', maxWidth: '34em' }}>
                350+ delivered projects in hospitality, F&amp;B, commercial and residential &mdash;
                designed, joined and MEP-installed under one roof, on one programme.
              </p>
              <div className="mt-6 rise rise-d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn--inv btn--lg" onClick={() => go('contact')}>Start a project <span className="arr">→</span></button>
                <button className="btn btn--ghost btn--lg" style={{ color: '#F2EEE5', borderColor: 'rgba(255,255,255,.4)' }} onClick={() => go('projects')}>See selected work</button>
              </div>
            </div>
            <div className="col-span-4">
              <div className="rise rise-d3" style={{ display: 'flex', flexDirection: 'column', gap: 18, color: '#DCD5C5' }}>
                <div className="badge"><span className="dot"></span>ISO 9001 &middot; 14001 &middot; 45001</div>
                <div className="badge"><span className="dot"></span>30,000 sq ft in-house joinery</div>
                <div className="badge"><span className="dot"></span>Design + Build under one roof</div>
                <div className="badge"><span className="dot"></span>Two offices &middot; UAE + KSA</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* INTRO / STATS */}
      <section className="section">
        <div className="wrap">
          <div className="row row-12" style={{ alignItems: 'baseline' }}>
            <div className="col-span-7">
              <div className="eyebrow"><span className="idx">01</span>Who we are</div>
              <h2 className="mt-3">
                A&nbsp;design-led <span className="editorial">build contractor</span>, not a design studio that subcontracts.
              </h2>
            </div>
            <div className="col-span-5">
              <p className="lead muted">
                Founded in 2009 by Atti Abu Assi and Tareq Khalafawi with a team of six, we now operate from Dubai and Riyadh
                with in-house design, a 30,000 sq ft joinery facility, MEP, and FF&amp;E procurement. Every project carries a single point of accountability.
              </p>
              <div className="mt-4">
                <button className="linkmore" onClick={() => go('about')}>About A&amp;T <span className="arr">→</span></button>
              </div>
            </div>
          </div>

          <div className="row row-4 mt-8" style={{ rowGap: 32 }}>
            {window.ATG.STATS.map(s => <StatBlock key={s.lbl} s={s} />)}
          </div>
        </div>
      </section>

      {/* SELECTED WORK */}
      <section className="section section--stone">
        <div className="wrap">
          <SectionHead
            idx="02"
            eyebrow="Selected work"
            title={<>Built for operators who measure on schedule, finish and detail.</>}
            lead="Recent hospitality and F&B commissions across Dubai and Riyadh. Every project page is a structured case study — brief through outcome — with the materials, joinery and MEP narrated."
          />

          <div className="row row-3 mt-8">
            {featured.map((p, i) => <ProjectCard key={p.id} p={p} go={go} index={i+1} />)}
          </div>

          <div className="mt-6" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
            <p className="muted" style={{ fontSize: 13 }}>
              <span className="tnum">{window.ATG.PROJECTS.length}</span> projects published on this site &mdash; full portfolio numbers 350+.
            </p>
            <button className="linkmore" onClick={() => go('projects')}>All projects <span className="arr">→</span></button>
          </div>
        </div>
      </section>

      {/* SECTORS */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            idx="03"
            eyebrow="Sectors"
            title="Four practice areas, one delivery model."
            lead="Sector-specific portfolios with the same single-accountability turnkey delivery underneath."
          />
          <div className="row row-4 mt-8">
            {window.ATG.SECTORS.map(s => {
              const ct = window.ATG.PROJECTS.filter(p => p.sector === s.id).length;
              return (
                <a key={s.id} className="sector-tile" href={"#sectors/"+s.id} onClick={(e)=>{e.preventDefault(); go('sector:'+s.id);}}>
                  <img src={s.img} alt={s.name + ' interior'} loading="lazy" />
                  <div className="st-text">
                    <div>
                      <div className="st-ct">{ct} published</div>
                      <div className="st-name mt-1">{s.name}</div>
                    </div>
                    <span style={{ fontSize: 18, color: 'rgba(255,255,255,.8)' }}>→</span>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* HOW WE BUILD */}
      <section className="section section--noir">
        <div className="wrap">
          <div className="row row-12" style={{ alignItems: 'baseline' }}>
            <div className="col-span-7">
              <div className="eyebrow" style={{ color: '#C8C1B0' }}><span className="idx" style={{ color: 'var(--bronze-soft)' }}>04</span>How we build</div>
              <h2 className="mt-3" style={{ color: '#F2EEE5' }}>
                The differentiator is &mdash; <span className="editorial" style={{ color: 'var(--bronze-soft)' }}>we own the bench, the panel and the duct.</span>
              </h2>
              <p className="lead mt-4" style={{ color: '#C8C1B0' }}>
                In-house design, a 30,000 sq ft joinery facility and an in-house MEP division. We don&rsquo;t hand off &mdash; we coordinate
                schedules across the same business and absorb the programme risk.
              </p>
              <div className="mt-6">
                <button className="btn btn--inv" onClick={() => go('capability')}>Capability page <span className="arr">→</span></button>
              </div>
            </div>
            <div className="col-span-5">
              <div style={{ borderTop: '1px solid #2A2A2A' }}>
                {[
                  { t: 'In-house design', d: 'Concept, drawing and authority coordination by our own studio.' },
                  { t: '30,000 sq ft joinery', d: 'Millwork, panelling, marble bench and metalwork made on our floor.' },
                  { t: 'MEP', d: 'Mechanical, electrical and plumbing scoped, drawn and installed in-house.' },
                  { t: 'FF&E procurement', d: 'Furniture, fixtures and equipment sourced via supplier collaboration.' },
                ].map((row, i) => (
                  <div key={i} style={{ padding: '20px 0', borderBottom: '1px solid #2A2A2A', display: 'flex', gap: 24, alignItems: 'baseline' }}>
                    <div className="tnum" style={{ width: 32, color: 'var(--bronze-soft)', fontSize: 13, letterSpacing: '0.06em' }}>0{i+1}</div>
                    <div>
                      <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 18, color: '#F2EEE5' }}>{row.t}</div>
                      <div style={{ color: '#ADA89C', fontSize: 13, marginTop: 4 }}>{row.d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="row row-3 mt-8">
            {[
              { img: 'media/capability-in-house-design.webp', t: 'In-house design studio' },
              { img: 'media/capability-joinery.webp', t: '30,000 sq ft joinery facility' },
              { img: 'media/capability-mep.webp', t: 'MEP under one programme' },
            ].map((c, i) => (
              <div key={i}>
                <div className="media-card" style={{ aspectRatio: '4/3' }}>
                  <img src={c.img} alt={c.t} loading="lazy" className="img-fill" />
                </div>
                <div className="mt-2" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'Inter Tight', fontWeight: 500, color: '#F2EEE5', fontSize: 16 }}>{c.t}</span>
                  <span className="tnum" style={{ color: 'var(--bronze-soft)', fontSize: 12, letterSpacing: '0.14em' }}>0{i+1} / 03</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AWARDS + ISO */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            idx="05"
            eyebrow="Recognition"
            title="Attributed awards, certified processes."
            lead="Independent recognition and the international standards that keep our delivery accountable."
          />
          <div className="row row-12 mt-8" style={{ alignItems: 'start' }}>
            <div className="col-span-7">
              {window.ATG.AWARDS.slice(0,5).map(a => (
                <div key={a.yr + a.name + a.cat} className="award-row">
                  <div className="yr tnum">{a.yr}</div>
                  <div className="name">{a.name}</div>
                  <div className="cat">{a.cat}</div>
                  <div className={"result" + (a.result==='Winner' ? ' win' : '')}>{a.result}</div>
                </div>
              ))}
              <div className="mt-4">
                <button className="linkmore" onClick={() => go('awards')}>All awards &amp; accreditations <span className="arr">→</span></button>
              </div>
            </div>
            <div className="col-span-5">
              <div className="eyebrow">Accreditations</div>
              <div className="mt-3" style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {window.ATG.ISO.map(i => (
                  <div key={i.num} className="iso-badge">
                    <div className="iso-num">{i.num}</div>
                    <div>{i.name}</div>
                  </div>
                ))}
              </div>
              <p className="muted mt-4" style={{ fontSize: 13 }}>
                Audited by Bureau Veritas. Use of certification marks subject to scheme rules.
              </p>
              <hr className="rule mt-6" />
              <p className="muted mt-4" style={{ fontSize: 13 }}>
                <span className="editorial" style={{ color: 'var(--ink)', fontSize: 18 }}>&ldquo;Top 10 Most Influential Fit-Out Firms in the Region.&rdquo;</span><br/>
                CID Magazine, attributed.
              </p>
            </div>
          </div>
        </div>
      </section>

      <CtaBand go={go} />
    </main>
  );
}

Object.assign(window, { PageHome });