import { cn } from '@/lib/utils';
import {
    Clock,
    Coins,
    DoorOpen,
    Flag,
    Flame,
    Gem,
    Infinity as InfinityIcon,
    MapPin,
    Server,
    Shield,
    ShieldCheck,
    Skull,
    Sparkles,
    Star,
    Terminal,
    Ticket,
} from 'lucide-react';
import React, { useState } from 'react';

interface FeatureTab {
    id: string;
    label: string;
    icon: React.ReactNode;
}

interface PanelItem {
    badge?: string;
    icon?: string;
    label: string;
    value?: string;
    highlight?: boolean;
}

interface ZoneCard {
    title: string;
    location: string;
    badge: string;
    badgeColor: string;
    icon: string;
    forText: string;
    mobs: string;
    drops?: { icon: string; label: string }[];
    modes?: { title: string; icon: React.ReactNode; rows: { label: string; value: string; icon?: React.ReactNode }[] }[];
    completionNote?: string;
}

const tabs: FeatureTab[] = [
    { id: 'info', label: 'Server Info', icon: <Server className="h-5 w-5" /> },
    { id: 'buffs', label: 'Buffs', icon: <Shield className="h-5 w-5" /> },
    { id: 'augments', label: 'Augments', icon: <Gem className="h-5 w-5" /> },
    { id: 'enchant', label: 'Enchant', icon: <Star className="h-5 w-5" /> },
    { id: 'custom', label: 'Custom', icon: <Sparkles className="h-5 w-5" /> },
    { id: 'farm', label: 'Farm & Materials', icon: <Coins className="h-5 w-5" /> },
    { id: 'clan', label: 'Clan', icon: <Flag className="h-5 w-5" /> },
    { id: 'commands', label: 'Commands', icon: <Terminal className="h-5 w-5" /> },
];

const serverInfoItems: PanelItem[] = [
    { badge: 'Custom Rates', icon: '/img/icons/exp.png', label: 'Rates', value: 'EXP / SP / DROPS', highlight: true },
    { badge: 'Beginner', icon: '/img/icons/safe.png', label: 'Safe Zone', value: 'Custom Map' },
    { badge: '3 Spots', icon: '/img/icons/easy.png', label: 'Easy Zone', value: 'Monastery of Silence' },
    { badge: 'Advanced', icon: '/img/icons/hard.png', label: 'Hard Zone', value: 'Custom Map' },
    { badge: 'Solo & Party', icon: '/img/icons/Pt.jpg', label: 'Party Zone', value: 'Custom Map' },
    { badge: 'Daily Reset', icon: '/img/icons/Dungeon.jpg', label: 'Dungeon', value: 'Custom Map' },
];

