{Array.from({ length: hearts }, (_, i) => ( ))}

{brand.slogan || brand.cats.length ? ( ) : null}

Das sagt die Community

Teile deine Lieblingsmarke mit der Community

Marke

Welche Kleidungsstücke macht diese Marke besonders gut? setPieces(e.target.value)} placeholder="z. B. Tops, Pullover, Jeans, …" />

Warum? setWhy(e.target.value)} placeholder="Was gefällt dir besonders daran …" />

Was magst du noch zu dieser Marke teilen?

setExtra(e.target.value)} rows={3}
                placeholder="Hinweise, gute Erfahrungen, schlechte Erfahrungen, …" />
            </label>

<label className="field">
              <span className="field__lbl">Dein Name</span>
              <input className="input" value={author} onChange={(e) => setAuthor(e.target.value)} placeholder="Optional" />
            </label>

<button className={"btn btn--cta" + (canSend && !sending ? "" : " btn--off")} onClick={send}>
              {sending ? "Wird gesendet …" : "Lieblingsmarke teilen"}
            </button>
            {err ? <p className="field__err">{err}</p> : null}
            <p className="sheet__note muted">Sichtbar wird sie nach einer kurzen Prüfung.</p>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ─── Feedback-Sheet (Marke vorausgewählt) ──────────────────── */
/* Minimaler Weg vom Kachel-Plus: nur Name (Pflicht) + Freitext. Die Marke
   steht fest, Kategorien existieren schon, die Art (Pro/Hinweis/Kontra)
   bestimmt die Notion-Automatisierung später per Sentiment. */
