/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "overlay",
  "accentOn": true,
  "density": "comfortable",
  "darkHero": true
}/*EDITMODE-END*/;

const C = window.PC.COMPANY;

// ---------- HERO VARIANTS ----------
const HeroOverlay = () => (
  <section className="pc-hero pc-hero-overlay" id="top">
    {/* Rein dekoratives Feld — kein Bildplatzhalter.
        Ein Foto kann spaeter als background-image ergaenzt werden. */}
    <div className="pc-hero-bg" aria-hidden="true">
      <div className="pc-hero-field"/>
      <div className="pc-hero-scrim"/>
    </div>
    <div className="pc-container pc-hero-content">
      <div className="pc-eyebrow">
        <Dot/> <span>Industrieservice · Düren · NRW & bundesweit</span>
      </div>
      <h1 className="pc-h1">Wenn Stillstand teuer ist,<br/>sind wir <em>schon unterwegs</em>.</h1>
      <p className="pc-lead">
        Industrielle Reinigung, Tank- und Behälterreinigung sowie Sonderreinigung
        für mittelständische Produktion. Im Notfall rund um die Uhr erreichbar —
        es geht ein Techniker ran, kein Callcenter.
      </p>
      <div className="pc-hero-actions">
        <a href="kontakt.html" className="pc-btn pc-btn-primary pc-btn-lg">Kostenfreies Angebot <Arrow/></a>
        <a href="leistungen/index.html" className="pc-btn pc-btn-ghost-light pc-btn-lg">Leistungen ansehen</a>
      </div>
      <div className="pc-hero-meta">
        <div><strong>Düren</strong><span>Stammsitz im Rheinland</span></div>
        <div><strong>24/7</strong><span>Notdienst-Rufnummer</span></div>
        <div><strong>Eigen</strong><span>Crew & Maschinenpark</span></div>
        <div><strong>NRW</strong><span>& bundesweit im Einsatz</span></div>
      </div>
    </div>
    <div className="pc-hero-ticker" aria-hidden="true">
      <div className="pc-ticker-track">
        {Array.from({length:2}).map((_,k)=>(
          <span key={k} className="pc-ticker-row">
            <span>Industriereinigung</span><Dot c="#3b82f6"/>
            <span>Tankreinigung DN 800–6000</span><Dot c="#3b82f6"/>
            <span>Trockeneisstrahlen</span><Dot c="#3b82f6"/>
            <span>Havarie & Notdienst</span><Dot c="#3b82f6"/>
            <span>Behälterinspektion</span><Dot c="#3b82f6"/>
            <span>Maschinenparkreinigung</span><Dot c="#3b82f6"/>
            <span>Hochdruck bis 2500 bar</span><Dot c="#3b82f6"/>
            <span>Eigener Maschinenpark</span><Dot c="#3b82f6"/>
          </span>
        ))}
      </div>
    </div>
  </section>
);

const HeroSplit = () => (
  <section className="pc-hero pc-hero-split" id="top">
    <div className="pc-container pc-hero-split-grid">
      <div className="pc-hero-text">
        <div className="pc-eyebrow"><Dot/> <span>Industrieservice · Düren · NRW & bundesweit</span></div>
        <h1 className="pc-h1">Wenn Stillstand teuer ist,<br/>sind wir <em>schon unterwegs</em>.</h1>
        <p className="pc-lead">Industrielle Reinigung, Tank- und Behälterreinigung sowie Sonderreinigung für mittelständische Produktion. Im Notfall rund um die Uhr erreichbar — es geht ein Techniker ran, kein Callcenter.</p>
        <div className="pc-hero-actions">
          <a href="kontakt.html" className="pc-btn pc-btn-primary pc-btn-lg">Kostenfreies Angebot <Arrow/></a>
          <a href="leistungen/index.html" className="pc-btn pc-btn-ghost pc-btn-lg">Leistungen ansehen</a>
        </div>
        <div className="pc-hero-meta pc-hero-meta-light">
          <div><strong>Düren</strong><span>Stammsitz im Rheinland</span></div>
          <div><strong>24/7</strong><span>Notdienst-Rufnummer</span></div>
          <div><strong>Eigen</strong><span>Crew & Maschinenpark</span></div>
          <div><strong>NRW</strong><span>& bundesweit im Einsatz</span></div>
        </div>
      </div>
      <div className="pc-hero-visual">
        <div className="pc-hero-spec pc-hero-spec-solo">
          <div className="pc-spec-head">Verfahren im Einsatz</div>
          <div className="pc-spec-row"><span>Hochdruck</span><span>Hallen, Maschinen, Rohre</span></div>
          <div className="pc-spec-row"><span>Trockeneis</span><span>Formen, Elektrik, Sensorik</span></div>
          <div className="pc-spec-row"><span>Saug-Spül</span><span>Schlämme, Prozesswasser</span></div>
          <div className="pc-spec-row"><span>Inertisierung</span><span>Behälter, Reaktoren</span></div>
          <div className="pc-spec-row"><span>Notdienst</span><span className="pc-spec-on">● rund um die Uhr</span></div>
        </div>
      </div>
    </div>
  </section>
);

