/* eslint-disable */
// Section 11 — Partners & Group.
// Top half (light): heading + tagline.
// Bottom half (dark): two-row logo wall, text-rendered marks in off-white.

const PARTNERS = ['Monoline', 'Motion', 'High Tech'];

const LogoMark = ({ name }) => (
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    height: 64,
    fontFamily: 'var(--font-display)',
    fontWeight: 700,
    fontSize: 'clamp(16px, 1.4vw, 20px)',
    letterSpacing: '0.04em',
    textTransform: 'none',
    color: 'rgba(229,229,222,0.78)',
    transition: 'color 300ms var(--ease-craft), letter-spacing 300ms var(--ease-craft)',
    cursor: 'default',
    whiteSpace: 'nowrap',
  }}
    onMouseEnter={(e) => {
      e.currentTarget.style.color = 'var(--color-acid-yellow)';
      e.currentTarget.style.letterSpacing = '0.12em';
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.color = 'rgba(229,229,222,0.78)';
      e.currentTarget.style.letterSpacing = '0.04em';
    }}
  >
    <span className="uc-bracket" style={{ color: 'inherit' }}>{name}</span>
  </div>
);

const Partners = () => (
  <section data-screen-label="11 partners">
    {/* top — light */}
    <div style={{
      background: 'var(--color-off-white)',
      padding: '120px 0 88px',
    }}>
      <div className="uc-shell">
        <Reveal stagger>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 24, marginBottom: 40 }}>
            <div className="uc-eyebrow">Trusted by</div>
            <div style={{ flex: 1, height: 1, background: 'rgba(9,11,10,0.18)', marginTop: 9 }} />
            <div className="uc-eyebrow">Our partners & group</div>
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 700,
            fontSize: 'clamp(32px, 3.8vw, 52px)',
            lineHeight: 1.05, letterSpacing: '-0.025em',
            textTransform: 'none',
            color: 'var(--color-deep-brown)',
            margin: 0, maxWidth: '24ch',
          }}>
            Combining years of hands-on experience with in-depth knowledge across diverse projects.
          </h2>
        </Reveal>
      </div>
    </div>

    {/* bottom — dark logo wall */}
    <div style={{
      background: 'var(--color-deep-brown)',
      color: 'var(--color-off-white)',
      padding: '88px 0 120px',
      borderTop: '1px solid rgba(253,254,120,0.22)',
    }}>
      <div className="uc-shell">
        <Reveal>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            marginBottom: 56,
          }}>
            <div className="uc-eyebrow uc-eyebrow--dark">Backed by Unicon Holding</div>
            <div className="uc-eyebrow uc-eyebrow--dark">03 partners</div>
          </div>
        </Reveal>

        <Reveal stagger>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            borderTop: '1px solid rgba(253,254,120,0.18)',
            borderLeft: '1px solid rgba(253,254,120,0.18)',
          }}>
            {PARTNERS.map((name) => (
              <div key={name} style={{
                borderRight: '1px solid rgba(253,254,120,0.18)',
                borderBottom: '1px solid rgba(253,254,120,0.18)',
                padding: '36px 18px',
              }}>
                <LogoMark name={name} />
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

Object.assign(window, { Partners });