/* Caballo Natural – Static pages: Products, About, Philosophy, FAQ, Blog, Contact, Consultation */
const { useState: useStateP, useMemo: useMemoP } = React;

// ============ PRODUCTS PAGE (Shop layout) ============
const LINE_KEYS = {
  "Cobs – Basisfutter": { key: "cobs", label: "Cobs", badge: "COBS", shopClass: "line-cobs", note: "Basisfutter" },
  "Fluidkonzentrate": { key: "fluid", label: "Fluide", badge: "FLUID", shopClass: "line-fluid", note: "30 €/L" },
  "Intensiv-Booster": { key: "pulver", label: "Pulver", badge: "PULVER", shopClass: "line-pulver", note: "49 €/300g" },
  "Externa – Salben & Lösungen": { key: "externa", label: "Externa", badge: "EXTERNA", shopClass: "line-externa", note: "Topisch" },
  "Einzelkräuter": { key: "einzel", label: "Einzelkräuter", badge: "HERB", shopClass: "line-einzel", note: "Mono-Kräuter" },
  "Supplements": { key: "suppl", label: "Supplements", badge: "SUPPL", shopClass: "line-suppl", note: "Algen, Vitalpilze" },
  "Dekoktlinie – Hauptkräuter": { key: "dekokt", label: "Dekokte", badge: "DEKOKT", shopClass: "line-dekokt", note: "19 €/300g" },
  "Stalllinie – Tagesbegleiter": { key: "stall", label: "Stalllinie", badge: "STALL", shopClass: "line-stall", note: "Großverbraucher" }
};

// Standalone product catalog (retail-only, not part of programs)
const EXTRA_RETAIL_PRODUCTS = [
// Einzelkräuter – Mono-Pflanzen, lose verkauft
{ name: "Mariendistel geschnitten", line: "Einzelkräuter", price: 14.90, unit: "500 g · Stoffwechsel · Leber", tags: ["Stoffwechsel"], cats: ["Stoffwechsel, Leber, Niere, Entgiftung"] },
{ name: "Brennnessel-Blätter", line: "Einzelkräuter", price: 9.50, unit: "500 g · Entgiftung · Stoffwechsel", tags: ["Stoffwechsel"], cats: ["Stoffwechsel, Leber, Niere, Entgiftung"] },
{ name: "Hagebutten ganz", line: "Einzelkräuter", price: 12.90, unit: "1 kg · Immun · Gelenke", tags: ["Haut & Immun"], cats: ["Haut, Fell & Immunsystem", "Gelenke & Beweglichkeit"] },
{ name: "Zistrose (Cistus)", line: "Einzelkräuter", price: 16.50, unit: "300 g · Immun · Haut", tags: ["Haut & Immun"], cats: ["Haut, Fell & Immunsystem"] },
{ name: "Kamillenblüten", line: "Einzelkräuter", price: 11.90, unit: "300 g · Magen · Nerven", tags: ["Verdauung"], cats: ["Verdauung & Magen", "Nerven, Stress & Verhalten"] },
{ name: "Thymian geschnitten", line: "Einzelkräuter", price: 10.90, unit: "300 g · Atemwege", tags: ["Atemwege"], cats: ["Atemwege"] },
{ name: "Spitzwegerich", line: "Einzelkräuter", price: 12.50, unit: "300 g · Atemwege · Schleimhaut", tags: ["Atemwege"], cats: ["Atemwege"] },
{ name: "Süßholzwurzel geschnitten", line: "Einzelkräuter", price: 14.50, unit: "300 g · Magen · Atemwege", tags: ["Verdauung"], cats: ["Verdauung & Magen", "Atemwege"] },
{ name: "Mönchspfeffer", line: "Einzelkräuter", price: 18.90, unit: "250 g · Hormonelle Achse · Stuten", tags: ["Nerven & Stress"], cats: ["Nerven, Stress & Verhalten"] },
{ name: "Weidenrinde", line: "Einzelkräuter", price: 13.90, unit: "300 g · Gelenke · Bewegung", tags: ["Gelenke"], cats: ["Gelenke & Beweglichkeit"] },
{ name: "Teufelskralle", line: "Einzelkräuter", price: 21.90, unit: "300 g · Gelenke · Arthrose", tags: ["Gelenke"], cats: ["Gelenke & Beweglichkeit"] },
{ name: "Ingwer geschnitten", line: "Einzelkräuter", price: 12.90, unit: "300 g · Bewegung · Stoffwechsel", tags: ["Muskeln"], cats: ["Muskeln / Leistung / Regeneration"] },
// Supplements – Algen, Pilze, Mineralien
{ name: "Spirulina-Pulver", line: "Supplements", price: 24.90, unit: "500 g · Mikronährstoffe · Aufbau", tags: ["Muskeln"], cats: ["Muskeln / Leistung / Regeneration", "Senioren & tiefer Aufbau"] },
{ name: "Chlorella-Pulver", line: "Supplements", price: 29.90, unit: "500 g · Entgiftung · Schwermetalle", tags: ["Stoffwechsel"], cats: ["Stoffwechsel, Leber, Niere, Entgiftung"] },
{ name: "Reishi-Pulver (Vitalpilz)", line: "Supplements", price: 39.90, unit: "200 g · Immun · Nerven · Shen", tags: ["Nerven & Stress"], cats: ["Nerven, Stress & Verhalten", "Haut, Fell & Immunsystem"] },
{ name: "Shiitake-Pulver (Vitalpilz)", line: "Supplements", price: 34.90, unit: "200 g · Immun · Stoffwechsel", tags: ["Haut & Immun"], cats: ["Haut, Fell & Immunsystem", "Stoffwechsel, Leber, Niere, Entgiftung"] },
{ name: "Cordyceps-Pulver", line: "Supplements", price: 44.90, unit: "200 g · Leistung · Atemwege", tags: ["Atemwege"], cats: ["Muskeln / Leistung / Regeneration", "Atemwege"] },
{ name: "Leinsamen geschrotet", line: "Supplements", price: 8.90, unit: "1 kg · Magenschleimhaut · Omega-3", tags: ["Verdauung"], cats: ["Verdauung & Magen"] },
{ name: "Bierhefe", line: "Supplements", price: 12.50, unit: "1 kg · B-Vitamine · Fell", tags: ["Haut & Immun"], cats: ["Haut, Fell & Immunsystem"] },
{ name: "Magnesium-Citrat", line: "Supplements", price: 19.90, unit: "1 kg · Muskeln · Nerven", tags: ["Muskeln"], cats: ["Muskeln / Leistung / Regeneration", "Nerven, Stress & Verhalten"] },
{ name: "MSM (Methylsulfonylmethan)", line: "Supplements", price: 22.90, unit: "1 kg · Gelenke · Hufe", tags: ["Gelenke"], cats: ["Gelenke & Beweglichkeit", "Hufe & Struktur"] },
{ name: "Biotin + Zink für Hufe", line: "Supplements", price: 26.90, unit: "500 g · Hornqualität", tags: ["Hufe & Struktur"], cats: ["Hufe & Struktur"] }];


