/* Sanio Hi-Fi · Mobile App view
 * Two phones side by side:
 *   1. Berater-Phone — Quick-Capture flow (advisor's app)
 *   2. Kunden-Phone  — Customer form (link from email)
 * Each phone is a state machine; clicking the primary button advances it.
 */

const { useState: mUseState } = React;

/* ───────── iPhone shell ───────── */
function IPhone({ children, statusInk = 'var(--ink)' }) {
  return (
    <div className="iphone">
      <div className="iphone-screen">
        <div className="iphone-notch" />
        <div className="iphone-statusbar" style={{ color: statusInk }}>
          <span>9:41</span>
          <div className="icons">
            <Icon name="signal" size={15} />
            <Icon name="wifi" size={15} />
            <Icon name="battery" size={22} />
          </div>
        </div>
        <div className="iphone-content">{children}</div>
        <div className="iphone-home" />
      </div>
    </div>
  );
}

/* ───────── Berater · Quick-Capture flow ───────── */

function AdvisorAppHeader({ title, back, onBack, right, sub }) {
  return (
    <div style={{
      padding: '6px 18px 12px', display: 'flex', alignItems: 'center', gap: 8,
      borderBottom: '1px solid var(--line)',
      flexShrink: 0, background: 'var(--surface)',
    }}>
      {back ? (
        <button className="btn ghost icon" onClick={onBack} aria-label="Zurück">
          <Icon name="chevL" size={20} />
        </button>
      ) : <span style={{ width: 30 }} />}
      <div style={{ flex: 1, textAlign: 'center', lineHeight: 1.1 }}>
        <div className="bold" style={{ fontSize: 15 }}>{title}</div>
        {sub && <div className="tiny faint">{sub}</div>}
      </div>
      {right || <span style={{ width: 30 }} />}
    </div>
  );
}

function S_AdvisorQuickCapture({ onSend }) {
  return (
    <>
      <AdvisorAppHeader
        title="Neuer Lead"
        sub="aus Telefonat"
        right={
          <div className="row middle gap-4">
            <div className="avatar sm">FS</div>
          </div>
        }
      />

      <div className="scroll-y" style={{ flex: 1, padding: '18px 18px 8px' }}>
        <div className="eyebrow" style={{ marginBottom: 4 }}>
          <span style={{ color: 'var(--accent)' }}>● </span>Schnellerfassung
        </div>
        <div className="h-1" style={{ marginBottom: 18 }}>Neuer Lead</div>

        <div className="field">
          <div className="field-label">
            E-Mail des Interessenten <span className="req">*</span>
          </div>
          <input className="input" defaultValue="thomas.mueller@beispiel.de" />
          <div className="field-hint">
            <Icon name="check" size={12} style={{ color: 'var(--accent)' }} /> gültiges Format
          </div>
        </div>

        <div className="field">
          <div className="field-label">
            Notiz aus dem Gespräch <span className="opt">optional</span>
          </div>
          <textarea
            className="textarea"
            rows={5}
            defaultValue={`EFH BJ 1978 in München-Schwabing
Gasheizung 20 J alt, will tauschen
Interesse an iSFP + Förderberatung
Hat Energieausweis von 2018`}
          />
        </div>

        <button className="btn block subtle" style={{ height: 40, gap: 8, marginBottom: 16 }}>
          <Icon name="mic" size={16} style={{ color: 'var(--accent)' }} />
          <span style={{ fontWeight: 500 }}>Sprachnotiz statt tippen</span>
          <span className="tiny faint" style={{ marginLeft: 'auto' }}>00:00</span>
        </button>

        <div style={{
          padding: 12,
          background: 'var(--surface-2)',
          borderRadius: 10,
          border: '1px solid var(--line)',
          marginBottom: 16,
        }}>
          <div className="row middle gap-8" style={{ marginBottom: 6 }}>
            <Icon name="mail" size={14} style={{ color: 'var(--accent-ink)' }} />
            <span className="small bold">Vorlage</span>
            <span className="grow" />
            <span className="small" style={{ color: 'var(--accent-ink)', textDecoration: 'underline', textUnderlineOffset: 3 }}>ändern</span>
          </div>
          <div className="small">Erstkontakt · Energieberatung</div>
          <div className="tiny faint" style={{ marginTop: 3 }}>Persönlich von dir · enthält Formular-Link</div>
        </div>
      </div>

      <div style={{ padding: 16, borderTop: '1px solid var(--line)', background: 'var(--surface)', flexShrink: 0 }}>
        <button className="btn accent lg block" onClick={onSend}>
          <Icon name="send" size={15} />
          E-Mail an Kunde senden
        </button>
      </div>
    </>
  );
}

