/* Caballo Natural – Großverbraucher / Wholesale Landing + Bestands-Anfrage-Quiz */
const { useState: useStateW, useMemo: useMemoW, useEffect: useEffectW } = React;

// ============ DATA ============
const WS_SEGMENTS = [
  {
    slug: "sport",
    de: "Sport- & Turnierälle",
    desc: "Leistung, Regeneration, Stressmagen und Muskelaufbau – Sportpferde brauchen einen klaren Rhythmus, nicht ein neues Mittel pro Saison.",
    focus: ["Magen & Verdauung", "Muskeln & Regeneration", "Nerven & Stress", "Saisonale Prävention"],
    icon: "trophy",
  },
  {
    slug: "zucht",
    de: "Zuchten & Gestüte",
    desc: "Vom Decken bis zur Aufzucht – Stuten, Fohlen und Jungpferde haben über die Jahre rhythmische Bedarfe. Wir denken in Generationen, nicht Quartalen.",
    focus: ["Stuten-Hormonachse", "Fohlen-Aufbau & Wachstum", "Stoffwechsel & Leber", "Senior-Begleitung"],
    icon: "heart",
  },
  {
    slug: "therapeuten",
    de: "Tierheilpraktiker & Tierärzte",
    desc: "Praxisbedarf und Wiederverkauf für Kolleg:innen aus der Naturheilkunde, integrativen Tiermedizin und Phytotherapie.",
    focus: ["Praxis-Sortiment", "Wiederverkaufs-Konditionen", "Fortbildungs-Material", "Individual-Rezeptur"],
    icon: "stethoscope",
  },
  {
    slug: "haendler",
    de: "Händler & Verkaufsställe",
    desc: "Pferde im Verkaufs- oder Transitstall verlangen nach besonderer Stabilität – Magen, Stress und Konstitution wollen geschützt werden.",
    focus: ["Transport-Stabilität", "Magen- und Stress-Pakete", "Schnellverfügbarkeit", "Sammellieferung"],
    icon: "truck",
  },
  {
    slug: "pensionen",
    de: "Stallbetreiber & Pensionsställe",
    desc: "Pensionsställe profitieren von einer Stalllinie als Bestandsgrundlage – täglich, ohne Wechselchaos, zu klaren Mengen.",
    focus: ["Stalllinie als Tagesbegleiter", "Gruppen-Sammelkur", "Saisonale Fellwechsel-Pakete", "Beratung pro Pensionär"],
    icon: "home",
  },
];

const WS_BENEFITS = [
  { icon: "calc", title: "Individuelle Kalkulation", desc: "Wir rechnen pro Bestand, nicht pro Pferd. Mengenstaffel ab dem ersten Set, transparente Großgebinde-Preise." },
  { icon: "user", title: "Persönliche Betreuung", desc: "Melissa als feste Ansprechpartnerin – TCVM-Beratung für deinen Bestand ist im Konzept inklusive." },
  { icon: "leaf", title: "Lebensmittelqualität", desc: "Geprüfte Heilpflanzen, Cobs aus Andalusien, ohne Zusatzstoffe – auch in Großgebinden ohne Qualitätsverlust." },
  { icon: "truck", title: "Direktversand DE · AT · CH · ES", desc: "Sammelbestellungen auf Stalladresse, fester Liefertag pro Monat oder Quartal, auch palettenweise." },
  { icon: "calendar", title: "Saison-Rhythmus", desc: "Wir planen mit dir Fellwechsel, Anweiden, Turniersaison und Decksaison voraus – nicht reaktiv, sondern vorausschauend." },
  { icon: "shield", title: "Vertraulichkeit", desc: "Wir nennen keine Stallnamen ohne Freigabe. Auf Wunsch White-Label-Etikettierung für Profis." },
];

const WS_TIERS = [
  {
    name: "Bestand S",
    range: "3 – 9 Pferde",
    discount: "−10 %",
    perks: ["Mengenstaffel ab erstem Set", "Sammelbestellung 1× pro Monat", "TCVM-Beratung pro Pferd inklusive", "Lieferung an Stalladresse"],
    cta: "Anfrage starten",
    badge: null,
  },
  {
    name: "Bestand M",
    range: "10 – 24 Pferde",
    discount: "−15 %",
    perks: ["Alles aus Bestand S", "Großgebinde (3 kg / 5 kg) auf Anfrage", "Bestandsanalyse 2× pro Jahr", "Fester Liefertag pro Monat"],
    cta: "Empfehlung anfragen",
    badge: "Beliebt",
  },
  {
    name: "Bestand L",
    range: "25 + Pferde",
    discount: "−20 %",
    perks: ["Alles aus Bestand M", "Quartalsweise Saison-Pakete", "Stalllinie als Dauer-Setup", "Direkter Draht zu Melissa", "Schulung für Stallpersonal optional"],
    cta: "Konzept besprechen",
    badge: "Empfehlung",
  },
  {
    name: "White-Label / B2B",
    range: "Praxen, Händler, Marken",
    discount: "auf Anfrage",
    perks: ["Eigene Etikettierung möglich", "Wiederverkaufs-Konditionen", "Praxis-Schulungsmaterial", "Individuelle Rezepturen"],
    cta: "B2B-Anfrage",
    badge: null,
  },
];

