import { Placeholder } from "@/components/ui/Placeholder";

export function AboutSanihome() {
  return (
    <section className="border-y border-red-light bg-gradient-to-br from-red-light/40 via-surface to-background py-12 md:py-16">
      <div className="mx-auto max-w-7xl px-4">
        <div className="grid items-center gap-8 md:grid-cols-2">
          <div className="animate-fade-up">
            <div className="mb-4 flex flex-wrap items-baseline gap-x-3 gap-y-1">
              <h2 className="text-2xl font-bold text-red-dark md:text-3xl">
                درباره سانی‌هوم
              </h2>
              <span
                className="font-display text-sm font-semibold tracking-wide text-red-dark/30 uppercase md:text-base"
                lang="en"
                dir="ltr"
              >
                About Sanihome
              </span>
            </div>
            <p className="mb-4 leading-relaxed text-muted">
              سانی‌هوم از سال ۱۳۹۰ به عنوان یکی از معتبرترین فروشگاه‌های آنلاین لوازم
              خانگی در ایران فعالیت می‌کند. ما با ارائه محصولات اصل از برندهای
              معتبر جهانی، گارانتی رسمی و خدمات پس از فروش، تجربه‌ای مطمئن برای
              خرید لوازم خانگی فراهم کرده‌ایم.
            </p>
            <p className="mb-6 leading-relaxed text-muted">
              تیم متخصص ما آماده مشاوره رایگان، ارسال سریع به سراسر کشور و
              نصب حرفه‌ای در محل شماست.
            </p>
            <div className="grid grid-cols-3 gap-4">
              {[
                { value: "+15", label: "سال تجربه" },
                { value: "+50K", label: "مشتری راضی" },
                { value: "+200", label: "برند معتبر" },
              ].map((stat) => (
                <div key={stat.label} className="rounded-xl border border-border bg-surface p-4 text-center">
                  <p className="font-display text-xl font-bold tracking-tight text-red-dark" lang="en" dir="ltr">
                    {stat.value}
                  </p>
                  <p className="mt-1 text-xs text-muted">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>
          <Placeholder
            src="/images/about.svg"
            alt="درباره سانی‌هوم"
            width="100%"
            height="360px"
            label="560×360"
            className="w-full rounded-2xl"
          />
        </div>
      </div>
    </section>
  );
}