const zoneCards: ZoneCard[] = [
    {
        title: 'Safe Zone',
        location: 'Custom Map',
        badge: 'Beginner',
        badgeColor: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
        icon: '/img/icons/safe.png',
        forText: 'Beginners',
        mobs: 'Wing Guard',
        drops: [{ icon: '/img/icons/FarmStone.jpg', label: 'Farm Stone' }],
    },
    {
        title: 'Easy Zone',
        location: 'Monastery of Silence',
        badge: 'Beginner',
        badgeColor: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
        icon: '/img/icons/easy.png',
        forText: 'Beginners & Tier 1 Gear',
        mobs: 'Flameborn Warrior, Flameborn Shaman',
        drops: [
            { icon: '/img/icons/FarmStone.jpg', label: 'Farm Stone' },
            { icon: '/img/icons/LuckyBag.jpg', label: 'Lucky Bag' },
        ],
    },
    {
        title: 'Hard Zone',
        location: 'Custom Map',
        badge: 'Advanced',
        badgeColor: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
        icon: '/img/icons/hard.png',
        forText: 'Advanced Players & Tier 2 Gear',
        mobs: "Triol's Believer, Hydro Flame Chief",
        drops: [
            { icon: '/img/icons/FarmStone.jpg', label: 'Farm Stone' },
            { icon: '/img/icons/LuckyBag.jpg', label: 'Lucky Bag' },
            { icon: '/img/icons/TattooFeather.jpg', label: 'Tattoo Feather' },
            { icon: '/img/icons/Gold_Crystal.jpg', label: 'Gold Crystal' },
        ],
    },
    {
        title: 'Party Zone',
        location: 'Custom Map',
        badge: 'Party',
        badgeColor: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
        icon: '/img/icons/Pt.jpg',
        forText: 'Min Tier 1 Gear · Party Recommended',
        mobs: 'Cursed Giant',
        drops: [
            { icon: '/img/icons/FarmStone.jpg', label: 'Farm Stone' },
            { icon: '/img/icons/LuckyBag.jpg', label: 'Lucky Bag' },
            { icon: '/img/icons/TattooFeather.jpg', label: 'Tattoo Feather' },
            { icon: '/img/icons/Gold_Crystal.jpg', label: 'Gold Crystal' },
            { icon: '/img/icons/GoldenScrollWeapon.jpg', label: 'Golden Scroll' },
        ],
    },
    {
        title: 'Dungeon',
        location: 'Custom Map',
        badge: 'Dungeon',
        badgeColor: 'bg-red-500/20 text-red-400 border-red-500/30',
        icon: '/img/icons/Dungeon.jpg',
        forText: '',
        mobs: 'Divine Soldier, Cursed Jackpot, Lord Ishka',
        modes: [
            {
                title: 'Normal Mode',
                icon: <DoorOpen className="h-4 w-4" />,
                rows: [
                    { label: 'For', value: 'Min Tier 1 Gear', icon: <ShieldCheck className="h-3 w-3" /> },
                    { label: 'Cooldown', value: '6 Hours per Entry', icon: <Clock className="h-3 w-3" /> },
                ],
            },
            {
                title: 'Advanced Mode',
                icon: <Flame className="h-4 w-4" />,
                rows: [
                    { label: 'Requires', value: '1 Dungeon Card per Entry', icon: <Ticket className="h-3 w-3" /> },
                                                    { label: 'Entries', value: 'Unlimited', icon: <InfinityIcon className="h-3 w-3" /> },
                ],
            },
        ],
        completionNote: 'Completing a dungeon rewards 1 Dungeon Medal',
    },
];

const buffsItems: PanelItem[] = [
    { icon: '/img/icons/Buff.png', label: 'Buff Limit', value: 'No Limit', highlight: true },
    { icon: '/img/icons/Buff.png', label: 'Buff Duration', value: '4 Hours' },
];

const augmentsItems: PanelItem[] = [
    { icon: '/img/icons/active.png', label: 'Active Augment Duration', value: '1 Hour' },
    { icon: '/img/icons/active.png', label: 'Active Augments', value: 'No Limit', highlight: true },
    { icon: '/img/icons/passive.png', label: 'Passive Augment', value: '1 per character' },
    { badge: 'Top Grade', icon: '/img/icons/active.png', label: 'Augment Rate', value: '10%', highlight: true },
    { badge: 'High Grade', icon: '/img/icons/active.png', label: 'Augment Rate', value: '8%' },
    { badge: 'Low Grade', icon: '/img/icons/passive.png', label: 'Augment Rate', value: '5%' },
];

const enchantItems: PanelItem[] = [
    { icon: '/img/icons/ews.png', label: 'Safe Enchant', value: '+7', highlight: true },
    { icon: '/img/icons/BlessedWeapon.png', label: 'Max Blessed', value: '+15' },
    { icon: '/img/icons/GoldenScrollWeapon1.png', label: 'Max Golden', value: '+25', highlight: true },
    { icon: '/img/icons/eas.png', label: 'Normal Scroll', value: '50%' },
    { badge: '+7 → +15', icon: '/img/icons/BlessedArmor.png', label: 'Blessed Scroll', value: '70%' },
    { badge: '+16 → +25', icon: '/img/icons/GoldenScrollArmor1.png', label: 'Golden Scroll', value: '90%' },
];

const customItems: PanelItem[] = [
    { badge: '3 Tiers', icon: '/img/icons/CustomWeapon.png', label: 'Custom Weapons', value: 'Shadow / Royal / Epic', highlight: true },
    { badge: '3 Tiers', icon: '/img/icons/CustomArmor.png', label: 'Custom Armor', value: 'Shadow / Royal / Epic', highlight: true },
    { badge: '3 Tiers', icon: '/img/icons/Tattoo.png', label: 'Custom Tattoos', value: 'Shadow / Royal / Epic', highlight: true },
    { badge: '2 Tiers', icon: '/img/icons/RaidJewel.png', label: 'Raid Jewelry', value: 'Normal / MW Edition', highlight: true },
    { badge: 'Cosmetic', icon: '/img/icons/london_olympic_bikini.png', label: 'Custom Skins', value: 'Skins & Shields' },
    { badge: 'Max +5', icon: '/img/icons/CustomDye.png', label: 'Custom Dyes', value: 'Stat Boost Dyes' },
    { badge: 'Exclusive', icon: '/img/icons/CustomSkill.png', label: 'Passive Skills', value: 'Custom Skills' },
    { badge: 'Exclusive', icon: '/img/icons/bracelet_agathion_bm_i01.png', label: 'Agathions', value: 'Custom Agathions' },
    { badge: '2 Tiers', icon: '/img/icons/wings.png', label: 'Wings', value: 'Custom Wings' },
];