const HeroTypo = () => (
  <section className="pc-hero pc-hero-typo" id="top">
    <div className="pc-container">
      <div className="pc-eyebrow"><Dot/> <span>Industrieservice für die Mittelstands-Produktion</span></div>
      <h1 className="pc-h1 pc-h1-display">Reinigung,<br/>die Produktion <em>nicht</em><br/>zum Stillstand bringt.</h1>
      <div className="pc-typo-numbers">
        <div className="pc-typo-num"><div className="pc-typo-big">24/7</div><div className="pc-typo-cap">Notdienst, auch an Sonn- und Feiertagen</div></div>
        <div className="pc-typo-num"><div className="pc-typo-big">Düren</div><div className="pc-typo-cap">Inhabergeführt, mit Stammsitz im Rheinland</div></div>
        <div className="pc-typo-num"><div className="pc-typo-big">Eigen</div><div className="pc-typo-cap">Crew und Maschinenpark, keine Subunternehmer</div></div>
      </div>
      <div className="pc-hero-actions">
        <a href="kontakt.html" className="pc-btn pc-btn-primary pc-btn-lg">Kostenfreies Angebot <Arrow/></a>
        <a href="leistungen/index.html" className="pc-btn pc-btn-ghost pc-btn-lg">Leistungen ansehen</a>
      </div>
    </div>
  </section>
);

const Hero = ({variant}) => variant==='split'?<HeroSplit/>:variant==='typo'?<HeroTypo/>:<HeroOverlay/>;

const LogoStrip = () => (
  <section className="pc-logos">
    <div className="pc-container">
      <div className="pc-logos-label">Was uns von Allzweck-Dienstleistern unterscheidet</div>
      <div className="pc-logos-row">
        {['EIGENE CREW','EIGENER MASCHINENPARK','FESTER ANSPRECHPARTNER','FESTPREIS NACH BEGEHUNG','24/7 NOTDIENST','DOKUMENTATION INKLUSIVE','FAMILIENBETRIEB','STAMMSITZ DÜREN'].map(l=>(
          <div className="pc-logo-cell" key={l}>{l}</div>
        ))}
      </div>
    </div>
  </section>
);

