/* Powermieter — Screen 1: Interesse / Einstieg */
const { useState: useState1 } = React;

function Screen1({ form, set, errors, onNext, device }) {
  const mobile = device === 'mobile';
  return (
    <div className="pm-page">
      <div className="pm-page-inner rise">

        {/* HERO */}
        <section className="pm-hero">
          <div>
            <Chip tone="accent" icon={<I.building />}>Für Ihr Gebäude · Musterstraße 12</Chip>
            <h1 className="pm-hero-h1">Günstiger Strom<br />direkt vom <em>Dach Ihres Hauses</em></h1>
            <p className="pm-hero-sub">
              Powermieter bringt lokal erzeugten Solarstrom aus Ihrem eigenen Gebäude
              zu Ihnen in die Wohnung — transparent abgerechnet und in wenigen Minuten digital abgeschlossen.
            </p>
            <div className="pm-hero-cta">
              <Button size="lg" iconRight={<I.arrowR />} onClick={() => window.pmScrollTo && window.pmScrollTo('interesse-form')}>
                Jetzt Interesse anmelden
              </Button>
              <Button variant="ghost" size="lg" icon={<I.help />}>So funktioniert's</Button>
            </div>
            <div className="pm-trust">
              <div className="pm-trust-item"><I.shield size={18} /><span><strong style={{ color: 'var(--text)' }}>Freiwillig</strong> — Sie entscheiden selbst, ob Sie teilnehmen.</span></div>
              <div className="pm-trust-item"><I.plug size={18} /><span>Ihr Strom bleibt <strong style={{ color: 'var(--text)' }}>jederzeit zuverlässig</strong>.</span></div>
              <div className="pm-trust-item"><I.receipt size={18} /><span>Abrechnung <strong style={{ color: 'var(--text)' }}>digital & transparent</strong>.</span></div>
            </div>
          </div>

          <div className="pm-hero-visual">
            <EnergyFlowIllustration />
            <div className="pm-hero-glow" aria-hidden="true"></div>
            <div className="pm-hero-float card">
              <div className="pm-hero-float-top"><I.leaf size={16} /> Solaranteil heute</div>
              <div className="pm-hero-float-big tnum">73<span>%</span></div>
              <div className="pm-hero-float-bar"><span style={{ width: '73%' }}></span></div>
              <div className="pm-hero-float-sub">Rest aus dem Netz ergänzt — unterbrechungsfrei.</div>
            </div>
          </div>
        </section>

        {/* BENEFITS */}
        <section style={{ marginTop: mobile ? 40 : 64 }}>
          <div className="pm-sec-head">
            <span className="eyebrow">Ihre Vorteile</span>
            <h2 className="pm-sec-title">Warum sich die Teilnahme lohnt</h2>
          </div>
          <div className="pm-grid pm-grid-5">
            <BenefitCard icon={<I.wallet />} title="Günstiger Tarif">
              Meist günstiger als der klassische Grundversorgungstarif — bei gleicher Versorgungssicherheit.
            </BenefitCard>
            <BenefitCard icon={<I.sun2 />} title="Solarstrom vom Dach">
              Der Strom wird direkt auf Ihrem Gebäude erzeugt. Kurze Wege, lokale Energie.
            </BenefitCard>
            <BenefitCard icon={<I.shield />} title="Sichere Versorgung">
              Reicht der Solarstrom nicht, wird automatisch Reststrom aus dem Netz ergänzt — unterbrechungsfrei.
            </BenefitCard>
            <BenefitCard icon={<I.receipt />} title="Transparente Abrechnung">
              Monatlich, nachvollziehbar und vollständig digital im Powermieter-Portal.
            </BenefitCard>
            <BenefitCard icon={<I.home />} title="Kein Aufwand">
              Keine baulichen Änderungen in Ihrer Wohnung. Wir kümmern uns um die Technik.
            </BenefitCard>
          </div>
        </section>

        {/* JOURNEY — Vom Aushang zum Vertrag (animated) */}
        <section style={{ marginTop: mobile ? 40 : 64 }}>
          <div className="pm-sec-head">
            <span className="eyebrow">So läuft es ab</span>
            <h2 className="pm-sec-title">Vom Aushang zum Vertrag</h2>
            <p className="pm-formwrap-sub" style={{ marginTop: 10 }}>Sechs einfache Schritte — vom QR-Code im Treppenhaus bis zu Ihrem digitalen Portal. Tippen Sie auf einen Schritt, um vorzuspringen.</p>
          </div>
          <ProcessSequence />
        </section>

        {/* INTEREST FORM */}
        <section id="interesse-form" style={{ marginTop: mobile ? 40 : 64 }}>
          <div className="pm-formwrap card">
            <div className="pm-formwrap-head">
              <Chip tone="accent" icon={<I.spark />}>Schritt 1 von 4</Chip>
              <h2 className="pm-formwrap-title">Interesse anmelden</h2>
              <p className="pm-formwrap-sub">Unverbindlich. Sie gehen damit keinen Vertrag ein — wir melden uns mit den nächsten Schritten.</p>
            </div>
            <div className="pm-formwrap-body">
              <div className="pm-grid pm-grid-2">
                <Field label="Vorname" required htmlFor="s1-vn" error={errors.vorname}>
                  <TextInput id="s1-vn" placeholder="Max" value={form.vorname} error={errors.vorname} onChange={e => set('vorname', e.target.value)} />
                </Field>
                <Field label="Nachname" required htmlFor="s1-nn" error={errors.nachname}>
                  <TextInput id="s1-nn" placeholder="Mustermann" value={form.nachname} error={errors.nachname} onChange={e => set('nachname', e.target.value)} />
                </Field>
                <Field label="E-Mail" required htmlFor="s1-em" error={errors.email} hint="An diese Adresse senden wir Ihre nächsten Schritte.">
                  <TextInput id="s1-em" type="email" placeholder="max@beispiel.de" value={form.email} error={errors.email} onChange={e => set('email', e.target.value)} />
                </Field>
                <Field label="Telefonnummer" optional htmlFor="s1-tel" hint="Nur für Rückfragen — kein Pflichtfeld.">
                  <TextInput id="s1-tel" type="tel" placeholder="+49 …" value={form.telefon} onChange={e => set('telefon', e.target.value)} />
                </Field>
                <Field label="Adresse / Wohnung" required htmlFor="s1-adr" error={errors.adresse} hint="z. B. Musterstraße 12, Whg. 4 — damit wir Ihr Gebäude zuordnen.">
                  <div className="col-span-2"><TextInput id="s1-adr" placeholder="Musterstraße 12, 2. OG rechts" value={form.adresse} error={errors.adresse} onChange={e => set('adresse', e.target.value)} /></div>
                </Field>
              </div>

              <label className="check pm-consent" data-checked={form.consent1 ? 'true' : 'false'} style={{ marginTop: 4 }}>
                <input type="checkbox" checked={form.consent1} onChange={e => set('consent1', 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 bin damit einverstanden, dass Powermieter mich zur Vorbereitung der Teilnahme <strong>kontaktiert</strong>. Es entsteht kein Vertrag und keine Kosten.</span>
              </label>
              {errors.consent1 && <span className="field-err"><I.alert size={14} />{errors.consent1}</span>}

              <div className="pm-formwrap-foot">
                <span className="pm-formwrap-note"><I.lock size={15} /> Ihre Daten werden verschlüsselt übertragen.</span>
                <Button size="lg" iconRight={<I.arrowR />} onClick={onNext}>Interesse anmelden</Button>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section style={{ marginTop: mobile ? 40 : 64 }}>
          <div className="pm-sec-head"><span className="eyebrow">Häufige Fragen</span><h2 className="pm-sec-title">Kurz & ehrlich beantwortet</h2></div>
          <div className="card card-pad" style={{ paddingTop: 4, paddingBottom: 4 }}>
            <AccordionItem q="Muss ich teilnehmen?" defaultOpen>
              Nein. Die Teilnahme ist vollständig freiwillig. Wenn Sie sich nicht anmelden, ändert sich für Sie nichts — Ihre bisherige Stromversorgung bleibt bestehen.
            </AccordionItem>
            <AccordionItem q="Was passiert bei schlechtem Wetter?">
              Sie haben jederzeit Strom. Wenn das Solardach gerade nicht genug erzeugt, wird automatisch Reststrom aus dem Netz ergänzt — unterbrechungsfrei und ohne Ihr Zutun.
            </AccordionItem>
            <AccordionItem q="Kann ich später wieder wechseln?">
              Ja. Es gelten faire Kündigungsfristen, die wir Ihnen vor Vertragsabschluss klar anzeigen. Sie sind nicht langfristig gebunden.
            </AccordionItem>
          </div>
        </section>

      </div>
      {mobile && (
        <div className="pm-bottomcta">
          <Button block size="lg" iconRight={<I.arrowR />} onClick={() => window.pmScrollTo && window.pmScrollTo('interesse-form')}>Jetzt Interesse anmelden</Button>
        </div>
      )}
    </div>
  );
}

/* Decorative QR placeholder glyph (not a scannable code) */
function QRGlyph({ size = 90 }) {
  const cells = 11;
  const seed = [
    1,1,1,0,1,0,1,0,1,1,1, 1,0,1,0,0,1,1,1,0,0,1, 1,0,1,1,1,0,0,1,0,1,1,
    0,0,0,1,0,1,1,0,1,0,0, 1,1,0,0,1,1,0,1,1,0,1, 0,1,1,1,0,0,1,0,0,1,0,
    1,0,1,0,1,1,0,1,1,1,1, 0,0,0,1,0,0,1,0,0,0,0, 1,1,1,0,1,1,0,1,0,1,1,
    1,0,1,0,0,1,1,0,1,0,1, 1,1,1,0,1,0,1,1,1,0,1,
  ];
  const g = size / cells;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <rect width={size} height={size} rx={8} fill="var(--surface-2)" />
      {seed.map((v, i) => v ? <rect key={i} x={(i % cells) * g + 2} y={Math.floor(i / cells) * g + 2} width={g - 1.5} height={g - 1.5} rx={1.5} fill="var(--text)" /> : null)}
      {[[2,2],[2,size-26],[size-26,2]].map(([x,y],k)=>(
        <g key={k}><rect x={x} y={y} width={22} height={22} rx={5} fill="none" stroke="var(--accent)" strokeWidth="3"/><rect x={x+7} y={y+7} width={8} height={8} rx={2} fill="var(--accent)"/></g>
      ))}
    </svg>
  );
}

Object.assign(window, { Screen1, QRGlyph });