Implement academy analytics, billing, and web stories updates

resources/js/components/academy/billing/AccessBadge.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const LABELS = {
+  free: 'Free',
+  creator: 'Creator',
+  pro: 'Pro',
+  admin: 'Admin',
+}
+
+const CLASSES = {
+  free: 'border-white/12 bg-white/[0.06] text-slate-200',
+  creator: 'border-amber-300/25 bg-amber-300/12 text-amber-100',
+  pro: 'border-sky-300/25 bg-sky-300/12 text-sky-100',
+  admin: 'border-emerald-300/25 bg-emerald-300/12 text-emerald-100',
+}
+
+export default function AccessBadge({ tier = 'free', className = '' }) {
+  const normalizedTier = typeof tier === 'string' ? tier.toLowerCase() : 'free'
+  const label = LABELS[normalizedTier] || 'Free'
+  const tone = CLASSES[normalizedTier] || CLASSES.free
+
+  return (
+    <span className={`inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${tone} ${className}`.trim()}>
+      {label}
+    </span>
+  )
+}

resources/js/components/academy/billing/PlanCard.jsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { Link } from '@inertiajs/react'
+import AccessBadge from './AccessBadge'
+
+function ActionButton({ disabled, children, onClick, href, tone = 'primary' }) {
+  const toneClass = {
+    primary: 'border-sky-300/25 bg-sky-300/12 text-sky-100 hover:border-sky-300/40 hover:bg-sky-300/18',
+    emerald: 'border-emerald-300/25 bg-emerald-300/10 text-emerald-100 hover:bg-emerald-300/18',
+    default: 'border-white/10 bg-white/[0.05] text-white hover:border-white/20 hover:bg-white/[0.08]',
+  }[tone] ?? 'border-white/10 bg-white/[0.05] text-white hover:border-white/20 hover:bg-white/[0.08]'
+
+  if (href) {
+    return <Link href={href} className={`inline-flex w-full items-center justify-center rounded-full border px-5 py-3 text-sm font-semibold transition ${toneClass}`}>{children}</Link>
+  }
+
+  return (
+    <button type="button" disabled={disabled} onClick={onClick} className={`inline-flex w-full items-center justify-center rounded-full border px-5 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60 ${toneClass}`}>
+      {children}
+    </button>
+  )
+}
+
+export default function PlanCard({ product, selectedPlan, currentTier, isSubscribed, activePlanKey, billingEnabled, loginHref, manageHref, onCheckout }) {
+  const activeTier = typeof currentTier === 'string' ? currentTier.toLowerCase() : 'free'
+  const isActivePlan = selectedPlan?.key === activePlanKey
+  // Pro subscribers already have creator access — don't show a separate "switch" CTA for creator card
+  const isHigherTierCovered = activeTier === 'pro' && product.tier === 'creator'
+  const isPlanReady = Boolean(selectedPlan?.configured && selectedPlan?.price_id_valid)
+  // User has a different active subscription (not this plan)
+  const isSubscribedElsewhere = isSubscribed && !isActivePlan
+
+  return (
+    <article className={`relative overflow-hidden rounded-[32px] border p-6 transition md:p-7 ${
+      isActivePlan
+        ? 'border-emerald-300/25 bg-[linear-gradient(180deg,rgba(16,185,129,0.1),rgba(15,23,42,0.96))] shadow-[0_28px_90px_rgba(5,150,105,0.14)]'
+        : product.featured
+          ? 'border-sky-300/25 bg-[linear-gradient(180deg,rgba(14,165,233,0.12),rgba(15,23,42,0.96))] shadow-[0_28px_90px_rgba(2,132,199,0.14)]'
+          : 'border-white/10 bg-white/[0.04]'
+    }`}>
+      <div className="absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent)]" />
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">{product.badge}</p>
+          <h2 className="mt-3 text-3xl font-semibold tracking-[-0.05em] text-white">{product.name}</h2>
+          <p className="mt-3 text-sm leading-7 text-slate-300">{product.description}</p>
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-2">
+          {isActivePlan
+            ? <span className="rounded-full border border-emerald-300/30 bg-emerald-300/14 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-100">Your plan</span>
+            : <AccessBadge tier={product.tier} />}
+        </div>
+      </div>
+
+      <div className="mt-6 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
+        <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-400">Monthly</p>
+        <p className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{selectedPlan?.price_display || '—'}</p>
+        <p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">Billed monthly · cancel anytime</p>
+      </div>
+
+      <div className="mt-6 space-y-3 text-sm text-slate-300">
+        {product.features.map((feature) => (
+          <div key={feature} className="flex items-start gap-2.5 rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
+            <span className="mt-px shrink-0 text-emerald-400">✓</span>
+            <span>{feature}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 space-y-3">
+        {/* Active plan: manage */}
+        {isActivePlan ? (
+          <ActionButton href={manageHref} tone="emerald">Manage subscription</ActionButton>
+        ) : null}
+
+        {/* Subscribed elsewhere: switch */}
+        {isSubscribedElsewhere && !isHigherTierCovered ? (
+          <ActionButton href={manageHref} tone="default">Switch to {product.name}</ActionButton>
+        ) : null}
+
+        {/* Higher tier already covers this plan */}
+        {isHigherTierCovered && !isActivePlan ? (
+          <p className="text-center text-xs text-slate-500">Included in your Pro plan</p>
+        ) : null}
+
+        {/* Not subscribed, not logged in */}
+        {!isSubscribed && loginHref ? (
+          <ActionButton href={loginHref} tone="primary">
+            {billingEnabled ? `Get ${product.name}` : 'Coming soon'}
+          </ActionButton>
+        ) : null}
+
+        {/* Not subscribed, logged in */}
+        {!isSubscribed && !loginHref ? (
+          <ActionButton
+            disabled={!billingEnabled || !isPlanReady}
+            onClick={() => onCheckout(selectedPlan)}
+            tone="primary"
+          >
+            {!billingEnabled ? 'Coming soon' : isPlanReady ? `Get ${product.name} — ${selectedPlan?.price_display || ''}` : 'Not available yet'}
+          </ActionButton>
+        ) : null}
+      </div>
+    </article>
+  )
+}

resources/js/components/academy/billing/UpgradeCta.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link } from '@inertiajs/react'
+
+export default function UpgradeCta({ title, description, primaryHref, primaryLabel, secondaryHref = null, secondaryLabel = null }) {
+  return (
+    <section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(8,47,73,0.92),rgba(30,41,59,0.94),rgba(67,20,7,0.82))] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.32)] md:p-7">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-100/85">Academy Billing</p>
+      <h2 className="mt-3 text-2xl font-semibold tracking-[-0.04em] text-white">{title}</h2>
+      <p className="mt-3 max-w-2xl text-sm leading-7 text-slate-200/90">{description}</p>
+      <div className="mt-5 flex flex-wrap gap-3">
+        <Link href={primaryHref} className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18">{primaryLabel}</Link>
+        {secondaryHref && secondaryLabel ? <Link href={secondaryHref} className="rounded-full border border-white/10 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]">{secondaryLabel}</Link> : null}
+      </div>
+    </section>
+  )
+}