import { MetaFunction } from "@remix-run/node";
import { Link, useNavigate } from "@remix-run/react";
import { safeGoBack } from "~/utils/helpers";
import logo from "../assets/logo/SVG-07.svg";
import { Button } from "../components/ui/button";
import { Mail, Phone, MapPin } from "lucide-react";
import HeaderWithSupport from "../components/HeaderWithSupport";

export const meta: MetaFunction = () => {
  const title = "درباره ویترون | پلتفرم خرید آنلاین";
  const description =
    "ویترون یک پلتفرم خرید آنلاین است که با هدف ارائه تجربه‌ای آسان و لذت‌بخش برای کاربران طراحی شده است.";
  const imageUrl =
    "https://vitrownstatics.s3.ir-thr-at1.arvanstorage.ir/SVG-06.svg?versionId=";

  return [
    { title },
    { name: "description", content: description },
    {
      name: "keywords",
      content: "درباره ویترون، معرفی ویترون، پلتفرم خرید آنلاین",
    },
    { name: "robots", content: "index, follow" },

    // Open Graph
    { property: "og:type", content: "website" },
    { property: "og:title", content: title },
    { property: "og:description", content: description },
    { property: "og:image", content: imageUrl },
    { property: "og:site_name", content: "ویترون" },
    { property: "og:locale", content: "fa_IR" },

    // Twitter Card
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:title", content: title },
    { name: "twitter:description", content: description },
    { name: "twitter:image", content: imageUrl },
  ];
};

