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

import aboutImage from "@/assets/images/about/about.jpg";
import { Reveal } from "@/components/Reveal";
import { about, site, stats } from "@/data/site";

export function About() {
  return (
    <section id="about" className="relative overflow-hidden bg-paper py-16 lg:py-28">
      {/* Oversized watermark, mirrored to sit at the outer edge in RTL. */}
      <span
        aria-hidden="true"
        className="latin pointer-events-none absolute -top-4 -left-8 hidden text-[11rem] leading-none font-bold text-ink/[0.035] select-none lg:block"
      >
        RAOOFI
      </span>

      <div className="mx-auto max-w-[1400px] px-5 lg:px-10">
        <div className="grid items-center gap-14 lg:grid-cols-2 lg:gap-20">
          <Reveal className="order-2 lg:order-1">
            <div className="group relative">
              <div className="relative aspect-[4/3] overflow-hidden">
                <Image
                  src={aboutImage}
                  alt="نمای پروژه‌های گروه ساختمانی رئوفی"
                  fill
                  quality={88}
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  placeholder="blur"
                  className="object-cover transition-transform duration-[1200ms] ease-out-soft group-hover:scale-105"
                />
              </div>

              {/* Gold frame offset behind the photo. */}
              <div
                aria-hidden="true"
                className="pointer-events-none absolute -bottom-5 -left-5 -z-10 hidden h-full w-full border border-gold/45 lg:block"
              />

              <div className="absolute -bottom-px right-0 bg-paper py-5 pe-0 ps-6">
                <span className="latin text-xs tracking-[0.36em] text-gold">
                  {site.taglineLatin}
                </span>
              </div>
            </div>
          </Reveal>

          <div className="order-1 lg:order-2">
            <Reveal>
              <p className="kicker mb-7">{about.kicker}</p>
            </Reveal>

            <Reveal delay={90}>
              <h2 className="text-[1.625rem] leading-[1.3] font-extrabold whitespace-nowrap text-ink lg:text-[2.625rem]">
                {about.titleTop} <span className="text-gold">{about.titleBottom}</span>
              </h2>
            </Reveal>

            <Reveal delay={170}>
              <p className="mt-8 border-e-2 border-gold pe-5 text-xl leading-relaxed font-light text-ink-2 lg:text-2xl">
                {about.lead}
              </p>
            </Reveal>

            <Reveal delay={240}>
              <p className="mt-7 text-[1.02rem] leading-[2.15] text-muted">{about.body}</p>
            </Reveal>

            <Reveal delay={310}>
              <p className="mt-7 text-lg leading-relaxed text-ink-2">{about.closing}</p>
            </Reveal>

            <Reveal delay={380}>
              <Link
                href="/aboutus"
                className="group mt-10 inline-flex items-center gap-3 border-b border-gold pb-2 text-ink transition-colors duration-300 hover:text-gold"
              >
                {about.cta}
                <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>
        </div>

        {/* Key numbers */}
        <div className="mt-24 grid grid-cols-2 gap-px border border-line bg-line lg:mt-32 lg:grid-cols-4">
          {stats.map((stat, i) => (
            <Reveal key={stat.label} delay={i * 90} className="bg-paper">
              <div className="px-6 py-10 text-center lg:px-8 lg:py-12">
                <span className="latin block text-[0.62rem] tracking-[0.34em] text-gold">
                  {stat.latin}
                </span>
                <span className="mt-4 block text-4xl font-extrabold text-ink lg:text-5xl">
                  {stat.value}
                </span>
                <span className="mt-3 block text-sm text-muted">{stat.label}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}