const farmItems: PanelItem[] = [
    { icon: '/img/icons/FarmStone.jpg', label: 'Farm Stone' },
    { icon: '/img/icons/Gold_Crystal.jpg', label: 'Gold Crystal' },
    { icon: '/img/icons/GoldBar.jpg', label: 'Gold Bar' },
    { icon: '/img/icons/DonateToken.jpg', label: 'Donate Token' },
    { icon: '/img/icons/ClanScroll.jpg', label: 'Clan Scroll' },
    { icon: '/img/icons/JewelTorch.jpg', label: 'Jewel Torch' },
    { icon: '/img/icons/TattooFeather.jpg', label: 'Tattoo Feather' },
    { icon: '/img/icons/LuckyBag.jpg', label: 'Lucky Bag' },
    { icon: '/img/icons/Noblesse.png', label: 'Noblesse' },
    { icon: '/img/icons/BossKey.jpg', label: 'Boss Key' },
    { icon: '/img/icons/EventMedal.jpg', label: 'Event Medal' },
    { icon: '/img/icons/DungeonCard.jpg', label: 'Dungeon Card' },
    { icon: '/img/icons/DungeonMedal.jpg', label: 'Dungeon Medal' },
    { icon: '/img/icons/GoldenScrollWeapon.jpg', label: 'Golden Scroll Weapon' },
    { icon: '/img/icons/GoldenScrollArmor.jpg', label: 'Golden Scroll Armor' },
    { icon: '/img/icons/HeroBook.jpg', label: 'Hero Book' },
    { icon: '/img/icons/PassiveSkillBook.jpg', label: 'Passive Skill Book' },
    { icon: '/img/icons/MainChangeBook.jpg', label: 'Main Change Book' },
    { icon: '/img/icons/GenderChangeBook.jpg', label: 'Gender Change Book' },
];

const clanItems: PanelItem[] = [
    { icon: '/img/icons/clan1.png', label: 'Clan Creation', value: 'Instant Level 8', highlight: true },
    { icon: '/img/icons/clan3.png', label: 'Max Clans in Alliance', value: '2 Clans' },
    { icon: '/img/icons/clan4.png', label: 'Clan Skills', value: 'Available in Shop' },
];

const commandsList = [
    {
        cmd: '.farm',
        name: 'Auto Farm',
        desc: 'Enables the automatic farming system. Your character will farm the current zone automatically without manual input.',
    },
    { cmd: '.menu', name: 'Player Menu', desc: 'Opens the main player menu. Access server features, settings and shortcuts directly from in-game.' },
    { cmd: '.vote', name: 'Vote Reward', desc: 'Opens the vote panel. Vote on topsites to earn bonus coins and support the server community.' },
    {
        cmd: '.dressme',
        name: 'Custom Skins',
        desc: 'Opens the skin selection menu. Apply any unlocked cosmetic skin or shield appearance to your character.',
    },
];

