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

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

export const metadata = {
  title: 'Marketplace — Sankofa Phoenix',
  description: 'Sovereign stack services and platform offerings on Phoenix Cloud.',
};

export default function MarketplacePage() {
  return (
    <div className="flex min-h-screen flex-col bg-sovereign-obsidian text-sovereign-ivory">
      <CorporateHeader />
      <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-16 sm:px-6 lg:px-8">
        <div className="max-w-3xl">
          <p className="text-xs font-semibold uppercase tracking-wider text-sovereign-gold">Phoenix marketplace</p>
          <h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">Sovereign platform catalog</h1>
          <p className="mt-4 text-lg text-sovereign-ivory/70">
            Subscribe to ledger, identity, wallet, orchestration, and Chain 138 onboarding services. Sign in to
            manage entitlements and deployments.
          </p>
          <Link
            href={ECOSYSTEM_SIGN_IN_PATH}
            className="mt-8 inline-flex items-center gap-2 rounded-lg bg-sovereign-gold px-5 py-2.5 text-sm font-semibold text-sovereign-obsidian no-underline hover:bg-sovereign-ivory"
          >
            Sign in to subscribe
            <ArrowRight className="h-4 w-4" aria-hidden />
          </Link>
        </div>

        <section className="mt-16">
          <h2 className="text-xl font-semibold">Product divisions</h2>
          <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {productDivisions.map((product) => (
              <article
                key={product.id}
                className="rounded-xl border border-sovereign-bronze/25 bg-sovereign-midnight/40 p-5"
              >
                <p className="text-xs font-semibold uppercase tracking-wider text-sovereign-gold/90">
                  {product.tagline}
                </p>
                <h3 className="mt-1 text-lg font-semibold">{product.name}</h3>
                <p className="mt-2 text-sm text-sovereign-ivory/60">{product.description}</p>
                <Link
                  href={product.href}
                  className="mt-4 inline-flex items-center gap-1 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-3.5 w-3.5" aria-hidden />
                </Link>
              </article>
            ))}
          </div>
        </section>

        <section className="mt-16">
          <h2 className="text-xl font-semibold">Platform services</h2>
          <div className="mt-6 grid gap-4 sm:grid-cols-2">
            {platformServices.map((service) => (
              <article
                key={service.name}
                className="rounded-xl border border-sovereign-bronze/25 bg-sovereign-midnight/30 p-5"
              >
                <p className="text-xs font-medium uppercase tracking-wide text-sovereign-bronze">
                  {service.category}
                </p>
                <h3 className="mt-1 text-base font-semibold">{service.name}</h3>
                <p className="mt-2 text-sm text-sovereign-ivory/60">{service.description}</p>
                {service.href ? (
                  <Link
                    href={service.href}
                    className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
                    {...(service.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                  >
                    Learn more
                    <ArrowRight className="h-3.5 w-3.5" aria-hidden />
                  </Link>
                ) : null}
              </article>
            ))}
          </div>
        </section>

        <section className="mt-16">
          <h2 className="text-xl font-semibold">Partner &amp; interoperability services</h2>
          <p className="mt-2 max-w-2xl text-sm text-sovereign-ivory/60">
            B2B, CTI, Chain 138 onboarding, and X-Road — provisioned via Phoenix marketplace entitlements.
          </p>
          <div className="mt-6 grid gap-4 sm:grid-cols-2">
            {partnerStackServices.map((service) => (
              <article
                key={service.name}
                className="rounded-xl border border-sovereign-gold/20 bg-sovereign-midnight/40 p-5"
              >
                <p className="text-xs font-medium uppercase tracking-wide text-sovereign-gold/90">
                  {service.category}
                </p>
                <h3 className="mt-1 text-base font-semibold">{service.name}</h3>
                <p className="mt-2 text-sm text-sovereign-ivory/60">{service.description}</p>
                {service.href ? (
                  <Link
                    href={service.href}
                    className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
                    {...(service.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                  >
                    View offering
                    <ArrowRight className="h-3.5 w-3.5" aria-hidden />
                  </Link>
                ) : null}
              </article>
            ))}
          </div>
        </section>

        <section className="mt-16 rounded-xl border border-sovereign-bronze/25 bg-sovereign-midnight/30 p-6">
          <h2 className="text-lg font-semibold">Complete Credential</h2>
          <p className="mt-2 text-sm text-sovereign-ivory/65">
            Institutional verifiable credentials and eIDAS-aligned issuance — separate issuance console.
          </p>
          <Link
            href={COMPLETE_CREDENTIAL_URL}
            className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-sovereign-gold no-underline hover:text-sovereign-ivory"
            target="_blank"
            rel="noopener noreferrer"
          >
            Open Complete Credential
            <ArrowRight className="h-3.5 w-3.5" aria-hidden />
          </Link>
        </section>
      </main>
      <CorporateFooter />
    </div>
  );
}
