import Link from "next/link";
import { tenextButton as TenextButton } from "@/components/shared/Button";
import { Icon } from "@/components/shared/Icon";
import { aboutHero } from "@/data/about";

const floatIcons = ["cloud", "cpu", "database", "code", "shield", "boxes"];

/**
 * AboutHero — flagship enterprise hero.
 * Left: breadcrumb, headline, supporting paragraph, primary + secondary CTA.
 * Right: an asset-free glass-tile composition of capability icons (no photos).
 */
export function AboutHero() {
  return (
    <section className="px-5 pt-5">
      <div className="relative overflow-hidden rounded-[25px] bg-tenext-dark px-[7vw] py-[80px] md:py-[110px]">
        {/* Ambient gradient wash */}
        <div className="pointer-events-none absolute inset-0 opacity-70">
          <div className="absolute -right-[10%] -top-[30%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle,rgba(130,88,200,0.35),transparent_60%)]" />
          <div className="absolute -bottom-[40%] left-[10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle,rgba(69,208,189,0.18),transparent_60%)]" />
        </div>

        <div className="relative z-10 grid grid-cols-1 items-center gap-[50px] lg:grid-cols-[1.1fr_0.9fr]">
          {/* Content */}
          <div>
            <nav aria-label="Breadcrumb" className="mb-[26px]">
              <ol className="flex items-center gap-2 text-[13px] text-white/60">
                <li>
                  <Link href="/" className="transition-colors hover:text-tenext-teal">
                    Home
                  </Link>
                </li>
                <li className="h-1 w-1 rounded-full bg-tenext-teal" />
                <li className="text-white">About us</li>
              </ol>
            </nav>

            <span className="tenext-subheading mb-[18px] text-tenext-teal" style={{ fontFamily: "var(--font-sora)" }}>
              {aboutHero.eyebrow}
            </span>

            <h1
              className="max-w-[640px] tracking-[-0.03em] text-white"
              style={{
                fontFamily: "var(--font-dm-sans)",
                fontSize: "clamp(38px, 5vw, 72px)",
                fontWeight: 600,
                lineHeight: 1.06,
              }}
            >
              {aboutHero.title}
            </h1>

            <p className="mt-[26px] max-w-[540px] text-[17px] leading-[1.75] text-white/80">
              {aboutHero.paragraph}
            </p>

            <div className="mt-[40px] flex flex-wrap items-center gap-[16px]">
              <TenextButton
                href={aboutHero.primaryCta.href}
                variant="gradient-fill"
                className="rounded-[25px] px-[34px] py-[15px] text-[15px] font-semibold"
                showArrow={false}
              >
                {aboutHero.primaryCta.label}
              </TenextButton>
              <TenextButton
                href={aboutHero.secondaryCta.href}
                variant="gradient-border"
                className="rounded-[25px] px-[34px] py-[15px] text-[15px] font-medium text-white"
                showArrow={true}
              >
                {aboutHero.secondaryCta.label}
              </TenextButton>
            </div>
          </div>

          {/* Icon composition */}
          <div className="relative hidden lg:block" aria-hidden="true">
            <div className="grid grid-cols-3 gap-[16px]">
              {floatIcons.map((name, i) => (
                <div
                  key={name}
                  className="flex aspect-square items-center justify-center rounded-[22px] border border-white/10 bg-white/[0.04] text-tenext-teal backdrop-blur-sm transition-transform duration-500 hover:-translate-y-1"
                  style={{ transform: `translateY(${i % 2 === 0 ? "-12px" : "12px"})` }}
                >
                  <Icon name={name} className="h-[34px] w-[34px]" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}