const DIFFERENTIATORS = [
  { Icon: IconCrystal, title: 'Full-Stack Capability', desc: 'Front-end to AI-powered back-end, under one roof.' },
  { Icon: IconRocket, title: 'Speed Without Compromise', desc: 'Fast delivery timelines, zero corners cut.' },
  { Icon: IconEye, title: 'Transparent Process', desc: 'Clients always know where their project stands.' },
  { Icon: IconUfo, title: 'Future-Ready Solutions', desc: 'Scalable architecture from day one.' },
];

const STATS = [
  { num: 50, suffix: '+', label: 'Projects Shipped' },
  { num: 100, suffix: '%', label: 'Client Retention' },
  { num: 6, suffix: '', label: 'Core Services' },
  { num: 2, suffix: '+ yrs', label: 'In Orbit' },
];

function Counter({ to, suffix }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          let start = null;
          const dur = 1500;
          const step = (t) => {
            if (!start) start = t;
            const p = Math.min((t - start) / dur, 1);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.floor(eased * to));
            if (p < 1) requestAnimationFrame(step);
            else setN(to);
          };
          requestAnimationFrame(step);
          obs.disconnect();
        }
      });
    }, { threshold: 0.5 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [to]);
  return <span ref={ref}>{n}{suffix}</span>;
}

function About() {
  return (
    <section id="about" data-screen-label="03 About" style={{
      padding: 'clamp(80px, 10vw, 140px) 0',
      background: 'linear-gradient(180deg, var(--space-void) 0%, var(--nebula-deep) 50%, var(--space-void) 100%)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="neb-blob" style={{ top: '10%', left: '-150px', background: 'radial-gradient(circle, rgba(108,58,255,0.18), transparent 70%)' }} />
      <div className="neb-blob" style={{ bottom: '5%', right: '-150px', background: 'radial-gradient(circle, rgba(0,200,224,0.15), transparent 70%)' }} />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="about-grid">
          <div>
            <div className="reveal"><span className="eyebrow">≫ ABOUT NEXITURA</span></div>
            <h2 className="reveal" data-delay="1" style={{
              fontFamily: 'Orbitron, sans-serif',
              fontSize: 'clamp(28px, 3.6vw, 48px)',
              marginTop: 18, marginBottom: 28,
              color: 'var(--stardust-white)',
              lineHeight: 1.15,
              textWrap: 'balance',
            }}>The Team Behind the Technology</h2>
            <div className="reveal" data-delay="2" style={{
              display: 'flex', flexDirection: 'column', gap: 18,
              fontFamily: 'Syne', fontSize: 17, lineHeight: 1.85,
              color: 'rgba(232,238,255,0.7)',
              maxWidth: 540,
            }}>
              <p>Nexitura was built from a simple conviction: that most agencies over-promise and under-deliver. We exist to change that.</p>
              <p>We are a remote-first studio of engineers, designers and strategists who care obsessively about craft. From the first wireframe to the final deployment, we treat every project as our own.</p>
              <p>Whether you're a startup launching your first product or an enterprise modernising legacy systems — we scale with you.</p>
            </div>

            <div className="reveal" data-delay="3" style={{
              marginTop: 36,
              display: 'inline-flex', gap: 24, alignItems: 'center',
              padding: '16px 22px',
              border: '1px solid rgba(108,58,255,0.3)',
              borderRadius: 12,
              background: 'rgba(108,58,255,0.06)',
            }}>
              <div style={{
                width: 8, height: 8, borderRadius: '50%',
                background: '#3fdc8a',
                boxShadow: '0 0 12px #3fdc8a',
              }} />
              <div style={{ fontFamily: 'Space Mono', fontSize: 12, letterSpacing: '0.16em', color: 'var(--stardust-white)' }}>
                ACCEPTING <span style={{ color: 'var(--stellar-cyan)' }}>Q2 2026</span> ENGAGEMENTS
              </div>
            </div>
          </div>

          <div className="diff-grid">
            {DIFFERENTIATORS.map((d, i) => (
              <div key={i} className="diff-card reveal" data-delay={i + 1}>
                <div className="diff-icon"><d.Icon size={26} /></div>
                <div className="diff-title">{d.title}</div>
                <div className="diff-desc">{d.desc}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Stats */}
        <div className="stats-row reveal">
          {STATS.map((s, i) => (
            <div key={i} className="stat">
              <div className="stat-num">
                <Counter to={s.num} suffix={s.suffix} />
              </div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .neb-blob {
          position: absolute;
          width: 480px; height: 480px;
          filter: blur(80px);
          pointer-events: none;
        }
        .about-grid {
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: clamp(32px, 5vw, 80px);
          align-items: start;
        }
        @media (max-width: 960px) { .about-grid { grid-template-columns: 1fr; } }

        .diff-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        @media (max-width: 460px) { .diff-grid { grid-template-columns: 1fr; } }

        .diff-card {
          background: rgba(10,14,26,0.7);
          border: 1px solid rgba(108,58,255,0.18);
          border-radius: 14px;
          padding: 22px 22px 24px;
          backdrop-filter: blur(10px);
          transition: border-color 0.25s, transform 0.25s, background 0.25s;
        }
        .diff-card:hover {
          border-color: rgba(108,58,255,0.5);
          transform: translateY(-4px);
          background: rgba(108,58,255,0.06);
        }
        .diff-icon {
          width: 44px; height: 44px;
          border-radius: 10px;
          background: rgba(108,58,255,0.15);
          border: 1px solid rgba(108,58,255,0.3);
          color: var(--nova-purple);
          display: flex; align-items: center; justify-content: center;
          margin-bottom: 14px;
        }
        .diff-title {
          font-family: 'Syne', sans-serif;
          font-weight: 700; font-size: 16px;
          color: var(--stardust-white);
          margin-bottom: 6px;
        }
        .diff-desc {
          font-family: 'Syne', sans-serif;
          font-size: 14px; line-height: 1.6;
          color: var(--asteroid-grey);
        }

        .stats-row {
          margin-top: 80px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border: 1px solid rgba(0,200,224,0.12);
          border-radius: 16px;
          background: rgba(10,14,26,0.5);
          overflow: hidden;
          backdrop-filter: blur(10px);
        }
        @media (max-width: 720px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
        .stat {
          padding: 36px 24px;
          text-align: center;
          border-right: 1px solid rgba(0,200,224,0.08);
        }
        .stats-row .stat:last-child { border-right: none; }
        @media (max-width: 720px) {
          .stat:nth-child(2) { border-right: none; }
          .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(0,200,224,0.08); }
        }
        .stat-num {
          font-family: 'Orbitron', sans-serif;
          font-size: clamp(36px, 4vw, 56px);
          font-weight: 700;
          color: var(--stellar-cyan);
          text-shadow: 0 0 24px rgba(0,200,224,0.4);
          letter-spacing: 0.02em;
        }
        .stat-label {
          font-family: 'Syne', sans-serif;
          font-size: 13.5px;
          color: var(--asteroid-grey);
          letter-spacing: 0.06em;
          text-transform: uppercase;
          margin-top: 6px;
        }
      `}</style>
    </section>
  );
}

window.About = About;