/* Caballo Natural – Großes TCVM-Beratungs-Quiz (7 Schritte + Bestätigung) */
const { useState: useStateCQ, useMemo: useMemoCQ, useEffect: useEffectCQ } = React;

// Icon set for inline use
const CqIcon = ({ name, size = 16 }) => {
  const paths = {
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    home: <><path d="M3 11 12 3l9 8v10a2 2 0 0 1-2 2h-4v-7H10v7H6a2 2 0 0 1-2-2V11z"/></>,
    pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    pulse: <path d="M3 12h4l3-7 4 14 3-7h4"/>,
    bell: <><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    apple: <path d="M12 6c0-2 2-4 5-4-1 2-2 4-5 4zm-7 4a4 4 0 0 1 7 0 4 4 0 0 1 7 0c0 6-4 12-7 12s-7-6-7-12z"/>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32 1.41-1.41"/></>,
    activity: <path d="M3 12h4l3-7 4 14 3-7h4"/>,
    bolt: <path d="m13 2-9 13h7l-1 9 9-13h-7l1-9z"/>,
    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"/>,
    info: <><circle cx="12" cy="12" r="10"/><path d="M12 8v.01M11 12h1v4h1"/></>,
    box: <><path d="m21 8-9-5-9 5 9 5 9-5z"/><path d="m3 8 9 5 9-5M3 16l9 5 9-5"/></>,
    drop: <path d="M12 2s6 7 6 12a6 6 0 0 1-12 0c0-5 6-12 6-12z"/>,
    wind: <path d="M9.6 4.6A2 2 0 1 1 11 8H2m11 13a2 2 0 1 0 1.4-3.4H2"/>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 6 10 7 10-7"/></>,
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/>,
    card: <><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></>,
    shield: <path d="M12 2 4 6v6c0 5 3 9 8 10 5-1 8-5 8-10V6l-8-4z"/>,
    check: <path d="m5 12 5 5 9-11"/>,
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><path d="M14 2v6h6"/></>,
    download: <path d="M12 3v12m-4-4 4 4 4-4M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/>,
    arrow: <path d="M5 12h14M13 5l7 7-7 7"/>,
    arrowL: <path d="M19 12H5M11 19l-7-7 7-7"/>,
    chev: <path d="m6 9 6 6 6-6"/>,
    edit: <><path d="M12 20h9"/><path d="M16.5 3.5a2 2 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></>,
  };
  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>
  );
};

const STEP_DEFS = [
  { id: 1, title: "Pferde-Profil", subtitle: "Erzähl uns die Basis-Daten deines Pferdes" },
  { id: 2, title: "Gesundheits-Übersicht", subtitle: "Symptome, Vorgeschichte und aktuelle Versorgung" },
  { id: 3, title: "Ernährung & Umgebung", subtitle: "Aktuelle Fütterung und Haltungs-Faktoren" },
  { id: 4, title: "Ganzheitliche Sicht", subtitle: "TCVM-basierte Verhaltens- & Energieprüfung" },
  { id: 5, title: "Plan auswählen", subtitle: "Bestätige deinen Beratungsweg vor der Bezahlung" },
  { id: 6, title: "Kontakt", subtitle: "Wie können wir dich erreichen?" },
  { id: 7, title: "Rechnung", subtitle: "Deine Bestellübersicht" },
];

const DEFAULT_STATE = {
  // Step 1
  horseName: "",
  horsePhotos: [],
  age: "",
  breed: "",
  gender: "",
  primaryUse: "",
  housing: "",
  // Step 2
  symptoms: "",
  symptomTags: new Set(),
  pastDiagnoses: "",
  historyTags: new Set(),
  meds: new Set(),
  medsOther: "",
  digestive: "",
  digestiveTags: new Set(),
  skin: "",
  skinTags: new Set(),
  muscles: "",
  musclesTags: new Set(),
  nervous: "",
  nervousTags: new Set(),
  seasonal: "",
  seasonalTags: new Set(),
  // Step 3
  feeding: "",
  roughage: "",
  pasture: "",
  waterSource: "Brunnenwasser",
  drinking: "",
  supplements: new Set(),
  // Step 4
  behavior: "",
  sensitivities: "",
  energyLevel: "Mittel",
  temperament: "Ruhig",
  seasonalReactions: "",
  // Step 5/6
  plan: "feed",
  // Step 6
  firstName: "", lastName: "", email: "", phone: "",
  street: "", postalCode: "", city: "", country: "Deutschland", vatId: "",
  // Step 7
  payMethod: "card",
  agreedTerms: false,
  // Step 8
  confirmed: false,
};

