/**
 * "Also check out" — two home-style ProjectTiles + CTA (case study pages, work/).
 * Depends on ../components/tile.jsx (ProjectTile) loaded first.
 */

const { useMemo } = React;

/** Same content as index.html tiles; paths relative to work/*.html */
const HOME_TILES_FOR_CASE_PAGES = [
  {
    tileKey: "nimbus",
    projectLink: "nimbus.html",
    companyName: "Nimbus",
    pillSubline: "The weather app that knows you run cold.",
    headline:
      "Weather apps describe conditions. Nimbus describes what to do about them — for this specific person, on this specific day, in this specific city.",
    heroGifUrl: "../assets/HomeNimbusTile.png",
    backgroundColor: "rgba(120, 195, 210, 0.2)",
  },
  {
    tileKey: "penni",
    projectLink: "penni.html",
    companyName: "Penni",
    pillSubline: "The financial education you should have gotten in school.",
    headline:
      "A financial literacy app designed to meet users at their actual knowledge level and build from there.",
    hoverCaption:
      "A financial literacy app designed to meet users at their actual knowledge level and build from there.",
    heroGifUrl: "../assets/HomePenniTile.png",
    backgroundColor: "rgba(150, 210, 195, 0.2)",
  },
  {
    tileKey: "grab",
    projectLink: "grab-a-seat.html",
    companyName: "Grab a Seat",
    pillSubline: "Infrastructure for Conversational Microenviroments about Sexual Health",
    headline:
      "A board game that transforms uncomfortable conversations into playful learning experiences.",
    hoverCaption:
      "A board game that transforms uncomfortable conversations into playful learning experiences.",
    heroGifUrl: "../assets/HomeHeroTile.png",
    backgroundColor: "rgba(165, 200, 225, 0.2)",
  },
  {
    tileKey: "google",
    projectLink: null,
    companyName: "Road Trips with Google Maps + Gemini",
    pillSubline: "MHCI+D Capstone sponsored by Google Maps",
    headline: "MHCI+D Capstone sponsored by Google Maps",
    heroGifUrl: "../assets/HomeGoogleTile.png",
    heroWide: true,
    showGoogleLogo: false,
    hoverCaption: "Finding Magic On the Road – Coming August 2026!",
    backgroundColor: "rgba(135, 205, 185, 0.2)",
    heroSoftGlass: true,
  },
];

function CaseStudyMoreTiles({ basePath = "../", excludeTileKey }) {
  const ProjectTileComp = typeof ProjectTile !== "undefined" ? ProjectTile : null;

  const picks = useMemo(() => {
    const rest = HOME_TILES_FOR_CASE_PAGES.filter((t) => t.tileKey !== excludeTileKey);
    return rest.slice(0, 2);
  }, [excludeTileKey]);

  const workHref = `${basePath}index.html#work`;

  if (!ProjectTileComp) {
    return (
      <section className="cs-more-tiles" aria-label="More work">
        <p id="cs-more-tiles-caption" className="cs-more-tiles__caption">
          Also check out...
        </p>
        <p className="body-copy" style={{ fontSize: 14, color: "#86868b" }}>
          Enable JavaScript to preview other projects here, or return to the{" "}
          <a href={workHref}>work index</a>.
        </p>
      </section>
    );
  }

  return (
    <section className="cs-more-tiles" aria-labelledby="cs-more-tiles-caption">
      <p id="cs-more-tiles-caption" className="cs-more-tiles__caption">
        Also check out...
      </p>
      <div className="cs-more-tiles__grid">
        {picks.map((props) => (
          <div key={props.tileKey} className="cs-more-tiles__cell">
            <ProjectTileComp {...props} />
          </div>
        ))}
      </div>
      <div className="cs-more-tiles__actions">
        <a href={workHref} className="cs-more-tiles__pill">
          View All Projects
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { CaseStudyMoreTiles });