"use client";

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

const architecture = [
  {
    title: "Encrypted Storage Substrate",
    description: "Keeps data private and verifiable.",
  },
  {
    title: "Mesh Routing Layer",
    description: "Connects clients and workloads securely, anywhere.",
  },
  {
    title: "Protocol Gateway Layer",
    description:
      "Serve the same dataset over S3, IPFS, WebDAV, or HTTP.",
  },
];

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

  return (
    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
      {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-t border-l border-r border-gray-800" />
      {/* ✅ Boxed container */}
      <Container className="bg-[#111111] w-full max-w-7xl mx-auto py-12 border border-t-0 border-b-0 border-gray-800">
        <div className="mx-auto max-w-3xl text-center">
          <Eyebrow>ARCHITECTURE</Eyebrow>
          <H3 className="mt-4 text-white">
            How it Works
          </H3>
          <P className="mt-6 text-gray-400">
            A layered design that encrypts, routes, and exposes storage through
            multiple protocols — without duplicating data or compromising
            sovereignty.
          </P>
        </div>

        {/* ✅ New 2-column layout */}
        <div className="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-2 lg:grid-cols-3 bg-[#121212] ">
          {/* LEFT — 1 column (3 rows) */}
          <div className="space-y-2">
            {architecture.map((item, index) => (
              <button
                key={item.title}
                className={`w-full border bg-[#121212] text-left border-white/10 p-4 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8 
                  ${active === index
                    ? "border-cyan-400 shadow-md"
                    : "border-gray-800 hover:border-cyan-200 hover:shadow-sm"}`}
                onClick={() => setActive(index)}
              >
                <CP className="text-white font-semibold">{item.title}</CP>
              </button>
            ))}
          </div>

          {/* RIGHT — 2 columns */}
          <div className="lg:col-span-2 flex items-center justify-center border border-gray-800 bg-[#121212] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8" >
            <div
              key={active} // ✅ force smooth transition
              className="transition-opacity duration-300 opacity-100 animate-fade"
            >
              <H5 className="text-white">{architecture[active].title}</H5>
              <P className="mt-2 text-gray-400 max-w-xl">
                {architecture[active].description}
              </P>
            </div>
          </div>
        </div>
      </Container>
      <div className="w-full border-b border-gray-800 bg-[#121212]" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
    </section>
  );
}