const ConsultationQuiz = ({ initialPlan, onNav, onClose }) => {
  const [step, setStep] = useStateCQ(1);
  const [openSection, setOpenSection] = useStateCQ("symptoms"); // for Step 2
  const [state, setState] = useStateCQ({ ...DEFAULT_STATE, plan: initialPlan || "feed" });

  const setF = (key, val) => setState(s => ({ ...s, [key]: val }));
  const toggleSet = (key, val) => setState(s => {
    const n = new Set(s[key]); if (n.has(val)) n.delete(val); else n.add(val);
    return { ...s, [key]: n };
  });

  const plan = (window.CONSULTATION_PLANS || []).find(p => p.id === state.plan) || (window.CONSULTATION_PLANS || [])[0];
  const planPrice = plan ? plan.price : 0;
  const vatRate = state.country === "Deutschland" ? 0 : 0.21; // simplified
  const vat = planPrice * vatRate;
  const total = planPrice + vat;

  const totalSteps = 7;
  const pct = Math.round((step / totalSteps) * 100);

  const next = () => {
    if (step < totalSteps) setStep(step + 1);
    else setF("confirmed", true);
  };
  const back = () => { if (step > 1) setStep(step - 1); };

  useEffectCQ(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [step, state.confirmed]);

  if (state.confirmed) return <ConfirmationStep state={state} plan={plan} total={total} onNav={onNav} />;

  return (
    <div className="cq-shell" data-screen-label="Beratungs-Quiz">
      <div className="container" style={{ maxWidth: 1080 }}>
        <button onClick={() => onNav("consultation")} className="btn btn-ghost" style={{ marginBottom: 14, padding: 0, fontSize: 13 }}>
          ← Zurück zur Beratungs-Übersicht
        </button>

        <div className={step === 7 ? "" : "cq-card"}>
          {step !== 7 && (
            <>
              <div className="cq-head">
                <h2>{STEP_DEFS[step - 1].title}</h2>
                <p>{STEP_DEFS[step - 1].subtitle}</p>
                <div className="cq-step-row">
                  <span>Schritt {step} von {totalSteps}</span>
                  <span className="pct">{pct}% abgeschlossen</span>
                </div>
                <div className="cq-progress"><div className="bar" style={{ width: pct + "%" }}/></div>
              </div>

              <div className="cq-body">
                {step === 1 && <Step1 state={state} setF={setF}/>}
                {step === 2 && <Step2 state={state} setF={setF} toggleSet={toggleSet} openSection={openSection} setOpenSection={setOpenSection}/>}
                {step === 3 && <Step3 state={state} setF={setF} toggleSet={toggleSet}/>}
                {step === 4 && <Step4 state={state} setF={setF}/>}
                {step === 5 && <Step5 state={state} setF={setF}/>}
                {step === 6 && <Step6 state={state} setF={setF}/>}
              </div>

              <div className="cq-foot">
                {step > 1
                  ? <button className="btn btn-secondary btn-sm" onClick={back}><CqIcon name="arrowL" size={14}/> Zurück</button>
                  : <span/>
                }
                <button className="btn btn-primary" onClick={next}>Weiter <CqIcon name="arrow" size={14}/></button>
              </div>
            </>
          )}

          {step === 7 && (
            <Step7 state={state} setF={setF} plan={plan} planPrice={planPrice} vat={vat} vatRate={vatRate} total={total} back={back} confirm={() => setF("confirmed", true)} />
          )}
        </div>
      </div>
    </div>
  );
};

// ============ Step 1: Horse Profile ============
const Step1 = ({ state, setF }) => (
  <>
    <div className="cq-field">
      <label><span className="ic"><CqIcon name="user" size={12}/></span>Name des Pferdes</label>
      <input value={state.horseName} onChange={e => setF("horseName", e.target.value)} placeholder="z.B. Princess" />
    </div>
    <div className="cq-row-2">
      <div className="cq-field">
        <label>Alter (Jahre)</label>
        <input type="number" value={state.age} onChange={e => setF("age", e.target.value)} placeholder="z.B. 3"/>
      </div>
      <div className="cq-field">
        <label>Rasse</label>
        <input value={state.breed} onChange={e => setF("breed", e.target.value)} placeholder="z.B. PRE, Warmblut, Haflinger"/>
      </div>
    </div>
    <div className="cq-row-2">
      <div className="cq-field">
        <label>Geschlecht</label>
        <select value={state.gender} onChange={e => setF("gender", e.target.value)}>
          <option value="">Bitte wählen</option>
          <option>Stute</option><option>Wallach</option><option>Hengst</option>
        </select>
      </div>
      <div className="cq-field">
        <label>Hauptnutzung</label>
        <select value={state.primaryUse} onChange={e => setF("primaryUse", e.target.value)}>
          <option value="">Bitte wählen</option>
          <option>Freizeit</option><option>Sport / Turnier</option><option>Zucht</option><option>Senior / Rente</option><option>Jungpferd / Aufzucht</option>
        </select>
      </div>
    </div>
    <div className="cq-field">
      <label>Haltungs-Form</label>
      <div className="cq-radio-grid">
        {["Nur Weide / Offenstall", "Nur Boxenhaltung", "Weide + Box gemischt"].map(o => (
          <button key={o} className={`cq-radio ${state.housing === o ? "selected" : ""}`} onClick={() => setF("housing", o)}>
            <span className="dot"/>{o}
          </button>
        ))}
      </div>
    </div>

    <HorsePhotoUpload photos={state.horsePhotos || []} setPhotos={(arr) => setF("horsePhotos", arr)} />
  </>
);

