/* Caballo Natural – Header, Footer, MegaMenu */ const { useState, useEffect, useRef, useMemo } = React; const NavLogoSvg = ({ height = 44 }) => CABALLO NATURAL NATURAL FOOD FOR HORSES ; const Logo = ({ height = 44, dark = false }) =>
Caballo Natural {e.target.style.display = "none";e.target.parentElement.innerHTML = '
CaballoNatural
';}} />
; const Icon = ({ name, size = 18 }) => { const paths = { search: <>, user: <>, heart: , bag: <>, arrow: , check: , close: , phone: , mail: <>, pin: <>, spark: , leaf: , sun: <> }; return ( {paths[name]} ); }; // ============ MEGA MENU ============ const MegaMenu = ({ kind = "programs", onNav, onClose, megaTrigger = "hover" }) => { const cats = window.__CN.CATEGORIES; if (kind === "products") { const data = window.__CN.data; const LINE_CARDS = [ { key: "fluid", label: "Fluide", sub: "Alltagstauglich", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback.png", route: ["products", null], hash: "fluid", line: "Fluidkonzentrate", color: "var(--green-deep)" }, { key: "pulver", label: "Pulver", sub: "EMS, Cushing, Leber & Niere", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-3.png", route: ["products", null], hash: "pulver", line: "Intensiv-Booster", color: "var(--red-mute)" }, { key: "dekokt", label: "Dekokte", sub: "Hauptkräuter-Sude · 19 €", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback.png", route: ["products", null], hash: "dekokt", line: "Dekoktlinie", color: "var(--gold)" }, { key: "einzel", label: "Einzelkräuter", sub: "Mono-Pflanzen, lose", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-1.png", route: ["products", null], hash: "einzel", line: "Einzelkräuter", color: "#5F8C5C" }, { key: "suppl", label: "Supplements", sub: "Spirulina · Chlorella · Vitalpilze", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-15.png", route: ["products", null], hash: "suppl", line: "Supplements", color: "#2A6A60" }, { key: "cobs", label: "Cobs", sub: "Basisfutter aller Programme", img: "https://caballo-natural.es/wp-content/uploads/2026/04/Image-Leisure-Horses.png", route: ["products", null], hash: "cobs", line: "Cobs – Basisfutter", color: "#8A6E2C" }, { key: "externa", label: "Externa", sub: "Salben & Lösungen", img: "https://caballo-natural.es/wp-content/uploads/2026/04/ImageWithFallback-2.png", route: ["products", null], hash: "externa", line: "Externa – Salben & Lösungen", color: "#6A4978" }]; return (
{/* Column 1: Linien */}
Endkunden-Linien
{LINE_CARDS.map((l) => { const lineMap = { "Fluide": "Fluidkonzentrate", "Pulver": "Intensivbooster", "Cobs": "Cobs", "Externa": "Externa", "Dekokte": "Dekoktlinie" }; const extra = { "Einzelkräuter": 12, "Supplements": 11 }; const count = lineMap[l.label] ? Object.values(data.prices.products).filter((p) => p.line === lineMap[l.label]).length : extra[l.label] || 0; return (
{onNav("products");onClose();}}>
{l.key.toUpperCase().slice(0, 4)}
{l.label} · {count}
{l.sub}
); })}
{/* Column 2: Achsen */}
Nach Gesundheits-Achse
{cats.slice(0, 6).map((c) =>
{onNav("products");onClose();}}> {c.name}
{c.name.split(",")[0].split(" / ")[0]}
{c.short}
)}
Weitere Achsen
{cats.slice(6).map((c) =>
{onNav("products");onClose();}}> {c.name}
{c.name.split(",")[0].split(" / ")[0]}
{c.short}
)}
{/* Feature */}
Pflanzen-Lexikon

16 Heilpflanzen – was wirkt warum?

