"use client";

import { Link } from "react-router-dom";
import { Eyebrow, H3, P } from "@/components/Texts";

const bentoCards = [
  {
    id: 'network',
    title: 'Mycelium Network',
    eyebrow: 'Network',
    description: 'Encrypted peer-to-peer mesh networking across the globe.',
    image: '/images/bento-network.png',
    link: '/network',
    colSpan: 'lg:col-span-3',
    rowSpan: 'lg:row-span-1',
    rounded: 'lg:rounded-tl-4xl max-lg:rounded-t-4xl',
    innerRounded: 'lg:rounded-tl-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]'
  },
  {
    id: 'agents',
    title: 'Mycelium Agents',
    eyebrow: 'Agents',
    description: 'Private, programmable AI systems that run on your hardware.',
    image: '/images/bento-agent.jpg',
    link: '/agents',
    colSpan: 'lg:col-span-3',
    rowSpan: 'lg:row-span-1',
    rounded: 'lg:rounded-tr-4xl',
    innerRounded: 'lg:rounded-tr-[calc(2rem+1px)]'
  },
  {
    id: 'cloud',
    title: 'Mycelium Cloud',
    eyebrow: 'Cloud',
    description: 'Deploy Kubernetes clusters on sovereign infrastructure.',
    image: '/images/bento-cloud.jpg',
    link: '/cloud',
    colSpan: 'lg:col-span-6',
    rowSpan: 'lg:row-span-1',
    rounded: 'rounded-lg',
    innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
  },
  {
    id: 'compute',
    title: 'Mycelium Compute',
    eyebrow: 'Compute',
    description: 'The Compute resource layers powering the stack.',
    image: '/images/bento-compute.png',
    link: '/compute',
    colSpan: 'lg:col-span-2',
    rowSpan: 'lg:row-span-1',
    rounded: 'lg:rounded-bl-4xl',
    innerRounded: 'lg:rounded-bl-[calc(2rem+1px)]'
  },
  {
    id: 'storage',
    title: 'Mycelium Storage',
    eyebrow: 'Storage',
    description: 'The Storage resource layers powering the stack.',
    image: '/images/bento-storage.png',
    link: '/storage',
    colSpan: 'lg:col-span-2',
    rowSpan: 'lg:row-span-1',
    rounded: 'rounded-lg',
    innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
  },
  {
    id: 'gpu',
    title: 'Mycelium GPU',
    eyebrow: 'GPU',
    description: 'The GPU resource layers powering the stack.',
    image: '/images/bento-gpu.jpg',
    link: '/gpu',
    colSpan: 'lg:col-span-2',
    rowSpan: 'lg:row-span-1',
    rounded: 'lg:rounded-br-4xl max-lg:rounded-b-4xl',
    innerRounded: 'lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]'
  },
];

export function HomeTab() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-transparent">

      {/* ✅ Top spacer + full-width line */}
      <div className="max-w-7xl mx-auto py-6 border-x border-gray-200 bg-white border-t-0 border-b-0" />
      <div className="w-full border-t border-l border-r border-gray-200" />

      
      {/* ✅ Section with vertical borders */}
      <div className="mx-auto bg-white  max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-200">
        <Eyebrow className="pt-12 ">Deploy faster</Eyebrow>
        <H3 className="mt-2">Mycelium Components</H3>
        <P className="mt-6 max-w-lg">
          Each component can be used on its own or combined into a fully sovereign cloud.
        </P>

        <div className="mt-8 grid grid-cols-1 gap-6 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">
          {bentoCards.map((card) => (
            <Link to={card.link} key={card.id} className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 cursor-pointer`}>
              <div className={`absolute inset-0 rounded-md bg-white ${card.rounded}`} />
              <div className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}>
                <img
                  alt={card.title}
                  src={card.image}
                  className="h-50 object-cover object-center"
                />
                <div className="px-8 pt-4 pb-6">
                  <h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
                  <p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">{card.title}</p>
                  <p className="mt-1 max-w-lg text-sm/6 text-gray-600">
                    {card.description}
                  </p>
                </div>
              </div>
              <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`} />
            </Link>
          ))}
        </div>
      </div>

      {/* ✅ Bottom full-width line + spacer */}
      <div className="w-full border-b border-gray-200" />
      <div className="max-w-7xl mx-auto py-6 border-x border-gray-200 border-t-0 border-b-0" />
    </section>
  );
}