/* Services + Industries screens. */
const NSS = window.__FT_NS;
const { Card: CardS, IconTile: TileS, Button: BtnS, Badge: BadgeS } = NSS;
const DS = window.FT_DATA;

function ServicesScreen({ go }) {
  return (
    <div>
      <PageHero eyebrow="Our Services" tone="brand"
        title="Specialized Project Management, Engineering &amp; Consultancy Services"
        lede="Five service categories covering the full delivery chain — from development advisory and design management through construction, assurance, handover and operation." />

      <Section tone="page">
        <SectionHead eyebrow="Service Catalogue" title="One accountable team across every discipline"
          lede="Engage a single service, a category, or the full chain from strategy through defects liability. The reporting format and cadence stay the same throughout." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 24 }}>
          {DS.serviceGroups.map((g, i) => (
            <Reveal key={g.title} delay={(i % 3) * 70}>
              <CardS interactive padding={28} style={{ height: '100%' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <TileS icon={g.icon} size={56} />
                  <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 30, color: 'var(--border-default)', lineHeight: 1 }}>{g.n}</span>
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 700, margin: '8px 0 4px' }}>{g.title}</h3>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {g.items.map((x) => (
                    <li key={x} style={{ display: 'flex', gap: 10, fontSize: 14.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
                      <span style={{ flex: '0 0 5px', width: 5, height: 5, borderRadius: 1, background: 'var(--brand-yellow)', marginTop: 8 }} />{x}
                    </li>
                  ))}
                </ul>
              </CardS>
            </Reveal>
          ))}
        </div>
        <div style={{ marginTop: 56, paddingTop: 40, borderTop: '1px solid var(--border-default)' }}>
          <div style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: 12, letterSpacing: 'var(--tracking-widest)', textTransform: 'uppercase', color: 'var(--brand-yellow)', marginBottom: 20 }}>Specialist Services</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {DS.specialistServices.map((c) => <BadgeS key={c} tone="outline">{c}</BadgeS>)}
          </div>
        </div>
      </Section>

      <Section tone="card">
        <SectionHead eyebrow="Our Project Delivery Approach" title="How we deliver"
          lede="Seven stages, each with defined deliverables, a named owner and a decision gate before the next begins." />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {DS.approach.map((s, i) => (
            <Reveal key={s.n} delay={(i % 4) * 60}>
              <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', padding: '20px 24px', borderRadius: 'var(--radius-lg)', background: 'var(--surface-muted)' }}>
                <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 26, color: 'var(--brand-yellow)', lineHeight: 1, flex: '0 0 44px' }}>{s.n}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 18 }}>{s.title}</div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-secondary)', marginTop: 6 }}>{s.body}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(190px,1fr))', gap: 24, marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--border-default)' }}>
          {DS.governance.map(([t, b]) => (
            <div key={t}>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 15 }}>{t}</div>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-secondary)', marginTop: 6 }}>{b}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section tone="page">
        <SectionHead eyebrow="Technology & Innovation" title="Leveraging advanced technologies for superior project outcomes"
          lede="Eight capabilities that keep the owner's view of the project current, evidenced and forecastable." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 24 }}>
          {DS.technology.map((t, i) => (
            <Reveal key={t.title} delay={(i % 3) * 70}>
              <CardS variant="muted" interactive padding={28} style={{ height: '100%' }}>
                <TileS icon={t.icon} size={56} />
                <h3 style={{ fontSize: 18, fontWeight: 700, margin: '8px 0 0' }}>{t.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{t.body}</p>
              </CardS>
            </Reveal>
          ))}
        </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(26px,2.8vw,36px)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', color: 'var(--text-on-brand)', margin: 0 }}>
              Need a scope shaped before you tender?
            </h2>
            <p style={{ fontSize: 18, color: 'rgb(0 0 0 / .78)', marginTop: 12 }}>Send us the brief and we'll come back to you within one working day.</p>
          </div>
          <BtnS variant="ink" size="lg" iconAfter="arrow-right" onClick={() => go('contact')}>Get in touch</BtnS>
        </div>
      </Section>
    </div>
  );
}

function IndustryCard({ s, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={(i % 3) * 70}>
      <CardS variant="bordered" interactive fillOnHover padding={32} hovered={hover} onHoverChange={setHover} style={{ height: '100%' }}>
        <TileS icon={s.icon} size={56} invertOnHover hovered={hover} />
        <h3 style={{ fontSize: 20, fontWeight: 700, margin: '10px 0 0', color: hover ? 'var(--text-on-brand)' : 'var(--text-primary)' }}>{s.title}</h3>
        <p style={{ fontSize: 15, lineHeight: 1.625, color: hover ? 'rgb(0 0 0 / .78)' : 'var(--text-secondary)' }}>{s.body}</p>
      </CardS>
    </Reveal>
  );
}

function IndustriesScreen({ go }) {
  return (
    <div>
      <PageHero eyebrow="Industries We Serve" photo="facade-night-bw.png"
        title="Specialized Expertise Across Diverse Industries"
        lede="Our team delivers specialized expertise across diverse industries and market segments." />

      <Section tone="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 32 }}>
          {DS.industries.map((s, i) => <IndustryCard key={s.title} s={s} i={i} />)}
        </div>
      </Section>

      <Section tone="card">
        <SectionHead eyebrow="Geographic Presence" title="Strong Regional Presence Across MENA"
          lede="Abu Dhabi is home. Delivery teams operate across the Emirates, the Kingdom and Egypt." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 32 }}>
          {DS.presence.map((p, i) => (
            <Reveal key={p.country} delay={i * 80}>
              <div style={{ borderTop: '2px solid var(--brand-yellow)', paddingTop: 20 }}>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 18 }}>{p.country}</div>
                <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {p.cities.map((c) => <li key={c} style={{ fontSize: 15, color: 'var(--text-secondary)' }}>{c}</li>)}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
        <div style={{ marginTop: 48, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {DS.presence.flatMap((p) => p.cities).map((c) => c.replace(' — HQ', '')).filter((c) => !c.startsWith('GCC')).concat(['Kuwait', 'Qatar', 'Bahrain']).map((c) => (
            <BadgeS key={c} tone="outline">{c}</BadgeS>
          ))}
        </div>
      </Section>
    </div>
  );
}

Object.assign(window, { ServicesScreen, IndustriesScreen });