function S_AdvisorConfirm({ onNew, onDashboard }) {
  return (
    <>
      <AdvisorAppHeader title="Lead gesendet" />
      <div className="scroll-y" style={{ flex: 1, padding: '32px 22px 12px', textAlign: 'center' }}>
        <div className="fade-up" style={{ display: 'flex', justifyContent: 'center' }}>
          <div style={{
            width: 84, height: 84, borderRadius: '50%',
            background: 'var(--accent-soft)',
            border: '2px solid var(--accent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 20,
          }}>
            <Icon name="check" size={42} strokeWidth={2.2} style={{ color: 'var(--accent)' }} />
          </div>
        </div>
        <div className="h-1" style={{ marginBottom: 8 }}>E-Mail ist raus.</div>
        <div className="small muted" style={{ marginBottom: 4 }}>
          An <b style={{ color: 'var(--ink)' }}>thomas.mueller@beispiel.de</b>
        </div>
        <div className="tiny faint">Lead #4287 · soeben 14:32</div>

        <div className="card tint" style={{ padding: 14, marginTop: 26, textAlign: 'left' }}>
          <div className="row middle gap-10">
            <div style={{
              width: 32, height: 32, borderRadius: 8, background: 'var(--accent)',
              display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0,
            }}>
              <Icon name="bell" size={16} style={{ color: 'white' }} />
            </div>
            <div className="col" style={{ lineHeight: 1.3 }}>
              <div className="small bold">Push, sobald Thomas das Formular ausfüllt.</div>
              <div className="tiny muted">Sanio kalkuliert direkt ein Angebot mit.</div>
            </div>
          </div>
        </div>

        <div className="card" style={{ padding: 14, marginTop: 12, textAlign: 'left' }}>
          <div className="row middle gap-10">
            <div style={{
              width: 32, height: 32, borderRadius: 8, background: 'var(--surface-3)',
              display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0,
            }}>
              <Icon name="clock" size={16} style={{ color: 'var(--ink-2)' }} />
            </div>
            <div className="col" style={{ lineHeight: 1.3 }}>
              <div className="small bold">Auto-Reminder nach 48 h</div>
              <div className="tiny muted">Falls Thomas das Formular noch nicht abgeschickt hat.</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: 16, borderTop: '1px solid var(--line)', background: 'var(--surface)', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <button className="btn accent lg block" onClick={onNew}>
          <Icon name="plus" size={16} /> Nächster Lead
        </button>
        <button className="btn block" onClick={onDashboard}>
          Zurück zum Dashboard
        </button>
      </div>
    </>
  );
}

