// Homepage (chov) — slim: hero, full product grid, proč my, sezóna,
// příběh chovu + odkaz na medový e-shop, recenze, krátké FAQ, newsletter.
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Button, SectionHeading, Photo, Badge, Rating, Input } = DS;
  const Icon = window.VNIcon;
  const HONEY_URL = "https://www.vcelarstvinajman.cz";
  const GOOGLE_REVIEWS = "https://www.google.com/maps/search/?api=1&query=Včelařství+Najman+Hostivice";

  function ReviewCard({ r }) {
    const ref = React.useRef(null);
    const [truncated, setTruncated] = React.useState(false);
    React.useEffect(() => {
      const el = ref.current;
      if (el) setTruncated(el.scrollHeight - el.clientHeight > 2);
    }, []);
    return (
      <div className="kit-rev">
        <Rating value={r.rating} size="sm" />
        <p className="kit-rev__text" ref={ref}>„{r.text}“</p>
        {truncated && (
          <a className="kit-rev__more" href={GOOGLE_REVIEWS} target="_blank" rel="noopener noreferrer">Číst více <Icon name="arrowRight" size={13} /></a>
        )}
        <div className="kit-rev__who"><span className="kit-rev__av">{r.name[0]}</span><span><b>{r.name}</b><span>{r.place}</span></span></div>
      </div>
    );
  }

  function Confetti() {
    const bits = React.useMemo(() => Array.from({ length: 16 }, () => ({
      l: Math.random() * 100,
      d: (Math.random() * 0.25).toFixed(2),
      c: ["var(--accent)", "var(--accent-secondary)", "var(--medova-zlata-svetla)"][Math.floor(Math.random() * 3)],
      r: Math.floor(Math.random() * 360),
      x: Math.round((Math.random() - 0.5) * 140),
    })), []);
    return (
      <div className="kit-confetti" aria-hidden="true">
        {bits.map((b, i) => (
          <span key={i} style={{ left: b.l + "%", background: b.c, animationDelay: b.d + "s", transform: "rotate(" + b.r + "deg)", "--x": b.x + "px" }} />
        ))}
      </div>
    );
  }

  function NewsletterForm() {
    const [email, setEmail] = React.useState("");
    const [burst, setBurst] = React.useState(false);
    const [done, setDone] = React.useState(false);
    const submit = (e) => {
      e.preventDefault();
      if (!email) return;
      setBurst(true);
      setTimeout(() => setDone(true), 700);
      setTimeout(() => setBurst(false), 1100);
    };
    return (
      <div className="kit-news__formwrap">
        {done ? (
          <p className="kit-news__thanks"><Icon name="check" size={18} /> Hotovo! Ozveme se, jakmile otevřeme příjem objednávek na novou sezónu.</p>
        ) : (
          <form className={"kit-news__form" + (burst ? " is-done" : "")} onSubmit={submit}>
            <Input type="email" required placeholder="vas@email.cz" aria-label="E-mail" value={email} onChange={(e) => setEmail(e.target.value)} />
            <Button variant="primary" type="submit" iconStart={burst ? <Icon name="check" size={18} /> : undefined}>{burst ? "Přihlášen!" : "Odebírat"}</Button>
          </form>
        )}
        {burst && <Confetti />}
      </div>
    );
  }

  function HomeFaq() {
    /* CHOV_CONTENT_PATCH */
    const fallbackFaqs = [
      { q: "Jak probíhá převzetí matky nebo oddělku?",
        a: "Matky předáváme osobně na včelnici v Hostivicích po předchozí domluvě termínu, nebo je posíláme v klíckách doporučeně po celé ČR. Oddělky a celá včelstva se z důvodu zdraví a kondice přebírají vždy osobně." },
      { q: "Co znamená neoplozená, oplozená a inseminovaná matka?",
        a: "Neoplozená matka se páří až ve vašem chovu. Oplozená se spářila přirozeně na našem stanovišti či oplozovací stanici. Inseminovaná je instrumentálně oplozená — máme tak 100% kontrolu otcovské strany a nejvyšší čistotu linie." },
      { q: "Kdy je nejlepší čas matku přidat?",
        a: "Ideální je hlavní sezóna od května do srpna, za příznivého počasí a snůšky. Matku přidávejte v klícce do včelstva bez matky. Podrobný postup najdete na blogu v sekci Sezónní práce." },
      { q: "Dostanu doklad o původu a zdraví?",
        a: "Ano. Ke každé zásilce přikládáme veterinární osvědčení o zdraví včelstev a u plemenných matek doklad o původu (linie a generace)." },
    ];
    const faqs = (window.SHOP_DATA && Array.isArray(window.SHOP_DATA.faq) && window.SHOP_DATA.faq.length)
      ? window.SHOP_DATA.faq
      : fallbackFaqs;
    const [open, setOpen] = React.useState(-1);
    return (
      <div className="kit-faq">
        {faqs.map((f, i) => (
          <div className="kit-faq__item" key={i} data-open={open === i}>
            <button className="kit-faq__q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{f.q}</span>
              <span className="kit-faq__chev"><Icon name="chevronDown" size={18} /></span>
            </button>
            {open === i && (
              <div className="kit-faq__a"><p>{f.a}</p></div>
            )}
          </div>
        ))}
      </div>
    );
  }

  function Home({ go, addToCart, onQuickView, onNotify, onPreorder }) {
    const D = window.SHOP_DATA;

    return (
      <main className="kit">
        {/* HERO */}
        <section className="kit-hero">
          <div className="kit-shell kit-hero__inner">
            <div className="kit-hero__copy">
              <h1>Matky a oddělky<br />z dobrých linií.</h1>
              <p className="kit-hero__sub">Šlechtíme mírné, nerojivé linie kraňky a vitální Buckfast. Od neoplozených matek po přezimovaná včelstva — vždy s doloženým původem a veterinárním osvědčením.</p>
              <div className="kit-hero__cta">
                <Button variant="primary" size="lg" onClick={() => go("category")} iconEnd={<Icon name="arrowRight" size={18} />}>Vybrat matku</Button>
                <Button variant="secondary" size="lg" onClick={() => go("about")}>Jak chováme</Button>
              </div>
            </div>
            <div className="kit-hero__media">
              <Photo src={DS.PHOTOS && DS.PHOTOS.beeFlower} ratio="4 / 5" radius="var(--radius-jar)" alt="Včelí matka na plástu" label="Hero foto — matka na plástu" />
              <div className="kit-hero__chip"><span className="dot"><Icon name="shield" size={16} /></span> Veterinární osvědčení ke každé zásilce</div>
            </div>
          </div>
        </section>

        {/* PRODUKTY — hned, plná nabídka sezóny */}
        <section className="kit-section--alt">
          <div className="kit-shell">
            <div className="kit-section__head">
              <SectionHeading eyebrow="Nabídka sezóny 2026" title="Matky, oddělky a včelstva"
                lead="Omezený počet kusů — předobjednávky vyřizujeme v pořadí, jak chodí." />
            </div>
            <div className="kit-pgrid kit-pgrid--4">
              {D.products.map((p) => (
                <window.VNProductCard key={p.id} product={p}
                  onOpen={(pr) => go("product", pr.id)} onAdd={() => addToCart(p)}
                  onQuickView={onQuickView} onNotify={onNotify} onPreorder={onPreorder} />
              ))}
            </div>
          </div>
        </section>

        {/* PROC MY */}
        <section className="kit-section">
          <div className="kit-shell">
            <SectionHeading align="center" eyebrow="Proč od nás" title="Chov, za kterým stojí konkrétní lidé" style={{ marginBottom: 36 }} />
            <div className="kit-why">
              {((D.benefits && D.benefits.length) ? D.benefits : [
                { ic:"hive", t:"Vlastní chovná stanice", d:"Matky odchováváme sami — žádné překupování neznámého původu." },
                { ic:"bee", t:"Prověřené linie", d:"Sklenař, Singer, Troiseck a importní Buckfast s doloženým rodokmenem." },
                { ic:"shield", t:"Veterinární osvědčení", d:"Ke každé zásilce doklad o zdraví včelstev a původu matky." },
                { ic:"rosette", t:"Výběr podle vlastností", d:"Šlechtíme na mírnost, plodnost, výnos a nízkou rojivost." },
              ]).map((v, i) => (
                <div className="kit-why__item" key={i}>
                  <span className="kit-why__ic"><Icon name={v.ic} size={30} strokeWidth={1.5} /></span>
                  <h3 className="kit-why__t">{v.t}</h3>
                  <p className="kit-why__d">{v.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* SEZONA — stavový pás */}
        <section className="kit-section--tight">
          <div className="kit-shell">
            <div className="kit-season">
              <div className="kit-season__badge"><span className="kit-season__dot" /> Sezóna 2026 · příjem objednávek</div>
              <div className="kit-season__steps">
                {[
                  { m:"Únor – duben", t:"Rezervace", d:"Otevíráme příjem objednávek na matky a oddělky." },
                  { m:"Květen – srpen", t:"Líhnutí a expedice", d:"Matky líhneme a po oplození expedujeme v pořadí." },
                  { m:"Září – říjen", t:"Výměny matek", d:"Podzimní výměny a doplnění chovu mladými matkami." },
                ].map((s, i) => (
                  <div className="kit-season__step" key={i}>
                    <span className="kit-season__m">{s.m}</span>
                    <b className="kit-season__t">{s.t}</b>
                    <p className="kit-season__d">{s.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* PRIBEH CHOVU — dark, s odkazem na medový e-shop */}
        <section className="kit-storydark">
          <div className="kit-storydark__hc" aria-hidden="true" />
          <div className="kit-shell kit-storydark__inner">
            <div className="kit-storydark__media">
              <Photo src={DS.PHOTOS && DS.PHOTOS.beekeeper} ratio="4 / 5" alt="Včelař u chovných úlů" label="Foto chovné stanice" />
            </div>
            <div className="kit-storydark__copy">
              <span className="vn-eyebrow kit-storydark__eyebrow">Chovná stanice</span>
              <h2 className="kit-storydark__title">Genetika, které můžete <em>věřit</em></h2>
              <p className="kit-storydark__lead kit-dropcap">Chov matek je u nás samostatná větev rodinného včelařství. Vybíráme z nejlepších včelstev, vedeme chovné záznamy a šlechtíme na vlastnosti, které oceníte přímo u úlu — mírnost, zdraví a spolehlivý rozvoj.</p>
              <div className="kit-storydark__cta">
                <Button variant="primary" onClick={() => go("about")}>Poznat náš chov</Button>
                <a className="kit-storydark__honey" href={HONEY_URL} target="_blank" rel="noopener noreferrer">
                  <Icon name="dipper" size={17} /> Hledáte med? Náš e-shop <Icon name="arrowUpRight" size={14} />
                </a>
              </div>
            </div>
          </div>
        </section>

        {/* RECENZE */}
        <section className="kit-section--alt">
          <div className="kit-shell">
            <div className="kit-section__head">
              <SectionHeading align="center" eyebrow="Co říkají chovatelé" title="Včelaři, kteří se vracejí" />
            </div>
            <div className="kit-revs">
              {D.reviews.map((r, i) => (
                <ReviewCard key={i} r={r} />
              ))}
            </div>
            <div className="kit-revs__foot">
              <span className="g"><Rating value={4.9} size="sm" /> 4,9 z 5 · hodnocení chovatelů</span>
              <a href={GOOGLE_REVIEWS} target="_blank" rel="noopener noreferrer">Zobrazit Google profil <Icon name="arrowRight" size={14} style={{verticalAlign:"-2px"}} /></a>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section className="kit-section" id="vn-faq">
          <div className="kit-shell">
            <div className="kit-section__head">
              <SectionHeading align="center" eyebrow="Časté dotazy" title="Než si objednáte" />
            </div>
            <HomeFaq />
          </div>
        </section>

        {/* NEWSLETTER */}
        <section className="kit-section--alt">
          <div className="kit-shell">
            <div className="kit-news">
              <div className="kit-news__hc" />
              <div className="kit-news__inner">
                <span className="vn-eyebrow"><Icon name="mail" size={15} /> Newsletter</span>
                <h2>Sezóna začíná v květnu. Dáme vám vědět.</h2>
                <p>Přihlaste se a ozveme se, jakmile otevřeme příjem objednávek na novou sezónu nebo naskladníme volné matky a oddělky.</p>
                <NewsletterForm />
                <p style={{ fontSize: "var(--text-xs)", color: "rgba(251,248,241,.6)" }}>Odhlásíte se kdykoli jedním kliknutím. Žádný spam.</p>
              </div>
            </div>
          </div>
        </section>

      </main>
    );
  }

  function prodProps(p) {
    return {
      name: p.name, region: p.region, weight: p.weight, price: p.price, oldPrice: p.oldPrice,
      rating: p.rating, reviewCount: p.reviews, badge: p.badge, image: p.image,
      imageLabel: "Foto · " + p.weight,
    };
  }

  window.VNHome = Home;
  window.VNprodProps = prodProps;
})();