const ProductsView = ({ onNav, openQuiz, wholesale = false }) => {
  const data = window.__CN.data;
  const cats = window.__CN.CATEGORIES;
  const [activeCat, setActiveCat] = useStateP("all");
  const [activeLine, setActiveLine] = useStateP("all");
  const [search, setSearch] = useStateP("");
  const [sort, setSort] = useStateP("popular");
  const [wishlist, setWishlist] = useStateP(new Set());

  // Build full product list (retail or wholesale) from data.products + prices
  const allProducts = useMemoP(() => {
    const list = [];
    for (const [name, info] of Object.entries(data.prices.products)) {
      const line = info.line || window.__CN.classifyProduct(name);
      // Map line key from prices to classifier format
      const fullLine = {
        "Dekoktlinie": "Dekoktlinie – Hauptkräuter",
        "Stalllinie": "Stalllinie – Tagesbegleiter",
        "Cobs": "Cobs – Basisfutter",
        "Externa": "Externa – Salben & Lösungen",
        "Fluidkonzentrate": "Fluidkonzentrate",
        "Intensivbooster": "Intensiv-Booster"
      }[line] || line;

      // Großverbraucher = Stalllinie only. Dekokte sind Endkunden-Linie.
      const isWholesaleOnly = fullLine === "Stalllinie – Tagesbegleiter";
      if (wholesale && !isWholesaleOnly) continue;
      if (!wholesale && isWholesaleOnly) continue;

      // Figure out which axes this product touches (via program data)
      const product = data.productByName[name];
      const usedIn = product ? product.usedIn : [];
      const cs = new Set();
      const tgs = new Set();
      for (const pid of usedIn) {
        const prog = data.programs.find((p) => p.ID === pid);
        if (prog) {cs.add(prog.Hauptkategorie);tgs.add((cats.find((c) => c.name === prog.Hauptkategorie) || {}).tag);}
      }
      list.push({
        name,
        line: fullLine,
        price: info.price,
        unit: info.unit,
        cats: [...cs].filter(Boolean),
        tags: [...tgs].filter(Boolean)
      });
    }
    // Inject standalone retail catalog (Einzelkräuter + Supplements)
    if (!wholesale) {
      for (const p of EXTRA_RETAIL_PRODUCTS) {
        list.push({ ...p });
      }
    }
    return list;
  }, [wholesale]);

  const lineCounts = useMemoP(() => {
    const c = {};
    for (const p of allProducts) c[p.line] = (c[p.line] || 0) + 1;
    return c;
  }, [allProducts]);

  // Available lines for filter chips
  const availableLines = useMemoP(() => {
    const keys = [...new Set(allProducts.map((p) => p.line))];
    return keys.map((k) => ({ line: k, ...(LINE_KEYS[k] || { key: k, label: k }) }));
  }, [allProducts]);

  // Filter + sort
  const visibleProducts = useMemoP(() => {
    let list = allProducts.filter((p) => {
      if (activeCat !== "all") {
        const catName = cats.find((c) => c.slug === activeCat)?.name;
        if (!p.cats.includes(catName)) return false;
      }
      if (activeLine !== "all" && LINE_KEYS[p.line]?.key !== activeLine) return false;
      if (search && !p.name.toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
    list.sort((a, b) => {
      if (sort === "price-asc") return (a.price ?? 9999) - (b.price ?? 9999);
      if (sort === "price-desc") return (b.price ?? 0) - (a.price ?? 0);
      if (sort === "name") return a.name.localeCompare(b.name);
      const order = ["Fluidkonzentrate", "Intensiv-Booster", "Cobs – Basisfutter", "Externa – Salben & Lösungen", "Dekoktlinie – Hauptkräuter", "Stalllinie – Tagesbegleiter"];
      const ai = order.indexOf(a.line);const bi = order.indexOf(b.line);
      if (ai !== bi) return ai - bi;
      return a.name.localeCompare(b.name);
    });
    return list;
  }, [allProducts, activeCat, activeLine, search, sort]);

  const toggleWish = (name) => setWishlist((prev) => {
    const n = new Set(prev);if (n.has(name)) n.delete(name);else n.add(name);return n;
  });

  // Featured bundles: 3 representative programs (only on retail shop)
  const featuredBundles = useMemoP(() => {
    const picks = [
    { catSlug: "verdauung-magen", level: "Basis", tag: "Bestseller" },
    { catSlug: "stoffwechsel", level: "Intensiv", tag: "Stark gefragt" },
    { catSlug: "haut-fell-immunsystem", level: "Basis", tag: "Saison" }];

    return picks.map(({ catSlug, level, tag }) => {
      const cat = cats.find((c) => c.slug === catSlug);
      const prog = (data.byCategory[cat.name] || []).find((p) => p["Nebenebene"] === level);
      return { cat, prog, tag };
    });
  }, []);

  return (
    <div data-screen-label={wholesale ? "Großverbraucher" : "Shop"}>
      {/* HERO */}
      <section className="shop-hero">
        <div className="container">
          {wholesale ?
          <>
              <span className="eyebrow">Großverbraucher · Ställe · Gestüte · Tierärzte</span>
              <h1>Wholesale-<em>Programm</em></h1>
              <p className="lead">Die Stalllinie als Tagesbegleiter – im Mengenformat für Bestände, Sportställe, Zuchten und therapeutische Praxen. Wir kalkulieren pro Bestand individuell.</p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
                <button className="btn btn-gold btn-lg" onClick={() => onNav("contact")}>Bestands-Anfrage senden</button>
                <button className="btn btn-secondary btn-lg" style={{ color: "#FBF7EC", borderColor: "rgba(251,247,236,0.4)" }} onClick={() => onNav("products")}>Endkunden-Shop ansehen</button>
              </div>
            </> :

          <>
              <span className="eyebrow">Shop · Phytotherapie · TCVM · Mykotherapie</span>
              <h1>Natur-<em>Apotheke</em> für dein Pferd</h1>
              <p className="lead">Heilpflanzen-Dekokte als Hauptkräuter-Sude, milde Fluidkonzentrate für Alltag und Erhaltung, Intensiv-Pulver und Booster für Tiefenarbeit, Cobs als Basisfutter, Externa zur direkten Pflege von Haut, Mauke und Hufen – plus Einzelkräuter und Supplements wie Spirulina, Chlorella und Vitalpilze. Alles kuratiert nach 11 Gesundheits-Achsen, in Lebensmittelqualität und ohne Zusatzstoffe.</p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
                <button className="btn btn-gold btn-lg" onClick={openQuiz}>Programm finden</button>
                <button className="btn btn-secondary btn-lg" style={{ color: "#FBF7EC", borderColor: "rgba(251,247,236,0.4)" }} onClick={() => onNav("consultation")}>Kostenlose Beratung</button>
              </div>
            </>
          }

          <div className="hero-stats">
            {wholesale ?
            <>
                <div className="stat"><div className="n">{lineCounts["Stalllinie – Tagesbegleiter"] || 0}</div><div className="l">Stallprodukte</div></div>
                <div className="stat"><div className="n">∞</div><div className="l">auf Anfrage</div></div>
                <div className="stat"><div className="n">11</div><div className="l">Achsen abgedeckt</div></div>
                <div className="stat"><div className="n">DE · ES</div><div className="l">Direktversand</div></div>
              </> :

            <>
                <div className="stat"><div className="n">{lineCounts["Fluidkonzentrate"] || 0}</div><div className="l">Fluidkonzentrate</div></div>
                <div className="stat"><div className="n">{lineCounts["Intensiv-Booster"] || 0}</div><div className="l">Intensiv-Booster</div></div>
                <div className="stat"><div className="n">{(lineCounts["Einzelkräuter"] || 0) + (lineCounts["Supplements"] || 0)}</div><div className="l">Einzelkräuter & Supplements</div></div>
                <div className="stat"><div className="n">{lineCounts["Dekoktlinie – Hauptkräuter"] || 0}</div><div className="l">Dekokte · Hauptkräuter</div></div>
              </>
            }
          </div>
        </div>
      </section>

      {/* Value props */}
      <section className="value-props">
        <div className="container">
          <div className="row">
            <div className="vp"><div className="ic"><Icon name="leaf" size={20} /></div><div className="info"><div className="t">100% Lebensmittelqualität</div><div className="d">Geprüfte Heilpflanzen, ohne Zusätze</div></div></div>
            <div className="vp"><div className="ic"><Icon name="check" size={20} /></div><div className="info"><div className="t">Inkl. spanischer MwSt.</div><div className="d">Endpreise, keine Überraschungen</div></div></div>
            <div className="vp"><div className="ic"><Icon name="spark" size={20} /></div><div className="info"><div className="t">3-Monats-Programme</div><div className="d">Phasenarbeit statt Quickfixes</div></div></div>
            <div className="vp"><div className="ic"><Icon name="mail" size={20} /></div><div className="info"><div className="t">Versand DE & ES</div><div className="d">EU-weit auf Anfrage</div></div></div>
          </div>
        </div>
      </section>

      {/* Featured bundles (retail only) */}
      {!wholesale &&
      <section className="shop-bundles">
          <div className="container">
            <div className="shop-section-head">
              <div>
                <span className="eyebrow">Featured</span>
                <h2 style={{ marginTop: 8 }}>Beliebte 3-Monats-Sets</h2>
              </div>
              <button className="btn btn-ghost" onClick={openQuiz}>Alle 11 Programme</button>
            </div>
            <div className="bundle-grid">
              {featuredBundles.map(({ cat, prog, tag }, i) => prog &&
            <article key={cat.slug} className="bundle-card" onClick={() => onNav("category", cat.slug)}>
                  <span className="badge-top">{tag}</span>
                  <div className="img"><img src={cat.img} alt={cat.name} /></div>
                  <div className="overlay">
                    <div className="tag">{cat.tag} · {prog["Nebenebene"]}</div>
                    <h3>{prog["Setname Webseite"]}</h3>
                  </div>
                </article>
            )}
            </div>
          </div>
        </section>
      }

      {/* Sticky filter bar */}
      <div className="shop-filterbar">
        <div className="container">
          <div className="row">
            <div className="filters compact">
              <label className="shop-select">
                <span className="filter-label">Linie</span>
                <select value={activeLine} onChange={(e) => setActiveLine(e.target.value)}>
                  <option value="all">Alle Linien ({allProducts.length})</option>
                  {availableLines.map((l) =>
                  <option key={l.key} value={l.key}>{l.label} ({lineCounts[l.line] || 0})</option>
                  )}
                </select>
              </label>
              <label className="shop-select">
                <span className="filter-label">Achse</span>
                <select value={activeCat} onChange={(e) => setActiveCat(e.target.value)}>
                  <option value="all">Alle Achsen</option>
                  {cats.map((c) =>
                  <option key={c.slug} value={c.slug}>{c.name.split(",")[0].split(" / ")[0]}</option>
                  )}
                </select>
              </label>
            </div>
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
              <div className="shop-search">
                <span className="icon-l"><Icon name="search" size={14} /></span>
                <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Suchen…" />
              </div>
              <div className="shop-sort">
                <select value={sort} onChange={(e) => setSort(e.target.value)}>
                  <option value="popular">Sehr Beliebt</option>
                  <option value="rating">Beste Bewertungen</option>
                  <option value="price-asc">Bester Preis</option>
                  <option value="sale">Angebot</option>
                  <option value="seasonal">Saisonal</option>
                  <option value="name">Name A–Z</option>
                  <option value="price-desc">Preis absteigend</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main product grid */}
      <section className="shop-products-section">
        <div className="container">
          <div className="shop-section-head">
            <div>
              <h2>
                {activeLine === "all" ? wholesale ? "Großverbraucher-Sortiment" : "Alle Produkte" : availableLines.find((l) => l.key === activeLine)?.label}
                {activeCat !== "all" && <span className="line-tag" style={{ marginTop: 8, marginBottom: 0 }}>{cats.find((c) => c.slug === activeCat)?.name}</span>}
              </h2>
              <p style={{ marginTop: 8 }}>{visibleProducts.length} Produkt{visibleProducts.length === 1 ? "" : "e"} gefunden</p>
            </div>
          </div>

          {visibleProducts.length === 0 ?
          <div style={{ textAlign: "center", padding: 80, background: "var(--bg-paper)", borderRadius: 24 }}>
              <p style={{ fontSize: 17, color: "var(--ink-mute)" }}>Keine Produkte mit diesen Filtern.</p>
              <button className="btn btn-secondary" onClick={() => {setActiveLine("all");setActiveCat("all");setSearch("");}}>Filter zurücksetzen</button>
            </div> :

          <div className="shop-grid">
              {visibleProducts.map((p) => {
              const lk = LINE_KEYS[p.line] || { key: "other", label: p.line, badge: "PROD", shopClass: "" };
              const initials = p.name.replace(/^(Fluido|Polvo Profundo|Refuerzo Intensivo|Cuadra|Cobs de|Bálsamo|Solución de|Lavado y|Ungüento|Óleo de)\s+/i, "").split(/\s+/).filter((w) => w.length > 1).slice(0, 2).map((w) => w[0]).join("");
              const isWish = wishlist.has(p.name);
              return (
                <article key={p.name} className="shop-card">
                    <div className={`thumb ${lk.shopClass}`}>
                      <span className={`badge-line ${lk.key}`}>{lk.badge}</span>
                      <button className={`wishlist-btn ${isWish ? "active" : ""}`} onClick={() => toggleWish(p.name)} aria-label="Merken">
                        <Icon name="heart" size={16} />
                      </button>
                      <div className="thumb-initials">{initials.toUpperCase() || p.name.slice(0, 2).toUpperCase()}</div>
                    </div>
                    <div className="body">
                      <div className="axis">{p.tags[0] || (wholesale ? "Großverbraucher" : "Allgemein")}</div>
                      <div className="name">{p.name}</div>
                      {p.unit && <div className="unit">{p.unit}</div>}
                    </div>
                    <div className="price-row">
                      <span className={`price ${p.price == null ? "empty" : ""}`}>
                        {p.price == null ? "Auf Anfrage" : window.__CN.formatPrice(p.price)}
                      </span>
                      <button className="add-btn" aria-label="In den Warenkorb"><Icon name="bag" size={16} /></button>
                    </div>
                  </article>);

            })}
            </div>
          }
        </div>
      </section>

      {/* Color CTA bands */}
      <section className="color-band gold">
        <div className="container">
          <div className="cb-grid">
            <div>
              <span className="eyebrow" style={{ color: "rgba(26,38,32,0.75)" }}>Hilfe gefällig?</span>
              <h2 style={{ marginTop: 14, fontStyle: "italic" }}>Unsicher, was dein Pferd <em>wirklich</em> braucht?</h2>
              <p style={{ marginTop: 18, maxWidth: "56ch", fontSize: 17 }}>Unser kurzer Programm-Finder führt dich in 2 Minuten zum passenden Set. Bei mehreren Beschwerden empfehlen wir unsere kostenlose Online-Beratung.</p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <button className="btn btn-primary btn-lg" onClick={openQuiz}>Schnell-Quiz starten <Icon name="arrow" /></button>
              <button className="btn btn-secondary btn-lg" onClick={() => onNav("consultation")}>Kostenlose Beratung</button>
            </div>
          </div>
        </div>
      </section>

      <section className="color-band dark">
        <div className="container">
          <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
            <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>Unsere Methodik</span>
            <h2 style={{ marginTop: 14, fontStyle: "italic" }}>Phytotherapie · TCVM · <em>Mykotherapie</em></h2>
            <p style={{ marginTop: 18, fontSize: 17 }}>Jedes Produkt ist Teil einer therapeutischen Logik. Wir verkaufen keine Einzelkräuter ins Blaue – sondern stimmige Phasen-Programme nach den 5 Wandlungsphasen der TCVM.</p>
            <div style={{ marginTop: 32, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <button className="btn btn-gold btn-lg" onClick={() => onNav("philosophy")}>Methoden im Detail</button>
              <button className="btn btn-secondary btn-lg" style={{ color: "#FBF7EC", borderColor: "rgba(251,247,236,0.4)" }} onClick={() => onNav("herbs")}>Pflanzen-Lexikon</button>
            </div>
          </div>
        </div>
      </section>
    </div>);

};

// ============ IMG PLACEHOLDERS ============
// Striped, tinted image placeholders. Drop in real photos by replacing with <img/>.
const ImgPlaceholder = ({ label, ratio = "4/5", tone = "green", caption }) => {
  const tones = {
    green: { bg: "#DAE9E5", stripe: "rgba(42,106,96,0.10)", ink: "#2A6A60", line: "#B5D2CC" },
    gold: { bg: "#F1E4C4", stripe: "rgba(185,138,60,0.12)", ink: "#6E5520", line: "#E5C98C" },
    paper: { bg: "#E6DECA", stripe: "rgba(26,38,36,0.06)", ink: "#404A47", line: "#D6D0BC" }
  };
  const c = tones[tone] || tones.green;
  return (
    <div className="img-placeholder" style={{
      aspectRatio: ratio,
      borderRadius: 14,
      overflow: "hidden",
      background: `repeating-linear-gradient(135deg, ${c.bg} 0 14px, ${c.stripe} 14px 15px), ${c.bg}`,
      border: `1px solid ${c.line}`,
      position: "relative",
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    }}>
      {/* corner crosshairs */}
      <span style={{ position: "absolute", top: 12, left: 12, width: 14, height: 14, borderLeft: `1px solid ${c.ink}`, borderTop: `1px solid ${c.ink}`, opacity: .4 }} />
      <span style={{ position: "absolute", top: 12, right: 12, width: 14, height: 14, borderRight: `1px solid ${c.ink}`, borderTop: `1px solid ${c.ink}`, opacity: .4 }} />
      <span style={{ position: "absolute", bottom: 12, left: 12, width: 14, height: 14, borderLeft: `1px solid ${c.ink}`, borderBottom: `1px solid ${c.ink}`, opacity: .4 }} />
      <span style={{ position: "absolute", bottom: 12, right: 12, width: 14, height: 14, borderRight: `1px solid ${c.ink}`, borderBottom: `1px solid ${c.ink}`, opacity: .4 }} />
      {/* label box */}
      <div style={{
        background: "var(--bg-paper)",
        border: `1px solid ${c.line}`,
        borderRadius: 4,
        padding: "10px 16px",
        textAlign: "center",
        maxWidth: "80%"
      }}>
        <div style={{ fontFamily: "var(--ff-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: c.ink, fontWeight: 600 }}>
          ↳ Bild-Platzhalter
        </div>
        <div style={{ fontFamily: "var(--ff-display)", fontStyle: "italic", fontSize: 20, color: "var(--ink)", marginTop: 6, lineHeight: 1.15 }}>
          {label}
        </div>
        {caption &&
        <div style={{ fontFamily: "var(--ff-mono)", fontSize: 10, color: "var(--ink-mute)", marginTop: 6 }}>
            {caption}
          </div>
        }
      </div>
    </div>);

};

// ============ ABOUT (mit integrierter Philosophie) ============
const AboutView = ({ onNav, openQuiz }) =>
<div data-screen-label="Über mich">
    {/* HERO */}
    <section className="page-hero">
      <div className="container">
        <div className="col-2" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <span className="eyebrow">Tierheilpraktikerin · Pferdegesundheit</span>
            <h1>Aus Stall, Heuboden und alter Heilkunde – <em>so arbeite ich</em>.</h1>
            <p className="lead">Caballo Natural ist aus Jahrzehnten praktischer Arbeit mit PRE- und Lusitano-Pferden gewachsen. Ich bin Tierheilpraktikerin, seit 2012 in der Traditionellen Chinesischen Veterinärmedizin zertifiziert – und vor allem: Ich lebe mit Pferden.</p>
            <div style={{ marginTop: 28, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => onNav("consultation")}>Kostenlos beraten lassen</button>
              <button className="btn btn-secondary" onClick={() => onNav("contact")}>Direktkontakt</button>
            </div>
          </div>
          <div style={{ aspectRatio: "4/5", borderRadius: 14, overflow: "hidden", background: "var(--bg-deep)" }}>
            <img src="assets/melissa-pferd.png" alt="Melissa – Tierheilpraktikerin mit Pferd" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </div>
    </section>

    {/* PERSÖNLICHE GESCHICHTE */}
    <section className="page-body">
      <div className="container">
        <div className="col-2">
          <div className="side">Ausbildung & Praxis</div>
          <div className="prose">
            <p>Ich bin seit über zehn Jahren Tierheilpraktikerin, mit Schwerpunkt Pferd. Mein Weg führte durch klassische Phytotherapie, Traditionelle Chinesische Veterinärmedizin (TCVM) und Mykotherapie – ergänzt durch jahrelange Hands-on-Arbeit in der Zucht von PRE- und Lusitano-Pferden.</p>

            <h2>Warum Caballo Natural?</h2>
            <p>Jahrelang habe ich Tierheilkunde zunächst nur an meinen eigenen Tieren angewandt – beobachtet, dokumentiert, geduldig nachjustiert. Was als Sorgfalt im eigenen Stall begann, ist über die Jahre zu einem Wissensschatz geworden, den ich heute nach außen tragen und teilen möchte. Caballo Natural ist mein Weg, diese Erfahrung in fütterungs- und kräuterbasierte 3-Monats-Programme zu übersetzen – damit andere Pferdebesitzer:innen ihre Tiere selbständig, sicher und ursachenbasiert begleiten können.</p>
            <p>Weil ich gesehen habe, wie viele Pferde an Symptomen behandelt werden, die eigentlich aus ganz anderen Wurzeln kommen. Ein Husten kann ein Schleim-Thema sein – oder ein Magen-Thema. Eine Hautallergie kann auch Leber oder Niere bedeuten. Genau hier setzen meine Programme an: nicht am Symptom, sondern an der Ursache.</p>
          </div>
        </div>

        {/* Bild-Duo */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, margin: "56px 0" }}>
          <ImgPlaceholder label="Im Stall · morgens" caption="1600 × 1000 · Querformat" ratio="16/10" tone="paper" />
          <ImgPlaceholder label="Kräuter & Dekokte · Werkstatt" caption="1600 × 1000 · Querformat" ratio="16/10" tone="gold" />
        </div>

        <div className="col-2">
          <div className="side">Mein Ansatz</div>
          <div className="prose">
            <h2>Wie ich arbeite</h2>
            <ul>
              <li><strong>Erst hören, dann füttern.</strong> Bevor ich etwas empfehle, will ich verstehen: Konstitution, Haltung, Vorgeschichte, aktuelle Bilder.</li>
              <li><strong>Programme statt Pillen.</strong> Jedes Set ist eine 3-Monats-Reise – mit klaren Phasen, weil Heilung Zeit und Rhythmus braucht.</li>
              <li><strong>Lebensmittelqualität.</strong> Alle Kräuter, Cobs und Pilze stammen aus geprüften Quellen, ohne Zusatzstoffe.</li>
              <li><strong>Bildung statt Abhängigkeit.</strong> Ich erkläre, was wir tun und warum – damit du selbst zur Expert:in für dein Pferd wirst.</li>
            </ul>

            <h2>Persönlich</h2>
            <p>Mein Tag fängt im Stall an. Ich kenne die Geräusche, die ein Pferd morgens beim Atmen macht; den Unterschied zwischen Lustlosigkeit und tiefer Schwäche; den Geruch eines gesunden Mistes. Diese Sinnlichkeit fließt in jede Empfehlung mit.</p>
          </div>
        </div>
      </div>
    </section>

    {/* PHILOSOPHIE INTRO */}
    <section className="page-hero" style={{ background: "var(--bg-paper)", borderTop: "1px solid var(--line-soft)", paddingTop: 80, paddingBottom: 40 }}>
      <div className="container">
        <span className="eyebrow">Philosophie & Methoden</span>
        <h1 style={{ fontSize: "clamp(38px, 4.5vw, 64px)" }}>Ich behandle <em>die Ursache</em> – nicht das Symptom.</h1>
        <p className="lead">Drei Heilkunde-Traditionen, ein gemeinsames Verständnis: Das Pferd ist ein lebendiges System. Wenn etwas aus dem Lot gerät, zeigt das Symptom uns nur den Anfang einer Geschichte.</p>
      </div>
    </section>

    {/* DREI METHODEN */}
    <section className="page-body" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="method-grid">
          <div className="method-card">
            <div className="glyph">i.</div>
            <h3>Phytotherapie</h3>
            <p>Die Wissenschaft der Heilpflanzen. Ich arbeite mit traditionellen Dekokten (Suden), Fluidkonzentraten, Pulvern und Salben – jeweils mit klarer Wirkungs-Achse pro Organ und Konstitution.</p>
            <ul style={{ fontSize: 13, color: "var(--ink-soft)", paddingLeft: 16, marginTop: 14 }}>
              <li>Dekoktlinie – Hauptkräuter, intensiv</li>
              <li>Fluide – mild, alltagstauglich</li>
              <li>Stalllinie – ergänzende Tagesbegleiter</li>
            </ul>
          </div>
          <div className="method-card">
            <div className="glyph">ii.</div>
            <h3>TCVM</h3>
            <p>Traditionelle Chinesische Veterinärmedizin liefert die Diagnose-Logik. Ich lese das Pferd als Muster: Yin/Yang-Lage, Wandlungsphase, Achsen, Konstitution. Das ergibt eine andere Empfehlung als ein rein symptomatischer Blick.</p>
            <ul style={{ fontSize: 13, color: "var(--ink-soft)", paddingLeft: 16, marginTop: 14 }}>
              <li>Konstitutions-Analyse</li>
              <li>5-Wandlungs-Phasen</li>
              <li>Zungen-/Pulsdiagnostik</li>
            </ul>
          </div>
          <div className="method-card">
            <div className="glyph">iii.</div>
            <h3>Mykotherapie</h3>
            <p>Vitalpilze als Tiefenarbeit. Reishi, Shiitake, Cordyceps und Hericium wirken modulierend auf Immun-, Hormon- und Nervensystem. Ich setze sie gezielt in Intensiv- und Aufbau-Programmen ein.</p>
            <ul style={{ fontSize: 13, color: "var(--ink-soft)", paddingLeft: 16, marginTop: 14 }}>
              <li>Immunmodulation</li>
              <li>Hormonelle Achsen</li>
              <li>Tiefe Substanz-Phasen</li>
            </ul>
          </div>
        </div>

        {/* Großes Bild zwischen den Sektionen */}
        <div style={{ margin: "72px 0" }}>
          <ImgPlaceholder label="Hände, Pflanzen, Dekokte – die Werkstatt" caption="2400 × 1200 · Panorama" ratio="2/1" tone="green" />
        </div>

        {/* GRUNDPRINZIPIEN */}
        <div className="col-2">
          <div className="side">Grundprinzipien</div>
          <div className="prose">
            <h2>Wie ich Programme aufbaue</h2>
            <p>Jedes Set folgt dem gleichen Aufbau, weil Heilung Rhythmus braucht. Ich denke in <strong>3-Monats-Phasen</strong> mit:</p>
            <ul>
              <li><strong>Cobs als Basisfutter</strong> – Heu, Esparzette oder grüner Hafer, je nach Konstitution. Immer eingeweicht, in 2 Mahlzeiten verteilt.</li>
              <li><strong>Eine Hauptkräuter-Achse</strong> für 21–56 Tage. Dosierte Dekokte oder Fluide, je nach Schwere des Bildes.</li>
              <li><strong>Begleitende Stall- oder Booster-Produkte</strong> in den jeweiligen Wochen.</li>
              <li><strong>Klare Phasen-Logik:</strong> Monat 1 = Einstieg, Monat 2 = Vertiefung, Monat 3 = Stabilisierung und Übergang.</li>
            </ul>

            <h2>Die 5 Programm-Stufen</h2>
            <p>Jede Gesundheits-Achse hat fünf Stufen, weil Pferde nicht in einer Schublade leben:</p>
            <ul>
              <li><strong>Basis</strong> – sanfter Einstieg bei beginnenden Bildern</li>
              <li><strong>Intensiv</strong> – tiefe Therapie bei akuten oder chronischen Bildern</li>
              <li><strong>Aufbau</strong> – Rekonvaleszenz und Substanzaufbau</li>
              <li><strong>Erhaltung</strong> – Stabilisierung bei chronisch sensiblen Pferden</li>
              <li><strong>Prävention</strong> – vor Triggern wie Fellwechsel, Anweiden, Transport</li>
            </ul>

            <h2>Was ich nicht tue</h2>
            <ul>
              <li>Ich gebe keine pauschalen „Wunder-Mittel“. Pferde sind Individuen.</li>
              <li>Ich verkaufe keine künstlichen Zusatzstoffe oder Aromen.</li>
              <li>Ich ersetze keine tierärztliche Akutversorgung – ich ergänze sie.</li>
            </ul>
          </div>
        </div>

        {/* FINAL CTA */}
        <div style={{ marginTop: 64, padding: 40, background: "var(--green-tint)", borderRadius: 14 }}>
          <div className="eyebrow">Möchtest du mit mir sprechen?</div>
          <h3 style={{ margin: "8px 0 18px", fontSize: 32, fontStyle: "italic" }}>Online-Beratung ist kostenlos – ich beiße nicht.</h3>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={openQuiz}>Jetzt passendes Programm finden</button>
            <button className="btn btn-secondary btn-lg" onClick={() => onNav("consultation")}>Beratung anfragen</button>
            <button className="btn btn-ghost" onClick={() => onNav("contact")}>Direktkontakt</button>
          </div>
        </div>
      </div>
    </section>
  </div>;


// ============ PHILOSOPHY ============
const PhilosophyView = ({ onNav, openQuiz }) =>
<div data-screen-label="Philosophie">
    <section className="page-hero">
      <div className="container">
        <span className="eyebrow">Philosophie & Methoden</span>
        <h1>Wir behandeln <em>die Ursache</em> – nicht das Symptom.</h1>
        <p className="lead">Drei Heilkunde-Traditionen, ein gemeinsames Verständnis: Das Pferd ist ein lebendiges System. Wenn etwas aus dem Lot gerät, zeigt das Symptom uns nur den Anfang einer Geschichte.</p>
      </div>
    </section>

    <section className="page-body">
      <div className="container">
        <div className="method-grid">
          <div className="method-card">
            <div className="glyph">i.</div>
            <h3>Phytotherapie</h3>
            <p>Die Wissenschaft der Heilpflanzen. Wir arbeiten mit traditionellen Dekokten (Suden), Fluidkonzentraten, Pulvern und Salben – jeweils mit klarer Wirkungs-Achse pro Organ und Konstitution.</p>
            <ul style={{ fontSize: 13, color: "var(--ink-soft)", paddingLeft: 16, marginTop: 14 }}>
              <li>Dekoktlinie – Hauptkräuter, intensiv</li>
              <li>Fluide – mild, alltagstauglich</li>
              <li>Stalllinie – ergänzende Tagesbegleiter</li>
            </ul>
          </div>
          <div className="method-card">
            <div className="glyph">ii.</div>
            <h3>TCVM</h3>
            <p>Traditionelle Chinesische Veterinärmedizin liefert die Diagnose-Logik. Wir lesen das Pferd als Muster: Yin/Yang-Lage, Wandlungsphase, Achsen, Konstitution. Das ergibt eine andere Empfehlung als ein rein symptomatischer Blick.</p>
            <ul style={{ fontSize: 13, color: "var(--ink-soft)", paddingLeft: 16, marginTop: 14 }}>
              <li>Konstitutions-Analyse</li>
              <li>5-Wandlungs-Phasen</li>
              <li>Zungen-/Pulsdiagnostik</li>
            </ul>
          </div>
          <div className="method-card">
            <div className="glyph">iii.</div>
            <h3>Mykotherapie</h3>
            <p>Vitalpilze als Tiefenarbeit. Reishi, Shiitake, Cordyceps und Hericium wirken modulierend auf Immun-, Hormon- und Nervensystem. Wir setzen sie gezielt in Intensiv- und Aufbau-Programmen ein.</p>
            <ul style={{ fontSize: 13, color: "var(--ink-soft)", paddingLeft: 16, marginTop: 14 }}>
              <li>Immunmodulation</li>
              <li>Hormonelle Achsen</li>
              <li>Tiefe Substanz-Phasen</li>
            </ul>
          </div>
        </div>

        <div className="col-2" style={{ marginTop: 80 }}>
          <div className="side">Grundprinzipien</div>
          <div className="prose">
            <h2>Wie wir Programme aufbauen</h2>
            <p>Jedes Set folgt dem gleichen Aufbau, weil Heilung Rhythmus braucht. Wir denken in <strong>3-Monats-Phasen</strong> mit:</p>
            <ul>
              <li><strong>Cobs als Basisfutter</strong> – Heu, Esparzette oder grüner Hafer, je nach Konstitution. Immer eingeweicht, in 2 Mahlzeiten verteilt.</li>
              <li><strong>Eine Hauptkräuter-Achse</strong> für 21–56 Tage. Dosierte Dekokte oder Fluide, je nach Schwere des Bildes.</li>
              <li><strong>Begleitende Stall- oder Booster-Produkte</strong> in den jeweiligen Wochen.</li>
              <li><strong>Klare Phasen-Logik:</strong> Monat 1 = Einstieg, Monat 2 = Vertiefung, Monat 3 = Stabilisierung und Übergang.</li>
            </ul>

            <h2>Die 5 Programm-Stufen</h2>
            <p>Jede Gesundheits-Achse hat fünf Stufen, weil Pferde nicht in einer Schublade leben:</p>
            <ul>
              <li><strong>Basis</strong> – sanfter Einstieg bei beginnenden Bildern</li>
              <li><strong>Intensiv</strong> – tiefe Therapie bei akuten oder chronischen Bildern</li>
              <li><strong>Aufbau</strong> – Rekonvaleszenz und Substanzaufbau</li>
              <li><strong>Erhaltung</strong> – Stabilisierung bei chronisch sensiblen Pferden</li>
              <li><strong>Prävention</strong> – vor Triggern wie Fellwechsel, Anweiden, Transport</li>
            </ul>

            <h2>Was wir nicht tun</h2>
            <ul>
              <li>Wir geben keine pauschalen „Wunder-Mittel“. Pferde sind Individuen.</li>
              <li>Wir verkaufen keine künstlichen Zusatzstoffe oder Aromen.</li>
              <li>Wir ersetzen keine tierärztliche Akutversorgung – wir ergänzen sie.</li>
            </ul>

            <div style={{ marginTop: 40 }}>
              <button className="btn btn-primary btn-lg" onClick={openQuiz}>Jetzt das passende Programm finden</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>;


// ============ FAQ ============
const FAQ_CATS = [
{ id: "alle", label: "Alle Fragen" },
{ id: "methode", label: "Methode & Wissen" },
{ id: "programme", label: "Programme & Produkte" },
{ id: "fuetterung", label: "Fütterung & Cobs" },
{ id: "krankheiten", label: "Krankheiten & Symptome" },
{ id: "beratung", label: "Beratung & Bestellung" }];


// Cobs Portraits — drop real photos into assets/cobs-* to replace placeholders
const COBS_PORTRAITS = [
{
  slug: "esparzette",
  name: "Cobs de Esparceta",
  de: "Esparzette",
  latin: "Onobrychis viciifolia",
  tone: "gold",
  pitch: "Eiweißreiche, magen- und leberfreundliche Faser. Mild kühlend, ideal für sensible und stoffwechselbelastete Pferde.",
  facts: ["~14 % Rohprotein, niedriger Fruktan", "Tannine schützen Magen- und Darmschleimhaut", "Kühlend nach TCVM – gut bei Hitze-Mustern"],
  img: "assets/cobs-esparzette.png"
},
{
  slug: "gruenhafer",
  name: "Cobs de Avena Verde",
  de: "Grünhafer",
  latin: "Avena sativa (Grünschnitt)",
  tone: "green",
  pitch: "Ganze Haferpflanze im Grünschnitt gepresst – muskelaufbauend, wärmend, ideal für Aufbau- und Sport-Phasen.",
  facts: ["Reich an Silicium und B-Vitaminen", "Wärmend nach TCVM – stützt Milz-Qi", "Nervlich stabilisierend, ohne aufzudrehen"],
  img: "assets/cobs-gruenhafer.png"
},
{
  slug: "spanisches-heu",
  name: "Cobs de Heno",
  de: "Spanisches Heu",
  latin: "Multi-spezies Wiesenheu",
  tone: "paper",
  pitch: "Sortenreiches, sonnengetrocknetes Wiesenheu aus Andalusien – neutral, gut verträglich, die Basis aller Programme.",
  facts: ["Neutrales Konstitutions-Profil", "Schonend für Magen und Zahnstatus", "Standard-Basisfutter, durchgehend einsetzbar"],
  img: "assets/cobs-heno.png"
}];


// Einzelkräuter – mono-Pflanzen, lose
const EINZELKRAEUTER_CARDS = [
{ slug: "hagebutte", name: "Hagebutten", latin: "Rosa canina · ganze Frucht", tone: "gold",
  pitch: "Natürliches Vitamin-C-Depot. Stützt Immunsystem, Gelenkknorpel und Bindegewebe – Klassiker für Fellwechsel und ältere Pferde.",
  facts: ["Vitamin C, Bioflavonoide, Galaktolipide", "Antientzündlich für Gelenke", "Mild kühlend, ganzjährig einsetzbar"],
  img: "assets/herb-hagebutte.png" },
{ slug: "brennnessel", name: "Brennnessel", latin: "Urtica dioica", tone: "green",
  pitch: "Klassisches Frühjahrs- und Blutkraut. Aktiviert Niere und Stoffwechsel, mobilisiert Schlacken und unterstützt die Blutbildung.",
  facts: ["Eisen, Kieselsäure, Chlorophyll", "Diuretisch & blutreinigend", "Ideal in der Fellwechsel-Prävention"],
  img: "assets/herb-brennnessel.png" },
{ slug: "kamille", name: "Kamillenblüten", latin: "Matricaria chamomilla", tone: "gold",
  pitch: "Sanftes Spasmolytikum. Beruhigt Magen, Darm und Nerven – bewährt bei Stressmagen und Kolikneigung.",
  facts: ["Ätherisches Öl, Bisabolol, Apigenin", "Magenschleimhaut-freundlich", "Auch äußerlich für Augenkompressen"],
  img: "assets/herb-kamille.png" },
{ slug: "mariendistel", name: "Mariendistel", latin: "Silybum marianum", tone: "green",
  pitch: "Die Leber-Pflanze schlechthin. Silymarin schützt und regeneriert Leberzellen – Basis vieler Stoffwechsel-Programme.",
  facts: ["Silymarin-Komplex (hepatoprotektiv)", "Unterstützt Entgiftung & Cushing", "Sicherheitsklassiker, auch langfristig"],
  img: "assets/herb-mariendistel.png" }];


// Dekokte (Kräutermischungen) – konzentrierte Sude aus Hauptkräutern
const DEKOKTE_CARDS = [
{ slug: "intro-dekokt", name: "Was ist ein Dekokt?", latin: "Konzentrierter Pflanzen-Sud", tone: "paper",
  pitch: "Aus 300 g Kräutermischung kochst du täglich einen frischen Sud – ca. 5 L pro Monat. Die intensivste und günstigste Form der Phytotherapie für dein Pferd.",
  facts: ["~19 €/Monat pro Kur", "Maximale Wirkstoff-Tiefe", "Hauptform in Basis- & Intensiv-Programmen"],
  img: "assets/dekokt-intro.png" },
{ slug: "calma-gastrica", name: "Calma Gástrica", latin: "Magen · Verdauung", tone: "gold",
  pitch: "Mischung aus Eibischwurzel, Süßholz, Kamille und Schafgarbe – schützt die Magenschleimhaut und beruhigt Reizmägen.",
  facts: ["Schleimhaut-Aufbau bei EGUS", "Mild kühlend nach TCVM", "Basis-Dekokt für Magen-Achse"],
  img: "assets/dekokt-calma.png" },
{ slug: "depuracion-metabolica", name: "Depuración Metabólica", latin: "Stoffwechsel · Leber", tone: "green",
  pitch: "Mariendistel, Löwenzahn, Brennnessel und Birke – die klassische Entgiftungs- und Leberkur für stoffwechselbelastete Pferde.",
  facts: ["Leberzell-Schutz & Regeneration", "Aktiviert Niere und Lymphe", "Kernkraft im EMS/Cushing-Programm"],
  img: "assets/dekokt-depuracion.png" },
{ slug: "equilibrio-nervioso", name: "Equilibrio Nervioso", latin: "Nerven · Stress", tone: "green",
  pitch: "Melisse, Baldrian, Passionsblume und Hopfen – senkt aufsteigendes Yang, beruhigt Shen und gleicht das Nervensystem aus.",
  facts: ["Mildert Schreckhaftigkeit & Headshaking", "Unterstützt bei Transport-Stress", "Stress-Programm Magen-Komplement"],
  img: "assets/dekokt-equilibrio.png" }];


// Fluide (Fluidkonzentrate) – milde Alltagsvariante
const FLUIDE_CARDS = [
{ slug: "intro-fluid", name: "Was ist ein Fluid?", latin: "Stalltaugliches Konzentrat", tone: "paper",
  pitch: "Fluidkonzentrate sind die milde Alltagsvariante der Dekokte – fertig zum Dosieren, ideal für Erhaltung, Prävention und unkomplizierte Anwendung.",
  facts: ["2–3 ml pro 100 kg pro Tag", "Schnell, ohne Kochen einsetzbar", "Ideal für Erhaltungs-Phasen"],
  img: "assets/fluid-intro.png" },
{ slug: "fluido-estomago", name: "Fluido Estómago-Centro", latin: "Magen-Mitte", tone: "gold",
  pitch: "Tagestaugliche Magen-Pflege für sensible Pferde – stabilisiert die Mitte, fängt Stressspitzen ab.",
  facts: ["Pufferung von Magensäure", "Diskret per Spritze dosierbar", "Ergänzt Calma Gástrica langfristig"],
  img: "assets/fluid-estomago.png" },
{ slug: "fluido-metabolismo", name: "Fluido Metabolismo-Hígado", latin: "Stoffwechsel-Leber", tone: "green",
  pitch: "Milde Stoffwechsel-Linie als Erhaltung nach der Intensivkur – für stoffwechselsensible und ältere Pferde.",
  facts: ["Sanfte Leberunterstützung", "Saisonale Prävention vor Anweiden", "Kombinierbar mit Mariendistel-Pulver"],
  img: "assets/fluid-metabolismo.png" },
{ slug: "fluido-regeneracion", name: "Fluido Regeneración-Deporte", latin: "Regeneration · Muskeln", tone: "green",
  pitch: "Für Sport-, Aufbau- und Senior-Pferde: stützt Muskelregeneration, Mineralhaushalt und Energie nach Belastung.",
  facts: ["B-Vitamine, Magnesium-Komplex", "Stützt Milz-Qi & Muskelaufbau", "Optimal nach Training oder Turnier"],
  img: "assets/fluid-regeneracion.png" }];


// Externa – Salben, Lösungen, Lavados, Öle für direkte Anwendung
const EXTERNA_CARDS = [
{ slug: "intro-externa", name: "Was sind Externa?", latin: "Äußerliche Anwendung", tone: "paper",
  pitch: "Salben, Lösungen, Lavados und Öle für die direkte Pflege von Haut, Hufen, Mähne und Wunden. Ergänzen die innere Therapie, ersetzen sie nicht.",
  facts: ["Bálsamo · Solución · Lavado · Óleo", "Lokal, schnell, gezielt", "Immer mit innerer Achse kombinieren"],
  img: "assets/externa-intro.png" },
{ slug: "balsamo-mauke", name: "Bálsamo Mauke", latin: "Heilsalbe · Fesselbeuge", tone: "gold",
  pitch: "Beruhigende Salbe mit Ringelblume, Kamille und Bienenwachs – pflegt Mauke-Stellen und unterstützt die Hautregeneration.",
  facts: ["Antientzündlich & feuchtigkeitsspendend", "Klebt nicht, gut einziehend", "Täglich auf gereinigte Stellen"],
  img: "assets/externa-balsamo.png" },
{ slug: "lavado-hoof", name: "Lavado Hufstrahl", latin: "Spüllösung · Strahlfäule", tone: "green",
  pitch: "Pflanzliche Spüllösung mit Thymian und Teebaum – wirkt antibakteriell und unterstützt die Strahlhornregeneration.",
  facts: ["Tägliche Anwendung nach Auskratzen", "Stinkfrei, hautfreundlich", "Begleitend zur Hufpflege"],
  img: "assets/externa-lavado.png" },
{ slug: "oleo-fell", name: "Óleo Fell & Mähne", latin: "Heilöl · Fellpflege", tone: "gold",
  pitch: "Kaltgepresstes Pflegeöl mit Klette und Olivenöl – kräftigt Mähne, Schweif und glänzt das Fell, besonders im Fellwechsel.",
  facts: ["Vitamin E & essentielle Fettsäuren", "Repariert spröde Mähnen", "Mit Massage einarbeiten"],
  img: "assets/externa-oleo.png" }];


// Probleme im Bestand — SEO-Anker für Krankheits-Keywords
const PROBLEM_CARDS = [
{
  slug: "sommerekzem",
  name: "Sommerekzem",
  aka: "Ekzem, Kriebelmücken-Allergie",
  achse: "Haut, Fell & Immunsystem",
  short: "Allergische Reaktion auf Insektenspeichel. Ursache liegt fast nie nur in der Haut – sondern in Leber, Lymphe und Darmmilieu.",
  keywords: "Sommerekzem Pferd, Ekzemer, Mähnenscheuern, Kriebelmücke, Allergie",
  program: "Haut, Fell & Immunsystem – Intensiv + Stoffwechsel-Aufbau",
  tone: "green",
  img: "assets/problem-ekzem.png"
},
{
  slug: "sarkoide",
  name: "Sarkoide",
  aka: "Equine Sarkoide, Hautwucherungen",
  achse: "Haut & Immunsystem",
  short: "Gutartige Hauttumoren mit viralem Hintergrund. Wir arbeiten an Immun-Modulation und Leber-Entlastung – immer im Konzert mit Tierarzt.",
  keywords: "Sarkoide Pferd, equine Sarkoide, Hautwucherung, Reishi, Immunsystem",
  program: "Haut & Immun – Aufbau · Reishi · Externa",
  tone: "paper",
  img: "assets/problem-sarkoide.png"
},
{
  slug: "cushing",
  name: "Cushing / PPID",
  aka: "Equines Cushing-Syndrom, PPID",
  achse: "Stoffwechsel & Hormone",
  short: "Hormonelle Erkrankung der Hypophyse, oft ab 15 Jahren. Wir entlasten Leber, stützen Nieren-Jing und begleiten den Hufrehe-Schutz.",
  keywords: "Cushing Pferd, PPID, Mönchspfeffer, Hypophyse, Senior-Pferd, Hufrehe-Prophylaxe",
  program: "Stoffwechsel – Intensiv + Senior-Aufbau",
  tone: "gold",
  img: "assets/problem-cushing.png"
},
{
  slug: "strahlfaeule",
  name: "Strahlfäule",
  aka: "Strahlhornzerfall, Hufstrahl",
  achse: "Hufe & Struktur",
  short: "Bakterielle Zersetzung des Strahlhorns. Lokale Pflege + innere Stärkung von Horn, Lymphe und Darmmilieu wirken zusammen.",
  keywords: "Strahlfäule Pferd, Hufstrahl, Hornqualität, Mauke, Lavado, Externa",
  program: "Hufe & Struktur – Basis + Externa (Lavado, Bálsamo)",
  tone: "paper",
  img: "assets/problem-strahlfaeule.png"
},
{
  slug: "hufrehe",
  name: "Hufrehe",
  aka: "Laminitis, Rehe",
  achse: "Hufe & Stoffwechsel",
  short: "Entzündung der Huflederhaut – fast immer Stoffwechsel- oder Fütterungsursache. Akut: Tierarzt. Chronisch: ursachenbasiert begleiten.",
  keywords: "Hufrehe Pferd, Laminitis, Rehe, Fruktan, Insulinresistenz, EMS",
  program: "Stoffwechsel – Intensiv + Hufe-Aufbau · saisonale Prävention",
  tone: "green",
  img: "assets/problem-rehe.png"
}];


const FAQS = [
// Methode & Wissen
{ cat: "methode", q: "Was ist Caballo Natural?", a: "Caballo Natural ist eine Tierheilpraxis und Marke für ursachenbasierte, ganzheitliche Pferdegesundheit. Wir entwickeln 3-Monats-Programme aus Phytotherapie (Heilpflanzen), Traditioneller Chinesischer Veterinärmedizin (TCVM) und Mykotherapie (Vitalpilze) für 11 Gesundheits-Achsen – von Verdauung und Stoffwechsel über Haut & Immunsystem bis hin zu Senioren-Aufbau. Ergänzend bieten wir eine kostenlose Online-Beratung an." },
{ cat: "methode", q: "Welche Methoden nutzt eine Tierheilpraktikerin bei Pferden?", a: "Ich kombiniere drei Heilkunde-Traditionen: klassische Phytotherapie (Heilpflanzen als Dekokte, Fluide, Pulver und Salben), TCVM mit Konstitutions- und Musterdiagnostik nach den 5 Wandlungsphasen, sowie Mykotherapie mit Vitalpilzen wie Reishi, Shiitake, Cordyceps und Hericium. Tierheilpraktiker:innen ersetzen keine Akut-Veterinärmedizin, sondern begleiten Heilung und Prävention ursachenbasiert." },
{ cat: "methode", q: "Was unterscheidet TCVM von westlicher Tiermedizin?", a: "TCVM (Traditional Chinese Veterinary Medicine) versteht das Pferd als energetisches System. Statt nur das Symptom zu behandeln, fragen wir: In welcher Wandlungsphase (Holz, Feuer, Erde, Metall, Wasser) steht das Tier? Welche Achsen sind aus dem Lot? Welches Muster zeigt sich in Zunge, Puls, Verhalten? Daraus ergibt sich oft eine tiefer wirkende Empfehlung als ein rein symptomatischer Blick." },
{ cat: "methode", q: "Was ist Phytotherapie und wie wirkt sie beim Pferd?", a: "Phytotherapie ist die wissenschaftliche und traditionelle Lehre vom Heilen mit Pflanzen. Beim Pferd nutzen wir Dekokte (konzentrierte Sude aus Wurzeln, Rinden, Hartmaterial), Fluidkonzentrate (mildere Tagesvariante), Pulver (Booster für Intensivphasen) und Externa (Salben, Lavados, Bálsamos). Jede Pflanze hat eine klare Wirkungs-Achse pro Organ – z.B. Mariendistel-Leber, Brennnessel-Niere, Süßholz-Magen." },
{ cat: "methode", q: "Was ist Mykotherapie und welche Vitalpilze sind für Pferde geeignet?", a: "Mykotherapie ist die Therapie mit medizinischen Vitalpilzen. Beim Pferd setzen wir vor allem Reishi (Immun, Schlaf, Allergien), Shiitake (Leber, Stoffwechsel), Cordyceps (Atemwege, Leistung) und Hericium (Nerven, Magen-Schleimhaut) ein. Sie wirken modulierend statt forcierend – ideal für Tiefenarbeit in Intensiv- und Aufbau-Programmen." },
{ cat: "methode", q: "Wer steht hinter Caballo Natural?", a: "Mein Name ist Melissa. Ich bin Tierheilpraktikerin mit über zehn Jahren Praxiserfahrung, seit 2012 zertifiziert in der Traditionellen Chinesischen Veterinärmedizin und seit Kindheit eng mit PRE- und Lusitano-Pferden verbunden. Caballo Natural ist meine Übersetzung dieser Sicht in fütterungs- und kräuterbasierte Programme, die Pferdebesitzer:innen selbständig und sicher anwenden können." },
{ cat: "methode", q: "Was sind die 5 Wandlungsphasen?", a: "Die 5 Wandlungsphasen (Holz, Feuer, Erde, Metall, Wasser) sind das Ordnungssystem der TCVM. Jede Phase steht für ein Organpaar, eine Jahreszeit, eine Emotion und ein Gewebe. Ein Pferd mit Frühjahrs-Hufrehe und Leberbelastung zeigt z.B. ein Holz-Thema, ein Pferd mit Sommerekzem und Hitzeunruhe ein Feuer-Thema. Diese Logik führt uns zur Wahl der Kräuter und Cobs." },

// Programme & Produkte
{ cat: "programme", q: "Wie funktionieren die Caballo-Natural-Programme?", a: "Jedes Programm läuft über 3 Monate mit klarer Phasenlogik. Monat 1 ist der Einstieg (Hauptkräuter starten, Cobs als Basisfutter), Monat 2 die Vertiefung, Monat 3 die Stabilisierung. Jedes Set kombiniert Cobs als Faser-Basis mit einer Hauptkräuter-Achse (Dekokt oder Fluid) und optionalen Begleitprodukten – Stalllinie, Intensiv-Booster, Externa." },
{ cat: "programme", q: "Was bedeuten die Stufen Basis, Intensiv, Aufbau, Erhaltung und Prävention?", a: "Basis ist der sanfte Einstieg bei beginnenden Symptomen. Intensiv ist die tiefe Therapie bei akuten oder chronischen Bildern. Aufbau dient der Rekonvaleszenz nach Druckphasen oder OP. Erhaltung stabilisiert chronisch sensible Pferde zyklisch (10–20 Tage/Monat). Prävention wird 14–28 Tage vor bekannten Triggern eingesetzt – Fellwechsel, Anweiden, Transport, Turnier, Stallwechsel." },
{ cat: "programme", q: "Was ist der Unterschied zwischen Dekokten und Fluiden?", a: "Dekokte sind konzentrierte Sude aus den Hauptkräutern, die du täglich aus 300 g Mischung selbst kochst (~5 L pro Monat). Sie sind die intensivste und günstigste Form (ca. 19 €/Monat) – ideal für Therapiephasen. Fluide sind stalltaugliche Konzentrate (~30 €/L) für Alltag und Erhaltung – einfacher zu dosieren, milder. Wir empfehlen Dekokte in Basis-/Intensiv-Programmen, Fluide in Erhaltung und Prävention." },
{ cat: "programme", q: "Was sind Pulver / Intensiv-Booster?", a: "Pulver sind hochkonzentrierte Phyto-Mischungen (~49 €/300 g) für Intensiv- und Aufbau-Phasen, in denen wir tiefer arbeiten wollen – z.B. bei Magengeschwüren, EMS, schwerer Leberbelastung oder nach OPs. Sie werden direkt ins eingeweichte Futter gegeben." },
{ cat: "programme", q: "Was sind Externa und wofür sind sie da?", a: "Externa sind Salben (Bálsamos), Lösungen (Soluciones), Lavados (Spüllösungen) und Öle (Óleos) zur direkten äußerlichen Anwendung – bei Mauke, Strahlfäule, Sarkoiden, Wunden oder Hufthemen. Sie ergänzen die innere Therapie, ersetzen sie aber nie." },
{ cat: "programme", q: "Welche Gesundheits-Achsen deckt Caballo Natural ab?", a: "Wir decken 11 Achsen ab: Verdauung & Magen, Stoffwechsel/Leber/Niere/Entgiftung, Haut & Fell & Immunsystem, Atemwege, Hufe & Struktur, Muskeln/Leistung/Regeneration, Gelenke & Beweglichkeit, Nerven/Stress/Verhalten, Parasiten & Darmmilieu, Senioren & tiefer Aufbau, Wachstum/Aufzucht/Zucht." },
{ cat: "programme", q: "Wie hoch ist die Dosierung pro Pferd?", a: "Standard-Dosierungen beziehen sich auf 100 kg Pferdegewicht. Ein 500-kg-Warmblut bekommt also 5× die angegebene Menge. Bei sehr mageren Pferden, Senioren oder Jungpferden fluten wir die Dosis langsamer an. Detaillierte Angaben stehen auf jedem Set-Datenblatt und in der individuellen Beratung." },

// Fütterung & Cobs
{ cat: "fuetterung", q: "Was sind Cobs?", a: "Cobs sind gepresste Pellets aus Heu, Esparzette oder grünem Hafer. Sie sind die Basis-Faserquelle aller unserer Programme – schonend, gut einweichbar, mit klarem konstitutionellen Profil. Wir nutzen drei Sorten: Cobs de Heno (neutral, multi-spezies Wiesenheu), Cobs de Esparceta (mild kühlend, magen- und leberfreundlich) und Cobs de Avena Verde (muskelaufbauend, wärmend)." },
{ cat: "fuetterung", q: "Was sind Cobs de Esparceta (Esparzette)?", a: "Esparzette (Onobrychis viciifolia, spanisch Esparceta) ist eine traditionelle Futter-Leguminose mit ~14 % Rohprotein und niedrigem Fruktan. Die enthaltenen kondensierten Tannine schützen Magen- und Darmschleimhaut, hemmen Parasitenlasten und sind mild kühlend nach TCVM. Ideal für magen- und stoffwechselsensible Pferde, EMS-Kandidaten und Sommer-Hitze-Muster." },
{ cat: "fuetterung", q: "Was sind Cobs de Avena Verde (Grünhafer)?", a: "Grünhafer ist die ganze Haferpflanze im Grünschnitt geerntet und gepresst – nicht das Korn, sondern das gesamte Stadium vor der Reife. Reich an Silicium, B-Vitaminen und Kieselsäure. Wärmend nach TCVM, stützt Milz-Qi und Muskelaufbau. Wir setzen ihn in Aufbau-, Sport- und Senior-Programmen ein – nervlich stabilisierend, ohne aufzudrehen." },
{ cat: "fuetterung", q: "Was sind Cobs de Heno (Spanisches Heu)?", a: "Cobs de Heno sind unsere Standard-Basisfutter-Pellets aus sortenreichem, sonnengetrocknetem spanischen Wiesenheu (Andalusien). Multi-spezies Pflanzenbestand, neutrales Konstitutions-Profil, gut verträglich auch für sensible Mägen und Zahnpatienten. Geeignet als durchgehender Basisstrang in fast jedem Programm." },
{ cat: "fuetterung", q: "Wie weiche ich Cobs richtig ein?", a: "Cobs immer mit 3–4× ihrem Volumen lauwarmem Wasser übergießen und mindestens 20–30 Minuten ziehen lassen, bis sie weich sind. Im Sommer max. 2 Stunden – sonst Gärung. Am besten direkt vor der Fütterung anrichten und auf 2 Mahlzeiten verteilen. Niemals trocken füttern (Schluckstörungs- und Verstopfungsgefahr)." },
{ cat: "fuetterung", q: "Welche Cobs für mein Pferd?", a: "Faustregel: Cobs de Heno als Standard. Cobs de Esparceta bei Magenproblemen, Leberbelastung, EMS, Cushing oder Sommer-Hitze-Pferden. Cobs de Avena Verde bei Muskelaufbau, schwacher Oberlinie, Senior-Aufbau oder Sportpferden. In Kombi-Programmen mischen wir oft zwei Sorten – die individuelle Beratung führt dich durch die Wahl." },

// Krankheiten & Symptome
{ cat: "krankheiten", q: "Sommerekzem beim Pferd – was hilft wirklich?", a: "Sommerekzem ist eine allergische Reaktion auf den Speichel der Kriebelmücke. Die Wurzel liegt selten nur in der Haut – fast immer in Leber, Lymphe und Darmmilieu. Wir arbeiten ab Februar/März präventiv mit Leber-Entlastung und Darm-Stabilisierung, plus äußerlich kühlende Lavados und Bálsamos. Pures Cortison oder Pour-On verschiebt das Thema nur." },
{ cat: "krankheiten", q: "Was tun bei Sarkoiden?", a: "Sarkoide sind gutartige Hautwucherungen mit viralem Hintergrund. Wir arbeiten an Immun-Modulation (Reishi, Shiitake), Leber-Entlastung und gezielter Externa-Pflege – immer im Konzert mit dem Tierarzt, vor allem bei wachsenden oder reibungsbelasteten Stellen. Kein Schnellschuss, sondern monatelange Konstitutionsarbeit." },
{ cat: "krankheiten", q: "Cushing-Syndrom (PPID) – natürliche Begleitung?", a: "Equines Cushing (PPID) ist eine hormonelle Erkrankung der Hypophyse, meist ab 15 Jahren. Unsere Begleitung läuft auf drei Ebenen: 1. Hypophysen-Stützung (Mönchspfeffer-haltige Programme), 2. Leber- und Stoffwechsel-Entlastung (Mariendistel, Löwenzahn), 3. Hufrehe-Prophylaxe in Risikoperioden. Tierärztliche Diagnose und ggf. Pergolid bleiben Standard." },
{ cat: "krankheiten", q: "Strahlfäule – was hilft langfristig?", a: "Strahlfäule ist die bakterielle Zersetzung des Strahlhorns durch anaerobe Bedingungen (nasser, kotbelasteter Untergrund). Wir kombinieren lokale Pflege (Lavado, Bálsamo, Ungüento) mit innerer Stärkung von Horn, Lymphe und Darmmilieu. Ohne Haltungsoptimierung kein Erfolg – täglich auskratzen, trocken aufstallen, mineralisch versorgen." },
{ cat: "krankheiten", q: "Hufrehe / Laminitis – wie kann ich vorbeugen?", a: "Hufrehe ist fast immer Stoffwechsel- und Fütterungsfolge (EMS, Cushing, Insulinresistenz, Fruktanspitzen). Akut: sofort Tierarzt, Eis, Boxenruhe. Chronisch und präventiv: Stoffwechsel-Intensiv-Programm 14–28 Tage vor Risiko-Phasen (Anweiden Frühjahr, Herbstweide, Fellwechsel), eiweiß- und fruktanarme Cobs (Esparceta), regelmäßige Hufpflege." },
{ cat: "krankheiten", q: "Magengeschwüre (EGUS) – wie behandelt man sie ursachenbasiert?", a: "Equine Gastric Ulcer Syndrome entsteht durch leeren Magen, Stress, Kraftfutter und NSAIDs. Wir arbeiten mit Eibischwurzel, Süßholz und Kamille (Schleimhaut-Aufbau), Calma Gástrica als Hauptdekokt, plus Fütterungsumstellung: häufige kleine Mahlzeiten, Cobs de Esparceta, keine langen Fresspausen, Stressreduktion." },
{ cat: "krankheiten", q: "Kotwasser beim Pferd – woher kommt es?", a: "Kotwasser ist fast immer eine Dysbiose (Darmflora-Störung), oft kombiniert mit schlechtem Raufutter, schnellem Futterwechsel oder latenter Leberbelastung. Wir stabilisieren mit Fenchel, Kümmel, Heilerde-Komponente und einem 3-Monats-Darm-Programm. Sofortmaßnahme: Heuanalyse, Mineralcheck, Heuwechsel langsam einleiten." },
{ cat: "krankheiten", q: "Mein Pferd hat mehrere Symptome – welches Set passt?", a: "Wenn dein Pferd Symptome aus mehr als zwei Gesundheits-Achsen zeigt, empfehlen wir kein Standard-Set, sondern unsere kostenlose Online-Beratung. Wir analysieren den Hauptkomplex und führen alle Achsen stimmig zusammen, statt mehrere Sets parallel zu fahren – das wäre belastend für Leber und Darm." },

// Beratung & Bestellung
{ cat: "beratung", q: "Ist die Online-Beratung wirklich kostenlos?", a: "Ja. Unsere Online-Beratung ist kostenlos und unverbindlich. Du füllst einen 7-Schritte-Fragebogen aus, ich melde mich innerhalb von 3–5 Werktagen mit einer schriftlichen Einschätzung und – wenn sinnvoll – einem konkreten Programm-Vorschlag. Erst wenn du ein Programm bestellst, entstehen Kosten." },
{ cat: "beratung", q: "Wie lange dauert die Antwort auf eine Beratung?", a: "Werktags antworte ich innerhalb von 48 Stunden mit einer ersten Rückmeldung. Die ausführliche schriftliche Auswertung mit Konstitutionsanalyse und Empfehlung erhältst du innerhalb von 3–5 Werktagen per E-Mail." },
{ cat: "beratung", q: "Wohin liefert ihr?", a: "Wir liefern direkt nach Deutschland, Österreich und Spanien. Lieferzeit ca. 4–7 Werktage. Sammelbestellungen für Ställe oder Gruppen sind ebenfalls möglich – frag mich gerne über Großverbraucher-Konditionen." },
{ cat: "beratung", q: "Sind die Produkte tierärztlich zugelassen?", a: "Unsere Produkte sind Ergänzungsfuttermittel und Futtermittel in Lebensmittelqualität, keine Tierarzneimittel. Sie ersetzen keine tierärztliche Diagnose oder Akut-Behandlung, sondern unterstützen die Heilung und Prävention. Bei akuten Notfällen immer zuerst Tierarzt kontaktieren." },
{ cat: "beratung", q: "Kann ich ein Programm abbrechen oder zurückgeben?", a: "Geöffnete Lebensmittel- und Futtermittelpackungen sind aus Hygiene-Gründen nicht rückgabefähig. Ungeöffnete Originalverpackungen können innerhalb von 14 Tagen zurückgegeben werden. Falls ein Programm aus gesundheitlichen Gründen pausiert werden muss, finden wir gemeinsam eine Lösung – meld dich einfach." }];



const FAQView = () => {
  const [open, setOpen] = useStateP(0);
  const [activeCat, setActiveCat] = useStateP("alle");
  const [topicTab, setTopicTab] = useStateP("cobs");
  const filtered = activeCat === "alle" ? FAQS : FAQS.filter((f) => f.cat === activeCat);

  return (
    <div data-screen-label="FAQ">
      <section className="page-hero">
        <div className="container">
          <span className="eyebrow">Wissen · Phytotherapie · TCVM · Mykotherapie</span>
          <h1>FAQ – <em>ganzheitliche Pferdegesundheit</em> verstehen</h1>
          <p className="lead">Antworten auf die häufigsten Fragen zu naturheilkundlicher Pferdetherapie: Sommerekzem, Sarkoide, Cushing, Hufrehe, Strahlfäule, Magengeschwüre, Kotwasser – plus alles zu Dekokten, Cobs, Esparzette, Grünhafer und der Methodik einer Tierheilpraktikerin. Du findest deine Frage nicht? Schreib uns – wir antworten persönlich.</p>
        </div>
      </section>

      {/* Themen-Karusell: alle Produkt-Kategorien & Probleme als Tabs */}
      <section className="page-body" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container">
          <div className="topic-head">
            <div>
              <div className="eyebrow">Themen im Überblick</div>
              <h2>Produkt-Linien & häufige Probleme</h2>
            </div>
          </div>
          <div className="topic-tabs">
            {[
            { id: "cobs", label: "Cobs", data: COBS_PORTRAITS },
            { id: "einzel", label: "Einzelkräuter", data: EINZELKRAEUTER_CARDS },
            { id: "dekokte", label: "Dekokte", data: DEKOKTE_CARDS },
            { id: "fluide", label: "Fluide", data: FLUIDE_CARDS },
            { id: "externa", label: "Externa", data: EXTERNA_CARDS },
            { id: "probleme", label: "Häufige Probleme", data: PROBLEM_CARDS }].
            map((t) =>
            <button
              key={t.id}
              className={`topic-tab ${topicTab === t.id ? "active" : ""}`}
              onClick={() => setTopicTab(t.id)}>
              
                <span>{t.label}</span>
                <span className="topic-tab-count">{t.data.length}</span>
              </button>
            )}
          </div>

          {(() => {
            const tabData = {
              cobs: COBS_PORTRAITS,
              einzel: EINZELKRAEUTER_CARDS,
              dekokte: DEKOKTE_CARDS,
              fluide: FLUIDE_CARDS,
              externa: EXTERNA_CARDS,
              probleme: PROBLEM_CARDS
            }[topicTab] || COBS_PORTRAITS;

            const isProblems = topicTab === "probleme";

            return (
              <div className="topic-carousel">
                {tabData.map((c) =>
                <article key={c.slug} className={"topic-card" + (isProblems ? " problem-card" : "")} data-tone={c.tone}>
                    <div className="topic-img">
                      <img src={c.img} alt={c.name}
                    onError={(e) => {e.target.style.display = "none";}} />
                      <div className="problem-img-fallback" aria-hidden="true">
                        <div className="cifb-stripes" data-tone={c.tone} />
                        <div className="cifb-label">
                          <div className="cifb-mono">↳ {c.de || c.name}</div>
                        </div>
                      </div>
                    </div>
                    <div className="topic-body">
                      <div className="cobs-mono">{c.latin || c.achse}</div>
                      <h3>{c.name}</h3>
                      {isProblems && <p className="problem-aka">auch: {c.aka}</p>}
                      <p>{isProblems ? c.short : c.pitch}</p>
                      {c.facts &&
                    <ul className="cobs-facts">
                          {c.facts.map((f, i) => <li key={i}><span className="cobs-dot" /> {f}</li>)}
                        </ul>
                    }
                      {isProblems && <div className="problem-program"><strong>Empfohlen:</strong> {c.program}</div>}
                    </div>
                  </article>
                )}
              </div>);

          })()}

          <div className="topic-carousel-hint">← Seitlich scrollen für weitere Themen →</div>
        </div>
      </section>

      {/* Kategorien-Filter + FAQ-Liste */}
      <section className="page-body">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 24 }}>
            <div className="titles">
              <div className="eyebrow">Häufig gestellte Fragen</div>
              <h2>Fragen & Antworten <em>nach Thema</em></h2>
            </div>
          </div>
          <div className="faq-cats">
            {FAQ_CATS.map((c) =>
            <button
              key={c.id}
              className={`faq-cat ${activeCat === c.id ? "active" : ""}`}
              onClick={() => {setActiveCat(c.id);setOpen(-1);}}>
              
                {c.label}
                <span className="faq-cat-count">
                  {c.id === "alle" ? FAQS.length : FAQS.filter((f) => f.cat === c.id).length}
                </span>
              </button>
            )}
          </div>
          <div className="faq-list">
            {filtered.map((f, i) =>
            <div key={i} className="faq-item">
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="toggle">{open === i ? "−" : "+"}</span>
                </button>
                {open === i && <div className="faq-a">{f.a}</div>}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Structured data for SEO – FAQPage + MedicalCondition for each problem */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": FAQS.map((f) => ({
            "@type": "Question",
            "name": f.q,
            "acceptedAnswer": { "@type": "Answer", "text": f.a }
          }))
        })
      }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          "@graph": PROBLEM_CARDS.map((p) => ({
            "@type": "MedicalCondition",
            "name": p.name + " (Pferd)",
            "alternateName": p.aka,
            "description": p.short,
            "keywords": p.keywords,
            "associatedAnatomy": p.achse,
            "possibleTreatment": { "@type": "TherapeuticProcedure", "name": p.program }
          }))
        })
      }} />
    </div>);

};