const WS_PROCESS = [
  { num: "01", title: "Anfrage senden", desc: "Du erzählst uns von deinem Bestand: Pferde, Hauptthemen, Saisonbedarf. ~5 Minuten." },
  { num: "02", title: "Erstgespräch & Analyse", desc: "Wir besprechen Konstitutionsmuster im Bestand und definieren Achsen-Prioritäten." },
  { num: "03", title: "Maßgeschneidertes Konzept", desc: "Du bekommst ein schriftliches Bestands-Konzept mit Mengen, Phasen und Kalkulation." },
  { num: "04", title: "Erstlieferung & Einführung", desc: "Wir liefern, briefen das Stallpersonal und begleiten die ersten zwei Wochen eng." },
  { num: "05", title: "Saisonale Nachsteuerung", desc: "Quartalsweise Check-in: Was läuft, was passen wir an? Saisonpakete vorbereiten." },
];

const WS_TESTIMONIALS = [
  { quote: "Seit wir Caballo Natural als Stallbegleitung haben, sind unsere Magengeschichten praktisch verschwunden. Die saisonale Planung nimmt mir Arbeit ab.", who: "Sportstall · 18 Pferde · Andalusien" },
  { quote: "Als Tierheilpraktikerin schätze ich, dass ich auf eine konstante Qualität zugreifen kann – und Kolleginnen kann ich ohne Bauchschmerzen weiterempfehlen.", who: "Tierheilpraxis · Bayern" },
  { quote: "Für unsere Zucht haben wir endlich einen Rhythmus: Decksaison anders versorgen als Fohlenaufzucht. Vorher war alles Bauchgefühl.", who: "PRE-Zucht · 32 Pferde · Extremadura" },
];

const WS_FAQS = [
  { q: "Ab welcher Pferde-Anzahl lohnt sich das Großverbraucher-Konzept?", a: "Ab 3 Pferden mit regelmäßigem Bedarf macht eine Sammelbestellung mit Mengenstaffel Sinn. Ab 10 Pferden lohnen sich Großgebinde und ein fester Liefertag. Ab 25 Pferden empfehlen wir den Wechsel auf saisonale Quartalspakete plus Schulung des Stallpersonals." },
  { q: "Was kostet die TCVM-Beratung für meinen Bestand?", a: "Die Bestandsanalyse und das individuelle Konzept sind in unseren Großverbraucher-Konditionen inklusive – wir verstehen Beratung als Teil der Lieferung. Erst wenn wir liefern, entstehen Kosten." },
  { q: "Liefert ihr auch nach Österreich, Schweiz und Spanien?", a: "Ja. Wir liefern direkt nach Deutschland, Österreich, Schweiz und Spanien (Hauptmärkte DACH und Iberische Halbinsel). Lieferzeit 4–7 Werktage, ab Großgebinde gerne mit Palettenversand und festem Stalltag." },
  { q: "Sind die Produkte als Ergänzungsfuttermittel zugelassen?", a: "Ja. Alle Cobs, Kräuter, Dekokte und Fluide sind Ergänzungsfuttermittel bzw. Futtermittel in Lebensmittelqualität, zugelassen in der EU. Sie sind keine Tierarzneimittel und ersetzen keine tierärztliche Akutbehandlung – sie wirken unterstützend in der Heilung und Prävention." },
  { q: "Kann ich als Tierheilpraktikerin oder Tierarzt eure Produkte weiterverkaufen?", a: "Ja, wir bieten Wiederverkaufs-Konditionen für Praxen, Heilpraktiker:innen, Tierkliniken und Therapeut:innen an. Auf Anfrage auch White-Label-Etikettierung mit deiner Praxis-Marke." },
  { q: "Wie schnell könnt ihr starten?", a: "Vom ersten Anfrage-Quiz bis zur ersten Lieferung rechnen wir mit 7–14 Tagen: Anfrage → Erstgespräch → Konzeptvorschlag → Bestellung → Versand. Akute Saisonbedarfe (Fellwechsel, Anweiden) können wir bei Vorlauf priorisieren." },
];

const WsIcon = ({ name, size = 22 }) => {
  const paths = {
    trophy: <path d="M6 4h12v3a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V4zm0 0H3v2a3 3 0 0 0 3 3m12-5h3v2a3 3 0 0 1-3 3M9 17h6m-3-6v6m-2 4h4"/>,
    heart: <path d="M12 21s-7-4.5-9.5-9.5C.5 6 5 3 8 5c1.5 1 3 2 4 4 1-2 2.5-3 4-4 3-2 7.5 1 5.5 6.5C19 16.5 12 21 12 21z"/>,
    stethoscope: <><path d="M6 3v6a4 4 0 0 0 8 0V3M9 21a5 5 0 0 0 5-5v-4"/><circle cx="18" cy="14" r="2"/></>,
    truck: <><path d="M3 7h12v8H3zM15 11h4l2 3v1h-6"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></>,
    home: <path d="M3 11 12 3l9 8v10a2 2 0 0 1-2 2h-4v-7H10v7H6a2 2 0 0 1-2-2V11z"/>,
    calc: <><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M8 7h8M8 11h3m2 0h3M8 15h3m2 0h3M8 19h8"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    leaf: <path d="M11 20A7 7 0 0 1 4 13c0-6 5-10 11-10a17 17 0 0 1 5 1 17 17 0 0 1-1 5c0 6-4 11-10 11zM2 22l9-9"/>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4m8-4v4"/></>,
    shield: <path d="M12 2 4 6v6c0 5 3 9 8 10 5-1 8-5 8-10V6l-8-4z"/>,
    arrow: <path d="M5 12h14M13 5l7 7-7 7"/>,
    check: <path d="m5 12 5 5 9-11"/>,
    star: <path d="m12 2 3 7 7 .5-5.5 4.5 2 7-6.5-4-6.5 4 2-7L2 9.5 9 9z"/>,
    chev: <path d="m9 6 6 6-6 6"/>,
    quote: <path d="M7 7h4v4H7zM7 11l-2 6m12-10h4v4h-4zm0 4-2 6"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || paths.leaf}
    </svg>
  );
};

