// About + a light Checkout + Contact pages.
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Photo, Button, SectionHeading, Input, Select, Tag } = DS;
  const Icon = window.VNIcon;

  // 5.6 — newsletter with success state + subtle confetti
  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} /> Děkujeme! První nákup se slevou 10 % čeká ve vaší schránce.</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 About({ go }) {
    const D = window.SHOP_DATA;
    const [lightbox, setLightbox] = React.useState(null);
    // Ocenění — newest first (left → right), horizontal drag-scroll like Satur
    const diplomas = [
      { ic: "shield", t: "Registrovaný chov matek", d: "Evidovaná chovná stanice a registrované stanoviště v ČR." },
      { ic: "rosette", t: "Uznané chovné linie", d: "Carnica Sklenař, Singer a Troiseck z uznaného šlechtitelského chovu." },
      { ic: "spark", t: "Instrumentální inseminace", d: "Vlastní zázemí pro řízené páření a kontrolu otcovské strany." },
      { ic: "leaf", t: "Oplozovací stanoviště", d: "Izolované stanoviště pro oplození matek s vybranými trubci." },
      { ic: "shield", t: "Veterinární dohled", d: "Pravidelný monitoring varroázy a osvědčení o zdraví včelstev." },
      { ic: "rosette", t: "Doložený rodokmen", d: "Chovné záznamy a původ ke každé plemenné matce." },
    ];
    const sliderRef = React.useRef(null);
    const dragged = React.useRef(false);
    React.useEffect(() => {
      const el = sliderRef.current;
      if (!el) return;
      let down = false, startX = 0, startScroll = 0;
      const onDown = (e) => {
        if (e.pointerType !== "mouse") return; // touch uses native scroll
        down = true; dragged.current = false;
        startX = e.pageX; startScroll = el.scrollLeft;
        el.classList.add("is-dragging");
      };
      const onMove = (e) => {
        if (!down) return;
        const dx = e.pageX - startX;
        if (Math.abs(dx) > 4) dragged.current = true;
        el.scrollLeft = startScroll - dx;
      };
      const onUp = () => { down = false; el.classList.remove("is-dragging"); };
      el.addEventListener("pointerdown", onDown);
      window.addEventListener("pointermove", onMove);
      window.addEventListener("pointerup", onUp);
      return () => {
        el.removeEventListener("pointerdown", onDown);
        window.removeEventListener("pointermove", onMove);
        window.removeEventListener("pointerup", onUp);
      };
    }, []);
    return (
      <main className="kit">
        <div className="kit-shell kit-about__hero">
          <Photo src={DS.PHOTOS && DS.PHOTOS.beekeeper} ratio="auto" radius="var(--radius-jar)" className="kit-about__photo" style={{ height: "100%" }} alt="Včelař u úlů" label="Foto včelnice" />
          <div className="kit-about__copy">
            <span className="vn-eyebrow">Náš chov</span>
            <h1>Šlechtitelský chov včelích matek</h1>
            <p>Začalo to v roce 2012 několika úly na zahradě. Poučili jsme se, že základ dobrého včelstva je matka — a chov matek se postupně stal samostatnou větví našeho rodinného včelařství.</p>
            <p>Vybíráme z nejlepších včelstev, vedeme chovné záznamy a šlechtíme na mírnost, plodnost, zdraví a nízkou rojivost. Pracujeme s prověřenými liniemi kraňky i s importím Buckfastem.</p>
            <p>Každá matka má doložený původ a ke každé zásilce přikládáme veterinární osvědčení. Nepočítáme matky na tisíce — záleží nám na kvalitě každé z nich.</p>
            <p style={{ fontFamily: "var(--font-body)", fontStyle: "italic", color: "var(--tmavy-med)" }}>Věříme, že dobrý chov začíná u genetiky. U nás vždycky víte, z jaké linie vaše matka pochází a kdo za ní stojí.</p>
            <div style={{ marginTop: 4 }}>
              <Button variant="secondary" onClick={() => go("blog")} iconEnd={<Icon name="arrowRight" size={16} />}>Číst blog o chovu</Button>
            </div>
          </div>
        </div>

        {/* V ČÍSLECH */}
        <section className="kit-section--alt">
          <div className="kit-shell">
            <SectionHeading align="center" eyebrow="Včelaříme od roku 2012" title="Náš chov v číslech" style={{ marginBottom: 34 }} />
            <div className="kit-numbers">
              {[
                { n: "2012", l: "Včelaříme od roku" },
                { n: "6",    l: "Prověřených linií" },
                { n: "V–VIII", l: "Sezóna líhnutí" },
                { n: "100 %", l: "Doložený původ" },
              ].map((s, i) => (
                <div className="kit-number" key={i}>
                  <b>{s.n}</b>
                  <span>{s.l}</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* NAŠE HODNOTY */}
        <section className="kit-section">
          <div className="kit-shell">
            <SectionHeading align="center" eyebrow="Čemu věříme" title="Naše hodnoty" style={{ marginBottom: 8 }} />
            <div className="kit-values">
              {[
                { ic: "leaf",   t: "Genetika", d: "Šlechtíme na mírnost, plodnost, zdraví a nízkou rojivost. Vybíráme z nejlepších včelstev." },
                { ic: "shield", t: "Zdraví",   d: "Pravidelný monitoring varroázy a veterinární osvědčení ke každé zásilce." },
                { ic: "pin",    t: "Původ",    d: "Doložený rodokmen a chovné záznamy. U plemenných matek znate linii i generaci." },
              ].map((v, i) => (
                <div className="kit-value" key={i}>
                  <div className="kit-value__head">
                    <span className="kit-value__ic"><Icon name={v.ic} size={24} strokeWidth={1.6} /></span>
                    <h3>{v.t}</h3>
                  </div>
                  <p>{v.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* OCENĚNÍ — diplomová galerie */}
        <section className="kit-section--alt">
          <div className="kit-shell">
            <div className="kit-awards">
              <header className="kit-awards__head">
                <span className="vn-eyebrow">Zázemí a doklady</span>
                <h2>Náš chov má i papíry</h2>
                <p>Chov vedeme transparentně — registrovaná stanice, veterinární dohled a doložený původ. Tady je přehled našeho zázemí.</p>
              </header>

              <div className="kit-diplomas" ref={sliderRef}>
                {diplomas.map((a, i) => (
                  <button className="kit-diploma" key={i} onClick={() => { if (dragged.current) return; setLightbox(a.t); }} aria-label={"Zobrazit: " + a.t}>
                    <span className="kit-diploma__media">
                      <Photo ratio="3 / 4" radius="0" label="Diplom — sken" />
                      <span className="kit-diploma__badge"><Icon name={a.ic} size={17} /></span>
                      <span className="kit-diploma__zoom"><Icon name="plus" size={15} /></span>
                    </span>
                    <span className="kit-diploma__t">{a.t}</span>
                    <span className="kit-diploma__d">{a.d}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </section>

        {lightbox && (
          <div className="kit-lightbox" data-open="true" onClick={(e) => { if (e.target === e.currentTarget) setLightbox(null); }}>
            <button className="kit-lightbox__close" onClick={() => setLightbox(null)} aria-label="Zavřít"><Icon name="close" size={22} /></button>
            <div className="kit-lightbox__inner">
              <Photo ratio="3 / 4" label={lightbox} />
            </div>
          </div>
        )}

        {/* PŮVOD A TERROIR — přeneseno z HP */}
        <section className="kit-section">
          <div className="kit-shell">
            <div className="kit-section__head">
              <SectionHeading eyebrow="Naše linie" title="Z čeho vybíráte"
                lead="Pracujeme s prověřenými liniemi. Každá má svůj charakter — vyberte tu, která sedí vašemu způsobu včelaření." />
            </div>
            <div className="kit-terroir">
              {[
                { name:"Kraňka — Sklenař & Singer", arg:"carnica", img: DS.PHOTOS && DS.PHOTOS.beeFlower,
                  desc:"Mírné, nerojívé linie s výborným jarním rozvojem a klidem na plástu." },
                { name:"Buckfast", arg:"buckfast", img: DS.PHOTOS && DS.PHOTOS.jarGlow,
                  desc:"Vitální, pracovité matky s vysokým medným výnosem a nízkou rojivostí." },
                { name:"Inseminované linie", arg:"inseminace", img: DS.PHOTOS && DS.PHOTOS.forest,
                  desc:"Řízené páření a 100% kontrola otcovské strany pro čistotu genetiky." },
              ].map((t, i) => (
                <a key={i} className="kit-terroir__card" href="#" onClick={(e)=>{e.preventDefault();go("category", t.arg);}}>
                  <div className="kit-terroir__media"><Photo src={t.img} ratio="16 / 10" label={t.name} /></div>
                  <div className="kit-terroir__body">
                    <h3 className="kit-terroir__name">{t.name}</h3>
                    <p className="kit-terroir__desc">{t.desc}</p>
                    <span className="kit-terroir__link">Prohlédnout matky <Icon name="arrowRight" size={15} /></span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>

        {/* NAVŠTIVTE NÁS — pozvání ke dvoru */}
        <section className="kit-section--alt">
          <div className="kit-shell">
            <div className="kit-visit">
              <div className="kit-visit__media"><Photo src={DS.PHOTOS && DS.PHOTOS.forest} ratio="4 / 3" label="Foto včelnice u dvora" style={{ height: "100%" }} /></div>
              <div className="kit-visit__copy">
                <span className="vn-eyebrow kit-visit__eyebrow"><Icon name="door" size={15} /> Stavte se</span>
                <h2>Přijďte si pro matku osobně</h2>
                <p>Rádi vám ukážeme chovné úly, povíme, jak vybíráme a přecházíme linie, a matku či oddělek předáme osobně. Stačí se předem ozvat a domluvit termín.</p>
                <p className="kit-visit__addr"><Icon name="pin" size={16} /> Na Samotě 1029, 253 01 Hostivice</p>
                <div>
                  <Button variant="primary" onClick={() => go("contact")} iconEnd={<Icon name="arrowRight" size={18} />}>Domluvit návštěvu</Button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    );
  }

  function Checkout({ go, items }) {
    const total = items.reduce((s, i) => s + i.price * i.qty, 0);
    const count = items.reduce((s, i) => s + i.qty, 0);
    const freeAt = 4;
    const left = Math.max(0, freeAt - count);
    const pct = Math.min(100, (count / freeAt) * 100);
    const ship = 0; // dle zvoleného převzetí
    return (
      <main className="kit">
        <div className="kit-shell" style={{ paddingBlock: "var(--section-y-tight) var(--section-y)" }}>
          <nav className="kit-breadcrumb"><a href="#" onClick={(e)=>{e.preventDefault();go("home");}}>Domů</a><Icon name="chevronRight" size={13} /><span>Pokladna</span></nav>
          <h1 style={{ marginBottom: 6 }}>Pokladna</h1>
          <p style={{ color: "var(--text-muted)", fontSize: "var(--text-sm)", marginTop: 0, marginBottom: 28, display: "flex", alignItems: "center", gap: 8 }}><Icon name="check" size={16} style={{ color: "var(--accent-secondary)" }} /> Nákup bez registrace — stačí vyplnit doručovací údaje.</p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }} className="kit-checkout-grid">
            <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
              <div>
                <h3 style={{ marginTop: 0 }}>Doručovací údaje</h3>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                  <Input label="Jméno" placeholder="Jan" />
                  <Input label="Příjmení" placeholder="Novák" />
                  <Input label="E-mail" type="email" placeholder="jan@email.cz" />
                  <Input label="Telefon" placeholder="+420 …" />
                  <div style={{ gridColumn: "1 / -1" }}><Input label="Ulice a č.p." placeholder="Na Samotě 1029" /></div>
                  <Input label="Město" placeholder="Hostivice" />
                  <Input label="PSČ" placeholder="253 01" />
                </div>
              </div>
              <div>
                <h3>Doprava</h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {["Osobní převzetí na včelnici (po domluvě)", "Zásilka matek v klícce (doporučeně)", "Dobírka", "Po domluvě – kurýr"].map((o, i) => (
                    <label key={i} className="kit-fopt">
                      <input type="radio" name="ship" defaultChecked={i === 0} /> <span>{o}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div>
                <h3>Platba</h3>
                <div className="kit-pay">
                  <span data-pri="true">Dobírka</span><span data-pri="true">Zásilkovna / Packeta</span><span>Karta</span><span>Apple&nbsp;Pay</span><span>Google&nbsp;Pay</span><span>Bankovní převod</span>
                </div>
                <p className="kit-trustrow"><Icon name="shield" size={16} /> Zabezpečená platba · v Česku posíláme prioritně Zásilkovnou nebo na dobírku.</p>
              </div>
            </div>

            <aside style={{ background: "var(--surface-alt)", borderRadius: "var(--radius-xl)", padding: 24, alignSelf: "start" }}>
              <h3 style={{ marginTop: 0 }}>Souhrn objednávky</h3>
              {items.length > 0 && (
                <div className="kit-cofree">
                  <p className="kit-cofree__msg">
                    <Icon name="shield" size={16} />
                    <span>Ke každé zásilce přikládáme <strong>veterinární osvědčení</strong> o zdraví včelstev.</span>
                  </p>
                </div>
              )}
              {items.length === 0 && <p style={{ color: "var(--text-muted)" }}>Košík je prázdný.</p>}
              {items.map((it) => (
                <div key={it.id} style={{ padding: "8px 0", fontSize: "var(--text-sm)", borderBottom: "1px solid var(--border-soft)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                    <span>{it.qty}× {it.name}{it.weight ? " · " + it.weight : ""}</span><b style={{ whiteSpace: "nowrap" }}>{it.price * it.qty} Kč</b>
                  </div>
                  {it.preorder && <div style={{ color: "var(--medova-zlata-tmava)", fontSize: "var(--text-xs)", marginTop: 4 }}>Předobjednávka — odešleme po naskladnění ({it.preorder})</div>}
                </div>
              ))}
              <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", color: "var(--text-muted)", fontSize: "var(--text-sm)" }}><span>Doprava</span><span>dle převzetí</span></div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingTop: 8 }}><span>Celkem</span><b style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: "var(--text-price)", color: "var(--text-body)" }}>{total + ship} Kč</b></div>
              <div style={{ marginTop: 16 }}><Button variant="primary" block size="lg" iconEnd={<Icon name="check" size={18} />}>Závazně objednat</Button></div>
              <p style={{ fontSize: "var(--text-xs)", color: "var(--text-faint)", textAlign: "center", marginTop: 12, marginBottom: 0 }}>Odesláním souhlasíte s obchodními podmínkami.</p>
            </aside>
          </div>
        </div>
      </main>
    );
  }

  function Contact({ go }) {
    return (
      <main className="kit">
        <div className="kit-shell" style={{ paddingBlock: "var(--section-y-tight) var(--section-y)" }}>
          <header className="kit-contact__intro">
            <h1>Kontakt &amp; osobní odběr</h1>
            <p>Ozvěte se nám telefonicky nebo přes formulář. Matky a oddělky se přebírají osobně na včelnici v Hostivicích po předchozí domluvě.</p>
          </header>
          <div className="kit-contact">
            <div className="kit-contact__copy">
              <div className="kit-contact__address">
                <h2 style={{ margin: "0 0 18px" }}>Adresa</h2>
                <ul className="kit-cinfo">
                  <li>
                    <span className="kit-cinfo__ic"><Icon name="pin" size={18} /></span>
                    <span className="kit-cinfo__body"><strong>Včelnice Najman — Na Samotě 1029</strong><span className="kit-cinfo__sub">253 01 Hostivice, okres Praha-západ</span></span>
                  </li>
                  <li>
                    <span className="kit-cinfo__ic"><Icon name="phone" size={18} /></span>
                    <span className="kit-cinfo__body"><a href="tel:+420603887482">+420 603 887 482</a><span className="kit-cinfo__sub">Nejlépe Po–Pá 8–18 h.</span></span>
                  </li>
                  <li>
                    <span className="kit-cinfo__ic"><Icon name="mail" size={18} /></span>
                    <span className="kit-cinfo__body"><a href="mailto:vcelahostivice@seznam.cz">vcelahostivice@seznam.cz</a><span className="kit-cinfo__sub">Odpovídáme do 1–2 dnů.</span></span>
                  </li>
                  <li>
                    <span className="kit-cinfo__ic"><Icon name="clock" size={18} /></span>
                    <span className="kit-cinfo__body"><strong>Osobní odběr</strong><span className="kit-cinfo__sub">Po domluvě termínu telefonicky. Zboží se přebírá osobně na včelnici.</span></span>
                  </li>
                </ul>
              </div>
              <form className="kit-contact__form" onSubmit={(e) => e.preventDefault()}>
                <div className="kit-contact__row">
                  <Input label="Vaše jméno" placeholder="Jan Novák" />
                  <Input label="E-mail" type="email" placeholder="jan@email.cz" />
                </div>
                <Input label="Telefon (nepovinné)" type="tel" placeholder="+420 …" />
                <div className="vn-field">
                  <label className="vn-field__label" style={{ display: "block", marginBottom: 6 }}>Zpráva</label>
                  <textarea className="vn-input" rows="4" placeholder="Dobrý den, rád bych se zeptal na…" style={{ width: "100%", resize: "vertical", fontFamily: "var(--font-body)" }}></textarea>
                </div>
                <Button variant="primary" block>Odeslat zprávu</Button>
              </form>
            </div>
            <div className="kit-map">
              <div className="kit-map__ring" /><div className="kit-map__ring kit-map__ring--2" />
              <div className="kit-map__pin"><Icon name="pin" size={30} /><b>Hostivice</b><span>Na Samotě 1029</span></div>
            </div>
          </div>
        </div>
      </main>
    );
  }

  Object.assign(window, { VNAbout: About, VNCheckout: Checkout, VNContact: Contact });
})();