import Image from "next/image";
import Container from "./Container";

export default function Hero() {
  return (
    <section className="relative overflow-hidden bg-surface">
      <Container className="grid grid-cols-1 lg:grid-cols-2 items-center gap-10 py-14 lg:py-0">
        <div className="relative order-2 lg:order-1 lg:h-[560px] flex items-end">
          <div className="relative w-full aspect-[4/3] lg:aspect-auto lg:h-[480px] rounded-3xl overflow-hidden shadow-xl">
            <Image
              src="/images/hero-1.jpg"
              alt="محصولات آراد آریسمان در مزرعه گندم"
              fill
              priority
              className="object-cover object-left"
              sizes="(min-width: 1024px) 45vw, 90vw"
            />
          </div>

          <div className="absolute bottom-6 -start-2 sm:start-2 flex gap-3">
            <div className="flex flex-col justify-center gap-1 rounded-2xl bg-secondary/70 backdrop-blur px-5 py-4 text-white min-w-[140px]">
              <span className="text-xs font-bold text-accent">۰۱</span>
              <span className="text-sm font-semibold leading-6">
                مکملــی
                <br />
                مطمئن
              </span>
            </div>
            <div className="flex flex-col justify-center gap-1 rounded-2xl bg-primary/80 backdrop-blur px-5 py-4 text-white min-w-[150px]">
              <span className="text-xs font-bold text-accent">۰۲</span>
              <span className="text-sm font-semibold leading-6">
                تغذیه‌ای
                <br />
                کامل
              </span>
            </div>
          </div>
        </div>

        <div className="order-1 lg:order-2 text-center lg:text-start">
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-primary leading-[1.15]">
            آراد آریسمان
          </h1>
          <p className="mt-5 text-lg sm:text-xl text-foreground max-w-md mx-auto lg:mx-0">
            قدرت رشد، از دل تغذیه سالم
          </p>
          <div className="mt-8 flex flex-wrap justify-center lg:justify-start gap-4">
            <a
              href="#products"
              className="rounded-full bg-primary px-7 py-3.5 text-white font-semibold hover:bg-primary-dark transition-colors"
            >
              مشاهده محصولات
            </a>
            <a
              href="#about"
              className="rounded-full border border-primary/30 px-7 py-3.5 text-primary font-semibold hover:bg-primary/5 transition-colors"
            >
              درباره ما
            </a>
          </div>
        </div>
      </Container>
    </section>
  );
}
