"use client";

import { useState } from "react";
import { Eyebrow, H3, P } from "@/components/Texts";
import { Button } from "@/components/Button";

const tabs = [
  {
    id: "kubernetes",
    label: "Managed Kubernetes",
    content: {
      item: "Managed Kubernetes",
      desc:
        "Create and manage clusters across distributed environments using standard Kubernetes tools.",

      bullets: [
        "Create and manage clusters on distributed nodes",
        "Run workloads at the edge or across enterprise sites",
        "Keep full ownership of data and orchestration",
        "Use the Kubernetes ecosystem without modification",
      ],
    },
  },

  {
    id: "vdc",
    label: "Virtual Data Centers",
    content: {
      item: "Virtual Data Centers",
      desc:
        "Provision and manage full cloud environments without owning or maintaining servers.",

      bullets: [
        "Create dedicated environments for applications, databases, and internal services",
        "Add or remove compute and storage resources instantly",
        "Migrate workloads from cloud or on-prem systems",
        "Meet compliance requirements by selecting where data resides",
        "Benefit from continuous monitoring and automated recovery",
      ],
    },
  },

  {
    id: "qsfs",
    label: "Quantum Safe File System (QSFS)",
    content: {
      item: "Quantum Safe File System (QSFS)",
      desc:
        "Encrypted, redundant storage designed for high-security and high-availability workloads. Data is distributed across independent nodes and remains accessible even during failures or outages.",

      bullets: [
        "Secure file storage with quantum-safe encryption",
        "Distributed replication for durability",
        "Standard protocol support: S3, IPFS, WebDAV",
        "Automatic scaling as data grows",
        "Consistent performance for research, enterprise, and AI workloads",
      ],
    },
  },
];

const tabButtons = {
  kubernetes: {
    primary: "Deploy a Cluster",
    secondary: "Learn More",
  },
  vdc: {
    primary: "Follow Development",
    secondary: "Learn More",
  },
  qsfs: {
    primary: "View Docs",
    secondary: "Explore Integration",
  },
} as const;

export function CloudIntro() {
  const [active, setActive] = useState("kubernetes");
  const current = tabs.find((t) => t.id === active)!.content;
  const currentButtons = tabButtons[active as keyof typeof tabButtons];

  return (
    <section className="relative w-full bg-[#121212] overflow-hidden">
      {/* Top Spacing Border */}
      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
      <div className="w-full border-t border-l border-r border-gray-800" />

      <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12 border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">

        {/* ================================
            Header
        ================================= */}
        <div className="mb-16">
          <Eyebrow color="accent">Capabilities</Eyebrow>

          <H3 color="white">What You Can Run on Mycelium Cloud</H3>

          <P className="max-w-3xl text-gray-400 mt-6">
            Host nodes, deploy workloads, or build private AI systems all on
            infrastructure you own and control. Mycelium gives you scalable compute,
            secure storage, and sovereign orchestration without depending on
            hyperscalers.
          </P>
        </div>

        {/* ================================
            Two-column layout
        ================================= */}
        <div className="flex flex-col lg:flex-row gap-16">

          {/* Left: Code UI */}
          <div className="w-full lg:w-1/2">
            <img
              src="/images/cloud/reserve.png"
              alt="Mycelium Cloud reserve"
              className="w-full h-auto rounded-xl border border-white/10 object-cover"
            />
          </div>

          {/* Right: Tabs */}
          <div className="w-full lg:w-1/2 text-white">

            {/* Tabs Navigation */}
            <div className="flex gap-6 border-b border-white/10 pb-2">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActive(tab.id)}
                  className={`text-sm font-medium tracking-wide pb-2 ${
                    active === tab.id
                      ? "border-b-2 border-cyan-500 text-white"
                      : "text-gray-400 hover:text-white"
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>

            {/* Tab Content */}
            <div className="mt-6 space-y-6">
              <div>
                <p className="text-lg font-medium text-white">{current.item}</p>
                <p className="mt-2 text-base text-gray-400 leading-relaxed">
                  {current.desc}
                </p>
              </div>

              <div className="mt-4 space-y-2">
                <p className="text-sm uppercase tracking-wide text-cyan-400 font-semibold">
                  Key capabilities
                </p>

                <ul className="space-y-2">
                  {current.bullets.map((b, i) => (
                    <li key={i} className="text-base text-gray-300 flex gap-2">
                      <span className="text-cyan-500">•</span>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>

              {currentButtons && (
                <div className="mt-8 flex flex-wrap gap-4">
                  <Button
                    to="#"
                    variant="solid"
                    color="cyan"
                  >
                    {currentButtons.primary}
                  </Button>

                  <Button
                    to="#"
                    variant="outline"
                    color="white"
                  >
                    {currentButtons.secondary}
                  </Button>
                </div>
              )}

            </div>
          </div>
        </div>
      </div>

      {/* Bottom Borders */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-b border-gray-800" />
    </section>
  );
}