
// Solarcor — Section Components
// Exports: Nav, Hero, ProblemSolution, Vorteile, HowItWorks, Rechner, Trust, Balkon, CTAForm, Footer

const { useState, useEffect, useRef } = React;

/* ── Helpers ─────────────────────────────────────────── */
function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
}

function AnimNumber({ target, suffix = '', duration = 1800 }) {
  const [val, setVal] = useState(0);
  const [ref, visible] = useInView(0.3);
  useEffect(() => {
    if (!visible) return;
    let start = null;
    const step = ts => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / duration, 1);
      setVal(Math.round(p * p * target));
      if (p < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [visible, target]);
  return <span ref={ref}>{val.toLocaleString('de-DE')}{suffix}</span>;
}

/* ── Nav ─────────────────────────────────────────────── */
function Nav({ accentColor }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(11,13,16,0.95)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.07)' : 'none',
      transition: 'all 0.3s ease',
      padding: '0 clamp(20px,5vw,80px)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      height: 68,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <a href="https://solarcor.de" title="Solarcor.de — Photovoltaik & Energiespeicher aus Scheeßel">
          <img src="assets/logo.png" alt="Solarcor" style={{ height: 38, width: 'auto', cursor: 'pointer' }} />
        </a>
      </div>
      <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
        {['Vorteile', 'Referenzen', 'Kontakt'].map(l => (
          <a key={l} href={`#${l.toLowerCase()}`} className="nav-link" style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, fontFamily: "'DM Sans', sans-serif", textDecoration: 'none', transition: 'color 0.2s' }}
            onMouseEnter={e => e.target.style.color = '#fff'}
            onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.7)'}>{l}</a>
        ))}
        <a href="https://solarcor.de" className="nav-link" title="Solarcor.de — Photovoltaik & Energiespeicher aus Scheeßel im Landkreis Rotenburg (Wümme)" aria-label="Zur Solarcor Hauptseite" style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, fontFamily: "'DM Sans', sans-serif", textDecoration: 'none', transition: 'color 0.2s', display: 'flex', alignItems: 'center', gap: 4 }}
          onMouseEnter={e => e.currentTarget.style.color = '#fff'}
          onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.7)'}>
          <span>🏠</span> Solarcor.de
        </a>
        <a href="tel:+491737280559" className="nav-phone" style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14, fontFamily: "'DM Sans', sans-serif", textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6, fontWeight: 600 }}
          onMouseEnter={e => e.currentTarget.style.color = accentColor}
          onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.85)'}>
          <span>📞</span> 0173 7280559
        </a>
        <button onClick={() => document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' })}
          style={{ background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 8, padding: '10px 22px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 14, cursor: 'pointer', transition: 'opacity 0.2s' }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
          Kostenlose Beratung
        </button>
      </div>
    </nav>
  );
}

/* ── Hero ────────────────────────────────────────────── */
function useVisitorCount() {
  const [count, setCount] = useState(() => Math.floor(Math.random() * 8) + 14);
  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => {
        const delta = Math.random() < 0.5 ? 1 : -1;
        return Math.max(11, Math.min(28, c + delta));
      });
    }, Math.random() * 4000 + 3000);
    return () => clearInterval(interval);
  }, []);
  return count;
}

function Hero({ accentColor, urgency }) {
  const visitors = useVisitorCount();
  return (
    <section style={{ minHeight: '100vh', background: '#0b0d10', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden', padding: '120px clamp(20px,8vw,140px) 80px' }}>
      {/* Glow */}
      <div style={{ position: 'absolute', top: '-10%', right: '-5%', width: 700, height: 700, borderRadius: '50%', background: `radial-gradient(circle, ${accentColor}22 0%, transparent 65%)`, pointerEvents: 'none', animation: 'floatGlow 8s ease-in-out infinite' }} />
      <div style={{ position: 'absolute', bottom: '-20%', left: '20%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 65%)', pointerEvents: 'none', animation: 'floatGlow2 10s ease-in-out infinite' }} />
      {/* Grid lines */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.04, pointerEvents: 'none' }} preserveAspectRatio="none">
        {Array.from({ length: 12 }).map((_, i) => <line key={i} x1={`${(i + 1) * 8.33}%`} y1="0" x2={`${(i + 1) * 8.33}%`} y2="100%" stroke="white" strokeWidth="1" />)}
        {Array.from({ length: 8 }).map((_, i) => <line key={i} x1="0" y1={`${(i + 1) * 12.5}%`} x2="100%" y2={`${(i + 1) * 12.5}%`} stroke="white" strokeWidth="1" />)}
      </svg>

      <div style={{ position: 'relative', maxWidth: 760, zIndex: 1 }}>
        {urgency && (
          <div className="hero-badge" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,200,50,0.12)', border: '1px solid rgba(255,200,50,0.3)', borderRadius: 100, padding: '6px 16px', marginBottom: 28 }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#ffc832', display: 'inline-block', animation: 'pulse 1.5s infinite' }} />
            <span style={{ color: '#ffc832', fontSize: 13, fontFamily: "'DM Sans', sans-serif", fontWeight: 500 }}>0% MwSt. auf Kauf & Installation</span>
          </div>
        )}
        <div className="hero-badge" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.13)', borderRadius: 100, padding: '6px 16px', marginBottom: urgency ? 16 : 28 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: accentColor, display: 'inline-block' }} />
          <span style={{ color: 'rgba(255,255,255,0.75)', fontSize: 13, fontFamily: "'DM Sans', sans-serif", fontWeight: 500 }}>
            ⏰ <strong style={{ color: '#fff' }}>{Math.max(0, Math.ceil((new Date('2026-07-31').getTime() - new Date().getTime()) / 86400000))} Tage</strong> bis Einspeisevergütung sinkt: <strong style={{ color: accentColor }}>7,78 Cent/kWh</strong> sichern!
          </span>
        </div>
        <h1 className="hero-h1" style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(38px,6vw,78px)', lineHeight: 1.05, color: '#fff', margin: '0 0 24px', letterSpacing: '-0.03em' }}>
          Sparen Sie bis zu <span style={{ color: accentColor }}>70%</span><br />Ihrer Stromkosten<br />mit Solar.
        </h1>
        <p className="hero-sub" style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 'clamp(16px,2vw,20px)', color: 'rgba(255,255,255,0.6)', margin: '0 0 40px', lineHeight: 1.6, maxWidth: 540 }}>
          Komplettlösung inkl. Montage, Anmeldung &amp; Förderung — aus einer Hand, von echten Fachleuten aus Ihrer Region.
        </p>
        <div className="hero-btns" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 52 }}>
          <button onClick={() => document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' })}
            className="cta-primary" style={{ background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '18px 36px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 17, cursor: 'pointer', transition: 'transform 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}>
            Kostenlose Beratung sichern →
          </button>
          <button onClick={() => document.getElementById('rechner').scrollIntoView({ behavior: 'smooth', block: 'start' })}
            style={{ background: 'transparent', color: 'rgba(255,255,255,0.75)', border: '1px solid rgba(255,255,255,0.2)', borderRadius: 10, padding: '18px 32px', fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 17, cursor: 'pointer', transition: 'all 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)'; e.currentTarget.style.color = '#fff'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)'; e.currentTarget.style.color = 'rgba(255,255,255,0.75)'; }}>
            Ersparnis berechnen
          </button>
        </div>
        <div className="hero-trust" style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' }}>
          <a href="https://www.google.com/search?q=Solarcor+GmbH+Schee%C3%9Fel+Bewertungen" target="_blank" rel="noopener" style={{ display: 'flex', flexDirection: 'column', gap: 4, textDecoration: 'none', cursor: 'pointer', transition: 'transform 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <svg width="18" height="18" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/>
                <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/>
                <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/>
                <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/>
              </svg>
              <span style={{ color: '#fbbf24', fontSize: 18, letterSpacing: 2 }}>★★★★★</span>
            </div>
            <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12, fontFamily: "'DM Sans', sans-serif" }}>17 Bewertungen · Google &amp; Trustlocal</div>
          </a>
          <div style={{ width: 1, height: 36, background: 'rgba(255,255,255,0.12)' }} />
          <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, fontFamily: "'DM Sans', sans-serif", lineHeight: 1.4 }}>
            <div style={{ color: '#fff', fontWeight: 600, fontSize: 15 }}>Seit 2011</div>
            Regionaler Fachbetrieb
          </div>
          <div style={{ width: 1, height: 36, background: 'rgba(255,255,255,0.12)' }} />
          <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, fontFamily: "'DM Sans', sans-serif", lineHeight: 1.4 }}>
            <div style={{ color: accentColor, fontWeight: 700, fontSize: 15 }}>Solar Award 2025</div>
            Ausgezeichneter Betrieb
          </div>
        </div>
      </div>
      <div className="hero-img" style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: '44%', overflow: 'hidden', maskImage: 'linear-gradient(to right, transparent 0%, black 25%)', WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 25%)' }}>
        <img src="assets/anlage-dach.jpeg" alt="Solarcor PV Anlage" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', opacity: 0.55 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(11,13,16,0.3) 0%, rgba(11,13,16,0.1) 60%, rgba(11,13,16,0.6) 100%)' }} />
      </div>
      <style>{`
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes floatGlow { 0%,100% { transform: scale(1) translate(0,0); opacity: 0.15; } 50% { transform: scale(1.12) translate(20px,-20px); opacity: 0.25; } }
        @keyframes floatGlow2 { 0%,100% { transform: scale(1) translate(0,0); opacity: 0.08; } 50% { transform: scale(1.08) translate(-15px,15px); opacity: 0.15; } }
        @keyframes ctaPulse { 0%,100% { box-shadow: 0 0 40px var(--accent,#3aac2e)55; } 50% { box-shadow: 0 0 72px var(--accent,#3aac2e)99, 0 0 120px var(--accent,#3aac2e)33; } }
        .hero-badge { animation: fadeIn 0.6s ease both; }
        .hero-h1 { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
        .hero-sub { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
        .hero-btns { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.55s both; }
        .hero-trust { animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s both; }
        .hero-img { animation: fadeIn 1.2s ease 0.3s both; }
        .cta-primary { animation: ctaPulse 2.5s ease-in-out infinite; }
      `}</style>
    </section>
  );
}

