// steckbrief-page.jsx — /steckbrief: kostenloser Lead-Magnet.
// "Plane deinen KI-Agenten wie eine neue Kollegin."
// Live editierbarer Steckbrief · Beispiel-Autofill · Prompt-Copy · PDF (Druck) · Mail-Prefill.

const SB_KEYS = ['job', 'aufgaben', 'ausloeser', 'werkzeuge', 'wissen', 'ergebnis', 'grenzenA', 'grenzenB', 'datenrisiko'];

function sbEmptyValues() {
  return SB_KEYS.reduce((a, k) => { a[k] = ''; return a; }, {});
}

function sbBuildPrompt(v, lang) {
  const L = lang === 'en'
    ? { h: 'AGENT BRIEF', job: 'Job', tasks: 'Tasks', trig: 'Trigger', tools: 'Tools', know: 'Knowledge', res: 'Result', alone: 'May do alone', appr: 'Needs approval', data: 'Data risk', intro: 'You are an AI agent. Act according to this brief:' }
    : { h: 'AGENTEN-STECKBRIEF', job: 'Job', tasks: 'Aufgaben', trig: 'Auslöser', tools: 'Werkzeuge', know: 'Wissen', res: 'Ergebnis', alone: 'Darf allein', appr: 'Braucht Freigabe', data: 'Datenrisiko', intro: 'Du bist ein KI-Agent. Handle nach diesem Steckbrief:' };
  const line = (k, val) => val ? `\n${k}:\n${val}\n` : '';
  return [
    `# ${L.h}`,
    L.intro,
    line(L.job, v.job),
    line(L.tasks, v.aufgaben),
    line(L.trig, v.ausloeser),
    line(L.tools, v.werkzeuge),
    line(L.know, v.wissen),
    line(L.res, v.ergebnis),
    line(L.alone, v.grenzenA),
    line(L.appr, v.grenzenB),
    line(L.data, v.datenrisiko),
  ].join('\n').replace(/\n{3,}/g, '\n\n').trim();
}

// Prompt für "Prompt kopieren": nutzt die bestehenden Canvas-Werte (values),
// leere Felder werden als Lücke sichtbar gemacht.
function sbBuildCopyPrompt(v) {
  const val = (s) => (s && s.trim()) ? s.trim() : '— (noch nicht ausgefüllt)';
  return [
    'Ich habe einen KI-Agenten mit einem Intake-Canvas geplant. Meine Eingaben:',
    '',
    `Job (wozu ist er da): ${val(v.job)}`,
    `Auslöser (wann wird er aktiv): ${val(v.ausloeser)}`,
    `Aufgaben (was tut er konkret): ${val(v.aufgaben)}`,
    `Wissen (was muss er kennen): ${val(v.wissen)}`,
    `Werkzeuge (worauf greift er zu): ${val(v.werkzeuge)}`,
    `Ergebnis (woran erkenne ich Erfolg): ${val(v.ergebnis)}`,
    `Grenzen – darf er allein: ${val(v.grenzenA)}`,
    `Grenzen – braucht Freigabe: ${val(v.grenzenB)}`,
    `Datenrisiko (was, wenn's schiefgeht): ${val(v.datenrisiko)}`,
    '',
    'Hilf mir, dieses System zu verstehen und weiterzuplanen:',
    '',
    '1. Spiegele in 2-3 Sätzen zurück, was ich gebaut habe — damit ich sehe, ob es rund ist.',
    '2. Finde die Lücken. Welche Felder sind leer, vage oder widersprüchlich? Sei direkt.',
    '3. Prüfe die Zusammenhänge: Passen Werkzeuge, Grenzen und Datenrisiko zueinander? Wo darf er mehr, als er dürfte?',
    '4. Nenn mir den ersten Schritt — das kleinste lauffähige Stück, das ich testen kann.',
    '',
    'Stell Rückfragen, wo dir was fehlt. Kein Lob, das ich nicht brauche.',
  ].join('\n');
}

function prefersReducedMotion() {
  try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) { return false; }
}

