/* Certifications + Contact screens. */
const NSC = window.__FT_NS;
const { Card: CardC, Badge: BadgeC, Button: BtnC, Icon: IconC, IconTile: TileC } = NSC;
const DC = window.FT_DATA;

function CertificationsScreen({ go }) {
  return (
    <div>
      <PageHero eyebrow="Quality, Sustainability &amp; Certifications" photo="bim-workstation-bw.png"
        title="Committed to Excellence and Safety"
        lede="Two certifications held, two more in progress — plus the quality, HSE and sustainability frameworks behind every engagement." />

      <Section tone="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(400px,1fr))', gap: 32 }}>
          {DC.certifications.map((c, i) => (
            <Reveal key={c.code} delay={(i % 2) * 100}>
              <CardC variant={c.held ? 'default' : 'ghost'} padding={36} style={{ height: '100%' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
                  <TileC icon={c.held ? 'badge-check' : 'clock'} size={56} tone={c.held ? 'brand' : 'muted'} />
                  <BadgeC tone={c.held ? 'brandOutline' : 'muted'} size="sm" icon={c.held ? 'badge-check' : 'clock'}>
                    {c.held ? 'Certified' : 'In progress'}
                  </BadgeC>
                </div>
                <h3 style={{ fontSize: 28, fontWeight: 700, margin: '14px 0 0', letterSpacing: 'var(--tracking-tight)', color: c.held ? 'var(--brand-yellow)' : 'var(--text-primary)' }}>{c.code}</h3>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 17, color: 'var(--text-primary)' }}>{c.name}</div>
                <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-secondary)', marginTop: 4 }}>{c.body}</p>
              </CardC>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section tone="card">
        <SectionHead eyebrow="Frameworks" title="Certification is a working method, not a wall plaque"
          lede="Each standard maps to something a client sees on their project every month." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 32 }}>
          {[['ISO 9001:2015', 'Documented procedures, controlled deliverables, and a corrective-action loop on every non-conformance.'],
            ['ISO 45001:2018', 'Hazard identification before mobilisation, toolbox records, and incident reporting inside 24 hours.'],
            ['ISO 21502', 'Governance, roles and stage gates aligned to the international project-management standard.'],
            ['ISO 10006', 'Quality planning embedded in the schedule rather than inspected at the end.'],
            ['Sustainability &amp; green building', 'Energy and water efficiency, responsible material selection, and LEED / BREEAM certification support.'],
            ['Continuous improvement', 'Lessons-learned reviews at every stage gate, fed back into templates, checklists and the risk register.'],
            ['Professional memberships', 'To be supplied — company memberships, listed separately from individual staff accreditations.'],
            ['Staff qualifications', 'To be supplied — individual accreditations held by team members.']].map(([k, v], i) => (
              <Reveal key={k} delay={(i % 4) * 70}>
                <div style={{ borderTop: '2px solid var(--brand-yellow)', paddingTop: 18 }}>
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 17 }}>{k}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--text-secondary)', marginTop: 10 }}>{v}</p>
                </div>
              </Reveal>
            ))}
        </div>
      </Section>

      <Section tone="page" pad={96}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 32, alignItems: 'center', justifyContent: 'space-between', padding: 40, borderRadius: 'var(--radius-lg)', background: 'var(--surface-muted)' }}>
          <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
            <TileC icon="file-badge" size={64} />
            <div>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 20 }}>Certificates on request</div>
              <div style={{ fontSize: 15, color: 'var(--text-secondary)', marginTop: 6 }}>Certificate numbers, issuing body and validity dates are supplied with any prequalification pack.</div>
            </div>
          </div>
          <BtnC variant="primary" iconAfter="arrow-right" onClick={() => go('contact')}>Request the pack</BtnC>
        </div>
      </Section>
    </div>
  );
}

