/* Home — hero, about, values, the 6ft advantage, client strip, CTA. */
const { useState: useStateH } = React;
const NSH = window.__FT_NS;
const { Button: BtnH, Card: CardH, IconTile: TileH, Icon: IconH, ClientLogo: ClientH, Badge: BadgeH } = NSH;
const DH = window.FT_DATA;

function Hero({ go }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-ink)', padding: '140px 0 120px' }}>
      <img src="./assets/photography/skyline-dubai-bw.png" alt=""
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1)', opacity: .55 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg,#000 0%, rgb(0 0 0 / .82) 48%, rgb(0 0 0 / .35) 100%)' }} />
      <div style={{ position: 'absolute', top: 0, right: 0, width: '46%', height: '100%', background: 'var(--brand-yellow)', opacity: .06, transform: 'skewX(12deg)' }} />
      <div style={{ ...window.ftContainer, position: 'relative' }}>
        <Reveal>
          <div style={{ display: 'inline-flex', gap: 8, marginBottom: 26 }}>
            <BadgeH tone="brandOutline" size="sm" icon="badge-check">ISO 9001:2015</BadgeH>
            <BadgeH tone="brandOutline" size="sm" icon="badge-check">ISO 45001:2018</BadgeH>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontSize: 'clamp(40px, 5.6vw, 72px)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.04, margin: 0, maxWidth: 940 }}>
            Turning Complex Visions Into<br /><span style={{ color: 'var(--brand-yellow)' }}>Seamless Realities</span>
          </h1>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ marginTop: 26, fontSize: 20, lineHeight: 1.625, color: 'var(--text-secondary)', maxWidth: 768 }}>
            At 6ft Projects, we transform complex visions into seamless realities — delivering expert project
            management consultancy services across construction, technology, and business operations in the UAE,
            KSA, Egypt, and throughout the GCC.
          </p>
        </Reveal>
        <Reveal delay={340}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, marginTop: 36 }}>
            <BtnH variant="primary" size="lg" iconAfter="arrow-right" onClick={() => go('services')}>Explore Our Services</BtnH>
            <BtnH variant="outline" size="lg" onClick={() => go('contact')}>Get In Touch</BtnH>
          </div>
        </Reveal>
        <Reveal delay={460}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 48, marginTop: 72, paddingTop: 32, borderTop: '1px solid rgb(255 255 255 / .12)' }}>
            {[['Founded', '2022'], ['Headquarters', 'Abu Dhabi'], ['Markets', 'UAE · KSA · Egypt · GCC'], ['Sectors served', '10']].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: 11, letterSpacing: 'var(--tracking-widest)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</div>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 22, marginTop: 6 }}>{v}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ValueCard({ v, i }) {
  return (
    <Reveal delay={i * 80}>
      <CardH variant="muted" interactive padding={32} style={{ height: '100%' }}>
        <TileH icon={v.icon} size={64} />
        <h3 style={{ fontSize: 20, fontWeight: 700, margin: '8px 0 0', color: 'var(--brand-yellow)' }}>{v.title}</h3>
        <p style={{ fontSize: 15, lineHeight: 1.625, color: 'var(--text-secondary)' }}>{v.body}</p>
      </CardH>
    </Reveal>
  );
}

function HomeScreen({ go }) {
  return (
    <div>
      <Hero go={go} />

      <Section tone="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,420px)', gap: 64, alignItems: 'start' }} className="ft-2col">
          <div>
            <SectionHead eyebrow="About Us" title="Transforming complex challenges into streamlined success stories" />
            <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)' }}>{t}</p>
                </Reveal>
              ))}
              <Reveal delay={300}><div><BtnH variant="outline" iconAfter="arrow-right" onClick={() => go('about')}>More about 6ft</BtnH></div></Reveal>
            </div>
          </div>
          <Reveal delay={160}>
            <img src="./assets/photography/drawing-review-bw.png" alt="Design review over architectural drawings"
              style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 'var(--radius-lg)', filter: 'grayscale(1)', display: 'block' }} />
          </Reveal>
        </div>
      </Section>

      <Section tone="card">
        <SectionHead align="center" eyebrow="Our Core Values" title="Precision, collaboration, excellence, innovation"
          lede="Founded on principles of integrity, innovation, and excellence, 6ft Projects Management Consultancy transforms complex challenges into streamlined success stories across diverse industries." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 32 }}>
          {DH.values.map((v, i) => <ValueCard key={v.title} v={v} i={i} />)}
        </div>
      </Section>

      <Section tone="page">
        <SectionHead eyebrow="Why Choose Us" title="The 6ft Advantage" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: '32px 48px' }}>
          {DH.advantage.map(([t, b], i) => (
            <Reveal key={t} delay={(i % 4) * 70}>
              <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', paddingBottom: 20, borderBottom: '1px solid var(--border-subtle)' }}>
                <span style={{ color: 'var(--brand-yellow)', flexShrink: 0, marginTop: 2 }}><IconH name="check" size={20} /></span>
                <div>
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 17 }}>{t}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-secondary)', marginTop: 5 }}>{b}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section tone="brand" pad={112}>
        <div style={{ textAlign: 'center' }}>
          <Reveal>
            <h2 style={{ fontSize: 'clamp(30px,3.6vw,48px)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', color: 'var(--text-on-brand)', margin: 0 }}>
              Ready to Elevate Your Next Project?
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 20, lineHeight: 1.625, color: 'rgb(0 0 0 / .78)', maxWidth: 640, margin: '20px auto 0' }}>
              Let's discuss how we can help you achieve your goals with precision and excellence.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ marginTop: 34, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
              <BtnH variant="ink" size="lg" onClick={() => go('contact')}>Contact Us Today</BtnH>
              <BtnH variant="inverse" size="lg" icon="download" onClick={() => go('contact')}>Download Company Profile</BtnH>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}

Object.assign(window, { HomeScreen });