my-app/app/components/Portfolio.tsx

import Image from "next/image";

const projects = [
  {
    title: "Surfers Paradise",
    tags: ["Social Media", "Photography"],
    image: "/portfolio-1.jpg",
    tall: true,
  },
  {
    title: "Cyberpunk Caffe",
    tags: ["Social Media", "Photography"],
    image: "/portfolio-2.jpg",
    tall: false,
  },
  {
    title: "Agency 976",
    tags: ["Social Media", "Photography"],
    image: "/portfolio-3.jpg",
    tall: false,
  },
  {
    title: "Minimal Playground",
    tags: ["Social Media", "Photography"],
    image: "/portfolio-4.jpg",
    tall: true,
  },
];

function ArrowIcon() {
  return (
    <div className="size-8 shrink-0 flex items-center justify-center -rotate-90">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src="/arrow-diagonal.svg" alt="" className="size-8" />
    </div>
  );
}

function ProjectCard({
  title,
  tags,
  image,
  tall,
}: {
  title: string;
  tags: string[];
  image: string;
  tall: boolean;
}) {
  return (
    <div className="flex flex-col gap-[10px]">
      <div
        className={`relative w-full overflow-hidden ${
          tall ? "h-[400px] md:h-[744px]" : "h-[360px] md:h-[699px]"
        }`}
      >
        <Image src={image} alt={title} fill className="object-cover" />
        <div className="absolute bottom-4 left-4 flex gap-3">
          {tags.map((tag) => (
            <span
              key={tag}
              className="backdrop-blur-[10px] bg-white/30 px-2 py-1 rounded-3xl text-sm font-medium text-[#111] tracking-[-0.04em]"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>
      <div className="flex items-center justify-between">
        <p className="font-black text-black uppercase text-[36px] tracking-[-0.04em] leading-[1.1]">
          {title}
        </p>
        <ArrowIcon />
      </div>
    </div>
  );
}

export function Portfolio() {
  return (
    <section className="bg-white px-4 md:px-8 py-20">
      {/* Header */}
      <div className="flex items-start justify-between mb-[61px]">
        <div className="flex items-start gap-3">
          <h2 className="font-light text-black uppercase leading-[0.86] text-[clamp(48px,6.67vw,96px)] tracking-[-0.08em]">
            Selected
            <br />
            Work
          </h2>
          <span className="font-mono text-sm text-[#1f1f1f] leading-[1.1] mt-2">
            004
          </span>
        </div>
        <div className="hidden md:flex h-[110px] items-center justify-center w-4">
          <span className="-rotate-90 whitespace-nowrap font-mono text-sm text-[#1f1f1f] uppercase">
            [ portfolio ]
          </span>
        </div>
      </div>

      {/* Mobile: single column */}
      <div className="flex flex-col gap-10 md:hidden">
        {projects.map((p) => (
          <ProjectCard key={p.title} {...p} />
        ))}
      </div>

      {/* Desktop: two-column */}
      <div className="hidden md:flex gap-6 items-start">
        {/* Left column */}
        <div className="flex-1 flex flex-col gap-10">
          <ProjectCard {...projects[0]} />
          <ProjectCard {...projects[1]} />
          {/* CTA callout */}
          <div className="flex gap-3 items-stretch">
            {/* Left bracket pair */}
            <div className="flex flex-col justify-between w-6 shrink-0">
              <img src="/bracket-tl.svg" alt="" className="w-4 h-4" />
              <img src="/bracket-bl.svg" alt="" className="w-4 h-4 -rotate-90" />
            </div>
            {/* Content */}
            <div className="flex flex-col gap-3 py-3 flex-1">
              <p className="italic text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
                Discover how my creativity transforms ideas into impactful
                digital experiences — schedule a call with me to get started.
              </p>
              <button className="self-start bg-black text-white text-sm font-medium tracking-[-0.04em] px-4 py-3 rounded-3xl">
                Let&apos;s talk
              </button>
            </div>
            {/* Right bracket pair */}
            <div className="flex flex-col justify-between w-6 shrink-0">
              <img src="/bracket-tr.svg" alt="" className="w-4 h-4 rotate-90" />
              <img
                src="/bracket-br.svg"
                alt=""
                className="w-4 h-4 rotate-180"
              />
            </div>
          </div>
        </div>

        {/* Right column (offset down) */}
        <div className="flex-1 flex flex-col gap-[117px] pt-[240px]">
          <ProjectCard {...projects[2]} />
          <ProjectCard {...projects[3]} />
        </div>
      </div>
    </section>
  );
}