import { EightPointGrid } from './EightPointGrid';
import { NetworkMeshDiagram } from './NetworkMeshDiagram';
import { ProductCard } from './ProductCard';

/** Homepage ecosystem trinity — Sankofa · Phoenix · PanTel */
export function EcosystemTrinitySection() {
  return (
    <section id="ecosystem" className="relative scroll-mt-20 border-y border-sovereign-bronze/20 py-20">
      <EightPointGrid className="opacity-[0.06]" />
      <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-20" aria-hidden>
        <NetworkMeshDiagram variant="hero" className="mx-auto max-w-4xl translate-y-8" />
      </div>

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="max-w-2xl">
          <p className="text-xs font-semibold uppercase tracking-[0.14em] text-sovereign-gold">
            Sovereign product ecosystem
          </p>
          <h2 className="mt-2 text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">
            One institution. Three pillars.
          </h2>
          <p className="mt-4 text-lg text-sovereign-ivory/65">
            Sankofa governs trust and continuity. Phoenix delivers sovereign cloud. PanTel carries secure
            telecommunications — unified under Hospitaller-grade institutional standards.
          </p>
        </div>

        <div className="mt-12 grid gap-6 lg:grid-cols-3">
          <ProductCard division="sankofa" />
          <ProductCard division="phoenix" />
          <ProductCard division="pantel" />
        </div>
      </div>
    </section>
  );
}
