"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { AMENITIES_CONTENT } from "@/config/siteContent";

export default function Amenities() {
  const [activeTab, setActiveTab] = useState<"exterior" | "interior" | "dimensions">("exterior");

  return (
    <section id="amenities" className="py-24 bg-[#0a0a0c] text-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 lg:px-12">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          
          {/* Left Column Text & Bullet Specs */}
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.3 }}
            className="lg:col-span-5 space-y-8"
          >
            <div>
              <h2 className="text-4xl sm:text-5xl font-black font-serif tracking-tight text-white mb-6">
                {AMENITIES_CONTENT.titlePrefix} <span className="text-gold-gradient font-serif">{AMENITIES_CONTENT.titleHighlight}</span>
              </h2>
              <p className="text-zinc-400 text-sm sm:text-base leading-relaxed font-normal">
                {AMENITIES_CONTENT.description}
              </p>
            </div>

            {/* Key Features List */}
            <div className="grid grid-cols-2 gap-y-6 gap-x-4 pt-4 border-t border-zinc-800">
              {AMENITIES_CONTENT.amenitiesList.map((item, idx) => (
                <div key={idx} className="space-y-1">
                  <p className="text-sm font-semibold text-zinc-200 flex items-center gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-[#c5a059] inline-block" />
                    {item.label}
                  </p>
                  <p className="text-xs text-[#e5c158] font-mono font-bold pl-3">
                    {item.value}
                  </p>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Right Column Image & Tab Controls */}
          <motion.div 
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.3 }}
            className="lg:col-span-7 space-y-6"
          >
            {/* Tabs */}
            <div className="flex items-center gap-8 border-b border-zinc-800 pb-3 text-xs sm:text-sm font-bold uppercase tracking-wider">
              <button
                onClick={() => setActiveTab("exterior")}
                className={`pb-3 transition relative ${
                  activeTab === "exterior" ? "text-white font-extrabold" : "text-zinc-500 hover:text-zinc-300"
                }`}
              >
                Exterior Details
                {activeTab === "exterior" && (
                  <motion.div layoutId="amenityTabLine" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#c5a059]" />
                )}
              </button>

              <button
                onClick={() => setActiveTab("interior")}
                className={`pb-3 transition relative ${
                  activeTab === "interior" ? "text-white font-extrabold" : "text-zinc-500 hover:text-zinc-300"
                }`}
              >
                Interior Details
                {activeTab === "interior" && (
                  <motion.div layoutId="amenityTabLine" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#c5a059]" />
                )}
              </button>

              <button
                onClick={() => setActiveTab("dimensions")}
                className={`pb-3 transition relative ${
                  activeTab === "dimensions" ? "text-white font-extrabold" : "text-zinc-500 hover:text-zinc-300"
                }`}
              >
                Room Dimensions
                {activeTab === "dimensions" && (
                  <motion.div layoutId="amenityTabLine" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#c5a059]" />
                )}
              </button>
            </div>

            {/* Tab Content Box */}
            <div className="relative rounded-2xl overflow-hidden shadow-2xl border border-zinc-800 min-h-[380px] sm:min-h-[460px]">
              <AnimatePresence mode="wait">
                <motion.div
                  key={activeTab}
                  initial={{ opacity: 0, scale: 0.99 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.99 }}
                  transition={{ duration: 0.2 }}
                  className="absolute inset-0"
                >
                  <img
                    src={AMENITIES_CONTENT.tabs[activeTab].image}
                    alt={AMENITIES_CONTENT.tabs[activeTab].title}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent flex flex-col justify-end p-6 sm:p-8">
                    <h3 className="text-xl sm:text-2xl font-bold font-serif text-white mb-2">
                      {AMENITIES_CONTENT.tabs[activeTab].title}
                    </h3>
                    <p className="text-xs sm:text-sm text-zinc-300 max-w-xl font-normal leading-relaxed">
                      {AMENITIES_CONTENT.tabs[activeTab].desc}
                    </p>
                  </div>
                </motion.div>
              </AnimatePresence>
            </div>

          </motion.div>

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