import React from 'react'
import SeoHead from '../../components/seo/SeoHead'

function PlanCard({ plan, paymentsEnabled }) {
  return (
    <article className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6">
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-2xl font-semibold tracking-[-0.04em] text-white">{plan.name}</h2>
        <span className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-300">{plan.badge}</span>
      </div>
      <div className="mt-5 flex items-end gap-2">
        <span className="text-4xl font-semibold tracking-[-0.05em] text-white">{plan.price}</span>
        <span className="pb-1 text-sm text-slate-400">{plan.interval}</span>
      </div>
      <div className="mt-6 space-y-3 text-sm text-slate-300">
        {plan.features.map((feature) => (
          <div key={feature} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">{feature}</div>
        ))}
      </div>
      <button type="button" disabled className="mt-6 w-full rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 opacity-100">
        {paymentsEnabled ? 'Checkout coming next phase' : 'Payments disabled for this launch'}
      </button>
    </article>
  )
}

export default function AcademyPricing({ seo, plans, paymentsEnabled }) {
  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.16),_transparent_24%),linear-gradient(180deg,_#111827_0%,_#0f172a_100%)] px-4 py-8 sm:px-6 lg:px-8">
      <SeoHead seo={seo || {}} title="Skinbase AI Academy Pricing" description={seo?.description} />

      <div className="mx-auto max-w-[1320px] space-y-8">
        <section className="rounded-[38px] border border-white/10 bg-black/20 p-8 md:p-10">
          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Plans</p>
          <h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">Choose your AI Academy plan.</h1>
          <p className="mt-4 max-w-3xl text-base leading-8 text-slate-300">Start free, unlock Creator and Pro previews, and keep the billing flow disabled until Stripe and Cashier are introduced in the next phase.</p>
        </section>

        <section className="grid gap-5 lg:grid-cols-3">
          {plans.map((plan) => (
            <PlanCard key={plan.name} plan={plan} paymentsEnabled={paymentsEnabled} />
          ))}
        </section>
      </div>
    </main>
  )
}