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

export default function About() {
  return (
    <section id="about" className="py-16 sm:py-20 bg-surface">
      <Container className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12">
        <div className="relative aspect-[4/3] rounded-3xl overflow-hidden shadow-xl order-2 lg:order-1">
          <Image
            src="/images/hero-2.jpg"
            alt="محصولات آراد آریسمان"
            fill
            className="object-cover object-left"
            sizes="(min-width: 1024px) 45vw, 90vw"
          />
        </div>

        <div className="order-1 lg:order-2 text-center lg:text-start">
          <span className="text-sm font-bold text-accent">درباره ما</span>
          <h2 className="mt-3 text-3xl sm:text-4xl font-extrabold text-primary">
            آراد آریسمان
          </h2>
          <p className="mt-6 leading-8 text-foreground">
            شرکت آراد آریسمان پیشرو در تولید و عرضه افزودنی‌های خوراک، ویتامین‌ها و
            مکمل‌های غذایی دام و طیور با بیش از ۲۳ سال فعالیت در بازار ایران می‌باشد.
            واردات این شرکت عمدتا از تولیدکنندگان معتبر بین‌المللی غذای دام و طیور از
            کشورهای انگلستان، فرانسه، ترکیه، هندوستان و چین می‌باشد.
          </p>
          <div className="mt-8 flex justify-center lg:justify-start gap-10">
            <div>
              <div className="text-3xl font-extrabold text-primary">۲۳+</div>
              <div className="mt-1 text-sm text-foreground">سال تجربه</div>
            </div>
            <div>
              <div className="text-3xl font-extrabold text-primary">۲۳۰+</div>
              <div className="mt-1 text-sm text-foreground">رضایت مشتری</div>
            </div>
            <div>
              <div className="text-3xl font-extrabold text-primary">۵</div>
              <div className="mt-1 text-sm text-foreground">کشور واردات</div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}
