import { 
  Globe2, Ticket, CalendarDays, ShieldCheck, 
  Settings, GitMerge, Waypoints, Award, Heart, Lightbulb, Armchair,
  PlayCircle, Mail, ArrowRight, Phone
} from "lucide-react";
import { TeamSlider } from "@/components/about-us/TeamSlider";
import { getSiteSettings } from "@/lib/site-settings";
import { prisma } from "@/lib/prisma";
import Link from "next/link";
import { getTranslations } from "next-intl/server";

export default async function AboutUsPage() {
  const [siteSetting, teamMembers, t] = await Promise.all([
    getSiteSettings(),
    prisma.teamMember.findMany({ orderBy: { sortOrder: "asc" } }),
    getTranslations("AboutUs"),
  ]);

  const statsData = [
    { icon: Globe2, value: t('stats.travelers'), label: t('stats.travelersLabel') },
    { icon: Ticket, value: t('stats.packages'), label: t('stats.packagesLabel') },
    { icon: CalendarDays, value: t('stats.events'), label: t('stats.eventsLabel') },
    { icon: ShieldCheck, value: t('stats.satisfaction'), label: t('stats.satisfactionLabel') },
  ];

  const featuresData = [
    { icon: Settings, title: t('story.features.experienced'), desc: t('story.features.experiencedDesc') },
    { icon: ShieldCheck, title: t('story.features.trusted'), desc: t('story.features.trustedDesc') },
    { icon: Waypoints, title: t('story.features.flexible'), desc: t('story.features.flexibleDesc') },
  ];

  const valuesData = [
    { icon: ShieldCheck, title: t('values.integrity'), desc: t('values.integrityDesc') },
    { icon: Armchair, title: t('values.comfort'), desc: t('values.comfortDesc') },
    { icon: Lightbulb, title: t('values.innovation'), desc: t('values.innovationDesc') },
    { icon: Award, title: t('values.quality'), desc: t('values.qualityDesc') },
    { icon: Heart, title: t('values.satisfaction'), desc: t('values.satisfactionDesc') },
  ];

  return (
    <>
      {/* Hero Section */}
      <section className="relative pt-24 pb-32 flex items-center min-h-[60vh] md:min-h-[70vh]">
        {/* Background Image with Gradient Overlay */}
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1544644181-1484b3fdfc62?auto=format&fit=crop&w=2000&q=80" 
            alt="Pura Ulun Danu Beratan"
            className="w-full h-full object-cover object-[center_30%]"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" />
        </div>
        
        <div className="relative z-10 mx-auto w-full max-w-[1300px] px-4 sm:px-6">
          <div className="max-w-2xl">
            <p className="text-xs 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.2] mb-6 text-white">
              {t('title1')}<br />
              <span className="text-[#d32f2f]">{t('title2')}</span>
            </h1>
            <p className="text-base text-white/80 mb-8 max-w-lg leading-relaxed">
              {t('heroDesc')}
            </p>
            
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-6 mt-8">
              {/* Avatars */}
              <div className="flex items-center gap-4">
                <div className="flex -space-x-3">
                  <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80" alt="Traveler" className="w-10 h-10 rounded-full border-2 border-black" />
                  <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=100&q=80" alt="Traveler" className="w-10 h-10 rounded-full border-2 border-black" />
                  <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=100&q=80" alt="Traveler" className="w-10 h-10 rounded-full border-2 border-black" />
                </div>
                <div>
                  <p className="text-sm font-bold text-white">{t('travelerTrust')}</p>
                  <p className="text-xs text-white/70">{t('travelerTrustDesc')}</p>
                </div>
              </div>

              <div className="hidden sm:block w-px h-10 bg-white/20"></div>

              {/* Play Button */}
              <button className="flex items-center gap-3 group">
                <div className="w-10 h-10 rounded-full bg-[#d32f2f] flex items-center justify-center transition-transform group-hover:scale-110">
                  <PlayCircle className="w-5 h-5 text-white" fill="white" />
                </div>
                <div className="text-left">
                  <p className="text-sm font-bold text-white group-hover:text-red-200 transition-colors">{t('watchVideo')}</p>
                  <p className="text-xs text-white/70">{t('watchVideoDesc')}</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Floating Stats Bar */}
      <section className="relative z-20 -mt-16 mx-auto max-w-[1300px] px-4 sm:px-6">
        <div className="bg-white rounded-3xl shadow-xl border border-gray-100 p-6 md:p-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 divide-x-0 lg:divide-x divide-gray-100">
            {statsData.map((stat, idx) => (
              <div key={idx} className="flex items-center gap-4 lg:justify-center">
                <div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center shrink-0">
                  <stat.icon className="w-6 h-6 text-[#d32f2f]" strokeWidth={1.5} />
                </div>
                <div>
                  <p className="text-xl md:text-2xl font-black text-slate-900 leading-none mb-1">
                    {stat.value}
                  </p>
                  <p className="text-[13px] text-gray-500 font-medium">
                    {stat.label}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Our Story Section */}
      <section className="bg-white py-24">
        <div className="mx-auto max-w-[1300px] px-4 sm:px-6">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            {/* Left: Images Collage (Col span 5) */}
            <div className="lg:col-span-5 relative h-[500px] w-full">
              {/* Main tall image */}
              <div className="absolute left-0 top-0 w-[55%] h-[70%] rounded-[30px] overflow-hidden shadow-lg z-10">
                <img src="https://images.unsplash.com/photo-1577717903315-1691ae25ab3f?auto=format&fit=crop&w=600&q=80" alt="Nusa Penida" className="w-full h-full object-cover" />
              </div>
              {/* Top right image */}
              <div className="absolute right-0 top-0 w-[40%] h-[32%] rounded-[20px] overflow-hidden shadow-lg z-10">
                <img src="https://images.unsplash.com/photo-1518002054494-3a6f94352e9d?auto=format&fit=crop&w=400&q=80" alt="Borobudur" className="w-full h-full object-cover" />
              </div>
              {/* Bottom right image */}
              <div className="absolute right-0 bottom-[10%] w-[65%] h-[45%] rounded-[30px] overflow-hidden shadow-lg z-10">
                <img src="https://images.unsplash.com/photo-1588668214407-6ea9a6d8c272?auto=format&fit=crop&w=600&q=80" alt="Bromo" className="w-full h-full object-cover" />
              </div>
              
              {/* Floating Badge */}
              <div className="absolute -left-6 bottom-20 z-20 bg-[#981b1b] rounded-2xl p-4 text-center shadow-xl w-32">
                <p className="text-white/80 text-xs mb-1">{t('story.badge1')}</p>
                <p className="text-white text-3xl font-black leading-none mb-2">{t('story.badge2')}</p>
                <div className="w-8 h-px bg-white/30 mx-auto mb-2"></div>
                <p className="text-white text-[10px] leading-tight">{t('story.badge3')}<br/>{t('story.badge4')}</p>
              </div>

              {/* Decorative dotted path (simplified via SVG) */}
              <svg className="absolute -left-10 top-1/2 -z-0 w-32 h-32 text-red-200" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="4 4">
                <path d="M0 100 Q 50 50 100 0" />
              </svg>
            </div>

            {/* Middle: Text Content (Col span 4) */}
            <div className="lg:col-span-4 lg:px-4">
              <p className="text-[11px] font-bold tracking-[0.2em] text-[#d32f2f] uppercase mb-4">
                {t('story.subtitle')}
              </p>
              <h2 className="text-3xl md:text-4xl font-bold text-slate-900 leading-tight mb-6">
                {t('story.title')}
              </h2>
              <p className="text-[14px] text-gray-600 leading-relaxed mb-8">
                {t('story.desc')}
              </p>
              <Link
                href="/contact"
                className="inline-flex items-center gap-2 bg-[#d32f2f] text-white px-6 py-3.5 rounded-xl font-bold text-sm hover:bg-[#b72727] transition-colors shadow-md"
              >
                {t('story.button')} <ArrowRight className="w-4 h-4" />
              </Link>
            </div>

            {/* Right: Features List (Col span 3) */}
            <div className="lg:col-span-3 flex flex-col gap-8">
              {featuresData.map((feature, idx) => (
                <div key={idx} className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center shrink-0 mt-1">
                    <feature.icon className="w-5 h-5 text-[#d32f2f]" strokeWidth={1.5} />
                  </div>
                  <div>
                    <h3 className="text-[15px] font-bold text-slate-900 mb-1">{feature.title}</h3>
                    <p className="text-[13px] text-gray-500 leading-relaxed">{feature.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Values Section */}
      <section className="bg-slate-50 py-24">
        <div className="mx-auto max-w-[1300px] px-4 sm:px-6">
          <div className="text-center mb-12">
            <h2 className="text-[13px] font-bold tracking-[0.2em] text-[#d32f2f] uppercase">
              {t('valuesTitle')}
            </h2>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
            {valuesData.map((val, idx) => (
              <div
                key={idx}
                className="bg-white rounded-3xl p-8 text-center shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] hover:shadow-xl transition-all group flex flex-col items-center"
              >
                <div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mb-6 group-hover:bg-[#d32f2f] transition-colors">
                  <val.icon className="w-5 h-5 text-[#d32f2f] group-hover:text-white transition-colors" strokeWidth={1.5} />
                </div>
                <h3 className="font-bold text-[15px] text-slate-900 mb-3">
                  {val.title}
                </h3>
                <p className="text-[13px] text-gray-500 leading-relaxed">
                  {val.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tim Profesional */}
      <section className="bg-white py-24">
        <div className="mx-auto max-w-[1300px] px-4 sm:px-6">
          <TeamSlider team={teamMembers} title={t('teamTitle')} desc={t('teamDesc')} />
        </div>
      </section>

      {/* CTA Banner */}
      <section className="bg-white pb-24">
        <div className="mx-auto max-w-[1300px] px-4 sm:px-6">
          <div className="bg-[#8a1919] rounded-[30px] overflow-hidden relative shadow-2xl p-10 md:p-14 flex flex-col md:flex-row items-center justify-between gap-10">
            {/* Background Texture/Pattern */}
            <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/black-scales.png')] opacity-20 mix-blend-overlay z-0" />
            <div className="absolute right-0 bottom-0 opacity-10 z-0 transform translate-x-1/4 translate-y-1/4">
              <svg width="400" height="400" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M50 0L100 50L50 100L0 50L50 0Z" fill="currentColor"/>
              </svg>
            </div>
            
            <div className="relative z-10 w-full md:w-auto text-center md:text-left">
              <h3 className="text-3xl md:text-4xl font-bold text-white mb-3">
                {t('ctaTitle')}
              </h3>
              <p className="text-white/80 text-base">
                {t('ctaDesc')}
              </p>
            </div>

            <div className="relative z-10 flex flex-col sm:flex-row items-center gap-4 w-full md:w-auto shrink-0">
              <Link
                href="/tour"
                className="w-full sm:w-auto bg-white text-[#d32f2f] px-8 py-4 rounded-xl font-bold text-sm hover:bg-gray-50 transition-colors shadow-lg flex items-center justify-center gap-2"
              >
                {t('ctaTour')} <ArrowRight className="w-4 h-4" />
              </Link>
              <Link
                href="/contact"
                className="w-full sm:w-auto border border-white/30 bg-[#741515]/50 backdrop-blur-sm text-white px-8 py-4 rounded-xl font-bold text-sm hover:bg-[#741515] transition-colors shadow-lg flex items-center justify-center gap-2"
              >
                {t('ctaContact')} <Phone className="w-4 h-4" fill="currentColor" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}