/* Caballo Natural – Hero carousel (auto-sliding banners) */
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero, useCallback: useCbHero } = React;

const HERO_SLIDES = [
  {
    key: "brand",
    kind: "brand",
    eyebrow: "Natürliche Pferdegesundheit",
    title: <>Verwurzelt in Erfahrung,<br />geführt von Tradition</>,
    // horse photo, panned so the head sits left of the quiz card
    bg: 'url("assets/hero-1.png")',
    bgPosition: "center center",
    bgTransform: "scale(1.0)",
    overlay:
      "linear-gradient(100deg, rgba(14,28,22,0.82) 0%, rgba(14,28,22,0.55) 34%, rgba(14,28,22,0.18) 64%, rgba(14,28,22,0.10) 100%)",
  },
  {
    key: "sarkoide",
    kind: "condition",
    tone: "gold",
    badge: "Haut & Immunsystem",
    title: <>Sarkoide ruhig und<br />ursachenbasiert begleiten</>,
    copy:
      "Gutartige Hautwucherungen mit viralem Hintergrund. Wir stärken die Immun-Modulation und entlasten die Leber – immer im Konzert mit dem Tierarzt.",
    chips: ["Warzenartige Knoten", "Reishi & Shiitake", "Externa-Pflege"],
    ctaLabel: "Sarkoide-Programm ansehen",
    cta: ["category", "haut-fell-immunsystem"],
    bg: 'url("assets/hero-2.png")',
    bgPosition: "center center",
    bgTransform: "scale(1.0)",
    overlay:
      "linear-gradient(100deg, rgba(48,33,14,0.86) 0%, rgba(58,42,18,0.62) 40%, rgba(60,46,20,0.25) 72%, rgba(60,46,20,0.12) 100%)",
  },
  {
    key: "ekzem",
    kind: "condition",
    tone: "green",
    badge: "Haut, Fell & Immunsystem",
    title: <>Sommerekzem –<br />Schluss mit dem Scheuern</>,
    copy:
      "Die Allergie auf Kriebelmücken hat ihre Wurzel selten nur in der Haut. Wir arbeiten an Leber, Lymphe und Darmmilieu – schon ab dem Frühjahr, bevor die Saison beginnt.",
    chips: ["Mähnen­scheuern", "Leber & Lymphe", "Kühlende Lavados"],
    ctaLabel: "Ekzem-Programm ansehen",
    cta: ["category", "haut-fell-immunsystem"],
    bg: 'url("assets/hero-3.png")',
    bgPosition: "center center",
    bgTransform: "scale(1.0)",
    overlay:
      "linear-gradient(100deg, rgba(11,32,26,0.86) 0%, rgba(15,44,36,0.6) 40%, rgba(20,58,48,0.22) 72%, rgba(20,58,48,0.10) 100%)",
  },
  {
    key: "hufrehe",
    kind: "condition",
    tone: "green",
    badge: "Hufe & Stoffwechsel",
    title: <>Hufrehe an der<br />Wurzel angehen</>,
    copy:
      "Fast immer ein Stoffwechsel- oder Fütterungsthema. Akut gehört sie in Tierarzthand – chronisch begleiten wir ursachenbasiert und saisonal präventiv.",
    chips: ["Insulin & EMS", "Fruktan-Management", "Saisonale Prävention"],
    ctaLabel: "Hufrehe-Programm ansehen",
    cta: ["category", "stoffwechsel"],
    bg: 'url("assets/hero-4.png")',
    bgPosition: "center center",
    bgTransform: "scale(1.0)",
    overlay:
      "linear-gradient(100deg, rgba(10,26,21,0.88) 0%, rgba(14,34,28,0.64) 40%, rgba(18,46,38,0.26) 72%, rgba(18,46,38,0.12) 100%)",
  },
];

