import { MapPin, Phone, QrCode } from "lucide-react";
import Image from "next/image";
import { business } from "@/config/business";
import type { Messages } from "@/messages";
import AnimatedSection from "./AnimatedSection";
import PhysicsButton from "./PhysicsButton";

export default function ContactSection({ t, whatsappUrl }: { t: Messages; whatsappUrl: string }) {
  return (
    <AnimatedSection id="contact" className="px-4 py-20 sm:px-6">
      <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[1.08fr_0.92fr]">
        <div className="rounded-[3rem] bg-white p-8 shadow-glass sm:p-12">
          <p className="mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-optical/75">{t.contact.eyebrow}</p>
          <h2 className="text-4xl font-semibold tracking-[-0.055em] text-ink sm:text-6xl">{t.contact.title}</h2>
          <p className="mt-6 max-w-2xl text-base leading-8 text-ink/62 sm:text-lg">{t.contact.body}</p>
          <div className="mt-9 flex flex-col gap-3 sm:flex-row">
            <PhysicsButton href={whatsappUrl} external className="rounded-full bg-ink px-7 py-4 text-sm font-semibold text-white shadow-soft transition-colors hover:bg-optical">
              {t.contact.whatsapp}
            </PhysicsButton>
            <PhysicsButton href={`tel:${business.phone}`} className="rounded-full border border-ink/10 bg-smoke px-7 py-4 text-sm font-semibold text-ink transition-colors hover:bg-white">
              {t.contact.call}
            </PhysicsButton>
            <PhysicsButton href={business.mapUrl} external className="rounded-full border border-ink/10 bg-smoke px-7 py-4 text-sm font-semibold text-ink transition-colors hover:bg-white">
              {t.contact.visit}
            </PhysicsButton>
          </div>

          <div className="mt-10 grid gap-4 sm:grid-cols-2">
            <Info label={t.contact.phoneLabel} value={business.phone} icon={<Phone size={18} />} />
            <Info label={t.contact.whatsappLabel} value={business.whatsapp} icon={<Phone size={18} />} />
            <Info label={t.contact.addressLabel} value={business.displayAddress} icon={<MapPin size={18} />} wide />
            <Info label={t.contact.hoursLabel} value={t.contact.hoursValue} icon={<QrCode size={18} />} />
          </div>
        </div>

        <div className="glass liquidGL-pane flex flex-col justify-between rounded-[3rem] p-7">
          <div className="relative z-[3] aspect-square overflow-hidden rounded-[2.2rem] bg-white p-8 shadow-sm">
            <span className="floating-sheen" />
            <Image src={business.assets.mapQr} alt={t.contact.qr} fill sizes="(min-width: 1024px) 38vw, 90vw" className="object-contain p-10" />
          </div>
          <div className="relative z-[3] mt-6 rounded-[2rem] bg-white/70 p-6">
            <p className="text-sm font-semibold text-ink">{t.contact.qr}</p>
            <p className="mt-3 text-sm leading-7 text-ink/58">{business.displayAddress}</p>
          </div>
        </div>
      </div>
    </AnimatedSection>
  );
}

function Info({ label, value, icon, wide = false }: { label: string; value: string; icon: React.ReactNode; wide?: boolean }) {
  return (
    <div className={`rounded-[1.6rem] border border-ink/8 bg-smoke/80 p-5 ${wide ? "sm:col-span-2" : ""}`}>
      <div className="mb-3 flex items-center gap-2 text-optical">
        {icon}
        <p className="text-xs font-semibold uppercase tracking-[0.18em]">{label}</p>
      </div>
      <p className="text-sm font-semibold leading-7 text-ink/72">{value}</p>
    </div>
  );
}