/* Powermieter Landingpage — Sections A: Hero · So funktioniert · Vorteile · Paula */

/* ============== SEKTION 1 — HERO ============== */
function HeroSection({ heroStyle, audience, onForm, onChat }) {
  const dark = heroStyle === 'dark';
  const img = dark ? lpAsset('heroDark', 'assets/hero-dark.png') : lpAsset('explainerLight', 'assets/explainer-light.png');
  return (
    <section className="lp-hero-shell" id="lp-hero">
      <div className="lp-wrap">
        <div className="lp-hero" data-style={heroStyle}>
          <div className="lp-hero-copy">
            <span className="lp-hero-badge"><I.building />Für Ihr Gebäude · Musterstraße 12</span>
            <h1 className="lp-hero-h1">Günstiger Strom direkt vom <em>Dach Ihres Hauses</em>.</h1>
            <p className="lp-hero-sub">
              Mit Powermieter nutzen Bewohner lokal erzeugten Solarstrom aus dem eigenen Gebäude —
              transparent abgerechnet, sicher versorgt und ohne technischen Aufwand in der Wohnung.
            </p>
            <div className="lp-hero-cta">
              <Button size="lg" iconRight={<I.arrowR />} onClick={onForm}>Jetzt Interesse anmelden</Button>
              <Button variant="ghost" size="lg" icon={<I.chevDown />} onClick={() => window.lpScrollTo && window.lpScrollTo('lp-how')}>So funktioniert es</Button>
            </div>
            <div className="lp-trustrow">
              <span className="lp-trust-chip"><I.check />Freiwillige Teilnahme</span>
              <span className="lp-trust-chip"><I.shield />Sichere Stromversorgung</span>
              <span className="lp-trust-chip"><I.receipt />Digitale Abrechnung</span>
              <span className="lp-trust-chip"><I.home />Kein Umbau in der Wohnung</span>
            </div>
          </div>
          <div className="lp-hero-visual">
            <img className="lp-hero-img" src={img} alt="Energiefluss im Mehrfamilienhaus: Solarstrom vom Dach, Verbrauch in der Wohnung, Reststrom aus dem Netz" />
            <span className="lp-pulse lp-pulse-pv" aria-hidden="true" />
            <span className="lp-pulse lp-pulse-grid" aria-hidden="true" />
            <div className="lp-hero-float">
              <div className="lp-hero-float-top"><I.sun2 />Solaranteil heute</div>
              <div className="lp-hero-float-big tnum">73<span>%</span></div>
              <div className="lp-hero-float-bar"><span style={{ width: '73%' }} /></div>
              <div className="lp-hero-float-sub">Rest aus dem Netz ergänzt — unterbrechungsfrei.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== SEKTION 2 — SO FUNKTIONIERT ============== */
function HowSection() {
  return (
    <section className="lp-sec" id="lp-how">
      <div className="lp-wrap">
        <Reveal className="lp-head">
          <span className="lp-eyebrow"><I.spark />So funktioniert Powermieter</span>
          <h2 className="lp-h2">Lokaler Strom aus Ihrem Gebäude — einfach erklärt</h2>
          <p className="lp-lede">In vier Schritten vom Sonnenlicht auf dem Dach bis zur transparenten Abrechnung. Ganz ohne Technik-Kauderwelsch.</p>
        </Reveal>
        <div className="lp-how">
          <Reveal className="lp-how-visual">
            <img src={lpAsset('explainerLight', 'assets/explainer-light.png')} alt="Schematische Darstellung: PV-Anlage auf dem Dach versorgt Wohnungen und Wärmepumpe, Netzstrom als Ergänzung" />
          </Reveal>
          <div className="lp-steps">
            {LP_HOW.map((s, i) => (
              <Reveal key={i} className="lp-step" delay={i + 1}>
                <span className="lp-step-n">{i + 1}</span>
                <div>
                  <div className="lp-step-t">{s.t}</div>
                  <div className="lp-step-d">{s.d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <Reveal className="lp-disclose">
          <div className="card">
            <AccordionItem q="Was passiert, wenn die Sonne nicht scheint?" defaultOpen>
              Ihre Stromversorgung bleibt jederzeit sicher. Erzeugt das Dach gerade nicht genug, wird der fehlende Strom
              automatisch aus dem öffentlichen Netz ergänzt — unterbrechungsfrei und ohne dass Sie etwas tun müssen.
            </AccordionItem>
            <AccordionItem q="Wie wird mein Verbrauch eigentlich gemessen?">
              Über einen modernen, geeichten Zähler an Ihrem Zählerplatz. Er erfasst Ihren Verbrauch digital — die technischen
              Details (Messkonzept, Summenzählung) übernehmen wir vollständig für Sie im Hintergrund.
            </AccordionItem>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============== SEKTION 3 — VORTEILE ============== */
function BenefitsSection() {
  return (
    <section className="lp-sec lp-sec-tight" id="lp-vorteile">
      <div className="lp-wrap">
        <Reveal className="lp-head">
          <span className="lp-eyebrow"><I.leaf />Ihre Vorteile</span>
          <h2 className="lp-h2">Warum sich die Teilnahme für Bewohner lohnt</h2>
        </Reveal>
        <div className="lp-benefits">
          {LP_BENEFITS.map((b, i) => {
            const Ic = I[b.ic];
            return (
              <Reveal key={i} className="lp-benefit" delay={(i % 3) + 1}>
                {b.tag && <span className="lp-benefit-tag">{b.tag}</span>}
                <span className="lp-benefit-ic"><Ic /></span>
                <div className="lp-benefit-t">{b.t}</div>
                <div className="lp-benefit-d">{b.d}</div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============== SEKTION 4 — PAULA ============== */
function PaulaSection({ onChat }) {
  return (
    <section className="lp-sec" id="lp-paula">
      <div className="lp-wrap">
        <div className="lp-paula">
          <Reveal>
            <span className="lp-eyebrow"><I.spark />Ihre persönliche Begleitung</span>
            <h2 className="lp-h2">Paula begleitet Sie durch den gesamten Prozess.</h2>
            <p className="lp-lede" style={{ marginTop: 14 }}>
              Paula ist Ihre digitale Energieberaterin von PowerHouse360. Sie erklärt den Ablauf, beantwortet Fragen und
              hilft später dabei, Verbrauch, Kosten und Einsparpotenziale besser zu verstehen.
            </p>
            <div className="lp-paula-bullets">
              {LP_PAULA_BULLETS.map((b, i) => (
                <div className="lp-paula-b" key={i}>
                  <span className="lp-paula-b-ic"><I.check sw={3} /></span>
                  <span>{b}</span>
                </div>
              ))}
            </div>
            <Button size="lg" icon={<I.send />} onClick={onChat}>Paula fragen</Button>
            <p className="lp-paula-micro">Keine Fachsprache. Keine komplizierten Formulare. Paula führt Sie Schritt für Schritt durch den Prozess.</p>
          </Reveal>

          <Reveal delay={2}>
            <div className="lp-paula-card">
              <div className="lp-paula-card-glow" />
              <div className="lp-paula-id">
                <img className="lp-paula-av" src={lpAsset('paulaAvatar', 'assets/paula-avatar.png?v=2')} alt="Paula" />
                <div>
                  <div className="lp-paula-id-name">Paula</div>
                  <div className="lp-paula-id-role">Digitale Energieberaterin · PowerHouse360</div>
                </div>
              </div>
              <div className="lp-paula-chatprev">
                <div className="lp-bubble lp-bubble-q">Muss ich teilnehmen?</div>
                <div className="lp-bubble lp-bubble-a">Nein 🙂 Die Teilnahme ist völlig freiwillig — Sie entscheiden selbst.</div>
                <div className="lp-bubble lp-bubble-q">Wo finde ich meine Zählernummer?</div>
                <div className="lp-bubble lp-bubble-a">Sie steht auf Ihrem Stromzähler. Ein Foto genügt — den Rest übernehme ich.</div>
              </div>
              <Button block variant="accent" size="lg" className="lp-paula-cta" icon={<I.send />} onClick={onChat}>Chat mit Paula starten</Button>
            </div>
          </Reveal>
        </div>

        {/* Full dashboard showcase — Bild 1 */}
        <Reveal className="lp-dashshow">
          <BrowserFrame url="portal.powermieter.de">
            <img src={lpAsset('paulaDash', 'assets/paula-dashboard.png')} alt="Powermieter-Portal mit Paula: Dashboard, Verbrauch, Prognose und persönliche Tipps" />
          </BrowserFrame>
          <p className="lp-cap">So sieht Ihr persönliches Powermieter-Portal mit Paula aus — verständlich aufbereitet, jederzeit abrufbar.</p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection, HowSection, BenefitsSection, PaulaSection });