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

import { cn } from "@/lib/utils";

interface Contact7Props {
  title?: string;
  description?: string;
  emailLabel?: string;
  emailDescription?: string;
  email?: string;
  officeLabel?: string;
  officeDescription?: string;
  officeAddress?: string;
  phoneLabel?: string;
  phoneDescription?: string;
  phone?: string;
  chatLabel?: string;
  chatDescription?: string;
  chatLink?: string;
  className?: string;
}

const Contact7 = ({
  title = "راه‌های ارتباط با تیم فروش",
  description = "برای دمو CRM، پشتیبانی محصول یا جلسه حضوری، کانال موردنظرتان را انتخاب کنید.",
  emailLabel = "ایمیل",
  emailDescription = "برای درخواست دمو یا سؤال درباره پلن‌ها ایمیل بزنید؛ در روزهای کاری حداکثر تا ۲۴ ساعت پاسخ می‌دهیم.",
  email = "hello@example.com",
  officeLabel = "دفتر",
  officeDescription = "جلسه معرفی محصول را با هماهنگی قبلی در دفتر تهران برگزار کنید.",
  officeAddress = "تهران، خیابان ولیعصر",
  phoneLabel = "تلفن",
  phoneDescription = "مشاوره تلفنی فروش، روزهای کاری از ۹ تا ۱۷.",
  phone = "۲۱-۱۲۳۴۵۶۷۸",
  chatLabel = "چت زنده",
  chatDescription = "برای راهنمایی فوری درباره CRM با پشتیبانی محصول گفتگو کنید.",
  chatLink = "شروع چت پشتیبانی",
  className,
}: Contact7Props) => {
  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">
            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
              {title}
            </h1>
            <p className="text-muted-foreground">{description}</p>
          </div>
          <div className="grid gap-6 md:grid-cols-2">
            <div className="rounded-xl bg-muted/50 p-8">
              <Mail className="mb-4 size-5 text-muted-foreground" />
              <p className="mb-1 font-medium">{emailLabel}</p>
              <p className="mb-4 text-sm text-muted-foreground">
                {emailDescription}
              </p>
              <a
                href={`mailto:${email}`}
                className="hover:underline"
                dir="rtl"
              >
                {email}
              </a>
            </div>
            <div className="rounded-xl bg-muted/50 p-8">
              <MapPin className="mb-4 size-5 text-muted-foreground" />
              <p className="mb-1 font-medium">{officeLabel}</p>
              <p className="mb-4 text-sm text-muted-foreground">
                {officeDescription}
              </p>
              <a href="#" className="hover:underline">
                {officeAddress}
              </a>
            </div>
            <div className="rounded-xl bg-muted/50 p-8">
              <Phone className="mb-4 size-5 text-muted-foreground" />
              <p className="mb-1 font-medium">{phoneLabel}</p>
              <p className="mb-4 text-sm text-muted-foreground">
                {phoneDescription}
              </p>
              <a href={`tel:${phone}`} className="hover:underline" dir="rtl">
                {phone}
              </a>
            </div>
            <div className="rounded-xl bg-muted/50 p-8">
              <MessageCircle className="mb-4 size-5 text-muted-foreground" />
              <p className="mb-1 font-medium">{chatLabel}</p>
              <p className="mb-4 text-sm text-muted-foreground">
                {chatDescription}
              </p>
              <a href="#" className="hover:underline">
                {chatLink}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact7 };