function Referenzen() {
  const cases = [
    {
      eyebrow: 'Eine Gemeinde wird Pionierkommune und geht pragmatisch nach vorne',
      title: 'Allmersbach im Tal',
      year: '2024',
      lede: (
        <>2024 entschied sich Allmersbach im Tal für den Pionierkommune-Weg. <strong>Zehn Gebäude bewertet, Maßnahmen priorisiert, Projekte beschlossen</strong> — der Klimaschutzplan bekam einen umsetzbaren Fahrplan und der Gemeinderat ein einstimmig unterstütztes Projekt.</>
      ),
      bullets: [
        ['Sanierungsfahrpläne und Gebäudebewertungen', 'Gesamten Bestand eingeordnet.'],
        ['Management Summary statt Papierflut', 'Kompakt für den Gemeinderat aufbereitet.'],
        ['Individuelle Strategien pro Gebäude', 'Abgestimmt auf Nutzung, Zustand, Rahmen.'],
        ['Verknüpfung mit Förder- und Finanzierungswegen', 'Investitionen klar auf Haushalt und Zuschüsse ausgerichtet.'],
        ['Vom Konzept in die Umsetzung', 'Erste Maßnahmen direkt freigegeben und umgesetzt.'],
      ],
      quote: '„Mit den Effizienzpionieren haben wir einen verlässlichen Partner, der uns auf dem Weg zur klimaneutralen Gemeinde begleitet. Unsere gemeindeeigenen Gebäude wurden intensiv und professionell begutachtet."',
      author: 'Patrizia Rall',
      role: 'Bürgermeisterin Allmersbach im Tal',
      tone: 'light',
      reverse: false,
      visual: 'gemeinderat',
    },
    {
      eyebrow: 'Planung und Ausschreibung einer kommunalen PV-Anlage',
      title: 'Steinenbronn',
      year: '2025',
      lede: (
        <>2025 unterstützten wir die Gemeinde Steinenbronn bei Planung und Ausschreibung einer großen PV-Anlage auf einem kommunalen Gebäude. <strong>In vier Monaten vollständig vorbereitet</strong> — von der Datenerhebung bis zur Ausschreibung.</>
      ),
      bullets: [
        ['Zügiges Vorgehen', 'Planung bis Ausschreibung in 4 Monaten.'],
        ['Moderne Grundlage', '3D-Drohnenaufnahmen und Wirtschaftlichkeitsprüfung.'],
        ['Individuelle Planung', 'Maßgeschneidertes Split-Konzept, 290 kWp.'],
        ['Erfolgreiche Vergabe', 'Leistungsverzeichnis erstellt, fristgerecht vergeben.'],
        ['Echte Wirkung', 'Rund 70 % Eigenverbrauch, −100 t CO₂ pro Jahr.'],
      ],
      quote: '„Die Effizienzpioniere unterstützten uns in allen Projektphasen bis zur Ausschreibung. Strukturiert, produktiv und zielführend. Wir konnten das Projekt pünktlich ausschreiben und rechtzeitig vergeben."',
      author: 'Daniel Nieffer',
      role: 'Interkommunaler Klimaschutzmanager Aichtal, Waldenbuch und Steinenbronn',
      tone: 'soft',
      reverse: true,
      visual: 'pv',
    },
  ];

  return (
    <section id="referenzen" style={{background: '#fff'}}>
      {/* Section header */}
      <div style={{padding: '96px 32px 24px', maxWidth: 1280, margin: '0 auto'}}>
        <div className="ep-eyebrow" style={{marginBottom: 16}}>Referenzen</div>
        <h2 style={{
          fontFamily: 'Montserrat', fontWeight: 500, fontSize: 40, lineHeight: 1.15,
          color: '#262626', margin: 0, letterSpacing: '-0.01em', maxWidth: 760,
        }}>
          Zwei Kommunen, zwei Wege — beide im Ziel.
        </h2>
      </div>

      {cases.map((c, idx) => (
        <CaseStudy key={c.title} c={c} idx={idx} />
      ))}
    </section>
  );
}

function CaseStudy({c, idx}) {
  const bg = c.tone === 'light' ? '#FAFAFA' : '#F2F8F1';
  return (
    <div style={{background: bg, padding: '72px 32px'}}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.05fr)',
        gap: 72,
        alignItems: 'start',
        direction: c.reverse ? 'rtl' : 'ltr',
      }}>
        {/* TEXT COLUMN */}
        <div style={{direction: 'ltr'}}>
          <div className="ep-eyebrow" style={{marginBottom: 18, color: '#136B3C', maxWidth: 520, lineHeight: 1.4}}>
            {c.eyebrow}
          </div>
          <h3 style={{
            fontFamily: 'Montserrat', fontWeight: 800, fontSize: 56, lineHeight: 1,
            color: '#262626', margin: '0 0 8px', letterSpacing: '-0.02em',
          }}>
            Praxisbeispiel
          </h3>
          <h3 style={{
            fontFamily: 'Montserrat', fontWeight: 800, fontSize: 56, lineHeight: 1,
            color: '#009947', margin: '0 0 32px', letterSpacing: '-0.02em',
          }}>
            {c.title}
          </h3>
          <p style={{
            fontSize: 16, lineHeight: 1.6, color: '#262626', margin: '0 0 32px',
            maxWidth: 520, fontWeight: 400,
          }}>
            {c.lede}
          </p>

          <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18}}>
            {c.bullets.map(([k, v]) => (
              <li key={k} style={{display: 'grid', gridTemplateColumns: '20px 1fr', gap: 14, alignItems: 'start'}}>
                <i data-lucide="arrow-right" style={{width: 18, height: 18, strokeWidth: 2, color: '#EA5115', marginTop: 3}}></i>
                <div style={{fontSize: 14, lineHeight: 1.55, color: '#262626'}}>
                  <strong style={{fontWeight: 600}}>{k}</strong>
                  <span style={{color: '#4D4D4D'}}> — {v}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* VISUAL + QUOTE COLUMN */}
        <div style={{direction: 'ltr'}}>
          {c.visual === 'pv' ? <PVVisual /> : <GemeinderatVisual />}

          <figure style={{margin: '32px 0 0'}}>
            <blockquote style={{
              margin: 0, fontSize: 15, lineHeight: 1.6, color: '#262626',
              fontStyle: 'normal', fontWeight: 400, maxWidth: 520,
            }}>
              {c.quote}
            </blockquote>
            <figcaption style={{marginTop: 14, fontSize: 14, lineHeight: 1.5}}>
              <span style={{color: '#009947', fontWeight: 600}}>{c.author}</span>
              <span style={{color: '#4D4D4D'}}>, {c.role}</span>
            </figcaption>
          </figure>
        </div>
      </div>
    </div>
  );
}

