import { useState } from „react“;

const BLUE = „#2B4A82“;
const RED = „#C8301A“;
const INK = „#161616“;
const BG = „#F0EDE6“;
const CARD = „#FAFAF8“;
const LIGHT = „#E2DDD5“;
const MID = „#888“;
const GREEN = „#3D6B5A“;

const archetypes = [
{ id:1, name:“Der Herrscher“, drive:“Dominance“, dc:INK, kw:“Kontrolle · Prestige · Qualität · Verantwortung“, brands:“Mercedes · Rolex · Microsoft · Porsche“, purpose:“Ordnung und Kontrolle in einer chaotischen Welt schaffen.“, voice:“Autoritär, präzise, kein Wort zu viel — niemals erklärend.“, visual:“Dunkel, superlean, Raum als Statussignal.“ },
{ id:2, name:“Der Held“, drive:“Dominance“, dc:INK, kw:“Mut · Leistung · Überwindung · Transformation“, brands:“Nike · BMW · Adidas · Red Cross“, purpose:“Zeigen, dass das Unmögliche möglich ist.“, voice:“Direkt, fordernd, motivierend — kein Weichspülen.“, visual:“Dynamisch, hoher Kontrast, Action — kein Weichzeichner.“ },
{ id:3, name:“Der Weise“, drive:“Dominance“, dc:INK, kw:“Wissen · Wahrheit · Expertise · Vertrauen“, brands:“Google · McKinsey · BBC · Harvard“, purpose:“Die Welt durch Wissen und Wahrheit besser machen.“, voice:“Sachlich, tiefgründig, faktenbasiert — niemals simplifizierend.“, visual:“Clean, typografisch stark — Daten als Design.“ },
{ id:4, name:“Der Entdecker“, drive:“Stimulance“, dc:RED, kw:“Freiheit · Abenteuer · Authentizität · Pioniergeist“, brands:“Patagonia · Jeep · National Geographic · GoPro“, purpose:“Menschen ermutigen, ihr eigenes Leben zu entdecken.“, voice:“Direkt, echt, roh — keine Hochglanz-Rhetorik.“, visual:“Rau, authentisch, weite Räume, natürliche Materialien.“ },
{ id:5, name:“Der Rebell“, drive:“Stimulance“, dc:RED, kw:“Disruption · Regelbruch · Provokation · Freiheit“, brands:“Harley-Davidson · Oatly · Liquid Death · Patagonia“, purpose:“Das System herausfordern, das nicht mehr funktioniert.“, voice:“Provokant, unbequem, selbstbewusst — manchmal grenzwertig.“, visual:“Roh, bewusst anti-ästhetisch oder extrem inszeniert.“ },
{ id:6, name:“Der Schöpfer“, drive:“Stimulance“, dc:RED, kw:“Innovation · Ästhetik · Originalität · Vision“, brands:“Apple · LEGO · Adobe · Dyson“, purpose:“Dinge erschaffen, die es noch nicht gab.“, voice:“Visionär, präzise, ästhetisch — manchmal poetisch.“, visual:“Minimalistisch oder maximalistisch — niemals mittelmäßig.“ },
{ id:7, name:“Der Narr“, drive:“Stimulance“, dc:RED, kw:“Humor · Leichtigkeit · Im-Moment · Verspieltheit“, brands:“Old Spice · Innocent · Skittles · M&M’s“, purpose:“Die Welt weniger ernst nehmen — ohne sie zu ignorieren.“, voice:“Witzig, selbstironisch, unerwartet — Timing ist alles.“, visual:“Bunt, unkonventionell — jede Ecke hat eine Überraschung.“ },
{ id:8, name:“Der Jedermann“, drive:“Balance“, dc:GREEN, kw:“Zugehörigkeit · Ehrlichkeit · Verlässlichkeit · Bodenständigkeit“, brands:“IKEA · Volkswagen · Aldi · eBay“, purpose:“Allen Menschen das Gefühl geben, dazuzugehören.“, voice:“Ehrlich, klar, ohne Übertreibung — warm, aber nie süßlich.“, visual:“Inklusiv, vertraut — keine Eliten-Codes.“ },
{ id:9, name:“Der Fürsorger“, drive:“Balance“, dc:GREEN, kw:“Empathie · Schutz · Gemeinschaft · Sicherheit“, brands:“Johnson & Johnson · UNICEF · Pampers · Dove“, purpose:“Menschen und das, was sie lieben, schützen und pflegen.“, voice:“Warm, verständnisvoll — niemals bevormundend.“, visual:“Weich, menschlich, echte Menschen, warme Farben.“ },
{ id:10, name:“Der Liebende“, drive:“Balance“, dc:GREEN, kw:“Leidenschaft · Schönheit · Intimität · Verbindung“, brands:“Chanel · Lindt · Nespresso · Cartier“, purpose:“Das Begehren nach Schönheit und tiefer Verbindung erfüllen.“, voice:“Sinnlich, poetisch, verführerisch — kein Wort zu wenig.“, visual:“Ästhetisch extrem — Details als Versprechen.“ },
{ id:11, name:“Der Unschuldige“, drive:“Balance“, dc:GREEN, kw:“Optimismus · Reinheit · Einfachheit · Vertrauen“, brands:“Dove · Alnatura · Milka · Innocent Smoothies“, purpose:“Zeigen, dass Gut-Sein stärker ist als Komplexität.“, voice:“Optimistisch, warm, ehrlich — niemals zynisch.“, visual:“Hell, rein, natürlich — keine Ironie im Bild.“ },
{ id:12, name:“Der Magier“, drive:“Dom / Stim“, dc:“#7A4F1E“, kw:“Transformation · Vision · Charisma · Wunder“, brands:“Disney · Tesla · Red Bull · Mastercard“, purpose:“Das Unmögliche wirklich werden lassen.“, voice:“Visionär, charismatisch — ein Schritt voraus.“, visual:“Transformative Bilder — magische Momente, nie Alltag.“ },
];

const driveGroups = [
{ drive:“Dominance“, color:INK, desc:“Macht · Status · Leistung · Kontrolle“, ids:[1,2,3] },
{ drive:“Stimulance“, color:RED, desc:“Freiheit · Abenteuer · Neugier · Disruption“, ids:[4,5,6,7] },
{ drive:“Balance“, color:GREEN, desc:“Sicherheit · Harmonie · Fürsorge · Zugehörigkeit“, ids:[8,9,10,11] },
{ drive:“Dom / Stim“, color:“#7A4F1E“, desc:“Transformation · Magie · Vision“, ids:[12] },
];

const auditBlocks = [
{
mode:“V“, eyebrow:“Vertikale Analyse — Tiefenbohrung“, title:“Herkunft & Haltung“,
qs:[„Warum existiert diese Marke? (Ursprung — nicht die Marketing-Antwort.)“,
„Was ist die eine Überzeugung, die die Gründer niemals aufgeben würden?“,
„Was macht die Marke, das kein Wettbewerber genauso tut?“,
„Wie hat sich die Marke verändert — und was ist konstant geblieben?“]
},
{
mode:“V“, eyebrow:“Vertikale Analyse — Kräftefeld“, title:“Markt & Wettbewerb“,
qs:[„Welche 3 Marken sind die direkten Wettbewerber — und warum genau diese?“,
„Welche Codes dominieren die Kategorie? (visuell, sprachlich, emotional)“,
„Welche Positionierungsfelder sind überfüllt — wo ist noch Raum?“,
„Wo ist diese Marke objektiv stärker als der Wettbewerb?“]
},
{
mode:“V“, eyebrow:“Vertikale Analyse — Menschenkenntnis“, title:“Zielgruppe & Limbisches Profil“,
qs:[„Welche limbische Hauptmotivation treibt die Kernzielgruppe? (Dominanz / Stimulanz / Balance)“,
„Was fürchtet die Zielgruppe? Was begehrt sie — auch wenn sie es nicht ausspricht?“,
„Wie spricht die Zielgruppe über Marken in dieser Kategorie?“,
„Wem vertrauen sie — und warum genau diesen Quellen?“]
},
{
mode:“V“, eyebrow:“Vertikale Analyse — Realitätsprüfung“, title:“Bestehende Markenidentität“,
qs:[„Welche 5 Adjektive beschreiben den aktuellen Tonfall der Kommunikation?“,
„Welche Kampagne der letzten 3 Jahre war am stärksten — warum?“,
„Wie würde die Marke klingen, wenn sie eine Person wäre?“,
„Was sagt die Marke visuell — bewusst oder zufällig?“]
},
{
mode:“L“, eyebrow:“Laterales Denken — Was wäre, wenn?“, title:“Provokations-Fragen“,
qs:[„Wenn diese Marke ein Film wäre — welcher? Warum genau dieser?“,
„Welche Kategorie-Konvention würde die Marke brechen, wenn sie nichts zu verlieren hätte?“,
„Was ist das Gegenteil von allem, was die Kategorie normalerweise kommuniziert?“,
„Welche Emotion besetzt kein Wettbewerber — obwohl die Zielgruppe sie täglich fühlt?“]
},
{
mode:“L“, eyebrow:“Laterales Denken — Kategorie verlassen“, title:“Analogie-Transfer“,
qs:[„Welche Marke aus einer völlig anderen Branche hat die gleiche Energie?“,
„Wenn die Marke eine Stadt wäre — welche? Wie klingt, riecht, fühlt sie sich an?“,
„Was könnte sie von einer Luxusmarke lernen? Was von einem Start-up?“,
„Wenn diese Marke ein Buch wäre — welches Genre, welcher Autor, welcher Stil?“]
},
{
mode:“L“, eyebrow:“Laterales Denken — Unbesetzte Wahrheit“, title:“Kulturelle Spannung“,
qs:[„Welchen gesellschaftlichen Widerspruch könnte diese Marke glaubwürdig verkörpern?“,
„Was denken die Kunden wirklich — sprechen es aber nicht aus (Tabuthema der Kategorie)?“,
„Welches Thema wächst kulturell — das die Marke als erste besetzen könnte?“,
„Was würde ein ehrlicher Kunde sagen, wenn kein Marketingmensch im Raum wäre?“]
},
{
mode:“L“, eyebrow:“Laterales Denken → Konsequenz“, title:“Ableitung: Branding & Kommunikation“,
qs:[„Welches visuelle Signal wäre unverwechselbar für diese Marke — und noch ungenutzt?“,
„Welcher eine Satz (keine Tagline — eine Haltung) fasst zusammen, wofür die Marke steht?“,
„Welches Thema sollte jede Kampagne berühren — unabhängig vom Produkt?“,
„Was muss die Marke aufgeben, um glaubwürdig zu sein?“]
},
];

function Kompass({ arc }) {
const [nd, setNd] = useState({ N:““, E:““, S:““, W:““ });

if (!arc) return (
<div style={{ textAlign:“center“, padding:“80px 20px“ }}>
<p style={{ fontSize:14, color:MID }}>← Wähle zuerst einen Archetypen in Tab 2.</p>
</div>
);

const sz = 380, cx = sz/2, cy = sz/2, ri = 76;
const pts = [
{ k:“N“, angle:-90, label:“WARUM“, sub:“Purpose / Versprechen“, ph:“Wofür existiert die Marke wirklich?“ },
{ k:“E“, angle:0, label:“WIE“, sub:“Visual / Ästhetik“, ph:“Wie sieht die Marke aus?“ },
{ k:“S“, angle:90, label:“WAS“, sub:“Tonalität / Voice“, ph:“Wie klingt und spricht die Marke?“ },
{ k:“W“, angle:180, label:“WEM“, sub:“Zielgruppe / Limbisch“, ph:“Wen spricht die Marke wirklich an?“ },
];
const xy = (a, r) => ({ x: cx + r*Math.cos(a*Math.PI/180), y: cy + r*Math.sin(a*Math.PI/180) });

return (
<div>
<div style={{ marginBottom:28 }}>
<p style={{ fontSize:10, letterSpacing:“0.18em“, color:arc.dc, textTransform:“uppercase“, fontWeight:700, margin:“0 0 6px“ }}>
Markenkompass · {arc.drive}
</p>
<h2 style={{ fontSize:“clamp(22px,3.5vw,34px)“, fontWeight:800, letterSpacing:“-0.03em“, color:INK, margin:“0 0 6px“ }}>
{arc.name}
</h2>
<p style={{ fontSize:13, color:MID, margin:0 }}>{arc.kw}</p>
</div>

<div style={{ display:“grid“, gridTemplateColumns:“1fr 1fr“, gap:32, alignItems:“start“, marginBottom:32 }}>
{/* SVG Compass */}
<div style={{ display:“flex“, justifyContent:“center“ }}>
<svg viewBox={`0 0 ${sz} ${sz}`} style={{ width:“100%“, maxWidth:320 }}>
{/* rings */}
<circle cx={cx} cy={cy} r={sz/2-6} fill=“none“ stroke={LIGHT} strokeWidth=“1″ />
<circle cx={cx} cy={cy} r={sz/2-22} fill=“none“ stroke={LIGHT} strokeWidth=“0.5″ strokeDasharray=“3,5″ />
<circle cx={cx} cy={cy} r={sz/2-40} fill=“none“ stroke={LIGHT} strokeWidth=“0.5″ />

{/* Cardinal lines */}
{pts.map(p => {
const a = xy(p.angle, ri+4), b = xy(p.angle, sz/2-26);
return <line key={p.k} x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke={arc.dc} strokeWidth=“1.2″ opacity=“0.35″ />;
})}
{/* Diagonal lines */}
{[45,135,225,315].map(a => {
const s = xy(a, ri+4), e = xy(a, sz/2-26);
return <line key={a} x1={s.x} y1={s.y} x2={e.x} y2={e.y} stroke={arc.dc} strokeWidth=“0.5″ opacity=“0.15″ />;
})}

{/* Center */}
<circle cx={cx} cy={cy} r={ri} fill={arc.dc} />
<circle cx={cx} cy={cy} r={ri-9} fill=“none“ stroke=“rgba(255,255,255,0.12)“ strokeWidth=“1″ />
<text x={cx} y={cy-16} textAnchor=“middle“ fontSize=“9″ fill=“rgba(255,255,255,0.5)“ fontWeight=“700″ letterSpacing=“0.12em“>{arc.drive.toUpperCase()}</text>
<text x={cx} y={cy+2} textAnchor=“middle“ fontSize=“13″ fill=“white“ fontWeight=“800″ letterSpacing=“-0.02em“>
{arc.name.replace(„Der „,““).replace(„Die „,““)}
</text>
<text x={cx} y={cy+18} textAnchor=“middle“ fontSize=“8.5″ fill=“rgba(255,255,255,0.45)“>Archetyp</text>

{/* Cardinal dots + labels */}
{pts.map(p => {
const dot = xy(p.angle, sz/2-32);
const lbl = xy(p.angle, sz/2-10);
const slbl = xy(p.angle, sz/2+5);
return (
<g key={p.k+“lbl“}>
<circle cx={dot.x} cy={dot.y} r=“3.5″ fill={arc.dc} opacity=“0.55″ />
<text x={lbl.x} y={lbl.y-2} textAnchor=“middle“ fontSize=“9″ fontWeight=“800″ fill={INK} letterSpacing=“0.12em“>{p.label}</text>
<text x={slbl.x} y={slbl.y+8} textAnchor=“middle“ fontSize=“7.5″ fill={MID}>{p.sub.split(„/“)[0].trim()}</text>
</g>
);
})}
</svg>
</div>

{/* Input fields */}
<div style={{ display:“flex“, flexDirection:“column“, gap:14 }}>
{pts.map(p => (
<div key={p.k}>
<div style={{ display:“flex“, gap:8, alignItems:“baseline“, marginBottom:5 }}>
<span style={{ fontSize:9, fontWeight:800, letterSpacing:“0.14em“, color:arc.dc }}>{p.k}</span>
<span style={{ fontSize:11, fontWeight:700, letterSpacing:“0.1em“, textTransform:“uppercase“, color:INK }}>{p.label}</span>
<span style={{ fontSize:10, color:MID }}>— {p.sub}</span>
</div>
<textarea
value={nd[p.k]}
onChange={e => setNd(n => ({ …n, [p.k]: e.target.value }))}
placeholder={p.ph}
rows={2}
style={{ width:“100%“, background:CARD, border:`1px solid ${LIGHT}`, borderLeft:`3px solid ${arc.dc}`,
padding:“9px 11px“, fontFamily:“inherit“, fontSize:13, color:INK, resize:“vertical“, outline:“none“,
boxSizing:“border-box“, lineHeight:1.5 }}
/>
</div>
))}
</div>
</div>

{/* Kampagnen-Konsequenz */}
<div style={{ borderTop:`1px solid ${LIGHT}`, paddingTop:24, marginBottom:20 }}>
<p style={{ fontSize:10, letterSpacing:“0.14em“, textTransform:“uppercase“, color:arc.dc, fontWeight:700, margin:“0 0 16px“ }}>
Kampagnen-Konsequenz
</p>
<div style={{ display:“grid“, gridTemplateColumns:“1fr 1fr 1fr“, gap:12 }}>
{[
{ label:“Visueller Stil“, val:arc.visual },
{ label:“Sprachliche Haltung“, val:arc.voice },
{ label:“Markenkern“, val:arc.purpose },
].map(it => (
<div key={it.label} style={{ background:CARD, border:`1px solid ${LIGHT}`, padding:“14px 14px“ }}>
<p style={{ fontSize:9, letterSpacing:“0.12em“, textTransform:“uppercase“, color:MID, fontWeight:700, margin:“0 0 7px“ }}>{it.label}</p>
<p style={{ fontSize:12, color:INK, lineHeight:1.6, margin:0 }}>{it.val}</p>
</div>
))}
</div>
</div>

{/* Haltungssatz */}
<div style={{ background:INK, padding:“20px 24px“ }}>
<p style={{ fontSize:9, letterSpacing:“0.16em“, textTransform:“uppercase“, color:“rgba(255,255,255,0.35)“, margin:“0 0 10px“, fontWeight:700 }}>
Marken-Haltungssatz (ausfüllen)
</p>
<textarea
placeholder={`Diese Marke ist ${arc.name} ihrer Kategorie. Sie existiert, um ___. Sie richtet sich an Menschen, die ___. Sie klingt wie ___ und sieht aus wie ___.`}
rows={3}
style={{ width:“100%“, background:“transparent“, border:“none“, borderBottom:“1px solid rgba(255,255,255,0.12)“,
color:“white“, fontFamily:“inherit“, fontSize:14, lineHeight:1.65, letterSpacing:“-0.01em“,
outline:“none“, resize:“none“, boxSizing:“border-box“, paddingBottom:8 }}
/>
</div>
</div>
);
}

export default function BrandAuditTool() {
const [tab, setTab] = useState(0);
const [sel, setSel] = useState(null);
const arc = archetypes.find(a => a.id === sel);
const tabs = [„Brand Audit“,“Archetypen“,“Markenkompass“];
const tabColors = [BLUE, RED, GREEN];

return (
<div style={{ background:BG, minHeight:“100vh“, fontFamily:“‚Inter‘,’Helvetica Neue‘,Arial,sans-serif“, color:INK }}>

{/* Header */}
<div style={{ background:INK, padding:“28px 32px“ }}>
<p style={{ fontSize:10, letterSpacing:“0.2em“, color:RED, textTransform:“uppercase“, fontWeight:700, margin:“0 0 8px“ }}>
Brand Audit · Archetypen · Markenkompass
</p>
<h1 style={{ fontSize:“clamp(20px,3.5vw,30px)“, fontWeight:800, letterSpacing:“-0.03em“, color:“white“, margin:0, lineHeight:1.15 }}>
Wer ist diese Marke wirklich?
</h1>
<p style={{ fontSize:13, color:“rgba(255,255,255,0.4)“, margin:“10px 0 0″, maxWidth:540 }}>
Senkrechtes Weltbild + Laterales Denken → Archetyp-Bestimmung → Markenkompass.
Von der Tiefenanalyse zur Kommunikations-Konsequenz.
</p>
</div>

{/* Tab bar */}
<div style={{ background:INK, borderTop:“1px solid rgba(255,255,255,0.07)“, display:“flex“, alignItems:“stretch“, paddingLeft:32 }}>
{tabs.map((t, i) => (
<button key={t} onClick={() => setTab(i)} style={{ background:“none“, border:“none“,
borderBottom:`2px solid ${tab===i ? tabColors[i] : „transparent“}`,
color: tab===i ? „white“ : „rgba(255,255,255,0.35)“,
fontSize:12, fontWeight:700, letterSpacing:“0.1em“, textTransform:“uppercase“,
padding:“13px 20px 11px“, cursor:“pointer“, transition:“all 0.15s“ }}>
{t}
</button>
))}
{arc && (
<div style={{ marginLeft:“auto“, display:“flex“, alignItems:“center“, paddingRight:28, gap:8 }}>
<div style={{ width:8, height:8, borderRadius:“50%“, background:arc.dc }} />
<span style={{ fontSize:11, color:“rgba(255,255,255,0.45)“, letterSpacing:“0.06em“ }}>{arc.name}</span>
</div>
)}
</div>

{/* Content */}
<div style={{ padding:“36px 32px“, maxWidth:880, margin:“0 auto“ }}>

{/* ── TAB 0: AUDIT ── */}
{tab === 0 && (
<div>
{/* Framework explanation */}
<div style={{ display:“grid“, gridTemplateColumns:“1fr 1fr“, gap:14, marginBottom:40 }}>
<div style={{ background:CARD, borderLeft:`3px solid ${BLUE}`, padding:“18px 20px“ }}>
<p style={{ fontSize:10, letterSpacing:“0.14em“, textTransform:“uppercase“, color:BLUE, fontWeight:700, margin:“0 0 8px“ }}>
Senkrechtes Weltbild — Vertikales Denken
</p>
<p style={{ fontSize:13, color:INK, lineHeight:1.65, margin:0 }}>
Du bohrst tiefer in dasselbe Loch. Systematisch, logisch, kategorie-intern.
Ziel: verstehen, was die Marke heute wirklich ist — jenseits aller Wunschvorstellungen.
</p>
</div>
<div style={{ background:CARD, borderLeft:`3px solid ${RED}`, padding:“18px 20px“ }}>
<p style={{ fontSize:10, letterSpacing:“0.14em“, textTransform:“uppercase“, color:RED, fontWeight:700, margin:“0 0 8px“ }}>
Laterales Denken — Seitwärtsbewegung
</p>
<p style={{ fontSize:13, color:INK, lineHeight:1.65, margin:0 }}>
Du gräbst ein neues Loch an einer anderen Stelle. Provokation, Analogie, Kategoriebruch.
Ziel: die unbesetzte Wahrheit finden, die kein Wettbewerber sieht.
</p>
</div>
</div>

{/* Sections */}
{auditBlocks.map((b, i) => {
const isL = b.mode === „L“;
const ac = isL ? RED : BLUE;
return (
<div key={i} style={{ marginBottom:30 }}>
<div style={{ borderLeft:`3px solid ${ac}`, paddingLeft:16, marginBottom:14 }}>
<p style={{ fontSize:9, letterSpacing:“0.15em“, textTransform:“uppercase“, color:ac, fontWeight:700, margin:“0 0 4px“ }}>
{b.eyebrow}
</p>
<h3 style={{ fontSize:17, fontWeight:700, letterSpacing:“-0.02em“, color:INK, margin:0 }}>{b.title}</h3>
</div>
<div style={{ display:“grid“, gridTemplateColumns:“1fr 1fr“, gap:10 }}>
{b.qs.map((q, j) => (
<div key={j} style={{ background:CARD, border:`1px solid ${LIGHT}`, padding:“14px 16px“ }}>
<p style={{ fontSize:12, color:ac, fontWeight:700, margin:“0 0 9px“, lineHeight:1.45 }}>{q}</p>
<textarea rows={3} placeholder=“Antwort eingeben …“
style={{ width:“100%“, background:“transparent“, border:“none“, borderTop:`1px solid ${LIGHT}`,
paddingTop:8, fontFamily:“inherit“, fontSize:12, color:“#444″, resize:“vertical“,
outline:“none“, boxSizing:“border-box“, lineHeight:1.55 }} />
</div>
))}
</div>
</div>
);
})}

<div style={{ marginTop:8, padding:“16px 20px“, background:INK, display:“flex“, alignItems:“center“, justifyContent:“space-between“, flexWrap:“wrap“, gap:12 }}>
<p style={{ fontSize:13, color:“rgba(255,255,255,0.5)“, margin:0 }}>Audit abgeschlossen? Weiter zur Archetypen-Bestimmung.</p>
<button onClick={() => setTab(1)} style={{ background:RED, border:“none“, color:“white“, fontSize:12, fontWeight:700, letterSpacing:“0.1em“, padding:“10px 22px“, cursor:“pointer“, textTransform:“uppercase“ }}>
Archetypen →
</button>
</div>
</div>
)}

{/* ── TAB 1: ARCHETYPEN ── */}
{tab === 1 && (
<div>
<p style={{ fontSize:13, color:MID, marginBottom:32, maxWidth:560, lineHeight:1.6 }}>
Wähle den Archetypen, der am stärksten mit den Audit-Erkenntnissen resoniert.
Nicht den, der sein sollte — sondern den, der ist oder glaubwürdig werden kann.
</p>

{driveGroups.map(g => (
<div key={g.drive} style={{ marginBottom:36 }}>
<div style={{ display:“flex“, alignItems:“center“, gap:12, marginBottom:14, paddingBottom:12, borderBottom:`1px solid ${LIGHT}` }}>
<div style={{ width:10, height:10, borderRadius:“50%“, background:g.color, flexShrink:0 }} />
<span style={{ fontSize:13, fontWeight:800, color:INK }}>{g.drive}</span>
<span style={{ fontSize:11, color:MID }}>{g.desc}</span>
</div>
<div style={{ display:“grid“, gridTemplateColumns:“repeat(auto-fill,minmax(195px,1fr))“, gap:12 }}>
{archetypes.filter(a => g.ids.includes(a.id)).map(a => {
const isS = sel === a.id;
return (
<div key={a.id} onClick={() => setSel(isS ? null : a.id)}
style={{ background:isS ? a.dc : CARD, border:`1.5px solid ${isS ? a.dc : LIGHT}`,
padding:“16px 16px“, cursor:“pointer“, transition:“all 0.15s“ }}>
<p style={{ fontSize:14, fontWeight:800, letterSpacing:“-0.02em“, color:isS ? „white“ : INK, margin:“0 0 6px“ }}>{a.name}</p>
<p style={{ fontSize:11, color:isS ? „rgba(255,255,255,0.55)“ : MID, lineHeight:1.5, margin:“0 0 8px“ }}>{a.kw}</p>
<p style={{ fontSize:10, color:isS ? „rgba(255,255,255,0.35)“ : „#BBB“, margin:0, fontStyle:“italic“ }}>{a.brands}</p>
</div>
);
})}
</div>
</div>
))}

{arc && (
<div style={{ marginTop:8, padding:“16px 20px“, background:INK, display:“flex“, alignItems:“center“, justifyContent:“space-between“, flexWrap:“wrap“, gap:12 }}>
<div>
<p style={{ fontSize:9, color:“rgba(255,255,255,0.35)“, margin:“0 0 4px“, letterSpacing:“0.12em“, textTransform:“uppercase“ }}>Ausgewählter Archetyp</p>
<p style={{ fontSize:14, fontWeight:700, color:“white“, margin:0 }}>{arc.name} · {arc.drive}</p>
</div>
<button onClick={() => setTab(2)} style={{ background:GREEN, border:“none“, color:“white“, fontSize:12, fontWeight:700, letterSpacing:“0.1em“, padding:“10px 22px“, cursor:“pointer“, textTransform:“uppercase“ }}>
Kompass bauen →
</button>
</div>
)}
</div>
)}

{/* ── TAB 2: KOMPASS ── */}
{tab === 2 && <Kompass arc={arc} />}
</div>

{/* Footer */}
<div style={{ borderTop:`1px solid ${LIGHT}`, padding:“18px 32px“, display:“flex“, justifyContent:“space-between“, alignItems:“center“, flexWrap:“wrap“, gap:12 }}>
<p style={{ fontSize:11, color:MID, margin:0 }}>Brand Before Budget · Archetypen-System auf Basis limbischer Neurowissenschaft</p>
<p style={{ fontSize:11, color:MID, margin:0 }}>Dominanz · Stimulanz · Balance</p>
</div>
</div>
);
}