"use client";

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

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

      {/* Top section separators */}
      <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
      <div className="w-full border-t border-l border-r border-gray-100" />

      {/* Main content */}
      <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-100">
        <Eyebrow className="pt-12">Components</Eyebrow>
        <H3 className="mt-2">Explore the Stack</H3>
        <P className="mt-6 max-w-4xl">
          Mycelium’s technology stack gives you everything you need to build and run applications 
          on a distributed network, from connectivity and compute to personal environments and AI.
        </P>

        {/* BENTO GRID LAYOUT — EXACT MATCH */}
        <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2 pb-12">

          {/* ------------------ LEFT TALL CARD ------------------ */}
          <Link to="/network" className="relative lg:row-span-2 cursor-pointer">
            <div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">

              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
                <h3 className="text-sm/4 font-semibold text-cyan-500">LIVE</h3>
                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Network</CT>
                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  Peer-to-peer connectivity between users, nodes, and devices. The foundation for secure 
                  communication and collaboration.
                </CP>
              </div>

              {/* Tall image container */}
              <div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
                <div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden 
                                rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] 
                                border-gray-700 bg-gray-900 shadow-2xl">
                  <img 
                    src="/images/bento-network.jpg"
                    className="size-full object-cover object-top"
                  />
                </div>
              </div>
            </div>

            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 lg:rounded-l-4xl" />
          </Link>

          {/* ------------------ MIDDLE TOP ------------------ */}
          <Link to="/pods" className="relative cursor-pointer max-lg:row-start-1">
            <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">

              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Coming Soon</h3>
                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Pods</CT>
                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  Personal digital environments that never reset and stay under your control. Build, deploy, 
                  and connect on your own terms.
                </CP>
              </div>

              <div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 sm:px-10 lg:pb-2">
                <img
                  src="/images/bento-gpu.jpg"
                  className="w-full max-lg:max-w-xs"
                />
              </div>
            </div>

            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl" />
          </Link>

          {/* ------------------ MIDDLE BOTTOM ------------------ */}
          <Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
            <div className="absolute inset-px rounded-lg bg-white" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">

              <div className="px-8 pt-8 sm:px-10 sm:pt-10">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Q1 2026</h3>
                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Agents</CT>
                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  Peer-to-peer AI that serves you, not your data. Train, deploy, and own your AI end-to-end.
                </CP>
              </div>

              <div className="@container flex flex-1 items-center justify-center max-lg:py-6 lg:pb-2">
                <img
                  src="/images/bento-agent.jpg"
                  className="h-[min(200px,40cqw)] object-cover"
                />
              </div>
            </div>

            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5" />
          </Link>

          {/* ------------------ RIGHT TALL ------------------ */}
          <Link to="/cloud" className="relative lg:row-span-2 cursor-pointer">
            <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-4xl" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">

              <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Early Access</h3>
                <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">Mycelium Cloud</CT>
                <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  Decentralized compute, storage, and orchestration. A full cloud service without a central operator.
                </CP>
              </div>

              <div className="relative min-h-120 w-full grow">
                <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden 
                                rounded-tl-xl bg-gray-900 shadow-2xl outline outline-white/10">
                  <img
                    src="/images/cloud/reserve.png"
                    className="size-full object-cover"
                  />
                </div>
              </div>
            </div>

            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
          </Link>

        </div>
      </div>

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