/* eslint-disable */
// Section 08 — Our Promises. Light. 4 portrait cards, wood-texture bg + dark text overlay.

const PROMISES = [
  { label: 'Client-centred philosophy with tailored solutions.', tone: 'grain', src: 'assets/uc-heritage-table.jpeg' },
  { label: 'Alignment with Vision 2030 sustainability targets.',  tone: 'workshop', src: 'assets/uc-finishing-grain.jpeg' },
  { label: 'Integration of modern technologies & smart materials.', tone: 'detail', src: 'assets/uc-finish-samples.jpeg' },
  { label: 'Collaborative mindset with architects, consultants & clients.', tone: 'raking', src: 'assets/uc-blueprints-bw.jpeg' },
];

const Promises = () => (
  <section
    data-screen-label="08 promises"
    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: 56 }}>
          <div className="uc-eyebrow">Our promises</div>
          <div style={{ flex: 1, height: 1, background: 'rgba(9,11,10,0.18)', marginTop: 9 }} />
          <div className="uc-eyebrow">04 commitments</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 80px',
          maxWidth: '18ch',
        }}>Thoughtful by <span className="uc-bracket">design</span>.</h2>
      </Reveal>

      <Reveal stagger>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }}>
          {PROMISES.map((p, i) => (
            <Photo
              key={i}
              tone={p.tone}
              src={p.src}
              alt={p.label}
              aspect="3 / 4"
              style={{ display: 'flex', alignItems: 'flex-end' }}
            >
              {/* number watermark */}
              <div style={{
                position: 'absolute', top: 20, left: 24,
                fontFamily: 'var(--font-display)',
                fontWeight: 800,
                fontSize: 14, letterSpacing: '0.18em',
                color: 'var(--color-acid-yellow)',
                zIndex: 3,
              }}>0{i + 1}</div>

              {/* bottom panel */}
              <div style={{
                position: 'relative', zIndex: 3,
                width: '100%',
                padding: '24px 24px 22px',
                background: 'rgba(59, 34, 25, 0.86)',
                color: 'var(--color-off-white)',
              }}>
                <div style={{
                  fontFamily: 'var(--font-body)',
                  fontSize: 14, lineHeight: 1.55,
                  margin: 0,
                }}>{p.label}</div>
              </div>
            </Photo>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { Promises });