// Projects — the core of the site. Filterable by the five plain categories.
// TODO(Mikky): add live links for Saigonista + social work, real visuals, and the music entry.

const CATEGORIES = ["All", "Websites", "Apps", "Product Design", "Social Media", "Music"];

const CATEGORY_ICON = {
  Websites: "websites",
  Apps: "apps",
  "Product Design": "product",
  "Social Media": "social",
  Music: "music",
};

const PROJECTS = [
  {
    title: "Leoup — Salon Operating System",
    category: "Apps",
    body: "An AI-powered system that runs nail salons — bookings, payments, marketing, and daily numbers in one place. Handles up to 20,000 customers a month across Vienna studios.",
    link: "#",
    linkLabel: "Learn more",
  },
  {
    title: "Iris Fashion — Boutique Website",
    category: "Websites",
    body: "A bilingual website for a Vienna fashion boutique — gallery, contact, and everything a customer needs to walk in the door.",
    link: "https://www.iris-fashion.at",
    linkLabel: "Visit site",
  },
  {
    title: "Saigonista — Restaurant Website",
    category: "Websites",
    body: "A bilingual site for a Vietnamese restaurant — menu, photos, and ordering, built to feel as warm as the food.",
    link: "#",
    linkLabel: "Learn more",
  },
  {
    title: "Salon Dashboards That Make Sense",
    category: "Product Design",
    body: "Designed how salon teams see their day inside Leoup — bookings, payouts, and performance in clear views made for busy people, not spreadsheets.",
    link: "#",
    linkLabel: "See the design",
  },
  {
    title: "Social Campaigns for Beauty Brands",
    category: "Social Media",
    body: "Planning and creating content for Vienna beauty businesses — promos, reels, and seasonal campaigns that bring customers through the door.",
    link: "#",
    linkLabel: "See highlights",
  },
  {
    title: "First Release — In the Works",
    category: "Music",
    body: "Writing and producing at home. The first public release is on its way — my socials will hear it first.",
    link: "#contact",
    linkLabel: "Get notified",
  },
];

function ProjectCard({ project }) {
  const { MaterialIcon, ArrowUpRight, TiltCard } = window;
  return (
    <TiltCard max={7} className="liquid-glass rounded-[1.25rem] p-6 min-h-[320px] h-full flex flex-col">
      {/* Visual placeholder — swap for a real screenshot/cover image */}
      <div className="rounded-[0.75rem] bg-white/5 h-36 flex items-center justify-center relative overflow-hidden">
        <MaterialIcon
          name={CATEGORY_ICON[project.category]}
          className="h-10 w-10 text-white/40"
        />
        <span className="absolute bottom-2 right-3 text-[11px] text-white/50 font-body">
          {project.category}
        </span>
      </div>

      <div className="flex-1"></div>

      <div className="mt-6">
        <h3 className="font-heading italic text-white text-3xl tracking-[-1px] leading-none">
          {project.title}
        </h3>
        <p className="mt-3 text-sm text-white/90 font-body font-light leading-snug max-w-[36ch]">
          {project.body}
        </p>
        <a
          href={project.link}
          {...(project.link.startsWith("http")
            ? { target: "_blank", rel: "noreferrer" }
            : {})}
          className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-white font-body transition-opacity duration-300 hover:opacity-70"
        >
          {project.linkLabel}
          <ArrowUpRight className="h-4 w-4" />
        </a>
      </div>
    </TiltCard>
  );
}

function Projects() {
  const { Reveal, GlowSpot } = window;
  const [active, setActive] = React.useState("All");
  const visible =
    active === "All" ? PROJECTS : PROJECTS.filter((p) => p.category === active);

  return (
    <section id="work" className="relative overflow-hidden px-8 md:px-16 lg:px-20 py-24">
      <GlowSpot className="-top-40 -left-52" size={650} opacity={0.06} />
      <GlowSpot className="bottom-40 -right-64" size={700} opacity={0.05} />

      <Reveal>
        <p className="text-sm font-body text-white/80 mb-6">{"// Selected Work"}</p>
        <h2 className="font-heading italic text-white text-5xl md:text-6xl lg:text-7xl leading-[0.9] tracking-[-3px]">
          Things
          <br />
          I've made
        </h2>
      </Reveal>

      {/* Category filter */}
      <div className="flex flex-wrap gap-2 mt-10">
        {CATEGORIES.map((cat) => (
          <button
            key={cat}
            onClick={() => setActive(cat)}
            className={
              "transition-transform duration-300 hover:scale-105 " +
              (cat === active
                ? "rounded-full bg-white text-black px-4 py-2 text-sm font-medium font-body"
                : "liquid-glass rounded-full px-4 py-2 text-sm font-medium text-white/90 font-body")
            }
          >
            {cat}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
        {visible.map((project, i) => (
          <Reveal key={project.title} delay={i * 0.08} className="h-full">
            <ProjectCard project={project} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.Projects = Projects;