// Pages: Operator edit, Problem edit, Account, Inbox, Legal, DE stub
const { useState: useStateE } = React;

function OperatorEditPage({ go }) {
  const { WORKFLOWS, TOOLS, INDUSTRIES } = window.HRI_DATA;
  const [form, setForm] = useStateE({
    name: '', bio: '', region: '', languages: ['EN'], rate: '',
    workflows: [], tools: [], industries: [],
    portfolio: [{ title: '', body: '' }],
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggle = (k, v) => setForm(f => ({ ...f, [k]: f[k].includes(v) ? f[k].filter(x => x !== v) : [...f[k], v] }));

  const completeness = Math.round(
    ([form.name, form.bio, form.region, form.workflows.length, form.tools.length, form.industries.length, form.portfolio[0]?.title]
      .filter(Boolean).length / 7) * 100
  );

  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <button className="btn btn-ghost btn-sm" onClick={() => go('home')} style={{ marginBottom: 16, color: 'var(--ink-3)' }}>← Cancel</button>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, gap: 16, flexWrap: 'wrap' }}>
          <div>
            <Kicker>Operator profile · private edit</Kicker>
            <h1 className="h2" style={{ marginTop: 8, fontSize: 36 }}>Build your listing</h1>
            <p style={{ color: 'var(--ink-2)', marginTop: 8 }}>Six minutes, eight fields. You can edit any time.</p>
          </div>
          <div style={{ minWidth: 200 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-3)', marginBottom: 6 }}>
              <span className="kicker">Profile completeness</span>
              <span className="mono" style={{ color: 'var(--accent)' }}>{completeness}%</span>
            </div>
            <div style={{ height: 4, background: 'var(--bg-2)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${completeness}%`, background: 'var(--accent)', transition: 'width 240ms ease' }} />
            </div>
          </div>
        </div>

        <Section label="Identity">
          <Field label="Display name" hint="How you'll appear in the directory.">
            <input className="input" placeholder="Maria Castellano" value={form.name} onChange={e => set('name', e.target.value)} />
          </Field>
          <Field label="Headshot">
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <Avatar initials={form.name ? form.name.split(' ').map(s => s[0]).slice(0,2).join('') : '··'} size={64} />
              <button className="btn btn-sm">Upload photo</button>
              <span className="muted" style={{ fontSize: 12 }}>JPG/PNG · square · 400px+</span>
            </div>
          </Field>
          <Field label="Bio" hint="1–3 sentences. Plain English. What kind of clients do you do your best work for?">
            <textarea className="textarea" rows={3} placeholder="Five years building voice agents for service businesses. I set things up, hand over docs, and stay on retainer if you want updates." value={form.bio} onChange={e => set('bio', e.target.value)} />
            <div style={{ textAlign: 'right', fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{form.bio.length} / 240</div>
          </Field>
        </Section>

        <Section label="What you deliver">
          <Field label="Workflows" hint="Pick every workflow you've shipped in the last 12 months.">
            <ChipGrid options={WORKFLOWS.map(w => [w.slug, w.name])} value={form.workflows} onToggle={v => toggle('workflows', v)} />
          </Field>
          <Field label="Tools you specialize in">
            <ChipGrid options={TOOLS.map(t => [t, t])} value={form.tools} onToggle={v => toggle('tools', v)} mono />
          </Field>
          <Field label="Industries you've worked in">
            <ChipGrid options={INDUSTRIES.map(i => [i, i])} value={form.industries} onToggle={v => toggle('industries', v)} />
          </Field>
        </Section>

        <Section label="Portfolio">
          <p className="muted" style={{ fontSize: 13, marginTop: -8, marginBottom: 16 }}>3–5 short case descriptions. No need to name the client.</p>
          {form.portfolio.map((p, i) => (
            <div key={i} className="card" style={{ padding: 18, marginBottom: 12 }}>
              <input className="input" placeholder="Case title (e.g. Bella Hair Studio — 3 locations)" value={p.title} onChange={e => set('portfolio', form.portfolio.map((x, j) => j === i ? { ...x, title: e.target.value } : x))} />
              <textarea className="textarea" rows={2} style={{ marginTop: 8 }} placeholder="What you built, what changed for the client." value={p.body} onChange={e => set('portfolio', form.portfolio.map((x, j) => j === i ? { ...x, body: e.target.value } : x))} />
            </div>
          ))}
          <button className="btn btn-sm" onClick={() => set('portfolio', [...form.portfolio, { title: '', body: '' }])}>+ Add another case</button>
        </Section>

        <Section label="Region & rates">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Field label="Region"><input className="input" placeholder="Lisbon, PT" value={form.region} onChange={e => set('region', e.target.value)} /></Field>
            <Field label="Rate (optional)"><input className="input" placeholder="$85/hr or starts at $2k/project" value={form.rate} onChange={e => set('rate', e.target.value)} /></Field>
          </div>
          <Field label="Languages spoken">
            <ChipGrid options={[['EN','English'],['DE','Deutsch'],['ES','Español'],['FR','Français'],['PT','Português'],['IT','Italiano'],['NL','Nederlands']]} value={form.languages} onToggle={v => toggle('languages', v)} mono />
          </Field>
        </Section>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 32, padding: '24px 0', borderTop: '1px solid var(--line)' }}>
          <button className="btn">Save draft</button>
          <button className="btn btn-primary" onClick={() => go('operator')}>Save &amp; publish <Icon.arrow /></button>
        </div>
      </div>
    </section>
  );
}

function ProblemEditPage({ go }) {
  const { WORKFLOWS, INDUSTRIES } = window.HRI_DATA;
  const [form, setForm] = useStateE({
    business: '', anonymous: true, industry: '', region: '',
    workflows: [], saas: [], saasInput: '',
    body: '', budget: '', language: 'EN',
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggle = (k, v) => setForm(f => ({ ...f, [k]: f[k].includes(v) ? f[k].filter(x => x !== v) : [...f[k], v] }));

  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="container" style={{ maxWidth: 800 }}>
        <button className="btn btn-ghost btn-sm" onClick={() => go('home')} style={{ marginBottom: 16, color: 'var(--ink-3)' }}>← Cancel</button>
        <Kicker>Post a problem · free</Kicker>
        <h1 className="h2" style={{ marginTop: 8, fontSize: 36 }}>Describe what you need</h1>
        <p style={{ color: 'var(--ink-2)', marginTop: 8, maxWidth: 600 }}>Plain English is fine. Operators translate this into a workflow when they reach out.</p>

        <Section label="About your business">
          <Field label="Business name" hint="Optional — most posters stay anonymous and use a category instead.">
            <input className="input" placeholder={form.anonymous ? 'A 4-chair salon in Brooklyn' : 'Bella Hair Studio'} value={form.business} onChange={e => set('business', e.target.value)} />
          </Field>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-2)' }}>
            <input type="checkbox" checked={form.anonymous} onChange={e => set('anonymous', e.target.checked)} />
            Stay anonymous (use category instead of name in public listing)
          </label>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
            <Field label="Industry">
              <select className="select" value={form.industry} onChange={e => set('industry', e.target.value)}>
                <option value="">Choose one…</option>
                {INDUSTRIES.map(i => <option key={i}>{i}</option>)}
              </select>
            </Field>
            <Field label="Region"><input className="input" placeholder="New York, US" value={form.region} onChange={e => set('region', e.target.value)} /></Field>
          </div>
        </Section>

        <Section label="What you want solved">
          <Field label="Workflows wanted" hint="Don't know? Pick the closest match — operators will help shape it.">
            <ChipGrid options={WORKFLOWS.map(w => [w.slug, w.name])} value={form.workflows} onToggle={v => toggle('workflows', v)} />
          </Field>
          <Field label="SaaS you currently use" hint="Type and press enter. Helps operators tell you what plugs in.">
            <input className="input" placeholder="Square Appointments, Google Workspace…" value={form.saasInput}
              onChange={e => set('saasInput', e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter' && form.saasInput.trim()) { set('saas', [...form.saas, form.saasInput.trim()]); set('saasInput', ''); }}} />
            {form.saas.length > 0 && (
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
                {form.saas.map((s, i) => (
                  <span key={i} className="tag" style={{ cursor: 'pointer' }} onClick={() => set('saas', form.saas.filter((_, j) => j !== i))}>
                    {s} <span style={{ color: 'var(--ink-3)', marginLeft: 4 }}>×</span>
                  </span>
                ))}
              </div>
            )}
          </Field>
          <Field label="Describe the problem" hint="What's broken, what's slow, what would change for you if it were fixed.">
            <textarea className="textarea" rows={6} placeholder="We miss ~30% of calls during peak hours. We use Square. Want something that picks up calls, books into Square, and texts confirmations…" value={form.body} onChange={e => set('body', e.target.value)} />
            <div style={{ textAlign: 'right', fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{form.body.length} / 500</div>
          </Field>
        </Section>

        <Section label="Practical">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Field label="Budget range (optional)"><input className="input" placeholder="$2k–4k setup, $200/mo retainer" value={form.budget} onChange={e => set('budget', e.target.value)} /></Field>
            <Field label="Language">
              <select className="select" value={form.language} onChange={e => set('language', e.target.value)}>
                <option value="EN">English</option><option value="DE">Deutsch</option>
              </select>
            </Field>
          </div>
        </Section>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 32, padding: '24px 0', borderTop: '1px solid var(--line)' }}>
          <button className="btn">Save draft</button>
          <button className="btn btn-primary" onClick={() => go('browse')}>Publish problem <Icon.arrow /></button>
        </div>
      </div>
    </section>
  );
}

function AccountPage({ go }) {
  const [tab, setTab] = useStateE('account');
  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <Kicker>Account</Kicker>
        <h1 className="h2" style={{ marginTop: 8, fontSize: 36 }}>Settings</h1>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 40, marginTop: 32 }}>
          <aside>
            {[['account','Account'],['notifications','Notifications'],['language','Language'],['danger','Danger zone']].map(([id,label]) => (
              <button key={id} onClick={() => setTab(id)}
                style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 12px', background: tab === id ? 'var(--bg-2)' : 'transparent', border: 0, borderRadius: 6, color: tab === id ? 'var(--ink)' : 'var(--ink-2)', fontSize: 14, marginBottom: 2 }}>
                {label}
              </button>
            ))}
          </aside>
          <div>
            {tab === 'account' && (<>
              <Field label="Email"><input className="input" defaultValue="maria@example.com" /></Field>
              <Field label="New password"><input className="input" type="password" placeholder="••••••••" /></Field>
              <Field label="Confirm new password"><input className="input" type="password" placeholder="••••••••" /></Field>
              <button className="btn btn-primary" style={{ marginTop: 16 }}>Save changes</button>
            </>)}
            {tab === 'notifications' && (<>
              {[['New messages from companies', true],['Match alerts (problems matching your workflows)', true],['Weekly digest', false],['Product updates', true]].map(([label, def], i) => (
                <label key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: '1px solid var(--line)', alignItems: 'center' }}>
                  <span>{label}</span>
                  <input type="checkbox" defaultChecked={def} />
                </label>
              ))}
            </>)}
            {tab === 'language' && (<>
              <Field label="Interface language"><select className="select" defaultValue="EN"><option value="EN">English</option><option value="DE">Deutsch</option></select></Field>
              <Field label="Default region"><input className="input" defaultValue="Lisbon, PT" /></Field>
            </>)}
            {tab === 'danger' && (<>
              <div className="card" style={{ padding: 24, borderColor: 'color-mix(in oklab, var(--danger) 40%, var(--line))' }}>
                <h3 style={{ fontSize: 17 }}>Delete account</h3>
                <p className="muted" style={{ fontSize: 13, marginTop: 8 }}>Your profile, messages, and reviews will be permanently removed. Reviews you left for others are anonymized but stay public.</p>
                <button className="btn" style={{ marginTop: 12, color: 'var(--danger)', borderColor: 'color-mix(in oklab, var(--danger) 40%, var(--line))' }}>Delete my account</button>
              </div>
            </>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function InboxPage({ go }) {
  const threads = [
    { id: 't1', from: 'A 4-chair salon in Brooklyn', last: 'Hi Maria — saw your Bella Hair case study. Are you taking new clients in November?', when: '2h', unread: true, role: 'company' },
    { id: 't2', from: 'Family-run HVAC company', last: 'What would the missed-call text-back cost to set up?', when: '1d', unread: true, role: 'company' },
    { id: 't3', from: 'Independent dental practice', last: 'Thank you, that was super helpful. We\'ll get back to you Monday.', when: '3d', unread: false, role: 'company' },
    { id: 't4', from: 'Two-location auto repair shop', last: 'Können wir auf Deutsch sprechen?', when: '1w', unread: false, role: 'company' },
  ];
  const [active, setActive] = useStateE('t1');
  const cur = threads.find(t => t.id === active);
  const [draft, setDraft] = useStateE('');

  return (
    <section style={{ padding: '24px 0 0' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0, height: 'calc(100vh - 60px - 24px)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          <aside style={{ borderRight: '1px solid var(--line)', background: 'var(--bg-1)', overflowY: 'auto' }}>
            <div style={{ padding: 16, borderBottom: '1px solid var(--line)' }}>
              <Kicker>Inbox</Kicker>
              <h2 style={{ fontSize: 20, fontWeight: 500, marginTop: 4 }}>Messages</h2>
            </div>
            {threads.map(t => (
              <button key={t.id} onClick={() => setActive(t.id)} style={{ display: 'block', width: '100%', textAlign: 'left', padding: 16, background: active === t.id ? 'var(--bg-2)' : 'transparent', border: 0, borderBottom: '1px solid var(--line)', cursor: 'pointer' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontWeight: t.unread ? 600 : 500, fontSize: 14 }}>{t.from}</span>
                  <span className="mono" style={{ fontSize: 11, color: t.unread ? 'var(--accent)' : 'var(--ink-3)' }}>{t.when}</span>
                </div>
                <p style={{ fontSize: 13, color: t.unread ? 'var(--ink)' : 'var(--ink-3)', margin: '4px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{t.last}</p>
              </button>
            ))}
          </aside>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <h3 style={{ fontSize: 17, fontWeight: 500 }}>{cur.from}</h3>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>STARTED FROM YOUR PROFILE · OFF-PLATFORM DEAL</span>
              </div>
              <button className="btn btn-sm" onClick={() => go('browse')}>View their problem</button>
            </div>
            <div style={{ flex: 1, padding: 24, overflowY: 'auto', background: 'var(--bg)' }}>
              <div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
                <Avatar initials="?" size={32} />
                <div className="card" style={{ padding: 14, maxWidth: 480 }}>
                  <p style={{ margin: 0, fontSize: 14 }}>{cur.last}</p>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 6, display: 'block' }}>2H AGO</span>
                </div>
              </div>
              <div style={{ textAlign: 'center', padding: 16, fontSize: 12, color: 'var(--ink-3)' }} className="mono">
                ─── REPLY BELOW ───
              </div>
            </div>
            <div style={{ borderTop: '1px solid var(--line)', padding: 16, background: 'var(--bg-1)' }}>
              <textarea className="textarea" rows={3} placeholder="Reply to this message…" value={draft} onChange={e => setDraft(e.target.value)} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
                <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>This conversation stays between you two. We never see it.</span>
                <button className="btn btn-primary btn-sm" disabled={!draft.trim()}>Send <Icon.arrow /></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function LegalPage({ go, kind }) {
  const content = {
    imprint: {
      title: 'Imprint (Impressum)',
      body: [
        ['Information per § 5 TMG',
          'HumansRunIt GmbH\nMusterstraße 1\n10115 Berlin\nGermany'],
        ['Contact',
          'Email: hello@humansrunit.com\nPhone: +49 (0)30 0000 0000'],
        ['Commercial Register',
          'Registered at Amtsgericht Charlottenburg, HRB 000000 B'],
        ['VAT ID',
          'DE 000 000 000 (per § 27 a UStG)'],
        ['Responsible for content per § 55 Abs. 2 RStV',
          'Founder Name, address as above.'],
        ['Disclaimer',
          'HumansRunIt operates a directory and does not provide AI services itself. We are not party to any contract between operators and companies that meet through the platform. Linked third-party content is the responsibility of those providers.'],
      ],
    },
    privacy: {
      title: 'Privacy Policy',
      body: [
        ['1. Who we are',
          'HumansRunIt GmbH, the controller for the personal data described below.'],
        ['2. What we collect',
          'Account data (email, hashed password, language preference). Profile data you submit. Messages you send through the platform. Basic usage telemetry (page views, IP truncated to /24, user-agent).'],
        ['3. Why we collect it',
          'To run the directory: showing your profile to others, sending messages to recipients, sending you transactional emails. Legal basis: Art. 6(1)(b) GDPR (contract) and Art. 6(1)(f) GDPR (legitimate interest in basic site analytics).'],
        ['4. Who we share it with',
          'Hosting (Hetzner, Germany). Email delivery (Postmark). That\'s it. No advertising networks. No data sales. Ever.'],
        ['5. How long we keep it',
          'Profile data: until you delete your account. Messages: 24 months. Telemetry: 14 days.'],
        ['6. Your rights',
          'Access, rectification, erasure, portability, objection. Email privacy@humansrunit.com or use the in-account export tool.'],
        ['7. Cookies',
          'One session cookie for sign-in. No tracking cookies. No consent banner needed because we don\'t set tracking cookies.'],
      ],
    },
    terms: {
      title: 'Terms of Service',
      body: [
        ['1. What HumansRunIt is',
          'A free directory connecting humans who set up AI agents to small businesses that need them. We are not party to any deal that happens between users.'],
        ['2. What we don\'t do',
          'We do not host transactions. We do not broker contracts. We do not vet operators or companies beyond basic anti-spam checks. We do not take a commission on any deal.'],
        ['3. Your responsibility',
          'You are responsible for: the accuracy of what you list; complying with the laws of your jurisdiction; the contracts you sign with other users; the data you handle on behalf of clients.'],
        ['4. Reviews',
          'Reviews are tied to verified workflow deliveries. We may moderate reviews that are clearly false, abusive, or off-topic. We will not delete a review just because the subject doesn\'t like it.'],
        ['5. Termination',
          'You may delete your account any time. We may suspend accounts that abuse the platform (spam, fraud, harassment).'],
        ['6. Liability',
          'The platform is provided as-is. We are not liable for damages arising from a deal between users. Statutory liability under German law remains unaffected.'],
        ['7. Governing law',
          'German law. Place of jurisdiction: Berlin.'],
      ],
    },
  }[kind] || { title: 'Page', body: [] };

  return (
    <section style={{ padding: '64px 0 80px' }}>
      <div className="container" style={{ maxWidth: 720 }}>
        <Kicker>Legal</Kicker>
        <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginTop: 12 }}>{content.title}</h1>
        <p className="muted" style={{ fontSize: 13, marginTop: 12 }}>Last updated · 7 May 2026</p>
        <div style={{ marginTop: 48 }}>
          {content.body.map(([h, b], i) => (
            <div key={i} style={{ paddingBottom: 32, marginBottom: 32, borderBottom: '1px solid var(--line)' }}>
              <h2 style={{ fontSize: 22, fontWeight: 500, marginBottom: 12 }}>{h}</h2>
              <p style={{ color: 'var(--ink-2)', whiteSpace: 'pre-line', margin: 0, lineHeight: 1.6 }}>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeDEPage({ go, t }) {
  return (
    <>
      <section style={{ padding: '64px 0 80px' }}>
        <div className="container">
          <div className="hero-eyebrow">
            <span className="status-dot live pulse" />
            <span>Kostenloses Verzeichnis · Bald in DACH verfügbar</span>
          </div>
          <h1 className="display" style={{ marginTop: 28, maxWidth: 1100 }}>
            Menschlich verwaltete KI-Agenten <br /><span className="display-serif scribble">für kleine Unternehmen.</span>
          </h1>
          <p style={{ fontSize: 20, color: 'var(--ink-2)', maxWidth: 680, marginTop: 32, lineHeight: 1.5 }}>
            Ein zweiseitiges Verzeichnis. Operator zeigen, welche KI-Workflows sie wirklich liefern. Kleine Unternehmen beschreiben, was gelöst werden soll. Sie treffen sich hier. Sie schließen den Vertrag direkt. <span className="hi-mark">Wir nehmen nie Provision.</span>
          </p>

          <div className="door" style={{ marginTop: 56 }}>
            <div className="door-card" onClick={() => go('operators')}>
              <div className="kicker door-kicker">Für Operator</div>
              <h3 className="h3" style={{ marginTop: 14, marginBottom: 10, fontSize: 26 }}>Werden Sie von KMU gefunden, die Ihre Skills brauchen.</h3>
              <p className="door-body" style={{ color: 'var(--ink-2)', flex: 1 }}>Kostenloses Profil. Echte Bewertungen. Sie behalten den Deal.</p>
              <span className="door-cta">Profil erstellen <span className="door-cta-arrow"><Icon.arrow /></span></span>
            </div>
            <div className="door-card door-primary" onClick={() => go('companies')}>
              <div className="kicker door-kicker">Für Unternehmen</div>
              <h3 className="h3" style={{ marginTop: 14, marginBottom: 10, fontSize: 26, color: 'inherit' }}>Finden Sie einen Menschen, der KI für Sie einrichtet.</h3>
              <p className="door-body" style={{ flex: 1 }}>Beschreiben Sie das Problem auf Deutsch. Hören Sie binnen Tagen.</p>
              <span className="door-cta">Problem posten <span className="door-cta-arrow"><Icon.arrow /></span></span>
            </div>
          </div>

          <div style={{ marginTop: 48, padding: 20, border: '1px dashed var(--line)', borderRadius: 'var(--radius)', color: 'var(--ink-3)', fontSize: 13 }} className="mono">
            STUB · DACH-Inhalte werden zum Launch lokalisiert (nicht übersetzt). Vollständige Seitenstruktur spiegelt die EN-Version.
          </div>
        </div>
      </section>
    </>
  );
}

function Section({ label, children }) {
  return (
    <section style={{ marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
      <div className="kicker" style={{ marginBottom: 20 }}>{label}</div>
      <div style={{ display: 'grid', gap: 20 }}>{children}</div>
    </section>
  );
}

function Field({ label, hint, children }) {
  return (
    <div>
      <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}>{label}</label>
      {hint && <p className="muted" style={{ fontSize: 12, marginTop: -2, marginBottom: 8 }}>{hint}</p>}
      {children}
    </div>
  );
}

function ChipGrid({ options, value, onToggle, mono }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
      {options.map(([id, label]) => {
        const sel = value.includes(id);
        return (
          <button key={id} onClick={() => onToggle(id)}
            style={{
              padding: '6px 12px', borderRadius: 999,
              border: '1px solid', borderColor: sel ? 'var(--accent)' : 'var(--line)',
              background: sel ? 'var(--accent-soft)' : 'var(--bg-1)',
              color: sel ? 'var(--accent-2)' : 'var(--ink-2)',
              fontSize: 12, fontFamily: mono ? 'var(--font-mono)' : 'inherit',
              cursor: 'pointer',
            }}>
            {sel && '✓ '}{label}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { OperatorEditPage, ProblemEditPage, AccountPage, InboxPage, LegalPage, HomeDEPage });