import Image from "next/image";
import Link from "next/link";

import { Reveal } from "@/components/Reveal";
import { news } from "@/data/site";

export function News() {
  return (
    <section id="news" className="bg-sand py-16 lg:py-24">
      <div className="mx-auto max-w-[1400px] px-5 lg:px-10">
        <div className="flex flex-wrap items-end justify-between gap-8">
          <div>
            <Reveal>
              <p className="kicker mb-6">
                <span className="latin">NEWS &amp; ARTICLES</span>
              </p>
            </Reveal>
            <Reveal delay={90}>
              <h2 className="text-[1.625rem] leading-[1.25] font-extrabold whitespace-nowrap text-ink lg:text-[2.625rem]">
                جدیدترین <span className="text-gold">اخبار</span>
              </h2>
            </Reveal>
          </div>

          <Reveal delay={140}>
            <Link
              href="/news"
              className="group flex items-center gap-3 border-b border-ink/20 pb-2 text-ink transition-colors duration-300 hover:border-gold hover:text-gold"
            >
              آرشیو مقالات و اخبار
              <svg
                viewBox="0 0 24 24"
                fill="none"
                aria-hidden="true"
                className="h-4 w-4 text-gold transition-transform duration-300 group-hover:-translate-x-1"
              >
                <path d="M19 12H5m0 0 6-6m-6 6 6 6" stroke="currentColor" strokeWidth="1.6" />
              </svg>
            </Link>
          </Reveal>
        </div>

        <ul className="mt-16 grid gap-8 md:grid-cols-3 lg:gap-10">
          {news.map((item, i) => (
            <Reveal as="li" key={item.slug} delay={i * 110}>
              <Link href={`/news/${item.slug}`} className="group block h-full">
                <article className="flex h-full flex-col bg-paper">
                  <div className="relative aspect-[16/11] overflow-hidden">
                    <Image
                      src={item.image}
                      alt={item.title}
                      fill
                      quality={80}
                      sizes="(max-width: 768px) 100vw, 33vw"
                      placeholder="blur"
                      className="object-cover transition-transform duration-[1100ms] ease-out-soft group-hover:scale-[1.07]"
                    />
                    <div className="absolute inset-0 bg-ink/0 transition-colors duration-500 group-hover:bg-ink/20" />
                  </div>

                  <div className="flex flex-1 flex-col p-7 lg:p-8">
                    <time className="flex items-center gap-2.5 text-[0.8rem] text-muted">
                      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5 text-gold">
                        <rect x="3.5" y="5" width="17" height="15.5" rx="2" stroke="currentColor" strokeWidth="1.4" />
                        <path d="M3.5 10h17M8 3.5V6M16 3.5V6" stroke="currentColor" strokeWidth="1.4" />
                      </svg>
                      {item.date}
                    </time>

                    <h3 className="mt-4 text-[1.22rem] leading-[1.75] font-bold text-ink transition-colors duration-300 group-hover:text-gold">
                      {item.title}
                    </h3>

                    <span className="mt-auto flex items-center gap-2 pt-7 text-sm text-muted transition-colors duration-300 group-hover:text-gold">
                      ادامه مطلب
                      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5 transition-transform duration-300 group-hover:-translate-x-1">
                        <path d="M19 12H5m0 0 6-6m-6 6 6 6" stroke="currentColor" strokeWidth="1.8" />
                      </svg>
                    </span>
                  </div>
                </article>
              </Link>
            </Reveal>
          ))}
        </ul>
      </div>
    </section>
  );
}