function AdvisorPhone({ onJumpToDashboard }) {
  const [step, setStep] = mUseState('capture'); // capture | sending | confirm
  return (
    <IPhone>
      {step === 'capture' && (
        <S_AdvisorQuickCapture onSend={() => {
          setStep('sending');
          setTimeout(() => setStep('confirm'), 700);
        }} />
      )}
      {step === 'sending' && (
        <div className="col center" style={{ flex: 1 }}>
          <div className="pulse-ring" style={{
            width: 64, height: 64, borderRadius: '50%',
            background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="send" size={28} style={{ color: 'white' }} />
          </div>
          <div className="small muted" style={{ marginTop: 18 }}>E-Mail wird versendet…</div>
        </div>
      )}
      {step === 'confirm' && (
        <S_AdvisorConfirm
          onNew={() => setStep('capture')}
          onDashboard={onJumpToDashboard}
        />
      )}
    </IPhone>
  );
}

/* ───────── Kunde · Formular Flow ───────── */

function CustomerHeader({ step, total, onBack }) {
  const pct = step === 0 ? 0 : (step / total) * 100;
  return (
    <div style={{ padding: '6px 18px 10px', borderBottom: '1px solid var(--line)', flexShrink: 0, background: 'var(--surface)' }}>
      <div className="row middle gap-8" style={{ marginBottom: 10 }}>
        {step > 0 ? (
          <button className="btn ghost icon sm" onClick={onBack} aria-label="Zurück">
            <Icon name="chevL" size={18} />
          </button>
        ) : <span style={{ width: 26 }} />}
        <div className="row middle gap-6" style={{ flex: 1, justifyContent: 'center' }}>
          <div className="avatar sm">FS</div>
          <span className="small" style={{ fontWeight: 500 }}>Energieberatung Seitz</span>
        </div>
        <span className="tiny faint" style={{ width: 32, textAlign: 'right' }}>{step > 0 ? `${step}/${total}` : ''}</span>
      </div>
      <div className="progress">
        <div style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}

function CustomerFooter({ onContinue, primaryLabel = 'Weiter', primaryDisabled = false, hint }) {
  return (
    <div style={{ padding: 14, borderTop: '1px solid var(--line)', background: 'var(--surface)', flexShrink: 0 }}>
      {hint && <div className="tiny faint" style={{ marginBottom: 8, textAlign: 'center' }}>{hint}</div>}
      <button className="btn accent lg block" onClick={onContinue} disabled={primaryDisabled} style={primaryDisabled ? { opacity: 0.5 } : null}>
        {primaryLabel} <Icon name="arrowR" size={15} />
      </button>
    </div>
  );
}

/* helper: a tappable choice card */
function ChoiceCard({ icon, title, desc, selected, multi, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        textAlign: 'left',
        background: selected ? 'var(--accent-soft)' : 'var(--surface)',
        border: `1.5px solid ${selected ? 'var(--accent)' : 'var(--line-2)'}`,
        borderRadius: 12,
        padding: '12px 14px',
        display: 'flex',
        gap: 12,
        alignItems: 'center',
        width: '100%',
        transition: 'background .12s ease, border-color .12s ease',
      }}
    >
      <div style={{
        width: 40, height: 40, borderRadius: 10,
        background: selected ? 'var(--accent)' : 'var(--surface-3)',
        color: selected ? 'white' : 'var(--ink-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 18,
        flexShrink: 0,
      }}>{icon}</div>
      <div className="col grow" style={{ minWidth: 0 }}>
        <div className="small bold">{title}</div>
        {desc && <div className="tiny faint">{desc}</div>}
      </div>
      {multi ? (
        <span className={`check ${selected ? 'on' : ''}`} />
      ) : (
        <span className={`radio ${selected ? 'on' : ''}`} />
      )}
    </button>
  );
}

/* Customer Step Components */
function CS_Welcome({ onNext }) {
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '24px 20px' }}>
      <div className="eyebrow" style={{ marginBottom: 6 }}>Erstkontakt</div>
      <div className="h-1" style={{ marginBottom: 8 }}>Willkommen, Thomas</div>
      <div className="small muted" style={{ marginBottom: 22, lineHeight: 1.55 }}>
        Schön, dass Sie sich für eine Energie­beratung bei <b style={{ color: 'var(--ink)' }}>Franziska Seitz</b> interessieren.
      </div>

      <div className="card tint" style={{ padding: 16, marginBottom: 16 }}>
        <div className="row gap-12">
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="clock" size={18} style={{ color: 'white' }} />
          </div>
          <div className="col" style={{ lineHeight: 1.4 }}>
            <div className="small bold">Dauert etwa 4 Minuten</div>
            <div className="tiny muted">Sie können das Formular jederzeit unterbrechen — wir schicken Ihnen den Link erneut.</div>
          </div>
        </div>
      </div>

      <div className="card" style={{ padding: 16, marginBottom: 16 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Was Sie zur Hand haben sollten</div>
        <div className="col gap-10">
          {[
            ['Adresse + Baujahr', true],
            ['Wohnfläche (ungefähr genügt)', true],
            ['Energieausweis (falls vorhanden)', false],
            ['Letzte Heizkostenabrechnung', false],
          ].map(([t, must]) => (
            <div key={t} className="row gap-8 small" style={{ alignItems: 'flex-start' }}>
              <Icon name="check" size={14} style={{ color: must ? 'var(--accent)' : 'var(--ink-faint)', marginTop: 3, flexShrink: 0 }} />
              <span className="grow" style={{ color: must ? 'var(--ink)' : 'var(--ink-soft)', lineHeight: 1.4 }}>{t}</span>
              {!must && <span className="tiny faint" style={{ flexShrink: 0, marginTop: 2 }}>optional</span>}
            </div>
          ))}
        </div>
      </div>

      <button className="btn block subtle" style={{ height: 40, gap: 8 }}>
        <Icon name="phone" size={14} /> Lieber telefonisch zurückrufen lassen
      </button>
    </div>
  );
}

function CS_Vorhaben({ onNext }) {
  const opts = [
    { id: 'isfp', icon: '🏠', t: 'Sanierungsfahrplan (iSFP)',  d: 'Mit individueller Maßnahmen-Empfehlung' },
    { id: 'heat', icon: '🔥', t: 'Heizung tauschen',           d: 'BAFA-/KfW-Förderung für neue Heizung' },
    { id: 'foer', icon: '💶', t: 'Fördermittelberatung',       d: 'BAFA, KfW & Landes­förderungen' },
    { id: 'sons', icon: '✏️', t: 'Sonstiges',                  d: 'Infoabend WEG, Einzelfragen, Gutachten' },
  ];
  const [sel, setSel] = mUseState({ isfp: true, heat: true });
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '20px 20px' }}>
      <div className="h-2" style={{ marginBottom: 6 }}>Was haben Sie vor?</div>
      <div className="small muted" style={{ marginBottom: 16 }}>Mehrfachauswahl möglich.</div>

      <div className="col gap-8">
        {opts.map((o) => (
          <ChoiceCard
            key={o.id} multi
            icon={o.icon} title={o.t} desc={o.d}
            selected={!!sel[o.id]}
            onClick={() => setSel((s) => ({ ...s, [o.id]: !s[o.id] }))}
          />
        ))}
      </div>

      {sel.isfp && sel.heat && (
        <div className="row middle gap-6 small fade-up" style={{ marginTop: 14, padding: '10px 12px', background: 'var(--accent-soft)', borderRadius: 10, color: 'var(--accent-ink)' }}>
          <Icon name="check" size={14} />
          <span><b>iSFP</b> primär — wird BAFA-bezuschusst, Heizung folgt im Rahmen davon.</span>
        </div>
      )}
    </div>
  );
}

