import { MapPin, Phone, Clock, Instagram } from "lucide-react";
import { siteContent } from "@/data/content";
import { BRAND } from "@/lib/constants";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";

export function Contact() {
  const { contact } = siteContent;

  return (
    <section id="contact" className="relative section-padding bg-neutral-50 dark:bg-[#050505]">
      <div className="section-divider absolute top-0 left-0 right-0" />
      <div className="section-container grid items-start gap-12 lg:grid-cols-2">
        <Reveal>
          <SectionHeading>{contact.title}</SectionHeading>

          <div className="mt-10 space-y-5">
            {contact.addresses.map((address, i) => (
              <div key={i} className="group flex items-center gap-4">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
                  <MapPin size={18} />
                </div>
                <p className="body-text">{address}</p>
              </div>
            ))}

            <div className="group flex items-center gap-4">
              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
                <Phone size={18} />
              </div>
              <a
                href={`tel:${contact.phone}`}
                className="text-neutral-600 transition-colors hover:text-rose-600 dark:text-neutral-400 dark:hover:text-rose-400"
              >
                {contact.phone}
              </a>
            </div>

            <div className="group flex items-center gap-4">
              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
                <Clock size={18} />
              </div>
              <p className="body-text">{contact.workingHours}</p>
            </div>

            <div className="border-t border-neutral-200 pt-5 dark:border-white/[0.06]">
              <div className="group flex items-center gap-4">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
                  <Instagram size={18} />
                </div>
                <a
                  href={contact.instagram}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-neutral-600 transition-colors hover:text-rose-600 dark:text-neutral-400 dark:hover:text-rose-400"
                >
                  {BRAND.instagramHandle}
                </a>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal>
          <div className="overflow-hidden rounded-2xl border border-neutral-200 shadow-sm dark:border-white/[0.06] dark:shadow-[0_0_30px_rgba(225,29,72,0.05)]">
            <iframe
              src={contact.mapEmbedUrl}
              width="100%"
              height="380"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              title="Карта"
            />
          </div>
        </Reveal>
      </div>
    </section>
  );
}