/* --- Visual placeholders, brand-coherent (no AI-stock photos) --- */

function PVVisual() {
  // Real aerial photo of Steinenbronn PV project
  return (
    <div style={{
      borderRadius: 20, overflow: 'hidden', position: 'relative',
      aspectRatio: '4 / 3', background: '#0E4D2A',
      boxShadow: '0 1px 2px rgba(14,77,42,0.08), 0 8px 24px rgba(14,77,42,0.10)',
    }}>
      <img
        src="assets/steinenbronn-pv.png"
        alt="Steinenbronn — Luftbild PV-Anlagen, Bestand und Auslegung"
        style={{display: 'block', width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center'}}
      />
      {/* metric overlay */}
      <div style={{
        position: 'absolute', left: 20, bottom: 20, padding: '14px 18px',
        background: 'rgba(255,255,255,0.94)', borderRadius: 12,
        backdropFilter: 'blur(8px)',
        display: 'flex', gap: 28,
      }}>
        <div>
          <div style={{fontFamily: 'Montserrat', fontWeight: 800, fontSize: 22, color: '#009947', lineHeight: 1, letterSpacing: '-0.02em'}}>290 kWp</div>
          <div style={{fontSize: 11, color: '#4D4D4D', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600}}>Anlagenleistung</div>
        </div>
        <div style={{width: 1, background: '#E6E6E6'}}></div>
        <div>
          <div style={{fontFamily: 'Montserrat', fontWeight: 800, fontSize: 22, color: '#009947', lineHeight: 1, letterSpacing: '-0.02em'}}>−100 t</div>
          <div style={{fontSize: 11, color: '#4D4D4D', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600}}>CO₂ / Jahr</div>
        </div>
        <div style={{width: 1, background: '#E6E6E6'}}></div>
        <div>
          <div style={{fontFamily: 'Montserrat', fontWeight: 800, fontSize: 22, color: '#009947', lineHeight: 1, letterSpacing: '-0.02em'}}>4 Mon.</div>
          <div style={{fontSize: 11, color: '#4D4D4D', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600}}>bis Vergabe</div>
        </div>
      </div>
    </div>
  );
}

function GemeinderatVisual() {
  // Schematic of a Gemeinderat presentation: room w/ projection screen + portfolio table
  return (
    <div style={{
      borderRadius: 20, overflow: 'hidden', position: 'relative',
      aspectRatio: '4 / 3', background: '#0E4D2A',
      boxShadow: '0 1px 2px rgba(14,77,42,0.08), 0 8px 24px rgba(14,77,42,0.10)',
    }}>
      <img
        src="assets/allmersbach-gemeinderat.jpg"
        alt="Allmersbach im Tal — Vorstellung Sanierungskonzept im Gemeinderat"
        style={{display: 'block', width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 65%'}}
      />
      {/* metric overlay */}
      <div style={{
        position: 'absolute', left: 20, bottom: 20, padding: '14px 18px',
        background: 'rgba(255,255,255,0.94)', borderRadius: 12,
        backdropFilter: 'blur(8px)',
        display: 'flex', gap: 28,
      }}>
        <div>
          <div style={{fontFamily: 'Montserrat', fontWeight: 800, fontSize: 22, color: '#009947', lineHeight: 1, letterSpacing: '-0.02em'}}>10</div>
          <div style={{fontSize: 11, color: '#4D4D4D', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600}}>Liegenschaften</div>
        </div>
        <div style={{width: 1, background: '#E6E6E6'}}></div>
        <div>
          <div style={{fontFamily: 'Montserrat', fontWeight: 800, fontSize: 22, color: '#009947', lineHeight: 1, letterSpacing: '-0.02em'}}>einstimmig</div>
          <div style={{fontSize: 11, color: '#4D4D4D', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600}}>beschlossen</div>
        </div>
        <div style={{width: 1, background: '#E6E6E6'}}></div>
        <div>
          <div style={{fontFamily: 'Montserrat', fontWeight: 800, fontSize: 22, color: '#009947', lineHeight: 1, letterSpacing: '-0.02em'}}>2024</div>
          <div style={{fontSize: 11, color: '#4D4D4D', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600}}>Beschluss</div>
        </div>
      </div>
    </div>
  );
}

window.Referenzen = Referenzen;