/* Powermieter Landingpage — Sections B: Form · Timeline · App · FAQ · Final · Footer */
const { useState: useSB, useEffect: useEB, useRef: useRB } = React;

/* ============== SEKTION 5 — INTERESSE / REGISTRIERUNG ============== */
function InterestSection({ onContinue }) {
  const [f, setF] = useSB({ vorname: '', nachname: '', email: '', telefon: '', aufgang: '', etage: '', whg: '', consent: false });
  const [err, setErr] = useSB({});
  const [done, setDone] = useSB(false);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));

  const submit = () => {
    const e = {};
    if (!f.vorname.trim()) e.vorname = 'Bitte Vornamen eingeben';
    if (!f.nachname.trim()) e.nachname = 'Bitte Nachnamen eingeben';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) e.email = 'Bitte gültige E-Mail eingeben';
    if (!f.consent) e.consent = 'Bitte bestätigen Sie Ihr Interesse.';
    setErr(e);
    if (Object.keys(e).length) return;
    setDone(true);
  };

  return (
    <section className="lp-sec" id="lp-form">
      <div className="lp-wrap">
        <div className="lp-form-grid">
          <Reveal className="lp-form-aside">
            <span className="lp-eyebrow"><I.user />Interesse anmelden</span>
            <h2 className="lp-h2">In wenigen Minuten dabei</h2>
            <p className="lp-lede" style={{ marginTop: 14 }}>
              Melden Sie zunächst nur Ihr Interesse an. <strong style={{ color: 'var(--text)' }}>Noch kein Vertragsabschluss</strong> —
              wir bereiten alles vor und führen Sie Schritt für Schritt durch die nächsten Etappen.
            </p>
            <div className="lp-form-points">
              <div className="lp-form-point">
                <span className="lp-form-point-ic"><I.shield /></span>
                <div><b>Unverbindlich &amp; kostenlos</b><p>Es entstehen keine Kosten und keine Verpflichtung.</p></div>
              </div>
              <div className="lp-form-point">
                <span className="lp-form-point-ic"><I.lock /></span>
                <div><b>Datenschutz garantiert</b><p>Ihre Angaben werden verschlüsselt übertragen und DSGVO-konform verarbeitet.</p></div>
              </div>
              <div className="lp-form-point">
                <span className="lp-form-point-ic"><I.clock /></span>
                <div><b>In 2 Minuten erledigt</b><p>Wenige Angaben genügen — den Rest klären wir gemeinsam.</p></div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <div className="lp-formcard">
              {!done ? (
                <>
                  <div className="lp-prefill">
                    <I.building />
                    <span>Vorausgefüllt für Ihr Gebäude: <b>Musterstraße 12, 10115 Berlin</b></span>
                  </div>
                  <div className="lp-form-stack" style={{ marginTop: 20 }}>
                    <div className="lp-form-row2">
                      <Field label="Vorname" required error={err.vorname}>
                        <TextInput placeholder="Max" value={f.vorname} error={err.vorname} onChange={e => set('vorname', e.target.value)} />
                      </Field>
                      <Field label="Nachname" required error={err.nachname}>
                        <TextInput placeholder="Mustermann" value={f.nachname} error={err.nachname} onChange={e => set('nachname', e.target.value)} />
                      </Field>
                    </div>
                    <div className="lp-form-row2">
                      <Field label="E-Mail" required error={err.email} hint="Hierhin senden wir Ihre nächsten Schritte.">
                        <TextInput type="email" placeholder="max@beispiel.de" value={f.email} error={err.email} onChange={e => set('email', e.target.value)} />
                      </Field>
                      <Field label="Telefonnummer" optional hint="Nur für Rückfragen.">
                        <TextInput type="tel" placeholder="+49 …" value={f.telefon} onChange={e => set('telefon', e.target.value)} />
                      </Field>
                    </div>
                    <div className="lp-form-row3">
                      <Field label="Aufgang"><TextInput placeholder="Haus A" value={f.aufgang} onChange={e => set('aufgang', e.target.value)} /></Field>
                      <Field label="Etage"><TextInput placeholder="2. OG" value={f.etage} onChange={e => set('etage', e.target.value)} /></Field>
                      <Field label="Wohnung"><TextInput placeholder="W04" value={f.whg} onChange={e => set('whg', e.target.value)} /></Field>
                    </div>
                    <label className="check" data-checked={f.consent ? 'true' : 'false'} style={{ marginTop: 2 }}>
                      <input type="checkbox" checked={f.consent} onChange={e => set('consent', e.target.checked)} style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }} />
                      <span className="check-box"><I.check sw={3} /></span>
                      <span className="check-text">Ich möchte Informationen zum Powermieter-Angebot für mein Gebäude erhalten. Es entsteht kein Vertrag und keine Kosten.</span>
                    </label>
                    {err.consent && <span className="field-err"><I.alert size={14} />{err.consent}</span>}
                  </div>
                  <div className="lp-form-foot">
                    <span className="lp-form-note"><I.lock />Verschlüsselt übertragen</span>
                    <Button size="lg" iconRight={<I.arrowR />} onClick={submit}>Interesse absenden</Button>
                  </div>
                </>
              ) : (
                <div className="lp-success">
                  <div className="lp-success-ic"><I.checkBold /></div>
                  <h3>Danke, {f.vorname || 'alles klar'}!</h3>
                  <p>Wir haben Ihr Interesse erhalten. Im nächsten Schritt können Sie Ihre Daten vervollständigen und den Vertrag in Ruhe vorbereiten lassen — alles digital, jederzeit unterbrechbar.</p>
                  <div className="lp-success-next">
                    <Button size="lg" iconRight={<I.arrowR />} onClick={onContinue}>Daten jetzt vervollständigen</Button>
                    <Button variant="ghost" size="lg" onClick={() => setDone(false)}>Zurück zum Formular</Button>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============== SEKTION 6 — AKTIVIERUNGS-TIMELINE ============== */
function TimelineSection() {
  const ref = useRB(null);
  const dotRefs = useRB([]);
  const fillRef = useRB(null);
  const [active, setActive] = useSB(-1);

  useEB(() => {
    let raf = 0;
    const onScroll = () => {
      raf = 0;
      const mid = window.innerHeight * 0.62;
      let last = -1;
      dotRefs.current.forEach((d, i) => { if (d && d.getBoundingClientRect().top < mid) last = i; });
      setActive(last);
      if (fillRef.current && ref.current) {
        const lineTop = ref.current.getBoundingClientRect().top;
        const d = dotRefs.current[last];
        if (d) {
          const r = d.getBoundingClientRect();
          fillRef.current.style.height = Math.max(0, (r.top + r.height / 2) - (lineTop + 14)) + 'px';
        } else fillRef.current.style.height = '0px';
      }
    };
    const h = () => { if (!raf) raf = requestAnimationFrame(onScroll); };
    window.addEventListener('scroll', h, { passive: true });
    window.addEventListener('resize', h);
    onScroll();
    return () => { window.removeEventListener('scroll', h); window.removeEventListener('resize', h); cancelAnimationFrame(raf); };
  }, []);

  return (
    <section className="lp-sec" id="lp-timeline">
      <div className="lp-wrap">
        <Reveal className="lp-head">
          <span className="lp-eyebrow"><I.doc />Vom Interesse bis zur Aktivierung</span>
          <h2 className="lp-h2">Klar geführt — Schritt für Schritt</h2>
          <p className="lp-lede">Sie behalten in jeder Phase den Überblick. Verbindlich wird es erst mit Ihrer digitalen Bestätigung.</p>
        </Reveal>
        <div className="lp-timeline" ref={ref}>
          <div className="lp-tl-line" />
          <div className="lp-tl-fill" ref={fillRef} />
          {LP_TIMELINE.map((s, i) => {
            const Ic = I[s.ic];
            return (
              <div className="lp-tl-item" key={i} data-on={i <= active ? 'true' : 'false'} ref={el => dotRefs.current[i] = el}>
                <span className="lp-tl-dot">{i <= active ? <I.check /> : <Ic />}</span>
                <div className="lp-tl-card">
                  <div className="lp-tl-step">Schritt {i + 1}</div>
                  <div className="lp-tl-t">{s.t}</div>
                  <div className="lp-tl-d">{s.d}</div>
                  <div className="lp-tl-badge"><I.check />erledigt</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============== SEKTION 7 — APP / PORTAL ============== */
function AppSection({ audience, setAudience }) {
  const data = LP_APP[audience] || LP_APP.mieter;
  return (
    <section className="lp-sec" id="lp-app-sec">
      <div className="lp-wrap">
        <div className="lp-app">
          <div className="lp-app-inner">
            <span className="lp-eyebrow"><I.phone />App &amp; Portal</span>
            <h2 className="lp-app-h">Alles im Blick — für Mieter und Vermieter.</h2>
            <p className="lp-app-sub">
              Nach der Aktivierung erhalten Sie Zugriff auf Ihr digitales Powermieter-Portal: Verbrauch, PV-Anteil,
              Kostenentwicklung und Abrechnungen — transparent aufbereitet, dunkel oder hell.
            </p>
            <div className="lp-app-toggle" role="tablist">
              <button data-on={audience === 'mieter' ? 'true' : 'false'} onClick={() => setAudience('mieter')}><I.home />Mieter-Ansicht</button>
              <button data-on={audience === 'vermieter' ? 'true' : 'false'} onClick={() => setAudience('vermieter')}><I.building />Vermieter-Ansicht</button>
            </div>
            <div className="lp-app-kpis" key={audience}>
              {data.kpis.map((k, i) => (
                <div key={i}>
                  <div className="lp-kpi-v"><CountUp value={parseFloat(k.v.replace(',', '.').replace('−', '-'))} decimals={k.v.includes(',') ? 1 : 0} prefix={k.v.startsWith('+') ? '+' : ''} /><em>{k.u}</em></div>
                  <div className="lp-kpi-l">{k.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="lp-app-photo">
            <img src={lpAsset('appPhones', 'assets/app-phones.png')} alt="Vier Smartphone-Ansichten der Powermieter-App: Mieter und Vermieter, Dark und Light Mode" />
          </div>
          <div className="lp-app-cols">
            <div className="lp-app-col" data-dim={audience !== 'mieter' ? 'true' : 'false'}>
              <div className="lp-app-col-h"><I.home />Für Mieter</div>
              {LP_APP.mieter.points.map((p, i) => <div className="lp-app-li" key={i}><I.check />{p}</div>)}
            </div>
            <div className="lp-app-col" data-dim={audience !== 'vermieter' ? 'true' : 'false'}>
              <div className="lp-app-col-h"><I.building />Für Vermieter &amp; Hausverwaltung</div>
              {LP_APP.vermieter.points.map((p, i) => <div className="lp-app-li" key={i}><I.check />{p}</div>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== SEKTION 8 — FAQ ============== */
function FaqSection() {
  return (
    <section className="lp-sec lp-sec-tight" id="lp-faq">
      <div className="lp-wrap">
        <Reveal className="lp-head lp-head-c">
          <span className="lp-eyebrow"><I.help />Häufige Fragen</span>
          <h2 className="lp-h2">Kurz &amp; ehrlich beantwortet</h2>
        </Reveal>
        <Reveal className="lp-faq">
          <div className="card">
            {LP_FAQ.map((x, i) => (
              <AccordionItem key={i} q={x.q} defaultOpen={i === 0}>{x.a}</AccordionItem>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============== SEKTION 9 — FINAL CTA ============== */
function FinalSection({ onForm, onChat }) {
  return (
    <section className="lp-sec" id="lp-final">
      <div className="lp-wrap">
        <Reveal className="lp-final">
          <div className="lp-final-glow" />
          <div>
            <span className="lp-eyebrow"><I.bolt />Jetzt mitmachen</span>
            <h2 className="lp-final-h">Werden Sie Teil des Energieprojekts in Ihrem Haus.</h2>
            <p className="lp-final-sub">Melden Sie Ihr Interesse an und lassen Sie sich Schritt für Schritt durch den Prozess führen — verständlich, sicher und jederzeit unterbrechbar.</p>
            <div className="lp-final-cta">
              <Button size="lg" iconRight={<I.arrowR />} onClick={onForm}>Jetzt Interesse anmelden</Button>
              <Button variant="ghost" size="lg" icon={<I.send />} onClick={onChat}>Frage an Paula stellen</Button>
            </div>
          </div>
          <div className="lp-final-side">
            <div className="lp-final-paula">
              <div className="lp-final-paula-id">
                <img className="lp-final-paula-av" src={lpAsset('paulaAvatar', 'assets/paula-avatar.png?v=2')} alt="Paula" />
                <div>
                  <div className="lp-final-paula-name">Paula hilft Ihnen</div>
                  <div className="lp-final-paula-role">Energieberaterin · antwortet sofort</div>
                </div>
              </div>
              <div className="lp-final-paula-q">„Sie sind unsicher, ob sich die Teilnahme für Sie lohnt? Fragen Sie mich einfach — ich rechne es Ihnen verständlich vor."</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============== FOOTER ============== */
function LandingFooter({ onAdmin }) {
  return (
    <footer className="lp-footer">
      <div className="lp-wrap">
        <div className="lp-footer-in">
          <div>
            <Logo size={32} />
            <p className="lp-footer-tag">Lokaler Mieterstrom für Mehrfamilienhäuser. Ein Service von PowerHouse360 — transparent, digital und fair.</p>
          </div>
          <div className="lp-footer-links">
            <div className="lp-footer-col">
              <h5>Powermieter</h5>
              <a href="#lp-how">So funktioniert es</a>
              <a href="#lp-vorteile">Vorteile</a>
              <a href="#lp-app-sec">App &amp; Portal</a>
              <a href="#lp-faq">Häufige Fragen</a>
            </div>
            <div className="lp-footer-col">
              <h5>Für Objekte</h5>
              <a href="index.html?view=admin">Hausverwaltung</a>
              <a href="index.html">Onboarding-Flow</a>
              <a href="uebersicht.html">Design-Übersicht</a>
            </div>
            <div className="lp-footer-col">
              <h5>Rechtliches</h5>
              <a href="#">Datenschutz</a>
              <a href="#">Impressum</a>
              <a href="#">AGB</a>
            </div>
          </div>
        </div>
        <div className="lp-footer-legal">
          <span>© 2026 PowerHouse360 GmbH · Powermieter</span>
          <span>Freiwillige Teilnahme · Sichere Versorgung · DSGVO-konform</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { InterestSection, TimelineSection, AppSection, FaqSection, FinalSection, LandingFooter });