const HeroCarousel = ({ onNav, openQuiz }) => {
  const [active, setActive] = useStateHero(0);
  const [paused, setPaused] = useStateHero(false);
  const n = HERO_SLIDES.length;
  const reduce = useRefHero(false);

  useEffectHero(() => {
    reduce.current =
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  }, []);

  const go = useCbHero((i) => setActive(((i % n) + n) % n), [n]);

  useEffectHero(() => {
    if (paused || reduce.current) return;
    const id = setTimeout(() => setActive((a) => (a + 1) % n), 7000);
    return () => clearTimeout(id);
  }, [active, paused, n]);

  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 (
    <section
      className="hero"
      data-screen-label="Hero"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {/* Crossfading background layers */}
      <div className="hero-bg-stack">
        {HERO_SLIDES.map((s, i) => (
          <div
            key={s.key}
            className={`hero-bg ${i === active ? "is-active" : ""}`}
            aria-hidden="true"
          >
            <div
              className="hero-bg-img"
              style={{
                backgroundImage: s.bg,
                backgroundPosition: s.bgPosition,
                transform: i === active ? s.bgTransform : `${s.bgTransform} scale(1.05)`,
              }}
            />
            <div className="hero-bg-overlay" style={{ backgroundImage: s.overlay }} />
          </div>
        ))}
      </div>

      <div className="container">
        {/* Sliding left content */}
        <div className="hero-left-stack">
          {HERO_SLIDES.map((s, i) => (
            <div
              key={s.key}
              className={`hero-slide ${i === active ? "is-active" : ""}`}
              aria-hidden={i === active ? "false" : "true"}
            >
              {s.kind === "brand" ? (
                <div className="hero-left">
                  <div className="eyebrow">{s.eyebrow}</div>
                  <h1>{s.title}</h1>
                  <div className="hero-cta">
                    <button
                      className="btn btn-primary btn-lg"
                      tabIndex={i === active ? 0 : -1}
                      onClick={() => onNav("consultation")}
                    >
                      Kostenlose Futterberatung <Icon name="arrow" />
                    </button>
                    <button
                      className="btn btn-secondary btn-lg"
                      tabIndex={i === active ? 0 : -1}
                      onClick={() => onNav("products")}
                    >
                      Naturprodukte entdecken <Icon name="arrow" />
                    </button>
                  </div>
                </div>
              ) : (
                <div className={`hero-left hero-left--condition tone-${s.tone}`}>
                  <div className="hero-badge">
                    <span className="dot" />
                    {s.badge}
                  </div>
                  <h1>{s.title}</h1>
                  <p className="hero-copy">{s.copy}</p>
                  <div className="hero-chips">
                    {s.chips.map((c) => (
                      <span key={c} className="hero-chip">{c}</span>
                    ))}
                  </div>
                  <div className="hero-cta hero-cta--single">
                    <button
                      className="btn btn-primary btn-lg"
                      tabIndex={i === active ? 0 : -1}
                      onClick={() => onNav(...s.cta)}
                    >
                      {s.ctaLabel} <Icon name="arrow" />
                    </button>
                    <button
                      className="btn btn-secondary btn-lg"
                      tabIndex={i === active ? 0 : -1}
                      onClick={() => onNav("consultation")}
                    >
                      Kostenlose Beratung <Icon name="arrow" />
                    </button>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Persistent quiz card */}
        <aside className="hero-quiz-card">
          <span className="pill-eyebrow"><span className="dot" />Ursachenbasiert</span>
          <h2>Finden Sie das richtige Programm</h2>
          <p>Unsere ganzheitlichen Programme behandeln die wahren Ursachen – nicht nur die Symptome.</p>
          <div className="quick-cats">
            {quickCats.map((qc) => (
              <button key={qc.slug} className="quick-cat" onClick={() => onNav("category", qc.slug)}>
                <span className="qc-icon"><Icon name={qc.icon} size={14} /></span>
                {qc.label}
              </button>
            ))}
          </div>
          <button className="main-btn" onClick={openQuiz}>
            Programm finden <Icon name="arrow" size={16} />
          </button>
          <a className="alt-link" onClick={() => {
            const el = document.querySelector('[data-screen-label="Programme"]');
            if (el) el.scrollIntoView({ behavior: "smooth" });
          }}>Alle Gesundheitsthemen ansehen ↓</a>
        </aside>
      </div>

      {/* Carousel controls – vertical strip on the right edge */}
      <div className="hero-controls">
        <button
          className="hero-nav"
          aria-label="Vorheriges Banner"
          onClick={() => go(active - 1)}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M18 15l-6-6-6 6" /></svg>
        </button>
        <div className="hero-dots">
          {HERO_SLIDES.map((s, i) => (
            <button
              key={s.key}
              className={`hero-dot ${i === active ? "is-active" : ""}`}
              aria-label={`Banner ${i + 1}`}
              aria-current={i === active}
              onClick={() => go(i)}
            >
              <span className="hero-dot-fill" />
            </button>
          ))}
        </div>
        <button
          className="hero-nav"
          aria-label="Nächstes Banner"
          onClick={() => go(active + 1)}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
        </button>
      </div>
    </section>
  );
};

Object.assign(window, { HeroCarousel });