"use client";

import { useState } from "react";

// ✅ IMPORT HEROICONS
import {
  CubeIcon,
  SparklesIcon,
  ServerStackIcon,
  ShieldCheckIcon,
} from "@heroicons/react/20/solid";

const tabs = [
  {
    id: "ai",
    label: "K8s Clusters",
    title: "K8s Clusters",
    description:
      "Deploy and scale containerized apps across your own hardware — enabling a world of possibilities.",
    link: "#",
    icon: CubeIcon,
  },
  {
    id: "web",
    label: "AI Agents",
    title: "AI Agents",
    description: "Run open-source models locally, securely, and offline.",
    link: "#",
    icon: SparklesIcon,
  },
  {
    id: "ecommerce",
    label: "S3-Compatible Storage",
    title: "S3-Compatible Storage",
    description:
      "Your own personal over-the-network drive, encrypted end-to-end.",
    link: "#",
    icon: ServerStackIcon,
  },
  {
    id: "platforms",
    label: "Mesh VPN & 0-Trust Networking",
    title: "Mesh VPN & 0-Trust Networking",
    description:
      "Securely connect all your devices and remote locations.",
    link: "#",
    icon: ShieldCheckIcon,
  },
];

export function HomeApplication() {
  const [active, setActive] = useState("ai");
  const current = tabs.find((t) => t.id === active)!;
  const Icon = current.icon; // ✅ dynamic icon

  return (
    <section className="mx-4  border-t-0  lg:mx-auto max-w-5xl border border-gray-200">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">

        {/* ✅ VERTICAL DIVIDER ON DESKTOP */}
        <div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-200 pointer-events-none"></div>

        {/* LEFT COLUMN */}
        <div className="lg:col-span-3 space-y-6 lg:pl-6 py-12">
          <h1 className="text-3xl lg:text-3xl font-semibold tracking-tight text-gray-900 leading-tight">
            Run Real Infrastructure on Your Own Hardware
          </h1>

          <p className="text-sm text-gray-500 leading-relaxed max-w-2xl">
            Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
          </p>

          {/* TABS */}
          <div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-200 w-auto">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActive(tab.id)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all
                  ${
                    active === tab.id
                      ? "bg-white border border-gray-300 shadow-sm"
                      : "text-gray-500 hover:text-cyan-500"
                  }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        {/* RIGHT COLUMN — ONLY 1 ROW CHANGES */}
        <div className="space-y-3 lg:pr-6 py-12">

          {/* ✅ ICON WITH BLACK BG */}
          <div className="h-10 w-10 flex items-center justify-center rounded-full bg-black">
            <Icon className="h-5 w-5 text-white" />
          </div>

          <h4 className="text-lg font-semibold text-gray-900 uppercase tracking-wide">
            {current.title}
          </h4>

          <p className="text-sm text-gray-500 leading-tight">
            {current.description}
          </p>

          <a
            href={current.link}
            className="text-gray-700 font-semibold hover:text-cyan-600 text-sm"
          >
            Learn more →
          </a>
        </div>

      </div>
    </section>
  );
}