function AboutSection() {
  const { SectionHeading, ValueCard } = window.VizeProDamboIceDesignSystem_70ea19;
  return (
    <section id="kdo-jsme" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <SectionHeading eyebrow="Kdo jsme" title="Sousedé, kterým nejsou Dambořice lhostejné" />

        <div className="vpd-about-grid" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'clamp(1.5rem,1rem + 3vw,3.5rem)',
          alignItems: 'start', marginTop: 'var(--space-7)',
        }}>
          <div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-normal)', color: 'var(--text-strong)', margin: '0 0 var(--space-4)', fontWeight: 500 }}>
              Vážení spoluobčané, milí sousedé,
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-body)', margin: '0 0 var(--space-4)' }}>
              dovolte nám představit nové uskupení nezávislých kandidátů. Nejsme členy žádné politické strany a nepřicházíme s žádnou ideologií. Spojuje nás vztah k Dambořicím — místu, kde žijeme, pracujeme, vychováváme děti a kam se rádi vracíme.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-body)', margin: '0 0 var(--space-4)' }}>
              Dambořice považujeme za skvělé místo pro život. Chceme přispět k tomu, aby se obec rozvíjela promyšleně, s jasnou vizí a s důrazem na potřeby lidí, kteří v ní žijí dnes i&nbsp;těch, kteří zde budou žít za deset či dvacet let.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-body)', margin: '0 0 var(--space-4)' }}>
              Na naší kandidátce se sešli lidé různých profesí — učitelé, inženýři, odborníci na IT, podnikatelé, řemeslníci, ale i vinaři, včelaři a milovníci přírody. Právě tato různorodost je naší předností.
            </p>
            <p style={{ fontFamily: 'var(--font-heading)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-normal)', color: 'var(--color-primary)', margin: 0, fontWeight: 600 }}>
              Těšíme se na setkání s vámi.
              <span style={{ display: 'block', marginTop: 'var(--space-3)', fontStyle: 'italic' }}>— Vize pro Dambořice</span>
            </p>
          </div>

          <figure style={{ margin: 0 }}>
            <img src="../../assets/team-group.jpg" alt="Kandidáti uskupení Vize pro Dambořice nad obcí" loading="lazy"
              style={{ width: '100%', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)', border: '1px solid var(--border-subtle)' }} />
            <figcaption style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-small)', color: 'var(--text-muted)', marginTop: 'var(--space-3)', textAlign: 'center' }}>
              Kandidáti uskupení nad Dambořicemi
            </figcaption>
          </figure>
        </div>

        <div className="vpd-values" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-8)',
        }}>
          {window.VALUES.map(v => (
            <ValueCard key={v.tone} tone={v.tone} title={v.title}>{v.text}</ValueCard>
          ))}
        </div>
      </div>
    </section>
  );
}
window.AboutSection = AboutSection;