// ============================================================
// LSPD — Öffentliche Seiten
// ============================================================

// striped image placeholder
function ImgPlaceholder({ label, className = '', rounded = 'rounded-lg' }) {
  return (
    <div
      className={`relative overflow-hidden grid place-items-center ${rounded} ${className}`}
      style={{
        background: 'repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, rgba(255,255,255,.015) 12px 24px), var(--c-card)',
        border: '1px solid var(--c-border)',
      }}
    >
      <span className="font-mono text-[11px] uppercase tracking-widest text-muted px-2 text-center">{label}</span>
    </div>
  );
}

// ---- Public NavBar ----
function NavBar({ go, page, alarm, onAlarm }) {
  const [open, setOpen] = useState(false);
  const links = [
    ['Startseite', 'home'], ['Mitarbeiterliste', 'home#team'], ['Ticketsystem', 'tickets'], ['Galerie', 'home#galerie'],
  ];
  const SirenBtn = ({ full }) => (
    <button onClick={onAlarm} title="Police-Alarm-Modus"
      className={`relative grid place-items-center h-9 ${full ? 'w-full gap-2 flex' : 'w-9'} rounded-md border transition-colors ${alarm ? 'text-white border-transparent' : 'text-muted border-line hover:text-ink'}`}
      style={alarm ? { background: 'linear-gradient(100deg, #2A6FDB 0 50%, #E5384E 50% 100%)' } : {}}>
      <Icon name="Siren" size={17} />{full && <span className="text-sm font-semibold">Alarm-Modus</span>}
      {alarm && !full && <span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-danger" style={{ animation: 'pulse-ring 1s infinite' }} />}
    </button>
  );
  return (
    <header className="sticky top-0 z-50 glass border-b border-line">
      <div className="mx-auto max-w-7xl px-5 h-16 flex items-center justify-between gap-4">
        <button className="flex items-center gap-3" onClick={() => go('home')}>
          <Crest size={40} />
          <div className="text-left leading-tight">
            <div className="font-extrabold tracking-tight">Los Santos Police Department</div>
            <div className="text-[10px] uplabel">To Protect and To Serve · San Andreas</div>
          </div>
        </button>
        <nav className="hidden lg:flex items-center gap-1">
          {links.map(([l, t]) => (
            <button key={l} onClick={() => go(t)} className="px-3 h-9 rounded-md text-sm font-semibold text-muted hover:text-ink hover:bg-white/5 transition-colors">{l}</button>
          ))}
        </nav>
        <div className="hidden lg:flex items-center gap-2">
          {onAlarm && <SirenBtn />}
          <Btn icon="LogIn" notch onClick={() => go('login')}>Mitarbeiter-Login</Btn>
        </div>
        <button className="lg:hidden text-ink" onClick={() => setOpen(o => !o)}><Icon name={open ? 'X' : 'Menu'} size={24} /></button>
      </div>
      {open && (
        <div className="lg:hidden border-t border-line bg-card px-5 py-3 flex flex-col gap-1">
          {links.map(([l, t]) => (
            <button key={l} onClick={() => { go(t); setOpen(false); }} className="text-left px-3 h-10 rounded-md text-sm font-semibold text-muted hover:text-ink hover:bg-white/5">{l}</button>
          ))}
          {onAlarm && <div className="mt-2"><SirenBtn full /></div>}
          <Btn icon="LogIn" notch className="mt-2" onClick={() => { go('login'); setOpen(false); }}>Mitarbeiter-Login</Btn>
        </div>
      )}
    </header>
  );
}

function AnnouncementBanner({ site }) {
  const [open, setOpen] = useState(true);
  const text = site?.announcement?.body || site?.announcement?.title || site?.announcement;
  if (!open || !text) return null;
  return (
    <div className="bg-accent text-white">
      <div className="mx-auto max-w-7xl px-5 h-10 flex items-center justify-between gap-3 text-[13px]">
        <div className="flex items-center gap-2 min-w-0">
          <Icon name="Megaphone" size={15} className="shrink-0" />
          <span className="font-bold uppercase tracking-wide shrink-0 whitespace-nowrap">Aktuelle Ankündigung:</span>
          <span className="truncate opacity-90">{text}</span>
        </div>
        <button onClick={() => setOpen(false)} className="opacity-80 hover:opacity-100 shrink-0"><Icon name="X" size={16} /></button>
      </div>
    </div>
  );
}

function Hero({ go, site }) {
  const stats = site?.stats || {};
  const v = window.__LSPD_ASSET_V__ || '';
  const bust = (url) => url + (v ? (url.includes('?') ? '&' : '?') + 'v=' + v : '');
  const bannerUrl = bust(site?.heroBannerUrl || site?.buildingUrl || '/img/lspd-banner.png');
  const logoUrl = bust(site?.logoUrl || '/img/lspd-logo-lsb.png');
  return (
    <section className="relative overflow-hidden">
      <div className="absolute inset-0">
        <img src={bannerUrl} alt="" className="absolute inset-0 h-full w-full object-cover object-center scale-105" draggable="false" />
        <div className="absolute inset-0" style={{ background: 'linear-gradient(105deg, rgba(10,22,40,.92) 0%, rgba(10,22,40,.78) 45%, rgba(10,22,40,.55) 100%)' }} />
        <div className="absolute inset-0" style={{ background: 'radial-gradient(90% 70% at 85% 20%, rgba(42,111,219,.18), transparent 60%)' }} />
      </div>
      <div className="absolute inset-0 dotgrid opacity-40" />
      <div className="relative mx-auto max-w-7xl px-5 py-20 md:py-28 grid md:grid-cols-[1.3fr_1fr] items-center gap-10">
        <div>
          <div className="inline-flex items-center gap-2 whitespace-nowrap rounded-full border border-white/15 bg-white/5 px-3 py-1 text-[11px] uplabel text-white/80 fadeup">
            <span className="h-1.5 w-1.5 rounded-full bg-success" /> Im Dienst · 24 / 7 Notruf 110
          </div>
          <h1 className="mt-5 max-w-2xl text-4xl md:text-6xl font-black tracking-tight text-white fadeup" style={{ animationDelay: '60ms' }}>
            Los Santos Police Department
          </h1>
          <p className="mt-4 max-w-lg text-lg text-white/70 fadeup" style={{ animationDelay: '120ms' }}>
            <span className="font-semibold text-white/90">To Protect and To Serve.</span> Fiktive Polizeibehörde des Bundesstaates San Andreas auf MoonlightV.
          </p>
          <div className="mt-8 flex flex-wrap gap-3 fadeup" style={{ animationDelay: '180ms' }}>
            <Btn size="lg" icon="ShieldPlus" notch onClick={() => go('bewerbung')}>Jetzt bewerben</Btn>
            <Btn size="lg" variant="outline" iconRight="ArrowRight" className="!text-white !border-white/30" onClick={() => go('tickets')}>Ticket erstellen</Btn>
          </div>
          <div className="mt-10 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-white/70 fadeup" style={{ animationDelay: '240ms' }}>
            {[
              `${stats.staff || '41'} Aktive Beamte`,
              `${stats.departments || stats.divisions || '5'} Divisionen`,
              stats.fahndungen != null ? `${stats.fahndungen} Fahndungen aktiv` : 'Seit 2024 im Dienst',
            ].map((s, i) => (
              <div key={s} className="flex items-center gap-2">
                {i > 0 && <span className="h-3 w-px bg-white/20" />}
                <span>{s}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="hidden md:grid place-items-center fadeup" style={{ animationDelay: '120ms' }}>
          <img src={logoUrl} alt="LSPD — Los Santos Police Department" className="w-64 lg:w-80 object-contain drop-shadow-[0_12px_40px_rgba(0,0,0,.55)]" draggable="false" />
        </div>
      </div>
    </section>
  );
}

function StatsBar({ site }) {
  const s = site?.stats || {};
  const stats = [
    { v: String(s.staff || '41'), l: 'Aktive Beamte', icon: 'Users' },
    { v: String(s.departments || s.divisions || '5'), l: 'Divisionen', icon: 'Building2' },
    { v: String(s.fahndungen || s.wanted || '34'), l: 'Fahndungen aktiv', icon: 'Siren' },
    { v: String(s.serviceYears || s.duty_years || '24'), l: 'Dienstjahre gesamt', icon: 'Clock' },
  ];
  return (
    <section className="mx-auto max-w-7xl px-5 -mt-6 relative z-10">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {stats.map((s, i) => (
          <Card key={s.l} glass className="p-5 fadeup" style={{ animationDelay: `${i * 60}ms` }}>
            <Icon name={s.icon} size={20} className="text-accent" />
            <div className="mt-3 text-3xl font-extrabold">{s.v}</div>
            <div className="mt-0.5 text-xs text-muted">{s.l}</div>
          </Card>
        ))}
      </div>
    </section>
  );
}

const LEADERSHIP_FILTERS = [
  { id: 'all', label: 'Alle' },
  { id: 'fuehrung', label: 'Führung' },
  { id: 'captain', label: 'Captain' },
  { id: 'lieutenant', label: 'Lieutenant' },
  { id: 'sergeant', label: 'Sergeant' },
];

function QuickAccessBar({ site, go }) {
  const links = [
    { label: 'Gesetzbuch', icon: 'Scale', href: site?.gesetzbuch_url, external: true },
    { label: 'Bußgeldkatalog', icon: 'Receipt', href: site?.bussgeld_url, external: true },
    { label: 'Stellenausschreibungen', icon: 'FolderOpen', onClick: () => go('bewerbung') },
    { label: 'Notruf 911', icon: 'Phone', href: 'tel:911', external: true },
  ];
  return (
    <div className="border-y border-line bg-bg2/80">
      <div className="mx-auto max-w-7xl px-5 py-4 flex flex-wrap items-center gap-3 md:gap-5">
        <span className="uplabel text-[10px] text-muted shrink-0">Direktzugriff</span>
        {links.map((l) => {
          const inner = (
            <>
              <Icon name={l.icon} size={16} className="text-accent shrink-0" />
              <span>{l.label}</span>
            </>
          );
          const cls = 'inline-flex items-center gap-2 h-10 px-4 rounded-md border border-line text-sm font-semibold text-muted hover:text-ink hover:border-accent/60 hover:bg-white/[.03] transition-colors';
          if (l.onClick) return <button key={l.label} type="button" onClick={l.onClick} className={cls}>{inner}</button>;
          if (l.href) {
            return (
              <a key={l.label} href={l.href} className={cls} target={l.external && l.href.startsWith('http') ? '_blank' : undefined} rel={l.external && l.href.startsWith('http') ? 'noreferrer' : undefined}>
                {inner}
              </a>
            );
          }
          return <span key={l.label} className={`${cls} opacity-50 cursor-not-allowed`}>{inner}</span>;
        })}
      </div>
    </div>
  );
}

function formatNewsDate(iso) {
  if (!iso) return '';
  try {
    return new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
  } catch { return ''; }
}

function Bekanntmachungen({ site }) {
  const items = site?.news || [];
  if (!items.length) return null;
  const featured = items.find((n) => n.is_featured) || items[0];
  const rest = items.filter((n) => n.id !== featured?.id).slice(0, 2);
  return (
    <section id="news" className="mx-auto max-w-7xl px-5 py-16 scroll-mt-20">
      <Label>Aktuelles</Label>
      <h2 className="mt-2 text-3xl font-extrabold tracking-tight">Bekanntmachungen</h2>
      <div className="mt-8 grid lg:grid-cols-[1.4fr_1fr] gap-4">
        {featured && (
          <Card className="p-6 md:p-8 relative overflow-hidden border-accent/20">
            <div className="absolute top-0 left-0 right-0 h-0.5 bg-accent" />
            <div className="flex flex-wrap items-center gap-2 text-xs text-muted mb-3">
              {featured.tag && <span className="uplabel px-2 py-0.5 rounded bg-accent text-white text-[10px]">{featured.tag}</span>}
              <span>{formatNewsDate(featured.published_at)}</span>
            </div>
            <h3 className="text-xl md:text-2xl font-extrabold tracking-tight">{featured.title}</h3>
            <p className="mt-3 text-sm text-muted leading-relaxed line-clamp-6">{featured.body}</p>
          </Card>
        )}
        <div className="flex flex-col gap-4">
          {rest.map((n) => (
            <Card key={n.id} className="p-5 flex-1">
              <div className="flex flex-wrap items-center gap-2 text-xs text-muted mb-2">
                {n.tag && <span className="uplabel px-2 py-0.5 rounded border border-line text-[10px]">{n.tag}</span>}
                <span>{formatNewsDate(n.published_at)}</span>
              </div>
              <h3 className="font-bold">{n.title}</h3>
              <p className="mt-2 text-sm text-muted leading-relaxed line-clamp-3">{n.body}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function Leadership({ site }) {
  const [filter, setFilter] = React.useState('all');
  const team = React.useMemo(() => {
    if (site?.team && site.team.length) return site.team;
    return LEADERSHIP.map((m) => ({ ...m, dn: m.dn || m.name, filter_group: m.rank === 'chief' || m.rank === 'asst_chief' || m.rank === 'commander' ? 'fuehrung' : m.rank === 'captain' ? 'captain' : m.rank === 'lieutenant' ? 'lieutenant' : 'sergeant' }));
  }, [site?.team]);
  const filtered = React.useMemo(() => {
    if (filter === 'all') return team;
    return team.filter((m) => m.filter_group === filter);
  }, [team, filter]);

  return (
    <section id="team" className="bg-bg2/40 border-y border-line scroll-mt-20">
      <div className="mx-auto max-w-7xl px-5 py-16">
        <Label>Personal</Label>
        <div className="mt-2 flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4">
          <div>
            <h2 className="text-3xl font-extrabold tracking-tight">Führungsstruktur</h2>
            <p className="mt-2 text-sm text-muted max-w-xl">
              Leitende Beamte ab Sergeant I. Angezeigt: Dienstnummer und Dienstgrad.
              Führung: Chief, Assistant Chief, Deputy Chief, Commander und Director of Legal Affairs.
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            {LEADERSHIP_FILTERS.map((f) => (
              <button key={f.id} type="button" onClick={() => setFilter(f.id)}
                className={`uplabel text-[10px] px-3 h-8 rounded-md border transition-colors ${filter === f.id ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink hover:border-muted'}`}>
                {f.label}
              </button>
            ))}
          </div>
        </div>
        {filtered.length === 0 ? (
          <p className="mt-10 text-muted text-sm">Keine Einträge für diesen Filter.</p>
        ) : (
          <div className="mt-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-px bg-line border border-line rounded-lg overflow-hidden">
            {filtered.map((m, i) => {
              const rankKey = m.rank || (m.rank_label && Object.keys(RANKS).find(k => RANKS[k].label === m.rank_label));
              const dn = m.dn || m.employee_number || '[—]';
              const rankLabel = rankKey ? RANKS[rankKey].label : (m.rank_label || 'Beamter');
              return (
                <div key={m.id || i} className="bg-card p-5 text-center hover:bg-white/[.02] transition-colors fadeup" style={{ animationDelay: `${i * 30}ms` }}>
                  <div className="uplabel text-[10px] text-accent mb-3 min-h-[2rem] flex items-center justify-center leading-tight">{rankLabel}</div>
                  <div className="mx-auto h-16 w-16 rounded-md border border-line bg-bg2 overflow-hidden mb-3 grid place-items-center">
                    {m.avatar
                      ? <img src={m.avatar} alt="" className="h-full w-full object-cover" />
                      : <span className="text-xl font-black text-muted/60">{String(dn).replace(/[^\d]/g, '').slice(0, 2) || '—'}</span>}
                  </div>
                  <div className="font-mono text-2xl font-black tracking-wider text-ink">{dn}</div>
                  {m.dept && <div className="mt-1 text-[11px] text-muted uppercase tracking-wide truncate">{m.dept}</div>}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
}

function ApplyTeaser({ go, site }) {
  const open = site?.applicationsOpen !== false;
  return (
    <section className="mx-auto max-w-7xl px-5 pb-20">
      <Card className="relative overflow-hidden p-10 md:p-14" style={{ background: 'linear-gradient(120deg, var(--c-card), var(--c-bg2))' }}>
        <div className="absolute -right-16 -top-16 h-64 w-64 rotate-45 rounded-3xl opacity-20" style={{ background: 'var(--c-accent)' }} />
        <div className="relative max-w-xl">
          <span className={`inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide ${open ? 'text-success' : 'text-muted'}`} style={{ background: open ? '#22C55E1f' : 'rgba(136,153,170,.15)', border: open ? '1px solid #22C55E40' : '1px solid var(--c-border)' }}>
            <span className={`h-1.5 w-1.5 rounded-full ${open ? 'bg-success' : 'bg-muted'}`} /> Bewerbungen: {open ? 'Offen' : 'Geschlossen'}
          </span>
          <h2 className="mt-4 text-3xl md:text-4xl font-black tracking-tight">Werde Teil des LSPD</h2>
          <p className="mt-3 text-muted">Wir suchen engagierte Anwärterinnen und Anwärter, die Los Santos schützen wollen. Keine Vorerfahrung nötig — die Polizeiakademie bildet dich vollständig aus.</p>
          <Btn size="lg" icon="ShieldPlus" className="mt-6" onClick={() => go('bewerbung')} disabled={!open}>Jetzt bewerben</Btn>
        </div>
      </Card>
    </section>
  );
}

function GalleryPreview() {
  const labels = ['Streife Innenstadt', 'Mission Row PD', 'Air Unit', 'Akademie-Training', 'Fuhrpark', 'Team-Foto 2026'];
  return (
    <section id="galerie" className="mx-auto max-w-7xl px-5 pb-20 scroll-mt-20">
      <div className="flex items-end justify-between mb-6">
        <div>
          <Label>Einblicke</Label>
          <h2 className="mt-2 text-3xl font-extrabold tracking-tight">Galerie</h2>
        </div>
        <Btn variant="outline" size="sm" iconRight="ArrowRight">Alle anzeigen</Btn>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {labels.map((l) => (
          <ImgPlaceholder key={l} label={l} className="aspect-[4/3] fadeup" />
        ))}
      </div>
    </section>
  );
}

function Footer({ go }) {
  return (
    <footer className="border-t border-line bg-bg2">
      <div className="mx-auto max-w-7xl px-5 py-12 grid md:grid-cols-3 gap-8">
        <div>
          <div className="flex items-center gap-3">
            <Crest size={40} />
            <div className="font-extrabold leading-tight">Los Santos<br />Police Department</div>
          </div>
          <p className="mt-4 text-sm text-muted max-w-xs">Fiktive Polizeibehörde des Bundesstaates San Andreas im Rahmen des MoonlightV Roleplay-Servers. Kein Bezug zu realen Behörden.</p>
        </div>
        <div>
          <Label>Navigation</Label>
          <div className="mt-3 flex flex-col gap-2 text-sm text-muted">
            {[['Startseite','home'],['Ticketsystem','tickets'],['Bewerbung','bewerbung'],['Mitarbeiter-Login','login']].map(([l,t]) => (
              <button key={l} onClick={() => go(t)} className="text-left hover:text-ink transition-colors w-fit">{l}</button>
            ))}
          </div>
        </div>
        <div>
          <Label>Rechtliches</Label>
          <div className="mt-3 flex flex-col gap-2 text-sm text-muted">
            {['Impressum', 'Datenschutz'].map(l => <a key={l} href="#" className="hover:text-ink transition-colors w-fit">{l}</a>)}
          </div>
        </div>
      </div>
      <div className="border-t border-line">
        <div className="mx-auto max-w-7xl px-5 py-4 text-xs text-muted flex flex-wrap items-center justify-between gap-2">
          <span>© 2026 Los Santos Police Department — To Protect and To Serve.</span>
          <span className="font-mono">Fiktives RP · kein realer Bezug</span>
        </div>
      </div>
    </footer>
  );
}

function HomePage({ go, alarm, onAlarm, site }) {
  return (
    <div className="min-h-screen dotgrid relative z-[2]">
      <NavBar go={go} page="home" alarm={alarm} onAlarm={onAlarm} />
      <AnnouncementBanner site={site} />
      <Hero go={go} site={site} />
      <StatsBar site={site} />
      <QuickAccessBar site={site} go={go} />
      <Bekanntmachungen site={site} />
      <Leadership site={site} />
      <ApplyTeaser go={go} site={site} />
      <GalleryPreview />
      <Footer go={go} />
    </div>
  );
}

// ---- Ticketsystem (öffentlich) ----
function TicketPage({ go, alarm, onAlarm }) {
  const [done, setDone] = useState(false);
  const [ticketId, setTicketId] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [submitErr, setSubmitErr] = useState('');
  const [f, setF] = useState({ kat: '', name: '', tel: '', betreff: '', text: '' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.kat && f.name && f.betreff && f.text.length > 10;

  const submit = async () => {
    if (!valid || submitting) return;
    setSubmitting(true);
    setSubmitErr('');
    try {
      const data = await window.LSPD.submitTicket({
        category: f.kat,
        name: f.name,
        phone: f.tel,
        subject: f.betreff,
        message: f.text,
      });
      setTicketId(data.ticketId || `TK-${data.id}`);
      setDone(true);
    } catch (e) {
      setSubmitErr(e.message || 'Ticket konnte nicht gesendet werden.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen dotgrid relative z-[2]">
      <NavBar go={go} page="tickets" alarm={alarm} onAlarm={onAlarm} />
      <div className="mx-auto max-w-5xl px-5 py-14">
        <button onClick={() => go('home')} className="text-sm text-muted hover:text-ink flex items-center gap-1.5 mb-6"><Icon name="ArrowLeft" size={16} /> Zurück zur Startseite</button>
        <Label>Bürgerservice</Label>
        <h1 className="mt-2 text-4xl font-black tracking-tight">Ticketsystem</h1>
        <p className="mt-2 text-muted max-w-2xl">Erstelle ein Ticket, um eine Anzeige zu erstatten, ein Dokument anzufragen oder ein Anliegen an das LSPD zu richten. Ein Beamter meldet sich IC bei dir.</p>

        <div className="mt-8 grid lg:grid-cols-[1.4fr_1fr] gap-6">
          {/* Formular */}
          <Card className="p-6 md:p-8">
            {done ? (
              <div className="text-center py-10">
                <div className="mx-auto grid place-items-center h-16 w-16 rounded-full bg-success/15 text-success"><Icon name="Check" size={32} /></div>
                <h3 className="mt-4 text-2xl font-bold">Ticket erstellt!</h3>
                <p className="mt-2 text-muted">Danke, {f.name || 'Bürger'}. Dein Ticket <span className="font-mono text-ink">{ticketId}</span> wurde aufgenommen.</p>
                <Btn className="mt-6" onClick={() => { setDone(false); setTicketId(''); setF({ kat: '', name: '', tel: '', betreff: '', text: '' }); }}>Weiteres Ticket</Btn>
              </div>
            ) : (
              <div className="flex flex-col gap-5">
                <Field label="Kategorie" required>
                  <div className="grid sm:grid-cols-2 gap-2">
                    {TICKET_KATEGORIEN.map(k => (
                      <button key={k.id} onClick={() => set('kat', k.id)} className={`flex items-center gap-2.5 rounded-md border px-3 h-11 text-left transition-all ${f.kat === k.id ? 'border-accent bg-[var(--c-accent-soft)]' : 'border-line hover:border-muted'}`}>
                        <span className="grid place-items-center h-7 w-7 rounded-md shrink-0" style={{ background: `${k.color}1f`, color: k.color }}><Icon name={k.icon} size={16} /></span>
                        <span className="text-sm font-semibold">{k.label}</span>
                      </button>
                    ))}
                  </div>
                </Field>
                <div className="grid sm:grid-cols-2 gap-4">
                  <Field label="Dein Name" required><TextInput value={f.name} onChange={e => set('name', e.target.value)} placeholder="Max Mustermann" /></Field>
                  <Field label="Telefonnummer"><TextInput value={f.tel} onChange={e => set('tel', e.target.value)} placeholder="555-0123" /></Field>
                </div>
                <Field label="Betreff" required><TextInput value={f.betreff} onChange={e => set('betreff', e.target.value)} placeholder="Kurzbeschreibung deines Anliegens" /></Field>
                <Field label="Nachricht" required hint={`${f.text.length} Zeichen`}>
                  <TextArea rows={5} value={f.text} onChange={e => set('text', e.target.value)} placeholder="Schildere dein Anliegen so genau wie möglich …" />
                </Field>
                {submitErr && <p className="text-sm text-danger">{submitErr}</p>}
                <div className="flex justify-end">
                  <Btn icon="Send" disabled={!valid || submitting} onClick={submit}>{submitting ? 'Wird gesendet …' : 'Ticket einreichen'}</Btn>
                </div>
              </div>
            )}
          </Card>

          {/* Status / Info */}
          <div className="flex flex-col gap-4">
            <Card className="p-5">
              <h3 className="font-bold mb-3">So funktioniert's</h3>
              <div className="flex flex-col gap-3">
                {[['1', 'Kategorie wählen', 'Anzeige, Dokument, Beschwerde oder Sonstiges.'], ['2', 'Anliegen schildern', 'Beschreibe deinen Fall mit allen Details.'], ['3', 'Antwort erhalten', 'Ein Beamter meldet sich IC bei dir.']].map(([n, t, d]) => (
                  <div key={n} className="flex gap-3">
                    <span className="grid place-items-center h-7 w-7 rounded-full bg-[var(--c-accent-soft)] text-accent text-[13px] font-bold shrink-0">{n}</span>
                    <div><div className="text-sm font-semibold">{t}</div><div className="text-[12px] text-muted">{d}</div></div>
                  </div>
                ))}
              </div>
            </Card>
            <Card className="p-5">
              <h3 className="font-bold mb-3">Aktuelle Tickets</h3>
              <div className="flex flex-col gap-2">
                {TICKETS.map(t => {
                  const k = TICKET_KATEGORIEN.find(x => x.id === t.kat);
                  return (
                    <div key={t.id} className="flex items-center gap-2.5 rounded-md border border-line bg-bg/40 px-3 py-2.5">
                      <span className="grid place-items-center h-7 w-7 rounded-md shrink-0" style={{ background: `${k.color}1f`, color: k.color }}><Icon name={k.icon} size={15} /></span>
                      <div className="min-w-0 flex-1">
                        <div className="text-[13px] font-semibold truncate">{t.betreff}</div>
                        <div className="text-[11px] text-muted font-mono">{t.id} · {t.date}</div>
                      </div>
                      <span className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded shrink-0" style={{ color: TICKET_STATE_COLOR[t.status], background: `${TICKET_STATE_COLOR[t.status]}1a` }}>{t.status}</span>
                    </div>
                  );
                })}
              </div>
            </Card>
          </div>
        </div>
      </div>
      <Footer go={go} />
    </div>
  );
}

// ---- Bewerbungsseite (mehrstufig) ----
function BewerbungPage({ go, alarm, onAlarm, site }) {
  const [step, setStep] = useState(0);
  const [done, setDone] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitErr, setSubmitErr] = useState('');
  const [f, setF] = useState({ vorname: '', nachname: '', tel: '', alter: '', dept: '', lic: [], vorerf: '', vorbestraft: false, motivation: '', infos: '' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const toggleLic = (l) => setF(s => ({ ...s, lic: s.lic.includes(l) ? s.lic.filter(x => x !== l) : [...s.lic, l] }));
  const steps = ['Persönliches', 'Qualifikation', 'Motivation'];
  const licenses = [['PKW','Car'],['Motorrad','Bike'],['LKW','Truck'],['Waffenschein','Crosshair'],['Flugschein','Plane'],['Boot','Sailboat']];
  const motivOk = f.motivation.length >= 150;
  const applicationsOpen = site?.applicationsOpen !== false;

  const submit = async () => {
    if (!motivOk || submitting) return;
    setSubmitting(true);
    setSubmitErr('');
    try {
      await window.LSPD.submitBewerbung({
        name: `${f.vorname} ${f.nachname}`.trim(),
        age: f.alter,
        phone: f.tel,
        motivation: f.motivation,
        experience: f.vorerf,
        form_data: { dept: f.dept, lic: f.lic, vorbestraft: f.vorbestraft, infos: f.infos },
      });
      setDone(true);
    } catch (e) {
      setSubmitErr(e.message || 'Bewerbung konnte nicht gesendet werden.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen dotgrid relative z-[2]">
      <NavBar go={go} page="bewerbung" alarm={alarm} onAlarm={onAlarm} />
      <div className="mx-auto max-w-3xl px-5 py-14">
        <button onClick={() => go('home')} className="text-sm text-muted hover:text-ink flex items-center gap-1.5 mb-6"><Icon name="ArrowLeft" size={16} /> Zurück zur Startseite</button>
        <Label>Karriere beim LSPD</Label>
        <h1 className="mt-2 text-4xl font-black tracking-tight">Bewerbung einreichen</h1>
        <p className="mt-2 text-muted">Fülle alle Felder gewissenhaft aus. Die Personalleitung meldet sich IC bei dir.</p>

        {!applicationsOpen && (
          <Card className="mt-6 p-5 border-warning/40 text-warning">Bewerbungen sind derzeit geschlossen.</Card>
        )}

        {/* Progress */}
        <div className="mt-8 flex items-center gap-2">
          {steps.map((s, i) => (
            <React.Fragment key={s}>
              <div className="flex items-center gap-2">
                <div className={`grid place-items-center h-8 w-8 rounded-full text-[13px] font-bold transition-colors ${i <= step ? 'bg-accent text-white' : 'bg-card border border-line text-muted'}`}>{i < step ? <Icon name="Check" size={16} /> : i + 1}</div>
                <span className={`text-[13px] font-semibold hidden sm:block ${i <= step ? 'text-ink' : 'text-muted'}`}>{s}</span>
              </div>
              {i < steps.length - 1 && <div className={`flex-1 h-px ${i < step ? 'bg-accent' : 'bg-line'}`} />}
            </React.Fragment>
          ))}
        </div>

        {applicationsOpen && <Card className="mt-6 p-6 md:p-8">
          {done ? (
            <div className="text-center py-10">
              <div className="mx-auto grid place-items-center h-16 w-16 rounded-full bg-success/15 text-success"><Icon name="Check" size={32} /></div>
              <h3 className="mt-4 text-2xl font-bold">Bewerbung eingegangen!</h3>
              <p className="mt-2 text-muted">Danke, {f.vorname || 'Anwärter'}. Deine Bewerbung wurde an die Personalleitung weitergeleitet.</p>
              <Btn className="mt-6" onClick={() => go('home')}>Zur Startseite</Btn>
            </div>
          ) : (
            <>
              {step === 0 && (
                <div className="grid sm:grid-cols-2 gap-4">
                  <Field label="Vorname" required><TextInput value={f.vorname} onChange={e => set('vorname', e.target.value)} placeholder="Max" /></Field>
                  <Field label="Nachname" required><TextInput value={f.nachname} onChange={e => set('nachname', e.target.value)} placeholder="Mustermann" /></Field>
                  <Field label="Telefonnummer" required><TextInput value={f.tel} onChange={e => set('tel', e.target.value)} placeholder="555-0143" /></Field>
                  <Field label="Alter (IC)" required><TextInput type="number" value={f.alter} onChange={e => set('alter', e.target.value)} placeholder="27" /></Field>
                  <div className="sm:col-span-2">
                    <Field label="Gewünschte Division" required>
                      <Select value={f.dept} onChange={e => set('dept', e.target.value)}>
                        <option value="">Bitte wählen …</option>
                        {DEPARTMENTS.map(d => <option key={d} value={d}>{d}</option>)}
                      </Select>
                    </Field>
                  </div>
                </div>
              )}
              {step === 1 && (
                <div className="flex flex-col gap-5">
                  <Field label="Führerscheine & Lizenzen" hint="Mehrfachauswahl möglich">
                    <div className="flex flex-wrap gap-2">
                      {licenses.map(([l, ic]) => <Chip key={l} icon={ic} active={f.lic.includes(l)} onClick={() => toggleLic(l)}>{l}</Chip>)}
                    </div>
                  </Field>
                  <Field label="Vorerfahrung" hint="Frühere Tätigkeiten im Sicherheitsbereich (optional)">
                    <TextArea rows={3} value={f.vorerf} onChange={e => set('vorerf', e.target.value)} placeholder="z. B. Security-Erfahrung, frühere LSPD-Dienstzeit …" />
                  </Field>
                  <Field label="Vorbestraft?">
                    <Toggle checked={f.vorbestraft} onChange={v => set('vorbestraft', v)} />
                  </Field>
                </div>
              )}
              {step === 2 && (
                <div className="flex flex-col gap-5">
                  <Field label="Motivation" required hint={`${f.motivation.length} / 150 Zeichen mindestens`}>
                    <TextArea rows={5} value={f.motivation} onChange={e => set('motivation', e.target.value)} placeholder="Warum möchtest du Teil des LSPD werden?" />
                    <div className="mt-1.5 h-1 rounded-full bg-line overflow-hidden">
                      <div className="h-full rounded-full transition-all" style={{ width: `${Math.min(100, f.motivation.length / 150 * 100)}%`, background: motivOk ? '#22C55E' : 'var(--c-accent)' }} />
                    </div>
                  </Field>
                  <Field label="Weitere Infos" hint="Optional">
                    <TextArea rows={3} value={f.infos} onChange={e => set('infos', e.target.value)} placeholder="Erreichbarkeit IC, sonstige Anmerkungen …" />
                  </Field>
                </div>
              )}

              {submitErr && <p className="mt-4 text-sm text-danger">{submitErr}</p>}
              <div className="mt-8 flex items-center justify-between">
                <Btn variant="ghost" icon="ArrowLeft" onClick={() => step === 0 ? go('home') : setStep(step - 1)}>Zurück</Btn>
                {step < 2
                  ? <Btn iconRight="ArrowRight" onClick={() => setStep(step + 1)}>Weiter</Btn>
                  : <Btn icon="Send" disabled={!motivOk || submitting} onClick={submit}>{submitting ? 'Wird gesendet …' : 'Bewerbung einreichen'}</Btn>}
              </div>
            </>
          )}
        </Card>}
      </div>
      <Footer go={go} />
    </div>
  );
}

// ---- Login ----
const LOGIN_ERRORS = {
  not_in_guild: 'Du bist nicht im internen LSPD-Verteiler oder das System kann deine Rollen nicht lesen.',
  no_lspd: 'Du benötigst die LSPD-Mitgliedsrolle im internen Verteiler.',
  no_rank: 'Der Mitarbeiterbereich ist ab Sergeant I freigeschaltet.',
  staff_only: 'Der Verteiler-Zugang ist nur für LSPD-Mitarbeiter vorgesehen.',
  auth_failed: 'Anmeldung fehlgeschlagen. Bitte erneut versuchen.',
};

function LoginPage({ go }) {
  const errCode = React.useMemo(() => {
    try { return new URLSearchParams(window.location.search).get('error'); } catch { return null; }
  }, []);
  const errMsg = errCode ? (LOGIN_ERRORS[errCode] || LOGIN_ERRORS.auth_failed) : '';

  return (
    <div className="min-h-screen grid place-items-center dotgrid relative z-[2] overflow-hidden px-5">
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[480px] w-[480px] rounded-full blur-3xl opacity-20" style={{ background: 'var(--c-accent)' }} />
      <Card glass className="relative w-full max-w-md p-8 text-center shadow-glass fadeup">
        <div className="mx-auto w-fit">
          <Crest size={84} />
        </div>
        <h1 className="mt-6 text-2xl font-extrabold">Mitarbeiter-Portal</h1>
        <p className="mt-2 text-sm text-muted">Nur für autorisierte LSPD-Beamte. Anmeldung über den internen Verteiler.</p>
        {errMsg && (
          <div className="mt-4 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-left text-sm text-danger">{errMsg}</div>
        )}
        <Btn size="lg" icon="Shield" className="mt-7 w-full" onClick={() => { window.location.href = (window.LSPD && window.LSPD.loginUrl('staff', '/panel')) || '/auth/discord?mode=staff'; }}>Mitarbeiter-Login</Btn>
        <p className="mt-4 text-[11px] text-muted">Kein öffentlicher Zugang — ausschließlich für LSPD-Mitarbeiter.</p>
        <button onClick={() => go('home')} className="mt-6 text-xs text-muted hover:text-ink flex items-center gap-1.5 mx-auto"><Icon name="ArrowLeft" size={14} /> Zurück zur Startseite</button>
      </Card>
    </div>
  );
}

Object.assign(window, { HomePage, BewerbungPage, TicketPage, LoginPage, ImgPlaceholder, NavBar, Footer });