'use client';

import { ArrowRight, ExternalLink } from 'lucide-react';
import Link from 'next/link';

import { EcosystemTrinitySection } from '@/components/brand';
import { CorporateFooter } from '@/components/corporate/CorporateFooter';
import { CorporateHeader } from '@/components/corporate/CorporateHeader';
import {
  HeroEcosystemGraphic,
  PhilosophyStepGraphic,
  PlatformStackGraphic,
  ProductCardBanner,
  SovereignBackdrop,
  TrustComplianceGraphic,
} from '@/components/corporate/graphics';
import { InstitutionalComplianceHub } from '@/components/corporate/InstitutionalComplianceHub';
import { InstitutionalGradeSection } from '@/components/corporate/InstitutionalGradeSection';
import {
  ECOSYSTEM_SIGN_IN_PATH,
  philosophySteps,
  platformServices,
  productDivisions,
  solutionVerticals,
} from '@/lib/corporate-site-data';

const heroStats = [
  { value: 'A−', label: 'Chain 138 L1', accent: 'text-emerald-400' },
  { value: '90', label: 'Sovereign cloud score', accent: 'text-sky-400' },
  { value: '3', label: 'Core pillars', accent: 'text-sovereign-gold' },
  { value: '8', label: 'Live PMM pools', accent: 'text-sovereign-copper' },
];

