function About({ accent }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.15 });
    ref.current.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const stats = [
    { num: '20+', label: 'Jaar ervaring' },
    { num: '2', label: 'Specialistische bedrijven' },
    { num: '1.000+', label: 'Gerealiseerde projecten' },
  ];

  return (
    <section id="over" ref={ref} data-screen-label="About" style={{
      padding: 'clamp(80px, 12vw, 160px) clamp(24px, 6vw, 80px)',
      background: 'var(--bg)',
      position: 'relative',
      borderTop: '1px solid var(--line)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)',
          gap: 'clamp(40px, 8vw, 120px)',
          alignItems: 'start',
        }} className="about-grid">
          <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <span className="eyebrow">Over ons</span>
            <h2 className="serif" style={{
              fontSize: 'clamp(36px, 5vw, 64px)',
              fontWeight: 400,
              lineHeight: 1.05,
              letterSpacing: '-0.02em',
              color: 'var(--fg)',
            }}>
              Twee disciplines.<br />
              <span style={{ fontStyle: 'italic', color: accent }}>Eén ambacht.</span>
            </h2>
          </div>

          <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 28, paddingTop: 12 }}>
            <p style={{ fontSize: 19, lineHeight: 1.7, color: 'var(--fg)', fontWeight: 300, fontFamily: 'var(--serif)', fontStyle: 'italic' }}>
              Assos Groep verenigt twee gespecialiseerde bedrijven die samen het volledige interieur van uw woning verzorgen — van het eerste ontwerp tot de laatste afwerking.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.8, color: 'var(--fg-dim)', maxWidth: 580 }}>
              Onder één dak combineren we de showroomervaring van Assos Keukens & Badkamers met de aannemerskracht van Assos Marmer. Het resultaat: één aanspreekpunt, één kwaliteitsstandaard, en een interieur dat in alle facetten klopt.
            </p>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 32,
              marginTop: 32,
              paddingTop: 40,
              borderTop: '1px solid var(--line)',
            }}>
              {stats.map((s, i) => (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <div className="serif" style={{
                    fontSize: 'clamp(32px, 4vw, 52px)',
                    fontWeight: 400,
                    color: accent,
                    letterSpacing: '-0.02em',
                    lineHeight: 1,
                  }}>{s.num}</div>
                  <div style={{
                    fontSize: 12, color: 'var(--fg-dim)',
                    letterSpacing: '0.1em', textTransform: 'uppercase',
                  }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .about-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.About = About;