export const Settings = () => {
  return (
    <div className="px-8 pb-12 pt-8">
      <div className="max-w-5xl mx-auto">
        {/* Page Header */}
        <header className="mb-10">
          <h1 className="text-4xl font-extrabold tracking-tight text-[#e0e1f4] mb-2">Vault Console</h1>
          <p className="text-[#c3c6d7] font-medium">Configure your library experience and server connections.</p>
        </header>

        {/* Horizontal Tab Bar */}
        <div className="flex items-center gap-2 mb-10 overflow-x-auto hide-scrollbar bg-[#181b28] p-1.5 rounded-full w-fit">
          <button className="px-6 py-2.5 rounded-full text-sm font-bold text-[#c3c6d7] hover:text-[#e0e1f4] transition-all">Profile</button>
          <button className="px-6 py-2.5 rounded-full text-sm font-bold bg-[#2563eb] text-[#eeefff] shadow-lg shadow-[#2563eb]/20 transition-all">User Interface</button>
          <button className="px-6 py-2.5 rounded-full text-sm font-bold text-[#c3c6d7] hover:text-[#e0e1f4] transition-all">Library Management</button>
          <button className="px-6 py-2.5 rounded-full text-sm font-bold text-[#c3c6d7] hover:text-[#e0e1f4] transition-all">Metadata Sources</button>
          <button className="px-6 py-2.5 rounded-full text-sm font-bold text-[#c3c6d7] hover:text-[#e0e1f4] transition-all">Administration</button>
          <button className="px-6 py-2.5 rounded-full text-sm font-bold text-[#c3c6d7] hover:text-[#e0e1f4] transition-all whitespace-nowrap">Server Stats</button>
        </div>

        <div className="flex flex-col gap-8">
          <section className="w-full space-y-6">
            <div className="bg-[#272937] rounded-lg p-8 shadow-xl">
              <div className="flex items-center gap-3 mb-8">
                <span className="material-symbols-outlined text-[#b4c5ff]" style={{ fontVariationSettings: "'FILL' 1" }}>palette</span>
                <h2 className="text-xl font-bold tracking-tight text-[#e0e1f4]">Visual Identity</h2>
              </div>
              <div className="space-y-8">
                {/* Toggle: Dark Mode */}
                <div className="flex items-center justify-between group">
                  <div>
                    <p className="font-bold text-[#e0e1f4]">Enable Dark Mode</p>
                    <p className="text-sm text-[#c3c6d7]">Switch between obsidian and slate themes.</p>
                  </div>
                  <label className="relative inline-flex items-center cursor-pointer">
                    <input defaultChecked className="sr-only peer" type="checkbox" />
                    <div className="w-12 h-6 bg-[#363847] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#2563eb]"></div>
                  </label>
                </div>
                {/* Toggle: Notifications */}
                <div className="flex items-center justify-between group">
                  <div>
                    <p className="font-bold text-[#e0e1f4]">Show Notifications</p>
                    <p className="text-sm text-[#c3c6d7]">Get alerts for scan completions and updates.</p>
                  </div>
                  <label className="relative inline-flex items-center cursor-pointer">
                    <input className="sr-only peer" type="checkbox" />
                    <div className="w-12 h-6 bg-[#363847] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#2563eb]"></div>
                  </label>
                </div>
                {/* Toggle: Glassmorphism */}
                <div className="flex items-center justify-between group">
                  <div>
                    <p className="font-bold text-[#e0e1f4]">Glassmorphism Effects</p>
                    <p className="text-sm text-[#c3c6d7]">Enable translucent blurs and layered depth.</p>
                  </div>
                  <label className="relative inline-flex items-center cursor-pointer">
                    <input defaultChecked className="sr-only peer" type="checkbox" />
                    <div className="w-12 h-6 bg-[#363847] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#2563eb]"></div>
                  </label>
                </div>
              </div>
            </div>

            {/* Layout Preview Card */}
            <div className="bg-gradient-to-br from-[#2563eb]/20 to-[#6001d1]/20 rounded-lg p-8 border border-white/5 relative overflow-hidden group">
              <div className="relative z-10">
                <h3 className="text-lg font-bold text-white mb-2">Interface Preview</h3>
                <p className="text-sm text-blue-200/70 mb-6">Current: Ultra-Modern / Editorial</p>
                <div className="flex gap-2">
                  <div className="w-12 h-2 bg-white/20 rounded-full"></div>
                  <div className="w-24 h-2 bg-white/40 rounded-full"></div>
                  <div className="w-8 h-2 bg-white/20 rounded-full"></div>
                </div>
              </div>
              <span className="material-symbols-outlined absolute -right-4 -bottom-4 text-9xl text-white/5 rotate-12 transition-transform group-hover:rotate-0 duration-700">dashboard_customize</span>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};