function CS_Adresse() {
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '20px 20px' }}>
      <div className="h-2" style={{ marginBottom: 6 }}>Wo befindet sich das Gebäude?</div>
      <div className="small muted" style={{ marginBottom: 18 }}>PLZ ergänzt Stadt automatisch.</div>

      <div className="row gap-8" style={{ marginBottom: 0 }}>
        <div className="field" style={{ flex: 2 }}>
          <div className="field-label">Straße <span className="req">*</span></div>
          <input className="input" defaultValue="Leopoldstraße" />
        </div>
        <div className="field" style={{ flex: 1 }}>
          <div className="field-label">Nr. <span className="req">*</span></div>
          <input className="input" defaultValue="148" />
        </div>
      </div>
      <div className="row gap-8" style={{ marginBottom: 0 }}>
        <div className="field" style={{ flex: 1 }}>
          <div className="field-label">PLZ <span className="req">*</span></div>
          <input className="input ok" defaultValue="80804" />
        </div>
        <div className="field" style={{ flex: 2 }}>
          <div className="field-label">Ort <span className="req">*</span></div>
          <input className="input" defaultValue="München" />
        </div>
      </div>

      <label className="row middle gap-8 small" style={{ marginBottom: 14, marginTop: 4, cursor: 'pointer' }}>
        <span className="check" />
        Meine Anschrift weicht von der Objektadresse ab
      </label>

      <div style={{
        height: 130, borderRadius: 12, overflow: 'hidden',
        background: 'linear-gradient(135deg, oklch(0.94 0.02 155) 0%, oklch(0.92 0.02 200) 100%)',
        border: '1px solid var(--line-2)',
        position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
          <path d="M0 50 L60 50 L60 20 L100 20 L100 50 L200 50" stroke="var(--ink-faint)" strokeWidth="1" fill="none" />
          <path d="M40 0 L40 100 M120 0 L120 100" stroke="var(--ink-faint)" strokeWidth="0.5" fill="none" strokeDasharray="2 3" />
          <path d="M0 75 L200 75" stroke="var(--ink-faint)" strokeWidth="0.7" fill="none" />
        </svg>
        <div style={{
          position: 'absolute', top: '38%', left: '50%', transform: 'translate(-50%, -100%)',
          color: 'var(--danger)',
        }}>
          <Icon name="pin" size={32} strokeWidth={2.2} />
        </div>
        <div style={{
          position: 'absolute', bottom: 8, left: 8, right: 8,
          background: 'rgba(255,255,255,0.92)', borderRadius: 8,
          padding: '6px 10px', fontSize: 11.5, fontWeight: 500,
        }}>
          Leopoldstr. 148, 80804 München
        </div>
      </div>
    </div>
  );
}

function CS_Gebaeude() {
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '20px 20px' }}>
      <div className="h-2" style={{ marginBottom: 6 }}>Erzählen Sie uns vom Gebäude</div>
      <div className="small muted" style={{ marginBottom: 18 }}>Falls etwas unklar ist: Energieausweis hat die meisten Infos.</div>

      <div className="field">
        <div className="field-label">Gebäudetyp <span className="req">*</span></div>
        <div className="col gap-6">
          {[
            ['Einfamilienhaus', '🏡', true],
            ['Mehrfamilienhaus', '🏘️', false],
            ['Eigentumswohnung', '🏢', false],
            ['Nichtwohngebäude', '🏬', false],
          ].map(([t, i, sel]) => (
            <div key={t} className="row middle gap-10" style={{
              padding: '10px 12px', borderRadius: 10,
              border: `1.5px solid ${sel ? 'var(--accent)' : 'var(--line-2)'}`,
              background: sel ? 'var(--accent-soft)' : 'var(--surface)',
            }}>
              <span style={{ fontSize: 18 }}>{i}</span>
              <span className="small" style={{ fontWeight: sel ? 600 : 400 }}>{t}</span>
              <span className="grow" />
              <span className={`radio ${sel ? 'on' : ''}`} />
            </div>
          ))}
        </div>
      </div>

      <div className="row gap-8">
        <div className="field" style={{ flex: 1 }}>
          <div className="field-label">Baujahr <span className="req">*</span></div>
          <input className="input" defaultValue="1978" />
        </div>
        <div className="field" style={{ flex: 1 }}>
          <div className="field-label">Wohnfläche m²</div>
          <input className="input" defaultValue="142" />
        </div>
      </div>

      <div className="row middle between" style={{
        padding: '10px 12px',
        border: '1px solid var(--line-2)',
        borderRadius: 10, marginTop: 4,
      }}>
        <div className="col" style={{ lineHeight: 1.2 }}>
          <div className="small bold">Bewohnen Sie selbst?</div>
          <div className="tiny faint">wichtig für Eigentümer-Förderungen</div>
        </div>
        <span className="switch on" />
      </div>
    </div>
  );
}

