// Grow Hemp — breeding genealogy (portrait, staged animation)
// Right-column module. Each season builds its tiers in on entry.

const CV = {
  ChWn: { code: "ChWn", name: "Cherry Wine" },
  ChAb: { code: "ChAb", name: "Cherry Abacus" },
  Awa: { code: "Awa", name: "Awa Cobbler" },
};

const SEASONS = [
  {
    kind: "season",
    eyebrow: "Season 1",
    season: "Nov 2022 – Mar 2023",
    title: "First generation.",
    male: "Cherry Wine (ChWn)",
    crosses: [
      { mother: "Cherry Wine (ChWn) ♀", child: "[ChWn × ChWn]", selected: true },
      { mother: "Cherry Abacus (ChAb) ♀", child: "[ChWn × ChAb]" },
      { mother: "Awa Cobbler (Awa) ♀", child: "[ChWn × Awa]" },
    ],
    note: "No testing had been done yet, so Cherry Wine was chosen as the first pollen donor on looks and smell alone. Highest CBD was later found in one [ChWn × ChWn] plant, selected as next season's pollinator.",
  },
  {
    kind: "season",
    eyebrow: "Season 2",
    season: "Nov 2023 – Mar 2024",
    title: "Second generation.",
    male: "[ChWn × ChWn]",
    crosses: [
      { mother: "[ChWn × ChWn] ♀", child: "[ChWn × ChWn] × [ChWn × ChWn]" },
      { mother: "[ChWn × ChAb] ♀", child: "[ChWn × ChWn] × [ChWn × ChAb]", selected: true },
      { mother: "[ChWn × Awa] ♀", child: "[ChWn × ChWn] × [ChWn × Awa]" },
    ],
    note: "Highest CBD found in one [ChWn × ChWn] × [ChWn × ChAb] plant, selected as next season's pollinator.",
  },
  {
    kind: "season",
    eyebrow: "Season 3",
    season: "Nov 2024 – Mar 2025",
    title: "Third generation.",
    male: "[ChWn × ChWn] × [ChWn × ChAb]",
    crosses: [
      { mother: "[ChWn × ChWn] × [ChWn × ChAb] ♀", child: "Gen 3 · line A", selected: true },
      { mother: "[ChWn × ChWn] × [ChWn × ChWn] ♀", child: "Gen 3 · line B" },
      { mother: "[ChWn × ChWn] × [ChWn × Awa] ♀", child: "Gen 3 · line C" },
    ],
    note: "The ChAb line tested highest again. Line A was held as Season 4's pollinator.",
  },
  {
    kind: "season",
    eyebrow: "Season 4",
    season: "Nov 2025 – Mar 2026",
    title: "Fourth generation.",
    male: "[ChWn × ChAb] × [ChWn × ChAb]",
    crosses: [
      { mother: "[ChWn × ChAb] ♀", child: "Gen 4 · line A" },
      { mother: "[Awa × ChAb] ♀", child: "Gen 4 · line B" },
      { mother: "[ChAb × ChAb] ♀", child: "Gen 4 · line C", selected: true },
    ],
    note: "Selection changed this season. CBD levels were topping out, so the strongest plant was chosen on phenotype instead: a large, vigorous producer testing 15% CBD, taken over plants that tested higher but grew poorly.",
  },
];