export function CorporateLandingPage() {
  return (
    <div className="flex min-h-screen flex-col bg-sovereign-obsidian text-sovereign-ivory">
      <CorporateHeader />

      <main className="flex-1">
        {/* Hero */}
        <section className="relative overflow-hidden border-b border-sovereign-bronze/20">
          <SovereignBackdrop variant="grid" />
          <SovereignBackdrop variant="mesh" className="opacity-80" />

          <div className="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
            <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
              <div>
                <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-sovereign-gold/30 bg-sovereign-gold/10 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-sovereign-gold">
                  <span className="h-1.5 w-1.5 rounded-full bg-sovereign-gold" aria-hidden />
                  Sovereign Technology Institution
                </p>
                <h1 className="max-w-4xl text-4xl font-bold tracking-tight text-sovereign-ivory sm:text-5xl lg:text-6xl">
                  Sovereign technology infrastructure for{' '}
                  <span className="text-sovereign-gold">trust, cloud, telecom,</span> and digital
                  continuity
                </h1>
                <p className="mt-6 max-w-2xl text-lg leading-relaxed text-sovereign-ivory/70">
                  Sankofa Nexus operates critical identity, blockchain, cloud, and telecommunications
                  infrastructure — institutional-grade systems for governments, orders, and partners who
                  cannot depend on hyperscaler public cloud.
                </p>
                <div className="mt-10 flex flex-wrap items-center gap-4">
                  <Link
                    href="#ecosystem"
                    className="inline-flex items-center gap-2 rounded-lg bg-sovereign-gold px-6 py-3 text-sm font-semibold text-sovereign-obsidian no-underline transition hover:bg-sovereign-ivory"
                  >
                    Explore the ecosystem
                    <ArrowRight className="h-4 w-4" aria-hidden />
                  </Link>
                  <Link
                    href={ECOSYSTEM_SIGN_IN_PATH}
                    className="inline-flex items-center gap-2 rounded-lg border border-sovereign-bronze/40 bg-sovereign-midnight/50 px-6 py-3 text-sm font-semibold text-sovereign-ivory no-underline transition hover:border-sovereign-gold/40 hover:bg-sovereign-midnight"
                  >
                    Sign in to console
                  </Link>
                </div>

                <dl className="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-4">
                  {heroStats.map((stat) => (
                    <div
                      key={stat.label}
                      className="rounded-xl border border-sovereign-bronze/25 bg-sovereign-midnight/50 px-4 py-3 backdrop-blur-sm"
                    >
                      <dt className="sr-only">{stat.label}</dt>
                      <dd className={`text-2xl font-bold tabular-nums ${stat.accent}`}>{stat.value}</dd>
                      <dd className="mt-1 text-xs text-sovereign-ivory/45">{stat.label}</dd>
                    </div>
                  ))}
                </dl>
              </div>

              <HeroEcosystemGraphic className="hidden lg:block" />
            </div>
          </div>
        </section>

        <EcosystemTrinitySection />

        {/* Philosophy */}
        <section className="relative border-b border-sovereign-bronze/20 bg-sovereign-midnight/30 py-14">
          <SovereignBackdrop variant="nodes" className="opacity-60" />
          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-10 max-w-2xl">
              <h2 className="text-2xl font-bold text-sovereign-ivory sm:text-3xl">
                Remember · Retrieve · Restore · Rise
              </h2>
              <p className="mt-3 text-sovereign-ivory/60">
                The Sankofa philosophy — institutional continuity from ancestral wisdom to sovereign
                infrastructure.
              </p>
            </div>
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {philosophySteps.map((step, index) => (
                <div
                  key={step.verb}
                  className="group relative overflow-hidden rounded-xl border border-sovereign-bronze/25 bg-sovereign-midnight/40 p-5 transition hover:border-sovereign-gold/30 hover:bg-sovereign-midnight/60"
                >
                  <PhilosophyStepGraphic verb={step.verb} index={index} />
                  <h3 className="text-xl font-semibold text-sovereign-ivory">{step.verb}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-sovereign-ivory/60">{step.detail}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Product divisions */}
        <section id="products" className="relative scroll-mt-20 py-20">
          <SovereignBackdrop variant="grid" className="opacity-50" />
          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="max-w-2xl">
              <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">Products</h2>
              <p className="mt-4 text-lg text-sovereign-ivory/60">
                From sovereign cloud to verifiable credentials — integrated products under one ecosystem,
                modeled for institutional scale.
              </p>
            </div>

            <div className="mt-12 grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
              {productDivisions.map((product) => {
                const Icon = product.icon;
                return (
                  <article
                    key={product.id}
                    className="group relative flex flex-col overflow-hidden rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/40 transition hover:border-sovereign-gold/35 hover:bg-sovereign-midnight/60"
                  >
                    <ProductCardBanner productId={product.id} />
                    <div className="flex flex-1 flex-col px-6 pb-6">
                      <div className="mb-4 flex items-start justify-between gap-3">
                        <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-sovereign-gold/25 bg-sovereign-gold/10 text-sovereign-gold">
                          <Icon className="h-6 w-6" aria-hidden />
                        </div>
                        {product.external ? (
                          <ExternalLink
                            className="h-4 w-4 shrink-0 text-sovereign-ivory/30 group-hover:text-sovereign-gold"
                            aria-hidden
                          />
                        ) : null}
                      </div>
                      <p className="text-xs font-semibold uppercase tracking-wider text-sovereign-gold/90">
                        {product.tagline}
                      </p>
                      <h3 className="mt-1 text-xl font-semibold text-sovereign-ivory">{product.name}</h3>
                      <p className="mt-3 flex-1 text-sm leading-relaxed text-sovereign-ivory/60">
                        {product.description}
                      </p>
                      <ul className="mt-4 space-y-1.5">
                        {product.highlights.map((item) => (
                          <li key={item} className="flex items-center gap-2 text-sm text-sovereign-ivory/75">
                            <span className="h-1.5 w-1.5 rounded-full bg-sovereign-gold" aria-hidden />
                            {item}
                          </li>
                        ))}
                      </ul>
                      <Link
                        href={product.href}
                        className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
                        {...(product.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                      >
                        Learn more
                        <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" aria-hidden />
                      </Link>
                    </div>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        {/* Platform services */}
        <section id="services" className="relative scroll-mt-20 border-y border-sovereign-bronze/20 bg-sovereign-midnight/20 py-20">
          <SovereignBackdrop variant="mesh" className="opacity-40" />
          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid gap-12 lg:grid-cols-[1fr_minmax(0,280px)] lg:items-start">
              <div>
                <div className="max-w-2xl">
                  <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">
                    Platform services
                  </h2>
                  <p className="mt-4 text-lg text-sovereign-ivory/60">
                    Owned core primitives — ledger, identity, wallet, orchestration — available through the
                    Phoenix marketplace without third-party platform lock-in.
                  </p>
                </div>

                <div className="mt-12 grid gap-4 sm:grid-cols-2">
                  {platformServices.map((service) => {
                    const Icon = service.icon;
                    return (
                      <div
                        key={service.name}
                        className="rounded-xl border border-sovereign-bronze/25 bg-sovereign-obsidian/60 p-5 transition hover:border-sovereign-gold/25 hover:bg-sovereign-midnight/40"
                      >
                        <div className="flex items-center gap-3">
                          <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-sovereign-bronze/30 bg-sovereign-midnight text-sovereign-gold">
                            <Icon className="h-5 w-5" aria-hidden />
                          </div>
                          <div>
                            <p className="text-xs font-medium uppercase tracking-wide text-sovereign-bronze">
                              {service.category}
                            </p>
                            <h3 className="text-base font-semibold text-sovereign-ivory">{service.name}</h3>
                          </div>
                        </div>
                        <p className="mt-3 text-sm leading-relaxed text-sovereign-ivory/60">
                          {service.description}
                        </p>
                      </div>
                    );
                  })}
                </div>

                <div className="mt-10">
                  <Link
                    href="https://portal.sankofa.nexus"
                    className="inline-flex items-center gap-2 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
                  >
                    Browse full marketplace catalog
                    <ArrowRight className="h-4 w-4" aria-hidden />
                  </Link>
                </div>
              </div>

              <PlatformStackGraphic className="mx-auto hidden lg:block lg:sticky lg:top-24" />
            </div>
          </div>
        </section>

        {/* Solutions */}
        <section id="solutions" className="relative scroll-mt-20 py-20">
          <SovereignBackdrop variant="nodes" className="opacity-30" />
          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="max-w-2xl">
              <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory sm:text-4xl">
                Industry solutions
              </h2>
              <p className="mt-4 text-lg text-sovereign-ivory/60">
                Purpose-built stacks for regulated industries — public sector, finance, healthcare, and
                telecom.
              </p>
            </div>

            <div className="mt-12 grid gap-6 sm:grid-cols-2">
              {solutionVerticals.map((vertical) => {
                const Icon = vertical.icon;
                return (
                  <div
                    key={vertical.name}
                    className="relative flex gap-4 overflow-hidden rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/30 p-6"
                  >
                    <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-sovereign-gold/20 bg-sovereign-gold/10 text-sovereign-gold">
                      <Icon className="h-7 w-7" aria-hidden />
                    </div>
                    <div className="relative">
                      <h3 className="text-lg font-semibold text-sovereign-ivory">{vertical.name}</h3>
                      <p className="mt-2 text-sm leading-relaxed text-sovereign-ivory/60">
                        {vertical.description}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        <InstitutionalGradeSection />

        <InstitutionalComplianceHub />

        {/* Resources / trust */}
        <section id="resources" className="relative scroll-mt-20 border-t border-sovereign-bronze/20 bg-sovereign-midnight/30 py-20">
          <SovereignBackdrop variant="mesh" className="opacity-50" />
          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
              <div>
                <TrustComplianceGraphic className="mb-8 lg:hidden" />
                <h2 className="text-3xl font-bold tracking-tight text-sovereign-ivory">
                  Built for institutional trust
                </h2>
                <p className="mt-4 text-lg leading-relaxed text-sovereign-ivory/75">
                  Sankofa Phoenix operates under sovereign governance with SOC 2, GDPR, and sector-specific
                  compliance pathways. Identity, ledger, and credential services are designed for operators
                  who need auditability without outsourcing control.
                </p>
                <ul className="mt-6 space-y-3 text-sm text-sovereign-ivory/75">
                  {[
                    'Sovereign Keycloak identity — no Azure AD dependency',
                    'Multi-tenant Proxmox orchestration with GitOps',
                    'Chain 138 DeFi Oracle Meta Mainnet & cross-chain mesh',
                    'Complete Credential eIDAS-aligned issuance',
                  ].map((item) => (
                    <li key={item} className="flex items-center gap-3">
                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-400">
                        ✓
                      </span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>

              <div className="space-y-6">
                <TrustComplianceGraphic className="hidden lg:block" />
                <div className="rounded-2xl border border-sovereign-bronze/25 bg-sovereign-midnight/60 p-8 shadow-xl">
                  <p className="text-sm font-semibold uppercase tracking-wider text-sovereign-gold">
                    Get started
                  </p>
                  <h3 className="mt-2 text-2xl font-bold text-sovereign-ivory">
                    Join the Sankofa ecosystem
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-sovereign-ivory/60">
                    Sign in to access Phoenix Cloud, marketplace subscriptions, partner tools, and client
                    workspaces — one identity across the platform.
                  </p>
                  <div className="mt-6 flex flex-col gap-3 sm:flex-row">
                    <Link
                      href={ECOSYSTEM_SIGN_IN_PATH}
                      className="inline-flex flex-1 items-center justify-center rounded-lg bg-sovereign-gold px-5 py-3 text-sm font-semibold text-sovereign-obsidian no-underline hover:bg-sovereign-ivory"
                    >
                      Sign in to ecosystem
                    </Link>
                    <Link
                      href="https://phoenix.sankofa.nexus"
                      className="inline-flex flex-1 items-center justify-center rounded-lg border border-sovereign-bronze/40 px-5 py-3 text-sm font-semibold text-sovereign-ivory no-underline hover:bg-sovereign-midnight"
                    >
                      Phoenix Cloud
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <CorporateFooter />
    </div>
  );
}
