import { useLocation } from "wouter";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowRight, Smartphone, Building2 } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useLanguage } from "@/contexts/LanguageContext";

const AppleIcon = () => (
  <svg viewBox="0 0 24 24" className="w-5 h-5 fill-current">
    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
  </svg>
);

const PlayIcon = () => (
  <svg viewBox="0 0 24 24" className="w-5 h-5 fill-current">
    <path d="M3.18 23.76c.3.17.64.22.99.14L14.9 12 3.18.1c-.35-.08-.69-.03-.99.14C1.82.62 1.5 1.33 1.5 2.28v19.44c0 .95.32 1.66.99 2.04zm13.36-10.11L5.83 22.88l9.3-9.3 1.41.07zm2.4-1.57c.44-.25.7-.68.7-1.08s-.26-.83-.69-1.08l-2.43-1.4-1.61 1.61 1.61 1.61 2.42-1.39v-.01zM5.83 1.12l10.71 9.23-1.41 1.41-9.3-9.3V1.12z" />
  </svg>
);

export default function Download() {
  const [, setLocation] = useLocation();
  const { t, isRTL } = useLanguage();

  const apps = [
    {
      id: "customer",
      badge: t.dl_customer_badge,
      badgeColor: "bg-emerald-50 text-emerald-700",
      icon: <Smartphone className="w-6 h-6 text-emerald-600" />,
      iconBg: "bg-emerald-50",
      title: t.dl_customer_title,
      description: t.dl_customer_desc,
      stores: [
        {
          name: t.dl_app_store,
          url: "https://apps.apple.com/ph/app/arakne-%D8%A7%D8%B1%D8%A7%D9%83%D9%86%D9%8A/id6751426922",
          icon: <AppleIcon />,
        },
        {
          name: t.dl_google_play,
          url: "https://play.google.com/store/apps/details?id=com.arakne.customer",
          icon: <PlayIcon />,
        },
      ],
    },
    {
      id: "business",
      badge: t.dl_business_badge,
      badgeColor: "bg-blue-50 text-blue-700",
      icon: <Building2 className="w-6 h-6 text-blue-600" />,
      iconBg: "bg-blue-50",
      title: t.dl_business_title,
      description: t.dl_business_desc,
      stores: [
        {
          name: t.dl_app_store,
          url: "https://apps.apple.com/us/app/arakne-biz-%D8%A7%D8%B1%D8%A7%D9%83%D9%86%D9%8A-%D8%A7%D9%84%D9%85%D8%A4%D8%AC%D8%B1%D9%8A%D9%86/id6751512806",
          icon: <AppleIcon />,
        },
        {
          name: t.dl_google_play,
          url: "https://play.google.com/store/apps/details?id=com.arakne.business",
          icon: <PlayIcon />,
        },
      ],
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      <Navbar />

      <main className="max-w-2xl mx-auto px-4 py-20" dir={isRTL ? "rtl" : "ltr"}>
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-slate-900 mb-3">
            {t.dl_title}
          </h1>
          <p className="text-slate-500 text-lg">{t.dl_subtitle}</p>
        </div>

        {/* App Cards */}
        <div className="flex flex-col gap-5">
          {apps.map((app) => (
            <Card
              key={app.id}
              className="border-0 shadow-sm bg-white/80 backdrop-blur-sm"
            >
              <CardContent className="p-6">
                <div className="flex items-start gap-4 mb-5">
                  <div
                    className={`w-12 h-12 rounded-xl ${app.iconBg} flex items-center justify-center flex-shrink-0`}
                  >
                    {app.icon}
                  </div>
                  <div>
                    <span
                      className={`text-xs font-medium px-2.5 py-1 rounded-full ${app.badgeColor} inline-block mb-1`}
                    >
                      {app.badge}
                    </span>
                    <h2 className="text-xl font-bold text-slate-900 leading-tight">
                      {app.title}
                    </h2>
                    <p className="text-slate-500 text-sm mt-0.5">
                      {app.description}
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-3">
                  {app.stores.map((store) => (
                    <a
                      key={store.name}
                      href={store.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center justify-center gap-2 py-2.5 px-4 rounded-lg border border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 text-slate-700 text-sm font-medium"
                    >
                      {store.icon}
                      {store.name}
                    </a>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Back to home */}
        <div className="text-center mt-10">
          <Button
            variant="ghost"
            onClick={() => setLocation("/")}
            className="text-slate-500 hover:text-slate-700"
          >
            {isRTL ? (
              <>
                <ArrowRight className="w-4 h-4 ml-1 rotate-180" />
                {t.dl_back_home}
              </>
            ) : (
              <>
                {t.dl_back_home}
                <ArrowRight className="w-4 h-4 ml-1" />
              </>
            )}
          </Button>
        </div>
      </main>

      <Footer />
    </div>
  );
}