/* Powermieter — Screen 4: Onboarding / Aktivierung */
function Screen4({ form, restart, device }) {
  const mobile = device === 'mobile';
  const name = form.vorname || 'Max';
  const refId = 'PM-' + (2026) + '-' + String(Math.abs(hashStr((form.email || '') + name)) % 100000).padStart(5, '0');

  const timeline = [
    { t: 'Vertragsprüfung', d: 'Wir prüfen Ihre Angaben und bestätigen den Vertrag.', eta: 'Heute – in Kürze', state: 'active' },
    { t: 'Zählerdatenabgleich', d: 'Abgleich Ihrer Zählernummer mit dem Netzbetreiber.', eta: 'In 1–3 Tagen', state: 'todo' },
    { t: 'Lieferstart / Aktivierung', d: 'Ihre Belieferung mit lokalem Solarstrom beginnt — ohne Unterbrechung.', eta: 'Zum Lieferbeginn', state: 'todo' },
    { t: 'Zugang zum Powermieter-Portal', d: 'Verbrauch einsehen, Abrechnungen herunterladen, Vertrag verwalten.', eta: 'Nach Aktivierung', state: 'todo' },
  ];

  return (
    <div className="pm-page">
      <div className="pm-page-narrow rise" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

        {/* Success hero */}
        <div className="card card-pad pm-success">
          <div className="pm-success-ring"><I.check sw={2.6} size={42} /></div>
          <h1 className="pm-success-title">Willkommen bei Powermieter, {name}!</h1>
          <p className="pm-success-sub">Ihr Vertrag wurde erfolgreich übermittelt. Alle weiteren Informationen erhalten Sie per E-Mail an <strong>{form.email || 'max@beispiel.de'}</strong>.</p>
          <div className="pm-success-meta">
            <div className="pm-success-meta-item"><span>Vorgangsnummer</span><b className="mono">{refId}</b></div>
            <div className="pm-success-meta-item"><span>Status</span><b style={{ color: 'var(--accent)' }}>In Prüfung</b></div>
          </div>
        </div>

        {/* Timeline */}
        <div className="card card-pad">
          <h3 className="pm-card-title" style={{ marginBottom: 4 }}><I.spark size={18} /> So geht es weiter</h3>
          <p className="field-hint" style={{ marginBottom: 20 }}>Sie müssen nichts weiter tun — wir melden uns bei jedem Schritt.</p>
          <div className="pm-timeline">
            {timeline.map((s, i) => (
              <div className="pm-tl-item" data-state={s.state} key={i}>
                <div className="pm-tl-rail">
                  <span className="pm-tl-node">{s.state === 'done' ? <I.check size={16} /> : s.state === 'active' ? <I.dot size={14} /> : i + 1}</span>
                  {i < timeline.length - 1 && <span className="pm-tl-bar" />}
                </div>
                <div className="pm-tl-body">
                  <div className="pm-tl-title">{s.t}{s.state === 'active' && <span className="chip chip-accent" style={{ padding: '3px 9px', fontSize: 11 }}>Aktuell</span>}</div>
                  <div className="pm-tl-desc">{s.d}</div>
                  <div className="pm-tl-eta"><I.clock size={13} style={{ verticalAlign: '-2px', marginRight: 4 }} />{s.eta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Downloads */}
        <div className="card card-pad">
          <h3 className="pm-card-title" style={{ marginBottom: 14 }}><I.download size={18} /> Ihre Dokumente</h3>
          <div className="pm-grid pm-grid-3">
            {[['Vertragskopie', 'PDF · 240 KB'], ['Preisblatt', 'PDF · 96 KB'], ['Datenschutzinfo', 'PDF · 110 KB']].map(([n, m]) => (
              <div className="pm-dl" key={n}>
                <span className="pm-dl-ic"><I.doc size={18} /></span>
                <div style={{ minWidth: 0 }}><div className="pm-dl-name">{n}</div><div className="pm-dl-meta">{m}</div></div>
                <I.download size={18} style={{ color: 'var(--text-3)', marginLeft: 'auto', flex: 'none' }} />
              </div>
            ))}
          </div>
        </div>

        {/* Portal CTA */}
        <div className="card pm-portal">
          <div className="pm-portal-glow" />
          <div className="pm-portal-inner">
            <div>
              <span className="eyebrow" style={{ color: 'var(--accent-300)' }}>Powermieter Portal</span>
              <h3 className="pm-portal-title">Behalten Sie Ihren Strom im Blick</h3>
              <p className="pm-portal-sub">Verbrauch einsehen, Abrechnungen herunterladen und Ihren Solaranteil verfolgen — sobald Ihre Belieferung startet.</p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 18 }}>
                <Button variant="accent" iconRight={<I.arrowR />}>Zum Kundenportal</Button>
                <Button variant="ghost" icon={<I.chart size={17} />} style={{ background: '#ffffff14', color: '#fff', borderColor: '#ffffff2a' }}>Status ansehen</Button>
              </div>
            </div>
            <div className="pm-portal-preview">
              <div className="pm-portal-mini">
                <div className="pm-portal-mini-top"><span>Aktueller Solaranteil</span><b className="tnum">73%</b></div>
                <div className="pm-portal-bars">{[40, 65, 52, 78, 73, 60, 85].map((h, i) => <span key={i} style={{ height: h + '%' }} />)}</div>
              </div>
            </div>
          </div>
        </div>

        {/* Referral */}
        <div className="card card-pad pm-referral">
          <span className="pm-referral-ic"><I.users size={22} /></span>
          <div style={{ flex: 1 }}>
            <div className="pm-card-title" style={{ fontSize: 16 }}>Informieren Sie auch Ihre Nachbarn</div>
            <p className="field-hint" style={{ marginTop: 4 }}>Je mehr Haushalte teilnehmen, desto besser wird der Solarstrom im Gebäude genutzt.</p>
          </div>
          <Button variant="ghost" icon={<I.send size={16} />}>Teilen</Button>
        </div>

        <div style={{ textAlign: 'center', paddingTop: 8 }}>
          <button className="pm-link" style={{ background: 'none', border: 0, cursor: 'pointer', fontSize: 13 }} onClick={restart}>
            ↺ Prototyp zurücksetzen / neu starten
          </button>
        </div>
      </div>
    </div>
  );
}

function hashStr(s) { let h = 0; for (let i = 0; i < s.length; i++) { h = (h << 5) - h + s.charCodeAt(i); h |= 0; } return h; }

Object.assign(window, { Screen4 });