"use client";

import Image from "next/image";
import { MapPin, Phone, Mail, Clock, ArrowUpRight, Globe, Building2 } from "lucide-react";
import { motion } from "framer-motion";
import { SectionHeading } from "@/components/ui/section-heading";
import { ContactForm } from "@/components/sections/contact-form";
import { siteConfig } from "@/lib/utils";
import { useLanguage } from "@/components/language-provider";

export function ContactSection() {
  const { t } = useLanguage();

  const items = [
    {
      icon: MapPin,
      label: t.contact.details.address,
      value: `${siteConfig.address.street}, ${siteConfig.address.postalCode} ${siteConfig.address.city}`,
    },
    {
      icon: Phone,
      label: t.contact.details.phone,
      value: siteConfig.phoneDisplay,
      href: `tel:${siteConfig.phone}`,
    },
    {
      icon: Mail,
      label: t.contact.details.email,
      value: siteConfig.email,
      href: `mailto:${siteConfig.email}`,
    },
    {
      icon: Globe,
      label: "Web",
      value: siteConfig.web,
      href: `https://${siteConfig.web}`,
    },
    {
      icon: Clock,
      label: t.contact.details.hours,
      value: t.contact.details.hoursValue,
    },
  ];

  return (
    <section id="contact" className="relative section-padding overflow-hidden bg-white">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-grid-steel bg-[size:48px_48px] opacity-30 [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"
      />
      <div className="container-wide relative">
        <SectionHeading
          eyebrow={t.contact.eyebrow}
          title={t.contact.title}
          description={t.contact.description}
          align="center"
        />

        {/*
          Equal-height layout:
          - `lg:items-stretch` (default for grid) lets children fill the row
          - both children use `h-full flex flex-col` to distribute internal content
        */}
        <div className="mt-14 grid grid-cols-1 items-stretch gap-8 lg:grid-cols-2">
          {/* Form */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-80px" }}
            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
            className="flex h-full"
          >
            <div className="flex-1">
              <ContactForm />
            </div>
          </motion.div>

          {/* Details */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-80px" }}
            transition={{ duration: 0.6, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
            className="relative flex h-full flex-col overflow-hidden rounded-2xl border border-steel-100 bg-steel-900 text-white shadow-[0_30px_80px_-40px_rgba(15,26,42,0.4)]"
          >
            {/* Top photo — fixed height keeps proportions across breakpoints */}
            <div className="relative h-48 shrink-0 sm:h-52">
              <Image
                src="/images/client/slika3.jpg"
                alt={t.contact.details.title}
                fill
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-steel-900 via-steel-900/40 to-transparent" />
              <div className="absolute bottom-4 left-6 right-6">
                <div className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/[0.08] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-white backdrop-blur">
                  <Building2 className="h-3.5 w-3.5" />
                  {siteConfig.address.city}, BiH
                </div>
              </div>
            </div>

            {/* Body — uses flex-col + mt-auto on the last card so the response
                chip sits at the bottom, matching the submit button on the form */}
            <div className="flex flex-1 flex-col gap-6 p-6 sm:p-8">
              <header className="border-b border-white/10 pb-5">
                <h3 className="font-display text-xl font-semibold text-white">
                  {t.contact.details.title}
                </h3>
                <p className="mt-1.5 text-sm leading-relaxed text-white/65">
                  {t.contact.details.intro}
                </p>
              </header>

              <ul className="flex flex-1 flex-col gap-1.5">
                {items.map((item, i) => (
                  <motion.li
                    key={item.label}
                    initial={{ opacity: 0, x: -8 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true, margin: "-40px" }}
                    transition={{ duration: 0.4, delay: i * 0.05 }}
                  >
                    {item.href ? (
                      <a
                        href={item.href}
                        target={item.href.startsWith("http") ? "_blank" : undefined}
                        rel={item.href.startsWith("http") ? "noopener noreferrer" : undefined}
                        className="group flex items-start gap-4 rounded-xl px-3 py-2.5 transition-colors hover:bg-white/[0.04]"
                      >
                        <ContactRow item={item} />
                      </a>
                    ) : (
                      <div className="flex items-start gap-4 px-3 py-2.5">
                        <ContactRow item={item} />
                      </div>
                    )}
                  </motion.li>
                ))}
              </ul>

              <div className="mt-auto rounded-xl border border-white/10 bg-white/[0.04] p-4 backdrop-blur-sm">
                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/55">
                  Response time
                </div>
                <div className="mt-1.5 flex items-center gap-2">
                  <span className="relative flex h-2 w-2">
                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
                    <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400" />
                  </span>
                  <div className="font-display text-base font-semibold text-white">
                    Within 1 business day
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function ContactRow({
  item,
}: {
  item: {
    icon: React.ComponentType<{ className?: string }>;
    label: string;
    value: string;
    href?: string;
  };
}) {
  const Icon = item.icon;
  return (
    <>
      <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/[0.06] text-white transition-colors group-hover:bg-white/10">
        <Icon className="h-4 w-4" />
      </span>
      <div className="min-w-0 flex-1">
        <div className="text-[11px] font-semibold uppercase tracking-wider text-white/45">
          {item.label}
        </div>
        <div className="mt-0.5 flex items-center gap-1.5 text-sm font-medium text-white">
          <span className="truncate">{item.value}</span>
          {item.href && (
            <ArrowUpRight className="h-3.5 w-3.5 shrink-0 text-white/40 transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-white" />
          )}
        </div>
      </div>
    </>
  );
}

export function FullWidthMap() {
  const { t } = useLanguage();
  const q = encodeURIComponent(
    `${siteConfig.address.street}, ${siteConfig.address.postalCode} ${siteConfig.address.city}, ${siteConfig.address.country}`
  );

  return (
    <section className="relative w-full">
      <div className="absolute left-1/2 top-8 z-10 -translate-x-1/2 px-4">
        <div className="rounded-full border border-white/30 bg-white/95 px-5 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-steel-900 shadow-[0_10px_30px_-10px_rgba(15,26,42,0.3)] backdrop-blur">
          {t.contact.mapLabel}
        </div>
      </div>
      <iframe
        title={`Steel-Tech location — ${siteConfig.address.city}, ${siteConfig.address.country}`}
        src={`https://www.google.com/maps?q=${q}&output=embed`}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        className="h-[420px] w-full border-0 sm:h-[500px] lg:h-[560px]"
      />
    </section>
  );
}