/* ── Problem → Lösung ────────────────────────────────── */
function ProblemSolution({ accentColor }) {
  const [ref, vis] = useInView();
  return (
    <section ref={ref} style={{ background: '#f8f7f4', padding: 'clamp(64px,8vw,120px) clamp(20px,8vw,140px)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="two-col">
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateX(-30px)', transition: 'all 0.7s ease' }}>
          <div style={{ display: 'inline-block', background: '#fee2e2', color: '#dc2626', borderRadius: 8, padding: '5px 14px', fontSize: 12, fontWeight: 700, fontFamily: "'DM Sans', sans-serif", letterSpacing: '0.08em', marginBottom: 24, textTransform: 'uppercase' }}>Das Problem</div>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, color: '#0b0d10', margin: '0 0 24px', letterSpacing: '-0.02em', lineHeight: 1.15 }}>Ihre Stromrechnung<br />steigt jedes Jahr.</h2>
          {[
            ['↑', 'Strompreise stiegen um über 40% in 5 Jahren'],
            ['?', 'Unsicherheit über künftige Energiekosten'],
            ['✗', 'Abhängigkeit vom lokalen Versorger'],
          ].map(([icon, text]) => (
            <div key={text} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 16 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: '#fee2e2', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#dc2626', fontWeight: 700, fontSize: 14, flexShrink: 0 }}>{icon}</div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#4a4a52', margin: 0, paddingTop: 6 }}>{text}</p>
            </div>
          ))}
        </div>
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateX(30px)', transition: 'all 0.7s ease 0.2s' }}>
          <div style={{ display: 'inline-block', background: `${accentColor}22`, color: accentColor, borderRadius: 8, padding: '5px 14px', fontSize: 12, fontWeight: 700, fontFamily: "'DM Sans', sans-serif", letterSpacing: '0.08em', marginBottom: 24, textTransform: 'uppercase' }}>Die Lösung</div>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 800, color: '#0b0d10', margin: '0 0 24px', letterSpacing: '-0.02em', lineHeight: 1.15 }}>Ihr eigenes<br />Solarkraftwerk.</h2>
          {[
            ['☀', 'Bis zu 70% weniger Stromkosten ab Tag 1'],
            ['€', 'Staatliche Förderung & 0% MwSt nutzen'],
            ['♻', 'Unabhängig — auch beim nächsten Preisschock'],
          ].map(([icon, text]) => (
            <div key={text} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 16 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: `${accentColor}22`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: accentColor, fontWeight: 700, fontSize: 14, flexShrink: 0 }}>{icon}</div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#4a4a52', margin: 0, paddingTop: 6 }}>{text}</p>
            </div>
          ))}
          <button onClick={() => document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' })}
            style={{ marginTop: 8, background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '15px 32px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer', transition: 'opacity 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
            Jetzt unabhängig werden →
          </button>
        </div>
      </div>
    </section>
  );
}

/* ── Vorteile ─────────────────────────────────────────── */
function Vorteile({ accentColor }) {
  const [ref, vis] = useInView();
  const [active, setActive] = useState(null);
  const cards = [
    {
      icon: '⚡',
      title: 'Bis zu 70% sparen',
      desc: 'Produzieren Sie Ihren eigenen Strom und reduzieren Sie Ihre Jahresrechnung drastisch.',
      detail: {
        headline: 'So funktioniert das Sparen',
        text: 'Der Strom, den Ihre Solaranlage produziert, müssen Sie nicht mehr beim Energieversorger kaufen. Eine typische Familie mit 4.000 kWh Jahresverbrauch zahlt heute etwa 1.400 € Stromkosten. Mit einer passenden Solaranlage können Sie davon 70% selbst erzeugen — das sind bis zu 980 € weniger im Jahr. Nach 10–12 Jahren hat sich die Anlage bereits bezahlt gemacht. Danach produzieren Sie für fast nichts eigenen Strom — oft noch 20–30 Jahre lang.',
        points: ['Keine Stromrechnung mehr für selbst genutzten Solarstrom', 'Strom wird tagsüber erzeugt & direkt genutzt oder gespeichert', 'Überschuss wird ins Netz eingespeist — dafür gibt es eine Vergütung', 'Je größer der Eigenverbrauch, desto schneller amortisiert sich die Anlage'],
      },
    },
    {
      icon: '🏛',
      title: 'Staatliche Förderung',
      desc: 'Einspeisevergütung, KfW-Kredit und 0% MwSt. — wir beantragen alles für Sie.',
      detail: {
        headline: 'Was der Staat zahlt',
        text: 'Der Staat unterstützt Sie auf mehreren Wegen: Erstens zahlt Ihnen der Netzbetreiber für jede kWh, die Sie ins Netz einspeisen, eine feste Vergütung (aktuell 7,78 Cent/kWh). Zweitens gibt es günstige KfW-Kredite mit niedrigen Zinsen. Und drittens: Seit 2023 gilt 0% Mehrwertsteuer auf Kauf und Installation von PV-Anlagen — das spart Ihnen direkt mehrere tausend Euro. Wir kümmern uns um alle Anträge — Sie müssen sich um nichts kümmern.',
        points: ['0% MwSt. auf Kauf & Montage (dauerhaft seit 2023)', 'Einspeisevergütung 7,78 Cent/kWh — gültig bis 31.07.2026, danach Absenkung um 1%', 'KfW-Kredit 270: günstige Finanzierung möglich', 'Wir übernehmen alle Anmeldungen & Bürokratie für Sie'],
      },
    },
    {
      icon: '🏠',
      title: 'Immobilien­wertsteigerung',
      desc: 'Studien belegen: PV-Anlagen erhöhen den Marktwert Ihres Hauses um bis zu 10%.',
      detail: {
        headline: 'Ihr Haus wird mehr wert',
        text: 'Eine Solaranlage ist nicht nur eine Energiequelle — sie ist eine Investition in Ihre Immobilie. Studien zeigen: Häuser mit PV-Anlage erzielen beim Verkauf im Schnitt 5–10% höhere Preise als vergleichbare Häuser ohne. Bei einem Haus im Wert von 400.000 € sind das bis zu 40.000 € mehr. Käufer wissen: Wer das Haus kauft, hat von Tag 1 an niedrige Energiekosten. Das ist bares Geld wert.',
        points: ['5–10% höherer Marktwert beim Hausverkauf', 'Niedriger Energieausweis — attraktiver für Käufer', 'Zukunftssichere Investition auch bei steigenden Strompreisen', 'Anlage geht beim Verkauf automatisch auf den neuen Eigentümer über'],
      },
    },
    {
      icon: '🌱',
      title: 'Klimaschutz',
      desc: 'Bis zu 2 Tonnen CO₂ weniger pro Jahr — Gutes tun und dabei Geld sparen.',
      detail: {
        headline: 'Gut für die Umwelt — und für Ihren Geldbeutel',
        text: 'Jede kWh Solarstrom, die Sie selbst nutzen, ist eine kWh, die nicht im Kraftwerk produziert werden muss. Eine typische 10 kWp Anlage spart pro Jahr etwa 2 Tonnen CO₂ ein — das entspricht ca. 10.000 km Autofahrt. Über 25 Jahre sind das 50 Tonnen CO₂. Das Beste daran: Sie müssen nichts aufgeben. Sie sparen Geld und tun gleichzeitig etwas für die nächste Generation.',
        points: ['Bis zu 2 Tonnen CO₂ weniger pro Jahr', 'Entspricht ca. 10.000 km weniger Autofahrt jährlich', 'Sauberer Strom direkt vom eigenen Dach — kein Netzstrom nötig', 'Echte Unabhängigkeit vom Energiemarkt'],
      },
    },
  ];

  return (
    <section id="vorteile" ref={ref} style={{ background: '#0b0d10', padding: 'clamp(64px,8vw,120px) clamp(20px,8vw,140px)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 16px' }}>Warum Solarcor</p>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(28px,4vw,52px)', fontWeight: 800, color: '#fff', margin: 0, letterSpacing: '-0.03em' }}>Vier starke Gründe.</h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", color: 'rgba(255,255,255,0.4)', fontSize: 15, marginTop: 12 }}>Klicken Sie auf eine Karte für mehr Details</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 24 }}>
          {cards.map((c, i) => (
            <div key={c.title} onClick={() => setActive(c)}
              style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid ${active?.title === c.title ? accentColor + '66' : 'rgba(255,255,255,0.08)'}`, borderRadius: 16, padding: '36px 28px', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(24px)', transition: `all 0.6s ease ${i * 0.1}s`, cursor: 'pointer' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; e.currentTarget.style.borderColor = `${accentColor}44`; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; e.currentTarget.style.transform = 'none'; }}>
              <div style={{ fontSize: 32, marginBottom: 20 }}>{c.icon}</div>
              <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 20, color: '#fff', margin: '0 0 12px', letterSpacing: '-0.01em' }}>{c.title}</h3>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.55)', margin: '0 0 20px', lineHeight: 1.6 }}>{c.desc}</p>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: accentColor, fontSize: 13, fontFamily: "'DM Sans', sans-serif", fontWeight: 600 }}>
                Mehr erfahren <span style={{ fontSize: 16 }}>→</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Modal */}
      {active && (
        <div onClick={() => setActive(null)} style={{ position: 'fixed', inset: 0, zIndex: 500, background: 'rgba(0,0,0,0.75)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, backdropFilter: 'blur(8px)', animation: 'fadeIn 0.2s ease' }}>
          <div onClick={e => e.stopPropagation()} style={{ background: '#141820', border: `1px solid ${accentColor}44`, borderRadius: 24, padding: '48px 44px', maxWidth: 560, width: '100%', maxHeight: '85vh', overflowY: 'auto', position: 'relative', animation: 'fadeUp 0.3s ease' }}>
            <button onClick={() => setActive(null)} style={{ position: 'absolute', top: 20, right: 20, background: 'rgba(255,255,255,0.08)', border: 'none', borderRadius: '50%', width: 36, height: 36, color: '#fff', fontSize: 18, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
            <div style={{ fontSize: 40, marginBottom: 20 }}>{active.icon}</div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>{active.title}</div>
            <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 26, color: '#fff', margin: '0 0 20px', lineHeight: 1.2 }}>{active.detail.headline}</h3>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.75, margin: '0 0 28px' }}>{active.detail.text}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {active.detail.points.map(p => (
                <div key={p} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: accentColor, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <span style={{ color: '#0b0d10', fontSize: 10, fontWeight: 700 }}>✓</span>
                  </div>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.8)', lineHeight: 1.5 }}>{p}</span>
                </div>
              ))}
            </div>
            <button onClick={() => { setActive(null); document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
              style={{ width: '100%', marginTop: 32, background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '16px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer' }}>
              Jetzt kostenlose Beratung sichern →
            </button>
          </div>
        </div>
      )}
    </section>
  );
}

/* ── Technologie ──────────────────────────────────────── */
function Technologie({ accentColor }) {
  const [ref, vis] = useInView();
  const [activePoint, setActivePoint] = useState(null);

  const longiPoints = [
    { label: 'Über 22–23% Modulwirkungsgrad — mehr Strom pro m²', headline: 'Mehr Strom auf weniger Fläche', text: 'Ein normales Solarmodul erreicht etwa 18-20% Wirkungsgrad. Die LONGi Hi-MO 6 Module schaffen über 22–23%. Das klingt nach wenig Unterschied — bedeutet aber: Sie brauchen weniger Dachfläche für dieselbe Leistung. Oder: Sie bekommen mehr Leistung aus der gleichen Fläche. Besonders wichtig bei kleinen Dächern.' },
    { label: 'Full-Black Design — elegant & homogen für Wohngebäude', headline: 'Schön wie ein Apple-Produkt', text: 'Die Full-Black Module haben keine sichtbaren Leiterbahnen auf der Vorderseite — das Modul wirkt wie aus einem Guss. Komplett schwarz, rahmenlos elegant. Auf einem Wohngebäude sieht das professionell und modern aus — kein "technischer Klotz auf dem Dach", sondern ein Teil des Hauses.' },
    { label: 'Starkes Schwachlichtverhalten — auch bei Bewölkung effizient', headline: 'Auch wenn die Sonne sich versteckt', text: 'In Norddeutschland ist es nicht immer sonnig — das wissen wir. Die LONGi Module produzieren aber auch bei bedecktem Himmel, morgens und abends noch effektiv Strom. Durch die HPBC-Technologie reagieren sie besonders sensibel auf schwaches Licht. Das macht einen spürbaren Unterschied im jährlichen Ertrag.' },
    { label: 'Hohe Verschattungsresistenz durch HPBC-Technologie', headline: 'Ein Schatten ruiniert nicht alles', text: 'Bei älteren Modulen reicht ein Schornstein oder ein Baum, der einen Teil des Daches beschattet — und die ganze Reihe produziert kaum noch Strom. Die HPBC-Technologie von LONGi verhindert das: Jede Zelle arbeitet weitgehend unabhängig. Selbst bei Teilverschattung läuft der Rest der Anlage auf voller Leistung.' },
    { label: 'Glas-Glas-Option — robust gegen Hagel & Witterung', headline: 'Hält 30 Jahre Norddeutsches Wetter aus', text: 'Statt Folie auf der Rückseite kommt bei der Glas-Glas-Variante eine zweite Glasschicht. Das macht das Modul deutlich widerstandsfähiger: kein Vergilben der Folie, keine Mikrorisse durch Temperaturschwankungen, besserer Schutz gegen Hagel. Für norddeutsches Wetter die klügere Wahl.' },
    { label: 'Optimaler Temperaturkoeffizient — effizient auch im Sommer', headline: 'Im Hochsommer keine Verluste', text: 'Solarmodule verlieren Leistung, wenn sie sehr heiß werden — das ist Physik. Je niedriger der Temperaturkoeffizient, desto weniger Verlust. LONGi Module haben hier sehr gute Werte. An heißen Sommertagen, wenn die Sonne am stärksten scheint, liefern sie trotzdem nahezu volle Leistung.' },
    { label: '25 Jahre Produktgarantie, 30 Jahre Leistungsgarantie', headline: 'Längste Garantie der Branche', text: 'LONGi gibt 25 Jahre Garantie auf das Produkt selbst (kein Defekt) und garantiert für 30 Jahre, dass das Modul noch mindestens 87,4% seiner ursprünglichen Leistung erbringt. Das ist Rekord in der Branche. Sie können also sicher sein: Diese Anlage läuft noch, wenn Ihre Kinder erwachsen sind.' },
  ];

  const smartPoints = [
    { label: 'Maximaler Eigenverbrauch durch intelligente Energieoptimierung', headline: 'Ihr Strom bleibt bei Ihnen', text: 'Der Smart Meter erkennt sekündlich, wann Ihre Anlage mehr produziert als Sie verbrauchen. In diesem Moment schaltet er automatisch z.B. die Spülmaschine, den Warmwasserboiler oder die Wärmepumpe ein — damit wird der überschüssige Solarstrom direkt im Haus genutzt statt verschenkt.' },
    { label: 'Dynamische Stromtarife nutzen — günstiger laden & heizen', headline: 'Laden wenn Strom billig ist', text: 'Mit dynamischen Stromtarifen (z.B. Tibber) kostet Strom nachts oder bei viel Wind/Sonne im Netz manchmal nur 5–10 Cent/kWh statt 30 Cent. Der Smart Meter erkennt das automatisch und lädt Ihr E-Auto oder Ihren Speicher genau dann auf — Sie profitieren ohne selbst etwas tun zu müssen.' },
    { label: 'Vernetzt Wechselrichter, Speicher, Wallbox & Wärmepumpe', headline: 'Ein System für alles', text: 'Ob SMA, Fronius, Victron oder Sungrow — der Smart Energy Manager Connect 2 spricht mit fast allen Herstellern. Alle Geräte arbeiten zusammen als ein intelligentes System. Sie müssen nicht alles vom gleichen Hersteller kaufen. Das gibt Ihnen Flexibilität und Unabhängigkeit.' },
    { label: 'RS485, LAN/WLAN, digitale Ein-/Ausgänge & Relais (Connect 2)', headline: 'Für Technikbegeisterte: alle Schnittstellen', text: 'Der Connect 2 hat neben normalem LAN/WLAN auch RS485-Schnittstellen (für professionelle Gebäudetechnik), zwei digitale Ein- und Ausgänge sowie ein Relais. Damit können auch Heizstäbe stufenlos geregelt werden. Kurz: Es gibt fast kein Gerät, das sich nicht anschließen lässt.' },
    { label: 'Zukunftssicher nach §14a EnWG — Netzdienlichkeit gewährleistet', headline: 'Kein Ärger mit dem Netzbetreiber', text: 'Seit 2024 darf der Netzbetreiber Ihre Wallbox oder Wärmepumpe kurzzeitig drosseln, wenn das Netz überlastet ist (§14a EnWG). Der Smart Meter managt das intelligent: Er meldet dem Netzbetreiber die Verfügbarkeit und steuert intern so um, dass Sie trotzdem maximal profitieren. Alles automatisch.' },
    { label: 'Schnelle Installation per QR-Code via Installer App', headline: 'In Betrieb in weniger als einer Stunde', text: 'Unsere Techniker scannen nach der Montage einfach den QR-Code auf dem Gerät — schon ist es im System registriert und mit allem verbunden. Keine langen Konfigurationen, keine Fachkenntnisse für Sie nötig. Danach läuft alles selbstständig.' },
    { label: 'App-Übersicht: Erzeugung, Verbrauch & Kosten in Echtzeit', headline: 'Alles auf einen Blick auf Ihrem Handy', text: 'In der zugehörigen App sehen Sie live: Wieviel Strom Ihre Anlage gerade produziert, wieviel Sie gerade verbrauchen, wieviel im Speicher steckt, wieviel Sie heute gespart haben. Einfache Grafiken, klare Zahlen. Viele unserer Kunden sagen, sie schauen täglich rein — weil es einfach Spaß macht.' },
  ];

  const techs = [
    { icon: '☀', label: 'LONGi Solar Module', badge: 'HPBC-Technologie', title: 'Mehr Strom. Weniger Fläche. Einfach besser.', desc: 'LONGi Hi-MO 6 Module (465W) mit innovativer HPBC-Zelltechnologie.', points: longiPoints },
    { icon: '⚡', label: 'Smart Energy Manager', badge: 'Alles vernetzt', title: 'Intelligente Energie — vollständig vernetzt.', desc: 'Der Smart Meter Connect 2 steuert Ihren gesamten Energiefluss intelligent.', points: smartPoints },
  ];

  return (
    <section ref={ref} style={{ background: '#0b0d10', padding: 'clamp(64px,8vw,120px) clamp(20px,8vw,140px)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 16px' }}>Unsere Technologie</p>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(28px,4vw,52px)', fontWeight: 800, color: '#fff', margin: 0, letterSpacing: '-0.03em' }}>Das Beste — kein Kompromiss.</h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", color: 'rgba(255,255,255,0.4)', fontSize: 15, marginTop: 12 }}>Auf jeden Vorteil klicken für eine einfache Erklärung</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }} className="two-col">
          {techs.map((t, i) => (
            <div key={t.label} style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid ${accentColor}33`, borderRadius: 20, padding: '40px 36px', opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(24px)', transition: `all 0.6s ease ${i * 0.15}s` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: `${accentColor}22`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>{t.icon}</div>
                <div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: accentColor, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 2 }}>{t.badge}</div>
                  <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 17, color: '#fff' }}>{t.label}</div>
                </div>
              </div>
              <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 22, color: '#fff', margin: '0 0 12px', lineHeight: 1.2 }}>{t.title}</h3>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.55)', lineHeight: 1.65, margin: '0 0 24px' }}>{t.desc}</p>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.3)', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span>👆</span> Auf einen Vorteil klicken für einfache Erklärung
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {t.points.map(p => (
                  <div key={p.label} onClick={() => setActivePoint(p)}
                    style={{ display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer', borderRadius: 10, padding: '10px 12px', margin: '0 -12px', transition: 'all 0.15s', border: '1px solid transparent' }}
                    onMouseEnter={e => { e.currentTarget.style.background = `${accentColor}18`; e.currentTarget.style.borderColor = `${accentColor}44`; }}
                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'transparent'; }}>
                    <div style={{ width: 20, height: 20, borderRadius: '50%', background: accentColor, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                      <span style={{ color: '#0b0d10', fontSize: 10, fontWeight: 700 }}>✓</span>
                    </div>
                    <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: 'rgba(255,255,255,0.8)', lineHeight: 1.5, flex: 1 }}>{p.label}</span>
                    <span style={{ color: accentColor, fontSize: 18, flexShrink: 0, paddingTop: 1, fontWeight: 300 }}>›</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Point Modal */}
      {activePoint && (
        <div onClick={() => setActivePoint(null)} style={{ position: 'fixed', inset: 0, zIndex: 500, background: 'rgba(0,0,0,0.75)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, backdropFilter: 'blur(8px)', animation: 'fadeIn 0.2s ease' }}>
          <div onClick={e => e.stopPropagation()} style={{ background: '#141820', border: `1px solid ${accentColor}44`, borderRadius: 24, padding: '44px 40px', maxWidth: 520, width: '100%', position: 'relative', animation: 'fadeUp 0.3s ease' }}>
            <button onClick={() => setActivePoint(null)} style={{ position: 'absolute', top: 20, right: 20, background: 'rgba(255,255,255,0.08)', border: 'none', borderRadius: '50%', width: 36, height: 36, color: '#fff', fontSize: 18, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
            <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 24, color: '#fff', margin: '0 0 16px', lineHeight: 1.2, paddingRight: 40 }}>{activePoint.headline}</h3>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.75, margin: '0 0 28px' }}>{activePoint.text}</p>
            <button onClick={() => { setActivePoint(null); document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
              style={{ width: '100%', background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '14px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 15, cursor: 'pointer' }}>
              Kostenlose Beratung sichern →
            </button>
          </div>
        </div>
      )}
    </section>
  );
}

/* ── How It Works ─────────────────────────────────────── */
function HowItWorks({ accentColor }) {
  const [ref, vis] = useInView();
  const steps = [
    { n: '01', title: 'Kostenlose Beratung', desc: 'Wir kommen zu Ihnen — analysieren Ihr Dach, Ihren Verbrauch, Ihre Ziele. Unverbindlich.', img: 'assets/hero-beratung.jpeg' },
    { n: '02', title: 'Individuelle Planung', desc: 'Unsere Experten erstellen ein maßgeschneidertes Angebot inkl. Förderoptimierung.', img: 'assets/planung-beratung.jpeg' },
    { n: '03', title: 'Professionelle Installation', desc: 'Unser Team montiert alles — Anlage, Speicher, Anmeldung. Schlüsselfertig.', img: 'assets/installation-01.jpeg' },
  ];
  return (
    <section style={{ background: '#f8f7f4', padding: 'clamp(64px,8vw,120px) clamp(20px,8vw,140px)' }}>
      <div ref={ref} style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 16px' }}>So einfach geht's</p>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(28px,4vw,52px)', fontWeight: 800, color: '#0b0d10', margin: 0, letterSpacing: '-0.03em' }}>In 3 Schritten zur eigenen Solaranlage.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }} className="three-col">
          {steps.map((s, i) => (
            <div key={s.n} style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(24px)', transition: `all 0.6s ease ${i * 0.2}s`, borderRadius: 20, overflow: 'hidden', background: '#fff', boxShadow: '0 2px 20px rgba(0,0,0,0.08)' }}>
              <div style={{ position: 'relative', height: 220, overflow: 'hidden' }}>
                <img src={s.img} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.5s ease' }}
                  onMouseEnter={e => e.target.style.transform = 'scale(1.05)'}
                  onMouseLeave={e => e.target.style.transform = 'scale(1)'} />
                <div style={{ position: 'absolute', top: 16, left: 16, width: 44, height: 44, borderRadius: '50%', background: accentColor, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 20px ${accentColor}88` }}>
                  <span style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 15, color: '#0b0d10' }}>{s.n}</span>
                </div>
              </div>
              <div style={{ padding: '24px 28px 28px' }}>
                <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 20, color: '#0b0d10', margin: '0 0 10px' }}>{s.title}</h3>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#6b7280', margin: 0, lineHeight: 1.6 }}>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolarHouse({ kwp, accentColor }) {
  const moduleLeistung = 0.465;
  const panels = Math.min(Math.round(kwp / moduleLeistung), 16);
  const realModules = Math.round(kwp / moduleLeistung);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '16px 0' }}>
      <svg viewBox="0 0 340 280" width="100%" style={{ maxWidth: 340 }}>
        <defs>
          <linearGradient id="wallGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#e8ddd0"/>
            <stop offset="100%" stopColor="#d4c9bb"/>
          </linearGradient>
          <linearGradient id="sideGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#c4b9ab"/>
            <stop offset="100%" stopColor="#b8ad9e"/>
          </linearGradient>
          <linearGradient id="roofGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#6b7280"/>
            <stop offset="100%" stopColor="#4b5563"/>
          </linearGradient>
          <linearGradient id="roofSideGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#374151"/>
            <stop offset="100%" stopColor="#1f2937"/>
          </linearGradient>
        </defs>

        {/* Ground shadow */}
        <ellipse cx="170" cy="260" rx="130" ry="12" fill="rgba(0,0,0,0.3)"/>

        {/* House body */}
        {/* Front wall */}
        <rect x="60" y="148" width="220" height="102" fill="url(#wallGrad)" rx="2"/>
        {/* Side wall right */}
        <polygon points="280,148 312,132 312,232 280,250" fill="url(#sideGrad)"/>
        {/* Bottom edge */}
        <line x1="60" y1="250" x2="280" y2="250" stroke="#c4b9ab" strokeWidth="1"/>

        {/* Front windows */}
        <rect x="82" y="168" width="46" height="36" rx="4" fill="#7bafd4" stroke="#6a9bbf" strokeWidth="1.5"/>
        <line x1="105" y1="168" x2="105" y2="204" stroke="#6a9bbf" strokeWidth="1"/>
        <line x1="82" y1="186" x2="128" y2="186" stroke="#6a9bbf" strokeWidth="1"/>
        <rect x="82" y="168" width="46" height="36" rx="4" fill="rgba(255,255,255,0.18)" stroke="none"/>

        <rect x="155" y="168" width="46" height="36" rx="4" fill="#7bafd4" stroke="#6a9bbf" strokeWidth="1.5"/>
        <line x1="178" y1="168" x2="178" y2="204" stroke="#6a9bbf" strokeWidth="1"/>
        <line x1="155" y1="186" x2="201" y2="186" stroke="#6a9bbf" strokeWidth="1"/>
        <rect x="155" y="168" width="46" height="36" rx="4" fill="rgba(255,255,255,0.18)" stroke="none"/>

        {/* Side window */}
        <rect x="289" y="162" width="16" height="24" rx="3" fill="#7bafd4" stroke="#6a9bbf" strokeWidth="1" transform="skewY(-8)"/>

        {/* Door */}
        <rect x="212" y="198" width="38" height="52" rx="5" fill="#8b6f47" stroke="#7a6040" strokeWidth="1.5"/>
        <rect x="212" y="198" width="38" height="52" rx="5" fill="rgba(0,0,0,0.12)" stroke="none"/>
        <circle cx="246" cy="225" r="3.5" fill="#d4a820"/>
        <line x1="230" y1="198" x2="230" y2="250" stroke="rgba(0,0,0,0.15)" strokeWidth="1"/>

        {/* Roof */}
        {/* Left face */}
        <polygon points="38,150 170,58 282,150" fill="url(#roofGrad)"/>
        {/* Right face */}
        <polygon points="282,150 314,132 202,54 170,58" fill="url(#roofSideGrad)"/>
        {/* Ridge cap */}
        <polygon points="168,56 204,52 206,58 170,62" fill="#9ca3af"/>
        {/* Eave trim front */}
        <line x1="38" y1="150" x2="282" y2="150" stroke="rgba(255,255,255,0.15)" strokeWidth="2"/>

        {/* Solar panels - 4 cols × 4 rows on left roof face */}
        {Array.from({length: 16}).map((_, idx) => {
          const col = idx % 4;
          const row = Math.floor(idx / 4);
          const active = idx < panels;
          const bx = 96 + col * 43 - row * 9;
          const by = 136 - col * 23 + row * 27;
          const w = 40, h = 22;
          return (
            <g key={idx}>
              <polygon
                points={`${bx},${by} ${bx+w},${by-12} ${bx+w},${by+h-12} ${bx},${by+h}`}
                fill={active ? accentColor : '#374151'}
                stroke={active ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.06)'}
                strokeWidth="0.8"
                opacity={active ? 0.92 : 0.45}
                style={{ transition: 'fill 0.5s ease, opacity 0.5s ease' }}
              />
              {active && <>
                <polygon points={`${bx+3},${by+1} ${bx+20},${by-8} ${bx+20},${by+1} ${bx+3},${by+9}`} fill="rgba(255,255,255,0.18)" stroke="none"/>
                <line x1={bx+w/2} y1={by-6} x2={bx+w/2} y2={by+h-6} stroke="rgba(0,0,0,0.2)" strokeWidth="0.6"/>
                <line x1={bx+5} y1={by+5} x2={bx+w-2} y2={by-7} stroke="rgba(0,0,0,0.2)" strokeWidth="0.6"/>
              </>}
            </g>
          );
        })}

        {/* Sun */}
        <circle cx="296" cy="34" r="20" fill={accentColor} opacity="0.9">
          <animate attributeName="r" values="18;22;18" dur="4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.8;1;0.8" dur="4s" repeatCount="indefinite"/>
        </circle>
        {[0,40,80,120,160,200,240,280,320].map(a => (
          <line key={a}
            x1={296 + Math.cos(a*Math.PI/180)*24} y1={34 + Math.sin(a*Math.PI/180)*24}
            x2={296 + Math.cos(a*Math.PI/180)*32} y2={34 + Math.sin(a*Math.PI/180)*32}
            stroke={accentColor} strokeWidth="2.5" strokeLinecap="round" opacity="0.65"/>
        ))}

        {/* Energy label removed */}
      </svg>
      <p style={{ fontFamily: "'DM Sans', sans-serif", color: 'rgba(255,255,255,0.4)', fontSize: 12, margin: '6px 0 0', textAlign: 'center' }}>
        {realModules} × 465W LONGi Module
      </p>
    </div>
  );
}

function Rechner({ accentColor }) {
  const [kwp, setKwp] = useState(10);
  const [verbrauch, setVerbrauch] = useState(4500);
  const eigenverbrauch = 0.72;
  const strompreis = 0.35;
  const einspeiseverguetung = 0.082;
  const installationKosten = kwp * 1650;
  const jahresProduktion = kwp * 1000;
  const eigenProduktion = Math.min(jahresProduktion * eigenverbrauch, verbrauch);
  const einspeisung = jahresProduktion - eigenProduktion;
  const jahrErsparnis = Math.round(eigenProduktion * strompreis + einspeisung * einspeiseverguetung);
  const amortisation = Math.round(installationKosten / jahrErsparnis * 10) / 10;
  const zwanzigJahre = jahrErsparnis * 20 - installationKosten;

  return (
    <section id="rechner" style={{ background: '#0b0d10', padding: 'clamp(64px,8vw,120px) clamp(20px,8vw,140px)' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 16px' }}>Ihr Ergebnis</p>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(28px,4vw,52px)', fontWeight: 800, color: '#fff', margin: 0, letterSpacing: '-0.03em' }}>Ersparnis-Rechner.</h2>
        </div>
        {/* Slider-Bereich oben */}
        <div className="rechner-top" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 32 }}>
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20, padding: '32px 28px' }}>
            {[
              { label: 'Anlagengröße', value: kwp, unit: 'kWp', min: 3, max: 30, step: 0.5, set: setKwp },
              { label: 'Jahresstromverbrauch', value: verbrauch, unit: 'kWh', min: 1500, max: 15000, step: 250, set: setVerbrauch },
            ].map(({ label, value, unit, min, max, step, set }) => (
              <div key={label} style={{ marginBottom: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>{label}</span>
                  <span style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, color: accentColor, fontSize: 18 }}>{value.toLocaleString('de-DE')} <span style={{ fontSize: 14, fontWeight: 400, color: 'rgba(255,255,255,0.4)' }}>{unit}</span></span>
                </div>
                <input type="range" min={min} max={max} step={step} value={value} onChange={e => set(parseFloat(e.target.value))}
                  style={{ width: '100%', accentColor }} />
              </div>
            ))}
          </div>
          {/* Module-Info-Block statt Haus */}
          <div style={{ background: `${accentColor}15`, border: `1px solid ${accentColor}44`, borderRadius: 20, padding: '32px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>Ihre Anlage</div>
            <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(36px,5vw,56px)', fontWeight: 800, color: '#fff', lineHeight: 1, letterSpacing: '-0.02em', marginBottom: 8 }}>
              {Math.round(kwp / 0.465)} <span style={{ color: accentColor }}>×</span>
            </div>
            <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(20px,2.5vw,28px)', fontWeight: 700, color: '#fff', lineHeight: 1.2, marginBottom: 16 }}>
              465W LONGi Module
            </div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5 }}>
              HPBC-Technologie · Full-Black Design<br />25 Jahre Produktgarantie
            </div>
          </div>
        </div>
        {/* 4 Kacheln in einer Reihe */}
        <div className="rechner-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
          {[
            { label: 'Jährliche Ersparnis', value: `${jahrErsparnis.toLocaleString('de-DE')} €`, highlight: true },
            { label: 'Amortisation', value: `${amortisation} Jahre` },
            { label: 'Gewinn nach 20 Jahren', value: `+${Math.max(0, zwanzigJahre).toLocaleString('de-DE')} €` },
            { label: 'Installationskosten (netto)', value: `${installationKosten.toLocaleString('de-DE')} €` },
          ].map(({ label, value, highlight }) => (
            <div key={label} style={{ background: highlight ? `${accentColor}25` : 'rgba(255,255,255,0.08)', border: `1px solid ${highlight ? accentColor + '66' : 'rgba(255,255,255,0.15)'}`, borderRadius: 14, padding: '24px 16px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', minHeight: 130 }}>
              <span style={{ fontFamily: "'DM Sans', sans-serif", color: 'rgba(255,255,255,0.7)', fontSize: 13, marginBottom: 12, lineHeight: 1.3 }}>{label}</span>
              <span style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 'clamp(18px,1.8vw,24px)', color: highlight ? accentColor : '#fff', lineHeight: 1.1, whiteSpace: 'nowrap' }}>{value}</span>
            </div>
          ))}
        </div>
        {/* CTA-Button volle Breite */}
        <button onClick={() => document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' })}
          style={{ width: '100%', background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '18px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 17, cursor: 'pointer', transition: 'opacity 0.2s' }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
          Kostenloses Angebot sichern →
        </button>
      </div>
    </section>
  );
}

/* ── Trust ────────────────────────────────────────────── */
function Trust({ accentColor }) {
  const [ref, vis] = useInView();
  const reviews = [
    { name: 'Birgit T.', loc: 'Google', text: 'Super Leistung! Von der Auftragserteilung bis zur Einspeisung ins Netz vergingen nicht mal 10 Tage. Tolles Preis-Leistungsverhältnis und professionelle Mitarbeiter. Auf jeden Fall zu empfehlen.', stars: 5 },
    { name: 'Wolfgang W.', loc: 'Google', text: 'Besser als mit Fa. Solarcor konnte es nicht laufen. Von erstem Kontakt bis zur Fertigstellung keine 3 Monate. Freundliches und kompetentes Team — ich kann nur weiterempfehlen!', stars: 5 },
    { name: 'Anja B.', loc: 'Google', text: 'Besser konnte es nicht sein! So professionell arbeitende und sympathische Handwerker. Wir sind dankbar für die tolle Leistung der engagierten Truppe von und mit Herrn Buder.', stars: 5 },
    { name: 'Martin L.', loc: 'Google', text: 'Das Team hat uns rundumversorgt. Lief alles top und wir haben uns sehr wohl mit Solarcor gefühlt — vom Erstgespräch bis zur Fertigstellung.', stars: 5 },
    { name: 'Kerstin B.', loc: 'Google', text: 'Es stimmt alles: erster Kontakt, Treffen vor Ort, offene Fragen klären, bis hin zur sauberen und schnellen Ausführung! Von uns eine eindeutige Empfehlung!', stars: 5 },
    { name: 'Brigitta B.', loc: 'Google', text: 'Das Team von SolarCor ist professionell und sehr sauber. Die Arbeit wird absolut zuverlässig und zügig durchgeführt. Mit allerbestem Gewissen zu empfehlen!', stars: 5 },
    { name: 'Reinhard L.', loc: 'Trustlocal', text: 'Das Solarcor-Team hat den Solar Award Ausgezeichneter Fachbetrieb zurecht erhalten. Sehr gute Beratung und beste Ausführung durch das Mitarbeiter-Team.', stars: 5 },
    { name: 'Bastian W.', loc: 'Trustlocal', text: 'Sehr cooles und kompetentes Team. Sie gehen mit Spaß an die Arbeit und man merkt, dass sie ihren Beruf lieben und beherrschen.', stars: 5 },
    { name: 'Karl Heinz K.', loc: 'Trustlocal', text: 'Ich kann nur mein Bestes über die Firma sagen. Der Chef Thomas Buder ist ein zuverlässiger und guter Partner. Seine Mitarbeiter ebenso.', stars: 5 },
  ];
  // duplicate for seamless loop
  const doubled = [...reviews, ...reviews];
  return (
    <section id="referenzen" ref={ref} style={{ background: '#f8f7f4', padding: 'clamp(64px,8vw,120px) 0' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', paddingLeft: 'clamp(20px,8vw,140px)', paddingRight: 'clamp(20px,8vw,140px)' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <p style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 16px' }}>Kundenstimmen</p>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(28px,4vw,52px)', fontWeight: 800, color: '#0b0d10', margin: 0, letterSpacing: '-0.03em' }}>Was unsere Kunden sagen.</h2>
        </div>
        {/* Bewertungs-Widget: Google + Trustlocal */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, maxWidth: 720, margin: '0 auto 48px' }} className="two-col">
          <a href="https://www.google.com/search?q=Solarcor+GmbH+Schee%C3%9Fel+Bewertungen" target="_blank" rel="noopener"
            style={{ display: 'flex', alignItems: 'center', gap: 16, background: '#fff', border: '1px solid #e5e7eb', borderRadius: 16, padding: '20px 24px', boxShadow: '0 4px 24px rgba(0,0,0,0.08)', textDecoration: 'none', transition: 'transform 0.2s, box-shadow 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.12)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 24px rgba(0,0,0,0.08)'; }}>
            <svg width="40" height="40" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0 }}>
              <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/>
              <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/>
              <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/>
              <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/>
            </svg>
            <div style={{ textAlign: 'left' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                <span style={{ fontFamily: "'Syne', sans-serif", fontSize: 24, fontWeight: 800, color: '#0b0d10' }}>5,0</span>
                <span style={{ color: '#fbbf24', fontSize: 16 }}>★★★★★</span>
              </div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6b7280' }}>
                Google-Bewertungen
              </div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: accentColor, marginTop: 3, fontWeight: 600 }}>
                Ansehen →
              </div>
            </div>
          </a>
          <a href="https://trustlocal.de/niedersachsen/schee%C3%9Fel/solaranlage/solarcor-gmbh/" target="_blank" rel="noopener"
            style={{ display: 'flex', alignItems: 'center', gap: 16, background: '#fff', border: '1px solid #e5e7eb', borderRadius: 16, padding: '20px 24px', boxShadow: '0 4px 24px rgba(0,0,0,0.08)', textDecoration: 'none', transition: 'transform 0.2s, box-shadow 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.12)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 24px rgba(0,0,0,0.08)'; }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: 'linear-gradient(135deg, #00d4a8 0%, #00a884 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: '0 4px 12px rgba(0,168,132,0.3)' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
              </svg>
            </div>
            <div style={{ textAlign: 'left' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                <span style={{ fontFamily: "'Syne', sans-serif", fontSize: 24, fontWeight: 800, color: '#0b0d10' }}>9,5</span>
                <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6b7280' }}>/ 10</span>
              </div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6b7280' }}>
                Trustlocal · "Ausgezeichnet"
              </div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: accentColor, marginTop: 3, fontWeight: 600 }}>
                Ansehen →
              </div>
            </div>
          </a>
        </div>
        {/* Gesamt-Bewertung Hinweis */}
        <div style={{ textAlign: 'center', marginBottom: 48, fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#6b7280' }}>
          <strong style={{ color: '#0b0d10' }}>17 Bewertungen aus 2 Quellen</strong> · Solar Award 2025 · Seit 2011
        </div>
      </div>
      {/* Fließband */}
      <div style={{ overflow: 'hidden', marginBottom: 56, position: 'relative' }}>
        <div style={{ maskImage: 'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)', WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)' }}>
          <div style={{ display: 'flex', gap: 20, animation: 'scroll-reviews 30s linear infinite', width: 'max-content' }}
            onMouseEnter={e => e.currentTarget.style.animationPlayState = 'paused'}
            onMouseLeave={e => e.currentTarget.style.animationPlayState = 'running'}>
            {doubled.map((r, i) => (
              <div key={i} style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 16, padding: '28px 24px', width: 300, flexShrink: 0, boxShadow: '0 2px 16px rgba(0,0,0,0.06)' }}>
                <div style={{ color: '#fbbf24', fontSize: 16, marginBottom: 14 }}>{'★'.repeat(r.stars)}</div>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#374151', lineHeight: 1.65, margin: '0 0 16px' }}>"{r.text}"</p>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 13, color: '#0b0d10' }}>{r.name} <span style={{ fontWeight: 400, color: '#9ca3af' }}>· {r.loc}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @keyframes scroll-reviews {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
      `}</style>
      <div style={{ maxWidth: 1100, margin: '0 auto', paddingLeft: 'clamp(20px,8vw,140px)', paddingRight: 'clamp(20px,8vw,140px)' }}>
        {/* Solar Award + Referenz photo */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 56 }} className="two-col">
          <div style={{ borderRadius: 16, overflow: 'hidden', height: 220 }}>
            <img src="assets/referenz-dach.jpeg" alt="Referenzanlage" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ borderRadius: 16, overflow: 'hidden', height: 220, background: '#fff', border: '1px solid #e5e7eb', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
            <img src="assets/solar-award-2025-26.png" alt="Solar Award 2025/26" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
          </div>
        </div>
        {/* Stats row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32, borderTop: '1px solid #e5e7eb', paddingTop: 56 }} className="three-col">
          {[

            { val: 15, suffix: ' Jahre', label: 'Erfahrung' },
            { val: 5.0, suffix: '/5', label: 'Kundenbewertung' },
            { val: 40, suffix: ' km', label: 'Serviceradius' },
          ].map(({ val, suffix, label }) => (
            <div key={label} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(32px,4vw,48px)', fontWeight: 800, color: accentColor, letterSpacing: '-0.03em' }}>
                <AnimNumber target={val} suffix={suffix} />
              </div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#6b7280', marginTop: 6 }}>{label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Balkon ───────────────────────────────────────────── */
function Balkon({ accentColor }) {
  const [ref, vis] = useInView();
  return (
    <section ref={ref} style={{ background: '#0b0d10', padding: 'clamp(64px,8vw,100px) clamp(20px,8vw,140px)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="two-col">
        <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateX(-30px)', transition: 'all 0.7s ease' }}>
          <div style={{ display: 'inline-block', background: 'rgba(34,197,94,0.15)', color: '#4ade80', borderRadius: 100, padding: '5px 16px', fontSize: 12, fontWeight: 700, fontFamily: "'DM Sans', sans-serif", letterSpacing: '0.08em', marginBottom: 24, textTransform: 'uppercase' }}>Neu: Balkonkraftwerk</div>
          <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(26px,3.5vw,44px)', fontWeight: 800, color: '#fff', margin: '0 0 20px', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Einsteigen &amp; sofort sparen — ohne Dachmontage.</h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: 'rgba(255,255,255,0.6)', margin: '0 0 32px', lineHeight: 1.65 }}>
            Ideal für Mieter und Eigentümer ohne eigenes Dach. Plug &amp; Play, in einer Stunde installiert, sofort am Netz.
          </p>
          {['Ab 599 € inkl. Lieferung', 'Keine Genehmigung nötig', 'Bis zu 600W Leistung', 'Direkt bei Solarcor bestellen'].map(f => (
            <div key={f} style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
              <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#4ade80', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ color: '#0b0d10', fontSize: 11, fontWeight: 700 }}>✓</span>
              </div>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.75)' }}>{f}</span>
            </div>
          ))}
          <button onClick={() => document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' })}
            style={{ marginTop: 24, background: '#4ade80', color: '#0b0d10', border: 'none', borderRadius: 10, padding: '16px 32px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer', transition: 'opacity 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
            Jetzt Balkonkraftwerk sichern →
          </button>
        </div>
          <div style={{ opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateX(30px)', transition: 'all 0.7s ease 0.2s' }}>
          <div style={{ borderRadius: 20, overflow: 'hidden', height: 380, position: 'relative' }}>
            <img src="assets/team-dach.jpeg" alt="Solarcor Team" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(11,13,16,0.6) 0%, transparent 60%)' }} />
            <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20 }}>
              <p style={{ fontFamily: "'DM Sans', sans-serif", color: 'rgba(255,255,255,0.8)', fontSize: 13, margin: 0 }}>Das Solarcor-Team — direkt vor Ort</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── CTA Form ─────────────────────────────────────────── */
/* ── Empfehlungs-Programm ────────────────────────────── */
function Empfehlung({ accentColor }) {
  return (
    <section style={{ background: '#0b0d10', padding: 'clamp(64px,8vw,100px) clamp(20px,8vw,140px)', position: 'relative', overflow: 'hidden' }}>
      {/* Dekorativer Akzent */}
      <div style={{ position: 'absolute', top: '-40%', right: '-10%', width: 500, height: 500, borderRadius: '50%', background: `${accentColor}11`, filter: 'blur(80px)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'inline-block', background: `${accentColor}22`, color: accentColor, borderRadius: 8, padding: '5px 14px', fontSize: 12, fontWeight: 700, fontFamily: "'DM Sans', sans-serif", letterSpacing: '0.08em', marginBottom: 24, textTransform: 'uppercase' }}>🎁 Empfehlungs-Programm</div>
        <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(28px,4vw,52px)', fontWeight: 800, color: '#fff', margin: '0 0 24px', letterSpacing: '-0.03em', lineHeight: 1.15 }}>
          Empfehlen Sie uns weiter — <span style={{ color: accentColor }}>200 € Prämie</span>.
        </h2>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, color: 'rgba(255,255,255,0.65)', margin: '0 auto 48px', lineHeight: 1.6, maxWidth: 640 }}>
          Sie kennen jemanden, der eine Solaranlage möchte? Empfehlen Sie uns weiter und Sie erhalten <strong style={{ color: '#fff' }}>200 € Prämie</strong> für jeden erfolgreichen Vertragsabschluss.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 48 }} className="three-col">
          {[
            { icon: '👋', title: 'Empfehlen', text: 'Erzählen Sie Familie, Freunden oder Nachbarn von uns.' },
            { icon: '🤝', title: 'Wir beraten', text: 'Wir kümmern uns um die kostenlose Beratung.' },
            { icon: '💸', title: 'Sie kassieren', text: 'Bei erfolgreichem Vertrag: 200 € auf Ihr Konto.' },
          ].map((step, i) => (
            <div key={i} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 16, padding: '28px 24px', textAlign: 'left' }}>
              <div style={{ fontSize: 36, marginBottom: 16 }}>{step.icon}</div>
              <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 18, color: '#fff', margin: '0 0 8px' }}>{step.title}</h3>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: 'rgba(255,255,255,0.6)', margin: 0, lineHeight: 1.5 }}>{step.text}</p>
            </div>
          ))}
        </div>
        <button onClick={() => document.getElementById('kontakt')?.scrollIntoView({ behavior: 'smooth' })}
          style={{ background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '16px 36px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer', boxShadow: `0 4px 24px ${accentColor}55`, transition: 'transform 0.2s' }}
          onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
          Jetzt empfehlen →
        </button>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.4)', margin: '20px 0 0' }}>
          Auszahlung nach erfolgreichem Vertragsabschluss · Details auf Anfrage
        </p>
      </div>
    </section>
  );
}

function CTAForm({ accentColor, urgency }) {
  const [form, setForm] = useState({ name: '', phone: '', email: '', adresse: '', verbrauch: '' });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});
  const [step, setStep] = useState(1);
  const totalSteps = 3;

  const validateStep = (s) => {
    const e = {};
    if (s === 1) {
      if (!form.adresse.trim()) e.adresse = 'Bitte Adresse eingeben';
    }
    if (s === 2) {
      if (!form.verbrauch.trim()) e.verbrauch = 'Bitte Stromverbrauch eingeben';
    }
    if (s === 3) {
      if (!form.name.trim()) e.name = 'Bitte Namen eingeben';
      if (!form.phone.trim()) e.phone = 'Bitte Telefonnummer eingeben';
    }
    return e;
  };

  const nextStep = () => {
    const e = validateStep(step);
    if (Object.keys(e).length) { setErrors(e); return; }
    setErrors({});
    setStep(step + 1);
  };

  const prevStep = () => { setErrors({}); setStep(step - 1); };

  const submit = () => {
    const e = validateStep(3);
    if (Object.keys(e).length) { setErrors(e); return; }
    const subject = encodeURIComponent('Neue Beratungsanfrage – Solarcor Landingpage');
    const body = encodeURIComponent(
      `Neue Beratungsanfrage von der Webseite:\n\nName: ${form.name}\nTelefon: ${form.phone}\nE-Mail: ${form.email || 'k.A.'}\nAdresse: ${form.adresse || 'k.A.'}\nStromverbrauch: ${form.verbrauch || 'k.A.'}`
    );
    window.open(`mailto:office@solarcor.de?subject=${subject}&body=${body}`);
    setSent(true);
  };

  const stepTitles = [
    { title: 'Wo soll die Anlage hin?', sub: 'Wir prüfen, ob wir in Ihrer Region installieren.' },
    { title: 'Wie viel Strom verbrauchen Sie?', sub: 'Damit berechnen wir die optimale Anlagengröße.' },
    { title: 'Wie können wir Sie erreichen?', sub: 'Wir melden uns innerhalb von 24h bei Ihnen.' },
  ];

  return (
    <section id="kontakt" style={{ background: '#f8f7f4', padding: 'clamp(64px,8vw,120px) clamp(20px,8vw,140px)' }}>
      <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
        {urgency && (
          <div style={{ background: '#fef3c7', border: '1px solid #fcd34d', borderRadius: 10, padding: '12px 20px', marginBottom: 32, fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#92400e', fontWeight: 600 }}>
            ⚠ Nur noch begrenzte Beratungstermine verfügbar!
          </div>
        )}
        <p style={{ fontFamily: "'DM Sans', sans-serif", color: accentColor, fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', margin: '0 0 16px' }}>Jetzt starten</p>
        <h2 style={{ fontFamily: "'Syne', sans-serif", fontSize: 'clamp(28px,4vw,52px)', fontWeight: 800, color: '#0b0d10', margin: '0 0 16px', letterSpacing: '-0.03em' }}>Kostenlose Beratung sichern.</h2>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#6b7280', margin: '0 0 48px', lineHeight: 1.6 }}>
          In nur 3 Schritten — wir melden uns innerhalb von 24h mit einem unverbindlichen Angebot.
        </p>
        {sent ? (
          <div style={{ background: `${accentColor}18`, border: `2px solid ${accentColor}`, borderRadius: 16, padding: '48px 40px' }}>
            <div style={{ fontSize: 48, marginBottom: 20 }}>✅</div>
            <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 24, color: '#0b0d10', margin: '0 0 12px' }}>Anfrage erhalten!</h3>
            <p style={{ fontFamily: "'DM Sans', sans-serif", color: '#6b7280', fontSize: 16, margin: 0 }}>Wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
          </div>
        ) : (
          <div style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 20, padding: '40px', boxShadow: '0 4px 32px rgba(0,0,0,0.08)', textAlign: 'left' }}>
            {/* Fortschrittsbalken */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 32 }}>
              {[1, 2, 3].map(s => (
                <React.Fragment key={s}>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: s <= step ? accentColor : '#e5e7eb', color: s <= step ? '#0b0d10' : '#9ca3af', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 14, transition: 'all 0.3s', flexShrink: 0 }}>
                    {s < step ? '✓' : s}
                  </div>
                  {s < 3 && <div style={{ flex: 1, height: 3, background: s < step ? accentColor : '#e5e7eb', borderRadius: 2, transition: 'background 0.3s' }} />}
                </React.Fragment>
              ))}
            </div>
            <div style={{ marginBottom: 8, fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: accentColor, fontWeight: 600 }}>Schritt {step} von {totalSteps}</div>
            <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 22, color: '#0b0d10', margin: '0 0 8px' }}>{stepTitles[step-1].title}</h3>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#6b7280', margin: '0 0 24px' }}>{stepTitles[step-1].sub}</p>

            {/* SCHRITT 1: Adresse */}
            {step === 1 && (
              <div style={{ marginBottom: 20 }}>
                <label style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 14, color: '#374151', display: 'block', marginBottom: 8 }}>Adresse oder PLZ *</label>
                <input type="text" placeholder="z.B. 27383 Scheeßel oder Musterstraße 12" value={form.adresse} autoFocus
                  onChange={e => setForm(p => ({ ...p, adresse: e.target.value }))}
                  onKeyDown={e => e.key === 'Enter' && nextStep()}
                  style={{ width: '100%', padding: '16px', borderRadius: 10, border: `1px solid ${errors.adresse ? '#dc2626' : '#d1d5db'}`, fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#0b0d10', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s' }}
                  onFocus={e => e.target.style.borderColor = accentColor}
                  onBlur={e => e.target.style.borderColor = errors.adresse ? '#dc2626' : '#d1d5db'} />
                {errors.adresse && <p style={{ color: '#dc2626', fontSize: 12, margin: '4px 0 0', fontFamily: "'DM Sans', sans-serif" }}>{errors.adresse}</p>}
              </div>
            )}

            {/* SCHRITT 2: Stromverbrauch */}
            {step === 2 && (
              <div style={{ marginBottom: 20 }}>
                <label style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 14, color: '#374151', display: 'block', marginBottom: 8 }}>Jährlicher Stromverbrauch *</label>
                <input type="text" placeholder="z.B. 4.500 kWh" value={form.verbrauch} autoFocus
                  onChange={e => setForm(p => ({ ...p, verbrauch: e.target.value }))}
                  onKeyDown={e => e.key === 'Enter' && nextStep()}
                  style={{ width: '100%', padding: '16px', borderRadius: 10, border: `1px solid ${errors.verbrauch ? '#dc2626' : '#d1d5db'}`, fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: '#0b0d10', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s' }}
                  onFocus={e => e.target.style.borderColor = accentColor}
                  onBlur={e => e.target.style.borderColor = errors.verbrauch ? '#dc2626' : '#d1d5db'} />
                {errors.verbrauch && <p style={{ color: '#dc2626', fontSize: 12, margin: '4px 0 0', fontFamily: "'DM Sans', sans-serif" }}>{errors.verbrauch}</p>}
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#6b7280', margin: '12px 0 0' }}>💡 <strong>Faustregel:</strong> 1 Person ~1.500 kWh · 2 Personen ~2.500 kWh · 3-4 Personen ~4.000 kWh · Mit Wärmepumpe/E-Auto +3.000–6.000 kWh</p>
              </div>
            )}

            {/* SCHRITT 3: Kontaktdaten */}
            {step === 3 && (
              <>
                <div style={{ marginBottom: 16 }}>
                  <label style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 14, color: '#374151', display: 'block', marginBottom: 8 }}>Ihr Name *</label>
                  <input type="text" placeholder="Max Mustermann" value={form.name} autoFocus
                    onChange={e => setForm(p => ({ ...p, name: e.target.value }))}
                    style={{ width: '100%', padding: '14px 16px', borderRadius: 10, border: `1px solid ${errors.name ? '#dc2626' : '#d1d5db'}`, fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#0b0d10', outline: 'none', boxSizing: 'border-box' }}
                    onFocus={e => e.target.style.borderColor = accentColor}
                    onBlur={e => e.target.style.borderColor = errors.name ? '#dc2626' : '#d1d5db'} />
                  {errors.name && <p style={{ color: '#dc2626', fontSize: 12, margin: '4px 0 0', fontFamily: "'DM Sans', sans-serif" }}>{errors.name}</p>}
                </div>
                <div style={{ marginBottom: 16 }}>
                  <label style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 14, color: '#374151', display: 'block', marginBottom: 8 }}>Telefonnummer *</label>
                  <input type="tel" placeholder="+49 170 1234567" value={form.phone}
                    onChange={e => setForm(p => ({ ...p, phone: e.target.value }))}
                    style={{ width: '100%', padding: '14px 16px', borderRadius: 10, border: `1px solid ${errors.phone ? '#dc2626' : '#d1d5db'}`, fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#0b0d10', outline: 'none', boxSizing: 'border-box' }}
                    onFocus={e => e.target.style.borderColor = accentColor}
                    onBlur={e => e.target.style.borderColor = errors.phone ? '#dc2626' : '#d1d5db'} />
                  {errors.phone && <p style={{ color: '#dc2626', fontSize: 12, margin: '4px 0 0', fontFamily: "'DM Sans', sans-serif" }}>{errors.phone}</p>}
                </div>
                <div style={{ marginBottom: 20 }}>
                  <label style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 14, color: '#374151', display: 'block', marginBottom: 8 }}>E-Mail-Adresse <span style={{ fontWeight: 400, color: '#9ca3af', fontSize: 12 }}>(optional)</span></label>
                  <input type="email" placeholder="max@beispiel.de" value={form.email}
                    onChange={e => setForm(p => ({ ...p, email: e.target.value }))}
                    style={{ width: '100%', padding: '14px 16px', borderRadius: 10, border: '1px solid #d1d5db', fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#0b0d10', outline: 'none', boxSizing: 'border-box' }}
                    onFocus={e => e.target.style.borderColor = accentColor}
                    onBlur={e => e.target.style.borderColor = '#d1d5db'} />
                </div>
              </>
            )}

            {/* Buttons */}
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              {step > 1 && (
                <button onClick={prevStep} style={{ flex: 1, background: 'transparent', color: '#6b7280', border: '1px solid #d1d5db', borderRadius: 10, padding: '16px', fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 15, cursor: 'pointer', transition: 'all 0.2s' }}
                  onMouseEnter={e => e.currentTarget.style.background = '#f3f4f6'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  ← Zurück
                </button>
              )}
              {step < totalSteps ? (
                <button onClick={nextStep} style={{ flex: 2, background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '16px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer', transition: 'opacity 0.2s, transform 0.2s', boxShadow: `0 4px 24px ${accentColor}44` }}
                  onMouseEnter={e => { e.currentTarget.style.opacity = '0.9'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'none'; }}>
                  Weiter →
                </button>
              ) : (
                <button onClick={submit} style={{ flex: 2, background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '16px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer', transition: 'opacity 0.2s, transform 0.2s', boxShadow: `0 4px 24px ${accentColor}44` }}
                  onMouseEnter={e => { e.currentTarget.style.opacity = '0.9'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
                  onMouseLeave={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'none'; }}>
                  Beratung sichern ✓
                </button>
              )}
            </div>
            <p style={{ textAlign: 'center', fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#9ca3af', margin: '20px 0 0' }}>Kostenlos &amp; unverbindlich · Kein Spam</p>
          </div>
        )}
      </div>
    </section>
  );
}

/* ── Footer ───────────────────────────────────────────── */
function Footer({ accentColor }) {
  return (
    <footer style={{ background: '#0b0d10', borderTop: '1px solid rgba(255,255,255,0.07)', padding: '48px clamp(20px,8vw,140px)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="assets/logo.png" alt="Solarcor" style={{ height: 36, width: 'auto', opacity: 0.8 }} />
        </div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.35)', textAlign: 'center' }}>
          © 2026 Solarcor GmbH · Westerveseder Landstr. 26, 27383 Scheeßel<br />
          <a href="tel:+491737280559" style={{ color: 'rgba(255,255,255,0.55)', textDecoration: 'none', marginRight: 12 }}>📞 0173 7280559</a>
          <a href="mailto:office@solarcor.de" style={{ color: 'rgba(255,255,255,0.55)', textDecoration: 'none' }}>✉ office@solarcor.de</a>
          <br />
          <span style={{ fontSize: 12 }}>
            <a href="https://solarcor.de" title="Solarcor.de — Photovoltaik & Energiespeicher aus Scheeßel im Landkreis Rotenburg (Wümme)" style={{ color: accentColor, textDecoration: 'underline', marginRight: 10, fontWeight: 600 }}>🏠 Solarcor.de</a>
            <a href="https://solarcor.de/impressum" target="_blank" rel="noopener" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'underline', marginRight: 10 }}>Impressum</a>
            <a href="https://solarcor.de/datenschutz" target="_blank" rel="noopener" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'underline', marginRight: 10 }}>Datenschutz</a>
            <a href="https://solarcor.de/agb" target="_blank" rel="noopener" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'underline' }}>AGB</a>
          </span>
        </div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.4)', textAlign: 'right' }}>
          Regionaler Fachbetrieb seit 2011<br />
          <span style={{ color: accentColor, fontWeight: 600 }}>Solar Award 2025</span>
        </div>
      </div>
    </footer>
  );
}

