/* global React, Reveal, useCountUp */
function About() {
  const [r1, n1] = useCountUp(10);
  const [r2, n2] = useCountUp(40);
  const [r3, n3] = useCountUp(2);
  const [r4, n4] = useCountUp(99.98);
  const stats = [
    { ref: r1, v: Math.round(n1) + '+', l: 'years in software engineering' },
    { ref: r2, v: Math.round(n2) + '+', l: 'production services shipped' },
    { ref: r3, v: Math.round(n3),      l: 'clouds deployed across (AWS + GCP)' },
    { ref: r4, v: n4.toFixed(2) + '%', l: 'average measured uptime' },
  ];
  return (
    <section id="about" data-screen-label="05 About" style={{ padding: '140px clamp(20px,4vw,48px) 120px', background: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="nal-about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
          <div>
            <Reveal y={14}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3A7BB8', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 22, height: 1, background: '#3A7BB8' }} />
                About us
              </div>
            </Reveal>
            <Reveal y={16} delay={100}>
              <h2 style={{ fontSize: 'clamp(40px,4.6vw,64px)', fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1.0, margin: 0, color: '#0B1220' }}>
                A small team of <span style={{ color: '#8695A8', fontStyle: 'italic', fontWeight: 400 }}>senior engineers.</span>
              </h2>
            </Reveal>
            <Reveal y={12} delay={200}>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: '#3E4B5E', marginTop: 28, maxWidth: 460 }}>
                NAL Software Solutions LLC has spent the last decade building backend systems and cloud infrastructure for product teams who need the work done properly. We take on a small number of projects at a time and staff each one with engineers who have actually shipped what you're asking for.
              </p>
            </Reveal>
            <Reveal y={12} delay={280}>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: '#3E4B5E', marginTop: 16, maxWidth: 460 }}>
                No account managers. No subcontractors. No layers. You talk to the people writing the code, every week.
              </p>
            </Reveal>
          </div>

          <div>
            <Reveal y={16} delay={150}>
              <div className="nal-about-stats" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid #EEF2F6', borderRadius: 16, background: '#fff', overflow: 'hidden', boxShadow: '0 12px 40px rgba(14,22,38,0.05)' }}>
                {stats.map((s, i) => (
                  <div key={i} ref={s.ref} style={{
                    padding: '36px 32px',
                    borderRight: i % 2 === 0 ? '1px solid #EEF2F6' : 'none',
                    borderBottom: i < 2 ? '1px solid #EEF2F6' : 'none',
                  }}>
                    <div style={{ fontSize: 48, fontWeight: 600, letterSpacing: '-0.035em', color: '#0B1220', lineHeight: 1 }}>{s.v}</div>
                    <div style={{ fontSize: 13, color: '#5F6E82', marginTop: 12, lineHeight: 1.4 }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </Reveal>

            {/* Principles card */}
            <Reveal y={16} delay={250}>
              <div style={{ marginTop: 20, padding: '28px 32px', background: '#0B1220', color: '#fff', borderRadius: 16, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.2px)', backgroundSize: '20px 20px', opacity: 0.8, pointerEvents: 'none' }} />
                <div style={{ position: 'relative' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#8EC5FF', textTransform: 'uppercase', marginBottom: 14 }}>
                    How we think
                  </div>
                  <div style={{ display: 'grid', gap: 14 }}>
                    {[
                      'Boring tech over novel tech.',
                      'Observability from day one, not retrofitted.',
                      'Write the runbook before you need it.',
                      'The best code is code you didn\'t have to write.',
                    ].map((t, i) => (
                      <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15, color: '#E6ECF4', lineHeight: 1.5 }}>
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#5BA9A3', fontWeight: 600, minWidth: 24, paddingTop: 3 }}>0{i + 1}</span>
                        {t}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;