import { ExternalLink, Mail, MapPin, Phone } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Office {
  id: string;
  region: string;
  city: string;
  address: string;
  phone: string;
  email: string;
  mapImage: string;
}

interface Contact24Props {
  title?: string;
  description?: string;
  offices?: Office[];
  className?: string;
}

const Contact24 = ({
  title = "حضور سازمانی در مناطق کلیدی",
  description = "دفاتر منطقه‌ای ما استقرار CRM، پشتیبانی سازمانی و هماهنگی فروش را برای مشتریان enterprise در سراسر جهان پوشش می‌دهند.",
  offices = [
    {
      id: "1",
      region: "خاورمیانه",
      city: "تهران",
      address: "Valiasr St, District 6, Tehran, Iran",
      phone: "۲۱-۱۲۳۴۵۶۷۸",
      email: "tehran@company.com",
      mapImage: "/block-media/shadcnblocks/block/maps/map-2.png",
    },
    {
      id: "2",
      region: "آمریکای شمالی",
      city: "نیویورک",
      address: "350 Fifth Avenue, Suite 4200, New York, NY 10118",
      phone: "+1 (212) 555-0123",
      email: "nyc@company.com",
      mapImage: "/block-media/shadcnblocks/block/maps/map-2.png",
    },
    {
      id: "3",
      region: "اروپا",
      city: "لندن",
      address: "25 Bank Street, Canary Wharf, London E14 5JP",
      phone: "+44 20 7555 0123",
      email: "london@company.com",
      mapImage: "/block-media/shadcnblocks/block/maps/map-3.png",
    },
    {
      id: "4",
      region: "آسیا و اقیانوسیه",
      city: "سنگاپور",
      address: "1 Raffles Place, Tower 2, Singapore 048616",
      phone: "+65 6555 0123",
      email: "singapore@company.com",
      mapImage: "/block-media/shadcnblocks/block/maps/map-4.png",
    },
  ],
  className,
}: Contact24Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-6xl">
          <div className="mb-14 text-center">
            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
              {title}
            </h1>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              {description}
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2">
            {offices.map((office) => (
              <div
                key={office.id}
                className="group overflow-hidden rounded-xl border bg-background"
              >
                <div className="relative h-48 overflow-hidden">
                  <img
                    src={office.mapImage}
                    alt={`نقشه دفتر سازمانی ${office.city}`}
                    className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
                  <div className="absolute bottom-4 start-4">
                    <p className="text-xs font-medium tracking-wider text-muted-foreground">
                      {office.region}
                    </p>
                    <h3 className="text-xl font-semibold">{office.city}</h3>
                  </div>
                </div>

                <div className="p-6">
                  <div className="mb-5 space-y-3 text-sm">
                    <div className="flex items-start gap-3">
                      <MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                      <span dir="rtl" className="text-start">
                        {office.address}
                      </span>
                    </div>
                    <a
                      href={`tel:${office.phone}`}
                      className="flex items-center gap-3 hover:underline"
                      dir="rtl"
                    >
                      <Phone className="size-4 shrink-0 text-muted-foreground" />
                      {office.phone}
                    </a>
                    <a
                      href={`mailto:${office.email}`}
                      className="flex items-center gap-3 hover:underline"
                      dir="rtl"
                    >
                      <Mail className="size-4 shrink-0 text-muted-foreground" />
                      {office.email}
                    </a>
                  </div>

                  <Button variant="outline" className="w-full gap-2">
                    <ExternalLink className="size-4" />
                    مشاهده روی نقشه
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact24 };