"use client";

import { useState } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "motion/react";
import {
  LayoutTemplate,
  PackageOpen,
  Settings2,
  Globe,
  FolderOpen,
} from "lucide-react";
import { cn } from "@/lib/utils";

const panelFeatures = [
  {
    icon: LayoutTemplate,
    title: "Clean UI",
    desc: "Modern & intuitive interface designed for absolute clarity without distractions. Everything you need, nothing you don't.",
    img: "/asset/images/panel/panel.png",
  },
  {
    icon: PackageOpen,
    title: "1-Click Modpacks",
    desc: "Instantly install thousands of plugins, mods, and complete modpacks with one click. No FTP, no manual upload.",
    img: "https://placehold.co/720x480/0d0d11/3f3f46?text=Modpack+Installer",
  },
  {
    icon: Settings2,
    title: "Startup Editor",
    desc: "Modify Java versions, JVM flags, and startup parameters with complete freedom. Advanced users will love it.",
    img: "https://placehold.co/720x480/0d0d11/3f3f46?text=Startup+Editor",
  },
  {
    icon: Globe,
    title: "Network Manager",
    desc: "Easily manage allocated ports, subdomains, and IP routing configurations across all your servers.",
    img: "https://placehold.co/720x480/0d0d11/3f3f46?text=Network+Manager",
  },
  {
    icon: FolderOpen,
    title: "Advanced Files",
    desc: "Full SFTP access paired with a powerful, built-in web code editor. Edit configs directly in the browser.",
    img: "https://placehold.co/720x480/0d0d11/3f3f46?text=File+Manager",
  },
];

export default function PanelSection() {
  const [active, setActive] = useState(0);

  return (
    <section className="relative w-full py-24 md:py-32 px-6 lg:px-12 overflow-hidden font-sans border-t border-border/80">
      <div
        className="absolute inset-0 opacity-[0.025] pointer-events-none z-0"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
          backgroundSize: "128px 128px",
        }}
      />

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">

          <motion.div
            initial={{ opacity: 0, x: -24 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <div className="flex items-center gap-3 mb-6">
              <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
              <p className="text-xs font-bold text-accent-text uppercase tracking-widest">Server Management</p>
            </div>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-white leading-[1.1] mb-4">
              Full control. <br />
              <span className="text-accent-text">Zero friction.</span>
            </h2>
            <p className="text-content-muted text-[1rem] leading-relaxed mb-10">
              A highly optimised Pterodactyl panel built for speed, security, and effortless server management.
            </p>

            <div className="flex flex-col">
              {panelFeatures.map((feature, idx) => {
                const isActive = active === idx;
                const Icon = feature.icon;
                return (
                  <button
                    key={idx}
                    onClick={() => setActive(idx)}
                    className={cn(
                      "text-left py-5 pl-5 border-l-2 transition-all duration-200",
                      isActive
                        ? "border-accent-hover"
                        : "border-border/80 hover:border-border-hover"
                    )}
                  >
                    <div className="flex items-center gap-2.5">
                      <Icon className={cn(
                        "w-4 h-4 shrink-0 transition-colors duration-200",
                        isActive ? "text-accent-text" : "text-content-subtle"
                      )} />
                      <span className={cn(
                        "text-base font-semibold transition-colors duration-200",
                        isActive ? "text-white" : "text-content-muted hover:text-zinc-300"
                      )}>
                        {feature.title}
                      </span>
                    </div>

                    <AnimatePresence initial={false}>
                      {isActive && (
                        <motion.div
                          initial={{ opacity: 0, height: 0 }}
                          animate={{ opacity: 1, height: "auto" }}
                          exit={{ opacity: 0, height: 0 }}
                          transition={{ duration: 0.25, ease: "easeOut" }}
                          className="overflow-hidden"
                        >
                          <p className="text-sm text-content-dim mt-2.5 leading-relaxed pr-4">
                            {feature.desc}
                          </p>
                          <span className="text-xs font-semibold text-accent-text mt-3 inline-block">
                            Learn more →
                          </span>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </button>
                );
              })}
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 24 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="lg:sticky lg:top-28"
          >
            <div className="rounded-2xl overflow-hidden border border-border/80 bg-surface">
              <AnimatePresence mode="wait">
                <motion.div
                  key={active}
                  initial={{ opacity: 0, y: 12 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -12 }}
                  transition={{ duration: 0.28, ease: "easeOut" }}
                >
                  <Image
                    src={panelFeatures[active].img}
                    alt={panelFeatures[active].title}
                    width={720}
                    height={480}
                    className="w-full h-auto"
                    loading="lazy"
                  />
                </motion.div>
              </AnimatePresence>
            </div>
          </motion.div>

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