// agent-anatomie.jsx — "Woraus ein Agent besteht": PixelKilian in der Mitte,
// die Steckbrief-Bausteine als Flip-Karten drumherum, feine Linien zum Avatar.
// Werkzeuge zeigt auf den Laptop. Klick: Karte dreht sich, wächst, erklärt sich.
// Ohne Ergebnis & Auslöser; Grenzen + Freigabe zusammengefasst.
const ANAT_COPY = {
de: {
kicker: 'Die Anatomie',
title: 'Woraus ein Agent besteht',
intro: 'Acht Bausteine machen aus einem Modell einen Kollegen. Klick auf eine Karte — im Steckbrief unten legst du genau diese Bausteine fest.',
flipHint: 'Klicken zum Umdrehen',
},
en: {
kicker: 'The anatomy',
title: 'What an agent is made of',
intro: 'Eight building blocks turn a model into a colleague. Click a card — the brief below is where you define exactly these.',
flipHint: 'Click to flip',
},
};
// side/slot steuern die Position im Desktop-Layout (4 links, 4 rechts).
// target = Punkt auf dem Avatar (Design-Koordinaten), zu dem die Linie läuft.
const ANAT_ITEMS = [
{
id: 'job', icon: 'flag', side: 'left', slot: 0,
de: { label: 'Job', hint: 'Wozu ist er da?', back: 'Als [Rolle] brauche ich [Agent], damit [Ziel] — das Mandat in einem Satz, nicht die Technik. Faustregel: Steht der Satz nicht, steht der Agent nicht.' },
en: { label: 'Job', hint: 'What is it for?', back: 'As [role] I need [agent] so that [goal] — the mandate in one sentence, not the tech. Rule of thumb: if the sentence doesn\u2019t stand, the agent doesn\u2019t either.' },
},
{
id: 'ausloeser', icon: 'lightning', side: 'left', slot: 1,
de: { label: 'Auslöser', hint: 'Wann wird er aktiv?', back: 'Neue Mail, Formular, feste Uhrzeit, Knopfdruck — der Startschuss. Entscheidet, ob du einen Chatbot oder einen Cron-Job baust. Faustregel: Kein Auslöser, kein Agent.' },
en: { label: 'Trigger', hint: 'When does it start?', back: 'New mail, a form, a fixed time, a button press — the starting gun. Decides whether you build a chatbot or a cron job. Rule of thumb: no trigger, no agent.' },
},
{
id: 'wissen', icon: 'books', side: 'left', slot: 2,
de: { label: 'Wissen', hint: 'Was muss er kennen?', back: 'Leistungen, Preise, Tonfall, interne Regeln — das Wissen, das nicht im Modell steckt. Der Unterschied zwischen generisch und deins. Faustregel: Was ein neuer Mitarbeiter am ersten Tag bräuchte.' },
en: { label: 'Knowledge', hint: 'What must it know?', back: 'Services, prices, tone, internal rules — the knowledge that isn\u2019t in the model. The difference between generic and yours. Rule of thumb: what a new hire would need on day one.' },
},
{
id: 'werkzeuge', icon: 'wrench', side: 'left', slot: 3, toLaptop: true,
de: { label: 'Werkzeuge', hint: 'Worauf darf er zugreifen?', back: 'Postfach, Kalender, CRM, Dateiablage — die Systeme, auf die er zugreifen darf. Faustregel: so wenig wie möglich, so viel wie nötig.' },
en: { label: 'Tools', hint: 'What may it access?', back: 'Inbox, calendar, CRM, file storage — the systems it may access. Rule of thumb: as little as possible, as much as needed.' },
},
{
id: 'aufgaben', icon: 'list-checks', side: 'right', slot: 0,
de: { label: 'Aufgaben', hint: 'Was erledigt er konkret?', back: 'Lesen, einordnen, entwerfen, verschicken — die konkreten Handgriffe als Verben, nicht als Themen. Faustregel: Was du nicht als Tätigkeit aufschreiben kannst, kann er nicht tun.' },
en: { label: 'Tasks', hint: 'What does it actually do?', back: 'Read, classify, draft, send — the concrete steps as verbs, not topics. Rule of thumb: what you can\u2019t write down as an activity, it can\u2019t do.' },
},
{
id: 'ergebnis', icon: 'seal-check', side: 'right', slot: 1,
de: { label: 'Ergebnis', hint: 'Woran merkst du, dass er gut war?', back: 'Ein freigabefertiger Entwurf, ein sauber getaggter Eintrag — das prüfbare Resultat. Faustregel: Beschreib das fertige Ergebnis, nicht die gute Absicht.' },
en: { label: 'Result', hint: 'How do you know it did well?', back: 'A ready-to-approve draft, a cleanly tagged entry — the checkable result. Rule of thumb: describe the finished result, not the good intention.' },
},
{
id: 'grenzen', icon: 'hand-palm', side: 'right', slot: 2,
de: { label: 'Grenzen & Freigabe', hint: 'Was darf er allein?', back: 'Reversibles darf er allein, Verbindliches braucht Freigabe — autonom heißt nicht unkontrolliert. Faustregel: Was du nicht zurücknehmen kannst, braucht einen Menschen davor.' },
en: { label: 'Limits & approval', hint: 'What may it do alone?', back: 'Reversible things it does alone; binding things need approval — autonomous doesn\u2019t mean uncontrolled. Rule of thumb: what you can\u2019t take back needs a human in front of it.' },
},
{
id: 'datenrisiko', icon: 'lock-key', side: 'right', slot: 3, risk: true,
de: { label: 'Datenrisiko', hint: 'Was, wenn\u2019s schiefgeht?', back: 'Mandantendaten, Gesundheits-, Zahlungsdaten — was durch ihn fließt. Das Risiko entsteht aus Wissen × Werkzeuge, nicht aus dem Feld. Faustregel: Nicht „wie sensibel“, sondern „was passiert, wenn er auf die falschen Daten losgeht“.' },
en: { label: 'Data risk', hint: 'What if it goes wrong?', back: 'Client, health, payment data — what flows through it. The risk comes from knowledge × tools, not from the field. Rule of thumb: not “how sensitive” but “what happens if it goes at the wrong data”.' },
},
];
// ── Desktop-Geometrie (Design-Koordinaten, wird als Ganzes skaliert) ──
const ANAT_W = 936;
const ANAT_H = 720;
const ANAT_CARD_W = 250;
const ANAT_CARD_H = 150;
const ANAT_ROWS_Y = [0, 190, 380, 570];
// Avatar: PixelKilian size 260 → 260×232, zentriert
const ANAT_AV_SIZE = 260;
const ANAT_AV_W = ANAT_AV_SIZE;
const ANAT_AV_H = Math.round(ANAT_AV_SIZE * 880 / 985);
const ANAT_AV_X = (ANAT_W - ANAT_AV_W) / 2; // 338
const ANAT_AV_Y = (ANAT_H - ANAT_AV_H) / 2; // 244
// Linien-Ziele auf dem Avatar. Laptop sitzt im Bild bei ~x 60–95 %, y 68–92 %.
const ANAT_TARGETS = {
job: [ANAT_AV_X + ANAT_AV_W * 0.36, ANAT_AV_Y + ANAT_AV_H * 0.18],
ausloeser: [ANAT_AV_X + ANAT_AV_W * 0.26, ANAT_AV_Y + ANAT_AV_H * 0.42],
wissen: [ANAT_AV_X + ANAT_AV_W * 0.24, ANAT_AV_Y + ANAT_AV_H * 0.64],
werkzeuge: [ANAT_AV_X + ANAT_AV_W * 0.60, ANAT_AV_Y + ANAT_AV_H * 0.88], // Laptop (Tastatur-Seite)
aufgaben: [ANAT_AV_X + ANAT_AV_W * 0.62, ANAT_AV_Y + ANAT_AV_H * 0.16],
ergebnis: [ANAT_AV_X + ANAT_AV_W * 0.80, ANAT_AV_Y + ANAT_AV_H * 0.40],
grenzen: [ANAT_AV_X + ANAT_AV_W * 0.82, ANAT_AV_Y + ANAT_AV_H * 0.62],
datenrisiko: [ANAT_AV_X + ANAT_AV_W * 0.90, ANAT_AV_Y + ANAT_AV_H * 0.78], // Laptop (Bildschirm)
};
function anatCardPos(item) {
const x = item.side === 'left' ? 0 : ANAT_W - ANAT_CARD_W;
const y = ANAT_ROWS_Y[item.slot];
return { x, y };
}
function anatLine(item) {
const { x, y } = anatCardPos(item);
const ax = item.side === 'left' ? x + ANAT_CARD_W : x;
const ay = y + ANAT_CARD_H / 2;
const [tx, ty] = ANAT_TARGETS[item.id];
const mx = (ax + tx) / 2;
return { d: `M ${ax} ${ay} Q ${mx} ${ay}, ${tx} ${ty}`, tx, ty };
}
// ── Eine Flip-Karte ──────────────────────────────────────────
function AnatCard({ item, lang, accent, active, onToggle, flipHint, style = {}, growScale = 1.24 }) {
const c = item[lang];
return (
);
}
// ── Sektion ──────────────────────────────────────────────────
function AgentAnatomie({ lang, accent, mobile }) {
const t = ANAT_COPY[lang];
const [active, setActive] = React.useState(null);
const toggle = (id) => setActive(a => (a === id ? null : id));
React.useEffect(() => {
const h = (e) => { if (e.key === 'Escape') setActive(null); };
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, []);
// Skalierung des Desktop-Diagramms auf die Containerbreite
const outerRef = React.useRef(null);
const [scale, setScale] = React.useState(1);
React.useEffect(() => {
const measure = () => {
if (outerRef.current) setScale(Math.min(1, outerRef.current.clientWidth / ANAT_W));
};
measure();
window.addEventListener('resize', measure);
return () => window.removeEventListener('resize', measure);
}, [mobile]);
const wrap = { maxWidth: 1000, margin: '0 auto', padding: mobile ? '0 20px' : '0 32px' };
return (