// Capability, Services, About, Awards, Contact, Sitemap

// === CAPABILITY =======================================================
function PageCapability({ go }) {
  return (
    <main>
      <section style={{ position: 'relative', background: 'var(--noir)', color: '#F2EEE5', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <img src="media/capability-joinery.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: .35 }} />
        </div>
        <div className="wrap" style={{ position: 'relative', padding: '120px 0 100px' }}>
          <div className="eyebrow" style={{ color: '#C8C1B0' }}><span className="idx" style={{ color: 'var(--bronze-soft)' }}>00</span>Capability</div>
          <h1 className="mt-3" style={{ color: '#F2EEE5', maxWidth: '18ch' }}>
            How we <span className="editorial" style={{ color: 'var(--bronze-soft)' }}>actually</span> build.
          </h1>
          <p className="lead mt-4" style={{ color: '#C8C1B0', maxWidth: '40em' }}>
            Most fit-out contractors are a sales office in front of a network of subcontractors.
            We&rsquo;re a 250-person business that owns the design studio, a 30,000 sq ft joinery
            floor, and an MEP division. The handoff is a corridor.
          </p>
        </div>
      </section>

      {/* STATS */}
      <section className="section--sm" style={{ paddingTop: 72 }}>
        <div className="wrap">
          <div className="row row-4">
            {window.ATG.STATS.map(s => <StatBlock key={s.lbl} s={s} />)}
          </div>
        </div>
      </section>

      {/* 3 PILLARS */}
      <section className="section">
        <div className="wrap">
          <SectionHead idx="01" eyebrow="The three rooms" title={<>Design, joinery, MEP &mdash; <span className="editorial">under one roof</span>.</>}
            lead="Three departments, one programme, one schedule, one point of accountability. No subcontractor blame loop." />

          {[
            { idx: '01', t: 'In-house Design Studio', img: 'media/capability-in-house-design.webp', body: 'A full design team handles concept, design development, technical drawing packages, authority coordination, lighting and FF&E specification. We design what we build, so the drawings know what the joinery floor can do.', stats: [['Designers', '20+'], ['Authority submissions', 'In-house'], ['Drawing packages', 'IFC level']] },
            { idx: '02', t: '30,000 sq ft Joinery Facility', img: 'media/capability-joinery.webp', body: 'Our joinery floor produces millwork, panelling, fluted and curved feature elements, marble and stone surfaces, lacquered and veneered cabinetry, and metalwork. Bench, panel and finish are all under our quality control.', stats: [['Workshop area', '30,000 sq ft'], ['Output', 'Bespoke + repeatable'], ['QC', 'Sample-board to sign-off']] },
            { idx: '03', t: 'In-house MEP', img: 'media/capability-mep.webp', body: 'Mechanical, electrical and plumbing scoped, drawn, installed and commissioned by our own team. Live extract for F&B, low-noise services for residential, and base-build coordination for towers and resorts.', stats: [['Live extract', 'F&B-grade'], ['Commissioning', 'In-house'], ['Base-build coord.', 'Daily on-site']] },
          ].map((row, i) => (
            <div key={row.idx} className="row row-12 mt-8" style={{ alignItems: 'center' }}>
              <div className={"col-span-7 " + (i % 2 === 1 ? 'order-r' : '')} style={{ order: i % 2 === 1 ? 2 : 1 }}>
                <div className="media-card" style={{ aspectRatio: '4/3' }}>
                  <img src={row.img} alt={row.t} className="img-fill" loading="lazy" />
                </div>
              </div>
              <div className="col-span-5" style={{ order: i % 2 === 1 ? 1 : 2 }}>
                <div className="eyebrow"><span className="idx">{row.idx}</span>{row.t.split(' ')[0]}</div>
                <h2 className="mt-3" style={{ fontSize: 'clamp(28px, 3.6vw, 48px)' }}>{row.t}</h2>
                <p className="lead mt-3">{row.body}</p>
                <div className="row row-3 mt-6">
                  {row.stats.map(([lbl,v]) => (
                    <div key={lbl} style={{ borderTop: '1px solid var(--line)', paddingTop: 12 }}>
                      <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--graphite)' }}>{lbl}</div>
                      <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 18, marginTop: 4 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PROGRAMME DIAGRAM */}
      <section className="section section--stone">
        <div className="wrap">
          <SectionHead idx="02" eyebrow="Programme" title={<>One sequence, four trades, <span className="editorial">no handoff seams</span>.</>}
            lead="A typical sequence on an A&T project. Because design, joinery and MEP all live on the same business calendar, dependencies collapse and the schedule compresses." />

          <div className="mt-8" style={{ borderTop: '1px solid var(--line)' }}>
            {[
              { wk: 'Wk 01–04', t: 'Design development & authority submissions', d: 'Studio works concept into IFC drawings; authority approvals run in parallel.' },
              { wk: 'Wk 03–06', t: 'Joinery & MEP procurement, prototyping', d: 'Joinery floor produces sample boards; MEP scope priced and committed.' },
              { wk: 'Wk 06–14', t: 'Site fit-out, joinery prefabrication', d: 'Site prep and base-build coordination concurrent with off-site millwork.' },
              { wk: 'Wk 12–18', t: 'Joinery install, finishes, MEP testing', d: 'Sequenced joinery deliveries, marble bookmatching, MEP commissioning.' },
              { wk: 'Wk 17–20', t: 'Snagging, handover, operator training', d: 'Live commissioning, FF&E load-in, post-handover defects programme.' },
            ].map((row, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 200px 1fr', gap: 32, padding: '22px 0', borderBottom: '1px solid var(--line)', alignItems: 'baseline' }}>
                <div className="tnum" style={{ fontFamily: 'Inter Tight', fontWeight: 600, color: 'var(--bronze)', letterSpacing: '0.04em' }}>{row.wk}</div>
                <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 17, letterSpacing: '-0.01em' }}>{row.t}</div>
                <div className="muted" style={{ fontSize: 14 }}>{row.d}</div>
              </div>
            ))}
          </div>
          <p className="muted mt-3" style={{ fontSize: 13, fontStyle: 'italic' }}>
            Indicative programme. Real schedules vary by scope, base-build and operator.
          </p>
        </div>
      </section>

      {/* HONEST */}
      <section className="section">
        <div className="wrap">
          <SectionHead idx="03" eyebrow="The honest line" title="What we do in-house — and what we don&rsquo;t."
            lead="We say so when work is sourced. FF&E is a supplier-collaboration scope: we specify, you sign-off, suppliers deliver, we install." />
          <div className="row row-2 mt-8">
            <div>
              <div className="eyebrow no-rule" style={{ color: 'var(--bronze)' }}>In-house</div>
              <ul style={{ padding: 0, margin: '16px 0 0', listStyle: 'none' }}>
                {['Concept & design development','IFC drawings','Authority submissions','30,000 sq ft joinery','Marble & stone fabrication','Metalwork & feature elements','MEP design & install','Site management','Snagging & defects'].map(t => (
                  <li key={t} style={{ padding: '12px 0', borderBottom: '1px solid var(--line)', display: 'flex', gap: 12, alignItems: 'baseline' }}>
                    <span style={{ color: 'var(--bronze)', fontSize: 14 }}>●</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <div className="eyebrow no-rule">Supplier-sourced &amp; coordinated</div>
              <ul style={{ padding: 0, margin: '16px 0 0', listStyle: 'none' }}>
                {['FF&E — furniture & fixtures','Lighting fixtures (specified, sourced)','Decorative ironmongery','Specialist art commissions','Audio-visual systems','Soft furnishings','Kitchen equipment','Curtain & blind hardware','Greenery & landscape softs'].map(t => (
                  <li key={t} style={{ padding: '12px 0', borderBottom: '1px solid var(--line)', display: 'flex', gap: 12, alignItems: 'baseline' }}>
                    <span style={{ color: 'var(--graphite)', fontSize: 14 }}>○</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

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

// === SERVICES =========================================================
function PageServices({ go }) {
  return (
    <main>
      <section className="section section--sm" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="eyebrow">Services</div>
          <h1 className="mt-3" style={{ fontSize: 'clamp(36px, 5.4vw, 76px)' }}>
            Three services. <span className="editorial">One programme</span>.
          </h1>
          <p className="lead muted mt-3" style={{ maxWidth: '40em' }}>
            Engage us for the full turnkey package or for the fit-out and FF&amp;E only.
            Whatever the entry point, what comes with it is the in-house joinery and MEP.
          </p>
        </div>
      </section>
      <section className="section--sm" style={{ paddingBottom: 96 }}>
        <div className="wrap">
          <div className="row row-3" style={{ rowGap: 32 }}>
            {window.ATG.SERVICES.map((s, i) => (
              <article key={s.id}>
                <div className="media-card" style={{ aspectRatio: '4/5' }}>
                  <img src={s.img} alt={s.name} loading="lazy" className="img-fill" />
                </div>
                <div className="mt-3">
                  <div className="eyebrow no-rule"><span className="idx">{String(i+1).padStart(2,'0')}</span></div>
                  <h3 className="mt-2">{s.name}</h3>
                  <p className="mt-2 muted">{s.blurb}</p>
                  <button className="linkmore mt-3" onClick={() => go('contact')}>Enquire <span className="arr">→</span></button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
      <CtaBand go={go} />
    </main>
  );
}

// === ABOUT ============================================================
function PageAbout({ go }) {
  return (
    <main>
      <section className="section section--sm" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="eyebrow">About</div>
          <div className="row row-12 mt-3" style={{ alignItems: 'baseline' }}>
            <div className="col-span-8">
              <h1 style={{ fontSize: 'clamp(36px, 5.4vw, 76px)' }}>
                Founded in 2009 by <span className="editorial">Atti Abu Assi</span> and <span className="editorial">Tareq Khalafawi</span>. A team of six.
              </h1>
            </div>
            <div className="col-span-4">
              <p className="lead muted">
                Fifteen years on, we operate out of Dubai and Riyadh with 250+ staff, 350+ delivered projects, and a 30,000 sq ft joinery facility.
                The point hasn&rsquo;t changed: own the build.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section className="section">
        <div className="wrap">
          <SectionHead idx="01" eyebrow="2009 → today" title="A short timeline." />
          <div className="timeline mt-8">
            {window.ATG.TIMELINE.map(t => (
              <div className="tl-item" key={t.yr}>
                <div className="tl-year tnum">{t.yr}</div>
                <div className="tl-text">{t.text}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LEADERSHIP */}
      <section className="section section--stone">
        <div className="wrap">
          <SectionHead idx="02" eyebrow="Leadership" title={<>Who runs the work. <span className="editorial">Portraits on request</span>.</>}
            lead="Roster confirmed via public profiles. Portraits TBC with the client &mdash; placeholders below until supplied." />
          <div className="row row-3 mt-8" style={{ rowGap: 32 }}>
            {window.ATG.LEADERSHIP.map(person => (
              <div key={person.name}>
                <div className="media-card" style={{ aspectRatio: '4/5', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'repeating-linear-gradient(45deg, var(--stone-2), var(--stone-2) 8px, var(--line) 8px, var(--line) 9px)' }}>
                  <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', color: 'var(--graphite)', fontSize: 11, letterSpacing: '0.1em' }}>
                    portrait pending
                  </span>
                </div>
                <div className="mt-3">
                  <div style={{ fontFamily: 'Inter Tight', fontWeight: 600, fontSize: 18, letterSpacing: '-0.01em' }}>{person.name}</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{person.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

// === AWARDS ===========================================================
function PageAwards({ go }) {
  return (
    <main>
      <section className="section section--sm" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="eyebrow">Awards &amp; Accreditations</div>
          <div className="row row-12 mt-3" style={{ alignItems: 'baseline' }}>
            <div className="col-span-7">
              <h1 style={{ fontSize: 'clamp(36px, 5.4vw, 76px)' }}>
                Wins, shortlists and the audits that hold them up.
              </h1>
            </div>
            <div className="col-span-5">
              <p className="lead muted">
                Each entry attributed by result, category, body and year. We distinguish winner / highly commended / shortlisted &mdash; no inflated count.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section--sm" style={{ paddingBottom: 80 }}>
        <div className="wrap">
          <div style={{ borderTop: '1px solid var(--line)' }}>
            {window.ATG.AWARDS.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>
        </div>
      </section>

      <section className="section section--stone">
        <div className="wrap">
          <SectionHead idx="01" eyebrow="Certifications" title={<>Audited by <span className="editorial">Bureau Veritas</span>.</>}
            lead="Use of certification marks subject to scheme rules. ISO 45001 supersedes legacy OHSAS 18001." />
          <div className="row row-3 mt-6">
            {window.ATG.ISO.map(i => (
              <div key={i.num} className="iso-badge" style={{ padding: '24px 20px' }}>
                <div className="iso-num" style={{ fontSize: 22 }}>{i.num}</div>
                <div style={{ marginTop: 8 }}>{i.name}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

// === CONTACT / START A PROJECT ========================================
function PageContact({ go, prefill }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    sector: prefill?.sector || '',
    type: '',
    location: '',
    name: '',
    company: '',
    email: '',
    phone: '',
    brief: '',
    file: null,
    consent: false,
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const PROJECT_TYPES = ['Design & Build (turnkey)','Interior Fit-Out','FF&E procurement','Joinery only','Consultation only'];
  const LOCATIONS = ['Dubai, UAE','Abu Dhabi, UAE','Sharjah, UAE','Riyadh, KSA','Jeddah, KSA','Other GCC','International'];

  const canNext = (() => {
    if (step === 1) return !!data.sector;
    if (step === 2) return !!data.type && !!data.location;
    if (step === 3) return data.name && data.email && data.brief && data.consent;
    return true;
  })();

  return (
    <main>
      <section className="section section--sm" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="row row-12" style={{ alignItems: 'baseline' }}>
            <div className="col-span-7">
              <div className="eyebrow">Start a project</div>
              <h1 className="mt-3" style={{ fontSize: 'clamp(36px, 5.4vw, 72px)' }}>
                Tell us what you&rsquo;re <span className="editorial">building</span>.
              </h1>
            </div>
            <div className="col-span-5">
              <p className="lead muted">
                Three steps. Drawings or BOQs optional. We&rsquo;ll come back within one working day from Dubai or Riyadh.
              </p>
              <div className="mt-4" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', fontSize: 13 }}>
                <a href="mailto:info@atginteriors.com" className="linkmore">info@atginteriors.com</a>
                <a href="tel:+97143964121" className="linkmore">+971 4 396 4121</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section--sm" style={{ paddingTop: 24, paddingBottom: 80 }}>
        <div className="wrap">
          <div className="row row-12" style={{ alignItems: 'start' }}>
            <div className="col-span-7">
              <div className="steps">
                {[1,2,3,4].map((n, i) => (
                  <React.Fragment key={n}>
                    <div className={"step-dot " + (n < step ? 'done' : n === step ? 'on' : '')}>
                      <span className="d"></span>
                      <span>0{n} · {['Sector','Project','Brief','Sent'][n-1]}</span>
                    </div>
                    {i < 3 && <div className="step-bar"></div>}
                  </React.Fragment>
                ))}
              </div>

              {step === 1 && (
                <div>
                  <h3 className="mb-3">Which sector?</h3>
                  <div className="opt-grid">
                    {window.ATG.SECTORS.map(s => (
                      <button key={s.id} className={"opt" + (data.sector === s.id ? ' on' : '')} onClick={() => set('sector', s.id)}>
                        <div className="opt-name">{s.name}</div>
                        <div className="opt-desc">{s.blurb}</div>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {step === 2 && (
                <div>
                  <h3 className="mb-3">What kind of engagement?</h3>
                  <div className="opt-grid">
                    {PROJECT_TYPES.map(t => (
                      <button key={t} className={"opt" + (data.type === t ? ' on' : '')} onClick={() => set('type', t)}>
                        <div className="opt-name">{t}</div>
                      </button>
                    ))}
                  </div>
                  <h3 className="mt-6 mb-3">Where is the project?</h3>
                  <div className="opt-grid">
                    {LOCATIONS.map(t => (
                      <button key={t} className={"opt" + (data.location === t ? ' on' : '')} onClick={() => set('location', t)}>
                        <div className="opt-name">{t}</div>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {step === 3 && (
                <div>
                  <h3 className="mb-4">Your details and the brief</h3>
                  <div className="row row-2">
                    <div className="field">
                      <label>Name</label>
                      <input value={data.name} onChange={(e) => set('name', e.target.value)} placeholder="Full name" />
                    </div>
                    <div className="field">
                      <label>Company / Brand</label>
                      <input value={data.company} onChange={(e) => set('company', e.target.value)} placeholder="Optional" />
                    </div>
                    <div className="field">
                      <label>Email</label>
                      <input type="email" value={data.email} onChange={(e) => set('email', e.target.value)} placeholder="name@company.com" />
                    </div>
                    <div className="field">
                      <label>Phone</label>
                      <input value={data.phone} onChange={(e) => set('phone', e.target.value)} placeholder="Optional" />
                    </div>
                  </div>
                  <div className="field mt-4">
                    <label>Brief</label>
                    <textarea value={data.brief} onChange={(e) => set('brief', e.target.value)} placeholder="What are you opening, where, and roughly when? Anything you can share helps." />
                  </div>
                  <div className="field mt-4">
                    <label>Drawings, BOQ or moodboard (optional)</label>
                    <input type="file" onChange={(e) => set('file', e.target.files[0]?.name)} />
                    {data.file && <span className="muted" style={{ fontSize: 13 }}>Attached: {data.file}</span>}
                  </div>
                  <label className="mt-4" style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13, color: 'var(--graphite)' }}>
                    <input type="checkbox" checked={data.consent} onChange={(e) => set('consent', e.target.checked)} style={{ marginTop: 4 }} />
                    <span>I&rsquo;m happy for A&amp;T Group Interiors to contact me about this enquiry. We won&rsquo;t send marketing without consent.</span>
                  </label>
                </div>
              )}

              {step === 4 && (
                <div style={{ paddingTop: 16 }}>
                  <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--bronze)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>✓</div>
                  <h2 className="mt-4">Thanks, {data.name.split(' ')[0] || 'there'}.</h2>
                  <p className="lead mt-3">
                    We&rsquo;ve received your enquiry. A project lead from our {data.location?.includes('KSA') ? 'Riyadh' : 'Dubai'} office will reply within one working day.
                    For anything urgent: <a href="tel:+97143964121" className="linkmore" style={{ paddingBottom: 0, borderBottom: '1px solid currentColor' }}>+971 4 396 4121</a>.
                  </p>
                  <div className="mt-6" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                    <button className="btn" onClick={() => go('projects')}>Browse projects</button>
                    <button className="btn btn--ghost" onClick={() => { setStep(1); setData({ sector:'', type:'', location:'', name:'', company:'', email:'', phone:'', brief:'', file:null, consent:false }); }}>Start another</button>
                  </div>
                </div>
              )}

              {step < 4 && (
                <div className="mt-8" style={{ display: 'flex', gap: 12, justifyContent: 'space-between' }}>
                  <button className="btn btn--ghost" onClick={() => setStep(s => Math.max(1, s - 1))} disabled={step === 1}
                          style={{ opacity: step === 1 ? 0.4 : 1 }}>
                    ← Back
                  </button>
                  <button className="btn" onClick={() => setStep(s => s + 1)} disabled={!canNext} style={{ opacity: canNext ? 1 : 0.4 }}>
                    {step === 3 ? 'Send enquiry' : 'Continue'} <span className="arr">→</span>
                  </button>
                </div>
              )}
            </div>

            {/* RIGHT — OFFICES */}
            <div className="col-span-5">
              <div style={{ background: 'var(--stone)', padding: 28, borderRadius: 4 }}>
                <div className="eyebrow no-rule">Dubai &mdash; primary</div>
                <h3 className="mt-2" style={{ fontSize: 22 }}>API World Tower</h3>
                <p className="mt-2 muted" style={{ fontSize: 14 }}>
                  Floor 804, Sheikh Zayed Road,<br/>
                  P.O. Box 184432, UAE
                </p>
                <p className="mt-3" style={{ fontSize: 14 }}>
                  <a href="tel:+97143964121" className="linkmore" style={{ paddingBottom: 0, borderBottom: '1px solid currentColor' }}>+971 4 396 4121</a>
                </p>
                <hr className="rule mt-6 mb-6" />
                <div className="eyebrow no-rule">Riyadh</div>
                <h3 className="mt-2" style={{ fontSize: 22 }}>Mazaya Tower</h3>
                <p className="mt-2 muted" style={{ fontSize: 14 }}>
                  Floor 602, Al Olaya Street,<br/>
                  Riyadh, KSA
                </p>
                <p className="mt-3" style={{ fontSize: 14 }}>
                  <a href="tel:+966115120056" className="linkmore" style={{ paddingBottom: 0, borderBottom: '1px solid currentColor' }}>+966 11 512 0056</a>
                </p>
                <hr className="rule mt-6 mb-4" />
                <p className="muted" style={{ fontSize: 12, letterSpacing: '0.06em' }}>
                  Map coordinates &amp; opening hours TBC with client.<br/>
                  WhatsApp not yet wired &mdash; landline only.
                </p>
              </div>

              <div className="mt-4" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {window.ATG.ISO.map(i => (
                  <div key={i.num} className="iso-badge" style={{ padding: '10px 12px' }}>
                    <div className="iso-num" style={{ fontSize: 13 }}>{i.num}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// === SITEMAP / fallback ==============================================
function PageSitemap({ go }) {
  const groups = [
    { t: 'Top level', items: [['home','Home'],['projects','Projects'],['sectors','Sectors'],['services','Services'],['capability','Capability'],['about','About'],['awards','Awards'],['contact','Contact']] },
    { t: 'Sectors', items: window.ATG.SECTORS.map(s => ['sector:'+s.id, s.name]) },
    { t: 'Projects', items: window.ATG.PROJECTS.map(p => ['project:'+p.id, p.name + ' — ' + p.location]) },
  ];
  return (
    <main className="section">
      <div className="wrap">
        <h1>Sitemap</h1>
        <div className="row row-3 mt-8">
          {groups.map(g => (
            <div key={g.t}>
              <div className="eyebrow no-rule">{g.t}</div>
              <ul style={{ padding: 0, margin: '12px 0 0', listStyle: 'none' }}>
                {g.items.map(([k, label]) => (
                  <li key={k} style={{ padding: '6px 0' }}>
                    <a href="#" className="linkmore" style={{ borderBottomColor: 'transparent', padding: 0 }} onClick={(e)=>{e.preventDefault(); go(k);}}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { PageCapability, PageServices, PageAbout, PageAwards, PageContact, PageSitemap });