/* eslint-disable */
// Section 10 — Mission & Vision. Dark, split columns + full-width statement under.

const MissionVision = () => (
  <section
    data-screen-label="10 mission & vision"
    style={{
      background: 'var(--color-deep-brown)',
      color: 'var(--color-off-white)',
      padding: '120px 0',
    }}
  >
    <div className="uc-shell">
      <Reveal stagger>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1px 1fr',
          gap: 0,
          alignItems: 'start',
        }}>
          {/* MISSION */}
          <div style={{ paddingRight: 64 }}>
            <div className="uc-eyebrow uc-eyebrow--dark" style={{ marginBottom: 24 }}>
              What we believe in
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: 'clamp(36px, 4.4vw, 60px)',
              lineHeight: 1.0, letterSpacing: '-0.025em',
              textTransform: 'none',
              color: 'var(--color-off-white)',
              margin: '0 0 40px',
            }}>our <span className="uc-bracket">mission</span>.</h2>
            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 17, lineHeight: 1.7,
              margin: 0, maxWidth: '40ch',
              color: 'rgba(229,229,222,0.88)',
            }}>
              To craft bespoke wood creations that merge traditional expertise with modern
              precision, celebrating the power of human craftsmanship and the stories told
              through every grain of wood.
            </p>
          </div>

          {/* vertical rule */}
          <div style={{
            width: 1, alignSelf: 'stretch',
            background: 'rgba(253,254,120,0.22)',
          }} />

          {/* VISION */}
          <div style={{ paddingLeft: 64 }}>
            <div className="uc-eyebrow uc-eyebrow--dark" style={{ marginBottom: 24 }}>
              What drives us
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: 'clamp(36px, 4.4vw, 60px)',
              lineHeight: 1.0, letterSpacing: '-0.025em',
              textTransform: 'none',
              color: 'var(--color-off-white)',
              margin: '0 0 40px',
            }}>our <span className="uc-bracket">vision</span>.</h2>
            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 17, lineHeight: 1.7,
              margin: 0, maxWidth: '40ch',
              color: 'rgba(229,229,222,0.88)',
            }}>
              To become Saudi Arabia's leading name in handcrafted wood design, known for
              reviving artisanal traditions and setting new benchmarks for quality, creativity,
              and authenticity.
            </p>
          </div>
        </div>
      </Reveal>

      <div style={{
        margin: '120px auto 0',
        maxWidth: 760,
      }}>
        <Reveal>
          <hr style={{
            border: 0, height: 1, background: 'rgba(253,254,120,0.22)',
            margin: '0 0 64px',
          }} />
          <p style={{
            fontFamily: 'var(--font-body)',
            fontSize: 18, lineHeight: 1.78,
            color: 'rgba(229,229,222,0.92)',
            margin: 0, textAlign: 'left', maxWidth: 'none',
          }}>
            Unicraft stands at the intersection of craftsmanship and scale, combining the
            artisan's touch with cutting-edge production to create bespoke woodwork for high-end
            residential and hospitality projects.
          </p>
          <p style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 700,
            fontSize: 'clamp(22px, 2.6vw, 32px)',
            lineHeight: 1.25, letterSpacing: '-0.02em',
            textTransform: 'none',
            color: 'var(--color-acid-yellow)',
            margin: '32px 0 0',
          }}>
            Crafted in Riyadh. Inspired by its stories. Built to last.
          </p>
        </Reveal>
      </div>
    </div>
  </section>
);

Object.assign(window, { MissionVision });