// ============ Horse photo upload (head + side profile, up to 10) ============
const MAX_HORSE_PHOTOS = 10;
const HorsePhotoUpload = ({ photos, setPhotos }) => {
  const inputRef = React.useRef(null);
  const [dragging, setDragging] = useStateCQ(false);

  const handleFiles = (files) => {
    const remaining = MAX_HORSE_PHOTOS - photos.length;
    const list = Array.from(files).filter(f => f.type.startsWith("image/")).slice(0, remaining);
    const readers = list.map(file => new Promise(resolve => {
      const r = new FileReader();
      r.onload = e => resolve({ name: file.name, size: file.size, dataUrl: e.target.result });
      r.readAsDataURL(file);
    }));
    Promise.all(readers).then(results => setPhotos([...photos, ...results]));
  };
  const onPick = (e) => { if (e.target.files) handleFiles(e.target.files); e.target.value = ""; };
  const removeAt = (i) => setPhotos(photos.filter((_, idx) => idx !== i));
  const onDrop = (e) => { e.preventDefault(); setDragging(false); if (e.dataTransfer.files) handleFiles(e.dataTransfer.files); };
  const setKind = (i, kind) => setPhotos(photos.map((p, idx) => idx === i ? { ...p, kind } : p));

  return (
    <div className="cq-field">
      <label>
        <span className="ic"><CqIcon name="info" size={12}/></span>
        Fotos vom Pferd (Kopf & Seitenprofil)
        <span className="hp-count">{photos.length} / {MAX_HORSE_PHOTOS}</span>
      </label>
      <p className="hp-hint">Lade bis zu 10 Bilder hoch – ideal: ein Bild vom Kopf (Augen, Maul, Zunge wenn möglich) und mehrere vom Seitenprofil (links & rechts). Sie helfen mir bei der Konstitutions- und Musteranalyse.</p>

      {photos.length < MAX_HORSE_PHOTOS && (
        <div
          className={`hp-drop ${dragging ? "is-dragging" : ""}`}
          onClick={() => inputRef.current && inputRef.current.click()}
          onDragOver={e => { e.preventDefault(); setDragging(true); }}
          onDragLeave={() => setDragging(false)}
          onDrop={onDrop}
          role="button"
          tabIndex={0}
        >
          <div className="hp-drop-icon"><CqIcon name="info" size={20}/></div>
          <div className="hp-drop-title">Bilder hierher ziehen oder klicken</div>
          <div className="hp-drop-sub">JPG, PNG, HEIC · max. 10 Bilder · pro Bild bis ca. 10 MB</div>
          <input ref={inputRef} type="file" accept="image/*" multiple onChange={onPick} style={{ display: "none" }} />
        </div>
      )}

      {photos.length > 0 && (
        <div className="hp-grid">
          {photos.map((p, i) => (
            <div className="hp-item" key={i}>
              <div className="hp-thumb" style={{ backgroundImage: `url(${p.dataUrl})` }}>
                <button type="button" className="hp-remove" onClick={() => removeAt(i)} aria-label="Entfernen">×</button>
              </div>
              <div className="hp-kinds">
                {["Kopf", "Profil L", "Profil R", "Sonstig"].map(k => (
                  <button
                    key={k}
                    type="button"
                    className={`hp-kind ${p.kind === k ? "selected" : ""}`}
                    onClick={() => setKind(i, k)}
                  >{k}</button>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ============ Step 2: Health Overview ============
const Step2 = ({ state, setF, toggleSet, openSection, setOpenSection }) => {
  const sections = [
    { id: "symptoms",  title: "Aktuelle Symptome & Beobachtungen", icon: "info",     placeholder: "Optional: Eigene Beobachtungen ergänzen…",                       field: "symptoms",     tagsField: "symptomTags",
      options: ["Energieverlust / Müdigkeit", "Gewichtsverlust", "Gewichtszunahme", "Stumpfes Fell", "Leistungsabfall", "Übermäßiges Schwitzen", "Vermehrter Durst", "Apathie / Rückzug", "Schlecht-Fresser", "Verhaltensänderung"] },
    { id: "history",   title: "Vorgeschichte & Diagnosen",          icon: "pulse",    placeholder: "Weitere Vorgeschichte, OPs, Verletzungen…",                       field: "pastDiagnoses", tagsField: "historyTags",
      options: ["Hufrehe", "EMS", "Cushing / PPID", "Magengeschwüre", "Kolik (wiederholt)", "PSSM / Kreuzverschlag", "Sommerekzem", "COB / Asthma", "Headshaking", "Arthrose", "Allergien", "OP-Vorgeschichte"] },
    { id: "meds",      title: "Aktuelle Medikamente & Ergänzungen", icon: "box",      special: "meds" },
    { id: "digestive", title: "Verdauungssystem",                   icon: "apple",    placeholder: "Optional: Details zur Verdauung…",                                field: "digestive",     tagsField: "digestiveTags",
      options: ["Kotwasser", "Durchfall", "Verstopfung", "Wenig Mist", "Blähungen", "Appetitlos", "Maulgeruch", "Kolikneigung", "Ulkus-Verdacht", "Wählerisches Fressen"] },
    { id: "skin",      title: "Haut & Fell",                        icon: "sun",      placeholder: "Optional: Details zu Haut & Fell…",                               field: "skin",          tagsField: "skinTags",
      options: ["Juckreiz", "Mauke / Raspe", "Sommerekzem", "Mähnen-/Schweifscheuern", "Pilz / Flechten", "Fellwechsel-Probleme", "Sarkoide / Warzen", "Trockene Haut / Schuppen", "Allergische Reaktionen"] },
    { id: "muscles",   title: "Muskeln & Bewegung",                 icon: "activity", placeholder: "Optional: Details zu Muskulatur & Bewegung…",                     field: "muscles",       tagsField: "musclesTags",
      options: ["Steif beim Antraben", "Rückenverspannungen", "Lahmheit chronisch", "Lahmheit gelegentlich", "Sehnenproblem", "Muskelabbau / Atrophie", "Schwache Oberlinie", "Hinterhand-Schwäche", "Kissing Spines", "Häufiges Stolpern"] },
    { id: "nervous",   title: "Nervensystem & Verhalten",           icon: "bolt",     placeholder: "Optional: Details zu Nerven & Verhalten…",                         field: "nervous",       tagsField: "nervousTags",
      options: ["Schreckhaft", "Nervös beim Verladen", "Stallunruhe / Weben", "Headshaking", "Konzentrationsprobleme", "Aggressivität", "Geräuschempfindlich", "Trennungsangst", "Hektisches Fressen"] },
    { id: "seasonal",  title: "Saisonale Muster",                   icon: "leaf",     placeholder: "Optional: Weitere saisonale Beobachtungen…",                       field: "seasonal",      tagsField: "seasonalTags",
      options: ["Hufrehe im Frühjahr", "Sommerekzem Mai–Sept.", "Atemwege im Winter (Boxenluft)", "Pollen im Sommer", "Fellwechsel-Schwäche", "Hitzeempfindlich", "Kälteempfindlich", "Stoffwechselschub Frühjahr", "Wetterwechsel-empfindlich"] },
  ];
  const MED_OPTIONS = ["Prascend", "Metformin", "Bute", "Danilon", "Antibiotika", "Cortison", "Magenmedikation", "Keine"];

  return (
    <>
      {sections.map(s => {
        const isOpen = openSection === s.id;
        const selectedCount = s.tagsField ? (state[s.tagsField]?.size || 0) : (s.special === "meds" ? state.meds.size : 0);
        return (
          <div key={s.id} className={`cq-section ${isOpen ? "active" : ""}`}>
            <button className="cq-section-head" onClick={() => setOpenSection(isOpen ? null : s.id)}>
              <span className="ic"><CqIcon name={s.icon}/></span>
              <span>{s.title}</span>
              {selectedCount > 0 && <span className="cq-section-count">{selectedCount}</span>}
              <span className="chev"><CqIcon name="chev" size={12}/></span>
            </button>
            {isOpen && (
              <div className="cq-section-body">
                {s.special === "meds" ? (
                  <>
                    <div className="cq-choice-grid" style={{ marginBottom: 14 }}>
                      {MED_OPTIONS.map(m => (
                        <button key={m} className={`cq-choice ${state.meds.has(m) ? "selected" : ""}`} onClick={() => toggleSet("meds", m)}>{m}</button>
                      ))}
                    </div>
                    <textarea value={state.medsOther} onChange={e => setF("medsOther", e.target.value)} placeholder="Weitere Ergänzungen, Kräuter oder Behandlungen auflisten…"/>
                  </>
                ) : (
                  <>
                    <div className="cq-tag-grid">
                      {s.options.map(o => (
                        <button
                          key={o}
                          className={`cq-tag-chip ${state[s.tagsField]?.has(o) ? "selected" : ""}`}
                          onClick={() => toggleSet(s.tagsField, o)}
                        >
                          {state[s.tagsField]?.has(o) && <span className="check"><CqIcon name="check" size={11}/></span>}
                          {o}
                        </button>
                      ))}
                    </div>
                    <textarea value={state[s.field]} onChange={e => setF(s.field, e.target.value)} placeholder={s.placeholder} style={{ minHeight: 72, marginTop: 14 }}/>
                  </>
                )}
              </div>
            )}
          </div>
        );
      })}
    </>
  );
};

// ============ Step 3: Nutrition & Environment ============
const Step3 = ({ state, setF, toggleSet }) => {
  const SUP_OPTIONS = ["Mineralfutter", "Vitamine", "Kräuter-Ergänzungen", "Probiotika", "Gelenkpräparate", "Keine"];
  return (
    <>
      <div className="cq-field">
        <label><span className="ic"><CqIcon name="apple" size={12}/></span>Aktuelle Tagesration (Mengen und Marken)</label>
        <textarea value={state.feeding} onChange={e => setF("feeding", e.target.value)} placeholder="z.B. 3kg Heu morgens, 2kg abends, 500g Hafer, Kraftfutter Marke X…"/>
      </div>
      <div className="cq-field">
        <label><span className="ic"><CqIcon name="leaf" size={12}/></span>Raufutter-Qualität & Art</label>
        <textarea value={state.roughage} onChange={e => setF("roughage", e.target.value)} placeholder="Heutyp (Wiese, Timothy, Luzerne), Qualität, Heulage, Silage…" style={{ minHeight: 76 }}/>
      </div>
      <div className="cq-field">
        <label><span className="ic"><CqIcon name="home" size={12}/></span>Weide-Zugang & Qualität</label>
        <textarea value={state.pasture} onChange={e => setF("pasture", e.target.value)} placeholder="Stunden pro Tag, Grasart, saisonale Veränderungen, Maulkorb-Nutzung…" style={{ minHeight: 76 }}/>
      </div>
      <div className="cq-row-2">
        <div className="cq-field">
          <label><span className="ic"><CqIcon name="drop" size={12}/></span>Wasserquelle</label>
          <select value={state.waterSource} onChange={e => setF("waterSource", e.target.value)}>
            <option>Brunnenwasser</option><option>Leitungswasser</option><option>Selbsttränke</option><option>Eimer/Trog frisch befüllt</option>
          </select>
        </div>
        <div className="cq-field">
          <label><span className="ic"><CqIcon name="wind" size={12}/></span>Trinkverhalten</label>
          <input value={state.drinking} onChange={e => setF("drinking", e.target.value)} placeholder="Normal / Übermäßig / Wenig"/>
        </div>
      </div>
      <div className="cq-field">
        <label><span className="ic"><CqIcon name="box" size={12}/></span>Aktuelle Zusatzfutter & Ergänzungen</label>
        <div className="cq-choice-grid cols-3">
          {SUP_OPTIONS.map(o => (
            <button key={o} className={`cq-choice ${state.supplements.has(o) ? "selected" : ""}`} onClick={() => toggleSet("supplements", o)}>{o}</button>
          ))}
        </div>
      </div>
    </>
  );
};

// ============ Step 4: Holistic Perspective ============
const Step4 = ({ state, setF }) => (
  <>
    <div className="cq-info-banner">
      <span className="ic"><CqIcon name="info" size={14}/></span>
      <div><strong>Hinweis:</strong> Dieser Abschnitt hilft uns, die energetischen Muster deines Pferdes nach den Prinzipien der Traditionellen Chinesischen Veterinärmedizin (TCVM) zu verstehen. Es gibt keine „falschen“ Antworten – wir sammeln Daten für eine ganzheitliche Analyse.</div>
    </div>
    <div className="cq-field">
      <label><span className="ic"><CqIcon name="user" size={12}/></span>Verhaltensmuster & Persönlichkeit</label>
      <textarea value={state.behavior} onChange={e => setF("behavior", e.target.value)} placeholder="Wie würdest du dein Pferd beschreiben? Ruhig, ängstlich, energiegeladen, faul, sozial, introvertiert…"/>
    </div>
    <div className="cq-field">
      <label><span className="ic"><CqIcon name="bell" size={12}/></span>Empfindlichkeiten & Reaktionen</label>
      <textarea value={state.sensitivities} onChange={e => setF("sensitivities", e.target.value)} placeholder="Berührungsempfindlichkeit, Geräuschreaktionen, Umweltveränderungen, andere Pferde, Wetterempfindlichkeit…"/>
    </div>
    <div className="cq-row-2">
      <div className="cq-field">
        <label><span className="ic"><CqIcon name="bolt" size={12}/></span>Energie-Level</label>
        <select value={state.energyLevel} onChange={e => setF("energyLevel", e.target.value)}>
          <option>Sehr niedrig</option><option>Niedrig</option><option>Mittel</option><option>Hoch</option><option>Sehr hoch</option>
        </select>
      </div>
      <div className="cq-field">
        <label><span className="ic"><CqIcon name="wind" size={12}/></span>Grundtemperament</label>
        <select value={state.temperament} onChange={e => setF("temperament", e.target.value)}>
          <option>Sehr ruhig</option><option>Ruhig</option><option>Ausgeglichen</option><option>Aufgeregt</option><option>Nervös / Hitzig</option>
        </select>
      </div>
    </div>
    <div className="cq-field">
      <label><span className="ic"><CqIcon name="leaf" size={12}/></span>Saisonale Reaktionen & Vorlieben</label>
      <textarea value={state.seasonalReactions} onChange={e => setF("seasonalReactions", e.target.value)} placeholder="Wirkt dein Pferd in bestimmten Jahreszeiten besser/schlechter? Wärme- oder Kältevorliebe? Frühjahrsallergien? Wintersteifheit?"/>
    </div>
  </>
);

// ============ Step 5: Review & Select Plan ============
const Step5 = ({ state, setF }) => {
  const plan = (window.CONSULTATION_PLANS || []).find(p => p.id === state.plan);
  if (!plan) return null;
  return (
    <div className="cq-review">
      <div>
        <div className="plan-card">
          <div className="img"><img src={plan.img} alt={plan.name}/></div>
          <div className="body">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
              <h3>{plan.name}</h3>
              <div className="price">{plan.price === 0 ? "Frei" : "€" + plan.price}</div>
            </div>
            <p style={{ color: "var(--ink-soft)", fontSize: 14, margin: 0 }}>{plan.desc}</p>
            <ul className="perks">
              {plan.perks.map((p, i) => (
                <li key={i}><span className="tick"><Icon name="check" size={11}/></span> {p}</li>
              ))}
            </ul>
          </div>
        </div>
        <div className="cq-summary-card">
          <div className="label">Beratung für</div>
          <div className="horse-info">
            <div className="row">
              <div className="name">{state.horseName || "Dein Pferd"}</div>
              <div style={{ color: "var(--ink-soft)", fontSize: 14, marginTop: 4 }}>
                {state.breed || "Rasse offen"}<br/>
                {state.age ? state.age + " Jahre" : "Alter offen"} · {state.gender || "Geschlecht offen"}<br/>
                {state.primaryUse || "Nutzung offen"} · {state.housing || "Haltung offen"}
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              {(window.CONSULTATION_PLANS || []).length > 1 && (
                <>
                  <button className="btn btn-ghost" onClick={() => setF("plan", state.plan)} style={{ padding: 0, fontSize: 13 }}>
                    <CqIcon name="edit" size={12}/> Anderen Plan wählen
                  </button>
                  <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 6 }}>
                    {(window.CONSULTATION_PLANS || []).map(p => (
                      <button key={p.id} onClick={() => setF("plan", p.id)} style={{ padding: "8px 12px", borderRadius: 999, border: "1px solid " + (state.plan === p.id ? "var(--green-deep)" : "var(--line)"), background: state.plan === p.id ? "var(--green-tint)" : "transparent", fontSize: 12, fontWeight: 600, color: state.plan === p.id ? "var(--green-deep)" : "var(--ink)" }}>
                        {p.name} {p.price > 0 ? " · €" + p.price : " · frei"}
                      </button>
                    ))}
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="receive-card">
        <h3>Du erhältst</h3>
        <div className="perk">
          <div className="ic"><CqIcon name="file" size={14}/></div>
          <div>
            <div className="title">Schriftliche Experten-Analyse</div>
            <div className="desc">Detaillierte TCVM-Auswertung & Ursachen-Identifikation für dein Pferd.</div>
          </div>
        </div>
        <div className="perk">
          <div className="ic"><CqIcon name="apple" size={14}/></div>
          <div>
            <div className="title">Individueller Fütterungsplan</div>
            <div className="desc">Phasen-basierter Ernährungsplan, abgestimmt auf Konstitution.</div>
          </div>
        </div>
        <div className="perk">
          <div className="ic"><CqIcon name="box" size={14}/></div>
          <div>
            <div className="title">Produkt-Empfehlungen</div>
            <div className="desc">Optionale Vorschläge – kein Kaufzwang. Bei Bedarf auch individuelles Rezept.</div>
          </div>
        </div>
        <div className="delivery">
          <CqIcon name="check" size={12}/> Ergebnisse innerhalb von 3–5 Werktagen
        </div>
      </div>
    </div>
  );
};

// ============ Step 6: Contact ============
const Step6 = ({ state, setF }) => (
  <>
    <div className="cq-section active">
      <div className="cq-section-head"><span className="ic"><CqIcon name="user" size={14}/></span>Persönliche Daten</div>
      <div className="cq-section-body" style={{ paddingTop: 0 }}>
        <div className="cq-row-2">
          <div className="cq-field"><label>Vorname *</label><input value={state.firstName} onChange={e => setF("firstName", e.target.value)} placeholder="z.B. Elena"/></div>
          <div className="cq-field"><label>Nachname *</label><input value={state.lastName} onChange={e => setF("lastName", e.target.value)} placeholder="z.B. Schmidt"/></div>
        </div>
        <div className="cq-row-2">
          <div className="cq-field"><label><CqIcon name="mail" size={12}/>&nbsp; E-Mail *</label><input type="email" value={state.email} onChange={e => setF("email", e.target.value)} placeholder="deine@email.de"/></div>
          <div className="cq-field"><label><CqIcon name="phone" size={12}/>&nbsp; Telefon *</label><input value={state.phone} onChange={e => setF("phone", e.target.value)} placeholder="+49 176 1234567"/></div>
        </div>
      </div>
    </div>

    <div className="cq-section active">
      <div className="cq-section-head"><span className="ic"><CqIcon name="home" size={14}/></span>Rechnungsadresse</div>
      <div className="cq-section-body" style={{ paddingTop: 0 }}>
        <div className="cq-field"><label><CqIcon name="pin" size={12}/>&nbsp; Straße & Hausnummer *</label><input value={state.street} onChange={e => setF("street", e.target.value)} placeholder="z.B. Hauptstraße 42"/></div>
        <div className="cq-row-2">
          <div className="cq-field"><label>PLZ *</label><input value={state.postalCode} onChange={e => setF("postalCode", e.target.value)} placeholder="z.B. 10115"/></div>
          <div className="cq-field"><label>Ort *</label><input value={state.city} onChange={e => setF("city", e.target.value)} placeholder="z.B. Berlin"/></div>
        </div>
        <div className="cq-field"><label>Land *</label><input value={state.country} onChange={e => setF("country", e.target.value)} placeholder="z.B. Deutschland"/></div>
        <div className="cq-field"><label>USt-ID (optional – für Unternehmen / EU)</label><input value={state.vatId} onChange={e => setF("vatId", e.target.value)} placeholder="z.B. DE123456789"/></div>
        <p style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: -10 }}>Außerhalb Spaniens mit gültiger USt-ID: 0 % MwSt. (Reverse Charge).</p>
      </div>
    </div>

    <div className="cq-info-banner" style={{ marginTop: 10, marginBottom: 0 }}>
      <span className="ic"><CqIcon name="box" size={14}/></span>
      <div><strong>Wozu brauchen wir eine Adresse?</strong> Wenn deine Beratung Produktversand enthält, schicken wir die individuell formulierten Rezepturen direkt an deinen Stall.</div>
    </div>
  </>
);

// ============ Step 7: Invoice & Pay ============
const Step7 = ({ state, setF, plan, planPrice, vat, vatRate, total, back, confirm }) => {
  const fmt = window.__CN.formatPrice;
  const invoiceNo = useMemoCQ(() => "INV-2026-" + Math.floor(1000 + Math.random() * 9000), []);
  return (
    <div className="cq-card" style={{ background: "transparent", border: "none" }}>
      <div className="cq-head" style={{ background: "var(--green-tint)", borderRadius: "var(--r-lg) var(--r-lg) 0 0" }}>
        <h2>Deine Rechnung</h2>
        <p>Bestätige deine Beratungs-Details vor der Bezahlung.</p>
        <div className="cq-step-row"><span>Schritt 7 von 7</span><span className="pct">88% abgeschlossen</span></div>
        <div className="cq-progress"><div className="bar" style={{ width: "88%" }}/></div>
      </div>

      <div className="cq-body">
        <div className="cq-invoice-grid">
          <div>
            <div className="cq-invoice">
              <div className="cq-invoice-head">
                <div>
                  <Logo dark={true} height={38} />
                  <div style={{ fontSize: 11, fontFamily: "var(--ff-mono)", letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.8, marginTop: 8 }}>Professionelle Beratung & Therapie-Formulierung</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="invoice-tag">Rechnungs-Vorschau</div>
                  <div style={{ marginTop: 6 }}>#{invoiceNo}</div>
                  <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>Ausgestellt: {new Date().toLocaleDateString("de-DE")}</div>
                </div>
              </div>
              <div className="cq-invoice-body">
                <div className="cq-invoice-cols">
                  <div>
                    <div className="col-label">Kunden-Information</div>
                    <div style={{ fontWeight: 700, fontSize: 16 }}>{state.firstName || "—"} {state.lastName}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 4 }}>
                      <CqIcon name="mail" size={11}/>&nbsp;{state.email || "deine@email.de"}<br/>
                      {state.street || "—"}<br/>
                      {state.postalCode} {state.city}<br/>
                      {state.country}
                    </div>
                  </div>
                  <div>
                    <div className="col-label">Pferde-Profil</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
                      <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--green-tint)", color: "var(--green-deep)", display: "flex", alignItems: "center", justifyContent: "center" }}><CqIcon name="pulse" size={16}/></span>
                      <div>
                        <div style={{ fontWeight: 700 }}>{state.horseName || "Dein Pferd"}</div>
                        <div style={{ fontSize: 11, fontFamily: "var(--ff-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-mute)" }}>{state.breed || "—"}</div>
                      </div>
                    </div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 8 }}>
                      <div style={{ padding: 10, background: "var(--bg)", borderRadius: 8 }}>
                        <div className="col-label">Alter</div>
                        <div style={{ fontWeight: 700 }}>{state.age ? state.age + " Jahre" : "—"}</div>
                      </div>
                      <div style={{ padding: 10, background: "var(--bg)", borderRadius: 8 }}>
                        <div className="col-label">Nutzung</div>
                        <div style={{ fontWeight: 700 }}>{state.primaryUse || "—"}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", padding: "12px 0", borderBottom: "1px solid var(--line-soft)", fontSize: 11, fontFamily: "var(--ff-mono)", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 8 }}>
                  <span>Leistungsbeschreibung</span>
                  <span style={{ textAlign: "right" }}>Betrag</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", padding: "10px 0", gap: 24 }}>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>{plan.name}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.5 }}>{plan.desc}</div>
                  </div>
                  <div style={{ fontFamily: "var(--ff-display)", fontSize: 22, color: "var(--green-deep)" }}>{plan.price === 0 ? "Frei" : fmt(plan.price)}</div>
                </div>

                <div style={{ marginTop: 16 }}>
                  <div className="line"><span>Zwischensumme</span><span>{plan.price === 0 ? "—" : fmt(planPrice)}</span></div>
                  {vatRate > 0 && <div className="line"><span>MwSt. ({Math.round(vatRate * 100)} %)</span><span>{fmt(vat)}</span></div>}
                  <div className="line total"><span>Gesamtbetrag</span><span className="right">{plan.price === 0 ? "0,00 €" : fmt(total)}</span></div>
                </div>

                <div className="security-pill">
                  <span style={{ width: 24, height: 24, borderRadius: "50%", background: "rgba(42,106,96,0.18)", display: "flex", alignItems: "center", justifyContent: "center" }}><CqIcon name="shield" size={12}/></span>
                  <div>
                    <strong>Medical-Grade-Security</strong><br/>
                    <span style={{ fontSize: 11, opacity: 0.85 }}>SSL-verschlüsselte Kommunikation</span>
                  </div>
                </div>

                <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--line-soft)", display: "flex", gap: 20, justifyContent: "center", fontSize: 13 }}>
                  <button className="btn btn-ghost" style={{ padding: 0 }}><CqIcon name="file" size={12}/>&nbsp; Rechnung drucken</button>
                  <button className="btn btn-ghost" style={{ padding: 0 }}><CqIcon name="download" size={12}/>&nbsp; PDF herunterladen</button>
                </div>
              </div>
            </div>

            {/* Payment */}
            {plan.price > 0 && (
              <div className="cq-pay-card">
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
                  <span style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--green-tint)", color: "var(--green-deep)", display: "flex", alignItems: "center", justifyContent: "center" }}><CqIcon name="card" size={18}/></span>
                  <div>
                    <div style={{ fontFamily: "var(--ff-display)", fontSize: 22 }}>Sichere Zahlungsmethode</div>
                    <div style={{ fontSize: 11, fontFamily: "var(--ff-mono)", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-mute)" }}>Verschlüsselter Checkout</div>
                  </div>
                </div>
                <div className="cq-pay-method">
                  <button className={`cq-pay-method-btn ${state.payMethod === "card" ? "selected" : ""}`} onClick={() => setF("payMethod", "card")}>
                    <div className="ic"><CqIcon name="card" size={18}/></div>
                    <div className="info">
                      <div className="title">Kredit- / Debitkarte</div>
                      <div className="sub">⚡ Sofortverarbeitung</div>
                    </div>
                  </button>
                  <button className={`cq-pay-method-btn ${state.payMethod === "paypal" ? "selected" : ""}`} onClick={() => setF("payMethod", "paypal")}>
                    <div className="ic">PP</div>
                    <div className="info">
                      <div className="title">PayPal Checkout</div>
                      <div className="sub">Externes Fenster</div>
                    </div>
                  </button>
                </div>

                {state.payMethod === "card" && (
                  <>
                    <div style={{ fontFamily: "var(--ff-display)", fontSize: 22, marginBottom: 14 }}>Karten-Details</div>
                    <div className="cq-field"><label>Kartennummer</label>
                      <div style={{ position: "relative" }}>
                        <input placeholder="1234 5678 9012 3456"/>
                        <div style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", display: "flex", gap: 6 }}>
                          <span style={{ width: 28, height: 18, background: "#1A1F71", borderRadius: 3 }}/>
                          <span style={{ width: 28, height: 18, background: "#EB001B", borderRadius: 3 }}/>
                        </div>
                      </div>
                    </div>
                    <div className="cq-field"><label>Karteninhaber</label><input placeholder="JOHN DOE"/></div>
                    <div className="cq-row-2">
                      <div className="cq-field"><label>Gültig bis</label><input placeholder="MM/JJ"/></div>
                      <div className="cq-field"><label>CVV</label><input placeholder="123"/></div>
                    </div>
                    <div style={{ display: "flex", gap: 10, padding: "12px 14px", background: "var(--green-tint)", borderRadius: 8, fontSize: 13 }}>
                      <CqIcon name="shield" size={14}/>
                      <div>
                        <strong>Deine Zahlung ist sicher.</strong><br/>
                        <span style={{ fontSize: 11, color: "var(--ink-soft)" }}>Alle Transaktionen sind mit 256-bit SSL verschlüsselt. Wir speichern keine Karten-Details auf unseren Servern.</span>
                      </div>
                    </div>
                  </>
                )}
              </div>
            )}
          </div>

          <div>
            <div className="cq-highlights">
              <h3>Beratungs-Highlights</h3>
              <div className="item"><span className="tick"><CqIcon name="check" size={14}/></span> Vollständige TCVM-Auswertung</div>
              <div className="item"><span className="tick"><CqIcon name="check" size={14}/></span> Heu- & Raufutter-Analyse</div>
              <div className="item"><span className="tick"><CqIcon name="check" size={14}/></span> Individueller Mineralstoff-Plan</div>
              <div className="item"><span className="tick"><CqIcon name="check" size={14}/></span> Saisonaler Fütterungs-Guide</div>

              <div className="specialist">
                <div className="who">
                  <img src="https://caballo-natural.es/wp-content/uploads/2026/04/e5e8cdb3dcac1776c608897f8f2b236c331cac3f.png" alt="Therapeutin"/>
                  <div>
                    <div className="name">Melissa Hinze</div>
                    <div className="role">Therapeutin & Züchterin</div>
                  </div>
                </div>
                <div className="quote">{`„Ich werde ${state.horseName || "die Daten"} persönlich prüfen und den passendsten klinischen Weg für die Genesung erarbeiten.“`}</div>
              </div>

              <div style={{ marginTop: 22 }}>
                <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "rgba(251,248,241,0.85)" }}>
                  <input type="checkbox" checked={state.agreedTerms} onChange={e => setF("agreedTerms", e.target.checked)} style={{ marginTop: 3 }}/>
                  <span>Ich stimme den <a href="#" style={{ color: "var(--gold-soft)", textDecoration: "underline" }}>Beratungs-Konditionen</a> zu und stimme der Datenverarbeitung für die veterinär-energetische Auswertung zu.</span>
                </label>
                <button
                  className="pay-btn"
                  onClick={() => { if (state.agreedTerms) confirm(); else alert("Bitte stimme den Konditionen zu."); }}
                  style={{ opacity: state.agreedTerms ? 1 : 0.6 }}
                >
                  <span>
                    <div style={{ fontSize: 11, fontFamily: "var(--ff-mono)", letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.7 }}>Abschließen & zahlen</div>
                    <div style={{ fontSize: 22, fontFamily: "var(--ff-display)" }}>{plan.price === 0 ? "Kostenlos starten" : fmt(total)}</div>
                  </span>
                  <CqIcon name="arrow" size={18}/>
                </button>
              </div>

              <div style={{ marginTop: 18, display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "rgba(251,248,241,0.7)" }}>
                <div style={{ display: "flex" }}>
                  {[0,1,2].map(i => <div key={i} style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--gold)", border: "2px solid var(--green-deep)", marginLeft: i ? -8 : 0 }}/>)}
                </div>
                Diesen Monat haben sich 2.400+ Pferdebesitzer angemeldet
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="cq-foot">
        <button className="btn btn-secondary btn-sm" onClick={back}><CqIcon name="arrowL" size={14}/> Zurück</button>
        <span className="step-mini">Schritt 7 von 7</span>
      </div>
    </div>
  );
};

// ============ Confirmation ============
const ConfirmationStep = ({ state, plan, total, onNav }) => (
  <div className="cq-shell" data-screen-label="Beratung bestätigt">
    <div className="container" style={{ maxWidth: 880 }}>
      <div className="cq-card">
        <div className="cq-head">
          <h2>Zahlung bestätigt</h2>
          <p>Deine Beratung für {state.horseName || "dein Pferd"} ist eingegangen. Unsere Therapeutin beginnt mit der Auswertung.</p>
          <div className="cq-step-row"><span>Schritt 8 von 7</span><span className="pct">100% abgeschlossen</span></div>
          <div className="cq-progress"><div className="bar" style={{ width: "100%" }}/></div>
        </div>
        <div className="cq-confirm">
          <div className="check-circle"><CqIcon name="check" size={36}/></div>
          <h2>Zahlung bestätigt</h2>
          <p>Deine Anfrage wurde erfolgreich empfangen. Unsere Spezialistin Melissa wird innerhalb von 1–3 Werktagen mit der Auswertung beginnen.</p>

          <div className="actions">
            <div className="action-card">
              <div className="ic"><CqIcon name="download" size={20}/></div>
              <h4>Rechnung herunterladen</h4>
              <div className="meta">PDF-Dokument · 1.2 MB</div>
              <a href="#" onClick={(e)=>e.preventDefault()}>Jetzt herunterladen →</a>
            </div>
            <div className="action-card">
              <div className="ic"><CqIcon name="file" size={20}/></div>
              <h4>Beratungs-Guide</h4>
              <div className="meta">Nächste Schritte & Vorbereitung</div>
              <a href="#" onClick={(e)=>e.preventDefault()}>Online ansehen →</a>
            </div>
          </div>

          <div className="next-card">
            <h4>Was passiert als nächstes?</h4>
            <div className="steps">
              <div className="step">
                <div className="num">1</div>
                <p>Spezialistin sichtet deine Daten innerhalb von 1–3 Werktagen.</p>
              </div>
              <div className="step">
                <div className="num">2</div>
                <p>Bei Rückfragen: Pulse-Reading per Video oder Telefon.</p>
              </div>
              <div className="step">
                <div className="num">3</div>
                <p>Lieferung deines individuellen Ernährungs- & Therapieplans.</p>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 32, display: "flex", gap: 14, justifyContent: "center" }}>
            <button className="btn btn-primary" onClick={() => onNav("home")}>Zurück zur Startseite</button>
            <button className="btn btn-secondary" onClick={() => onNav("blog")}>Wissensbereich lesen</button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { ConsultationQuiz });