function ContactScreen() {
  return (
    <div>
      <PageHero eyebrow="Get In Touch" tone="brand"
        title="Let's Build Something Great Together"
        lede="Ready to elevate your next project? Let's discuss how we can help you achieve your goals." />

      <Section tone="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 32 }}>
          {[['map-pin', 'Headquarters', DC.company.address, null],
            ['mail', 'Email', DC.company.email, 'mailto:info@6ft.ae'],
            ['globe', 'Website', DC.company.site, 'https://6ft.ae'],
            ['linkedin', 'LinkedIn', DC.company.linkedin, 'https://linkedin.com/company/6ft-pmc/']].map(([ic, k, v, href], i) => (
              <Reveal key={k} delay={i * 70}>
                <CardC interactive padding={28} style={{ height: '100%' }}>
                  <TileC icon={ic} size={56} />
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 17, marginTop: 8 }}>{k}</div>
                  {href
                    ? <a href={href} style={{ fontSize: 15, color: 'var(--text-secondary)', wordBreak: 'break-word' }}>{v}</a>
                    : <div style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{v}</div>}
                </CardC>
              </Reveal>
            ))}
        </div>
      </Section>

      <Section tone="page" pad={0}>
        <div style={{ background: 'var(--gradient-yellow)', borderRadius: 'var(--radius-2xl)', padding: 48, marginBottom: 128 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,320px)', gap: 48, alignItems: 'start' }} className="ft-2col">
            <div>
              <h2 style={{ fontSize: 'clamp(26px,3vw,36px)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', color: 'var(--text-on-brand)', margin: 0 }}>Start a conversation</h2>
              <p style={{ fontSize: 18, color: 'rgb(0 0 0 / .78)', margin: '12px 0 28px', maxWidth: 560 }}>Send us the project brief — scope, location and target dates — and we'll come back to you within one working day.</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
                <BtnC variant="ink" size="lg" icon="mail" as="a" href="mailto:info@6ft.ae">info@6ft.ae</BtnC>
                <BtnC variant="inverse" size="lg" icon="linkedin" as="a" href="https://linkedin.com/company/6ft-pmc/" target="_blank" rel="noopener">LinkedIn</BtnC>
              </div>
              <div style={{ marginTop: 28, fontSize: 15, color: 'rgb(0 0 0 / .72)', lineHeight: 1.7 }}>{DC.company.address}</div>
            </div>
            <div style={{ background: 'var(--brand-black)', borderRadius: 'var(--radius-lg)', padding: 28 }}>
              <div style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: 11, letterSpacing: 'var(--tracking-widest)', textTransform: 'uppercase', color: 'var(--brand-yellow)' }}>What happens next</div>
              <ol style={{ margin: '18px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 18 }}>
                {[['01', 'We read the brief', 'Within one working day.'],
                  ['02', 'We call you', 'A 30-minute scoping conversation.'],
                  ['03', 'You get a proposal', 'Scope, deliverables, fee basis, timeline.']].map(([n, t, b]) => (
                    <li key={n} style={{ display: 'flex', gap: 14 }}>
                      <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 20, color: 'var(--brand-yellow)', lineHeight: 1.1 }}>{n}</span>
                      <span>
                        <span style={{ display: 'block', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 15, color: '#fff' }}>{t}</span>
                        <span style={{ display: 'block', fontSize: 13, color: 'var(--text-secondary)', marginTop: 3 }}>{b}</span>
                      </span>
                    </li>
                  ))}
              </ol>
              <div style={{ marginTop: 26, paddingTop: 20, borderTop: '1px solid rgb(255 255 255 / .12)', display: 'flex', gap: 14, alignItems: 'center' }}>
                <img src="./assets/qr-6ft.png" alt="6ft QR code" style={{ width: 64, height: 64, background: '#fff', borderRadius: 6, display: 'block' }} />
                <div style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>Scan for contact details and the company profile.</div>
              </div>
            </div>
          </div>
        </div>
      </Section>

      <Section tone="card">
        <SectionHead eyebrow="FAQ" title="Frequently Asked Questions" lede="Find answers to common questions about our services, process, and expertise." />
        <Accordion items={DC.faq} />
      </Section>

    </div>
  );
}

function Accordion({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 896 }}>
      {items.map(([q, a], i) => {
        const isOpen = open === i;
        return (
          <div key={q} style={{
            border: '2px solid ' + (isOpen ? 'var(--border-brand)' : 'var(--border-default)'),
            borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--surface-page)',
            transition: 'border-color var(--dur-slow) var(--ease)'
          }}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
              width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
              padding: '20px 24px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
              fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 17, color: 'var(--text-primary)'
            }}>
              {q}
              <span style={{ color: 'var(--brand-yellow)', flexShrink: 0, transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-slow) var(--ease)' }}>
                <IconC name="chevron-down" size={20} />
              </span>
            </button>
            <div style={{ maxHeight: isOpen ? 260 : 0, overflow: 'hidden', transition: 'max-height var(--dur-slow) var(--ease)' }}>
              <p style={{ padding: '0 24px 22px', fontSize: 15, lineHeight: 1.7, color: 'var(--text-secondary)', margin: 0 }}>{a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { CertificationsScreen, ContactScreen, Accordion });