Mariendistel, Brennnessel, Zistrose, Reishi … mit TCVM-Achse, Indikationen und Produkten.

); } if (kind === "wholesale") { return (
Großverbraucher-Linie
{onNav("wholesale-shop");onClose();}}>
STALL
Stalllinie · Tagesbegleiter
Mengenformat für Bestände · Preis auf Anfrage
{onNav("wholesale-shop");onClose();}}>
BUNDLE
Bestands-Bundles
Saisonkonzepte, Fellwechsel-Pakete, Aufzucht
{onNav("wholesale");onClose();}}>
INFO
Großverbraucher-Übersicht
Modelle, Mengenstaffel, Prozess
Für wen ist das?
{sessionStorage.setItem("ws-anchor", "segment-sport"); onNav("wholesale");onClose();}}>
Sport- & Turnierställe
Bestandsbetreuung, Saisonkonzepte
{sessionStorage.setItem("ws-anchor", "segment-zucht"); onNav("wholesale");onClose();}}>
Zuchten & Gestüte
Fohlen, Stuten, Aufzucht-Programme
{sessionStorage.setItem("ws-anchor", "segment-therapeuten"); onNav("wholesale");onClose();}}>
Tierheilpraktiker & Tierärzte
Professionelle Konditionen, Wiederverkauf
{sessionStorage.setItem("ws-anchor", "segment-haendler"); onNav("wholesale");onClose();}}>
Händler & Verkaufsställe
Optimierung in Verkaufs- und Stresssituationen
Vorteile
{sessionStorage.setItem("ws-anchor", "vorteile"); onNav("wholesale");onClose();}}>
1
Individuelle Kalkulation
Wir rechnen pro Bestand, nicht pro Pferd.
{sessionStorage.setItem("ws-anchor", "vorteile"); onNav("wholesale");onClose();}}>
2
Persönliche Betreuung
TCVM-Beratung inklusive.
{sessionStorage.setItem("ws-anchor", "preise"); onNav("wholesale");onClose();}}>
3
Mengenstaffel & Modelle
Preise auf Bestandsgröße abgestimmt.
Großverbraucher

Bestands-Anfrage

Erzähl uns von deinem Stall – Anzahl Pferde, Hauptthemen, Saisonbedarf. Wir melden uns mit einer maßgeschneiderten Empfehlung.

); } // Default: programs mega menu return (
Verdauung & Stoffwechsel
{cats.slice(0, 4).map((c) =>
{onNav("category", c.slug);onClose();}}> {c.name}
{c.name.split(",")[0].split(" / ")[0]}
{c.short}
)}
Bewegung & Struktur
{cats.slice(4, 8).map((c) =>
{onNav("category", c.slug);onClose();}}> {c.name}
{c.name.split(",")[0].split(" / ")[0]}
{c.short}
)}
Lebensphasen & Spezial
{cats.slice(8).map((c) =>
{onNav("category", c.slug);onClose();}}> {c.name}
{c.name.split(",")[0].split(" / ")[0]}
{c.short}
)}
{onNav("products");onClose();}} style={{ background: "var(--green-tint)", marginTop: 8 }}>
Alle Produkte
Sortiert nach Pflanzenlinie
Kostenlos

Nicht sicher, was dein Pferd braucht?

In 2 Minuten finden wir gemeinsam das passende Programm – oder verweisen dich an unsere individuelle TCVM-Beratung.

); }; // ============ HEADER (2-row: search · logo · utilities, then green nav strip) ============ const Header = ({ route, onNav, openQuiz, megaTrigger = "hover", layout = "klassisch" }) => { const [megaOpen, setMegaOpen] = useState(false); const [megaKey, setMegaKey] = useState(null); const headerRef = useRef(null); const [search, setSearch] = useState(""); useEffect(() => { const onKey = (e) => {if (e.key === "Escape") setMegaOpen(false);}; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, []); const open = (key) => {setMegaKey(key);setMegaOpen(true);}; const close = () => setMegaOpen(false); return (
{/* Row 1: search · logo · utilities */}
setSearch(e.target.value)} placeholder="Produkte suchen…" onKeyDown={(e) => {if (e.key === "Enter") onNav("products");}} />
{/* Row 2: green nav strip with primary nav */}
  • open("programs") : undefined}>
  • open("products") : undefined}>
  • open("wholesale") : undefined}>
{megaOpen && }
); }; // ============ FOOTER ============ const FooterIcon = ({ name }) => { const paths = { heart: , pulse: , award: <>, leaf: , spark: , shield: , check: , pin: <>, mail: <>, phone: , arrow: , card: <>, cert: <> }; return ( {paths[name] || paths.leaf} ); }; const Footer = ({ onNav }) => { const cats = window.__CN.CATEGORIES; return ( ); }; Object.assign(window, { Header, Footer, Logo, Icon, MegaMenu });