export function FeaturesSection() {
    const [activeTab, setActiveTab] = useState('info');

    const renderPanelGrid = (items: PanelItem[]) => (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {items.map((item, index) => (
                <div
                    key={index}
                    className={cn(
                        'relative rounded-lg border p-4 transition-all duration-300',
                        'border-[rgba(201,168,76,0.25)] bg-[#100c08]/80',
                        'hover:border-[rgba(201,168,76,0.6)] hover:bg-[#1a1208]',
                    )}
                >
                    {item.badge && (
                        <div className="absolute -top-2 left-4 rounded bg-[#8b1a1a] px-2 py-0.5 text-[10px] font-semibold tracking-wider text-white uppercase">
                            {item.badge}
                        </div>
                    )}
                    <div className="mt-2 flex items-center gap-3">
                        {item.icon && (
                            <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg border border-[rgba(201,168,76,0.2)] bg-[#0a0705]">
                                <img
                                    src={item.icon}
                                    alt=""
                                    className="h-10 w-10 object-contain"
                                    onError={(e) => (e.currentTarget.style.display = 'none')}
                                />
                            </div>
                        )}
                        <div className="min-w-0 flex-1">
                            <div className="mb-0.5 text-xs tracking-wider text-[#7a6a54] uppercase">{item.label}</div>
                            <div className={cn('truncate text-sm font-semibold', item.highlight ? 'text-[#c9a84c]' : 'text-[#c8b89a]')}>
                                {item.value}
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );

    const renderZoneCards = () => (
        <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
            {zoneCards.map((zone, index) => (
                <div
                    key={index}
                    className={cn(
                        'overflow-hidden rounded-lg border',
                        'border-[rgba(201,168,76,0.25)] bg-[#100c08]/90',
                        index === zoneCards.length - 1 && 'lg:col-span-2',
                    )}
                >
                    {/* Header */}
                    <div className="flex items-center gap-3 border-b border-[rgba(201,168,76,0.15)] bg-gradient-to-r from-[#0a0705] to-transparent p-4">
                        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg border border-[rgba(201,168,76,0.2)] bg-[#0a0705]">
                            <img
                                src={zone.icon}
                                alt=""
                                className="h-10 w-10 object-contain"
                                onError={(e) => (e.currentTarget.style.display = 'none')}
                            />
                        </div>
                        <div className="min-w-0 flex-1">
                            <div className="font-semibold text-[#f0d080]">{zone.title}</div>
                            <div className="flex items-center gap-1 text-xs text-[#7a6a54]">
                                <MapPin className="h-3 w-3" />
                                <span>{zone.location}</span>
                                {zone.title !== 'Dungeon' && <span className="ml-1 text-[#c9a84c]">{zone.badge}</span>}
                            </div>
                        </div>
                        <div className={cn('rounded border px-3 py-1 text-xs font-semibold', zone.badgeColor)}>{zone.badge}</div>
                    </div>

                    {/* Body */}
                    <div className="space-y-3 p-4">
                        {zone.forText && (
                            <div className="flex items-center justify-between text-sm">
                                <span className="flex items-center gap-2 text-[#7a6a54]">
                                    <ShieldCheck className="h-4 w-4" /> For
                                </span>
                                <span className="text-[#c8b89a]">{zone.forText}</span>
                            </div>
                        )}
                        <div className="flex items-center justify-between text-sm">
                            <span className="flex items-center gap-2 text-[#7a6a54]">
                                <Skull className="h-4 w-4" /> Mobs
                            </span>
                            <span className="text-right text-[#c8b89a]">{zone.mobs}</span>
                        </div>

                        {/* Dungeon Modes */}
                        {zone.modes && (
                            <div className="mt-3 grid grid-cols-1 gap-3 border-t border-[rgba(201,168,76,0.15)] pt-3 sm:grid-cols-2">
                                {zone.modes.map((mode, mIndex) => (
                                    <div key={mIndex} className="space-y-2">
                                        <div className="flex items-center gap-2 text-sm font-semibold text-[#f0d080]">
                                            {mode.icon}
                                            {mode.title}
                                        </div>
                                        {mode.rows.map((row, rIndex) => (
                                            <div key={rIndex} className="flex items-center justify-between text-xs">
                                                <span className="flex items-center gap-1.5 text-[#7a6a54]">
                                                    {row.icon}
                                                    {row.label}
                                                </span>
                                                <span className="text-[#c8b89a]">{row.value}</span>
                                            </div>
                                        ))}
                                    </div>
                                ))}
                            </div>
                        )}

                        {/* Completion Note */}
                        {zone.completionNote && (
                            <div className="mt-3 flex items-center gap-2 border-t border-[rgba(201,168,76,0.15)] pt-3 text-sm text-[#c9a84c]">
                                <Star className="h-4 w-4 fill-current" />
                                <span>{zone.completionNote}</span>
                            </div>
                        )}

                        {/* Drops */}
                        {zone.drops && zone.drops.length > 0 && (
                            <div className="mt-3 border-t border-[rgba(201,168,76,0.15)] pt-3">
                                <div className="mb-2 text-xs tracking-wider text-[#7a6a54] uppercase">Drops</div>
                                <div className="flex flex-wrap gap-3">
                                    {zone.drops.map((drop, dIndex) => (
                                        <div key={dIndex} className="flex items-center gap-2">
                                            <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded border border-[rgba(201,168,76,0.2)] bg-[#0a0705]">
                                                <img
                                                    src={drop.icon}
                                                    alt=""
                                                    className="h-6 w-6 object-contain"
                                                    onError={(e) => (e.currentTarget.style.display = 'none')}
                                                />
                                            </div>
                                            <span className="text-xs text-[#c8b89a]">{drop.label}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            ))}
        </div>
    );

    const renderFarmGrid = () => (
        <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
            {farmItems.map((item, index) => (
                <div
                    key={index}
                    className="flex flex-col items-center gap-2 rounded-lg border border-[rgba(201,168,76,0.25)] bg-[#100c08]/80 p-3 transition-colors hover:border-[rgba(201,168,76,0.6)]"
                >
                    <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg border border-[rgba(201,168,76,0.2)] bg-[#0a0705]">
                        <img
                            src={item.icon}
                            alt=""
                            className="h-10 w-10 object-contain"
                            width={40}
                            height={40}
                            onError={(e) => (e.currentTarget.style.display = 'none')}
                        />
                    </div>
                    <span className="text-center text-xs leading-tight text-[#c8b89a]">{item.label}</span>
                </div>
            ))}
        </div>
    );

    const renderCommands = () => (
        <div className="space-y-3">
            {commandsList.map((cmd, index) => (
                <div
                    key={index}
                    className="flex gap-4 rounded-lg border border-[rgba(201,168,76,0.25)] bg-[#100c08]/80 p-4 transition-colors hover:border-[rgba(201,168,76,0.4)]"
                >
                    <div className="flex-shrink-0">
                        <div className="rounded border border-[#8b1a1a]/30 bg-[#8b1a1a]/20 px-3 py-1.5 font-mono text-sm font-semibold text-[#c0392b]">
                            {cmd.cmd}
                        </div>
                    </div>
                    <div className="min-w-0 flex-1">
                        <div className="mb-1 font-semibold text-[#f0d080]">{cmd.name}</div>
                        <div className="text-sm text-[#7a6a54]">{cmd.desc}</div>
                    </div>
                </div>
            ))}
        </div>
    );

    const getPanelContent = () => {
        switch (activeTab) {
            case 'info':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Server className="h-5 w-5" /> Server Information
                            </h3>
                            <p className="text-sm text-[#7a6a54]">Core server settings, farming zones and rates.</p>
                        </div>
                        {renderPanelGrid(serverInfoItems)}
                        {renderZoneCards()}
                    </>
                );
            case 'buffs':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Shield className="h-5 w-5" /> Buffs
                            </h3>
                            <p className="text-sm text-[#7a6a54]">No buff slot restrictions — full freedom to build your character.</p>
                        </div>
                        {renderPanelGrid(buffsItems)}
                    </>
                );
            case 'augments':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Gem className="h-5 w-5" /> Augments
                            </h3>
                            <p className="text-sm text-[#7a6a54]">Powerful augmentation system with no active slot limit.</p>
                        </div>
                        <div className="mb-3 text-sm font-semibold tracking-wider text-[#c9a84c] uppercase">Duration & Limits</div>
                        {renderPanelGrid(augmentsItems.slice(0, 3))}
                        <div className="mt-6 mb-3 text-sm font-semibold tracking-wider text-[#c9a84c] uppercase">Augmentation Rates</div>
                        {renderPanelGrid(augmentsItems.slice(3))}
                    </>
                );
            case 'enchant':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Star className="h-5 w-5" /> Enchant
                            </h3>
                            <p className="text-sm text-[#7a6a54]">Three-tier enchant system with safe enchant protection at +7.</p>
                        </div>
                        <div className="mb-3 text-sm font-semibold tracking-wider text-[#c9a84c] uppercase">Enchant Limits</div>
                        {renderPanelGrid(enchantItems.slice(0, 3))}
                        <div className="mt-6 mb-3 text-sm font-semibold tracking-wider text-[#c9a84c] uppercase">Scroll Rates</div>
                        {renderPanelGrid(enchantItems.slice(3))}
                    </>
                );
            case 'custom':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Sparkles className="h-5 w-5" /> Custom Content
                            </h3>
                            <p className="text-sm text-[#7a6a54]">Exclusive items, skins, and systems unique to our server.</p>
                        </div>
                        {renderPanelGrid(customItems)}
                    </>
                );
            case 'farm':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Coins className="h-5 w-5" /> Farm & Materials
                            </h3>
                            <p className="text-sm text-[#7a6a54]">All farmable items, currencies and special materials available in-game.</p>
                        </div>
                        {renderFarmGrid()}
                    </>
                );
            case 'clan':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Flag className="h-5 w-5" /> Clan & Alliance
                            </h3>
                            <p className="text-sm text-[#7a6a54]">Powerful clan system with instant setup.</p>
                        </div>
                        <div className="mb-3 text-sm font-semibold tracking-wider text-[#c9a84c] uppercase">Clan Settings</div>
                        {renderPanelGrid(clanItems)}
                    </>
                );
            case 'commands':
                return (
                    <>
                        <div className="mb-4">
                            <h3 className="mb-1 flex items-center gap-2 text-lg font-semibold text-[#f0d080]">
                                <Terminal className="h-5 w-5" /> Useful Commands
                            </h3>
                            <p className="text-sm text-[#7a6a54]">Type these commands in-game chat to access exclusive features.</p>
                        </div>
                        {renderCommands()}
                    </>
                );
            default:
                return null;
        }
    };

    return (
        <section
            id="features"
            className="relative overflow-hidden py-16"
            style={{
                background: 'linear-gradient(180deg, rgba(10,7,5,0) 0%, rgba(15,9,4,.8) 50%, rgba(10,7,5,0) 100%)',
            }}
        >
            {/* Background overlay */}
            <div
                className="absolute inset-0 -z-10"
                style={{
                    background: `
            linear-gradient(180deg, #0a0705 0%, transparent 15%, transparent 85%, #0a0705 100%),
            linear-gradient(135deg, rgba(10,7,5,.78), rgba(10,7,5,.78))
          `,
                }}
            />

            <div className="container mx-auto max-w-7xl px-4">
                {/* Section Header */}
                <div className="mb-10 text-center">
                    <div className="mb-3 text-sm tracking-[0.35em] uppercase" style={{ color: '#c0392b', fontFamily: 'Rajdhani, sans-serif' }}>
                        Server Specifications
                    </div>
                    <h2
                        className="mb-4 text-3xl font-bold md:text-4xl"
                        style={{
                            color: '#f0d080',
                            fontFamily: 'Cinzel Decorative, serif',
                            textShadow: '0 0 30px rgba(201,168,76,.3)',
                        }}
                    >
                        Features
                    </h2>
                    <div className="flex items-center justify-center gap-3">
                        <div className="h-px w-24 bg-gradient-to-r from-transparent to-[#7a5c1e]" />
                        <span className="text-sm text-[#c9a84c]">◆</span>
                        <div className="h-px w-24 bg-gradient-to-l from-transparent to-[#7a5c1e]" />
                    </div>
                </div>

                {/* Features Layout */}
                <div className="grid grid-cols-1 gap-6 lg:grid-cols-12">
                    {/* Tabs - Left Side */}
                    <div className="space-y-1 lg:col-span-3">
                        {tabs.map((tab) => (
                            <button
                                key={tab.id}
                                onClick={() => setActiveTab(tab.id)}
                                className={cn(
                                    'relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-4 py-3 text-left transition-all duration-300',
                                    activeTab === tab.id
                                        ? 'border-l-2 border-[#c9a84c] bg-[rgba(201,168,76,0.15)]'
                                        : 'border-l-2 border-transparent hover:bg-[rgba(201,168,76,0.05)]',
                                )}
                            >
                                <span className={cn('transition-colors', activeTab === tab.id ? 'text-[#c9a84c]' : 'text-[#7a6a54]')}>
                                    {tab.icon}
                                </span>
                                <span
                                    className={cn(
                                        'text-sm font-medium tracking-wider uppercase',
                                        activeTab === tab.id ? 'text-[#c9a84c]' : 'text-[#7a6a54]',
                                    )}
                                    style={{ fontFamily: 'Rajdhani, sans-serif' }}
                                >
                                    {tab.label}
                                </span>
                                {activeTab === tab.id && <div className="absolute right-2 h-1.5 w-1.5 rounded-full bg-[#c9a84c]" />}
                            </button>
                        ))}
                    </div>

                    {/* Panel - Right Side */}
                    <div className="lg:col-span-9">
                        <div
                            className="min-h-[500px] rounded-xl border p-6"
                            style={{
                                background: 'rgba(16,12,8,0.9)',
                                borderColor: 'rgba(201,168,76,0.25)',
                            }}
                        >
                            {getPanelContent()}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}