/* ============================================================
   HOME / INDEX
   Horizontal carousel of project plates + giant fixed wordmark.
   Toggle to a list/index view.
   ============================================================ */
function Home({ go, mutedMap, toggleMute }) {
  const { PROJECTS, Plate } = window;
  const [view, setView] = useState("carousel"); // carousel | list
  const [hovered, setHovered] = useState(null);
  const scrollerRef = useRef(null);

  // wheel -> horizontal in carousel
  useEffect(() => {
    const el = scrollerRef.current;
    if (!el || view !== "carousel") return;
    const onWheel = (e) => {
      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
        el.scrollLeft += e.deltaY;
        e.preventDefault();
      }
    };
    el.addEventListener("wheel", onWheel, { passive: false });
    return () => el.removeEventListener("wheel", onWheel);
  }, [view]);

  return (
    <div className={"home " + (view === "carousel" ? "home-carousel" : "home-list")}>
      {/* ---- top media row ---- */}
      {view === "carousel" ? (
        <div className="home-scroller h-scroll" ref={scrollerRef}>
          <div className="home-track">
            {PROJECTS.map((p, i) => (
              <div
                key={p.slug}
                className="home-card"
                role="button"
                tabIndex={0}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => go({ page: "case", slug: p.slug })}
                onKeyDown={(e) => { if (e.key === "Enter") go({ page: "case", slug: p.slug }); }}
                style={{ width: i % 3 === 2 ? "30vw" : "20vw" }}
              >
                <div className="home-card-head">
                  <span className="home-card-title">{p.title}</span>
                  <span className="label">[{p.kind.toUpperCase()}]</span>
                </div>
                <Plate
                  tint={p.tint}
                  label={p.cover}
                  corner={"(" + p.year + ")"}
                  video={p.video}
                  muted={mutedMap[p.slug] !== false}
                  onUnmute={() => toggleMute(p.slug)}
                  className="home-card-plate"
                />
              </div>
            ))}
            <div className="home-track-end">
              <span className="label">[ {PROJECTS.length} projects ]</span>
              <span className="label">scroll →</span>
            </div>
          </div>
        </div>
      ) : (
        <ListView go={go} hovered={hovered} setHovered={setHovered} />
      )}

      {/* ---- bottom bar: toggle + location ---- */}
      <div className="home-bar page">
        <div className="home-toggle">
          <button className={view === "carousel" ? "on" : ""} onClick={() => setView("carousel")}>Carousel</button>
          <span className="sep">,</span>
          <button className={view === "list" ? "on" : ""} onClick={() => setView("list")}>List</button>
        </div>
        <Clock />
      </div>

      {/* ---- giant wordmark ---- */}
      <WordMark dim={view === "list"} />
    </div>
  );
}

/* ---------- list / index view ---------- */
function ListView({ go, hovered, setHovered }) {
  const { PROJECTS, Plate } = window;
  return (
    <div className="list-view page">
      <div className="list-head">
        <span className="tag">[ Index ]</span>
        <span className="tag">Selected work — 2022/2024</span>
      </div>
      <div className="list-rows">
        {PROJECTS.map((p, i) => (
          <button
            key={p.slug}
            className="list-row"
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
            onClick={() => go({ page: "case", slug: p.slug })}
          >
            <span className="list-idx mono">{String(i + 1).padStart(2, "0")}</span>
            <span className="list-title">{p.title}</span>
            <span className="list-role label">{p.role}</span>
            <span className="list-kind label">[{p.kind.toUpperCase()}]</span>
            <span className="list-year year">({p.year})</span>
            <span className="list-arw"><window.ArrowDiag/></span>
            {/* hover preview */}
            <span className="list-prev" aria-hidden="true">
              <Plate tint={p.tint} label={p.cover} className="list-prev-plate" />
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ---------- giant wordmark ---------- */
function WordMark({ dim }) {
  return (
    <div className={"wordmark" + (dim ? " dim" : "")} aria-hidden="true">
      <span className="wm-1">DYLAN</span>
      <span className="wm-2 serif">Jeppesen</span>
    </div>
  );
}

/* ---------- live clock ---------- */
function Clock() {
  const [t, setT] = useState("");
  useEffect(() => {
    const tick = () => {
      const now = new Date();
      const opts = { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, timeZone: "Europe/Copenhagen" };
      setT(new Intl.DateTimeFormat("en-GB", opts).format(now));
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  return <div className="home-loc"><span>Birkerød, Denmark</span> <span className="mono">{t}</span></div>;
}

Object.assign(window, { Home });