const Services = () => (
  <section className="pc-section" id="leistungen">
    <div className="pc-container">
      <SectionHead kicker="01 — Leistungen" title="Alles, was Ihre Anlage sauber, sicher und produktiv hält."
        sub="Von der wiederkehrenden Maschinenreinigung bis zum Havarie-Einsatz — mit eigenem Maschinenpark, eigener Crew, eigener Verantwortung."/>
      <div className="pc-services-grid">
        {window.PC.SERVICES.map(s => (
          <article className="pc-service" key={s.n}>
            <div className="pc-service-head">
              <span className="pc-service-num">{s.n}</span>
              <h3 className="pc-service-title">{s.t}</h3>
            </div>
            <p className="pc-service-desc">{s.short} {s.d}</p>
            <ul className="pc-service-tags">{s.tags.map(tag => <li key={tag}>{tag}</li>)}</ul>
            <a className="pc-service-link" href={`leistungen/${s.slug}.html`}>Mehr erfahren <Arrow/></a>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Branchen = () => (
  <section className="pc-section pc-section-dark" id="branchen">
    <div className="pc-container">
      <SectionHead kicker="02 — Branchen" title="Industriespezifisches Know-How, statt Allzweck-Reinigung."
        sub="Unsere Crews sind auf die jeweilige Produktionsumgebung geschult — inkl. Werksregeln, PSA und Stillstandsplanung." light/>
      <div className="pc-industries">
        {window.PC.INDUSTRIES.map(i => (
          <article className="pc-industry" key={i.t}>
            <div className="pc-industry-body">
              <span className="pc-industry-icon" aria-hidden="true"><PcIcon name={i.icon} size={30}/></span>
              <h3 className="pc-industry-title">{i.t}</h3>
              <p className="pc-industry-desc">{i.d}</p>
              <a className="pc-industry-link" href={`branchen/${i.slug}.html`}>Anwendungsfall ansehen <Arrow/></a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Kennzahlen = () => (
  <section className="pc-stats">
    <div className="pc-container pc-stats-grid">
      <div className="pc-stat"><div className="pc-stat-num">Düren</div><div className="pc-stat-label">Stammsitz im Rheinland</div></div>
      <div className="pc-stat"><div className="pc-stat-num">24<span>/7</span></div><div className="pc-stat-label">Notdienst, 365 Tage</div></div>
      <div className="pc-stat"><div className="pc-stat-num">6</div><div className="pc-stat-label">Leistungsbereiche</div></div>
      <div className="pc-stat"><div className="pc-stat-num">0</div><div className="pc-stat-label">Subunternehmer</div></div>
    </div>
  </section>
);

const STEPS = [
  {n:'01', t:'Anfrage & Erstgespräch', d:'Telefon oder Formular — es meldet sich ein Techniker, kein Callcenter.'},
  {n:'02', t:'Vor-Ort-Begehung', d:'Aufnahme des Reinigungsbedarfs, Risikoanalyse, Abstimmung mit Werksleitung und Sicherheitsfachkraft.'},
  {n:'03', t:'Festangebot mit Plan', d:'Transparente Kalkulation, fixer Zeitplan, definierte Crew und Verantwortlichkeiten — schriftlich.'},
  {n:'04', t:'Durchführung', d:'Eigene Crew, eigener Maschinenpark. Tägliches Reporting an Ihren Ansprechpartner.'},
  {n:'05', t:'Abnahme & Doku', d:'Protokollierte Übergabe, Foto-/Video-Doku, Materialnachweis für Audit und Versicherung.'},
];

const Prozess = () => (
  <section className="pc-section" id="prozess">
    <div className="pc-container">
      <SectionHead kicker="03 — Prozess" title="Fünf Schritte. Keine Überraschungen."
        sub="So arbeiten wir mit jedem Industriekunden — vom ersten Anruf bis zum Abnahmeprotokoll."/>
      <ol className="pc-steps">
        {STEPS.map(s => (
          <li className="pc-step" key={s.n}>
            <div className="pc-step-num">{s.n}</div>
            <div className="pc-step-body">
              <h3 className="pc-step-title">{s.t}</h3>
              <p className="pc-step-desc">{s.d}</p>
            </div>
          </li>
        ))}
      </ol>
    </div>
  </section>
);

const CASES = [
  {sector:'Automotive', title:'Lackieranlage reinigen, ohne die Linie anzuhalten.', metric:'Nachts', metricLabel:'parallel zur laufenden Produktion', body:'Wir legen das Reinigungsfenster in die Schichtpause oder ans Wochenende und stimmen jeden Schritt mit Ihrer Werksleitung ab. Sie verlieren keine Taktzeit.'},
  {sector:'Chemie', title:'Reaktoren und Rohrleitungen sicher befahren.', metric:'Inertisiert', metricLabel:'mit durchgehender Atemluft', body:'Befahranzeige, Inertisierung mit Stickstoff oder CO₂, Sicherungsposten und Atemluftversorgung — die Crew geht erst rein, wenn das Konzept steht.'},
  {sector:'Lebensmittel', title:'Lagertanks termingerecht vor dem Audit.', metric:'Protokoll', metricLabel:'Fotodoku je Behälter', body:'Tankinnenreinigung inklusive Probenahme, auf Wunsch über ein verlängertes Wochenende. Sie bekommen für jeden Behälter ein nachvollziehbares Protokoll.'},
];

const CaseStudies = () => (
  <section className="pc-section pc-section-soft" id="cases">
    <div className="pc-container">
      <SectionHead kicker="04 — Einsätze" title="So sehen typische Einsätze aus."
        sub="Drei Situationen, die uns Werksleitungen am häufigsten schildern — und wie wir sie angehen."/>
      <div className="pc-cases">
        {CASES.map(c => (
          <article className="pc-case" key={c.title}>
            <div className="pc-case-body">
              <div className="pc-case-sector">{c.sector}</div>
              <h3 className="pc-case-title">{c.title}</h3>
              <p className="pc-case-desc">{c.body}</p>
              <div className="pc-case-metric">
                <div className="pc-case-metric-num">{c.metric}</div>
                <div className="pc-case-metric-label">{c.metricLabel}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
      <div style={{textAlign:'center', marginTop:48}}>
        <a className="pc-btn pc-btn-ghost pc-btn-lg" href="referenzen.html">Alle Einsatzbereiche ansehen <Arrow/></a>
      </div>
    </div>
  </section>
);

const VERSPRECHEN = [
  {q:'Sie rufen an und bekommen einen Techniker ans Telefon — keine Warteschleife, kein Callcenter, keine Rückruf-Versprechen ins Leere.', n:'Ein Ansprechpartner', r:'Vom ersten Anruf bis zur Abnahme'},
  {q:'Der Preis steht vor dem ersten Handgriff. Nach der Begehung bekommen Sie ein schriftliches Festangebot — keine Nachträge, die niemand angekündigt hat.', n:'Festpreis statt Schätzung', r:'Schriftlich, nach Vor-Ort-Begehung'},
  {q:'Es kommt dieselbe Crew mit denselben Geräten. Wir arbeiten ohne Subunternehmer, damit Sie nicht jedes Mal neu erklären müssen, wie Ihr Werk funktioniert.', n:'Eigene Crew, eigene Geräte', r:'Keine Subunternehmer'},
];

const Versprechen = () => (
  <section className="pc-section" id="stimmen">
    <div className="pc-container">
      <SectionHead kicker="05 — Unser Versprechen" title="Woran Sie uns messen dürfen."
        sub="Drei Zusagen, die für jeden Auftrag gelten — unabhängig von Größe und Branche."/>
      <div className="pc-testimonials">
        {VERSPRECHEN.map(t => (
          <figure className="pc-testimonial" key={t.n}>
            <blockquote>{t.q}</blockquote>
            <figcaption>
              <div className="pc-testi-avatar" aria-hidden="true"><Check/></div>
              <div><div className="pc-testi-name">{t.n}</div><div className="pc-testi-role">{t.r}</div></div>
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  </section>
);

const FLEET = [
  {t:'Hochdruckaggregate', icon:'hochdruck', d:'Bis in den Höchstdruckbereich, dieselbetrieben und schallgedämmt — auch für Einsätze neben laufender Produktion.'},
  {t:'Saug- und Spülkombi', icon:'saugspuel', d:'Für Schlämme, Prozesswasser und Feststoffe, mit Wasserrückgewinnung für lange Einsätze ohne Nachschub.'},
  {t:'Trockeneisstrahler', icon:'trockeneis', d:'Rückstandsfreie Reinigung empfindlicher Oberflächen — ohne Strahlmittel, ohne Demontage, ohne Trocknungszeit.'},
  {t:'Kamerainspektion', icon:'kamera', d:'Schiebe- und Fahrwagen-Systeme für Rohrleitungen — Sie sehen den Zustand, bevor wir ein Angebot schreiben.'},
];

const Technik = () => (
  <section className="pc-section pc-section-dark" id="technik">
    <div className="pc-container">
      <SectionHead kicker="06 — Technik & Maschinenpark" title="Eigene Geräte. Eigene Mechaniker. Keine Mietausreden."
        sub="Gewartet im eigenen Stützpunkt. Wenn es eng wird, mieten wir nicht zu — wir fahren mit dem, was wir kennen." light/>
      <div className="pc-fleet">
        {FLEET.map((f,i) => (
          <article className="pc-fleet-card" key={f.t}>
            <div className="pc-fleet-body">
              <div className="pc-fleet-meta"><span className="pc-fleet-num">SYS-{String(i+1).padStart(2,'0')}</span><span className="pc-fleet-count">Eigener Bestand</span></div>
              <span className="pc-fleet-icon" aria-hidden="true"><PcIcon name={f.icon} size={32}/></span>
              <h3 className="pc-fleet-title">{f.t}</h3>
              <p className="pc-fleet-desc">{f.d}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const Team = () => (
  <section className="pc-section" id="ueber">
    <div className="pc-container pc-about">
      <div className="pc-about-text">
        <SectionHead kicker="07 — Über uns" title="Inhabergeführt. Eigene Crew. Kurze Wege."
          sub={`Stammsitz in ${C.address.city}. Geführt wird der Betrieb von der Inhaberfamilie — täglich auf Baustellen, nicht nur im Büro.`}/>
        <ul className="pc-about-points">
          <li><Plus/> Eigene Auszubildende — Fachkraft für Rohr-, Kanal- und Industrieservice</li>
          <li><Plus/> Eigene Crew und eigener Maschinenpark, keine Subunternehmer</li>
          <li><Plus/> Stammsitz Düren — im Einsatz in NRW und bundesweit</li>
          <li><Plus/> 24/7-Bereitschaft mit echter Rufnummer, kein Anrufbeantworter</li>
        </ul>
        <div style={{marginTop:32}}>
          <a className="pc-btn pc-btn-primary pc-btn-lg" href="ueber-uns.html">Mehr über uns <Arrow/></a>
        </div>
      </div>
      <div className="pc-about-visual">
        <div className="pc-panel">
          <div className="pc-panel-head">Wie wir arbeiten</div>
          <dl className="pc-panel-list">
            <div><dt>Anfrage</dt><dd>Techniker am Telefon, kein Callcenter</dd></div>
            <div><dt>Begehung</dt><dd>Kostenfrei und unverbindlich vor Ort</dd></div>
            <div><dt>Angebot</dt><dd>Festpreis, schriftlich, vor Arbeitsbeginn</dd></div>
            <div><dt>Durchführung</dt><dd>Eigene Crew, eigener Maschinenpark</dd></div>
            <div><dt>Abnahme</dt><dd>Protokoll und Fotodoku für Ihre Unterlagen</dd></div>
          </dl>
        </div>
        <a className="pc-panel-cta" href={C.emergencyLink}>
          <span className="pc-panel-cta-k"><span className="pc-pulse pc-pulse-orange"/> 24/7 Notdienst</span>
          <span className="pc-panel-cta-v">{C.emergency}</span>
        </a>
      </div>
    </div>
  </section>
);

const CERTS = [
  {t:'Gefährdungsbeurteilung', d:'Schriftlich, vor der Angebotsabgabe'},
  {t:'Befahranzeige', d:'Vor jedem Einstieg in einen Behälter'},
  {t:'Sicherungsposten', d:'Bei Arbeiten in engen Räumen'},
  {t:'Atemluft & PSA', d:'Ausrüstung passend zum Einsatzrisiko'},
  {t:'Fotoprotokoll', d:'Zustand vor und nach dem Einsatz'},
  {t:'Entsorgungsnachweis', d:'Für jedes abgefahrene Medium'},
];

const Certs = () => (
  <section className="pc-section pc-section-soft" id="zerts">
    <div className="pc-container">
      <SectionHead kicker="08 — Sicherheit & Dokumentation" title="Sicher arbeiten. Lückenlos dokumentieren."
        sub="Was bei jedem Auftrag dazugehört — ohne Aufpreis und ohne dass Sie danach fragen müssen."/>
      <div className="pc-certs">
        {CERTS.map(c => (
          <div className="pc-cert" key={c.t}>
            <div className="pc-cert-mark" aria-hidden="true"><span/><span/></div>
            <div className="pc-cert-body"><div className="pc-cert-t">{c.t}</div><div className="pc-cert-d">{c.d}</div></div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FAQS = [
  {q:'Wie schnell sind Sie im Notfall vor Ort?', a:`Rufen Sie ${C.emergency} an — rund um die Uhr. Es geht ein Techniker ran, kein Callcenter. Wie schnell wir bei Ihnen sein können, hängt von Entfernung und Einsatzlage ab; das sagen wir Ihnen direkt am Telefon, statt eine Pauschalzeit zu versprechen.`},
  {q:'Reinigen Sie auch im laufenden Betrieb?', a:'Ja. Wir stimmen das Reinigungsfenster mit Ihrer Werksleitung und Sicherheitsfachkraft ab und arbeiten mit kompakten, leisen Aggregaten. Nacht- und Wochenendeinsätze sind für uns Normalbetrieb, kein Sonderfall.'},
  {q:'Wie kalkulieren Sie? Pauschale oder Stunde?', a:'Beides möglich. Standard ist ein Festpreisangebot nach der Vor-Ort-Begehung — damit Sie vorher wissen, was es kostet. Für Wartungsverträge vereinbaren wir feste Stundensätze und transparente Material-Sätze.'},
  {q:'Welche Versicherungen bestehen?', a:'Betriebshaftpflicht und Umweltschadenversicherung bestehen. Die aktuellen Nachweise mit den jeweiligen Deckungssummen legen wir jedem Angebot bei — und auf Wunsch schon vor der Begehung.'},
  {q:'Welche Regionen decken Sie ab?', a:'Stammsitz ist Düren in NRW. Reguläre Einsätze fahren wir in NRW und den angrenzenden Bundesländern, nach Absprache auch darüber hinaus. Fragen Sie einfach nach Ihrem Standort.'},
  {q:'Was kostet die Erstberatung?', a:'Nichts. Vor-Ort-Begehung und Angebot sind kostenfrei und unverbindlich. Erst wenn Sie das Festangebot schriftlich annehmen, entstehen Kosten.'},
];

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="pc-section" id="faq">
      <div className="pc-container">
        <SectionHead kicker="09 — FAQ" title="Was Werksleitungen vorab wissen wollen."/>
        <div className="pc-faqs">
          {FAQS.map((f,i)=>(
            <div className={`pc-faq ${open===i?'is-open':''}`} key={i}>
              <button className="pc-faq-q" onClick={()=>setOpen(open===i?-1:i)} aria-expanded={open===i}>
                <span className="pc-faq-num">{String(i+1).padStart(2,'0')}</span>
                <span className="pc-faq-text">{f.q}</span>
                <span className="pc-faq-icon" aria-hidden="true"><Plus/></span>
              </button>
              <div className="pc-faq-a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Kontakt = () => (
  <section className="pc-section pc-section-contact" id="kontakt">
    <div className="pc-container pc-contact-grid">
      <div className="pc-contact-info">
        <div className="pc-sec-kicker is-light">10 — Kontakt</div>
        <h2 className="pc-h2 pc-h2-light">Kostenfreies Angebot. Schriftlich und verbindlich.</h2>
        <p className="pc-contact-lead">Schreiben Sie uns Ihren Reinigungsbedarf — wir melden uns mit konkreten Fragen, einem Terminvorschlag und, sobald die Lage klar ist, einem Festpreis.</p>
        <div className="pc-contact-blocks">
          <div className="pc-contact-block pc-contact-emergency">
            <div className="pc-contact-block-kicker"><span className="pc-pulse pc-pulse-orange"/> 24/7 Notdienst</div>
            <a href={C.emergencyLink} className="pc-contact-block-val">{C.emergency}</a>
            <div className="pc-contact-block-sub">Rund um die Uhr, auch an Sonn- und Feiertagen</div>
          </div>
          <div className="pc-contact-block">
            <div className="pc-contact-block-kicker">Vertrieb & Angebote</div>
            <a href={C.emailLink} className="pc-contact-block-val">{C.email}</a>
            <div className="pc-contact-block-sub">{C.hours}</div>
          </div>
          <div className="pc-contact-block">
            <div className="pc-contact-block-kicker">Hauptsitz</div>
            <div className="pc-contact-block-val pc-contact-addr">{C.name}<br/>{C.address.street}<br/>{C.address.zip} {C.address.city}</div>
          </div>
        </div>
      </div>
      <ContactForm/>
    </div>
  </section>
);

const Tweaks = ({tweaks, setTweak}) => (
  <TweaksPanel title="Tweaks">
    <TweakSection title="Hero-Layout">
      <TweakRadio label="Variante" value={tweaks.heroVariant} onChange={(v)=>setTweak('heroVariant', v)}
        options={[{label:'Foto', value:'overlay'},{label:'Split', value:'split'},{label:'Typo', value:'typo'}]}/>
      <TweakToggle label="Hero dunkel" value={tweaks.darkHero} onChange={(v)=>setTweak('darkHero', v)}/>
    </TweakSection>
    <TweakSection title="Look & Feel">
      <TweakRadio label="Density" value={tweaks.density} onChange={(v)=>setTweak('density', v)}
        options={[{label:'Komfort', value:'comfortable'},{label:'Kompakt', value:'compact'}]}/>
      <TweakToggle label="Signal-Akzent (Orange)" value={tweaks.accentOn} onChange={(v)=>setTweak('accentOn', v)}/>
    </TweakSection>
  </TweaksPanel>
);

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.dataset.accent = tweaks.accentOn ? 'on' : 'off';
    document.documentElement.dataset.darkhero = tweaks.darkHero ? 'on' : 'off';
  }, [tweaks]);
  return (
    <>
      <PageHeader active="" home={true}/>
      <main>
        <Hero variant={tweaks.heroVariant}/>
        <LogoStrip/>
        <Services/>
        <Branchen/>
        <Kennzahlen/>
        <Prozess/>
        <CaseStudies/>
        <Versprechen/>
        <Technik/>
        <Team/>
        <Certs/>
        <FAQ/>
        <Kontakt/>
      </main>
      <PageFooter home={true}/>
      <Tweaks tweaks={tweaks} setTweak={setTweak}/>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);