'use client';

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

import { CorporateFooter } from '@/components/corporate/CorporateFooter';
import { CorporateHeader } from '@/components/corporate/CorporateHeader';
import { InstitutionalGradeSection } from '@/components/corporate/InstitutionalGradeSection';
import {
  ECOSYSTEM_SIGN_IN_PATH,
  philosophySteps,
  platformServices,
  productDivisions,
  solutionVerticals,
} from '@/lib/corporate-site-data';

export function CorporateLandingPage() {
  return (
    <div className="flex min-h-screen flex-col bg-gray-950 text-gray-100">
      <CorporateHeader />

      <main className="flex-1">
        {/* Hero */}
        <section className="relative overflow-hidden border-b border-gray-800/60">
          <div
            className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_-20%,rgba(251,146,60,0.18),transparent)]"
            aria-hidden
          />
          <div className="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-28 lg:px-8">
            <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-orange-400">
              Sovereign Technologies
            </p>
            <h1 className="max-w-4xl text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
              Build on infrastructure you{' '}
              <span className="bg-gradient-to-r from-orange-300 to-amber-200 bg-clip-text text-transparent">
                own and control
              </span>
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-relaxed text-gray-400">
              Sankofa delivers sovereign cloud, identity, financial rails, and credential infrastructure —
              the complete ecosystem for institutions that cannot depend on hyperscaler public cloud.
            </p>
            <div className="mt-10 flex flex-wrap items-center gap-4">
              <Link
                href="https://phoenix.sankofa.nexus"
                className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-6 py-3 text-sm font-semibold text-gray-950 no-underline shadow-lg shadow-orange-500/25 transition hover:from-orange-400 hover:to-amber-400"
              >
                Explore Phoenix Cloud
                <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-gray-700 bg-gray-900/50 px-6 py-3 text-sm font-semibold text-white no-underline transition hover:border-gray-600 hover:bg-gray-800"
              >
                Sign in to ecosystem
              </Link>
            </div>
          </div>
        </section>

        {/* Philosophy */}
        <section className="border-b border-gray-800/60 bg-gray-900/30 py-14">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {philosophySteps.map((step, index) => (
                <div key={step.verb} className="relative rounded-xl border border-gray-800/80 bg-gray-900/40 p-5">
                  <span className="text-xs font-medium uppercase tracking-wider text-orange-500/80">
                    {String(index + 1).padStart(2, '0')}
                  </span>
                  <h2 className="mt-2 text-xl font-semibold text-white">{step.verb}</h2>
                  <p className="mt-2 text-sm leading-relaxed text-gray-400">{step.detail}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Product divisions */}
        <section id="products" className="scroll-mt-20 py-20">
          <div className="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-white sm:text-4xl">Products</h2>
              <p className="mt-4 text-lg text-gray-400">
                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 flex flex-col rounded-2xl border border-gray-800 bg-gray-900/40 p-6 transition hover:border-orange-500/40 hover:bg-gray-900/70"
                  >
                    <div className="mb-4 flex items-start justify-between gap-3">
                      <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20">
                        <Icon className="h-5 w-5" aria-hidden />
                      </div>
                      {product.external ? (
                        <ExternalLink className="h-4 w-4 shrink-0 text-gray-600 group-hover:text-orange-400" aria-hidden />
                      ) : null}
                    </div>
                    <p className="text-xs font-semibold uppercase tracking-wider text-orange-400/90">
                      {product.tagline}
                    </p>
                    <h3 className="mt-1 text-xl font-semibold text-white">{product.name}</h3>
                    <p className="mt-3 flex-1 text-sm leading-relaxed text-gray-400">{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-gray-300">
                          <span className="h-1 w-1 rounded-full bg-orange-500" aria-hidden />
                          {item}
                        </li>
                      ))}
                    </ul>
                    <Link
                      href={product.href}
                      className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-orange-300 no-underline hover:text-orange-200"
                      {...(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>
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        {/* Platform services */}
        <section id="services" className="scroll-mt-20 border-y border-gray-800/60 bg-gray-900/20 py-20">
          <div className="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-white sm:text-4xl">Platform services</h2>
              <p className="mt-4 text-lg text-gray-400">
                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 lg:grid-cols-3">
              {platformServices.map((service) => {
                const Icon = service.icon;
                return (
                  <div
                    key={service.name}
                    className="rounded-xl border border-gray-800 bg-gray-950/60 p-5 transition hover:border-gray-700"
                  >
                    <div className="flex items-center gap-3">
                      <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gray-800 text-orange-400">
                        <Icon className="h-4 w-4" aria-hidden />
                      </div>
                      <div>
                        <p className="text-xs font-medium uppercase tracking-wide text-gray-500">{service.category}</p>
                        <h3 className="text-base font-semibold text-white">{service.name}</h3>
                      </div>
                    </div>
                    <p className="mt-3 text-sm leading-relaxed text-gray-400">{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-orange-300 no-underline hover:text-orange-200"
              >
                Browse full marketplace catalog
                <ArrowRight className="h-4 w-4" aria-hidden />
              </Link>
            </div>
          </div>
        </section>

        {/* Solutions */}
        <section id="solutions" className="scroll-mt-20 py-20">
          <div className="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-white sm:text-4xl">Industry solutions</h2>
              <p className="mt-4 text-lg text-gray-400">
                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="flex gap-4 rounded-2xl border border-gray-800 bg-gray-900/30 p-6"
                  >
                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/20 to-amber-500/10 text-orange-400">
                      <Icon className="h-6 w-6" aria-hidden />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-white">{vertical.name}</h3>
                      <p className="mt-2 text-sm leading-relaxed text-gray-400">{vertical.description}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        <InstitutionalGradeSection />

        {/* Resources / trust */}
        <section id="resources" className="scroll-mt-20 border-t border-gray-800/60 bg-gray-900/30 py-20">
          <div className="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>
                <h2 className="text-3xl font-bold tracking-tight text-white">Built for institutional trust</h2>
                <p className="mt-4 text-lg leading-relaxed text-gray-400">
                  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-gray-300">
                  <li className="flex items-center gap-2">
                    <span className="text-orange-500">✓</span> Sovereign Keycloak identity — no Azure AD dependency
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-orange-500">✓</span> Multi-tenant Proxmox orchestration with GitOps
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-orange-500">✓</span> Chain 138 DeFi Oracle Meta Mainnet & cross-chain mesh
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-orange-500">✓</span> Complete Credential eIDAS-aligned issuance
                  </li>
                </ul>
              </div>

              <div className="rounded-2xl border border-gray-800 bg-gradient-to-br from-gray-900 to-gray-950 p-8 shadow-xl">
                <p className="text-sm font-semibold uppercase tracking-wider text-orange-400">Get started</p>
                <h3 className="mt-2 text-2xl font-bold text-white">Join the Sankofa ecosystem</h3>
                <p className="mt-3 text-sm leading-relaxed text-gray-400">
                  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-gradient-to-r from-orange-500 to-amber-500 px-5 py-3 text-sm font-semibold text-gray-950 no-underline hover:from-orange-400 hover:to-amber-400"
                  >
                    Sign in to ecosystem
                  </Link>
                  <Link
                    href="https://phoenix.sankofa.nexus"
                    className="inline-flex flex-1 items-center justify-center rounded-lg border border-gray-700 px-5 py-3 text-sm font-semibold text-white no-underline hover:bg-gray-800"
                  >
                    Phoenix Cloud
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <CorporateFooter />
    </div>
  );
}
