/* eslint-disable */
// Section 05 — Services. Label + thin vertical rule, 4-column grid of image cards.

const SERVICES = [
  {
    title: 'Joinery & custom fabrication',
    tone: 'workshop',
    src: 'assets/uc-planer.jpeg',
    body: "Engineering, production, and assembly of custom wooden components including doors, wall cladding, counters, and trims. CAD-based shop drawings, CNC machining, edge banding, and precision assembly ensure dimensional accuracy and finish consistency.",
  },
  {
    title: 'Interior fit-outs',
    tone: 'detail',
    src: 'assets/uc-interior-credenza.jpeg',
    body: "End-to-end engineering and execution of interior works covering detailed drawings, material coordination, site measurements, and installation. Scope includes wall and ceiling panels, cabinetry, partitions, and integrated joinery coordinated with MEP and architectural requirements.",
  },
  {
    title: 'Furniture production',
    tone: 'grain',
    src: 'assets/uc-assembly.jpeg',
    body: "Design engineering and mass production of loose and fixed furniture for residential, hospitality, and commercial spaces. Operations include structural design verification, CNC cutting, veneer pressing, sanding, finishing, and assembly with high-quality solid wood and composite materials.",
  },
  {
    title: 'Specialised fabrication',
    tone: 'raking',
    src: 'assets/uc-curved-plywood.jpeg',
    body: "Engineering and execution of complex, non-standard wooden and hybrid elements such as curved panels, acoustic systems, perforated surfaces, and mixed-material assemblies combining wood, metal, glass, and solid surfaces.",
  },
];

const Services = () => (
  <section
    id="work"
    data-screen-label="05 services"
    style={{
      background: 'var(--color-off-white)',
      color: 'var(--color-near-black)',
      padding: '120px 0',
    }}
  >
    <div className="uc-shell">
      <Reveal>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, marginBottom: 72 }}>
          <div className="uc-eyebrow">Our services</div>
          <div style={{ flex: 1, height: 1, background: 'rgba(9,11,10,0.18)', marginTop: 9 }} />
          <div className="uc-eyebrow">04 disciplines</div>
        </div>

        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 700,
          fontSize: 'clamp(40px, 5.4vw, 72px)',
          lineHeight: 0.98,
          letterSpacing: '-0.03em',
          textTransform: 'none',
          margin: '0 0 96px',
          maxWidth: '20ch',
        }}>What the workshop <span className="uc-bracket">does</span>.</h2>
      </Reveal>

      <Reveal stagger>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 32,
        }}>
          {SERVICES.map((s, i) => (
            <div key={s.title} style={{ display: 'flex', flexDirection: 'column' }}>
              <div className="uc-svc-img" style={{ overflow: 'hidden', marginBottom: 24 }}>
                <Photo tone={s.tone} src={s.src} alt={s.title} aspect="4 / 3" />
              </div>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 700,
                fontSize: 13,
                letterSpacing: '0.06em',
                color: 'var(--color-deep-brown)',
                opacity: 0.45,
                marginBottom: 16,
              }}>0{i + 1}</div>
              <h3 style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 700,
                fontSize: 20,
                lineHeight: 1.18,
                letterSpacing: '-0.012em',
                textTransform: 'none',
                color: 'var(--color-deep-brown)',
                margin: '0 0 18px',
              }}>{s.title}</h3>
              <p style={{
                fontFamily: 'var(--font-body)',
                fontSize: 13.5,
                lineHeight: 1.7,
                margin: 0,
                color: 'rgba(9,11,10,0.85)',
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { Services });