"use client";

import { Container } from "@/components/Container";
import { H3, P, Eyebrow } from "@/components/Texts";

export function CloudBluePrint() {
  const logos = [
    { src: '/images/logo/cryptpad.png', href: 'https://cryptpad.fr' },
    { src: '/images/logo/gitea.png', href: 'https://about.gitea.com' },
    { src: '/images/logo/lifekit.png', href: '#' }, // No link available
    { src: '/images/logo/matrix.png', href: 'https://matrix.org' },
    { src: '/images/logo/nextcloud.png', href: 'https://nextcloud.com' },
    { src: '/images/logo/stalwart.png', href: 'https://stalw.art' },
  ];

  return (
    <section className="w-full max-w-8xl mx-auto bg-transparent">

      {/* ✅ Boxed container */}
      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
        <Container>
          <div className="mx-auto max-w-4xl sm:text-center">
            <Eyebrow className="text-cyan-500">Featured Blueprint</Eyebrow>

            <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 mt-2">
              Your Personal Sovereign Cloud Workspace
            </H3>

            <P className="mt-6 text-lg text-gray-600">
              Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack — a full personal cloud you can deploy, customize, or extend. Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.
            </P>
          </div>

          {/* ✅ 3x2 logo grid */}
          <div className="mt-12 grid grid-cols-3 gap-x-8 gap-y-12">
            {logos.map((logo, i) => (
              <div key={i} className="flex justify-center">
                <a
                  href={logo.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="transition-transform duration-300 hover:scale-105"
                >
                  <img
                    src={logo.src}
                    alt={`Logo ${i + 1}`}
                    className="max-h-12 w-auto object-contain"
                  />
                </a>
              </div>
            ))}
          </div>
        </Container>
      </div>

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