/* eslint-disable */
// Section 12 — Contact. Dark, full-viewport statement. No form per brand brief.

const CONTACT = [
  { label: 'Address', value: 'Exit 18, Sulay\nRiyadh, Saudi Arabia' },
  { label: 'Phone',   value: '+966 55 548 9506' },
  { label: 'Email',   value: 'info@unicraft.com.sa' },
  { label: 'Website', value: 'unicraft.com.sa' },
];

const Contact = () => (
  <section
    id="contact"
    data-screen-label="12 contact"
    style={{
      background: 'var(--color-deep-brown)',
      color: 'var(--color-acid-yellow)',
      minHeight: '100vh',
      padding: '120px 0 96px',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}
  >
    <div className="uc-shell" style={{ width: '100%' }}>
      <Reveal>
        <div className="uc-eyebrow uc-eyebrow--dark" style={{ marginBottom: 56 }}>
          Contact
        </div>

        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 800,
          fontSize: 'clamp(60px, 10vw, 168px)',
          lineHeight: 0.92, letterSpacing: '-0.04em',
          textTransform: 'none',
          color: 'var(--color-acid-yellow)',
          margin: 0,
          maxWidth: '14ch',
        }}>Have a project<br/>in mind?</h2>

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

        <hr style={{
          border: 0, height: 1, background: 'rgba(253,254,120,0.32)',
          margin: '96px 0 56px',
        }} />
      </Reveal>

      <Reveal stagger>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 32,
        }}>
          {CONTACT.map((c, i) => (
            <div key={c.label} style={{
              position: 'relative',
              paddingLeft: i === 0 ? 0 : 24,
            }}>
              {i !== 0 && (
                <div style={{
                  position: 'absolute', left: 0, top: 4, bottom: 4,
                  width: 1, background: 'rgba(253,254,120,0.22)',
                }} />
              )}
              <div style={{
                fontFamily: 'var(--font-body)', fontSize: 11,
                letterSpacing: '0.22em',
                color: 'rgba(253,254,120,0.6)',
                marginBottom: 14,
              }}>{c.label}</div>
              <div style={{
                fontFamily: 'var(--font-body)',
                fontSize: 15, lineHeight: 1.55,
                color: 'var(--color-off-white)',
                whiteSpace: 'pre-line',
              }}>{c.value}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { Contact });