/* ── FAQ Chatbot ──────────────────────────────────────── */
/* ── Exit-Intent Popup ────────────────────────────────── */
function ExitIntentPopup({ accentColor }) {
  const [show, setShow] = useState(false);
  const [shown, setShown] = useState(false);

  React.useEffect(() => {
    if (shown) return;
    const handleMouseLeave = (e) => {
      // Trigger nur wenn Maus nach oben aus dem Fenster verschwindet
      if (e.clientY <= 0 && !shown) {
        setShow(true);
        setShown(true);
      }
    };
    // Erst nach 10 Sekunden aktivieren (nicht sofort beim Laden)
    const timer = setTimeout(() => {
      document.addEventListener('mouseleave', handleMouseLeave);
    }, 10000);
    return () => {
      clearTimeout(timer);
      document.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [shown]);

  if (!show) return null;

  return (
    <div onClick={() => setShow(false)}
      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'fadeIn 0.3s ease' }}>
      <div onClick={e => e.stopPropagation()}
        style={{ background: '#fff', borderRadius: 20, maxWidth: 480, width: '100%', padding: '48px 40px', position: 'relative', boxShadow: '0 24px 64px rgba(0,0,0,0.4)', animation: 'fadeUp 0.4s ease' }}>
        <button onClick={() => setShow(false)}
          style={{ position: 'absolute', top: 16, right: 16, background: '#f3f4f6', border: 'none', borderRadius: '50%', width: 36, height: 36, cursor: 'pointer', fontSize: 18, color: '#6b7280', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>👋</div>
          <h3 style={{ fontFamily: "'Syne', sans-serif", fontWeight: 800, fontSize: 26, color: '#0b0d10', margin: '0 0 12px', letterSpacing: '-0.02em' }}>Warten Sie kurz!</h3>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: '#6b7280', margin: '0 0 24px', lineHeight: 1.5 }}>
            Holen Sie sich Ihren <strong style={{ color: '#0b0d10' }}>kostenlosen Solar-Check</strong> für Ihr Dach — in nur 60 Sekunden.
          </p>
          <div style={{ background: `${accentColor}15`, border: `1px solid ${accentColor}55`, borderRadius: 12, padding: '16px 20px', marginBottom: 24, fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#0b0d10' }}>
            ✅ Kostenlos &amp; unverbindlich<br />
            ✅ Persönliche Ersparnis-Berechnung<br />
            ✅ Antwort innerhalb von 24 Stunden
          </div>
          <button onClick={() => { setShow(false); document.getElementById('kontakt')?.scrollIntoView({ behavior: 'smooth' }); }}
            style={{ width: '100%', background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '16px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer', marginBottom: 12, boxShadow: `0 4px 24px ${accentColor}55`, transition: 'transform 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
            Kostenlosen Solar-Check sichern →
          </button>
          <button onClick={() => setShow(false)}
            style={{ background: 'transparent', color: '#9ca3af', border: 'none', fontFamily: "'DM Sans', sans-serif", fontSize: 13, cursor: 'pointer', textDecoration: 'underline' }}>
            Nein danke, vielleicht später
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── FAQ Chatbot mit Eingabefeld und PLZ-Check ────────── */
function ChatBot({ accentColor }) {
  const [open, setOpen] = useState(false);
  const [input, setInput] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const [topicsOpen, setTopicsOpen] = useState(true);
  const [messages, setMessages] = useState([
    { type: 'bot', text: 'Hallo! 👋 Ich beantworte gerne Ihre Fragen rund um Solar.\n\n📍 PLZ oder Ort eingeben → ich prüfe das Servicegebiet\n📸 Foto vom Dach hochladen (Büroklammer)\n💬 Oder ein Thema unten auswählen!' }
  ]);
  const messagesEndRef = React.useRef(null);
  const inputRef = React.useRef(null);
  const fileInputRef = React.useRef(null);

  React.useEffect(() => {
    if (messagesEndRef.current) messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
  }, [messages, isTyping, open]);

  // Helper: Bot-Nachrichten mit realistischer Tipp-Verzögerung anzeigen
  // - Erst Tipp-Indikator zeigen
  // - Dann Nachricht senden (Verzögerung abhängig von Textlänge)
  const sendBotMessages = (msgs, baseDelay = 600) => {
    let cumDelay = 0;
    msgs.forEach((msg, idx) => {
      // Realistische Tippzeit: ca. 25ms pro Zeichen, min 600ms, max 2000ms
      const text = msg.text || '';
      const typingDuration = Math.min(2000, Math.max(baseDelay, text.length * 25));

      // Tipp-Indikator zeigen
      setTimeout(() => {
        setIsTyping(true);
      }, cumDelay);

      cumDelay += typingDuration;

      // Nachricht zeigen (Indikator weg, Message rein)
      setTimeout(() => {
        setIsTyping(false);
        setMessages(prev => [...prev, msg]);
      }, cumDelay);

      cumDelay += 200; // kleine Pause zwischen Nachrichten
    });
  };

  // Servicegebiet: PLZ-Bereiche + Städte/Orte (ca. 40 km um Scheeßel)
  const servicePLZ = [
    // Direkter Umkreis Scheeßel (27383)
    '27383', '27386', '27374', '27389', '27367', '27356', '27357', '27361',
    // Rotenburg/Wümme
    '27432', '27442', '27446', '27449', '27412', '27419', '27404', '27406',
    // Bremervörde / Zeven / Sittensen
    '27432', '27449', '27404', '27412', '27419',
    // Soltau / Heidekreis
    '29614', '29633', '29640', '29643', '29646', '29664', '29699',
    // Visselhövede / Walsrode
    '29683', '29664', '29690', '29693',
    // Buchholz / Tostedt
    '21244', '21255', '21256', '21258', '21261',
    // Achim / Verden
    '28832', '27283', '27313', '27321',
  ];

  // Servicegebiet: Städte/Orte (Schreibweisen mit/ohne ä/ö/ü/ß)
  const serviceOrte = [
    'scheessel', 'scheeßel', 'rotenburg', 'wümme', 'wuemme', 'zeven', 'bremervörde', 'bremervoerde',
    'sittensen', 'tostedt', 'soltau', 'visselhövede', 'visselhoevede', 'walsrode', 'buchholz',
    'fintel', 'lauenbrück', 'lauenbrueck', 'bothel', 'gyhum', 'heeslingen', 'selsingen',
    'schneverdingen', 'neuenkirchen', 'wümme', 'fischerhude', 'ottersberg', 'oyten',
    'achim', 'verden', 'sottrum', 'horstedt', 'ahausen', 'westervesede', 'jeersdorf',
    'westerholz', 'helvesiek', 'brockel', 'kirchwalsede', 'reeßum', 'reessum',
    'hellwege', 'stuckenborstel', 'stuckenborsteler', 'nartum', 'wilstedt', 'tarmstedt',
  ];

  // NICHT im Servicegebiet (häufig genannte Großstädte zur klaren Ablehnung)
  const nichtServiceOrte = [
    'berlin', 'münchen', 'muenchen', 'köln', 'koeln', 'frankfurt', 'stuttgart',
    'düsseldorf', 'duesseldorf', 'leipzig', 'dresden', 'dortmund', 'essen', 'nürnberg',
    'nuernberg', 'hannover', 'osnabrück', 'osnabrueck', 'oldenburg', 'kiel', 'lübeck',
    'luebeck', 'rostock', 'magdeburg', 'wiesbaden', 'mannheim', 'karlsruhe', 'augsburg',
    'wolfsburg', 'göttingen', 'goettingen', 'braunschweig', 'kassel', 'erfurt', 'lüneburg',
    'lueneburg', 'celle', 'göttingen', 'paderborn', 'münster', 'muenster', 'duisburg',
  ];

  // Schwierige Fälle: Hamburg & Bremen (Stadt selbst zu weit, aber Randgebiete machbar)
  const grenzfallOrte = ['hamburg', 'bremen'];

  // Adress-Check: prüft sowohl PLZ als auch Ortsnamen
  const checkAdresse = (text) => {
    const lower = text.toLowerCase();

    // 1. PLZ prüfen
    const plzMatch = text.match(/\b(\d{5})\b/);
    if (plzMatch) {
      const plz = plzMatch[1];
      if (servicePLZ.includes(plz)) {
        return { match: 'yes', value: plz, type: 'plz' };
      }
      const region = plz.substring(0, 3);
      const regionalMatch = servicePLZ.some(p => p.startsWith(region));
      if (regionalMatch) {
        return { match: 'maybe', value: plz, type: 'plz' };
      }
      // PLZ gefunden, aber nicht in unserer Region
      return { match: 'no', value: plz, type: 'plz' };
    }

    // 2. Servicegebiet-Ort prüfen (mit Wort-Grenzen, damit "Bremen" nicht in "Bremervörde" matcht)
    for (const ort of serviceOrte) {
      const regex = new RegExp(`\\b${ort}\\b`, 'i');
      if (regex.test(lower)) {
        return { match: 'yes', value: ort.charAt(0).toUpperCase() + ort.slice(1), type: 'ort' };
      }
    }

    // 3. Grenzfall-Ort (Hamburg/Bremen — fragen nach genauer Adresse)
    for (const ort of grenzfallOrte) {
      const regex = new RegExp(`\\b${ort}\\b`, 'i');
      if (regex.test(lower)) {
        return { match: 'border', value: ort.charAt(0).toUpperCase() + ort.slice(1), type: 'ort' };
      }
    }

    // 4. Definitiv NICHT im Servicegebiet
    for (const ort of nichtServiceOrte) {
      const regex = new RegExp(`\\b${ort}\\b`, 'i');
      if (regex.test(lower)) {
        return { match: 'no', value: ort.charAt(0).toUpperCase() + ort.slice(1), type: 'ort' };
      }
    }

    return null;
  };

  const knowledgeBase = [
    { keywords: ['kost', 'preis', 'teuer', 'wieviel', 'wie viel', 'invest', '€', 'euro'], answer: 'Eine schlüsselfertige Solaranlage kostet bei uns ca. 1.500–1.800 € pro kWp (netto, inkl. Montage und Anmeldung). Eine 10 kWp-Anlage liegt also bei rund 16.500 €. Nutzen Sie den Rechner auf der Seite — er zeigt Ihre konkrete Ersparnis! 💰' },
    { keywords: ['dauer', 'lange', 'zeit', 'montage', 'installat', 'liefer'], answer: 'Von Bestellung bis Stromfluss: 2–3 Monate. Die Installation auf dem Dach dauert nur 1–3 Tage. Bei guten Bedingungen ging es schon in 10 Tagen! ⚡' },
    { keywords: ['lohnt', 'rentabel', 'sinn', 'amortis'], answer: 'Ja, fast immer! Eine PV-Anlage rechnet sich nach 8–12 Jahren — dann produziert sie noch 15+ Jahre kostenlos Strom. Mit Speicher steigt der Eigenverbrauch von 30% auf bis zu 70%. 30 Jahre Leistungsgarantie auf die Module! 📈' },
    { keywords: ['dach', 'ausrichtung', 'neigung', 'süd', 'nord', 'ost', 'west', 'flach', 'schatten'], answer: 'Die meisten Dächer eignen sich! Optimal: Süd-/Ost-/West-Ausrichtung mit 25–40° Neigung. Auch Flachdächer und leichte Verschattung sind kein Problem dank moderner HPBC-Module. Wir prüfen das in einer kostenlosen Vor-Ort-Beratung! 🏠' },
    { keywords: ['speicher', 'batterie', 'akku'], answer: 'Ein Speicher lohnt sich fast immer — Eigenverbrauch steigt von 30% auf 70%. Sie nutzen Ihren günstigen Solarstrom auch abends und nachts. Rechnet sich nach 8–12 Jahren. 🔋' },
    { keywords: ['förder', 'foerder', 'kfw', 'staat', 'bafa', 'zuschuss', 'mwst', 'steuer'], answer: 'Sie profitieren von mehreren Förderungen:\n\n• 0% MwSt. auf Kauf & Installation (spart ~19%, gilt dauerhaft)\n• Einspeisevergütung 7,78 Cent/kWh — bis 31.07.2026, danach -1%\n• KfW-Kredit 270 mit günstigen Zinsen\n\nDie Vergütung wird 20 Jahre lang garantiert! Wir kümmern uns um alle Anträge. 💡' },
    { keywords: ['wartung', 'garantie', 'reparatur', 'service', 'kaputt', 'defekt'], answer: 'Solaranlagen sind sehr wartungsarm. 25 Jahre Produktgarantie auf die Module, 30 Jahre Leistungsgarantie. Bei Problemen meist am gleichen Tag vor Ort! 🛠️' },
    { keywords: ['stromausfall', 'blackout', 'notstrom'], answer: 'Standard-Anlagen schalten bei Stromausfall ab (Sicherheit). Mit Notstromfunktion oder Insellösung können Sie aber wichtige Geräte (Kühlschrank, Licht) weiter betreiben. ⚡' },
    { keywords: ['kontakt', 'anrufen', 'telefon', 'mail', 'beratung', 'angebot', 'termin'], answer: 'So erreichen Sie uns:\n\n📞 0173 7280559 (Thomas Buder)\n✉️ office@solarcor.de\n💬 WhatsApp (Button unten rechts)\n\nOder Kontaktformular auf der Seite. Wir melden uns innerhalb von 24h! 🎉' },
    { keywords: ['hagel', 'sturm', 'wind', 'wetter', 'schnee', 'frost'], answer: 'Unsere LONGi-Module sind extrem wetterfest: hagelgeprüft, windbeständig bis 130 km/h, ausgelegt für -40°C bis +85°C. Auch bei Schnee & Regen produzieren sie Strom. ☀️' },
    { keywords: ['balkon', 'mieter', 'wohnung'], answer: 'Auch für Mieter! Ein Balkonkraftwerk produziert bis zu 800W, ist in 30 Min installiert und braucht keine Anmeldung. Spart 100–200 € pro Jahr. ☀️' },
    { keywords: ['hallo', 'hi', 'guten tag', 'moin', 'servus', 'hey'], answer: 'Moin! 👋 Schön, dass Sie da sind. Worum geht\'s? Sie können auch einfach Ihre PLZ eingeben — dann prüfe ich, ob wir in Ihrer Region installieren!' },
    { keywords: ['danke', 'super', 'toll', 'klasse'], answer: 'Gerne! 😊 Bei weiteren Fragen einfach fragen. Oder direkt Beratung über den WhatsApp-Button bzw. 0173 7280559!' },
    // ── Erweiterte FAQ ──
    { keywords: ['kwp ', ' kwp', 'kilowatt peak', 'wie groß', 'welche größe', 'welche groesse'], answer: 'kWp = Kilowatt Peak (Maximalleistung). Faustregel: Pro 1.000 kWh Jahresverbrauch ca. 1 kWp. Bei 4.000 kWh wäre eine 4–6 kWp Anlage ideal. Mit Speicher und E-Auto eher 8–10 kWp. 📊' },
    { keywords: ['kwh ', ' kwh', 'kilowatt stunde', 'verbrauch eines'], answer: 'kWh = Kilowattstunde, die Einheit für Stromverbrauch. Ein 4-Personen-Haushalt verbraucht 3.500–4.500 kWh/Jahr. Eine 10 kWp Anlage produziert ca. 9.000–10.000 kWh/Jahr — also mehr als Sie brauchen! ⚡' },
    { keywords: ['wallbox', 'e-auto', 'eauto', 'elektroauto', 'laden', 'ladestation', 'tesla'], answer: 'Auf jeden Fall lohnt sich PV + Wallbox! Sie laden Ihr E-Auto mit eigenem Sonnenstrom für nur ~10 Cent/kWh statt 50+ Cent öffentlich. Wir installieren Wallboxen auch nachträglich. 🚗' },
    { keywords: ['wärmepumpe', 'waermepumpe', 'heizung', 'heizen', 'warmwasser'], answer: 'PV + Wärmepumpe = perfekte Kombi! Sie heizen mit eigenem Strom statt Gas/Öl. Eine WP braucht 3.000–5.000 kWh extra — passt perfekt zu einer 10–15 kWp Anlage. Spart langfristig sehr viel! 🔥' },
    { keywords: ['versicher', 'absicherung', 'schaden ersatz'], answer: 'Eine PV-Anlage ist meist über die Wohngebäudeversicherung mitversichert. Bei größeren Anlagen empfehlen wir eine Photovoltaik-Versicherung (~80–150 €/Jahr) für Diebstahl, Hagel, Marderbiss. 🛡️' },
    { keywords: ['lebensdauer', 'haltbar', 'wie alt', 'wie lange hält'], answer: 'Solarmodule halten 30+ Jahre. Die Leistung sinkt jährlich nur um ca. 0,3% — nach 25 Jahren noch über 90% Leistung. Wir geben 30 Jahre Leistungsgarantie auf unsere LONGi-Module! 📈' },
    { keywords: ['miete', 'pacht', 'leasing'], answer: 'Bei uns nicht — Kauf ist langfristig viel günstiger. Pacht-Modelle sehen kurzfristig billig aus, kosten aber über 20 Jahre oft das 2–3-fache. Mit KfW-Kredit ist Kauf fast immer besser. 💰' },
    { keywords: ['ost-west', 'ost west', 'beide seiten', 'ostwest'], answer: 'Ost-West-Ausrichtung ist super! Sie produzieren Strom morgens UND abends — meist genau dann, wenn Sie ihn brauchen. ~10% weniger Gesamtertrag als Süd, aber höherer Eigenverbrauch. Lohnt sich oft mehr! 🌅' },
    { keywords: ['anmeld', 'netzbetreiber', 'marktstammdaten', 'finanzamt', 'bürokrat', 'buerokrat'], answer: 'Keine Sorge — wir übernehmen die komplette Bürokratie:\n\n• Anmeldung beim Netzbetreiber\n• Marktstammdatenregister\n• Finanzamt (falls gewünscht)\n• Förderanträge\n\nSie unterschreiben nur einmal — wir machen den Rest! 📋' },
    { keywords: ['longi', 'modul herstell', 'welche module'], answer: 'Wir verbauen LONGi-Module mit HPBC-Technologie — der weltweite Marktführer:\n\n• Full-Black Design (sieht edel aus)\n• 22%+ Wirkungsgrad\n• 30 Jahre Leistungsgarantie\n• TÜV-zertifiziert\n\nKein Billig-Schrott! ⭐' },
    { keywords: ['wechselrichter', 'inverter'], answer: 'Wir verbauen Premium-Wechselrichter (Fronius, SMA, Huawei) mit 10 Jahren Garantie und integrierter Notstromfunktion. Über die App sehen Sie jederzeit Ihre Stromproduktion live. 📱' },
    { keywords: ['app', 'monitoring', 'überwachung', 'ueberwachung'], answer: 'Ja! Sie sehen alles in der App: aktuelle Produktion, Verbrauch, Speicher-Stand, Ersparnis. Auf Handy, Tablet oder PC. Kostenlos für 25 Jahre. 📱' },
    { keywords: ['finanzier', 'kredit', 'raten', 'monatlich zahl'], answer: 'Ja, mehrere Wege:\n\n• KfW-Kredit 270 (ab ~3% Zinsen)\n• Hausbank-Finanzierung\n• Genossenschaftskredit\n\nDie monatliche Rate ist oft kleiner als die Stromrechnung — Sie sparen ab Tag 1! 💳' },
    { keywords: ['denkmal', 'altbau'], answer: 'Auch bei Denkmalschutz oft möglich! Wir kennen die Auflagen und beraten individuell. Es gibt spezielle Denkmal-Module (z.B. ziegelfarben oder Indach). Vor-Ort-Beratung erforderlich. 🏛️' },
    { keywords: ['eigentümer', 'eigentuem', 'wohngemeinschaft', ' weg ', 'mehrfamil'], answer: 'In einer Eigentümergemeinschaft brauchen Sie meist eine Mehrheitsentscheidung. Wir helfen mit allen Unterlagen für die Versammlung. Auch Mieterstrom-Konzepte sind möglich! 🏘️' },
    { keywords: ['winter', 'sommer', 'jahreszeit', 'januar', 'februar', 'dezember'], answer: 'Solaranlagen produzieren das ganze Jahr — auch im Winter! Hauptsächlich März–Oktober (~80% der Jahresproduktion). Im Winter ca. 15–20% der Sommerleistung. ☀️' },
  ];

  const quickQuestions = [
    '📍 Meine Adresse prüfen',
    '💰 Was kostet eine Anlage?',
    '⏱️ Wie lange dauert die Installation?',
    '🏠 Lohnt sich Solar bei meinem Dach?',
    '💡 Welche Förderung gibt es?',
    '🔋 Brauche ich einen Stromspeicher?',
    '🚗 Wallbox / E-Auto laden',
    '🔥 Wärmepumpe + Solar',
    '⚡ Was ist mit Stromausfall?',
    '🛠️ Wartung & Garantie',
    '⭐ Welche Module verbaut ihr?',
    '📱 Gibt es eine App?',
    '💳 Finanzierung möglich?',
    '🛡️ Versicherung der Anlage',
    '🌅 Ost-West-Ausrichtung',
    '🏛️ Anlage bei Denkmalschutz',
    '🏘️ Eigentümergemeinschaft',
    '☀️ Balkonkraftwerk für Mieter',
    '📋 Bürokratie / Anmeldung',
    '📞 Direkt Kontakt aufnehmen',
  ];

  const findAnswer = (text) => {
    const lower = text.toLowerCase();
    for (const item of knowledgeBase) {
      if (item.keywords.some(k => lower.includes(k))) return item.answer;
    }
    return null;
  };

  const sendMessage = (text) => {
    if (!text.trim()) return;
    const userText = text.trim();
    setMessages(prev => [...prev, { type: 'user', text: userText }]);
    setInput('');

    // PRIORITÄT 1: Adress-Check (PLZ oder Ort)
    const result = checkAdresse(userText);
    if (result) {
      if (result.match === 'yes') {
        sendBotMessages([
          { type: 'bot', text: `✅ Super! ${result.type === 'plz' ? 'Die PLZ ' + result.value : result.value} liegt in unserem Servicegebiet. Wir installieren dort gerne! 🎉` },
          { type: 'bot', text: 'Möchten Sie ein kostenloses Angebot?', actions: true }
        ]);
      } else if (result.match === 'maybe') {
        sendBotMessages([
          { type: 'bot', text: `Die PLZ ${result.value} liegt in unserer erweiterten Region. Wir prüfen das gerne — meistens klappt es! 🤝` },
          { type: 'bot', text: 'Lassen Sie uns kurz darüber sprechen:', actions: true }
        ]);
      } else if (result.match === 'border') {
        sendBotMessages([
          { type: 'bot', text: `${result.value} ist groß — am Rand bedienen wir oft, im Zentrum ist es meist zu weit. 🤔` },
          { type: 'bot', text: 'Geben Sie mir Ihre PLZ, dann prüfe ich es genauer! Oder kontaktieren Sie uns direkt:', actions: true }
        ]);
      } else { // 'no'
        sendBotMessages([
          { type: 'bot', text: `Leider liegt ${result.type === 'plz' ? 'die PLZ ' + result.value : result.value} außerhalb unseres Servicegebiets (max. ~40 km um Scheeßel). 😔` },
          { type: 'bot', text: 'Wir empfehlen, einen Solar-Fachbetrieb in Ihrer Region zu suchen. Bei größeren Anlagen (>50 kWp) können wir aber auch weiter raus — rufen Sie uns gerne an!', actions: true }
        ]);
      }
      return;
    }

    // PRIORITÄT 2: Allgemeine PLZ/Region-Anfrage ohne konkrete Daten
    if (userText.toLowerCase().includes('plz') || userText.toLowerCase().match(/region|gebiet|wo wohn|installiert ihr|kommen sie|adresse/)) {
      sendBotMessages([{ type: 'bot', text: 'Geben Sie einfach Ihre PLZ oder Ihren Ort ein (z.B. "27383" oder "Rotenburg") — ich prüfe sofort, ob wir Sie beliefern! 📍' }]);
      return;
    }

    // PRIORITÄT 3: Direkter Kontaktwunsch
    if (userText.toLowerCase().match(/direkt|jetzt anrufen|sofort|beratung anfragen|kontakt aufnehmen/)) {
      sendBotMessages([{ type: 'bot', text: 'Sehr gerne! Wählen Sie Ihren bevorzugten Weg: 👇', actions: true }]);
      return;
    }

    // PRIORITÄT 4: Keyword-Suche
    const answer = findAnswer(userText);
    if (answer) {
      sendBotMessages([{ type: 'bot', text: answer }]);
    } else {
      sendBotMessages([{ type: 'bot', text: 'Das kann ich gerade nicht beantworten 🤔 Aber Thomas Buder hilft Ihnen persönlich weiter:', actions: true }]);
    }
  };

  const handleAction = (action) => {
    if (action === 'call') { window.location.href = 'tel:+491737280559'; return; }
    if (action === 'whatsapp') {
      const msg = encodeURIComponent('Hallo Solarcor, ich interessiere mich für eine Solaranlage und hätte gerne eine Beratung.');
      window.open(`https://wa.me/491737280559?text=${msg}`, '_blank');
      return;
    }
    if (action === 'form') {
      setOpen(false);
      setTimeout(() => document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth' }), 300);
      return;
    }
  };

  // Bild-Upload Handler
  const handleImageUpload = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) {
      sendBotMessages([{ type: 'bot', text: 'Das ist leider kein Bild. Bitte wählen Sie ein Foto (JPG, PNG, etc.). 📷' }]);
      return;
    }
    if (file.size > 10 * 1024 * 1024) { // 10 MB Limit
      sendBotMessages([{ type: 'bot', text: 'Das Bild ist leider zu groß (max. 10 MB). Können Sie ein kleineres Foto schicken? 📸' }]);
      return;
    }
    const reader = new FileReader();
    reader.onload = (event) => {
      const imageDataUrl = event.target.result;
      setMessages(prev => [...prev, { type: 'user', image: imageDataUrl, text: '📸 Foto vom Dach' }]);
      sendBotMessages([
        { type: 'bot', text: 'Danke für das Foto! 📸 Ich kann Bilder leider nicht selbst auswerten — aber unser Team schaut sie sich bei Ihrer Anfrage an.' },
        { type: 'bot', text: 'Senden Sie das Foto direkt an uns:', actions: true }
      ]);
    };
    reader.readAsDataURL(file);
    e.target.value = ''; // Reset, damit gleiches Bild nochmal hochgeladen werden kann
  };

  const handleQuick = (q) => {
    if (q === '📍 Meine Adresse prüfen') {
      setMessages(prev => [...prev, { type: 'user', text: q }]);
      sendBotMessages([{ type: 'bot', text: 'Geben Sie einfach Ihre PLZ oder Ihren Ort ein (z.B. "27383" oder "Rotenburg") — ich prüfe sofort, ob wir Sie beliefern! 📍' }]);
      setTimeout(() => inputRef.current?.focus(), 100);
      return;
    }
    sendMessage(q);
  };

  return (
    <>
      {!open && (
        <button onClick={() => { setOpen(true); setTimeout(() => inputRef.current?.focus(), 300); }}
          title="Chat öffnen"
          style={{ position: 'fixed', bottom: 100, right: 24, zIndex: 240, width: 60, height: 60, borderRadius: '50%', background: accentColor, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 4px 24px ${accentColor}88`, transition: 'transform 0.2s' }}
          onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.1)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="#0b0d10" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
          </svg>
          <span style={{ position: 'absolute', top: -4, right: -4, width: 18, height: 18, borderRadius: '50%', background: '#ef4444', color: '#fff', fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'DM Sans', sans-serif" }}>?</span>
        </button>
      )}

      {open && (
        <div className="chatbot-window" style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 245, width: 380, maxWidth: 'calc(100vw - 32px)', height: 580, maxHeight: 'calc(100vh - 48px)', background: '#fff', borderRadius: 16, boxShadow: '0 16px 48px rgba(0,0,0,0.3)', display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'fadeUp 0.3s ease' }}>
          <div style={{ background: accentColor, color: '#0b0d10', padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(11,13,16,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>☀️</div>
              <div>
                <div style={{ fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 15 }}>Solarcor Chat</div>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, opacity: 0.8 }}>● Online — antwortet sofort</div>
              </div>
            </div>
            <button onClick={() => setOpen(false)} style={{ background: 'rgba(11,13,16,0.15)', border: 'none', borderRadius: '50%', width: 32, height: 32, cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0b0d10' }}>✕</button>
          </div>

          <div style={{ flex: 1, padding: '20px', overflowY: 'auto', background: '#f8f7f4', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {messages.map((m, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: m.type === 'user' ? 'flex-end' : 'flex-start' }}>
                {m.image && (
                  <img src={m.image} alt="Foto" style={{ maxWidth: '85%', maxHeight: 200, borderRadius: '16px 16px 4px 16px', marginBottom: 4, boxShadow: '0 1px 4px rgba(0,0,0,0.1)' }} />
                )}
                <div style={{ maxWidth: '85%', background: m.type === 'user' ? accentColor : '#fff', color: '#0b0d10', padding: '12px 16px', borderRadius: m.type === 'user' ? '16px 16px 4px 16px' : '16px 16px 16px 4px', fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.5, whiteSpace: 'pre-wrap', boxShadow: '0 1px 4px rgba(0,0,0,0.06)' }}>
                  {m.text}
                </div>
                {m.actions && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8, width: '85%' }}>
                    <button onClick={() => handleAction('call')} style={{ background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 10, padding: '10px 14px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 13, cursor: 'pointer', textAlign: 'left' }}>📞 Anrufen: 0173 7280559</button>
                    <button onClick={() => handleAction('whatsapp')} style={{ background: '#25D366', color: '#fff', border: 'none', borderRadius: 10, padding: '10px 14px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 13, cursor: 'pointer', textAlign: 'left' }}>💬 WhatsApp schreiben</button>
                    <button onClick={() => handleAction('form')} style={{ background: '#0b0d10', color: '#fff', border: 'none', borderRadius: 10, padding: '10px 14px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 13, cursor: 'pointer', textAlign: 'left' }}>📋 Zum Formular</button>
                  </div>
                )}
              </div>
            ))}
            {isTyping && (
              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                <div style={{ background: '#fff', padding: '14px 18px', borderRadius: '16px 16px 16px 4px', boxShadow: '0 1px 4px rgba(0,0,0,0.06)', display: 'flex', gap: 4, alignItems: 'center' }}>
                  <span className="typing-dot" style={{ width: 7, height: 7, borderRadius: '50%', background: '#9ca3af' }}></span>
                  <span className="typing-dot" style={{ width: 7, height: 7, borderRadius: '50%', background: '#9ca3af' }}></span>
                  <span className="typing-dot" style={{ width: 7, height: 7, borderRadius: '50%', background: '#9ca3af' }}></span>
                </div>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>

          {/* Themen-Panel: ausklappbar, immer verfügbar */}
          <div style={{ background: '#fff', borderTop: '1px solid #e5e7eb' }}>
            <button onClick={() => setTopicsOpen(!topicsOpen)}
              style={{ width: '100%', background: 'transparent', border: 'none', padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#0b0d10', fontWeight: 600 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 16 }}>💬</span>
                {topicsOpen ? 'Themen ausblenden' : `Alle Themen anzeigen (${quickQuestions.length})`}
              </span>
              <span style={{ transform: topicsOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', fontSize: 12 }}>▼</span>
            </button>
            {topicsOpen && (
              <div style={{ padding: '4px 16px 12px', display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 180, overflowY: 'auto' }}>
                {quickQuestions.map((q, i) => (
                  <button key={i} onClick={() => { handleQuick(q); setTopicsOpen(false); }}
                    style={{ background: 'transparent', border: `1px solid ${accentColor}55`, borderRadius: 16, padding: '6px 10px', fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: '#0b0d10', cursor: 'pointer', transition: 'all 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.background = `${accentColor}15`}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    {q}
                  </button>
                ))}
              </div>
            )}
          </div>

          <form onSubmit={(e) => { e.preventDefault(); sendMessage(input); }}
            style={{ padding: '12px 16px', background: '#fff', borderTop: '1px solid #e5e7eb', display: 'flex', gap: 8, alignItems: 'center' }}>
            <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageUpload} style={{ display: 'none' }} />
            <button type="button" onClick={() => fileInputRef.current?.click()}
              title="Foto hochladen"
              style={{ background: 'transparent', border: '1px solid #e5e7eb', borderRadius: '50%', width: 40, height: 40, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.background = `${accentColor}15`; e.currentTarget.style.borderColor = accentColor; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = '#e5e7eb'; }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
            </button>
            <input ref={inputRef} type="text" value={input} onChange={e => setInput(e.target.value)}
              placeholder="Frage, PLZ oder Ort eingeben..."
              style={{ flex: 1, border: '1px solid #e5e7eb', borderRadius: 20, padding: '10px 16px', fontFamily: "'DM Sans', sans-serif", fontSize: 14, outline: 'none', transition: 'border-color 0.2s' }}
              onFocus={e => e.target.style.borderColor = accentColor}
              onBlur={e => e.target.style.borderColor = '#e5e7eb'} />
            <button type="submit" disabled={!input.trim()}
              style={{ background: input.trim() ? accentColor : '#e5e7eb', color: input.trim() ? '#0b0d10' : '#9ca3af', border: 'none', borderRadius: '50%', width: 40, height: 40, cursor: input.trim() ? 'pointer' : 'not-allowed', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'background 0.2s' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
            </button>
          </form>
          <div style={{ padding: '4px 16px 8px', background: '#fff', textAlign: 'center', fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: '#9ca3af' }}>
            Antworten basieren auf häufigen Fragen · Bei komplexem Anliegen rufen wir gerne zurück
          </div>
        </div>
      )}
    </>
  );
}

/* ── WhatsApp Floating Button ─────────────────────────── */
function WhatsAppButton() {
  const message = encodeURIComponent('Hallo Solarcor, ich interessiere mich für eine Solaranlage und hätte gerne eine Beratung.');
  return (
    <a href={`https://wa.me/491737280559?text=${message}`} target="_blank" rel="noopener noreferrer"
      title="Per WhatsApp anfragen"
      style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 250, width: 60, height: 60, borderRadius: '50%', background: '#25D366', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 24px rgba(37,211,102,0.5)', textDecoration: 'none', transition: 'transform 0.2s', animation: 'whatsappPulse 2s ease-in-out infinite' }}
      onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.1)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
      <svg width="32" height="32" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
        <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
      </svg>
    </a>
  );
}

function StickyBar({ accentColor }) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const fn = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  if (!show) return null;
  return (
    <div style={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', zIndex: 200, animation: 'slideUp 0.3s ease' }} className="hide-mobile-sticky">
      <button onClick={() => document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth', block: 'start' })}
        style={{ background: accentColor, color: '#0b0d10', border: 'none', borderRadius: 100, padding: '16px 40px', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, fontSize: 16, cursor: 'pointer', boxShadow: `0 8px 40px ${accentColor}77`, transition: 'transform 0.2s, box-shadow 0.2s', whiteSpace: 'nowrap' }}
        onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform = 'none'; }}>
        Kostenlose Beratung sichern →
      </button>
      <style>{`@keyframes slideUp { from { opacity:0; transform: translateX(-50%) translateY(16px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }`}</style>
    </div>
  );
}

Object.assign(window, { Nav, Hero, ProblemSolution, Vorteile, Technologie, HowItWorks, Rechner, Trust, Balkon, Empfehlung, CTAForm, Footer, StickyBar, WhatsAppButton, ChatBot, ExitIntentPopup });
