const About = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const values = [
    { title: 'AI-First Architecture', desc: 'We build intelligence into every layer — from data pipelines to user interfaces — not as an add-on, but as a foundation.' },
    { title: 'End-to-End Ownership', desc: 'Strategy, design, engineering, deployment, and support. One team, full accountability, zero handoff friction.' },
    { title: 'Scalability by Design', desc: 'Every system we ship is built to grow. Clean architecture, cloud-native infrastructure, and modular codebases from day one.' },
    { title: 'Business Outcome Focus', desc: 'We measure success by your KPIs, not our deliverables. Automation that saves hours, analytics that drives decisions.' },
  ];

  return (
    <section id="about" data-screen-label="03 About" ref={ref} style={{ padding: '100px 0', background: '#e8edf5', position: 'relative', overflow: 'hidden' }}>
      {/* subtle dot grid */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(37,99,235,0.1) 1px, transparent 1px)', backgroundSize: '32px 32px', maskImage: 'radial-gradient(ellipse 50% 80% at 10% 50%, black 30%, transparent 100%)', pointerEvents: 'none' }}/>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px', position: 'relative' }}>
        <div className="about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
          {/* Left */}
          <div style={{ opacity: visible ? 1 : 0, transform: visible ? 'translateX(0)' : 'translateX(-28px)', transition: 'all 0.7s ease' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'rgba(37,99,235,0.08)', border: '1px solid rgba(37,99,235,0.2)', marginBottom: 20 }}>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: '#1d4ed8', letterSpacing: '0.07em' }}>ABOUT ZIVERSE</span>
            </div>
            <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 700, color: '#0f172a', letterSpacing: '-0.03em', lineHeight: 1.12, margin: '0 0 20px' }}>
              We're the engineering team behind businesses that scale
            </h2>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#64748b', lineHeight: 1.75, margin: '0 0 16px' }}>
              Ziverse Technologies was founded on a single belief: most businesses are held back not by ambition, but by the limitations of their technology. We exist to remove those limitations.
            </p>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#64748b', lineHeight: 1.75, margin: '0 0 36px' }}>
              From early-stage startups building their first product to enterprises modernising legacy infrastructure, we bring the same rigour — intelligent systems, clean architecture, and measurable business outcomes.
            </p>
            <div style={{ height: 1, background: 'linear-gradient(to right, rgba(37,99,235,0.3), transparent)', marginBottom: 32 }}/>
            <div style={{ display: 'flex', gap: 40 }}>
              {[{ n: '2020', l: 'Founded' }, { n: '4', l: 'Core Disciplines' }, { n: '3', l: 'Continents Served' }].map((s, i) => (
                <div key={i}>
                  <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 30, fontWeight: 700, color: '#1d4ed8' }}>{s.n}</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#94a3b8', marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: values grid */}
          <div className="value-cards-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, opacity: visible ? 1 : 0, transform: visible ? 'translateX(0)' : 'translateX(28px)', transition: 'all 0.7s ease 0.15s' }}>
            {values.map((v, i) => (
              <div key={i} style={{ padding: '24px', borderRadius: 14, background: '#fff', border: '1.5px solid rgba(0,0,0,0.07)', boxShadow: '0 2px 12px rgba(0,0,0,0.05)', transition: 'all 0.2s' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = '#2563eb'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(29,78,216,0.1)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(0,0,0,0.07)'; e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.05)'; }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#2563eb', marginBottom: 14 }}/>
                <h4 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 15, fontWeight: 600, color: '#0f172a', margin: '0 0 8px', letterSpacing: '-0.01em' }}>{v.title}</h4>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, color: '#64748b', lineHeight: 1.65, margin: 0 }}>{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { About });