const { Asterisk } = window.MartiniVastgoedDesignSystem_adb8d1;

function Impact() {
  const stats = [
    { n: '1992', l: 'Actief sinds', c: 'var(--mv-green)' },
    { n: '96m', l: 'Martinitoren, ons uitzicht', c: 'var(--mv-tangerine)' },
    { n: '500+', l: 'Woningen verhuurd', c: 'var(--mv-pink)' },
    { n: '4.9', l: 'Gemiddelde beoordeling', c: 'var(--mv-green)' },
  ];
  return (
    <section id="over-ons" style={{ background: 'var(--mv-bone)', color: 'var(--mv-ink)', borderBottom: '3px solid var(--mv-ink)', padding: 'var(--section-y) var(--gutter)' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 'var(--space-8)', alignItems: 'center' }}>
        <div>
          <p style={{ margin: 0, font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-ink-70)' }}>Groningen van boven</p>
          <h2 style={{ margin: '20px 0 0', font: '900 var(--fs-h1)/0.98 var(--font-display)', letterSpacing: 'var(--ls-display)' }}>
            Wij kennen elke straat, elk plein en elke <span style={{ background: 'var(--mv-tangerine)', padding: '0 0.1em' }}>toren.</span>
          </h2>
          <p style={{ margin: '22px 0 0', maxWidth: '48ch', font: '400 var(--fs-body-lg)/var(--lh-body) var(--font-body)', color: 'var(--mv-ink-70)' }}>
            Verhuur, verkoop, aankoop en taxaties van kamers, studio's, appartementen en beleggingspanden. Al ruim 30 jaar vanuit het hart van Groningen. Lokale kennis, scherpe waardebepaling, en een merk dat net zo fris is als de stad zelf.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
          {stats.map((s, i) => (
            <div key={i} style={{ border: '3px solid var(--mv-ink)', boxShadow: `6px 6px 0 ${s.c}`, padding: 'var(--space-5)', background: 'var(--mv-bone)' }}>
              <p style={{ margin: 0, font: '900 clamp(2rem,4vw,3rem)/0.9 var(--font-display)', letterSpacing: '-0.02em', color: 'var(--mv-ink)' }}>{s.n}</p>
              <p style={{ margin: '10px 0 0', font: '700 var(--fs-label-sm)/1.3 var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--mv-ink-70)' }}>{s.l}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Impact });