function FeedbackSheet({ brand, onClose, onSubmit }) {
  const [by, setBy] = useState("");
  const [note, setNote] = useState("");
  const [done, setDone] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState("");

const canSend = by.trim().length > 1 && note.trim().length > 1;

return (
    <div className="sheet-overlay" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <button className="sheet__close" onClick={onClose} aria-label="Schließen">
          <svg width="18" height="18" viewBox="0 0 18 18"><path d="M4 4l10 10M14 4L4 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
        </button>

{done ? (
          <div className="sheet__thanks">
            <Logo size={40} />
            <h2>Danke für dein Feedback.</h2>
            <p className="muted">Es wird kurz geprüft und fließt dann in {brand.name} ein.</p>
            <button className="btn btn--ghost" onClick={onClose}>Zurück zur Übersicht</button>
          </div>
        ) : (
          <React.Fragment>
            <h2 className="sheet__h">Dein Feedback zu <em className="sheet__brand">{brand.name}</em>:</h2>

<label className="field">
              <textarea className="input input--area" value={note} onChange={(e) => setNote(e.target.value)} rows={3}
                placeholder="Was möchtest du anderen zu dieser Marke mitgeben? Lob, Hinweis oder Kritik – alles ist willkommen." />
            </label>

<label className="field">
              <span className="field__lbl">Dein Name</span>
              <input className="input" value={by} onChange={(e) => setBy(e.target.value)} placeholder="z. B. Anna" />
            </label>

<button className={"btn btn--cta" + (canSend && !sending ? "" : " btn--off")} onClick={send}>
              {sending ? "Wird gesendet …" : "Feedback senden"}
            </button>
            {err ? <p className="field__err">{err}</p> : null}
            <p className="sheet__note muted">Sichtbar wird es erst nach einer Prüfung.</p>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ─── Wunsch-Sheet (Feature-Wunsch ans Team) ────────────────── */
/* Landet als "Wunsch" in der Originale-DB – getrennt von Empfehlungen,
   zählt NICHT als Onboarding-Beitrag. */
function WishSheet({ onClose, onSubmit }) {
  const [wish, setWish] = useState("");
  const [by, setBy] = useState("");
  const [done, setDone] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState("");

const canSend = wish.trim().length > 2;

{done ? (
          <div className="sheet__thanks">
            <Logo size={40} />
            <h2>Danke für deinen Wunsch.</h2>
            <p className="muted">Wir lesen jeden einzelnen und nehmen ihn mit in die Weiterentwicklung.</p>
            <button className="btn btn--ghost" onClick={onClose}>Zurück zur Übersicht</button>
          </div>
        ) : (
          <React.Fragment>
            <h2 className="sheet__h">Was wünschst du dir?</h2>

<label className="field">
              <textarea className="input input--area" value={wish} onChange={(e) => setWish(e.target.value)} rows={4}
                placeholder="Welche Funktion oder Marke fehlt dir? Was würde die Plattform noch nützlicher machen?" />
            </label>

<div className="sheet__ctarow">
              <button className={"btn btn--cta sheet__cta--auto" + (canSend && !sending ? "" : " btn--off")} onClick={send}>
                {sending ? "Wird gesendet …" : "Wunsch absenden"}
              </button>
            </div>
            {err ? <p className="field__err">{err}</p> : null}
            <p className="sheet__note muted">Wird in Kürze vom Team geprüft.</p>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ─── Onboarding-Gate (erster Login: erst eine Empfehlung teilen) ──
   Wird vor der Übersicht gezeigt, solange die Userin noch keine Empfehlung
   abgegeben hat. Nach erfolgreichem Teilen öffnet sich das Tool. */
function OnboardingGate({ vorname, onDone, onLogout }) {
  const [name, setName] = useState("");
  const [pieces, setPieces] = useState("");
  const [why, setWhy] = useState("");
  const [extra, setExtra] = useState("");
  const [done, setDone] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState("");
  const [knownNames, setKnownNames] = useState([]);

// Bekannte Marken für die Vorschlagsliste laden (Fallback: Beispieldaten).
  useEffect(() => {
    let alive = true;
    fetch("/api/brands")
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((d) => { if (alive) setKnownNames((d.brands || []).map((b) => b.name)); })
      .catch(() => { if (alive) setKnownNames(SEED.map((b) => b.name)); });
    return () => { alive = false; };
  }, []);

const canSend = name.trim().length > 1 && why.trim().length > 1;

return (
    <div className="login onboard">
      <div className="onboard__card">
        <Logo size={44} />
        {done ? (
          <div className="onboard__thanks">
            <p className="eyebrow">Danke für deine Empfehlung</p>
            <h1 className="login__h onboard__thanks-h">Willkommen in der Community{vorname ? ", " + vorname : ""}.</h1>
            <p className="login__sub">Deine Empfehlung wird jetzt geprüft.</p>
            <button className="btn btn--cta" onClick={onDone}>Zur Plattform</button>
          </div>
        ) : (
          <React.Fragment>
            <p className="eyebrow">Willkommen{vorname ? ", " + vorname : ""}</p>
            <h1 className="login__h">Welche Kleidungsmarke würdest du deiner besten Freundin empfehlen?</h1>
            <p className="login__sub">
              Diese Plattform lebt von Geheimtipps und Empfehlungen.
              Teile eine Lieblingsmarke und erhalte danach Zugang zu allen Community Empfehlungen.
            </p>

<form className="onboard__form" onSubmit={send} noValidate>
              <label className="field">
                <span className="field__lbl">Marke</span>
                <BrandNameField value={name} onChange={setName} knownNames={knownNames} placeholder="z. B. Dilling" autoFocus />
              </label>

<label className="field">
                <span className="field__lbl">Welche Kleidungsstücke macht diese Marke besonders gut?</span>
                <input className="input" value={pieces} onChange={(e) => setPieces(e.target.value)} placeholder="z. B. Tops, Pullover, Jeans, …" />
              </label>

<label className="field">
                <span className="field__lbl">Warum?</span>
                <input className="input" value={why} onChange={(e) => setWhy(e.target.value)} placeholder="Was gefällt dir besonders daran …" />
              </label>

<label className="field">
                <span className="field__lbl">Was magst du noch zu dieser Marke teilen?</span>
                <textarea className="input input--area" value={extra} onChange={(e) => setExtra(e.target.value)} rows={3}
                  placeholder="Hinweise, gute Erfahrungen, schlechte Erfahrungen, …" />
              </label>

<div className="onboard__submit">
                <button className={"btn btn--cta" + (canSend && !sending ? "" : " btn--off")} type="submit">
                  {sending ? "Wird gesendet …" : "Einreichen & loslegen"}
                </button>
              </div>
              {err ? <p className="field__err">{err}</p> : null}
            </form>
            {onLogout ? (
              <button className="linklike linklike--quiet" onClick={onLogout}>Abmelden</button>
            ) : null}
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ─── Lade-Splash (während der Login-Status geprüft wird) ────── */
function Splash() {
  return (
    <div className="login">
      <div className="login__card">
        <Logo size={46} />
        <p className="login__sub" style={{ marginTop: 22 }}>Einen Moment …</p>
      </div>
    </div>
  );
}

/* ─── Login-Gate (E-Mail → 6-stelliger Code) ────────────────── */
function LoginView({ onAuthed }) {
  const [step, setStep] = useState("email"); // "email" | "code"
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

const validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());

// Schritt 1: Code anfordern. Antwort ist bewusst generisch (verrät nicht,
  // ob die Adresse berechtigt ist) — wir gehen daher immer zur Code-Eingabe.
  const requestCode = async (e) => {
    e.preventDefault();
    if (busy) return;
    if (!validEmail) { setErr("Bitte gib eine gültige E-Mail-Adresse ein."); return; }
    setErr(""); setBusy(true);
    try {
      const r = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim() }),
      });
      if (!r.ok) throw new Error();
      setCode("");
      setStep("code");
    } catch {
      setErr("Das hat gerade nicht geklappt. Bitte versuch es gleich nochmal.");
    } finally {
      setBusy(false);
    }
  };

// Schritt 2: Code prüfen. Erfolg setzt die Session (Cookie kommt vom Server).
  const verify = async (e) => {
    e.preventDefault();
    if (busy) return;
    const c = code.replace(/\D/g, "");
    if (c.length !== 6) { setErr("Bitte gib den 6-stelligen Code ein."); return; }
    setErr(""); setBusy(true);
    try {
      const r = await fetch("/api/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim(), code: c }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || "Der Code stimmt nicht. Bitte prüfe ihn.");
      onAuthed(data.vorname || "", data.contributed);
    } catch (e2) {
      setErr(e2.message || "Der Code stimmt nicht. Bitte prüfe ihn.");
    } finally {
      setBusy(false);
    }
  };

return (
    <div className="login">
      <div className="login__card">
        <Logo size={46} />
        {step === "code" ? (
          <React.Fragment>
            <h1 className="login__h">Code eingeben.</h1>
            <p className="login__sub">
              Wir haben einen 6-stelligen Code an <strong>{email.trim()}</strong> geschickt.
              Gib ihn hier ein – er gilt 15 Minuten und nur in diesem Browser.
            </p>
            <form onSubmit={verify} className="login__form" noValidate>
              <input
                className={"input" + (err ? " input--err" : "")}
                inputMode="numeric"
                autoComplete="one-time-code"
                pattern="[0-9]*"
                maxLength={6}
                value={code}
                onChange={(e) => { setCode(e.target.value.replace(/\D/g, "").slice(0, 6)); if (err) setErr(""); }}
                placeholder="123456"
                style={{ textAlign: "center", fontSize: "1.4rem", letterSpacing: "0.4em", fontWeight: 500 }}
                autoFocus
              />
              {err ? <p className="field__err">{err}</p> : null}
              <button className={"btn btn--cta" + (busy ? " btn--off" : "")} type="submit">
                {busy ? "Wird geprüft …" : "Einloggen"}
              </button>
            </form>
            <button className="linklike" onClick={() => { setStep("email"); setErr(""); }}>
              Andere E-Mail verwenden
            </button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <p className="eyebrow">Lieblingsmarken</p>
            <h1 className="login__h">Schön, dass du hier bist.</h1>
            <p className="login__sub">
              Gib deine E-Mail ein, wir schicken dir einen 6-stelligen Code (schau auch im Spam-Ordner).
            </p>
            <form onSubmit={requestCode} className="login__form" noValidate>
              <input
                className={"input" + (err ? " input--err" : "")}
                type="email"
                value={email}
                onChange={(e) => { setEmail(e.target.value); if (err) setErr(""); }}
                placeholder="deine@email.de"
                autoComplete="email"
              />
              {err ? <p className="field__err">{err}</p> : null}
              <button className={"btn btn--cta btn--auto" + (busy ? " btn--off" : "")} type="submit">
                {busy ? "Code wird gesendet …" : "Code anfordern"}
              </button>
            </form>
            <p className="login__fine muted">
              Der Zugang gehört zu deinem Kurs. Verwende daher bitte deine Login-E-Mail von The Miracle Wardrobe.
            </p>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* Spaltenzahl fürs Masonry je Fensterbreite (passt zu den CSS-Breakpoints) */
const colsForWidth = (w) => (w >= 1080 ? 4 : w >= 720 ? 2 : 1);

/* ─── Haupt-App ─────────────────────────────────────────────── */
function CommunityView({ vorname, onLogout }) {
  const [brands, setBrands] = useState(null);   // null = lädt noch
  const [filterCats, setFilterCats] = useState(CATEGORIES); // Chips: vom Backend gefüllt
  const [active, setActive] = useState([]);   // gewählte Kategorien (ODER)
  const [q, setQ] = useState("");
  const [openName, setOpenName] = useState(null);
  const [sheet, setSheet] = useState(false);
  const [wish, setWish] = useState(false);    // Wunsch-Sheet offen?
  const [feedbackBrand, setFeedbackBrand] = useState(null); // Kachel-Plus -> Marke
  const [newName, setNewName] = useState(null);
  const [toast, setToast] = useState("");
  // Spaltenzahl fürs Masonry (eigene, unabhängige Spalten -> ruhiges Aufklappen)
  const [cols, setCols] = useState(() => (typeof window !== "undefined" ? colsForWidth(window.innerWidth) : 1));
  useEffect(() => {
    const onResize = () => setCols(colsForWidth(window.innerWidth));
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

// Daten aus der API holen; bei Fehler (z.B. lokale Vorschau ohne Backend)
  // auf die Beispieldaten zurückfallen, damit die Ansicht nie leer bleibt.
  useEffect(() => {
    let alive = true;
    fetch("/api/brands")
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((data) => {
        if (!alive) return;
        setBrands((data.brands || []).map((b) => ({ ...b, votes: b.votes || [] })));
        if (data.categories && data.categories.length) setFilterCats(data.categories);
      })
      .catch(() => { if (alive) setBrands(SEED.map(withCount)); });
    return () => { alive = false; };
  }, []);

const toggleCat = (c) =>
    setActive((p) => (p.includes(c) ? p.filter((x) => x !== c) : [...p, c]));

const results = useMemo(() => {
    const needle = q.trim().toLowerCase();
    const isAllerlei = (b) => b.cats.some((c) => c.toLowerCase() === "allerlei");
    // "Allerlei"-Marken (führen von allem etwas) bleiben sichtbar, wenn nach einem
    // Kleidungsstück gefiltert/gesucht wird – nicht aber bei Schuhen, Unterwäsche etc.
    const APPAREL = [
      "hose", "hosen", "oberteil", "t-shirt", "tshirt", "top", "tops", "rock",
      "basics", "jeans", "langarmoberteil", "langarmoberteile", "strickjacke", "strickjacken",
    ];
    const allerleiKeep =
      active.some((c) => APPAREL.includes(c.toLowerCase())) ||
      (needle.length >= 2 && APPAREL.some((t) => t.includes(needle) || needle.includes(t)));
    return (brands || [])
      .filter((b) => active.length === 0 || b.cats.some((c) => active.includes(c)) || (allerleiKeep && isAllerlei(b)))
      .filter((b) => {
        if (!needle) return true;
        return (
          b.name.toLowerCase().includes(needle) ||
          b.cats.some((c) => c.toLowerCase().includes(needle)) ||
          b.votes.some((v) => v.t.toLowerCase().includes(needle)) ||
          (allerleiKeep && isAllerlei(b))
        );
      })
      .sort((a, b) => b.count - a.count);
  }, [brands, active, q]);

setToast("Danke! Deine Empfehlung wird geprüft.");
    setTimeout(() => setToast(""), 3200);
  };

// Feedback zu einer bestehenden Marke (Kachel-Plus). Marke steht fest,
  // darum nur Name + O-Ton; die Art bestimmt Notion später per Sentiment.
  const addFeedback = async ({ name, note, empfohlenVon }) => {
    const res = await fetch("/api/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ kind: "feedback", name, note, empfohlenVon }),
    });
    if (!res.ok) {
      const info = await res.json().catch(() => ({}));
      throw new Error(info.error || "Speichern fehlgeschlagen");
    }
    // Kein optimistisches Einblenden: Feedback sammelt sich nur in "Originale".
    setToast("Danke! Dein Feedback wird geprüft.");
    setTimeout(() => setToast(""), 3200);
  };

// Feature-Wunsch ans Team. Landet als "Wunsch" in der Originale-DB.
  const addWish = async ({ wish, empfohlenVon }) => {
    const res = await fetch("/api/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ kind: "wunsch", note: wish, empfohlenVon }),
    });
    if (!res.ok) {
      const info = await res.json().catch(() => ({}));
      throw new Error(info.error || "Speichern fehlgeschlagen");
    }
    setToast("Danke! Dein Wunsch ist angekommen.");
    setTimeout(() => setToast(""), 3200);
  };

return (
    <div className="app">
      {/* Kopf / Intro */}
      <header className="hdr">
        <div className="hdr__bar">
          {vorname
            ? <span className="hdr__greet">Schön, dass du hier bist, {vorname}.</span>
            : <span />}
          <div className="hdr__bar-right">
            <Logo size={18} />
            <button className="linklike linklike--quiet" onClick={onLogout}>
              Abmelden
            </button>
          </div>
        </div>
        <div className="hdr__intro">
          <h1>Lieblingsmarken<span className="hdr__byline">der Miracle Wardrobe Community</span></h1>
          <div className="hdr__rule" aria-hidden="true"></div>
          <p>Ehrliche Empfehlungen, von Frauen wie dir.</p>
        </div>
      </header>

{/* Suche + Einreichen-Button */}
      <div className="searchrow">
      <div className="search">
        <svg className="search__ic" width="17" height="17" viewBox="0 0 17 17" fill="none">
          <circle cx="7.2" cy="7.2" r="5.2" stroke="currentColor" strokeWidth="1.3" />
          <path d="M11.2 11.2L15 15" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
        </svg>
        <input className="search__in" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Marke oder Stichwort suchen" />
        {q ? <button className="search__clear" onClick={() => setQ("")} aria-label="Suche leeren">×</button> : null}
      </div>
        <button className="btn btn--cta searchrow__cta" onClick={() => setSheet(true)} aria-label="Empfehlung oder Änderung einreichen" title="Empfehlung oder Änderung einreichen">
          <svg width="29" height="29" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M12 4V20M4 12H20" stroke="currentColor" strokeWidth="1" strokeLinecap="round" />
          </svg>
        </button>
      </div>

{/* Kategorie-Filter */}
      <div className="filters">
        <div className="chips chips--scroll">
          {filterCats.map((c) => (
            <Chip key={c} label={c} active={active.includes(c)} onClick={() => toggleCat(c)} />
          ))}
        </div>
        {active.length > 0 ? (
          <button className="linklike linklike--quiet filters__reset" onClick={() => setActive([])}>
            Filter zurücksetzen
          </button>
        ) : null}
      </div>

{/* Ergebnis-Zeile */}
      <div className="resultline muted">
        {brands === null
          ? "lädt …"
          : results.length === brands.length
          ? `${brands.length} Marken`
          : `${results.length} von ${brands.length} Marken`}
      </div>

{/* Marken-Übersicht. Bei wenigen Treffern (1–2) mittig, ab 3 in eigenen
          Spalten (Masonry) – so klappt eine Karte ruhig auf, ohne die anderen
          Spalten zu verschieben. */}
      {(() => {
        const card = (b) => (
          <BrandCard
            key={b.name}
            brand={b}
            open={openName === b.name}
            isNew={newName === b.name}
            onToggle={() => setOpenName((p) => (p === b.name ? null : b.name))}
            onAdd={() => setFeedbackBrand(b)}
          />
        );
        const few = brands !== null && results.length > 0 && results.length < 3;
        const masonry = brands !== null && results.length >= 3;
        return (
          <main className={"list" + (few ? " list--center" : masonry ? " list--cols" : "")}>
            {brands === null ? (
              <div className="empty">
                <Logo size={36} />
                <p className="muted">Einen Moment, die Marken werden geladen.</p>
              </div>
            ) : results.length === 0 ? (
              <div className="empty">
                <Logo size={36} />
                <p>Noch keine Marke in dieser Auswahl.</p>
                <p className="muted">Magst du die erste teilen, die hierher gehört?</p>
                <button className="btn btn--ghost" onClick={() => setSheet(true)}>Empfehlung teilen</button>
              </div>
            ) : few ? (
              results.map(card)
            ) : (
              Array.from({ length: cols }, (_, c) => (
                <div className="mcol" key={c}>
                  {results.filter((_, i) => i % cols === c).map(card)}
                </div>
              ))
            )}
          </main>
        );
      })()}

<button className="wishfab" onClick={() => setWish(true)} aria-label="Wunsch einreichen" title="Wunsch einreichen">
        <svg width="13" height="13" viewBox="0 0 18 18" fill="none" aria-hidden="true">
          <path d="M9 2.5l1.9 3.9 4.3.6-3.1 3 .7 4.3L9 12.3 5.2 14.3l.7-4.3-3.1-3 4.3-.6z"
            stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
        </svg>
        <span className="wishfab__txt">Wunsch einreichen</span>
      </button>

{toast ? <div className="toast">{toast}</div> : null}
      {sheet ? <SubmitSheet onClose={() => setSheet(false)} onSubmit={addBrand} knownNames={(brands || []).map((b) => b.name)} /> : null}
      {wish ? <WishSheet onClose={() => setWish(false)} onSubmit={addWish} /> : null}
      {feedbackBrand ? (
        <FeedbackSheet brand={feedbackBrand} onClose={() => setFeedbackBrand(null)} onSubmit={addFeedback} />
      ) : null}
    </div>
  );
}

/* ─── Root: prüft Login-Status und wählt die Ansicht ────────── */
function App() {
  // null = wird geprüft, false = ausgeloggt, { vorname, contributed } = eingeloggt
  const [auth, setAuth] = useState(null);

useEffect(() => {
    let alive = true;
    fetch("/api/me")
      .then((r) => r.json())
      .then((d) => {
        if (!alive) return;
        setAuth(d.authenticated ? { vorname: d.vorname || "", contributed: d.contributed !== false } : false);
      })
      .catch(() => { if (alive) setAuth(false); });
    return () => { alive = false; };
  }, []);

const logout = async () => {
    try { await fetch("/api/logout", { method: "POST" }); } catch {}
    setAuth(false);
  };

if (auth === null) return <Splash />;
  if (!auth) {
    return (
      <LoginView
        onAuthed={(vorname, contributed) => setAuth({ vorname: vorname || "", contributed: contributed !== false })}
      />
    );
  }
  // Onboarding-Gate: erst eine Empfehlung teilen, dann das Tool nutzen.
  if (!auth.contributed) {
    return (
      <OnboardingGate
        vorname={auth.vorname}
        onDone={() => setAuth((a) => ({ ...a, contributed: true }))}
        onLogout={logout}
      />
    );
  }
  return <CommunityView vorname={auth.vorname} onLogout={logout} />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

{brand.name}

Danke, dass du teilst.

Teile deine Lieblingsmarke mit der Community