// ============ BLOG ============
const BLOG_POSTS = [
{ title: "Frühjahrsweide – warum die Stoffwechsel-Prävention jetzt anfängt", excerpt: "Fruktanspitzen, junges Gras und Insulinkurven: Wie du dein Pferd 14 Tage vor dem Anweiden vorbereitest.", tag: "Saisonal", date: "März 2026", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-1.png" },
{ title: "Magen und Stress – die unsichtbare Verbindung", excerpt: "Warum Kolik-, Gähn- und Schreckverhalten oft denselben Ursprung haben – und wie Equilibrio Nervioso + Calma Gástrica zusammen wirken.", tag: "TCVM-Logik", date: "Februar 2026", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback.png" },
{ title: "Reishi für Pferde – was Mykotherapie wirklich kann", excerpt: "Die Wahrheit über Vitalpilze in der Pferdefütterung: Was sie können, was nicht – und wann sie ihre Tiefenwirkung entfalten.", tag: "Mykotherapie", date: "Januar 2026", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-15.png" },
{ title: "Sommerekzem ist kein Hautthema – meistens", excerpt: "Warum wir bei Ekzemern erst auf Leber, Lymphe und Darmmilieu schauen, bevor wir die Salbe öffnen.", tag: "Haut & Immun", date: "Dezember 2025", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-2.png" },
{ title: "Hufrehe – die fünf häufigsten Fütterungsfehler", excerpt: "Was wir aus 12 Jahren Begleitung rehe-anfälliger Pferde gelernt haben – und welche Dinge wir nie wieder tun.", tag: "Hufe & Struktur", date: "November 2025", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-6.png" },
{ title: "Cobs einweichen – Anleitung für Eilige und Gründliche", excerpt: "Wie lange, wieviel Wasser, mit oder ohne Salz: Die kleinen Stell­schrauben, die einen großen Unterschied machen.", tag: "Praxis", date: "Oktober 2025", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-10.png" }];


const KNOWLEDGE_RESOURCES = [
{ route: "symptoms-guide", icon: "search", title: "Krankheits- & Symptom-Guide", desc: "Symptome richtig deuten – von Kotwasser bis Hufrehe. Finde die wahren Ursachen statt nur Symptome zu behandeln." },
{ route: "herbs", icon: "leaf", title: "Pflanzen-Lexikon", desc: "Heilpflanzen der Phytotherapie im Überblick – Wirkung, Anwendung und Einsatz für die Pferdegesundheit." },
{ route: "glossary", icon: "spark", title: "TCVM-Glossar", desc: "Die wichtigsten Begriffe der Traditionellen Chinesischen Veterinärmedizin verständlich erklärt." }];


const BlogView = ({ onNav }) =>
<div data-screen-label="Wissen">
    <section className="page-hero">
      <div className="container">
        <span className="eyebrow">Wissensmagazin · Phytotherapie · TCVM</span>
        <h1>Tiefer einlesen – <em>Pferdegesundheit verstehen</em></h1>
        <p className="lead">Saisonale Fütterungs-Guides, TCVM-Erklärungen und Praxis-Berichte aus 12 Jahren Begleitung von Pferden.</p>
      </div>
    </section>
    <section className="page-body" style={{ paddingBottom: 0 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 20, marginBottom: 56 }}>
          {KNOWLEDGE_RESOURCES.map((r, i) =>
        <a
          key={i}
          href="#"
          onClick={(e) => {e.preventDefault();onNav && onNav(r.route);}}
          style={{ display: "flex", flexDirection: "column", gap: 14, padding: "28px 26px", borderRadius: "var(--r-md, 14px)", border: "1px solid var(--line, #e4e0d6)", background: "var(--bg-card, #fff)", textDecoration: "none", color: "inherit", transition: "transform .2s ease, box-shadow .2s ease, border-color .2s ease" }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-4px)";e.currentTarget.style.boxShadow = "0 16px 40px rgba(0,0,0,.08)";e.currentTarget.style.borderColor = "var(--green-deep, #1f5c4d)";}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = "";e.currentTarget.style.boxShadow = "";e.currentTarget.style.borderColor = "var(--line, #e4e0d6)";}}>

              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 48, height: 48, borderRadius: 12, background: "var(--green-deep, #1f5c4d)", color: "#fff" }}><Icon name={r.icon} size={22} /></span>
              <h3 style={{ margin: 0, fontFamily: "var(--ff-display)", fontWeight: 500 }}>{r.title}</h3>
              <p style={{ margin: 0, color: "var(--ink-mute)", fontSize: 14, lineHeight: 1.5 }}>{r.desc}</p>
              <span style={{ marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 6, color: "var(--green-deep, #1f5c4d)", fontWeight: 600, fontSize: 14 }}>Ansehen <Icon name="arrow" size={15} /></span>
            </a>
        )}
        </div>
      </div>
    </section>
    <section className="page-body" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="blog-grid">
          {BLOG_POSTS.map((p, i) =>
        <article key={i} className="blog-card">
              <div className="b-thumb"><img src={p.img} alt={p.title} /></div>
              <div className="b-meta">
                <span>{p.tag}</span><span>·</span><span>{p.date}</span>
              </div>
              <h3>{p.title}</h3>
              <p className="b-excerpt">{p.excerpt}</p>
              <a className="btn btn-ghost" href="#" onClick={(e) => e.preventDefault()}>Weiterlesen</a>
            </article>
        )}
        </div>
      </div>
    </section>
  </div>;


// ============ CONTACT ============
const ContactView = () =>
<div data-screen-label="Kontakt">
    <section className="page-hero">
      <div className="container">
        <span className="eyebrow">Kontakt</span>
        <h1>Schreib uns – <em>wir antworten persönlich</em>.</h1>
        <p className="lead">Für Fragen zu Programmen, Bestellungen, individuellen Beratungen oder einfach um über dein Pferd zu reden. Wir freuen uns.</p>
      </div>
    </section>
    <section className="page-body">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="row">
              <div className="icon"><Icon name="mail" size={16} /></div>
              <div className="info">
                <div className="label">E-Mail</div>
                <a href="mailto:info@caballonatural.com" style={{ color: "var(--green-deep)", fontWeight: 600 }}>info@caballonatural.com</a>
              </div>
            </div>
            <div className="row">
              <div className="icon"><Icon name="phone" size={16} /></div>
              <div className="info">
                <div className="label">Telefon</div>
                <a href="tel:+491234567890" style={{ color: "var(--green-deep)", fontWeight: 600 }}>+49 123 456 7890</a>
                <div style={{ color: "var(--ink-mute)", fontSize: 12, marginTop: 4 }}>Mo–Fr, 9–17 Uhr</div>
              </div>
            </div>
            <div className="row">
              <div className="icon"><Icon name="pin" size={16} /></div>
              <div className="info">
                <div className="label">Praxis</div>
                <div style={{ fontWeight: 600 }}>Tierheilpraxis Caballo Natural</div>
                <div style={{ color: "var(--ink-mute)" }}>Deutschland & Spanien</div>
              </div>
            </div>
            <div className="row">
              <div className="icon"><Icon name="leaf" size={16} /></div>
              <div className="info">
                <div className="label">Spezialisierung</div>
                <div style={{ fontWeight: 600 }}>Phytotherapie · TCVM · Mykotherapie</div>
                <div style={{ color: "var(--ink-mute)" }}>Tierheilpraktikerin – TCM seit 2012</div>
              </div>
            </div>
          </div>
          <form className="contact-form" onSubmit={(e) => {e.preventDefault();alert("Nachricht gesendet (Demo)");}}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field"><label>Name</label><input required defaultValue="" placeholder="Dein Name" /></div>
              <div className="field"><label>E-Mail</label><input required type="email" placeholder="du@beispiel.de" /></div>
            </div>
            <div className="field"><label>Pferdename & Alter (optional)</label><input placeholder="z.B. Luna, 14 Jahre" /></div>
            <div className="field">
              <label>Worum geht es?</label>
              <select>
                <option>Frage zu einem Programm</option>
                <option>Individuelle Beratung anfragen</option>
                <option>Bestellung / Versand</option>
                <option>Kooperation / Stallbetreuung</option>
                <option>Sonstiges</option>
              </select>
            </div>
            <div className="field"><label>Deine Nachricht</label><textarea required placeholder="Erzähl uns von deinem Pferd…" /></div>
            <button type="submit" className="btn btn-primary btn-lg" style={{ marginTop: 8 }}>Senden <Icon name="arrow" /></button>
            <p style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 12 }}>
              Mit dem Absenden stimmst du unserer <a href="#" style={{ color: "var(--green-deep)", textDecoration: "underline" }}>Datenschutzerklärung</a> zu.
            </p>
          </form>
        </div>
      </div>
    </section>
  </div>;


// ============ CONSULTATION (path picker) ============
const CONSULTATION_PLANS = [
{
  id: "feed",
  name: "Individuelle Online-Beratung",
  desc: "Kostenlose und persönliche Beratung – ich analysiere dein Pferd ganzheitlich nach TCVM und stelle einen passenden Programm- oder Fütterungsvorschlag zusammen.",
  price: 0,
  img: "assets/melissa.png",
  perks: [
  "TCVM-Konstitutionsanalyse",
  "Heu- & Raufutter-Check",
  "Mineralstoff- & Vitamin-Auswertung",
  "Kräuterplan (Phytotherapie)",
  "Darm- und Stoffwechsel-Optimierung",
  "Schriftliche Empfehlung in 3–5 Werktagen",
  "Folge-Check nach 4–6 Wochen inklusive"],

  recommended: false
}];


const ConsultationView = ({ onNav }) =>
<div data-screen-label="Beratung">
    <section className="cons-hero">
      <div className="container">
        <div style={{ maxWidth: 760 }}>
          <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>Kostenlose & professionelle Beratung</span>
          <h1 style={{ marginTop: 14 }}>Wenn dein Pferd <em>mehr</em> hat als eine Beschwerde<br />– analysieren wir gemeinsam.</h1>
          <p className="lead" style={{ marginTop: 22, color: "rgba(242,235,215,0.85)", maxWidth: 60 + "ch" }}>
            Manche Pferde zeigen Symptome aus mehreren Achsen gleichzeitig. Magen + Stoffwechsel + Haut – das ist kein Zufall, sondern ein Muster. Wir lesen dieses Muster mit TCVM und stellen entweder ein Standard-Programm zusammen – oder formulieren ein individuelles Rezept.
          </p>
          <div className="stats">
            <div><div className="stat-num">100%</div><div className="stat-label">Erstberatung kostenlos</div></div>
            <div><div className="stat-num">48h</div><div className="stat-label">Antwortzeit (Werktage)</div></div>
            <div><div className="stat-num">10J.</div><div className="stat-label">Erfahrung </div></div>
          </div>
        </div>
      </div>
    </section>

    <section className="cons-paths">
      <div className="container">
        <div className="head">
          <span className="eyebrow">Deine kostenlose Online-Beratung</span>
          <h2>Persönlich, ganzheitlich, <em>kostenlos</em>.</h2>
          <p>Ich nehme mir Zeit für dein Pferd. Du füllst den 7-Schritte-Fragebogen aus, ich analysiere ihn nach den Prinzipien der Traditionellen Chinesischen Veterinärmedizin und melde mich mit einer schriftlichen, individuellen Empfehlung – ohne Verkaufsdruck, ohne versteckte Kosten.</p>
        </div>

        <div className="consult-feature">
          <div className="cf-media">
            <img src="assets/melissa-pferd.png" alt="Melissa – Tierheilpraktikerin mit Fohlen" />
            <div className="cf-badge">
              <span className="cf-badge-dot" />
              <span>100 % KOSTENLOS </span>
            </div>
          </div>

          <div className="cf-body">
            <div className="cf-price-row">
              <div className="cf-price">
                <span className="cf-price-num">Kostenlos</span>
                <span className="cf-price-sub">Erstberatung & schriftliche Auswertung</span>
              </div>
              <div className="cf-time">
                <div className="cf-time-num">3–5 Tage</div>
                <div className="cf-time-sub">Antwortzeit (Werktage)</div>
              </div>
            </div>

            <h3>Was in der Beratung steckt</h3>
            <ul className="cf-perks">
              <li><span className="tick"><Icon name="check" size={11} /></span> <strong>TCVM-Konstitutionsanalyse</strong> – Yin/Yang-Lage, Wandlungsphase, Achsen</li>
              <li><span className="tick"><Icon name="check" size={11} /></span> <strong>Heu- & Raufutter-Check</strong> – Qualität, Menge, Saison</li>
              <li><span className="tick"><Icon name="check" size={11} /></span> <strong>Mineralstoff- & Vitamin-Auswertung</strong> der aktuellen Ration</li>
              <li><span className="tick"><Icon name="check" size={11} /></span> <strong>Individueller Kräuterplan</strong> (Phytotherapie) abgestimmt auf Konstitution</li>
              <li><span className="tick"><Icon name="check" size={11} /></span> <strong>Darm- und Stoffwechsel-Optimierung</strong> als Basis aller Achsen</li>
              <li><span className="tick"><Icon name="check" size={11} /></span> <strong>Schriftliche Empfehlung</strong> in 3–5 Werktagen per Mail</li>
              <li><span className="tick"><Icon name="check" size={11} /></span> <strong>Folge-Check nach 4–6 Wochen</strong> – inklusive, ohne Aufpreis</li>
            </ul>

            <div className="cf-section">
              <div className="cf-section-eyebrow">Wann ist diese Beratung sinnvoll?</div>
              <ul className="cf-bullets">
                <li>Wenn dein Pferd <strong>Symptome aus mehreren Achsen</strong> zeigt – z. B. Magen + Haut, Stoffwechsel + Atemwege.</li>
                <li>Wenn ein <strong>chronisches Bild</strong> trotz mehrerer Versuche nicht weicht.</li>
                <li>Wenn du <strong>nicht sicher bist</strong>, in welcher Konstitution dein Pferd gerade ist.</li>
                <li>Vor <strong>großen Veränderungen</strong>: Stallwechsel, Saisonwechsel, Trächtigkeit, OP.</li>
                <li>Wenn du <strong>mehrere Pferde</strong> betreust und ein Gesamtkonzept brauchst.</li>
              </ul>
            </div>

            <div className="cf-section cf-section-plan">
              <div className="cf-section-eyebrow">Dein 3-Monats-Plan – mein Ansatz</div>
              <p>Wenn aus der Beratung ein Programm wird, denken wir nicht in Pillen, sondern in <strong>3-Monats-Phasen</strong>: Monat 1 ist der Einstieg (Hauptkräuter starten, Cobs als Basis), Monat 2 die Vertiefung, Monat 3 die Stabilisierung. So bekommt dein Pferd Zeit und Rhythmus – Heilung braucht beides.</p>
              <p>Statt das Symptom zu unterdrücken, arbeiten wir an der Ursache – mit Phytotherapie, TCVM-Logik und Mykotherapie. Du bekommst genaue Dosierungen, klare Phasenanleitungen und einen Folge-Check nach 4–6 Wochen, damit wir gemeinsam nachjustieren.</p>
            </div>

            <div className="cf-section-eyebrow" style={{ marginBottom: 12 }}>So läuft es ab</div>

            <div className="cf-steps">
              <div className="cf-step">
                <div className="cf-step-num">01</div>
                <div>
                  <div className="cf-step-title">Fragebogen ausfüllen</div>
                  <div className="cf-step-desc">~12 Minuten · alle Angaben optional</div>
                </div>
              </div>
              <div className="cf-step">
                <div className="cf-step-num">02</div>
                <div>
                  <div className="cf-step-title">Persönliche Auswertung</div>
                  <div className="cf-step-desc">Ich lese dein Pferd als Muster, nicht als Symptom</div>
                </div>
              </div>
              <div className="cf-step">
                <div className="cf-step-num">03</div>
                <div>
                  <div className="cf-step-title">Empfehlung per Mail</div>
                  <div className="cf-step-desc">Programm-Vorschlag oder individuelles Rezept</div>
                </div>
              </div>
            </div>

            <button className="btn btn-primary btn-lg cf-cta" onClick={() => onNav("consultation-quiz", "feed")}>
              Kostenlose Beratung starten <Icon name="arrow" size={14} />
            </button>
            <p className="cf-note">Keine Kreditkarte, keine Bindung. Du bekommst meine ehrliche Einschätzung – ob ein Programm sinnvoll ist oder nicht.</p>
          </div>
        </div>

        <div style={{ marginTop: 56, textAlign: "center" }}>
          <p style={{ fontSize: 14, color: "var(--ink-mute)" }}>
            Noch unsicher, ob die Beratung das Richtige ist? <a href="#" onClick={(e) => {e.preventDefault();onNav("faq");}} style={{ color: "var(--green-deep)", fontWeight: 600, textDecoration: "underline" }}>Antworten in den FAQ →</a>
          </p>
        </div>
      </div>
    </section>

    <section className="page-body">
      <div className="container">
        <div className="col-2">
          <div className="side">Hinweis</div>
          <div className="prose">
            <h2>Wichtig zu wissen</h2>
            <p>Meine Programme und Empfehlungen sind <strong>unterstützend</strong> und ersetzen <strong>keine tierärztliche Akutversorgung</strong>. Bei akuten oder schwerwiegenden Erkrankungen – starke Kolik, Hufrehe-Akut, Fieber, Lahmheit unklarer Ursache, Atemnot – bitte zuerst Tierarzt kontaktieren. Naturheilkunde wirkt am besten dort, wo sie Heilung und Prävention <em>begleitet</em> und Ursachen adressiert.</p>
          </div>
        </div>
      </div>
    </section>
  </div>;


// ============ Simple imprint / privacy placeholders ============
const SimplePage = ({ title, children }) =>
<div data-screen-label={title}>
    <section className="page-hero"><div className="container"><span className="eyebrow">Rechtliches</span><h1>{title}</h1></div></section>
    <section className="page-body"><div className="container" style={{ maxWidth: 800 }}><div className="prose">{children}</div></div></section>
  </div>;


const ImprintView = () =>
<SimplePage title="Impressum">
    <p style={{ color: "var(--ink-mute)" }}>Platzhalter – bitte echte Angaben ergänzen.</p>
    <p><strong>Tierheilpraxis Caballo Natural</strong><br />Inhaberin: [Name]<br />Anschrift: [Straße, PLZ, Ort]<br />E-Mail: info@caballonatural.com<br />Telefon: +49 123 456 7890<br />USt-IdNr.: [DE…]<br />Berufsbezeichnung: Tierheilpraktikerin</p>
    <h2>Haftungsausschluss</h2>
    <p>Die Inhalte dieser Website ersetzen keine tierärztliche Diagnose oder Behandlung. Bei akuten Erkrankungen bitte zuerst Tierarzt kontaktieren.</p>
  </SimplePage>;

const PrivacyView = () =>
<SimplePage title="Datenschutz">
    <p style={{ color: "var(--ink-mute)" }}>Platzhalter – bitte vollständige Datenschutzerklärung ergänzen.</p>
    <h2>Verantwortlicher</h2><p>Tierheilpraxis Caballo Natural, info@caballonatural.com</p>
    <h2>Erhobene Daten</h2><p>Kontaktdaten via Kontaktformular und Beratungs-Quiz, Newsletter-Anmeldung (Double-Opt-In), Cookies für Warenkorb und Login.</p>
    <h2>Deine Rechte</h2><p>Auskunft, Berichtigung, Löschung, Datenübertragbarkeit, Widerspruch – formlos an info@caballonatural.com.</p>
  </SimplePage>;


Object.assign(window, { ProductsView, AboutView, PhilosophyView, FAQView, BlogView, ContactView, ConsultationView, ImprintView, PrivacyView, CONSULTATION_PLANS });