import type { Metadata } from "next";
import { Mail, MapPin, Send } from "lucide-react";
import { Container } from "@/components/Container";
import { ContactForm } from "@/components/contact/ContactForm";
import { PageHero } from "@/components/layout/PageHero";
import { Placeholder } from "@/components/Placeholder";
import { branches, phones, site } from "@/lib/data";

export const metadata: Metadata = {
  title: "ارتباط با ما",
  description: "آدرس شعب، تلفن و فرم تماس فروشگاه و تعمیرگاه برادران برقعی در قم.",
};

export default function ContactPage() {
  return (
    <>
      <PageHero kicker="Contact us" title="ارتباط با ما" image="/images/lifestyle/theme-photos-Klby0nxseY8-unsplash.jpg" />

      <section className="py-16 sm:py-20">
        <Container>
          <p className="max-w-2xl text-[16px] leading-8 text-muted">
            مجموعه ی فروشگاه و تعمیرگاه برادران برقعی دارای فعالیت در زمینه های فروش لوازم خانگی، فروش قطعات لوازم خانگی
            و تعمیرات آنها می باشد.
          </p>

          <div className="mt-10 grid gap-5 md:grid-cols-2">
            {branches.map((branch) => (
              <article key={branch.id} className="overflow-hidden rounded-2xl border border-line">
                <div className="relative aspect-[16/7]">
                  <Placeholder src={branch.image} alt={branch.title} className="h-full w-full object-cover" />
                </div>
                <div className="flex gap-3 p-5">
                  <MapPin className="mt-1 size-5 shrink-0 text-brand" />
                  <div>
                    <h2 className="text-[16px] font-bold">{branch.title}</h2>
                    <p className="mt-1 text-[14px] leading-7 text-muted">{branch.address}</p>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </Container>
      </section>

      <section className="bg-paper py-16 sm:py-20">
        <Container className="grid gap-12 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <h2 className="text-[22px] font-bold">تلفن و تلگرام</h2>
            <ul className="mt-6 divide-y divide-line overflow-hidden rounded-2xl border border-line bg-white">
              {phones.map((phone) => (
                <li key={phone.value} className="flex items-center justify-between gap-3 px-4 py-3">
                  <span className="text-[12px] text-muted">{phone.label}</span>
                  <a href={phone.href} className="font-latin text-[16px] font-medium hover:text-brand" dir="ltr">
                    {phone.value}
                  </a>
                </li>
              ))}
            </ul>
            <div className="mt-6 space-y-3 text-[14px]">
              <a href={`mailto:${site.email}`} className="flex items-center gap-2 hover:text-brand">
                <Mail className="size-4 text-brand" />
                {site.emailLabel}
              </a>
              <a
                href={site.telegram}
                target="_blank"
                rel="noreferrer"
                className="flex items-center gap-2 hover:text-brand"
              >
                <Send className="size-4 text-brand" />
                کانال تلگرام borgheeibrothers
              </a>
            </div>
          </div>

          <div className="rounded-2xl bg-white p-6 sm:p-8 lg:col-span-7">
            <h2 className="mb-2 text-[22px] font-bold">پیام ارسال کنید</h2>
            <p className="mb-6 text-[13px] text-muted">نام، شماره و پیام — پاسخ از شعبه قم.</p>
            <ContactForm />
            <div className="mt-8 overflow-hidden rounded-2xl">
              <iframe
                title="موقعیت فروشگاه برادران برقعی"
                src={site.map.embed}
                className="h-[280px] w-full"
                loading="lazy"
              />
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}