import { site } from "@/data/home";
import { images } from "@/data/assets";

export function Hero() {
  return (
    <section className="relative overflow-hidden bg-white">
      <div className="mx-auto grid max-w-7xl items-center gap-8 px-5 pb-12 pt-32 lg:grid-cols-2 lg:gap-10 lg:px-8 lg:pb-16 lg:pt-36">
        <div className="order-2 min-w-0 max-w-xl lg:order-1">
          <p
            className="mb-5 text-sm text-muted"
            style={{ animation: "rise-in 0.9s ease both" }}
          >
            راهکارهای مدرن برای تجارت شما
          </p>

          <h1
            className="mb-4 max-w-[16em] text-[clamp(1.15rem,3.2vw,2rem)] font-normal leading-snug tracking-tight text-ink"
            style={{ animation: "rise-in 1s ease both 0.08s" }}
          >
            {site.fullTitle}
          </h1>

          <p
            className="latin mb-10 text-sm uppercase text-muted md:text-base"
            style={{ animation: "rise-in 1s ease both 0.16s" }}
          >
            {site.taglineEn}
          </p>

          <div
            className="flex flex-wrap items-center gap-4"
            style={{ animation: "rise-in 1s ease both 0.3s" }}
          >
            <a
              href="#services"
              className="btn-primary inline-flex items-center gap-2 rounded-full px-6 py-3.5 text-sm"
            >
              بریم سراغ راه‌کارها
              <span aria-hidden className="text-base leading-none">
                ↓
              </span>
            </a>
            <a
              href={site.phoneHref}
              className="link-hover inline-flex items-center gap-2 text-sm text-ink-soft"
            >
              باهام تماس بگیرید
            </a>
          </div>
        </div>

        <div
          className="order-1 relative mx-auto w-full min-w-0 max-w-sm overflow-hidden sm:max-w-md lg:order-2 lg:max-w-full"
          style={{ animation: "fade-in 1.2s ease both 0.2s" }}
        >
          <div className="pointer-events-none absolute inset-8 rounded-full bg-[radial-gradient(circle,var(--glow),transparent_70%)] blur-2xl" />
          <div className="animate-float relative mx-auto aspect-square w-full max-w-[560px]">
            <img
              src={images.hero}
              alt="تیم تجارت الکترونیک مشکی"
              className="h-full w-full object-contain object-center drop-shadow-[0_30px_60px_rgba(14,17,22,0.14)]"
            />
          </div>
        </div>
      </div>
    </section>
  );
}