// ── "Chatbot → Agent" animierter Wechsel ─────────────────────
function WhatIsAgent({ t }) {
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    if (prefersReducedMotion()) return;
    const id = setInterval(() => setPhase(p => (p + 1) % 2), 2600);
    return () => clearInterval(id);
  }, []);
  const Row = ({ active, label, action, icon, coral }) => (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '16px 18px', borderRadius: 10,
      background: active ? (coral ? '#fff0ee' : '#fff') : '#fff',
      border: `1.5px solid ${active ? (coral ? KS.coral : KS.borderStrong) : KS.border}`,
      boxShadow: active ? '0 6px 20px -12px rgba(73,70,72,0.35)' : 'none',
      transform: active ? 'translateY(-2px)' : 'none',
      opacity: active ? 1 : 0.5,
      transition: 'all 500ms cubic-bezier(.2,.7,.2,1)',
    }}>
      <span style={{
        width: 38, height: 38, borderRadius: 9, flexShrink: 0,
        background: coral ? KS.coral : KS.charcoal, color: '#fff',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
      }}><Icon name={icon} /></span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 16, color: KS.black, letterSpacing: -0.3 }}>{label}</div>
        <div style={{ fontSize: 13.5, color: KS.charcoal, lineHeight: 1.4 }}>{action}</div>
      </div>
    </div>
  );
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <Row active={phase === 0} label={t.chatbotLabel} action={t.chatbotAction} icon="chat-circle-dots" coral={false} />
      <div style={{ display: 'flex', justifyContent: 'center', color: KS.coral }}>
        <Icon name="arrow-down" size={18} style={{ opacity: 0.7 }} />
      </div>
      <Row active={phase === 1} label={t.agentLabel} action={t.agentAction} icon="cpu" coral />
    </div>
  );
}