function SeasonSlide({ s }) {
  return (
    <div className="gen-inner">
      <div className="gen-anim gen-pollinator" style={{ transitionDelay: "0.06s" }}>
        <span className="gen-role-label">Pollinator</span>
        <span className="gen-pollinator-pill">{s.male}</span>
      </div>
      <span className="gen-anim gen-stem" style={{ transitionDelay: "0.2s" }} aria-hidden="true"></span>
      <span className="gen-anim gen-role-label gen-rows-label" style={{ transitionDelay: "0.26s" }}>Crossed with</span>
      <div className="gen-rows">
        {s.crosses.map((x, i) => (
          <div
            className={`gen-anim gen-vrow ${x.selected ? "is-selected" : ""}`}
            key={i}
            style={{ transitionDelay: `${0.32 + i * 0.14}s` }}
          >
            <span className="gen-vrow-mother">{x.mother}</span>
            <div className="gen-vrow-child">
              <span className="gen-vrow-label">{x.child}</span>
              {x.selected ? <span className="gen-vrow-tag">Selected</span> : null}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CurrentSlide() {
  return (
    <div className="gen-inner gen-inner-current">
      <div className="gen-anim gen-current-badge" style={{ transitionDelay: "0.1s" }}>
        <span className="gen-current-pulse" aria-hidden="true"></span>
        In the lab
      </div>
    </div>
  );
}

function Slide({ s }) {
  return (
    <section className="gen-slide" aria-label={s.eyebrow}>
      <header className="gen-head">
        <h3 className="gen-title">{s.title}</h3>
        <span className="gen-eyebrow">{s.eyebrow} <span className="gen-eyebrow-date">({s.season})</span></span>
      </header>
      {s.kind === "season" ? <SeasonSlide s={s} /> : <CurrentSlide />}
    </section>
  );
}

function Genealogy() {
  const [i, setI] = React.useState(0);
  const n = SEASONS.length;
  const go = React.useCallback((next) => setI((cur) => Math.max(0, Math.min(n - 1, next))), [n]);

  // swipe (vertical card, horizontal swipe still advances)
  const startX = React.useRef(null);
  const onDown = (e) => { startX.current = (e.touches ? e.touches[0].clientX : e.clientX); };
  const onUp = (e) => {
    if (startX.current == null) return;
    const endX = (e.changedTouches ? e.changedTouches[0].clientX : e.clientX);
    const dx = endX - startX.current;
    if (Math.abs(dx) > 50) go(dx < 0 ? i + 1 : i - 1);
    startX.current = null;
  };

  return (
    <div className="gen-wrap">
      <div
        className="gen-viewport"
        onTouchStart={onDown}
        onTouchEnd={onUp}
        onMouseDown={onDown}
        onMouseUp={onUp}
      >
        <div className="gen-track" style={{ transform: `translateX(-${i * 100}%)` }}>
          {SEASONS.map((s, idx) => (
            <div className={`gen-cell ${idx === i ? "is-active" : ""}`} key={idx} aria-hidden={idx !== i}>
              <Slide s={s} />
            </div>
          ))}
        </div>
      </div>

      <div className="gen-controls">
        <button
          type="button"
          className="gen-btn"
          onClick={() => go(i - 1)}
          disabled={i === 0}
          aria-label="Previous season"
        >
          <span className="gen-chev gen-chev-left" aria-hidden="true"></span>
          Prev
        </button>

        <div className="gen-dots" role="tablist" aria-label="Seasons">
          {SEASONS.map((s, idx) => (
            <button
              key={idx}
              type="button"
              className={`gen-dot ${idx === i ? "is-active" : ""}`}
              onClick={() => go(idx)}
              aria-label={s.eyebrow}
              aria-selected={idx === i}
              role="tab"
            ></button>
          ))}
          <span className="gen-count">{i + 1} / {n}</span>
        </div>

        <button
          type="button"
          className="gen-btn"
          onClick={() => go(i + 1)}
          disabled={i === n - 1}
          aria-label="Next season"
        >
          Next
          <span className="gen-chev gen-chev-right" aria-hidden="true"></span>
        </button>
      </div>

      <p className="gen-footnote">
        The ancestry doubles every generation. From Season 3, each box names the
        significant parents rather than the full recombination.
      </p>
    </div>
  );
}

window.Genealogy = Genealogy;

function GenealogySection() {
  return (
    <section className="gen-section" data-screen-label="Breeding genealogy">
      <Genealogy />
    </section>
  );
}
window.GenealogySection = GenealogySection;

if (document.getElementById("gen-root")) {
  const root = ReactDOM.createRoot(document.getElementById("gen-root"));
  root.render(
    <div className="stage frame-desktop">
      <div className="site">
        <GenealogySection />
      </div>
    </div>
  );
}