/* eslint-disable */
// Section 03 — About. Asymmetric split: vertical 3:4 photo (left) + body + stats (right).

const About = () => (
  <section
    id="about"
    data-screen-label="03 about"
    style={{
      background: 'var(--color-off-white)',
      color: 'var(--color-near-black)',
      padding: '120px 0',
    }}
  >
    <div className="uc-shell">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '40% 1fr',
        gap: 96,
        alignItems: 'stretch',
      }}>
        <Reveal style={{ height: '100%' }}>
          <div style={{
            position: 'relative',
            height: '100%',
            minHeight: 480,
            overflow: 'hidden',
            background: 'var(--color-deep-brown)',
          }}>
            <img
              src={(window.__resources && window.__resources['assets/uc-about-bentwood.jpeg']) || "assets/uc-about-bentwood.jpeg"}
              alt="Craftsman shaping a curved bentwood chair component"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center',
                display: 'block',
              }}
            />
          </div>
        </Reveal>

        <Reveal stagger>
          <div className="uc-eyebrow" style={{ marginBottom: 24 }}>About Unicraft</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 40px',
            maxWidth: '12ch',
          }}>Craft <span className="uc-bracket">at</span> scale.</h2>

          <div style={{
            display: 'flex', flexDirection: 'column', gap: 20,
            fontSize: 16, lineHeight: 1.72,
            maxWidth: '52ch',
            color: 'var(--color-near-black)',
          }}>
            <p style={{ margin: 0 }}>
              Unicraft is a subsidiary division of Unicon Holding, established to expand the
              group's manufacturing capabilities and provide a comprehensive solution for bespoke
              joinery and contract furniture.
            </p>
            <p style={{ margin: 0 }}>
              Backed by a workforce of over 1,800 skilled professionals across the Unicon ecosystem,
              Unicraft operates alongside the group's metal and aluminum divisions, enabling full
              integration between wood, metal, and aluminum.
            </p>
          </div>

          <div style={{ marginTop: 48 }}>
            <a href="#" style={{
              display: 'inline-block',
              fontFamily: 'var(--font-body)', fontSize: 13, letterSpacing: '0.04em',
              padding: '14px 28px', textDecoration: 'none',
              background: 'var(--color-deep-brown)',
              color: 'var(--color-off-white)', fontWeight: 500, cursor: 'pointer',
              transition: 'filter 240ms var(--ease-craft), transform 240ms var(--ease-craft)',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.filter = 'brightness(1.15)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.filter = 'none'; e.currentTarget.style.transform = 'none'; }}
            >Download Unicraft company profile</a>
          </div>

          <hr className="uc-rule" style={{ margin: '48px 0 40px' }} />

          {/* stats strip */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 0,
          }}>
            {[
              { n: '1,800+',     l: 'Professionals in the Unicon ecosystem' },
              { n: '2,800 sqm', l: 'Workshop in Riyadh' },
            ].map((s, i) => (
              <div
                key={s.n}
                style={{
                  paddingLeft: i === 0 ? 0 : 40,
                  borderLeft: i === 0 ? 'none' : '1px solid rgba(9,11,10,0.15)',
                }}
              >
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontWeight: 700,
                  fontSize: 'clamp(32px, 3.6vw, 48px)',
                  lineHeight: 1, letterSpacing: '-0.025em',
                  textTransform: 'none',
                  color: 'var(--color-deep-brown)',
                  marginBottom: 12,
                }}>{s.n}</div>
                <div style={{
                  fontFamily: 'var(--font-body)', fontSize: 12,
                  letterSpacing: '0.04em',
                  color: 'rgba(9,11,10,0.55)',
                  maxWidth: '24ch', lineHeight: 1.5,
                }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

Object.assign(window, { About });