// Selected Works — bento grid with hover overlays
const { useState: useStateW } = React;

const WORKS = [
  {
    title: "Automotive Digital Campaign",
    tag: "Motion Design & CGI",
    img: "https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1400&q=80",
    span: "md:col-span-7",
    aspect: "aspect-[16/10]",
  },
  {
    title: "Architecture Brand Experience",
    tag: "Web Design",
    img: "https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=1200&q=80",
    span: "md:col-span-5",
    aspect: "aspect-[4/5]",
  },
  {
    title: "Editorial Content Experience",
    tag: "Content Strategy",
    img: "https://images.unsplash.com/photo-1502764613149-7f1d229e230f?auto=format&fit=crop&w=1200&q=80",
    span: "md:col-span-5",
    aspect: "aspect-[4/5]",
  },
  {
    title: "Brand Identity & Website",
    tag: "Branding & UX",
    img: "https://images.unsplash.com/photo-1561070791-2526d30994b8?auto=format&fit=crop&w=1400&q=80",
    span: "md:col-span-7",
    aspect: "aspect-[16/10]",
  },
];

function SectionHeader({ eyebrow, title, italic, subtext, cta = true }) {
  return (
    <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10 md:mb-14">
      <div className="max-w-xl">
        <div className="flex items-center gap-3 mb-5">
          <span className="w-8 h-px bg-stroke"></span>
          <span className="text-xs text-muted uppercase tracking-[0.3em]">{eyebrow}</span>
        </div>
        <h2 className="text-4xl md:text-5xl lg:text-6xl font-body font-light text-text-primary leading-[1.05] tracking-tight">
          {title}{" "}
          <span className="font-display italic text-text-primary">{italic}</span>
        </h2>
        {subtext && <p className="text-sm md:text-base text-muted mt-5 max-w-md">{subtext}</p>}
      </div>
      {cta && (
        <a
          href="#"
          className="hidden md:inline-flex group relative rounded-full self-end"
        >
          <span className="absolute inset-[-2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity accent-gradient-anim"></span>
          <span className="relative inline-flex items-center rounded-full text-sm px-5 py-3 border border-stroke bg-bg text-text-primary group-hover:border-transparent gap-2 transition-colors">
            View all case studies
            <span className="opacity-70">↗</span>
          </span>
        </a>
      )}
    </div>
  );
}

function WorkCard({ work }) {
  return (
    <a
      href="#"
      className={`group relative block bg-surface border border-stroke rounded-3xl overflow-hidden ${work.span} ${work.aspect}`}
    >
      <img
        src={work.img}
        alt={work.title}
        loading="lazy"
        className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
      />
      <div className="absolute inset-0 halftone opacity-20 mix-blend-multiply pointer-events-none"></div>

      {/* Tag (top-left) */}
      <div className="absolute top-5 left-5 z-10 text-[11px] uppercase tracking-[0.25em] text-text-primary/80 px-3 py-1.5 rounded-full bg-black/40 backdrop-blur-sm border border-white/10">
        {work.tag}
      </div>

      {/* Hover overlay */}
      <div className="absolute inset-0 bg-bg/70 opacity-0 group-hover:opacity-100 transition-opacity duration-500 backdrop-blur-lg flex items-center justify-center">
        <div className="relative inline-flex items-center rounded-full">
          <span className="absolute inset-[-2px] rounded-full accent-gradient-anim"></span>
          <span className="relative inline-flex items-center rounded-full text-sm px-5 py-2.5 bg-white text-bg gap-2">
            View — <span className="font-display italic">{work.title}</span>
          </span>
        </div>
      </div>
    </a>
  );
}

function SelectedWorks() {
  return (
    <section id="works" className="bg-bg py-12 md:py-16">
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16">
        <SectionHeader
          eyebrow="Case Studies"
          title="Featured"
          italic="projects"
          subtext="Explore selected digital experience, web design, creative production and branding projects built to improve visibility, engagement and business performance."
        />
        <div className="grid grid-cols-1 md:grid-cols-12 gap-5 md:gap-6">
          {WORKS.map((w) => (
            <WorkCard key={w.title} work={w} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.SectionHeader = SectionHeader;
window.SelectedWorks = SelectedWorks;