/* eslint-disable */
// Section 04 — Manifesto. Full-bleed dark photo. Yellow brackets flank the quote.

const Manifesto = () => (
  <section
    data-screen-label="04 manifesto"
    style={{
      position: 'relative',
      padding: '130px 0',
      color: '#FDFE78',
      overflow: 'hidden',
    }}
  >
    <Photo tone="detail" src="assets/uc-curved-plywood.jpeg" alt="Craftsman framed by curved plywood forms" style={{ position: 'absolute', inset: 0, height: '100%' }} />
    <div style={{
      position: 'absolute', inset: 0, zIndex: 2,
      background: 'rgba(59, 34, 25, 0.74)',
    }} />

    <div className="uc-shell" style={{ position: 'relative', zIndex: 3 }}>
      <Reveal>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'auto 1fr auto',
          alignItems: 'start',
          gap: 32,
          maxWidth: 980,
          margin: '0 auto',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 800,
            fontSize: 'clamp(80px, 10vw, 140px)',
            lineHeight: 0.7,
            color: '#FDFE78',
            opacity: 0.92,
          }}>[</div>

          <p style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 700,
            fontSize: 'clamp(22px, 2.4vw, 34px)',
            lineHeight: 1.32,
            letterSpacing: '-0.015em',
            textTransform: 'none',
            color: '#FDFE78',
            margin: 0,
            textAlign: 'left',
          }}>
            Driven by the power of human craftsmanship, Unicraft turns wood into timeless stories,
            mastering the finest details, merging materials, textures, and the artisan's eye
            into bespoke creations.
          </p>

          <div style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 800,
            fontSize: 'clamp(80px, 10vw, 140px)',
            lineHeight: 0.7,
            color: '#FDFE78',
            opacity: 0.92,
            alignSelf: 'end',
          }}>]</div>
        </div>

        <div style={{
          marginTop: 56, display: 'flex', justifyContent: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11,
            letterSpacing: '0.32em',
            color: 'rgba(253, 254, 120, 0.55)',
          }}>A manifesto, not a tagline</div>
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { Manifesto });