export default function AboutPage() {
  const navigate = useNavigate();
  const supportPhone =
    typeof window !== "undefined"
      ? window.ENV?.VITE_SUPPORT_PHONE
      : process.env.VITE_SUPPORT_PHONE;

  return (
    <div className="flex flex-col pb-20">
      {/* Header (mobile) */}
      <div className="lg:hidden">
        <HeaderWithSupport
          hideSupportButton={true}
          title="درباره ویترون"
          onBack={() => safeGoBack(navigate)}
        />
      </div>
      {/* Content */}
      <div className="flex flex-col gap-8 p-4 max-w-2xl mx-auto w-full">
        {/* Logo Section */}
        <div className="flex flex-col items-center gap-4 py-8">
          <img src={logo} className="h-20 w-20" alt="ویترون" />
          <h2 className="text-B24 font-bold text-BLACK">ویترون</h2>
          <p className="text-R14 text-GRAY text-center max-w-md">
            پلتفرم خرید آنلاین با تجربه‌ای آسان و لذت‌بخش
          </p>
        </div>

        {/* About Section */}
        <div className="flex flex-col gap-6 bg-WHITE2 rounded-2xl p-6">
          <h3 className="text-B18 font-bold">چرا ویترون؟</h3>
          <div className="flex flex-col gap-4">
            <p className="text-R14 leading-7">
              ویترون یک پلتفرم خرید آنلاین است که با هدف ارائه تجربه‌ای آسان و
              لذت‌بخش برای کاربران طراحی شده است.
            </p>
            <p className="text-R14 leading-7">
              ما به دنبال ارائه بهترین محصولات با کیفیت بالا و قیمت مناسب هستیم.
              هدف ما ایجاد پلی ارتباطی بین فروشندگان معتبر و خریداران است.
            </p>
          </div>
        </div>

        {/* Features Section */}
        <div className="flex flex-col gap-4">
          <h3 className="text-B18 font-bold">ویژگی‌های ویترون</h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="flex flex-col gap-2 bg-WHITE2 rounded-xl p-4">
              <div className="w-10 h-10 rounded-full bg-BLACK/5 flex items-center justify-center">
                <span className="text-2xl">🛍️</span>
              </div>
              <h4 className="text-B14 font-bold">تنوع محصولات</h4>
              <p className="text-R12 text-GRAY">
                دسترسی به هزاران محصول از فروشگاه‌های معتبر
              </p>
            </div>

            <div className="flex flex-col gap-2 bg-WHITE2 rounded-xl p-4">
              <div className="w-10 h-10 rounded-full bg-BLACK/5 flex items-center justify-center">
                <span className="text-2xl">✨</span>
              </div>
              <h4 className="text-B14 font-bold">کیفیت بالا</h4>
              <p className="text-R12 text-GRAY">
                تضمین کیفیت محصولات و خدمات ارائه شده
              </p>
            </div>

            <div className="flex flex-col gap-2 bg-WHITE2 rounded-xl p-4">
              <div className="w-10 h-10 rounded-full bg-BLACK/5 flex items-center justify-center">
                <span className="text-2xl">🚚</span>
              </div>
              <h4 className="text-B14 font-bold">ارسال سریع</h4>
              <p className="text-R12 text-GRAY">
                ارسال سریع و امن محصولات به سراسر کشور
              </p>
            </div>

            <div className="flex flex-col gap-2 bg-WHITE2 rounded-xl p-4">
              <div className="w-10 h-10 rounded-full bg-BLACK/5 flex items-center justify-center">
                <span className="text-2xl">🔒</span>
              </div>
              <h4 className="text-B14 font-bold">خرید امن</h4>
              <p className="text-R12 text-GRAY">
                پرداخت امن و حفاظت از اطلاعات شخصی شما
              </p>
            </div>
          </div>
        </div>

        {/* Contact Section */}
        <div className="flex flex-col gap-4 bg-WHITE2 rounded-2xl p-6">
          <h3 className="text-B18 font-bold">تماس با ما</h3>
          <div className="flex flex-col gap-4">
            {supportPhone && (
              <a
                href={`tel:${supportPhone}`}
                className="flex items-center gap-3 p-4 bg-WHITE rounded-xl hover:bg-WHITE3 transition-colors"
              >
                <div className="w-10 h-10 rounded-full bg-BLACK/5 flex items-center justify-center">
                  <Phone className="w-5 h-5 text-BLACK" />
                </div>
                <div className="flex flex-col">
                  <span className="text-R12 text-GRAY">تلفن پشتیبانی</span>
                  <span className="text-B14 font-bold" dir="ltr">
                    {supportPhone}
                  </span>
                </div>
              </a>
            )}

            <a
              href="mailto:support@vitrown.com"
              className="flex items-center gap-3 p-4 bg-WHITE rounded-xl hover:bg-WHITE3 transition-colors"
            >
              <div className="w-10 h-10 rounded-full bg-BLACK/5 flex items-center justify-center">
                <Mail className="w-5 h-5 text-BLACK" />
              </div>
              <div className="flex flex-col">
                <span className="text-R12 text-GRAY">ایمیل</span>
                <span className="text-B14 font-bold" dir="ltr">
                  support@vitrown.com
                </span>
              </div>
            </a>

            <div className="flex items-center gap-3 p-4 bg-WHITE rounded-xl">
              <div className="w-10 h-10 rounded-full bg-BLACK/5 flex items-center justify-center">
                <MapPin className="w-5 h-5 text-BLACK" />
              </div>
              <div className="flex flex-col">
                <span className="text-R12 text-GRAY">آدرس</span>
                <span className="text-B14 font-bold">تهران، ایران</span>
              </div>
            </div>
          </div>
        </div>

        {/* Trust Badge */}
        <div className="flex flex-col gap-4 items-center py-8">
          <h3 className="text-B16 font-bold">نماد اعتماد الکترونیک</h3>
          <a
            referrerpolicy="origin"
            target="_blank"
            href="https://trustseal.enamad.ir/?id=628394&Code=WdS3WMFYPPrIrzjZc9CKT65rhdGTUgHZ"
          >
            <img
              referrerpolicy="origin"
              src="https://trustseal.enamad.ir/logo.aspx?id=628394&Code=WdS3WMFYPPrIrzjZc9CKT65rhdGTUgHZ"
              alt=""
              code="WdS3WMFYPPrIrzjZc9CKT65rhdGTUgHZ"
            />
          </a>
        </div>

        {/* CTA Section */}
        <div className="flex flex-col gap-4 bg-BLACK text-WHITE rounded-2xl p-6 text-center">
          <h3 className="text-B18 font-bold">آماده شروع خرید هستید؟</h3>
          <p className="text-R14">
            به جمع کاربران راضی ویترون بپیوندید و تجربه خرید آنلاین متفاوت را
            تجربه کنید.
          </p>
          <Link to="/" className="mt-2">
            <Button variant="primary" size="xl" className="w-full">
              شروع خرید
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}