import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import Container from "@/components/Container";
import PageBanner from "@/components/PageBanner";
import MissionVision from "@/components/MissionVision";
import Features from "@/components/Features";
import { pageMetadata } from "@/lib/seo";
import {
  getResolvedBusinessContact,
  phoneTelHref,
} from "@/lib/meshkee";

export const metadata: Metadata = pageMetadata({
  title: "درباره ما | آراد اَریسمان",
  description:
    "آشنایی با شرکت آراد اَریسمان؛ بیش از ۲۳ سال تجربه در تولید و عرضه مکمل‌های غذایی دام، طیور و زنبور عسل.",
  path: "/about",
});

export default async function AboutPage() {
  const contact = await getResolvedBusinessContact();
  const phone = contact.primaryPhone;

  return (
    <>
      <PageBanner
        title="درباره آراد اَریسمان"
        subtitle="بیش از دو دهه تجربه در تولید و عرضه مکمل‌های غذایی دام، طیور و زنبور عسل"
        breadcrumb="درباره ما"
      />

      <section className="py-16 sm:py-20">
        <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 bg-secondary order-2 lg:order-1">
            <Image
              src="/images/stats-banner.jpg"
              alt=""
              fill
              className="object-cover scale-110 blur-[6px]"
              sizes="(min-width: 1024px) 45vw, 90vw"
              aria-hidden
            />
            <div className="absolute inset-0 bg-primary-dark/45" aria-hidden />
            <div className="absolute inset-0 flex items-center justify-center p-10">
              <Image
                src="/images/footer-logo.png"
                alt="آراد اَریسمان"
                width={220}
                height={62}
                className="relative z-10 h-auto w-44 sm:w-52 drop-shadow-lg"
                priority
              />
            </div>
          </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>
            <p className="mt-4 leading-8 text-foreground">
              در طول این سال‌ها، تمرکز اصلی ما بر تضمین کیفیت، ثبات ترکیبات و پاسخگویی
              به نیاز واقعی دامداران، مرغداران و پرورش‌دهندگان زنبور عسل بوده است؛
              نتیجه‌ی این رویکرد، اعتماد پایدار بیش از ۲۳۰ مشتری در سراسر کشور است.
            </p>

            <div className="mt-8 flex justify-center lg:justify-start">
              <div className="inline-flex items-center gap-4 sm:gap-5">
                <div className="shrink-0 text-center lg:text-start">
                  <p className="text-4xl sm:text-5xl font-extrabold tracking-tight leading-none text-primary">
                    ۱۴ سال
                  </p>
                  <p
                    dir="ltr"
                    className="mt-1.5 font-display text-xs sm:text-sm font-medium tracking-[0.06em] text-primary/55"
                  >
                    14 years of experience
                  </p>
                </div>
                <div
                  className="hidden sm:block h-12 w-px shrink-0 bg-primary/20"
                  aria-hidden
                />
                <p className="text-sm sm:text-base font-medium leading-7 text-foreground text-start">
                  تولید تخصصی محصولات
                  <br />
                  مکمل دام و طیور
                </p>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <MissionVision />

      <section className="bg-surface">
        <Container className="pt-16 sm:pt-20 text-center max-w-xl mx-auto">
          <span className="text-sm font-bold text-accent">چرا آراد اَریسمان</span>
          <h2 className="mt-3 text-3xl sm:text-4xl font-extrabold text-primary">
            مزایای مکمل‌های آراد اَریسمان
          </h2>
        </Container>
        <Features />
      </section>

      <section className="py-16 sm:py-20">
        <Container>
          <div className="rounded-3xl bg-primary px-8 py-14 sm:px-16 text-center">
            <h2 className="text-2xl sm:text-3xl font-extrabold text-white">
              برای مشاوره و خرید محصولات همین حالا با ما در تماس باشید
            </h2>
            <p className="mt-4 text-white/80 max-w-xl mx-auto">
              کارشناسان آراد اَریسمان آماده پاسخگویی به سوالات شما درباره مکمل‌ها و
              نحوه مصرف آن‌ها هستند.
            </p>
            <div className="mt-8 flex flex-wrap justify-center gap-4">
              <Link
                href="/contact"
                className="rounded-full bg-white px-7 py-3.5 text-primary font-semibold hover:bg-white/90 transition-colors"
              >
                تماس با ما
              </Link>
              {phone ? (
                <a
                  href={phoneTelHref(phone.number)}
                  dir="ltr"
                  className="rounded-full border border-white/30 px-7 py-3.5 text-white font-semibold hover:bg-white/10 transition-colors"
                >
                  {phone.number}
                </a>
              ) : null}
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}