import Link from "next/link";
import { getBusinessInfo, safe } from "@/lib/api";
import { ShieldIcon, TagIcon, TruckIcon } from "@/components/icons";

const FALLBACK_ABOUT =
  "فروشگاه اینترنتی کودکانه، تولیدکننده و عرضه‌کننده پوشاک بچگانه با جدیدترین طرح‌ها برای نوزادان، دختران و پسران است. تمام محصولات با پارچه‌های نرم و مناسب پوست حساس کودکان تولید می‌شوند و پیش از انتشار در سایت، از نظر کیفیت دوخت و اصالت بررسی می‌شوند تا خیالتان برای انتخاب لباس فرزندتان راحت باشد.";

const points = [
  {
    icon: ShieldIcon,
    title: "ضمانت اصالت کالا",
    desc: "تمامی محصولات پیش از ارسال از نظر کیفیت و اصالت بررسی می‌شوند.",
  },
  {
    icon: TruckIcon,
    title: "ارسال سریع و رایگان",
    desc: "ارسال به سراسر کشور با پیک و پست پیشتاز، رایگان برای خریدهای بالای سقف تعیین‌شده.",
  },
  {
    icon: TagIcon,
    title: "قیمت مناسب و عمده",
    desc: "خرید مستقیم از تولیدی با قیمت رقابتی برای مشتریان خرد و عمده.",
  },
];

export const metadata = {
  title: "درباره ما | کودکانه",
};

export default async function AboutPage() {
  const info = await safe(getBusinessInfo(), null);
  const about = info?.about?.trim() || FALLBACK_ABOUT;
  const vision = info?.vision?.trim();

  return (
    <main className="boxed py-8 md:py-12">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-14 items-center">
        <div className="overflow-hidden rounded-lg border border-line">
          <img
            src="/images/about/about.svg"
            alt=""
            className="w-full aspect-[9/8] object-cover"
          />
        </div>

        <div>
          <span className="font-en text-xs md:text-sm font-semibold tracking-[4px] text-gold-dark uppercase">
            About Us
          </span>
          <h1 className="mt-1.5 text-xl md:text-3xl font-extrabold text-ink">درباره ما</h1>
          <span className="mt-3 block h-[3px] w-14 bg-brand rounded-full" />

          <p className="mt-5 text-sm md:text-[15px] leading-7 md:leading-8 text-body">{about}</p>

          {vision && (
            <>
              <h2 className="mt-6 text-sm md:text-base font-bold text-ink">چشم‌انداز ما</h2>
              <p className="mt-2 text-sm md:text-[15px] leading-7 md:leading-8 text-body">
                {vision}
              </p>
            </>
          )}

          <div className="mt-7 space-y-5">
            {points.map((p) => (
              <div key={p.title} className="flex items-start gap-3.5">
                <span className="flex items-center justify-center size-11 rounded-lg bg-brand-light text-brand shrink-0">
                  <p.icon className="size-5" />
                </span>
                <div>
                  <h3 className="text-sm md:text-[15px] font-bold text-ink">{p.title}</h3>
                  <p className="mt-1 text-xs md:text-sm text-body leading-6">{p.desc}</p>
                </div>
              </div>
            ))}
          </div>

          <Link
            href="/contact"
            className="mt-8 inline-flex items-center rounded-md bg-brand px-6 py-3 text-sm font-bold text-white hover:bg-brand-dark transition-colors"
          >
            تماس با ما
          </Link>
        </div>
      </div>
    </main>
  );
}