// ── Ein Textfeld ─────────────────────────────────────────────
function SBTextField({ f, lang, value, onChange, flash }) {
  const c = f[lang];
  return (
    <div className="sb-field" style={{
      borderRadius: 12, border: `1px solid ${flash ? KS.coral : KS.border}`,
      background: '#fff', padding: '16px 18px 18px',
      boxShadow: flash ? '0 0 0 3px rgba(255,100,79,0.18)' : 'none',
      transition: 'box-shadow 400ms ease, border-color 400ms ease',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
        <span style={{ fontWeight: 700, fontSize: 14.5, color: KS.black, letterSpacing: -0.2 }}>{c.label}</span>
        <span style={{ fontFamily: KSFonts.mono, fontSize: 10.5, color: KS.muted, letterSpacing: 0.3, textAlign: 'right' }}>{c.hint}</span>
      </div>
      <textarea
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={c.ph}
        rows={2}
        className="sb-input"
      />
    </div>
  );
}

function StufenBadge({ n, accent }) {
  return (
    <span style={{
      fontFamily: KSFonts.mono, fontSize: 10.5, fontWeight: 500,
      color: accent, border: `1px solid ${accent}`, borderRadius: 999,
      padding: '2px 9px', letterSpacing: 0.5, whiteSpace: 'nowrap',
    }}>{n}</span>
  );
}

function SteckbriefPage({ lang, setLang, navVariant = 'rule', accent = KS.coral }) {
  const t = SB_COPY[lang];
  const [mobile, setMobile] = React.useState(() => window.innerWidth < 760);
  const [values, setValues] = React.useState(sbEmptyValues);
  const [flashId, setFlashId] = React.useState(null);
  const [copied, setCopied] = React.useState(false);
  const [promptFallback, setPromptFallback] = React.useState(null);
  const [email, setEmail] = React.useState('');
  const fallbackRef = React.useRef(null);
  const formRef = React.useRef(null);

  React.useEffect(() => {
    const h = () => setMobile(window.innerWidth < 760);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);

  const setVal = (k, v) => setValues(prev => ({ ...prev, [k]: v }));

  const fillExample = (key) => {
    const ex = SB_EXAMPLES[key][lang];
    const map = {
      job: ex.job, aufgaben: ex.aufgaben, ausloeser: ex.ausloeser, werkzeuge: ex.werkzeuge,
      wissen: ex.wissen, ergebnis: ex.ergebnis, grenzenA: ex.grenzenA, grenzenB: ex.grenzenB, datenrisiko: ex.datenrisiko,
    };
    if (prefersReducedMotion()) { setValues(map); return; }
    const order = ['job', 'aufgaben', 'ausloeser', 'werkzeuge', 'wissen', 'ergebnis', 'grenzenA', 'grenzenB', 'datenrisiko'];
    order.forEach((k, i) => {
      setTimeout(() => {
        setVal(k, map[k]);
        const fid = k === 'grenzenA' || k === 'grenzenB' ? 'grenzen' : k;
        setFlashId(fid);
        setTimeout(() => setFlashId(f => (f === fid ? null : f)), 500);
      }, i * 130);
    });
  };

  const clearAll = () => setValues(sbEmptyValues());

  const copyPrompt = () => {
    const p = sbBuildCopyPrompt(values);
    const ok = () => {
      setPromptFallback(null);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    };
    const fail = () => setPromptFallback(p);
    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(p).then(ok, fail);
      } else {
        fail();
      }
    } catch (e) { fail(); }
  };

  React.useEffect(() => {
    if (promptFallback && fallbackRef.current) {
      fallbackRef.current.focus();
      fallbackRef.current.select();
    }
  }, [promptFallback]);

  const sendMail = () => {
    const body = sbBuildPrompt(values, lang) + '\n\n— — —\n' + (lang === 'en' ? 'My email: ' : 'Meine E-Mail: ') + (email || '');
    window.location.href = `mailto:hello@kilian-springer.com?subject=${encodeURIComponent(t.printTitle)}&body=${encodeURIComponent(body)}`;
  };

  const filledCount = ['job', 'aufgaben', 'ausloeser', 'werkzeuge', 'wissen', 'ergebnis', 'datenrisiko']
    .filter(k => values[k].trim()).length + ((values.grenzenA.trim() || values.grenzenB.trim()) ? 1 : 0);

  const scrollToForm = () => {
    if (formRef.current) window.scrollTo({ top: formRef.current.getBoundingClientRect().top + window.scrollY - 70, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
  };

  const wrap = { maxWidth: 1000, margin: '0 auto', padding: mobile ? '0 20px' : '0 32px' };
  const kicker = (txt, col = accent) => (
    <div style={{ fontFamily: KSFonts.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: col, marginBottom: 28 }}>{txt}</div>
  );

  return (
    <div style={{ minHeight: '100vh', background: KS.offwhite, color: KS.charcoal, fontFamily: KSFonts.body }}>
      <style>{SB_CSS}</style>
      <GlobalNav lang={lang} setLang={setLang} page="steckbrief" variant={navVariant} accent={accent} />

      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', borderBottom: `1px solid ${KS.border}` }}>
        <NodeGraph color={KS.charcoal} opacity={0.06} width={1200} height={560} seed={12} density={40} />
        <div style={{ ...wrap, position: 'relative', padding: mobile ? '72px 20px 80px' : '120px 32px 112px', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.35fr 0.65fr', gap: 32, alignItems: 'center' }}>
          <div>
            {kicker(t.kicker)}
            <h1 style={{
              fontSize: mobile ? 46 : 82, fontWeight: 800, letterSpacing: mobile ? -1.8 : -3.5,
              lineHeight: 0.94, color: KS.black, margin: 0, marginBottom: 20, textWrap: 'balance',
            }}>
              {t.h1a}<br /><span style={{ color: accent }}>{t.h1b}</span>
            </h1>
            <p style={{ fontSize: mobile ? 15 : 17.5, lineHeight: 1.6, color: KS.charcoal, margin: 0, marginBottom: 28, maxWidth: 520, textWrap: 'pretty' }}>{t.heroSub}</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button onClick={scrollToForm} style={{
                display: 'inline-flex', alignItems: 'center', gap: 9, background: accent, color: '#fff',
                border: 'none', padding: '14px 22px', fontSize: 15, fontWeight: 600, cursor: 'pointer', borderRadius: 7,
                fontFamily: 'inherit',
              }}>{t.ctaStart}<Icon name="arrow-down" size={15} /></button>
              <a href="stufen.html" style={{
                display: 'inline-flex', alignItems: 'center', gap: 9, background: 'transparent', color: KS.charcoal,
                border: `1.5px solid ${KS.borderStrong}`, padding: '14px 22px', fontSize: 15, fontWeight: 600, textDecoration: 'none', borderRadius: 7,
              }}>{t.ctaStufen}<Icon name="arrow-right" size={15} style={{ color: accent }} /></a>
            </div>
          </div>
          {!mobile && (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <PixelKilian size={220} idle flicker />
            </div>
          )}
        </div>
      </section>

      {/* WAS IST EIN AGENT */}
      <section style={{ ...wrap, padding: mobile ? '84px 20px' : '132px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 28 : 56, alignItems: 'center' }}>
          <div>
            {kicker(t.whatKicker)}
            <h2 style={{ fontSize: mobile ? 30 : 40, fontWeight: 800, letterSpacing: -1.2, lineHeight: 1.05, color: KS.black, margin: 0, marginBottom: 16, textWrap: 'balance' }}>{t.whatTitle}</h2>
            <p style={{ fontSize: mobile ? 15 : 16.5, lineHeight: 1.6, color: KS.charcoal, margin: 0, textWrap: 'pretty' }}>{t.whatText}</p>
            <p style={{ fontSize: mobile ? 15 : 16.5, lineHeight: 1.6, color: KS.charcoal, margin: '16px 0 0', textWrap: 'pretty' }}>{t.whatText2}</p>
          </div>
          <WhatIsAgent t={t} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 14, marginTop: mobile ? 28 : 44 }}>
          {t.whatPoints.map((p, i) => (
            <div key={i} style={{ background: '#fff', border: `1px solid ${KS.border}`, borderRadius: 12, padding: '18px 20px' }}>
              <div style={{ fontFamily: KSFonts.mono, fontSize: 11, color: accent, letterSpacing: 0.5, marginBottom: 8 }}>0{i + 1}</div>
              <div style={{ fontWeight: 700, fontSize: 15.5, color: KS.black, letterSpacing: -0.3, marginBottom: 6 }}>{p.t}</div>
              <div style={{ fontSize: 13.5, color: KS.charcoal, lineHeight: 1.5, textWrap: 'pretty' }}>{p.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ANATOMIE: Avatar + Flip-Karten */}
      <AgentAnatomie lang={lang} accent={accent} mobile={mobile} />

      {/* STECKBRIEF FORM */}
      <section ref={formRef} className="sb-print-section" style={{ background: '#fff', borderTop: `1px solid ${KS.border}`, borderBottom: `1px solid ${KS.border}` }}>
        <div style={{ ...wrap, padding: mobile ? '84px 20px' : '132px 32px' }}>
          <div className="sb-print-controls" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap', marginBottom: 28 }}>
            <div>
              {kicker(t.formKicker)}
              <h2 style={{ fontSize: mobile ? 30 : 42, fontWeight: 800, letterSpacing: -1.4, lineHeight: 1.02, color: KS.black, margin: 0, marginBottom: 12, textWrap: 'balance' }}>{t.formTitle}</h2>
              <p style={{ fontSize: mobile ? 14 : 15.5, lineHeight: 1.55, color: KS.charcoal, margin: 0, maxWidth: 560, textWrap: 'pretty' }}>{t.formIntro}</p>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
              <span style={{ fontFamily: KSFonts.mono, fontSize: 11, color: KS.muted, letterSpacing: 0.5 }}>{filledCount}/8 {t.filled}</span>
              <button onClick={() => fillExample('legal')} style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, background: KS.charcoal, color: KS.offwhite,
                border: 'none', padding: '11px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer', borderRadius: 7, fontFamily: 'inherit',
              }}><Icon name="scales" size={14} />{t.fillExample}</button>
              <button onClick={() => fillExample('assistenz')} style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, background: KS.charcoal, color: KS.offwhite,
                border: 'none', padding: '11px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer', borderRadius: 7, fontFamily: 'inherit',
              }}><Icon name="calendar-check" size={14} />{t.fillExample2}</button>
              <button onClick={clearAll} style={{
                display: 'inline-flex', alignItems: 'center', gap: 7, background: 'transparent', color: KS.muted,
                border: `1px solid ${KS.border}`, padding: '11px 14px', fontSize: 13, cursor: 'pointer', borderRadius: 7, fontFamily: 'inherit',
              }}>{t.clearAll}</button>
            </div>
          </div>

          {/* Print area */}
          <div className="sb-print-area">
            <div className="sb-print-title">{t.printTitle} · kilian-springer.com</div>
            <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 14 }}>
              {SB_FIELDS.map(f => {
                if (f.kind === 'split') {
                  const c = f[lang];
                  return (
                    <div key={f.id} className="sb-field" style={{ gridColumn: mobile ? 'auto' : '1 / -1', borderRadius: 12, border: `1px solid ${flashId === 'grenzen' ? KS.coral : KS.border}`, background: '#fff', padding: '16px 18px 18px', boxShadow: flashId === 'grenzen' ? '0 0 0 3px rgba(255,100,79,0.18)' : 'none', transition: 'box-shadow 400ms ease, border-color 400ms ease' }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
                        <span style={{ fontWeight: 700, fontSize: 14.5, color: KS.black, letterSpacing: -0.2 }}>{c.label}</span>
                        <span style={{ fontFamily: KSFonts.mono, fontSize: 10.5, color: accent, letterSpacing: 0.3, border: `1px solid ${accent}`, borderRadius: 999, padding: '2px 8px' }}>{c.hint}</span>
                      </div>
                      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 12 }}>
                        <div style={{ background: KS.mintWhite, borderRadius: 8, padding: '10px 12px', border: `1px solid ${KS.forest}22` }}>
                          <div style={{ fontFamily: KSFonts.mono, fontSize: 10, letterSpacing: 0.8, textTransform: 'uppercase', color: KS.forest, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={12} />{c.aLabel}</div>
                          <textarea value={values.grenzenA} onChange={e => setVal('grenzenA', e.target.value)} placeholder={c.aPh} rows={2} className="sb-input sb-input-plain" />
                        </div>
                        <div style={{ background: KS.blush + '66', borderRadius: 8, padding: '10px 12px', border: `1px solid ${KS.deepRed}22` }}>
                          <div style={{ fontFamily: KSFonts.mono, fontSize: 10, letterSpacing: 0.8, textTransform: 'uppercase', color: KS.deepRed, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="hand-palm" size={12} />{c.bLabel}</div>
                          <textarea value={values.grenzenB} onChange={e => setVal('grenzenB', e.target.value)} placeholder={c.bPh} rows={2} className="sb-input sb-input-plain" />
                        </div>
                      </div>
                    </div>
                  );
                }
                return (
                  <SBTextField key={f.id} f={f} lang={lang} value={values[f.id]} onChange={v => setVal(f.id, v)} flash={flashId === f.id} />
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* RESSOURCEN + LEAD */}
      <section style={{ ...wrap, padding: mobile ? '84px 20px' : '132px 32px' }}>
        {kicker(t.resKicker)}
        <h2 style={{ fontSize: mobile ? 30 : 42, fontWeight: 800, letterSpacing: -1.4, lineHeight: 1.02, color: KS.black, margin: 0, marginBottom: 28, textWrap: 'balance' }}>{t.resTitle}</h2>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)', gap: 14, marginBottom: 32 }}>
          <ResCard icon={copied ? 'check' : 'copy'} title={copied ? t.resPromptCopied : t.resPrompt} sub={t.resPromptSub} onClick={copyPrompt} accent={accent} />
          <ResCard icon="file-pdf" title={t.resPdf} sub={t.resPdfSub} onClick={() => window.print()} accent={accent} />
        </div>

        {promptFallback && (
          <div style={{ background: '#fff', border: `1px solid ${KS.border}`, borderRadius: 12, padding: '16px 18px', marginTop: -18, marginBottom: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 10 }}>
              <span style={{ fontFamily: KSFonts.mono, fontSize: 11, letterSpacing: 0.5, color: KS.muted }}>
                {lang === 'en' ? 'Clipboard blocked — select & copy with Cmd/Ctrl+C' : 'Zwischenablage blockiert — markiert, mit Cmd/Ctrl+C kopieren'}
              </span>
              <button onClick={() => setPromptFallback(null)} style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: KS.muted, fontFamily: 'inherit', fontSize: 13, padding: 4 }}>✕</button>
            </div>
            <textarea
              ref={fallbackRef}
              readOnly
              value={promptFallback}
              onFocus={e => e.target.select()}
              rows={12}
              style={{ width: '100%', border: `1px solid ${KS.border}`, borderRadius: 8, background: KS.offwhite, fontFamily: KSFonts.mono, fontSize: 12, lineHeight: 1.55, color: KS.charcoal, padding: '12px 14px', resize: 'vertical', outline: 'none', boxSizing: 'border-box' }}
            />
          </div>
        )}

        {/* Lead capture */}
        <div style={{ background: KS.charcoal, borderRadius: 14, padding: mobile ? '28px 22px' : '36px 40px', color: KS.offwhite, position: 'relative', overflow: 'hidden' }}>
          <NodeGraph color={KS.offwhite} opacity={0.08} width={900} height={340} seed={5} density={30} />
          <div style={{ position: 'relative', maxWidth: 560 }}>
            <div style={{ fontFamily: KSFonts.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: accent, marginBottom: 12 }}>{t.leadKicker}</div>
            <h3 style={{ fontSize: mobile ? 24 : 30, fontWeight: 800, letterSpacing: -0.8, margin: 0, marginBottom: 12, color: '#fff' }}>{t.leadTitle}</h3>
            <p style={{ fontSize: mobile ? 14 : 15.5, lineHeight: 1.55, margin: 0, marginBottom: 20, color: 'rgba(248,247,246,0.75)', textWrap: 'pretty' }}>{t.leadText}</p>
            <form onSubmit={e => { e.preventDefault(); sendMail(); }} style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <input
                type="email" value={email} onChange={e => setEmail(e.target.value)}
                placeholder={t.leadPlaceholder} required
                style={{
                  flex: 1, minWidth: 200, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(248,247,246,0.24)',
                  color: '#fff', padding: '13px 16px', fontSize: 15, borderRadius: 7, fontFamily: 'inherit', outline: 'none',
                }}
              />
              <button type="submit" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, background: accent, color: '#fff', border: 'none',
                padding: '13px 22px', fontSize: 15, fontWeight: 600, cursor: 'pointer', borderRadius: 7, fontFamily: 'inherit', whiteSpace: 'nowrap',
              }}>{t.leadButton}<Icon name="paper-plane-tilt" size={15} /></button>
            </form>
            <div style={{ fontFamily: KSFonts.mono, fontSize: 10.5, color: 'rgba(248,247,246,0.5)', marginTop: 12, letterSpacing: 0.3 }}>{t.leadHint}</div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section style={{ background: '#fff', borderTop: `1px solid ${KS.border}` }}>
        <div style={{ ...wrap, padding: mobile ? '88px 20px' : '136px 32px', textAlign: 'center' }}>
          <div style={{ fontFamily: KSFonts.mono, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: accent, marginBottom: 16 }}>{t.ctaKicker}</div>
          <h2 style={{ fontSize: mobile ? 30 : 46, fontWeight: 800, letterSpacing: -1.6, lineHeight: 1.05, color: KS.black, margin: '0 auto 16px', maxWidth: 640, textWrap: 'balance' }}>{t.ctaTitle}</h2>
          <p style={{ fontSize: mobile ? 15 : 17, lineHeight: 1.55, color: KS.charcoal, margin: '0 auto 28px', maxWidth: 520, textWrap: 'pretty' }}>{t.ctaText}</p>
          <a href="beratung.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: accent, color: '#fff', padding: '15px 26px', fontSize: 15.5, fontWeight: 600, textDecoration: 'none', borderRadius: 8 }}>{t.ctaBtn}<Icon name="arrow-right" size={16} /></a>
        </div>
      </section>

      <SiteFooter lang={lang} page="steckbrief" maxWidth={1000} />
    </div>
  );
}

function ResCard({ icon, title, sub, href, onClick, soon, soonLabel, accent }) {
  const [hover, setHover] = React.useState(false);
  const inner = (
    <>
      <span style={{ width: 40, height: 40, borderRadius: 10, background: hover ? accent : KS.offwhite, color: hover ? '#fff' : KS.charcoal, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 19, flexShrink: 0, transition: 'all 160ms ease' }}><Icon name={icon} /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontWeight: 700, fontSize: 15.5, color: KS.black, letterSpacing: -0.3 }}>{title}</span>
          {soon && <span style={{ fontFamily: KSFonts.mono, fontSize: 9, letterSpacing: 0.8, textTransform: 'uppercase', color: KS.muted, border: `1px solid ${KS.border}`, borderRadius: 4, padding: '1px 6px' }}>{soonLabel}</span>}
        </div>
        <div style={{ fontSize: 13, color: KS.muted, lineHeight: 1.4, marginTop: 2 }}>{sub}</div>
      </div>
      <Icon name={onClick ? 'arrow-right' : 'arrow-up-right'} size={16} style={{ color: hover ? accent : KS.muted, transition: 'color 160ms ease' }} />
    </>
  );
  const style = {
    display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', textAlign: 'left',
    background: '#fff', border: `1px solid ${hover ? KS.borderStrong : KS.border}`, borderRadius: 12,
    padding: '16px 18px', cursor: 'pointer', color: 'inherit', width: '100%', fontFamily: 'inherit',
    transform: hover ? 'translateY(-2px)' : 'none', boxShadow: hover ? '0 8px 24px -14px rgba(73,70,72,0.4)' : 'none',
    transition: 'all 160ms ease',
  };
  if (onClick) return <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={style}>{inner}</button>;
  return <a href={href} target={href && href !== '#' ? '_blank' : undefined} rel="noreferrer" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={style}>{inner}</a>;
}

const SB_CSS = `
.sb-input {
  width: 100%; border: none; background: transparent; resize: vertical;
  font-family: ${KSFonts.body}; font-size: 14.5px; line-height: 1.5; color: ${KS.charcoal};
  outline: none; padding: 0; min-height: 3em;
}
.sb-input::placeholder { color: rgba(73,70,72,0.4); }
.sb-input-plain { min-height: 2.6em; font-size: 13.5px; }
.sb-print-title { display: none; }

@media print {
  @page { margin: 16mm; }
  /* Alles außer der Steckbrief-Sektion komplett aus dem Fluss nehmen —
     visibility allein ließ leere Extra-Seiten übrig. */
  #root > *:not(:first-child) { display: none !important; }
  #root > :first-child > *:not(.sb-print-section) { display: none !important; }
  .sb-print-section { display: block !important; background: #fff !important; border: none !important; }
  .sb-print-section > div { padding: 0 !important; }
  .sb-print-controls { display: none !important; }
  .sb-print-title { display: block !important; font-family: ${KSFonts.mono}; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: ${KS.coral}; margin-bottom: 16px; }
  .sb-field { break-inside: avoid; box-shadow: none !important; border-color: ${KS.border} !important; }
  .sb-input { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-field { transition: none !important; }
}
`;

Object.assign(window, { SteckbriefPage });