/* About Us — story, vision & mission, what sets us apart, leadership teaser, presence & standards. Full leadership page: LeadershipScreen. */
const NSA = window.__FT_NS;
const { Button: BtnA, Card: CardA, Icon: IconA, IconTile: TileA, Badge: BadgeA } = NSA;
const DA = window.FT_DATA;

function AboutScreen({ go }) {
  const lead = DA.leadership[0];
  const strengths = [
    ['Senior-led delivery', 'Directors and discipline leads run each commission personally, with decades of regional experience behind them.'],
    ['Whole-lifecycle scope', 'Feasibility and advisory through design management, supervision, commissioning and handover — one accountable team.'],
    ['Healthcare specialism', 'Clinical planning, medical equipment coordination and health-authority approvals for hospitals and specialist centres.'],
    ['Digital-first controls', 'BIM coordination with integrated cost and programme reporting keeps every stakeholder on one source of truth.']
  ];
  return (
    <div>
      <PageHero eyebrow="About Us" photo="drawing-review-bw.png"
        title="Transforming complex challenges into streamlined success stories"
        lede="An independent project management consultancy for owners who need certainty on cost, programme and quality — from first brief to operational handover." />

      <Section tone="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,420px)', gap: 64, alignItems: 'start' }} className="ft-2col">
          <div>
            <SectionHead eyebrow="Who we are" title="A senior consultancy built for the region's most demanding programmes" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 720 }}>
              {[
                'Founded in 2022 on principles of integrity, innovation, and excellence, 6ft Projects Management Consultancy is a premier firm headquartered in Abu Dhabi, UAE.',
                'We deliver expert consultancy across construction, technology, healthcare, and business operations. Our full spectrum of PMO services includes strategic planning, execution management, monitoring, control, and continuous improvement.',
                'We are trusted by leading organizations across the UAE, KSA, GCC, and Egypt to deliver measurable results.'
              ].map((t, i) => (
                <Reveal key={i} delay={i * 90}><p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-secondary)', margin: 0 }}>{t}</p></Reveal>
              ))}
            </div>
          </div>
          <Reveal delay={160}>
            <div style={{ display: 'grid', gap: 20 }}>
              {[['Vision', 'To be the project management consultancy the region turns to when a project must not fail.'],
                ['Mission', "To protect our clients' objectives through disciplined planning, transparent reporting and senior involvement on every engagement."]].map(([k, v]) => (
                  <CardA key={k} padding={28}>
                    <div style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: 11, letterSpacing: 'var(--tracking-widest)', textTransform: 'uppercase', color: 'var(--brand-yellow)' }}>{k}</div>
                    <p style={{ fontSize: 17, lineHeight: 1.6, margin: '12px 0 0', color: 'var(--text-primary)' }}>{v}</p>
                  </CardA>
                ))}
            </div>
          </Reveal>
        </div>
      </Section>

      <Section tone="card">
        <SectionHead eyebrow="What sets us apart" title="Delivered by the people who sign off the work" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 32 }}>
          {strengths.map(([t, b], i) => (
            <Reveal key={t} delay={(i % 4) * 80}>
              <div style={{ borderTop: '2px solid var(--text-primary)', paddingTop: 20 }}>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 13, letterSpacing: '.06em', color: 'var(--brand-yellow)' }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 20, marginTop: 10 }}>{t}</div>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--text-secondary)', margin: '10px 0 0' }}>{b}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section tone="ink">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,220px) minmax(0,1fr)', gap: 48, alignItems: 'center' }} className="ft-2col">
          <Reveal>
            <img src={'./assets/photography/' + lead.photo} alt={lead.name}
              style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', objectPosition: '50% 20%', borderRadius: 'var(--radius-lg)', display: 'block' }} />
          </Reveal>
          <Reveal delay={120}>
            <Eyebrow>Leadership</Eyebrow>
            <h2 style={{ fontSize: 'clamp(28px,3vw,40px)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', margin: 0 }}>{lead.name}</h2>
            <div style={{ fontSize: 16, color: 'var(--text-secondary)', marginTop: 10 }}>{lead.role} · {lead.title}</div>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--text-secondary)', margin: '20px 0 0', maxWidth: 640 }}>More than 20 years across project management, construction management, healthcare development, facility management and corporate leadership.</p>
            <div style={{ marginTop: 28 }}><BtnA variant="primary" iconAfter="arrow-right" onClick={() => go('leadership')}>Leadership & key expertise</BtnA></div>
          </Reveal>
        </div>
      </Section>

      <Section tone="card">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 48 }}>
          <div>
            <SectionHead eyebrow="Where we work" title="Four countries, one standard" />
            <div style={{ display: 'grid', gap: 14 }}>
              {DA.presence.map((p) => (
                <div key={p.country} style={{ display: 'flex', gap: 16, alignItems: 'baseline', paddingBottom: 14, borderBottom: '1px solid var(--border-subtle)' }}>
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 16, minWidth: 200 }}>{p.country}</div>
                  <div style={{ fontSize: 15, color: 'var(--text-secondary)' }}>{p.cities.join(' · ')}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <SectionHead eyebrow="Standards" title="Licensed, certified, accountable" />
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 24 }}>
              {DA.certifications.filter((c) => c.held).map((c) => <BadgeA key={c.code} tone="brand" icon="badge-check">{c.code}</BadgeA>)}
            </div>
            <div style={{ fontSize: 14, color: 'var(--text-muted)', marginBottom: 12 }}>Licensed activities — {DA.licence.authority}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
              {DA.licence.activities.map((a) => (
                <li key={a} style={{ display: 'flex', gap: 10, fontSize: 15, color: 'var(--text-secondary)' }}>
                  <span style={{ color: 'var(--brand-yellow)', flexShrink: 0, marginTop: 3 }}><IconA name="check" size={16} /></span>{a}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 28 }}><BtnA variant="outline" iconAfter="arrow-right" onClick={() => go('certifications')}>Certifications in detail</BtnA></div>
          </div>
        </div>
      </Section>

      <Section tone="brand" pad={96}>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 28 }}>
          <div>
            <h2 style={{ fontSize: 'clamp(24px,2.6vw,32px)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', margin: 0, color: 'var(--text-on-brand)' }}>See how we deliver</h2>
            <p style={{ fontSize: 17, color: 'rgb(0 0 0 / .78)', marginTop: 12 }}>Reference projects across healthcare, residential, hospitality and fit-out.</p>
          </div>
          <BtnA variant="ink" size="lg" iconAfter="arrow-right" onClick={() => go('projects')}>View reference projects</BtnA>
        </div>
      </Section>
    </div>
  );
}

Object.assign(window, { AboutScreen });