import { MapPin, Phone, Mail, Clock, HeadphonesIcon, ShieldCheck, HeartHandshake, Lock, Map as MapIcon, ChevronDown, ArrowRight } from "lucide-react";
import { ContactForm } from "@/components/contact/ContactForm";
import { getSiteSettings } from "@/lib/site-settings";
import Link from "next/link";
import { getTranslations } from "next-intl/server";

export default async function ContactPage() {
  const [siteSetting, t] = await Promise.all([
    getSiteSettings(),
    getTranslations("Contact"),
  ]);

  const infoItems = [
    {
      icon: MapPin,
      labelKey: "address",
      value: siteSetting?.contactAddress || "Jl. Contoh No. 123, Kebayoran Baru\nJakarta Selatan 12120\nIndonesia",
      actionKey: "mapAction",
      link: siteSetting?.contactMapUrl || "#",
    },
    {
      icon: Phone,
      labelKey: "phone",
      value: siteSetting?.contactPhone || "+62 812-3456-7890\n+62 21-1234-5678",
      actionKey: "callAction",
      link: siteSetting?.contactPhone ? `tel:${siteSetting.contactPhone}` : "#",
    },
    {
      icon: Mail,
      labelKey: "email",
      value: siteSetting?.contactEmail || "info@ranatatour.com\ncs@ranatatour.com",
      actionKey: "emailAction",
      link: siteSetting?.contactEmail ? `mailto:${siteSetting.contactEmail}` : "#",
    },
    {
      icon: Clock,
      labelKey: "hours",
      value: siteSetting?.contactHours || "Senin - Jumat: 08.00 - 17.00 WIB\nSabtu: 08.00 - 13.00 WIB\nMinggu & Hari Libur: Tutup",
      actionKey: "",
      link: "",
    },
  ];

  const advantages = [
    { icon: HeadphonesIcon, titleKey: "fastTitle", descKey: "fastDesc" },
    { icon: ShieldCheck, titleKey: "accurateTitle", descKey: "accurateDesc" },
    { icon: HeartHandshake, titleKey: "friendlyTitle", descKey: "friendlyDesc" },
    { icon: Lock, titleKey: "safeTitle", descKey: "safeDesc" },
  ];

  return (
    <>
      {/* Custom Hero Section */}
      <section className="relative pt-24 pb-20 flex items-center overflow-hidden min-h-[450px]">
        {/* Background Image with Dark Overlay */}
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1423666639041-f56000c27a9a?auto=format&fit=crop&w=1600&q=80" 
            alt="Traveler"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/70 to-black/30" />
        </div>
        
        <div className="relative z-10 mx-auto w-full max-w-[1300px] px-4 sm:px-6">
          <div className="max-w-2xl mb-12">
            <p className="text-[11px] font-bold tracking-[0.2em] text-[#d32f2f] uppercase mb-4">
              {t('subtitle')}
            </p>
            <h1 className="text-4xl md:text-5xl lg:text-[56px] font-bold leading-[1.15] mb-6 text-white">
              {t('title1')}<br />
              <span className="text-[#d32f2f]">{t('title2')}</span>
            </h1>
            <p className="text-base text-white/80 max-w-lg leading-relaxed">
              {t('heroDesc')}
            </p>
          </div>

          {/* Advantages Row */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-8 border-t border-white/10">
            {advantages.map((adv, idx) => (
              <div key={idx} className="flex items-start gap-4">
                <adv.icon className="w-6 h-6 text-[#d32f2f] shrink-0 mt-1" strokeWidth={1.5} />
                <div>
                  <h4 className="text-[13px] font-bold text-white mb-1">{t(`adv.${adv.titleKey}`)}</h4>
                  <p className="text-[11px] text-white/60 leading-snug">{t(`adv.${adv.descKey}`)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Main Content Grid */}
      <section className="bg-[#fcf9f6] py-16">
        <div className="mx-auto max-w-[1300px] px-4 sm:px-6">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
            
            {/* Left Column (Info, FAQ, Map) */}
            <div className="lg:col-span-7 space-y-10">
              
              <div>
                <h2 className="text-2xl font-bold text-slate-900 mb-6">{t('info.title')}</h2>
                
                {/* 2x2 Info Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {infoItems.map((item, idx) => (
                    <div key={idx} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col">
                      <div className="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center mb-4">
                        <item.icon className="w-4 h-4 text-[#d32f2f]" />
                      </div>
                      <h3 className="text-[14px] font-bold text-slate-900 mb-2">{t(`info.${item.labelKey}`)}</h3>
                      <p className="text-[13px] text-gray-500 whitespace-pre-line mb-6 flex-1">{item.value}</p>
                      {item.actionKey && (
                        <a href={item.link} className="text-[12px] font-bold text-[#d32f2f] hover:text-[#b71c1c] transition-colors inline-block mt-auto">
                          {t(`info.${item.actionKey}`)}
                        </a>
                      )}
                    </div>
                  ))}
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {/* FAQ Accordion */}
                <div>
                  <h3 className="text-[15px] font-bold text-slate-900 mb-4">{t('faq.title')}</h3>
                  <div className="space-y-3">
                    {[
                      t('faq.q1'),
                      t('faq.q2'),
                      t('faq.q3'),
                      t('faq.q4')
                    ].map((q, idx) => (
                      <div key={idx} className="bg-white border border-gray-100 rounded-xl px-4 py-3 flex items-center justify-between cursor-pointer hover:shadow-sm transition-shadow">
                        <p className="text-[12px] font-bold text-slate-700">{q}</p>
                        <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" />
                      </div>
                    ))}
                  </div>
                </div>

                {/* Floating Map */}
                <div className="relative rounded-2xl overflow-hidden h-[250px] shadow-sm border border-gray-100 group">
                  <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=600&q=80" alt="Map Location" className="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 transition-all duration-500" />
                  
                  {/* Map Pin */}
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#d32f2f] z-10">
                    <MapPin className="w-10 h-10 drop-shadow-md fill-white" />
                  </div>

                  {/* Floating Address Card */}
                  <div className="absolute top-4 left-4 right-4 bg-white/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-gray-100 z-20">
                    <h4 className="text-[13px] font-bold text-slate-900 mb-1">Ranata Tour</h4>
                    <p className="text-[11px] text-gray-500 mb-2">Jl. Contoh No. 123, Kebayoran Baru<br/>Jakarta Selatan 12120</p>
                    <a href={siteSetting?.contactMapUrl || "#"} className="text-[11px] font-bold text-[#d32f2f] hover:underline">
                      Lihat di Google Maps
                    </a>
                  </div>
                </div>
              </div>

            </div>

            {/* Right Column (Form) */}
            <div className="lg:col-span-5">
              <div className="bg-white rounded-3xl p-8 md:p-10 shadow-sm border border-gray-100 sticky top-24">
                <h2 className="text-2xl font-bold text-slate-900 mb-2">{t('form.title')}</h2>
                <p className="text-[13px] text-gray-500 mb-8">{t('form.desc')}</p>
                <ContactForm />
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* WhatsApp CTA Banner */}
      <section className="bg-[#fcf9f6] pb-24">
        <div className="mx-auto max-w-[1300px] px-4 sm:px-6">
          <div className="bg-[#fbeeed] rounded-3xl p-8 flex flex-col md:flex-row items-center justify-between gap-6 border border-red-50 shadow-sm">
            
            <div className="flex items-center gap-5">
              <div className="w-16 h-16 rounded-full bg-[#d32f2f] flex items-center justify-center shrink-0 shadow-md">
                <HeadphonesIcon className="w-8 h-8 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-900 mb-1">{t('whatsapp.title')}</h3>
                <p className="text-[13px] text-gray-600">{t('whatsapp.desc')}</p>
              </div>
            </div>

            <a
              href={`https://wa.me/${siteSetting?.contactPhone?.replace(/[^0-9]/g, "") || "6281234567890"}`}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-white text-slate-900 px-6 py-3.5 rounded-xl font-bold text-[14px] shadow-sm hover:shadow-md transition-all flex items-center gap-3 shrink-0 border border-gray-100"
            >
              <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WA" className="w-5 h-5" />
              {t('whatsapp.button')} <ArrowRight className="w-4 h-4 text-gray-400" />
            </a>

          </div>
        </div>
      </section>
    </>
  );
}