// Home page — centered chooser between Papers and Projects.

const { useState, useEffect, useRef, useMemo } = React;

function Tile({ to, kana, label, count, blurb, items }) {
  const [hover, setHover] = useState(false);
  return (
    <a
      className={`tile ${hover ? "is-hover" : ""}`}
      href={to}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="tile__top">
        <span className="tile__count">{String(count).padStart(2, "0")}</span>
        <span className="tile__label">{label}</span>
      </div>

      <div className="tile__center">
        <div className="tile__kana serif">{kana}</div>
      </div>

      <div className="tile__preview">
        {items.slice(0, 3).map((it, i) => (
          <div className="tile__row" key={i}>
            <span className="tile__rowDot" />
            <span className="tile__rowText">{it}</span>
          </div>
        ))}
      </div>

      <div className="tile__bottom">
        <span className="tile__blurb">{blurb}</span>
        <span className={`tile__arrow ${hover ? "is-hover" : ""}`}>→</span>
      </div>
    </a>
  );
}

function Portrait() {
  // Check whether portrait.jpg exists in the project; only render <img> if it does.
  // Until then, show a styled placeholder with no network request.
  const [src, setSrc] = useState(null);
  useEffect(() => {
    const probe = new Image();
    probe.onload = () => setSrc("portrait.jpg");
    probe.onerror = () => setSrc(null);
    probe.src = "portrait.jpg";
  }, []);

  return (
    <div className={`portrait__frame ${!src ? "portrait__frame--placeholder" : ""}`}>
      {src && <img className="portrait__img" src={src} alt="Sam McLeod" />}
      <div className="portrait__placeholderText">
        <span>SM</span>
        <small>drop portrait.jpg in project root</small>
      </div>
      <div className="portrait__corner portrait__corner--tl" />
      <div className="portrait__corner portrait__corner--tr" />
      <div className="portrait__corner portrait__corner--bl" />
      <div className="portrait__corner portrait__corner--br" />
    </div>
  );
}

function Home() {
  const { PAPERS, PROJECTS, SOCIALS } = window.SITE_DATA;

  const paperPreview = PAPERS.slice(0, 3).map((p) => p.title);
  const projectPreview = PROJECTS.slice(0, 3).map((p) => `${p.name} — ${p.tag}`);

  return (
    <div className="page page--home">
      <SharedTweaks />
      <SiteHeader here="home" />

      <main className="home">
        <Reveal delay={80}>
          <h1 className="home__title">
            <span>Sam McLeod</span>
          </h1>
        </Reveal>

        <Reveal delay={140}>
          <p className="home__tagline">
              Student / Builder / Writer
          </p>
        </Reveal>

        <Reveal delay={200}>
          <div className="portrait">
            <Portrait />
          </div>
        </Reveal>

        <Reveal delay={280}>
          <div className="chooser">
            <Tile
              to="papers.html"
              kana="papers."
              label=""
              count={PAPERS.length}
              blurb="undegraduate papers"
              items={paperPreview}
            />
            <div className="chooser__divider" aria-hidden="true">
              <span>or</span>
            </div>
            <Tile
              to="projects.html"
              kana="projects."
              label=""
              count={PROJECTS.length}
              blurb="tools I've shipped"
              items={projectPreview}
            />
          </div>
        </Reveal>

        <Reveal delay={360}>
          <div className="home__socials">
            {SOCIALS.map((s) => (
              <a key={s.label} href={s.href} className="home__social">
                <span className="home__socialL">{s.label}</span>
                <span className="home__socialH">{s.handle}</span>
              </a>
            ))}
          </div>
        </Reveal>
      </main>

      <SiteFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Home />);