function CS_Heizung() {
  const [pref, setPref] = mUseState(['wp']);
  const togglePref = (k) => setPref((arr) => arr.includes(k) ? arr.filter((x) => x !== k) : [...arr, k]);
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '20px 20px' }}>
      <div className="eyebrow" style={{ marginBottom: 4 }}>nur bei Heizungstausch</div>
      <div className="h-2" style={{ marginBottom: 18 }}>Ihre aktuelle Heizung</div>

      <div className="field">
        <div className="field-label">Heizungstyp <span className="req">*</span></div>
        <div className="row middle between" style={{
          padding: '10px 12px', borderRadius: 10,
          border: '1px solid var(--line-2)',
        }}>
          <div className="row middle gap-8">
            <Icon name="flame" size={18} style={{ color: 'var(--warn)' }} />
            <span className="small bold">Gas-Brennwert</span>
          </div>
          <Icon name="chevD" size={16} style={{ color: 'var(--ink-faint)' }} />
        </div>
      </div>

      <div className="row gap-8">
        <div className="field" style={{ flex: 1 }}>
          <div className="field-label">Alter (Jahre)</div>
          <input className="input" defaultValue="22" />
        </div>
        <div className="field" style={{ flex: 1 }}>
          <div className="field-label">Ø kWh / Jahr</div>
          <input className="input" defaultValue="18 400" />
        </div>
      </div>

      <div className="field">
        <div className="field-label">Wunsch: neue Heizung <span className="opt">Mehrfachauswahl</span></div>
        <div className="row wrap gap-6">
          {[
            ['wp',   'Wärmepumpe'],
            ['hyb',  'Hybrid (Gas + WP)'],
            ['pell', 'Pellets / Biomasse'],
            ['fern', 'Fernwärme'],
            ['ber',  'Beratung gewünscht'],
          ].map(([k, t]) => {
            const on = pref.includes(k);
            return (
              <button key={k} type="button" onClick={() => togglePref(k)} style={{
                height: 32, padding: '0 12px', borderRadius: 999,
                border: `1.5px solid ${on ? 'var(--accent)' : 'var(--line-2)'}`,
                background: on ? 'var(--accent-soft)' : 'var(--surface)',
                color: on ? 'var(--accent-ink)' : 'var(--ink-2)',
                fontSize: 12.5, fontWeight: 500,
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>
                {on && <Icon name="check" size={11} />}
                {t}
              </button>
            );
          })}
        </div>
      </div>

      <div className="field">
        <div className="field-label">Budget-Vorstellung <span className="opt">optional</span></div>
        <div className="row wrap gap-6">
          {['< 20 k€', '20–35 k€', '35–50 k€', '> 50 k€', 'noch offen'].map((t, i) => {
            const on = i === 1;
            return (
              <span key={t} style={{
                height: 32, padding: '0 12px', borderRadius: 999,
                border: `1.5px solid ${on ? 'var(--accent)' : 'var(--line-2)'}`,
                background: on ? 'var(--accent-soft)' : 'var(--surface)',
                color: on ? 'var(--accent-ink)' : 'var(--ink-2)',
                fontSize: 12.5, fontWeight: 500,
                display: 'inline-flex', alignItems: 'center', cursor: 'pointer',
              }}>{t}</span>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function FileRow({ icon, title, hint, uploaded }) {
  return (
    <div style={{
      padding: '12px 14px',
      border: `1.5px ${uploaded ? 'solid' : 'dashed'} ${uploaded ? 'var(--accent)' : 'var(--line-2)'}`,
      borderRadius: 12,
      background: uploaded ? 'var(--accent-soft)' : 'var(--surface)',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 9,
        background: uploaded ? 'var(--accent)' : 'var(--surface-3)',
        color: uploaded ? 'white' : 'var(--ink-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        {uploaded ? <Icon name="check" size={18} strokeWidth={2.4} /> : <span style={{ fontSize: 17 }}>{icon}</span>}
      </div>
      <div className="col grow" style={{ minWidth: 0 }}>
        <div className="small bold" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
        <div className="tiny faint">{uploaded ? uploaded : hint}</div>
      </div>
      {!uploaded && <Icon name="upload" size={16} style={{ color: 'var(--ink-faint)' }} />}
    </div>
  );
}

function CS_Dokumente() {
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '20px 20px' }}>
      <div className="h-2" style={{ marginBottom: 6 }}>Haben Sie Dokumente?</div>
      <div className="small muted" style={{ marginBottom: 18 }}>Optional — spart Zeit beim Vor-Ort-Termin.</div>

      <div className="col gap-8">
        <FileRow icon="📄" title="Energieausweis" uploaded="energieausweis-2018.pdf · 1.2 MB" />
        <FileRow icon="🏠" title="Grundrisse / Baupläne" hint="alle Etagen · PDF oder Foto" />
        <FileRow icon="🧾" title="Heizkostenabrechnung 2024" uploaded="heizung-2024.jpg · 480 KB" />
        <FileRow icon="🛠️" title="Schornsteinfeger-Protokoll" hint="für Bestandsheizung" />
        <FileRow icon="📋" title="Sonstige Unterlagen" hint="optional" />
      </div>

      <div className="tiny faint" style={{ marginTop: 14, textAlign: 'center' }}>
        Mit dem Handy fotografieren reicht. Sie können später noch nachreichen.
      </div>
    </div>
  );
}

function CS_Termin() {
  const days = [
    ['Mo', '23.6', false],
    ['Di', '24.6', false],
    ['Mi', '25.6', false],
    ['Do', '26.6', false],
    ['Fr', '27.6', false],
  ];
  const slots = ['09:00', '11:00', '14:00', '16:00'];
  const free = {
    'Mo 23.6': [true, false, true, false],
    'Di 24.6': [true, true, true, true],
    'Mi 25.6': [false, false, true, false],
    'Do 26.6': [true, true, true, true],
    'Fr 27.6': [false, true, false, true],
  };
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '20px 20px' }}>
      <div className="h-2" style={{ marginBottom: 6 }}>Wann passt der Vor-Ort-Termin?</div>
      <div className="small muted" style={{ marginBottom: 16 }}>Dauert ca. 90 Minuten. Sie können später verschieben.</div>

      <div className="row middle between" style={{ marginBottom: 10 }}>
        <span className="pill"><Icon name="cal" size={12} /> KW 26 · Juni</span>
        <div className="row gap-4">
          <button className="btn icon sm subtle"><Icon name="chevL" size={14} /></button>
          <button className="btn icon sm subtle"><Icon name="chevR" size={14} /></button>
        </div>
      </div>

      <div className="row gap-6" style={{ marginBottom: 14 }}>
        {days.map(([d, n]) => {
          const key = `${d} ${n}`;
          return (
            <div key={d} className="col grow" style={{ minWidth: 0 }}>
              <div className="micro bold" style={{ textAlign: 'center', marginBottom: 6, color: 'var(--ink-faint)' }}>{d}<br />{n}</div>
              <div className="col gap-4">
                {slots.map((s, i) => {
                  const f = free[key][i];
                  const sel = key === 'Di 24.6' && s === '14:00';
                  return (
                    <div key={s} style={{
                      height: 28, borderRadius: 6, fontSize: 11.5, fontWeight: 500,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      background: sel ? 'var(--accent)' : f ? 'var(--surface)' : 'transparent',
                      color: sel ? 'white' : f ? 'var(--ink)' : 'var(--ink-faint)',
                      border: `1px ${f ? 'solid' : 'dashed'} ${sel ? 'var(--accent)' : f ? 'var(--line-2)' : 'var(--line)'}`,
                    }}>{s}</div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className="card outline-accent" style={{ padding: 14 }}>
        <div className="row middle gap-10">
          <div style={{
            width: 44, height: 44, borderRadius: 10, background: 'var(--accent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <Icon name="check" size={22} strokeWidth={2.4} style={{ color: 'white' }} />
          </div>
          <div className="col" style={{ lineHeight: 1.25 }}>
            <div className="small bold">Di, 24. Juni · 14:00 – 15:30</div>
            <div className="tiny" style={{ color: 'var(--accent-ink)' }}>Vor-Ort · Leopoldstr. 148, München</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CS_Zusammenfassung() {
  const rows = [
    ['Vorhaben',  'iSFP + Heizungstausch',      'sparkle'],
    ['Adresse',   'Leopoldstr. 148, 80804 München','pin'],
    ['Gebäude',   'EFH · BJ 1978 · 142 m²',     'building'],
    ['Heizung',   'Gas, 22 Jahre · 18.400 kWh/J','flame'],
    ['Dokumente', '2 hochgeladen',              'doc'],
    ['Termin',    'Di 24. Juni · 14:00',        'cal'],
  ];
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '20px 20px' }}>
      <div className="h-2" style={{ marginBottom: 6 }}>Letzter Schritt</div>
      <div className="small muted" style={{ marginBottom: 16 }}>Prüfen Sie kurz Ihre Angaben.</div>

      <div className="col gap-6" style={{ marginBottom: 18 }}>
        {rows.map(([k, v, ic]) => (
          <div key={k} className="row middle gap-10" style={{
            padding: '10px 12px', borderRadius: 10,
            background: 'var(--surface-2)',
            border: '1px solid var(--line)',
          }}>
            <Icon name={ic} size={16} style={{ color: 'var(--ink-2)' }} />
            <div className="col grow" style={{ minWidth: 0 }}>
              <div className="tiny faint">{k}</div>
              <div className="small bold" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{v}</div>
            </div>
            <Icon name="edit" size={14} style={{ color: 'var(--ink-faint)' }} />
          </div>
        ))}
      </div>

      <div style={{ height: 1, background: 'var(--line)', margin: '4px 0 14px' }} />

      <label className="row gap-10 small" style={{ marginBottom: 12, cursor: 'pointer' }}>
        <span className="check on" style={{ marginTop: 2 }} />
        <span style={{ lineHeight: 1.45 }}>
          Ich stimme der Verarbeitung meiner Daten zur Energie­beratung zu
          (<u>Datenschutzerklärung</u>). <span style={{ color: 'var(--danger)' }}>*</span>
        </span>
      </label>
      <label className="row gap-10 small" style={{ cursor: 'pointer' }}>
        <span className="check" style={{ marginTop: 2 }} />
        <span style={{ lineHeight: 1.45 }}>
          Ich möchte das <b>Grundsteine-Portal</b> nutzen, um Dokumente sicher hochzuladen.
        </span>
      </label>
    </div>
  );
}

function CS_Erfolg({ onRestart }) {
  return (
    <div className="scroll-y" style={{ flex: 1, padding: '32px 22px 14px', textAlign: 'center' }}>
      <div className="fade-up" style={{ display: 'flex', justifyContent: 'center' }}>
        <div style={{
          width: 76, height: 76, borderRadius: '50%',
          background: 'var(--accent-soft)', border: '2px solid var(--accent)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 18,
        }}>
          <Icon name="check" size={38} strokeWidth={2.2} style={{ color: 'var(--accent)' }} />
        </div>
      </div>
      <div className="h-1" style={{ marginBottom: 8 }}>Vielen Dank!</div>
      <div className="small muted" style={{ maxWidth: 320, margin: '0 auto', lineHeight: 1.5 }}>
        <b style={{ color: 'var(--ink)' }}>Franziska Seitz</b> erhält jetzt Ihre Angaben.
        Innerhalb von 5 Min. bekommen Sie ein erstes Angebot per E-Mail.
      </div>

      <div className="card" style={{ padding: 14, marginTop: 22, textAlign: 'left' }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Ihr Termin</div>
        <div className="row middle gap-12">
          <div style={{
            width: 60, padding: '6px 0', borderRadius: 10, textAlign: 'center',
            background: 'var(--accent-soft)', border: '1px solid var(--accent)',
            color: 'var(--accent-ink)',
          }}>
            <div className="micro bold">JUNI</div>
            <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1 }}>24</div>
            <div className="micro">Di · 14:00</div>
          </div>
          <div className="col" style={{ lineHeight: 1.3 }}>
            <div className="small bold">Vor-Ort · 90 Min</div>
            <div className="tiny muted">Leopoldstr. 148, 80804 München</div>
            <div className="tiny faint">mit Franziska Seitz</div>
          </div>
        </div>
        <div className="row gap-6" style={{ marginTop: 12 }}>
          <button className="btn sm subtle">iCal</button>
          <button className="btn sm subtle">Google</button>
          <button className="btn sm subtle">Outlook</button>
        </div>
      </div>

      <div className="card tint" style={{ padding: 12, marginTop: 10, textAlign: 'left' }}>
        <div className="row middle gap-10">
          <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="phone" size={15} style={{ color: 'white' }} />
          </div>
          <div className="col" style={{ lineHeight: 1.25 }}>
            <div className="small bold">Rückfragen? +49 89 414 13 21</div>
            <div className="tiny muted">Franziska Seitz · Mo–Fr 9–18 Uhr</div>
          </div>
        </div>
      </div>

      <button className="btn ghost sm" style={{ marginTop: 18 }} onClick={onRestart}>
        ↻ Demo neu starten
      </button>
    </div>
  );
}

function CustomerPhone() {
  // Steps: 0 = welcome (no progress bar), 1..8 = form, 9 = success
  const [step, setStep] = mUseState(0);
  const total = 7; // 1..7, then final review = 7; success step doesn't count
  // We'll structure: 0 welcome → 1 vorhaben → 2 adresse → 3 gebäude → 4 heizung → 5 doku → 6 termin → 7 zusammenfassung → 8 erfolg
  const next = () => setStep((s) => Math.min(s + 1, 8));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  const screens = [
    { idx: 0, comp: <CS_Welcome key="0" />,           primary: "Los geht's", hint: 'Fortschritt wird automatisch gespeichert.' },
    { idx: 1, comp: <CS_Vorhaben key="1" />,          primary: 'Weiter' },
    { idx: 2, comp: <CS_Adresse key="2" />,           primary: 'Weiter' },
    { idx: 3, comp: <CS_Gebaeude key="3" />,          primary: 'Weiter' },
    { idx: 4, comp: <CS_Heizung key="4" />,           primary: 'Weiter' },
    { idx: 5, comp: <CS_Dokumente key="5" />,         primary: 'Weiter' },
    { idx: 6, comp: <CS_Termin key="6" />,            primary: 'Termin bestätigen' },
    { idx: 7, comp: <CS_Zusammenfassung key="7" />,   primary: 'Anfrage absenden', hint: 'Sie erhalten innerhalb von 5 Min. ein Angebot.' },
    { idx: 8, comp: <CS_Erfolg key="8" onRestart={() => setStep(0)} />, primary: null },
  ];
  const cur = screens[step];

  // progress: step 1..7 → show step / total ; 0 = none ; 8 = none
  const progressStep = step >= 1 && step <= 7 ? step : 0;

  return (
    <IPhone>
      {step < 8 && (
        <CustomerHeader step={progressStep} total={total} onBack={back} />
      )}
      <div key={cur.idx} className="col grow fade-up" style={{ minHeight: 0 }}>
        {cur.comp}
      </div>
      {cur.primary && (
        <CustomerFooter onContinue={next} primaryLabel={cur.primary} hint={cur.hint} />
      )}
    </IPhone>
  );
}

/* ───────── Mobile view container ───────── */

function MobileView({ onJumpTo }) {
  return (
    <div className="fade-up" style={{
      minHeight: 'calc(100vh - 60px)',
      background: 'var(--bg)',
      padding: '32px 24px 64px',
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="row middle between" style={{ marginBottom: 6 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 4 }}>Mobile App</div>
            <div className="h-1">Beraterin & Kundin — der gleiche Workflow, zwei Sichten.</div>
          </div>
          <div className="row gap-6">
            <button className="btn subtle sm" onClick={() => onJumpTo('emails')}>
              <Icon name="mail" size={13} /> E-Mails ansehen
            </button>
            <button className="btn subtle sm" onClick={() => onJumpTo('dashboard')}>
              <Icon name="grid" size={13} /> Dashboard ansehen
            </button>
          </div>
        </div>
        <div className="small muted" style={{ marginBottom: 32, maxWidth: 720 }}>
          Links: Franziska erfasst im Telefonat einen Lead. Rechts: Thomas füllt das verschickte Formular auf seinem Handy aus. Tippen Sie sich durch die Schritte.
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 56,
          alignItems: 'start',
          justifyItems: 'center',
        }}>
          <div className="col center">
            <div className="row middle gap-8" style={{ marginBottom: 18 }}>
              <span className="pill solid">1</span>
              <span className="small bold">Berater-App</span>
              <span className="tiny faint">Quick-Capture im Telefonat</span>
            </div>
            <AdvisorPhone onJumpToDashboard={() => onJumpTo('dashboard')} />
            <div className="tiny faint" style={{ marginTop: 14, textAlign: 'center', maxWidth: 280 }}>
              Tippen Sie auf <b style={{ color: 'var(--ink)' }}>„E-Mail senden"</b>, um den Flow zu durchlaufen.
            </div>
          </div>

          <div className="col center">
            <div className="row middle gap-8" style={{ marginBottom: 18 }}>
              <span className="pill solid">2</span>
              <span className="small bold">Kunden-Formular</span>
              <span className="tiny faint">aufgerufen aus der E-Mail</span>
            </div>
            <CustomerPhone />
            <div className="tiny faint" style={{ marginTop: 14, textAlign: 'center', maxWidth: 280 }}>
              7-Schritt-Formular. Mit <b style={{ color: 'var(--ink)' }}>„Weiter"</b> springen Sie zum nächsten Screen.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.MobileView = MobileView;