import { ArrowRight, Landmark, LockKeyhole, ShieldCheck } from 'lucide-react';
import Link from 'next/link';

import { CorporateFooter } from '@/components/corporate/CorporateFooter';
import { CorporateHeader } from '@/components/corporate/CorporateHeader';

export const metadata = {
  title: 'OpenPayd Financial Services Connector — Sankofa Marketplace',
  description: 'Operator-provisioned OpenPayd connector for Phoenix Financial Cloud subscribers.',
};

const skus = [
  'openpayd-connector-sandbox',
  'openpayd-connector-production-readonly',
  'openpayd-connector-production-payouts',
  'openpayd-connector-digital-assets-gated',
];

export default function OpenPaydMarketplacePage() {
  return (
    <div className="flex min-h-screen flex-col bg-sovereign-obsidian text-sovereign-ivory">
      <CorporateHeader />
      <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-16 sm:px-6 lg:px-8">
        <p className="text-xs font-semibold uppercase tracking-wider text-sovereign-gold">
          Phoenix Financial Cloud
        </p>
        <h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
          OpenPayd Financial Services Connector
        </h1>
        <p className="mt-4 max-w-3xl text-lg text-sovereign-ivory/70">
          Operator-provisioned access to OpenPayd-backed accounts, virtual IBANs, beneficiary validation,
          payouts, Open Banking, and gated digital-asset capabilities through Phoenix controls.
        </p>

        <div className="mt-10 grid gap-4 md:grid-cols-3">
          {[
            { icon: Landmark, title: 'Financial rails', text: 'Accounts, payment accounts, beneficiaries, payouts, and Open Banking behind tenant policy.' },
            { icon: ShieldCheck, title: 'Phoenix gated', text: 'Entitlements, approval gates, audit records, and reconciliation boundaries stay in Phoenix.' },
            { icon: LockKeyhole, title: 'Operator provisioned', text: 'Credentials and production mutating traffic are controlled by authorized operators only.' },
          ].map((item) => {
            const Icon = item.icon;
            return (
              <article key={item.title} className="rounded-lg border border-sovereign-bronze/25 bg-sovereign-midnight/40 p-5">
                <Icon className="h-6 w-6 text-sovereign-gold" />
                <h2 className="mt-3 text-lg font-semibold">{item.title}</h2>
                <p className="mt-2 text-sm text-sovereign-ivory/60">{item.text}</p>
              </article>
            );
          })}
        </div>

        <section className="mt-10 rounded-lg border border-sovereign-bronze/25 bg-sovereign-midnight/30 p-6">
          <h2 className="text-xl font-semibold">Catalog SKUs</h2>
          <div className="mt-4 grid gap-3 sm:grid-cols-2">
            {skus.map((sku) => (
              <div key={sku} className="rounded-md border border-white/10 bg-black/20 p-3 font-mono text-sm text-sovereign-gold">
                {sku}
              </div>
            ))}
          </div>
          <p className="mt-4 text-sm text-sovereign-ivory/65">
            Production URLs, production credentials, webhook keys, and digital-asset contracts remain gated
            OpenPayd onboarding inputs. Production mutating actions are disabled by default.
          </p>
          <div className="mt-6 flex flex-col gap-3 sm:flex-row">
            <Link
              href="/marketplace/entitlements/phoenix-openpayd-connector"
              className="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"
            >
              Request subscription <ArrowRight className="h-4 w-4" aria-hidden />
            </Link>
            <Link
              href="/marketplace/entitlements/phoenix-openpayd-connector/dashboard"
              className="inline-flex items-center gap-2 rounded-lg border border-sovereign-bronze/40 px-5 py-2.5 text-sm font-semibold text-sovereign-ivory no-underline hover:border-sovereign-gold"
            >
              Open dashboard
            </Link>
          </div>
        </section>
      </main>
      <CorporateFooter />
    </div>
  );
}
