// Page: Zahlungen

function ZahlungenPage() {
  const [tab, setTab] = React.useState('Übersicht');
  const subtabs = ['Übersicht', 'Unterhalt', 'Sonderbedarf', 'Ausgaben', 'Verlauf'];
  const rows = [
    { date: '01.02.2026', type: 'Kindesunterhalt', cat: 'Kindesunterhalt', amt: '429 €', stat: 'geplant', conf: '–' },
    { date: '01.03.2026', type: 'Kindesunterhalt', cat: 'Kindesunterhalt', amt: '429 €', stat: 'bezahlt', conf: 'Bestätigt von Vater' },
    { date: '15.03.2026', type: 'Sonderbedarf', cat: 'Nachhilfe', amt: '120 €', stat: 'bezahlt', conf: 'Bestätigt von Mutter' },
    { date: '01.04.2026', type: 'Kindesunterhalt', cat: 'Kindesunterhalt', amt: '429 €', stat: 'bezahlt', conf: 'Bestätigt von Vater' },
    { date: '01.05.2026', type: 'Kindesunterhalt', cat: 'Kindesunterhalt', amt: '429 €', stat: 'bezahlt', conf: 'Bestätigt von Mutter' },
    { date: '15.05.2026', type: 'Sonderbedarf', cat: 'Sportverein', amt: '80 €', stat: 'faellig', conf: 'Nicht bestätigt' },
  ];
  const cats = [
    { ic: <IcEuro size={14} />, nm: 'Kindesunterhalt', amt: '429 € / Monat' },
    { ic: <IcSparkle size={14} />, nm: 'Sonderbedarf', amt: '120 € / Monat' },
    { ic: <IcSchool size={14} />, nm: 'Nachhilfe', amt: '80 € / Monat' },
    { ic: <IcActivity size={14} />, nm: 'Sportverein', amt: '50 € / Monat' },
    { ic: <IcHome size={14} />, nm: 'Kita-Beitrag', amt: '145 € / Monat' },
  ];
  return (
    <main className="main">
      <div className="page-head">
        <div className="page-title">Zahlungen</div>
        <button className="ghost-btn" style={{height: 36, padding: '0 14px'}}>
          <IcPlus size={14} stroke={2}/> Zahlung hinzufügen
        </button>
      </div>

      <div className="subtabs">
        {subtabs.map(s => (
          <button key={s} className={`subtab ${s === tab ? 'on' : ''}`} onClick={() => setTab(s)}>{s}</button>
        ))}
      </div>

      <div className="page-grid-pay">
        <div>
          <div className="summary-row">
            <div className="summary-card">
              <div className="ico-box"><IcCalendar size={14} /></div>
              <div className="lbl">Nächste Zahlung</div>
              <div className="val">429 €</div>
              <div className="sub">Fällig am 01.06.2026 <span className="stat-pill geplant" style={{marginLeft:6}}>Geplant</span></div>
            </div>
            <div className="summary-card">
              <div className="ico-box"><IcBell size={14} /></div>
              <div className="lbl">Zahlungserinnerung aktiv</div>
              <div className="sub" style={{marginTop: 6, fontSize: 13}}>Eine Erinnerung wird 3 Tage vor Fälligkeit versendet.</div>
              <div className="actions">
                <button className="ghost-btn">Erinnerung verwalten</button>
              </div>
            </div>
            <div className="summary-card">
              <div className="ico-box"><IcCheckCircle size={14} /></div>
              <div className="lbl">Zahlungsübersicht (Mai 2026)</div>
              <div className="sub" style={{marginTop:4, fontSize: 13}}>3 von 4 Zahlungen erledigt</div>
              <div className="progress-track"><div className="progress-fill" style={{width: '75%'}}/></div>
              <div className="progress-meta"><span>&nbsp;</span><span>75 %</span></div>
            </div>
          </div>

          <div className="table">
            <div className="table-head">
              <div className="table-title">Zahlungsübersicht</div>
            </div>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Datum</th><th>Typ</th><th>Kategorie</th><th>Betrag</th><th>Status</th><th>Bestätigung</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r, i) => (
                  <tr key={i}>
                    <td>{r.date}</td>
                    <td>{r.type}</td>
                    <td>{r.cat}</td>
                    <td className="num">{r.amt}</td>
                    <td><span className={`stat-pill ${r.stat}`}>{r.stat === 'geplant' ? 'Geplant' : r.stat === 'bezahlt' ? 'Bezahlt' : 'Überfällig'}</span></td>
                    <td>
                      {r.conf === '–' ? (
                        <span style={{color:'var(--ink-400)'}}>–</span>
                      ) : r.conf === 'Nicht bestätigt' ? (
                        <span className="conf no">{r.conf}</span>
                      ) : (
                        <span className="conf">{r.conf} <span className="ic-ok"><IcCheckCircle size={13}/></span></span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="tbl-foot">Alle Zahlungen anzeigen</div>
          </div>

          <div className="secure-bar" style={{marginTop: 16}}>
            <div className="ic"><IcShield size={16}/></div>
            <div>
              <div className="nm">Ihre Zahlungen sind sicher und geschützt</div>
              <div className="ds">Alle Transaktionen werden verschlüsselt gespeichert und sind nur für die beteiligten Elternteile einsehbar.</div>
            </div>
            <a className="lk" href="#">Mehr zum Datenschutz →</a>
          </div>
        </div>

        <div>
          <div className="summary-card">
            <div className="lbl" style={{textTransform:'uppercase',letterSpacing:'0.07em',fontWeight:600,fontSize:11.5,marginBottom:8}}>Zahlungskategorien</div>
            <div className="cat-list">
              {cats.map((c, i) => (
                <div key={i} className="cat-row">
                  <div className="ico">{c.ic}</div>
                  <div>
                    <div className="nm">{c.nm}</div>
                    <div className="am">{c.amt}</div>
                  </div>
                  <span className="chev"><IcChevronRight size={14}/></span>
                </div>
              ))}
            </div>
            <div className="total-card">
              <div className="l">Gesamt (durchschnittlich)</div>
              <div className="v">809 € / Monat</div>
            </div>
          </div>
          <div className="summary-card" style={{marginTop: 14}}>
            <div className="lbl" style={{textTransform:'uppercase',letterSpacing:'0.07em',fontWeight:600,fontSize:11.5,marginBottom:8}}>Dokumente & Nachweise</div>
            <div className="upload-card">
              <div className="l">Lade hier Zahlungsnachweise hoch.<br/>Diese sind nur für Sie und den anderen Elternteil sichtbar.</div>
              <button className="ghost-btn" style={{width:'100%',height:34,justifyContent:'center'}}>
                <IcUpload size={13}/> Nachweis hochladen
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}

// Page: Vereinbarungen
function VereinbarungenPage() {
  const [tab, setTab] = React.useState('Betreuung & Umgang');
  const subtabs = ['Betreuung & Umgang', 'Ferien & Feiertage', 'Übergaben', 'Kommunikation', 'Finanzielles', 'Sonstiges'];
  return (
    <main className="main">
      <div className="page-head">
        <div className="page-title">Vereinbarungen</div>
        <button className="ghost-btn" style={{height: 36, padding: '0 14px'}}>
          <IcPlus size={14} stroke={2}/> Vereinbarung hinzufügen
        </button>
      </div>
      <div className="subtabs">
        {subtabs.map(s => (
          <button key={s} className={`subtab ${s === tab ? 'on' : ''}`} onClick={() => setTab(s)}>{s}</button>
        ))}
      </div>

      <div className="agree-grid">
        <div className="agree-main">
          <h3>Aktuelle Betreuungsvereinbarung</h3>
          <div className="agree-card">
            <div className="head">
              <div className="name">Wechselmodell 50/50</div>
              <span className="pill-active">Aktiv</span>
            </div>
            <div className="seit">Seit 01.01.2025</div>
            <div className="desc">Die Kinder halten sich abwechselnd jeweils im gleichen Takt bei beiden Elternteilen auf.</div>

            <div className="week-block">
              <div className="wk-head">
                Regelmäßiger Wochenplan <IcChevronDown size={13}/>
              </div>
              <div className="week-row">
                <div className="wk">Woche 1</div>
                <div className="days m"><span>Mo</span><span>Di</span><span>Mi</span></div>
                <div className="who">bei Mutter</div>
              </div>
              <div className="week-row">
                <div className="wk"></div>
                <div className="days v"><span>Do</span><span>Fr</span><span>Sa</span><span>So</span></div>
                <div className="who">bei Vater</div>
              </div>
              <div className="week-row">
                <div className="wk">Woche 2</div>
                <div className="days v"><span>Mo</span><span>Di</span><span>Mi</span></div>
                <div className="who">bei Vater</div>
              </div>
              <div className="week-row">
                <div className="wk"></div>
                <div className="days m"><span>Do</span><span>Fr</span><span>Sa</span><span>So</span></div>
                <div className="who">bei Mutter</div>
              </div>
            </div>

            <div className="uebergabe-bar">
              <div style={{fontWeight: 600, color:'var(--ink-900)'}}>Übergaben</div>
              <span style={{color:'var(--ink-500)'}}>Freitags um 17:00 Uhr am Parkplatz Bürgerpark</span>
              <span className="arrow"><IcChevronRight size={14}/></span>
            </div>
          </div>
          <button className="add-btn" style={{marginTop: 14}}>
            Alle Vereinbarungen anzeigen <IcChevronDown size={13}/>
          </button>
        </div>

        <div className="agree-side">
          <h3>Nächste besondere Termine</h3>
          <div className="term-row">
            <div className="ico"><IcCalendar size={14}/></div>
            <div>
              <div className="nm">Christi Himmelfahrt</div>
              <div className="when">Do. 14. Mai 2026<br/>Einzelner Tag · Feiertag</div>
            </div>
            <div className="where">Bei Vater</div>
          </div>
          <div className="term-row">
            <div className="ico holiday"><IcLeaf size={14}/></div>
            <div>
              <div className="nm">Pfingstferien Hessen</div>
              <div className="when">26. Mai – 5. Juni 2026<br/>11 Nächte · Mi 17:00 – So 17:00 Uhr</div>
            </div>
            <div className="where">Bei Vater</div>
          </div>
          <div className="term-row">
            <div className="ico summer"><IcSun size={14}/></div>
            <div>
              <div className="nm">Sommerferien</div>
              <div className="when">24. Juli – 04. August 2026<br/>12 Nächte · Mi 17:00 – Mo 10:00 Uhr</div>
            </div>
            <div className="where">Bei Vater</div>
          </div>
          <button className="add-btn" style={{marginTop: 12}}>
            Alle besonderen Termine anzeigen <IcChevronRight size={13}/>
          </button>
        </div>
      </div>

      <div className="principles">
        <div className="principle">
          <div className="ic"><IcShield size={14}/></div>
          <div className="nm">Gemeinsam bestätigt</div>
          <div className="desc">Vereinbarungen werden von beiden Elternteilen bestätigt und sind transparent dokumentiert. Zur Orientierung, nicht als Anwaltsersatz.</div>
        </div>
        <div className="principle">
          <div className="ic"><IcRefresh size={14}/></div>
          <div className="nm">Flexibel anpassbar</div>
          <div className="desc">Änderungen vorschlagen, abstimmen und gemeinsam aktualisieren — mit vollem Änderungsverlauf.</div>
        </div>
        <div className="principle">
          <div className="ic"><IcDoc size={14}/></div>
          <div className="nm">Nachvollziehbar</div>
          <div className="desc">Jede Anpassung wird strukturiert protokolliert und bleibt jederzeit einsehbar.</div>
        </div>
        <div className="principle">
          <div className="ic"><IcUsers size={14}/></div>
          <div className="nm">Im Sinne der Kinder</div>
          <div className="desc">Stabilität, Verlässlichkeit und ein ruhiger Alltag für Ihre Kinder.</div>
        </div>
      </div>
    </main>
  );
}

// Page: Dokumente
function DokumentePage() {
  const [tab, setTab] = React.useState('Alle Dokumente');
  const subtabs = ['Alle Dokumente', 'Verträge', 'Nachweise', 'Berichte', 'Sonstiges'];
  const docs = [
    { kind: 'pdf', nm: 'Betreuungsvereinbarung', tg: 'Verträge', dt: '01.05.2026', desc: 'Unsere aktuelle Betreuungsvereinbarung vom 01.05.2026.' },
    { kind: 'doc', nm: 'Sonderbedarf Nachhilfe', tg: 'Nachweise', dt: '15.04.2026', desc: 'Nachweis über die Nachhilfekosten Mathematik – April 2026.' },
    { kind: 'pdf', nm: 'Unterhaltsberechnung', tg: 'Berichte', dt: '01.04.2026', desc: 'Berechnung des Kindesunterhalts ab 01.04.2026.' },
    { kind: 'gen', nm: 'Kita-Bescheid', tg: 'Nachweise', dt: '10.03.2026', desc: 'Kostenbescheid der Kita Sonnenblume März 2026.' },
    { kind: 'xls', nm: 'Zahlungsnachweis 04/2026', tg: 'Nachweise', dt: '02.05.2026', desc: 'Überweisung Kindesunterhalt April 2026.' },
    { kind: 'gen', nm: 'Schulbescheinigung', tg: 'Nachweise', dt: '05.03.2026', desc: 'Aktuelle Schulbescheinigung Grundschule am Park.' },
  ];
  return (
    <main className="main">
      <div className="page-head">
        <div className="page-title">Dokumente</div>
        <button className="cta-primary" style={{height: 36}}>
          <IcPlus size={14} stroke={2}/> Dokument hochladen
        </button>
      </div>
      <div className="subtabs">
        {subtabs.map(s => (
          <button key={s} className={`subtab ${s === tab ? 'on' : ''}`} onClick={() => setTab(s)}>{s}</button>
        ))}
      </div>

      <div className="docs-toolbar">
        <div className="search-wrap">
          <IcSearch size={14}/>
          <input className="search-input" placeholder="Dokumente suchen…" />
        </div>
        <button className="ghost-btn">Kategorie: Alle <IcChevronDown size={13}/></button>
        <button className="ghost-btn">Sortieren: Neueste zuerst <IcChevronDown size={13}/></button>
        <button className="ghost-btn"><IcFilter size={13}/> Filter</button>
      </div>

      <div className="docs-grid">
        {docs.map((d, i) => (
          <div key={i} className="doc-card">
            <div className="doc-head">
              <div className={`doc-icon ${d.kind}`}>{d.kind === 'gen' ? <IcDoc size={20} stroke={1.6}/> : d.kind.toUpperCase()}</div>
              <div className="doc-meta">
                <div className="nm">{d.nm}</div>
                <div className="tg">{d.tg}</div>
                <div className="dt">{d.dt}</div>
              </div>
            </div>
            <div className="doc-desc">{d.desc}</div>
            <div className="doc-actions">
              <button className="preview-btn"><IcEye size={13}/> Vorschau</button>
              <button className="ico-btn"><IcDownload size={13}/></button>
              <button className="ico-btn"><IcDots size={13}/></button>
            </div>
          </div>
        ))}
      </div>

      <div style={{textAlign:'center',marginTop:14}}>
        <button className="add-btn" style={{maxWidth: 260, margin: '0 auto'}}>
          Alle Dokumente anzeigen <IcChevronDown size={13}/>
        </button>
      </div>

      <div className="secure-bar" style={{marginTop: 16}}>
        <div className="ic"><IcCheckCircle size={16} stroke={2}/></div>
        <div>
          <div className="nm">Sicher & vertraulich</div>
          <div className="ds">Alle Dokumente sind verschlüsselt gespeichert und nur für Sie und den anderen Elternteil sichtbar.</div>
        </div>
        <a className="lk" href="#">Mehr zum Datenschutz →</a>
      </div>
    </main>
  );
}

// Page: Nachrichten
function NachrichtenPage() {
  const threads = [
    { id: 'vater', nm: 'Vater', tm: '10:35', preview: 'Danke, die Änderungen passen für mich.', avatar: 'V', count: 2, active: true },
    { id: 'system', nm: 'System', tm: 'Gestern', preview: 'Erinnerung: Übergabe in 2 Tagen', avatar: <IcBell size={14}/>, av: 'system', count: 1 },
    { id: 'ferien', nm: 'Ferienplanung Sommer', tm: '15.05.2026', preview: 'Vorschlag für die Sommerferien 2026', avatar: <IcCalendar size={14}/>, av: 'cal' },
    { id: 'team', nm: 'UnterhaltsPlan Team', tm: '12.05.2026', preview: 'Tipps zur Nutzung von Nachrichten', avatar: <IcCheckCircle size={14}/>, av: 'team' },
    { id: 'mutter', nm: 'Mutter', tm: '10.05.2026', preview: 'Danke für die Bestätigung.', avatar: 'M' },
  ];
  return (
    <main className="main">
      <div className="page-head">
        <div className="page-title">Nachrichten</div>
      </div>

      <div className="msg-grid">
        <div className="msg-list">
          <div className="msg-search">
            <div className="search-wrap">
              <IcSearch size={14}/>
              <input className="search-input" placeholder="Nachrichten durchsuchen…" />
            </div>
            <button className="icon-btn" style={{height:34,width:34,borderRadius:8}}><IcFilter size={13}/></button>
          </div>
          <div className="msg-rows">
            {threads.map(t => (
              <div key={t.id} className={`msg-row ${t.active ? 'active' : ''}`}>
                <div className={`msg-avatar ${t.av || ''}`}>{t.avatar}</div>
                <div className="body">
                  <div className="top">
                    <span className="nm">{t.nm}</span>
                    <span className="tm">{t.tm}</span>
                  </div>
                  <div className="preview">{t.preview}</div>
                  {t.count && <span className="badge">{t.count}</span>}
                </div>
              </div>
            ))}
          </div>
          <div className="msg-list-foot"><IcDoc size={13} style={{verticalAlign:-2,marginRight:4}}/> Archivierte Unterhaltungen anzeigen</div>
        </div>

        <div className="msg-thread">
          <div className="thread-head">
            <div className="msg-avatar">V</div>
            <div>
              <div className="nm">Vater</div>
              <div className="last">Zuletzt aktiv: heute, 10:35</div>
            </div>
            <div className="right">
              <button className="ghost-btn"><IcPhone size={13}/> Anrufen</button>
              <button className="icon-btn" style={{height:34,width:34,borderRadius:8}}><IcDots size={14}/></button>
            </div>
          </div>

          <div className="thread-body">
            <div className="day-divider"><span>Heute</span></div>

            <div className="bubble-row">
              <div className="bubble-av">V</div>
              <div className="bubble">
                Hallo, ich habe eine kleine Änderung für die Übergabe am 16. Mai vorgeschlagen:
                <div className="embed">
                  <IcCalendar size={14} style={{color:'var(--forest-700)'}}/>
                  <div>
                    <div>Übergabe am 16.05.2026 um 17:00 Uhr</div>
                    <div className="sub">Von Parkplatz am Bürgerpark → Sporthalle Offenbach</div>
                  </div>
                </div>
                <span className="embed-pill">Änderung ansehen</span>
                <span className="tm">10:15</span>
              </div>
            </div>

            <div className="bubble-row me">
              <div className="bubble me">
                Danke für die Änderung.<br/>
                Die neue Übergabe am 16.05. um 17:00 Uhr an der Sporthalle Offenbach passt für uns.<br/><br/>
                Bitte bestätige die Änderung, dann ist sie für uns beide gemeinsam bestätigt.
                <span className="tm">10:22  ✓✓</span>
              </div>
              <div className="bubble-av me">M</div>
            </div>

            <div className="bubble-row">
              <div className="bubble-av">V</div>
              <div className="bubble">
                Alles klar, ich habe die Änderung bestätigt. Danke!
                <div className="ok-banner"><span className="ic"><IcCheckCircle size={13}/></span> Änderung bestätigt</div>
                <span className="tm">10:30</span>
              </div>
            </div>

            <div className="bubble-row me">
              <div className="bubble me">
                Super, danke!<br/>
                Dann ist die Änderung bestätigt. Wir sehen uns am Samstag. 🙂
                <span className="tm">10:35  ✓✓</span>
              </div>
              <div className="bubble-av me">M</div>
            </div>
          </div>

          <div className="composer">
            <div className="composer-row">
              <button className="composer-ico"><IcAttach size={14}/></button>
              <input placeholder="Nachricht schreiben…" />
              <button className="composer-ico"><IcSmile size={14}/></button>
              <button className="composer-send"><IcSend size={14} stroke={2}/></button>
            </div>
            <div className="composer-foot">
              <IcLock size={11}/> Nachrichten sind nur für Sie und den anderen Elternteil sichtbar.
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { ZahlungenPage, VereinbarungenPage, DokumentePage, NachrichtenPage });
// Additional pages defined below.