// ============ WHOLESALE LANDING ============
const WholesaleView = ({ onNav }) => {
  useEffectW(() => {
    const anchor = sessionStorage.getItem("ws-anchor");
    if (anchor) {
      sessionStorage.removeItem("ws-anchor");
      // Wait for DOM to render, then smooth-scroll to the section
      setTimeout(() => {
        const el = document.getElementById(anchor);
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
      }, 120);
    }
  }, []);

  return (
    <div data-screen-label="Großverbraucher">
      {/* HERO */}
      <section className="ws-hero">
        <div className="container">
          <div className="ws-hero-grid">
            <div className="ws-hero-left">
              <span className="eyebrow ws-hero-eyebrow">Großverbraucher · Bestände · Profis</span>
              <h1>Für <em>Ställe, Zuchten</em> und <em>Therapeuten</em> – TCVM-Naturheilkunde im Bestandsformat.</h1>
              <p className="lead">Ob Sport-, Zucht- oder Pensionsstall, ob Tierheilpraxis oder Verkaufsbetrieb – wir kombinieren persönliche TCVM-Beratung mit Stalllinien-Produkten, Großgebinden und einem festen Saison-Rhythmus. Tätig in <strong>DACH</strong> und <strong>Spanien</strong>, mit Direktversand und bilingualer Betreuung.</p>
              <div className="ws-hero-cta">
                <button className="btn btn-primary btn-lg" onClick={() => onNav("wholesale-quiz")}>Bestands-Anfrage senden <WsIcon name="arrow" size={14}/></button>
                <button className="btn btn-secondary btn-lg" onClick={() => onNav("wholesale-shop")}>Stalllinie ansehen <WsIcon name="arrow" size={14}/></button>
              </div>
              <div className="ws-hero-stats">
                <div><div className="n">100+</div><div className="l">betreute Pferde im Bestand</div></div>
                <div><div className="n">12 J.</div><div className="l">TCVM-Praxis</div></div>
                <div><div className="n">DE · AT · CH · ES</div><div className="l">Direktversand</div></div>
                <div><div className="n">DE / ES</div><div className="l">bilinguale Beratung</div></div>
              </div>
            </div>
            <div className="ws-hero-right">
              <div className="ws-hero-img">
                <img src="assets/melissa-pferd.png" alt="Melissa – TCVM-Beratung für Pferdebestände"/>
                <div className="ws-hero-badge">
                  <span className="dot"/> Persönliche Bestands-Betreuung
                </div>
              </div>
              <div className="ws-hero-quote">
                <WsIcon name="quote" size={18}/>
                <p>„Für unsere Zucht haben wir endlich einen Rhythmus: Decksaison anders versorgen als Fohlenaufzucht. Vorher war alles Bauchgefühl."</p>
                <div className="ws-hero-quote-who">PRE-Zucht · 32 Pferde · Extremadura</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SEGMENTS */}
      <section className="ws-segments" id="segmente">
        <div className="container">
          <div className="ws-section-head">
            <div>
              <span className="eyebrow">Für wen ist das?</span>
              <h2>Fünf Segmente, ein <em>gemeinsamer Rhythmus</em>.</h2>
            </div>
            <p className="ws-section-intro">Jeder Bestand hat eigene Spannungsfelder. Wir verstehen die Unterschiede – und denken Konstitution, Saison und Achsen für deinen Stall mit.</p>
          </div>
          <div className="ws-segments-grid">
            {WS_SEGMENTS.map(s => (
              <article key={s.slug} className="ws-segment-card" id={"segment-" + s.slug}>
                <div className="ws-segment-icon"><WsIcon name={s.icon} size={26}/></div>
                <h3>{s.de}</h3>
                <p>{s.desc}</p>
                <ul className="ws-segment-focus">
                  {s.focus.map((f, i) => <li key={i}>{f}</li>)}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* BENEFITS */}
      <section className="ws-benefits" id="vorteile">
        <div className="container">
          <div className="ws-section-head">
            <div>
              <span className="eyebrow">Was du im Bestand bekommst</span>
              <h2>Vorteile, die <em>auf Stallgröße skalieren</em>.</h2>
            </div>
            <p className="ws-section-intro">Großverbraucher-Konditionen heißt bei uns: nicht nur Rabatt, sondern auch fachliche Begleitung, vorausschauende Planung und Direktdraht.</p>
          </div>
          <div className="ws-benefits-grid">
            {WS_BENEFITS.map((b, i) => (
              <div key={i} className="ws-benefit-card">
                <div className="ws-benefit-icon"><WsIcon name={b.icon} size={22}/></div>
                <h3>{b.title}</h3>
                <p>{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* STALLLINIE PREVIEW */}
      <section className="ws-line" id="stalllinie">
        <div className="container">
          <div className="ws-section-head">
            <div>
              <span className="eyebrow">Unsere Stalllinie · línea de cuadra</span>
              <h2>Die <em>Cuadra-Linie</em> – Tagesbegleiter für jeden Bestand.</h2>
            </div>
            <p className="ws-section-intro">Mengenformat statt Einzeldosen: Pulver- und Fluidkonzentrate für die täglich vorausschauende Versorgung. Wir koppeln sie an die Bestandsbedürfnisse pro Achse.</p>
          </div>
          <div className="ws-line-grid">
            {[
              { name: "Cuadra Estómago Base",  desc: "Magen-Mitte stützen – fängt Stressspitzen ab. Für Sportställe und Verkaufsbetriebe zentral." },
              { name: "Cuadra Intestino Base", desc: "Dickdarm-Stabilität bei wechselnden Heuqualitäten, Saisonwechsel und Kotwasser-Tendenzen." },
              { name: "Cuadra Metabolismo Base", desc: "Stoffwechsel & Leber im Hintergrund – als Dauer-Basis bei EMS-anfälligen Beständen." },
              { name: "Cuadra Nervios Base",   desc: "Stallruhe & Nervensystem für Transport-, Turnier- und Verkaufsbetriebe." },
              { name: "Cuadra Vías Base",      desc: "Atemwege & Schleimhaut – relevant in staubigen Stallungen und im Winter." },
              { name: "Cuadra Articular Base", desc: "Gelenkbasis für Sport- und Senior-Bestände, präventiv und langfristig." },
            ].map(p => (
              <div key={p.name} className="ws-line-item">
                <div className="ws-line-name">{p.name}</div>
                <div className="ws-line-desc">{p.desc}</div>
              </div>
            ))}
          </div>
          <div className="ws-line-cta">
            <button className="btn btn-secondary" onClick={() => onNav("wholesale-shop")}>Komplette Stalllinie ansehen <WsIcon name="arrow" size={14}/></button>
          </div>
        </div>
      </section>

      {/* PRICING TIERS */}
      <section className="ws-tiers" id="preise">
        <div className="container">
          <div className="ws-section-head">
            <div>
              <span className="eyebrow">Mengenstaffel & Modelle</span>
              <h2>Preise, die <em>auf Bestand skalieren</em>.</h2>
            </div>
            <p className="ws-section-intro">Transparente Mengenstaffel ab dem ersten Set. Endgültige Preise rechnen wir individuell für deinen Bestand – jede Stallgröße ist anders.</p>
          </div>
          <div className="ws-tiers-grid">
            {WS_TIERS.map(t => (
              <article key={t.name} className={`ws-tier-card ${t.badge === "Empfehlung" ? "is-featured" : ""}`}>
                {t.badge && <div className="ws-tier-badge">{t.badge}</div>}
                <h3>{t.name}</h3>
                <div className="ws-tier-range">{t.range}</div>
                <div className="ws-tier-discount">{t.discount}</div>
                <ul className="ws-tier-perks">
                  {t.perks.map((p, i) => <li key={i}><span className="tick"><WsIcon name="check" size={11}/></span> {p}</li>)}
                </ul>
                <button className="btn btn-primary ws-tier-cta" onClick={() => onNav("wholesale-quiz")}>{t.cta}</button>
              </article>
            ))}
          </div>
          <p className="ws-tiers-note">* Endgültige Preise abhängig von Bestand, Produktmix, Saisonkonzept und Lieferrhythmus. Bestandsanalyse und Beratung in jedem Modell inklusive.</p>
        </div>
      </section>

      {/* PROCESS */}
      <section className="ws-process" id="prozess">
        <div className="container">
          <div className="ws-section-head">
            <div>
              <span className="eyebrow">So läuft die Bestands-Betreuung ab</span>
              <h2>Fünf Schritte, ein <em>klares Ergebnis</em>.</h2>
            </div>
          </div>
          <ol className="ws-process-list">
            {WS_PROCESS.map(s => (
              <li key={s.num}>
                <div className="ws-process-num">{s.num}</div>
                <div className="ws-process-body">
                  <h3>{s.title}</h3>
                  <p>{s.desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* SEO LONG-FORM CONTENT */}
      <section className="ws-seo" id="wissen">
        <div className="container">
          <div className="ws-seo-grid">
            <div>
              <span className="eyebrow">Naturheilkunde im Bestand · DACH + España</span>
              <h2>Phytotherapie und TCVM <em>für Pferdebestände</em></h2>
              <p>Pferdebestände – ob Sportstall, Zucht oder Verkaufsbetrieb – haben andere Bedürfnisse als der Einzelpferdehalter. Heuqualität wechselt, Saisonwechsel treffen viele Pferde gleichzeitig, Stress aus Transport, Turnier oder Decksaison verteilt sich auf die ganze Gruppe. Eine konstitutionelle Begleitung nach den Prinzipien der Traditionellen Chinesischen Veterinärmedizin (TCVM) lohnt sich auf Bestandsebene besonders, weil sich die Wirkung multipliziert: Wenn die Magen-Mitte stabil ist, sinkt die Kolikneigung im ganzen Stall.</p>
              <p>In <strong>Deutschland, Österreich, der Schweiz und Spanien</strong> arbeiten wir mit Pferdebeständen unterschiedlichster Prägung. Sport- und Turnierställe profitieren von vorausschauenden Magen- und Regenerations-Konzepten, Zuchten von langfristigen Stuten- und Aufzucht-Phasen, Pensionsställe von einer einheitlichen Stalllinie. Die <em>Cuadra-Linie</em> – unsere Stalllinie aus Spanien – ist genau dafür gemacht: Mengenformat, hochkonzentriert, einfach zu dosieren, ohne Zusatzstoffe, in Lebensmittelqualität.</p>
              <h3>Sammelbestellung mit Konzept</h3>
              <p>Eine Sammelbestellung im Stall ist mehr als Mengenrabatt. Sie ist die Chance, das Gespann zwischen <strong>Fütterung, Konstitution und Saison</strong> ganzheitlich zu denken – statt jedes Pferd einzeln zu flicken. Wir analysieren mit dir den Bestand nach den 5 Wandlungsphasen, priorisieren die dominanten Achsen (Magen, Stoffwechsel, Atemwege, Haut, Nerven, Hufe) und schlagen eine Kombi aus Cobs, Stalllinie und Hauptkräuter-Dekokten vor.</p>
              <h3>Tierheilpraktiker, Tierärzte und integrative Praxen</h3>
              <p>Für Kolleg:innen aus der Naturheilkunde bieten wir <strong>Wiederverkaufs-Konditionen</strong>, Praxis-Sortimente und auf Anfrage White-Label-Etikettierung. Du bekommst eine konstante Qualität für deine Klient:innen, geprüfte Heilpflanzen und – wenn gewünscht – Fortbildungsmaterial zu TCVM und Phytotherapie für Pferde.</p>
              <h3>Versand und Logistik</h3>
              <p>Direktversand nach DE, AT, CH und ES innerhalb von 4–7 Werktagen. Großgebinde palettenweise auf Stalladresse möglich. Bei festem Liefertag pro Monat oder Quartal planen wir Saisonbedarfe (Fellwechsel, Anweiden, Decksaison, Fohlenaufzucht) entsprechend voraus.</p>
            </div>
            <aside className="ws-seo-aside">
              <h3>Stichworte für deine Bestandsanfrage</h3>
              <div className="ws-keyword-tags">
                {[
                  "Pferdebestand Naturheilkunde",
                  "Sammelbestellung Pferdekräuter",
                  "Stallapotheke Phytotherapie",
                  "Mengenrabatt Pferdeergänzung",
                  "TCVM Pferdebestand",
                  "Bestandsbetreuung Pferde",
                  "Zucht Aufbaufutter",
                  "Stalllinie Cobs",
                  "White-Label Pferdekräuter",
                  "B2B Pferdeergänzung",
                  "Großhandel Pferdekräuter",
                  "Wiederverkauf Tierheilpraxis",
                ].map(k => <span key={k} className="ws-keyword-tag">{k}</span>)}
              </div>
              <div className="ws-seo-card">
                <div className="eyebrow">Du brauchst ein Konzept?</div>
                <h4>Direkte Anfrage in 5 Minuten</h4>
                <p>Erzähl uns von deinem Bestand. Wir melden uns innerhalb von 48 Stunden mit einem maßgeschneiderten Vorschlag.</p>
                <button className="btn btn-primary" onClick={() => onNav("wholesale-quiz")}>Anfrage starten <WsIcon name="arrow" size={14}/></button>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="ws-testi" id="stimmen">
        <div className="container">
          <div className="ws-section-head">
            <div>
              <span className="eyebrow">Stimmen aus dem Bestand</span>
              <h2>Was Stalleiter:innen <em>sagen</em>.</h2>
            </div>
          </div>
          <div className="ws-testi-grid">
            {WS_TESTIMONIALS.map((t, i) => (
              <figure key={i} className="ws-testi-card">
                <div className="ws-testi-stars">
                  {[...Array(5)].map((_, j) => <WsIcon key={j} name="star" size={14}/>)}
                </div>
                <blockquote>„{t.quote}"</blockquote>
                <figcaption>{t.who}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="ws-faq" id="faq">
        <div className="container">
          <div className="ws-section-head">
            <div>
              <span className="eyebrow">Häufige Fragen aus Beständen</span>
              <h2>Wholesale FAQ</h2>
            </div>
          </div>
          <div className="ws-faq-list">
            {WS_FAQS.map((f, i) => <WsFaqItem key={i} item={f} />)}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="ws-cta-band">
        <div className="container">
          <div className="ws-cta-inner">
            <div>
              <span className="eyebrow ws-cta-eyebrow">Bestands-Anfrage</span>
              <h2>Lass uns von <em>deinem Stall</em> hören.</h2>
              <p>Anzahl Pferde, Hauptthemen, Saisonbedarf, Lieferrhythmus – in 5 Minuten beschrieben. Antwort innerhalb von 48 Stunden, individuelles Konzept innerhalb einer Woche.</p>
            </div>
            <div className="ws-cta-buttons">
              <button className="btn btn-primary btn-lg" onClick={() => onNav("wholesale-quiz")}>Anfrage starten <WsIcon name="arrow" size={14}/></button>
              <button className="btn btn-secondary btn-lg" onClick={() => onNav("contact")}>Lieber direkt schreiben</button>
            </div>
          </div>
        </div>
      </section>

      {/* SEO Structured Data */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Service",
          "serviceType": "Wholesale phytotherapy & TCVM consultation for equine stables",
          "name": "Caballo Natural Bestands-Betreuung",
          "description": "TCVM-Bestandsbetreuung, Stalllinie und Großverbraucher-Konditionen für Sport-, Zucht-, Verkaufsställe sowie Tierheilpraxen in DACH und Spanien.",
          "areaServed": [
            { "@type": "Country", "name": "Germany" },
            { "@type": "Country", "name": "Austria" },
            { "@type": "Country", "name": "Switzerland" },
            { "@type": "Country", "name": "Spain" }
          ],
          "availableLanguage": ["de", "es"],
          "provider": {
            "@type": "Organization",
            "name": "Caballo Natural",
            "url": "https://caballonatural.com",
            "logo": "https://caballo-natural.es/wp-content/uploads/2026/03/Group-1.png"
          },
          "audience": {
            "@type": "BusinessAudience",
            "audienceType": "Pferdeställe, Zuchten, Gestüte, Tierheilpraktiker, Tierärzte, Händler, Verkaufsställe"
          },
          "offers": {
            "@type": "OfferCatalog",
            "name": "Bestand-Modelle",
            "itemListElement": WS_TIERS.map(t => ({
              "@type": "Offer",
              "name": t.name,
              "description": t.range + " · " + t.discount,
              "priceCurrency": "EUR"
            }))
          }
        })
      }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": WS_FAQS.map(f => ({
            "@type": "Question",
            "name": f.q,
            "acceptedAnswer": { "@type": "Answer", "text": f.a }
          }))
        })
      }} />
    </div>
  );
};

const WsFaqItem = ({ item }) => {
  const [open, setOpen] = useStateW(false);
  return (
    <div className="ws-faq-item">
      <button className="ws-faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span>{item.q}</span>
        <span className="ws-faq-toggle">{open ? "−" : "+"}</span>
      </button>
      {open && <div className="ws-faq-a">{item.a}</div>}
    </div>
  );
};

// ============ BESTANDS-ANFRAGE QUIZ ============
const WS_DEFAULT = {
  stallName: "",
  country: "",
  city: "",
  numHorses: "",
  housing: "",
  breeds: "",
  pferdetypen: new Set(),
  hauptachsen: new Set(),
  saisonbedarf: new Set(),
  lieferrhythmus: "",
  startDate: "",
  budgetRange: "",
  currentSupply: "",
  contactName: "",
  contactRole: "",
  email: "",
  phone: "",
  notes: "",
  confirmed: false,
};

const WS_STEPS = [
  { id: 1, title: "Stall-Profil",       sub: "Erzähl uns von deinem Betrieb" },
  { id: 2, title: "Bestand & Pferde",   sub: "Welche Pferdetypen begleitet ihr?" },
  { id: 3, title: "Hauptthemen",        sub: "Wo liegen die Achsen-Schwerpunkte?" },
  { id: 4, title: "Rhythmus & Bedarf",  sub: "Saison, Lieferung, Budget" },
  { id: 5, title: "Kontakt",            sub: "Wie können wir dich erreichen?" },
];

const WholesaleQuiz = ({ onNav }) => {
  const [step, setStep] = useStateW(1);
  const [state, setState] = useStateW({ ...WS_DEFAULT });
  const setF = (k, v) => setState(s => ({ ...s, [k]: v }));
  const toggleSet = (key, val) => setState(s => {
    const next = new Set(s[key]);
    next.has(val) ? next.delete(val) : next.add(val);
    return { ...s, [key]: next };
  });
  const next = () => { if (step < 5) setStep(step + 1); else setF("confirmed", true); };
  const back = () => { if (step > 1) setStep(step - 1); };
  useEffectW(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [step, state.confirmed]);

  if (state.confirmed) return <WsConfirmation state={state} onNav={onNav} />;

  const pct = Math.round((step / WS_STEPS.length) * 100);
  const def = WS_STEPS[step - 1];

  return (
    <div data-screen-label="Bestands-Anfrage" className="cq-shell">
      <div className="container">
        <div className="cq-card">
          <div className="cq-head" style={{ background: "var(--green-deep)", color: "#FBF7EC" }}>
            <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>Bestands-Anfrage · {pct}% abgeschlossen</span>
            <h2 style={{ color: "#FBF7EC" }}>{def.title}</h2>
            <p style={{ color: "rgba(244,239,228,0.85)" }}>{def.sub}</p>
            <div className="cq-step-row" style={{ color: "rgba(244,239,228,0.7)" }}>
              <span>Schritt {step} von {WS_STEPS.length}</span>
              <span className="pct">{pct}%</span>
            </div>
            <div className="cq-progress" style={{ background: "rgba(255,255,255,0.15)" }}>
              <div className="bar" style={{ width: pct + "%", background: "var(--gold-soft)" }}/>
            </div>
          </div>

          <div className="cq-body">
            {step === 1 && <WsStep1 state={state} setF={setF}/>}
            {step === 2 && <WsStep2 state={state} setF={setF} toggleSet={toggleSet}/>}
            {step === 3 && <WsStep3 state={state} setF={setF} toggleSet={toggleSet}/>}
            {step === 4 && <WsStep4 state={state} setF={setF} toggleSet={toggleSet}/>}
            {step === 5 && <WsStep5 state={state} setF={setF}/>}
          </div>

          <div className="cq-foot">
            {step > 1 ?
              <button className="btn btn-secondary btn-sm" onClick={back}>← Zurück</button>
              : <button className="btn btn-secondary btn-sm" onClick={() => onNav("wholesale")}>← Zur Übersicht</button>
            }
            <button className="btn btn-primary" onClick={next}>
              {step === WS_STEPS.length ? "Anfrage abschicken" : "Weiter"} <WsIcon name="arrow" size={14}/>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const WsStep1 = ({ state, setF }) => (
  <>
    <div className="cq-field">
      <label>Name des Stalls / Betriebs</label>
      <input value={state.stallName} onChange={e => setF("stallName", e.target.value)} placeholder="z.B. Reitstall Wiesengrund"/>
    </div>
    <div className="cq-row-2">
      <div className="cq-field"><label>Land</label>
        <select value={state.country} onChange={e => setF("country", e.target.value)}>
          <option value="">Bitte wählen</option>
          <option>Deutschland</option><option>Österreich</option><option>Schweiz</option><option>Spanien</option><option>Andere</option>
        </select>
      </div>
      <div className="cq-field"><label>Region / Ort</label>
        <input value={state.city} onChange={e => setF("city", e.target.value)} placeholder="z.B. Bayern, Andalusien …"/>
      </div>
    </div>
    <div className="cq-row-2">
      <div className="cq-field"><label>Anzahl Pferde im Bestand</label>
        <input type="number" value={state.numHorses} onChange={e => setF("numHorses", e.target.value)} placeholder="z.B. 12"/>
      </div>
      <div className="cq-field"><label>Haltungsform (primär)</label>
        <select value={state.housing} onChange={e => setF("housing", e.target.value)}>
          <option value="">Bitte wählen</option>
          <option>Offenstall / Gruppenhaltung</option>
          <option>Boxenhaltung mit Auslauf</option>
          <option>Gemischt Box & Weide</option>
          <option>Reine Weidehaltung</option>
        </select>
      </div>
    </div>
    <div className="cq-field"><label>Rassen-Spektrum (optional)</label>
      <input value={state.breeds} onChange={e => setF("breeds", e.target.value)} placeholder="z.B. PRE, Lusitano, Warmblut, Pony-Mix"/>
    </div>
  </>
);

const WsStep2 = ({ state, setF, toggleSet }) => {
  const TYPES = [
    "Sportpferde / Turnier",
    "Freizeitpferde",
    "Zuchtstuten",
    "Hengste",
    "Fohlen / Jungpferde",
    "Senioren (15 J. +)",
    "Verkaufs- / Handelspferde",
    "Pensionspferde",
    "Therapie- / Schulpferde",
  ];
  return (
    <>
      <div className="cq-field">
        <label>Welche Pferdetypen begleitet ihr? (Mehrfachauswahl)</label>
        <div className="cq-choice-grid cols-3">
          {TYPES.map(t => (
            <button key={t} type="button"
              className={`cq-choice ${state.pferdetypen.has(t) ? "selected" : ""}`}
              onClick={() => toggleSet("pferdetypen", t)}>
              {state.pferdetypen.has(t) && <span className="check">✓</span>} {t}
            </button>
          ))}
        </div>
      </div>
      <div className="cq-field">
        <label>Aktuelle Versorgung (kurz)</label>
        <textarea value={state.currentSupply} onChange={e => setF("currentSupply", e.target.value)} placeholder="Was füttert ihr aktuell? Heu, Cobs, Ergänzungen, andere Kräuter …"/>
      </div>
    </>
  );
};

const WsStep3 = ({ state, setF, toggleSet }) => {
  const ACHSEN = [
    "Verdauung & Magen",
    "Stoffwechsel / Leber / Niere",
    "Haut, Fell & Immunsystem",
    "Atemwege",
    "Hufe & Struktur",
    "Muskeln & Regeneration",
    "Gelenke & Beweglichkeit",
    "Nerven, Stress & Verhalten",
    "Parasiten & Darmmilieu",
    "Senioren / tiefer Aufbau",
    "Aufzucht / Wachstum",
    "Hormonelle Achse (Stuten / Hengste)",
  ];
  return (
    <>
      <div className="cq-field">
        <label>Welche Gesundheits-Achsen sind im Bestand dominant? (Mehrfachauswahl)</label>
        <div className="cq-choice-grid cols-3">
          {ACHSEN.map(a => (
            <button key={a} type="button"
              className={`cq-choice ${state.hauptachsen.has(a) ? "selected" : ""}`}
              onClick={() => toggleSet("hauptachsen", a)}>
              {state.hauptachsen.has(a) && <span className="check">✓</span>} {a}
            </button>
          ))}
        </div>
      </div>
    </>
  );
};

const WsStep4 = ({ state, setF, toggleSet }) => {
  const SAISON = [
    "Fellwechsel (Frühjahr / Herbst)",
    "Anweiden",
    "Turnier-Saison",
    "Decksaison",
    "Fohlenaufzucht",
    "Verkaufs-Spitzen",
    "Stallwechsel-Phasen",
    "Akute Bestandsdynamik",
  ];
  return (
    <>
      <div className="cq-field">
        <label>Wofür braucht ihr saisonale Vorbereitung? (Mehrfachauswahl)</label>
        <div className="cq-choice-grid cols-2">
          {SAISON.map(s => (
            <button key={s} type="button"
              className={`cq-choice ${state.saisonbedarf.has(s) ? "selected" : ""}`}
              onClick={() => toggleSet("saisonbedarf", s)}>
              {state.saisonbedarf.has(s) && <span className="check">✓</span>} {s}
            </button>
          ))}
        </div>
      </div>
      <div className="cq-row-2">
        <div className="cq-field"><label>Gewünschter Lieferrhythmus</label>
          <select value={state.lieferrhythmus} onChange={e => setF("lieferrhythmus", e.target.value)}>
            <option value="">Bitte wählen</option>
            <option>Monatlich (fester Tag)</option>
            <option>Quartalsweise (Saisonpakete)</option>
            <option>Einmalig zum Test</option>
            <option>Weiß ich noch nicht – beraten</option>
          </select>
        </div>
        <div className="cq-field"><label>Gewünschter Start</label>
          <input value={state.startDate} onChange={e => setF("startDate", e.target.value)} placeholder="z.B. ab nächstem Monat, vor Saisonstart …"/>
        </div>
      </div>
      <div className="cq-field"><label>Budget-Rahmen pro Monat (optional)</label>
        <select value={state.budgetRange} onChange={e => setF("budgetRange", e.target.value)}>
          <option value="">Keine Angabe</option>
          <option>unter 200 €</option>
          <option>200 – 500 €</option>
          <option>500 – 1.000 €</option>
          <option>1.000 – 2.500 €</option>
          <option>über 2.500 €</option>
          <option>Budget offen – Konzept zuerst</option>
        </select>
      </div>
    </>
  );
};

const WsStep5 = ({ state, setF }) => (
  <>
    <div className="cq-row-2">
      <div className="cq-field"><label>Dein Name *</label>
        <input value={state.contactName} onChange={e => setF("contactName", e.target.value)} placeholder="Vor- und Nachname"/>
      </div>
      <div className="cq-field"><label>Position / Rolle</label>
        <input value={state.contactRole} onChange={e => setF("contactRole", e.target.value)} placeholder="z.B. Stallleitung, Zuchtleitung, Praxis-Inhaber"/>
      </div>
    </div>
    <div className="cq-row-2">
      <div className="cq-field"><label>E-Mail *</label>
        <input type="email" value={state.email} onChange={e => setF("email", e.target.value)} placeholder="kontakt@deinstall.de"/>
      </div>
      <div className="cq-field"><label>Telefon</label>
        <input value={state.phone} onChange={e => setF("phone", e.target.value)} placeholder="optional, für Rückruf"/>
      </div>
    </div>
    <div className="cq-field"><label>Notiz / besondere Wünsche</label>
      <textarea value={state.notes} onChange={e => setF("notes", e.target.value)} placeholder="Was sollten wir vor dem Erstgespräch wissen? White-Label? Schulungswunsch? Konkrete Pferde-Cases?"/>
    </div>
    <p style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 6 }}>
      Mit dem Absenden stimmst du unserer Datenschutzerklärung zu. Wir melden uns innerhalb von 48 Stunden mit einer ersten Rückmeldung.
    </p>
  </>
);

const WsConfirmation = ({ state, onNav }) => (
  <div data-screen-label="Bestands-Anfrage bestätigt" className="cq-shell">
    <div className="container">
      <div className="cq-card" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
        <div className="cq-head" style={{ background: "var(--green-tint)", borderRadius: "var(--r-lg) var(--r-lg) 0 0" }}>
          <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--green-deep)", color: "var(--gold-soft)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 18px" }}>
            <WsIcon name="check" size={28}/>
          </div>
          <span className="eyebrow">Anfrage eingegangen</span>
          <h2>Danke, {state.contactName || "wir freuen uns"}! Wir sind dran.</h2>
          <p style={{ maxWidth: 560, margin: "12px auto 0" }}>Wir haben deine Bestands-Anfrage für <strong>{state.stallName || "deinen Stall"}</strong> erhalten und melden uns innerhalb von <strong>48 Stunden</strong> per Mail mit einer ersten Rückmeldung und Terminvorschlag fürs Erstgespräch.</p>
        </div>
        <div className="cq-body">
          <h3 style={{ fontFamily: "var(--ff-display)", fontStyle: "italic", marginBottom: 14 }}>Was als nächstes passiert</h3>
          <ol className="ws-process-list ws-process-list-compact" style={{ textAlign: "left" }}>
            <li><div className="ws-process-num">01</div><div className="ws-process-body"><h4>Erstes Feedback per Mail</h4><p>Innerhalb von 48h – mit Terminvorschlag.</p></div></li>
            <li><div className="ws-process-num">02</div><div className="ws-process-body"><h4>Erstgespräch & Bestandsanalyse</h4><p>30–45 Min Telefon oder Video, kostenlos.</p></div></li>
            <li><div className="ws-process-num">03</div><div className="ws-process-body"><h4>Maßgeschneidertes Konzept</h4><p>Schriftlich, mit Mengen, Phasen, Kalkulation.</p></div></li>
          </ol>
          <div style={{ marginTop: 32, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav("wholesale")}>Zur Großverbraucher-Seite</button>
            <button className="btn btn-secondary btn-lg" onClick={() => onNav("home")}>Zur Startseite</button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { WholesaleView, WholesaleQuiz });