/* Caballo Natural – Home + Category page */
const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH } = React;

// ============ HOME ============
const Home = ({ onNav, openQuiz }) => {
  const cats = window.__CN.CATEGORIES;
  const data = window.__CN.data;
  if (!data) return null;

  const quickCats = [
  { slug: "verdauung-magen", label: "Verdauung & Magen", icon: "leaf" },
  { slug: "stoffwechsel", label: "Stoffwechsel", icon: "spark" },
  { slug: "haut-fell-immunsystem", label: "Haut & Immunität", icon: "sun" },
  { slug: "nerven-stress", label: "Stress & Nerven", icon: "spark" }];


  return (
    <div data-screen-label="Home">
      {/* Full-bleed hero carousel with persistent quiz card */}
      <HeroCarousel onNav={onNav} openQuiz={openQuiz} />

      {/* Programme grid */}
      <section data-screen-label="Programme">
        <div className="container">
          <div className="section-head">
            <div className="titles">
              <div className="eyebrow">Ursachenbasiert · 11 Gesundheitsachsen</div>
              <h2>Finde das passende Programm – <em>nach Beschwerden deines Pferdes</em></h2>
            </div>
            <button className="btn btn-ghost" onClick={openQuiz}>Schnell-Quiz starten</button>
          </div>

          <div className="cat-grid">
            {cats.map((c, i) => {
              // sample symptoms from first 3 programs of that category
              const progs = data.byCategory[c.name] || [];
              const symptoms = [...new Set(progs.flatMap((p) => p._symptoms))].slice(0, 4);
              return (
                <article key={c.slug} className="cat-card" onClick={() => onNav("category", c.slug)}>
                  <div className="img-wrap">
                    <img src={c.img} alt={c.name} />
                  </div>
                  <div className="body">
                    <h3>{c.name.replace(/, /g, " · ").replace(/ \/ /g, " · ")}</h3>
                    <p className="cat-short">{c.short}</p>
                    <div className="symptom-tags">
                      {symptoms.map((s) => <span key={s} className="symptom-tag">{s}</span>)}
                    </div>
                    <div className="cta-row">
                      <span className="more">PROGRAMM FINDEN</span>
                      <span className="arrow"><Icon name="arrow" size={14} /></span>
                    </div>
                  </div>
                </article>);

            })}

            {/* Spezial-Karte: Mehrfachsymptome → individuelle Beratung */}
            <article className="cat-card cat-card-consult" onClick={() => onNav("consultation")}>
              <div className="img-wrap">
                <img src="assets/melissa.png" alt="Tierheilpraktikerin – kostenlose Beratung" />
              </div>
              <div className="body">
                <h3 style={{ width: "243px" }}>Mehrere Muster gleichzeitig?</h3>
                <p className="consult-pitch">Dein Pferd zeigt Symptome aus verschiedenen Achsen – Magen + Stoffwechsel, Haut + Atemwege? Dann lass dich jetzt <strong>individuell und kostenlos</strong> von mir beraten.</p>
                <div className="cta-row">
                  <span className="more">KOSTENLOSE BERATUNG</span>
                  <span className="arrow"><Icon name="arrow" size={14} /></span>
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section className="philosophy" data-screen-label="Philosophie">
        <div className="container">
          <div className="section-head">
            <div className="titles">
              <div className="eyebrow">Unsere Methodik</div>
              <h2>Drei Wege, eine Sprache – <em>die Natur</em></h2>
            </div>
            <button className="btn btn-ghost" onClick={() => onNav("philosophy")}>Methoden im Detail</button>
          </div>
          <div className="philo-grid">
            <div className="philo-card">
              <div className="num">i.</div>
              <h3>Phytotherapie</h3>
              <p>Heilpflanzen als Dekokte, Fluide und Pulver – sorgfältig ausgesucht, traditionell verarbeitet, mit klarer Wirkungsachse pro Organ und Konstitution.</p>
              <a className="btn btn-ghost" onClick={() => onNav("philosophy")}>Mehr lesen</a>
            </div>
            <div className="philo-card">
              <div className="num">ii.</div>
              <h3>TCVM</h3>
              <p>Die Traditionelle Chinesische Veterinärmedizin gibt uns die Diagnoselogik: Wir lesen Konstitution, Achsen und Muster – nicht nur das Symptom.</p>
              <a className="btn btn-ghost" onClick={() => onNav("philosophy")}>Mehr lesen</a>
            </div>
            <div className="philo-card">
              <div className="num">iii.</div>
              <h3>Mykotherapie</h3>
              <p>Vitalpilze wie Reishi und Shiitake stabilisieren das Immun- und Hormonsystem – als Tiefenarbeit in unseren Intensiv- und Aufbau-Programmen.</p>
              <a className="btn btn-ghost" onClick={() => onNav("philosophy")}>Mehr lesen</a>
            </div>
          </div>
        </div>
      </section>

      {/* About teaser */}
      <section data-screen-label="Über mich">
        <div className="container">
          <div className="about-teaser">
            <div className="img-wrap">
              <img src="assets/melissa.png" alt="Tierheilpraktikerin mit Pferd" />
            </div>
            <div>
              <div className="eyebrow">Wer hinter Caballo Natural steht</div>
              <h2 style={{ marginTop: 14, marginBottom: 20 }}>Tierheilpraktikerin mit <em>Stallluft in den Adern</em>.</h2>
              <p className="lead">
                Caballo Natural ist aus Jahrzehnten praktischer Arbeit mit PRE- und Lusitano-Pferden entstanden. Ich verbinde altes Heilwissen mit moderner Veterinärernährung – immer mit dem Ziel, die Ursache zu sehen.
              </p>
              <div className="quote">
                „Ein Symptom ist eine Frage, kein Feind. Es zeigt uns, wo wir hinhören müssen.“
              </div>
              <div className="credentials">
                <span className="pill">Tierheilpraktikerin</span>
                <span className="pill">TCVM seit 2012</span>
                <span className="pill">Phytotherapie</span>
                <span className="pill">Mykotherapie</span>
              </div>
              <div style={{ marginTop: 32, display: "flex", gap: 14 }}>
                <button className="btn btn-primary" onClick={() => onNav("about")}>Mehr über mich</button>
                <button className="btn btn-secondary" onClick={() => onNav("consultation")}>Online-Beratung</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="philosophy" data-screen-label="Stimmen">
        <div className="container">
          <div className="section-head">
            <div className="titles">
              <div className="eyebrow">Pferde, denen wir begegnet sind</div>
              <h2>Aus der <em>Stallpraxis</em></h2>
            </div>
          </div>
          <div className="tstm-grid">
            {[
            { text: "Luna ist nach jahrelanger chronischer Hufrehe schmerzfrei. Der TCVM-Ansatz hat ihren Stoffwechsel zur Ruhe gebracht.", name: "M. Aqib", meta: "Besitzerin von Luna · 6 Monate Programm", img: "https://caballo-natural.es/wp-content/uploads/2026/04/e5e8cdb3dcac1776c608897f8f2b236c331cac3f.png" },
            { text: "Wir hatten 3 Tierärzte für den Husten unseres Wallachs konsultiert. Erst das Atemwege Intensiv hat ihn wirklich frei atmen lassen.", name: "Sabine R.", meta: "Pferdebesitzerin · Husten chronisch", img: "https://caballo-natural.es/wp-content/uploads/2026/04/e5e8cdb3dcac1776c608897f8f2b236c331cac3f.png" },
            { text: "Als Sportstall arbeiten wir präventiv mit den Musculo-Programmen. Saisonstart deutlich entspannter, keine Kreuzverschläge mehr.", name: "Reiterhof Mira", meta: "Sportstall · Bestandsbetreuung", img: "https://caballo-natural.es/wp-content/uploads/2026/04/e5e8cdb3dcac1776c608897f8f2b236c331cac3f.png" }].
            map((t, i) =>
            <div key={i} className="tstm-card">
                <div className="quote-mark">"</div>
                <div className="text">{t.text}</div>
                <div className="who">
                  <img src={t.img} alt={t.name} />
                  <div className="info">
                    <div className="name">{t.name}</div>
                    <div className="meta">{t.meta}</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Consultation banner */}
      <section data-screen-label="Beratung">
        <div className="container">
          <div className="consultation-banner">
            <div className="icon-circle"><Icon name="leaf" size={32} /></div>
            <div style={{ flex: 1 }}>
              <h3>Mehr als eine Beschwerde gleichzeitig?</h3>
              <p>Manche Pferde zeigen Symptome aus mehreren Achsen – Magen + Stoffwechsel, Haut + Atemwege. Dann ist eine individuelle Analyse sinnvoller als ein Standard-Set. Unsere TCVM-Online-Beratung ist <strong>kostenlos</strong>.</p>
            </div>
            <button className="btn btn-gold btn-lg" onClick={() => onNav("consultation")}>
              Jetzt anfragen <Icon name="arrow" />
            </button>
          </div>
        </div>
      </section>

      {/* Newsletter is in the footer (visible on every page) – avoiding duplicate here */}
    </div>);

};

// ============ CATEGORY PAGE ============
const CategoryView = ({ slug, onNav, openQuiz }) => {
  const cat = window.__CN.getCategoryBySlug(slug);
  const data = window.__CN.data;
  if (!cat || !data) return <div className="container" style={{ padding: 80 }}>Kategorie nicht gefunden.</div>;

  const programs = data.byCategory[cat.name] || [];
  const [activeLevel, setActiveLevel] = useStateH("Basis");
  const program = programs.find((p) => p["Nebenebene"] === activeLevel);
  const allSymptoms = useMemoH(() =>
  [...new Set(programs.flatMap((p) => p._symptoms))],
  [cat.name]
  );

  return (
    <div data-screen-label={`Kategorie ${cat.name}`}>
      <section className="cat-hero">
        <div className="text-side">
          <div className="breadcrumb">
            <a href="#" onClick={(e) => {e.preventDefault();onNav("home");}}>Home</a> · <a href="#" onClick={(e) => {e.preventDefault();openQuiz();}}>Programme</a> · {cat.name}
          </div>
          <span className="eyebrow">{cat.tag}</span>
          <h1>{cat.name}</h1>
          <p className="lead" style={{ marginBottom: 32 }}>{cat.short}. Unsere Programme dieser Achse arbeiten in 3-Monats-Phasen mit Cobs als Basisfutter und einer abgestimmten Hauptkräuter-Achse.</p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={() => openQuiz(cat.slug)}>
              Programm-Quiz für diese Achse <Icon name="arrow" />
            </button>
            <button className="btn btn-secondary btn-lg" onClick={() => onNav("consultation")}>Beratung anfragen</button>
          </div>
        </div>
        <div className="img-side">
          <img src={cat.img} alt={cat.name} />
        </div>
      </section>

      {/* Symptom tags overview */}
      <section className="symptoms-block">
        <div className="container">
          <div className="symptoms-grid">
            <div className="label-col">
              <div className="eyebrow">Typische Bilder</div>
              <h2>Worunter leidet dein Pferd?</h2>
              <p>Tippe auf ein Symptom, um direkt zum passenden Programm zu kommen. Bei mehreren Symptomen aus verschiedenen Bereichen empfehlen wir unsere kostenlose Online-Beratung.</p>
              <button className="btn btn-gold" style={{ marginTop: 20 }} onClick={() => openQuiz(cat.slug)}>Quiz starten</button>
            </div>
            <div className="symptoms-list">
              {allSymptoms.map((s) =>
              <button key={s} className="symptom-chip" onClick={() => openQuiz(cat.slug, s)}>
                  {s}
                </button>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Krankheits-Erklärungen für SEO (aus dem Symptom-Guide gefiltert) */}
      {(() => {
        const diseases = (window.SYMPTOMS || []).filter((s) => s.cat === cat.slug);
        if (!diseases.length) return null;
        return (
          <section className="cat-knowledge" data-screen-label="Wissen zur Achse">
            <div className="container">
              <div className="section-head">
                <div className="titles">
                  <div className="eyebrow">Erklärungs-Guide · {cat.tag}</div>
                  <h2>Krankheiten & Symptome <em>verständlich erklärt</em></h2>
                  <p className="lead" style={{ marginTop: 14 }}>Die häufigsten Bilder dieser Gesundheits-Achse – mit Ursachen, TCVM-Einordnung und konkreten Programm-Empfehlungen.</p>
                </div>
                <button className="btn btn-ghost" onClick={() => onNav("symptoms-guide")}>Zum kompletten Guide</button>
              </div>

              <div className="cat-knowledge-grid">
                {diseases.map((d) =>
                <a
                  key={d.slug}
                  href={`#/symptoms-guide`}
                  onClick={(e) => {e.preventDefault();onNav("symptoms-guide");setTimeout(() => {const el = document.getElementById(d.slug);if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });}, 150);}}
                  className="ck-card">
                    <div className="ck-head">
                      <h3>{d.name}</h3>
                      {d.aka && <div className="ck-aka">auch: {d.aka}</div>}
                    </div>
                    <p className="ck-short">{d.short}</p>
                    <div className="ck-foot">
                      <span className="ck-tag">{d.symptoms.length} typische Symptome</span>
                      <span className="ck-link">Mehr lesen →</span>
                    </div>
                  </a>
                )}
              </div>
            </div>
          </section>);

      })()}

      {/* All 5 program variants */}
      <section>
        <div className="container">
          <div className="section-head">
            <div className="titles">
              <div className="eyebrow">5 Programmstufen · {cat.tag}</div>
              <h2>Welche Stufe passt?</h2>
            </div>
          </div>

          <div className="level-bar">
            {window.__CN.LEVELS.map((l) =>
            <button
              key={l.id}
              className={`level-pill ${activeLevel === l.id ? "active" : ""}`}
              onClick={() => setActiveLevel(l.id)}>
              
                {l.id}
              </button>
            )}
          </div>

          {program && <ProgramCard program={program} onQuiz={() => openQuiz(cat.slug)} />}

          {/* Other levels mini cards */}
          <div style={{ marginTop: 48 }}>
            <h3 style={{ fontFamily: "var(--ff-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green)", marginBottom: 18 }}>Weitere Stufen vergleichen</h3>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
              {window.__CN.LEVELS.map((l) => {
                const p = programs.find((x) => x["Nebenebene"] === l.id);
                return (
                  <button
                    key={l.id}
                    onClick={() => setActiveLevel(l.id)}
                    className="level-card"
                    style={{ borderColor: activeLevel === l.id ? "var(--green-deep)" : undefined, background: activeLevel === l.id ? "var(--green-tint)" : "#fff" }}>
                    
                    <div className="lc-name">{l.id}</div>
                    <div className="lc-desc">{p ? p["Beschwerden / Krankheiten"].split(",").slice(0, 2).join(", ") : ""}</div>
                  </button>);

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

};

// ProgramCard – inline expanded view for a single program (used in CategoryView)
const ProgramCard = ({ program, onQuiz }) => {
  const data = window.__CN.data;
  const prices = data.prices;
  const setPrice = prices.sets[program.ID]?.price;

  return (
    <div className="card" style={{ overflow: "hidden" }}>
      <div className="result-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 28, flexWrap: "wrap" }}>
        <div>
          <div className="eyebrow">{program["Nebenebene"]} · {program["Laufzeit-Badge"]}</div>
          <h2 style={{ marginTop: 8 }}>{program["Setname Webseite"]}</h2>
          <div className="meta">
            <span>Hauptphase: {program["Hauptphase Kräuter"]}</span>
            <span className="dot" />
            <span>Cobs: {program["Cobs-Dauer"]}</span>
          </div>
        </div>
        <div style={{ textAlign: "right", color: "#FBF8F1" }}>
          <div style={{ fontFamily: "var(--ff-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-soft)", marginBottom: 6 }}>Set-Preis</div>
          <div style={{ fontFamily: "var(--ff-display)", fontSize: 40 }}>
            {window.__CN.formatPrice(setPrice) || <span style={{ fontSize: 16, color: "var(--gold-soft)", fontFamily: "var(--ff-mono)" }}>Auf Anfrage</span>}
          </div>
          <button className="btn btn-gold btn-sm" style={{ marginTop: 12 }} onClick={onQuiz}>Set zusammenstellen</button>
        </div>
      </div>
      <div className="result-body">
        <div className="result-section">
          <h3>Set-Inhalte</h3>
          <ProductRows program={program} editable={false} />
        </div>

        <div className="result-section">
          <h3>3-Monats-Phasen</h3>
          <div className="phase-grid">
            <div className="phase-cell"><div className="month">Monat 1</div><p>{program["Phase Monat 1"]}</p></div>
            <div className="phase-cell"><div className="month">Monat 2</div><p>{program["Phase Monat 2"]}</p></div>
            <div className="phase-cell"><div className="month">Monat 3</div><p>{program["Phase Monat 3"]}</p></div>
          </div>
        </div>

        {program["Dosierung je 100 kg"] &&
        <div className="result-section">
            <h3>Dosierung je 100 kg Pferd</h3>
            <div className="dose-block">{program["Dosierung je 100 kg"]}</div>
          </div>
        }

        {program["Wichtige Hinweise"] &&
        <div className="result-section">
            <h3>Wichtige Hinweise</h3>
            <div className="warn-block">
              <div className="warn-title">Beachten</div>
              {program["Wichtige Hinweise"].split("|").map((h, i) => <div key={i} style={{ marginTop: i > 0 ? 6 : 0 }}>· {h.trim()}</div>)}
            </div>
          </div>
        }
      </div>
    </div>);

};

// Product rows (used in result + program card)
const ProductRows = ({ program, editable = true, selected, onToggle }) => {
  const baseFeeds = (program["Cobs-Basisfutter"] || "").
  split(/\boder\b/i).map((s) => s.trim()).filter(Boolean);

  // Build retail items: filter Stalllinie, substitute Dekokte → Fluide
  const rawProducts = program._products.filter((p) => !baseFeeds.some((b) => p.includes(b)));
  const seen = new Set();
  const retailItems = [];
  for (const p of rawProducts) {
    const main = p.split(/\s*\/\s*alternativ\s*/i)[0].trim();
    const retail = window.__CN.toRetailVariant(main);
    if (!retail) continue;
    if (seen.has(retail)) continue;
    seen.add(retail);
    retailItems.push({
      name: retail,
      originalName: main,
      substituted: retail !== main,
      tag: window.__CN.classifyProduct(retail),
      isBase: false
    });
  }

  const allItems = [
  ...baseFeeds.map((b) => ({ name: b, tag: "Basisfutter (immer)", isBase: true })),
  ...retailItems];


  return (
    <div className="product-list">
      {allItems.map((item) => {
        const info = window.__CN.data.prices.products[item.name];
        const price = info?.price ?? null;
        const unit = info?.unit;
        const isSelected = !editable || (selected ? selected.has(item.name) : true);
        return (
          <div key={item.name} className={`product-row ${item.isBase ? "base" : ""} ${!isSelected ? "disabled" : ""}`}>
            <button
              className="check"
              onClick={() => editable && !item.isBase && onToggle && onToggle(item.name)}
              disabled={!editable || item.isBase}
              title={item.isBase ? "Basisfutter – immer Teil des Sets" : "An-/Abwählen"}
              style={{ cursor: item.isBase ? "default" : "pointer" }}>
              
              {isSelected && <Icon name="check" size={12} />}
            </button>
            <div style={{ flex: 1 }}>
              <div className="name">{item.name}</div>
              <div className="tag">{item.tag}{unit ? " · " + unit : ""}{item.substituted ? " · Fluid-Variante" : ""}</div>
            </div>
            <div className={`price ${price == null ? "empty" : ""}`}>
              {window.__CN.formatPrice(price) || "Preis auf Anfrage"}
            </div>
          </div>);

      })}
    </div>);

};

Object.assign(window, { Home, CategoryView, ProgramCard, ProductRows });