import Image from "next/image";

const articles = [
  { id: 1, image: "/news-1.jpg", offset: false },
  { id: 2, image: "/news-2.jpg", offset: true },
  { id: 3, image: "/news-3.jpg", offset: false },
];

function ReadMore() {
  return (
    <div className="border-b border-black flex items-center gap-2 py-1 w-fit">
      <span className="font-medium text-sm text-black tracking-[-0.04em]">
        Read more
      </span>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src="/arrow-diagonal.svg"
        alt=""
        className="size-[18px] -rotate-90 shrink-0"
      />
    </div>
  );
}

export function News() {
  return (
    <section className="bg-[#f3f3f3] px-4 md:px-8 py-[120px]">
      {/* Mobile */}
      <div className="md:hidden flex flex-col gap-10">
        <h2 className="font-light text-black text-[clamp(32px,9vw,64px)] tracking-[-0.08em] uppercase leading-[0.86]">
          Keep up with my latest
          <br />
          news &amp; achievements
        </h2>
        <div className="flex flex-col gap-12">
          {articles.map((a) => (
            <div key={a.id} className="flex flex-col gap-4">
              <div className="relative w-full h-[260px] overflow-hidden">
                <Image
                  src={a.image}
                  alt=""
                  fill
                  className="object-cover"
                />
              </div>
              <p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <ReadMore />
            </div>
          ))}
        </div>
      </div>

      {/* Desktop */}
      <div className="hidden md:flex items-end justify-between gap-8">
        {/* Rotated vertical heading */}
        <div className="flex items-center justify-center shrink-0 w-[110px] h-[700px]">
          <div className="-rotate-90 flex-none">
            <div className="font-light text-black text-[64px] tracking-[-0.08em] uppercase whitespace-nowrap leading-[0.86]">
              <p>Keep up with my latest</p>
              <p>news &amp; achievements</p>
            </div>
          </div>
        </div>

        {/* 3 article cards separated by thin vertical lines */}
        <div className="flex-1 flex items-start">
          {/* Card 1 */}
          <div className="flex-1 flex flex-col gap-4 h-[581px]">
            <div className="relative flex-1 overflow-hidden">
              <Image
                src="/news-1.jpg"
                alt=""
                fill
                className="object-cover"
              />
            </div>
            <p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <ReadMore />
          </div>

          {/* Divider */}
          <div className="w-px self-stretch bg-[#1f1f1f] mx-8 shrink-0" />

          {/* Card 2 — offset 120px down */}
          <div className="flex-1 flex flex-col gap-4 pt-[120px]">
            <div className="relative h-[469px] overflow-hidden">
              <Image
                src="/news-2.jpg"
                alt=""
                fill
                className="object-cover"
              />
            </div>
            <p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <ReadMore />
          </div>

          {/* Divider */}
          <div className="w-px self-stretch bg-[#1f1f1f] mx-8 shrink-0" />

          {/* Card 3 */}
          <div className="flex-1 flex flex-col gap-4 h-[581px]">
            <div className="relative flex-1 overflow-hidden">
              <Image
                src="/news-3.jpg"
                alt=""
                fill
                className="object-cover"
              />
            </div>
            <p className="text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3]">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <ReadMore />
          </div>
        </div>
      </div>
    </section>
  );
}