'use client'
import { useState } from 'react'
import { useAuth } from '@/components/AuthProvider'
import { LoginButton } from '@/components/LoginButton'
import Link from 'next/link'
import Image from 'next/image'
import {
CheckIcon,
SparklesIcon,
ArrowRightIcon,
} from '@heroicons/react/24/outline'
import { useStripeCheckout } from '@/lib/hooks/useStripeCheckout'
import {
PRICING_TIERS,
type BillingInterval,
getPriceForInterval,
formatPrice,
calculateMonthlySavings,
} from '@/lib/stripe'
import Testimonials from '@/components/Testimonials'
// Magical floating orbs component
const MagicalOrbs = () => {
return (
<div className='absolute inset-0 overflow-hidden pointer-events-none'>
{[...Array(8)].map((_, i) => (
<div
key={i}
className='absolute rounded-full animate-pulse'
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
width: `${4 + Math.random() * 8}px`,
height: `${4 + Math.random() * 8}px`,
background: `radial-gradient(circle, rgba(20, 184, 166, 0.6) 0%, rgba(6, 182, 212, 0.3) 50%, transparent 100%)`,
animationDelay: `${Math.random() * 4}s`,
animationDuration: `${3 + Math.random() * 2}s`,
}}
/>
))}
</div>
)
}
export default function PricingPage() {
const { loading } = useAuth()
const { handleCheckout, loading: checkoutLoading } = useStripeCheckout()
const [billingInterval, setBillingInterval] =
useState<BillingInterval>('year')
const handleUpgrade = async (tier: keyof typeof PRICING_TIERS) => {
try {
const selectedTier = PRICING_TIERS[tier]
const pricing = getPriceForInterval(selectedTier, billingInterval)
await handleCheckout(pricing.priceId)
} catch (error) {
console.error('Error initiating checkout:', error)
}
}
if (loading) {
return (
<div className='h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100'>
<div className='animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600' />
</div>
)
}
return (
<div className='min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 relative overflow-hidden'>
<MagicalOrbs />
<div className='absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-teal-500/5 via-transparent to-transparent' />
{/* Navigation */}
<nav className='bg-slate-900/50 backdrop-blur-sm border-b border-teal-600/20 shadow-lg relative z-10'>
<div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
<div className='flex justify-between h-16'>
<div className='flex items-center'>
<Link href='/' className='flex-shrink-0 flex items-center'>
<Image
src='/images/logo-glyph-white.png'
alt='Bookwiz Glyph'
width={24}
height={24}
className='mr-2'
/>
<Image
src='/images/logo-text-white.svg'
alt='Bookwiz'
width={96}
height={24}
/>
</Link>
</div>
<div className='flex items-center space-x-4'>
<LoginButton />
</div>
</div>
</div>
</nav>
{/* Hero Section */}
<div className='relative overflow-hidden'>
<div className='max-w-4xl mx-auto text-center pt-20 pb-16 px-4 sm:px-6 lg:px-8'>
<div className='relative z-10'>
<div className='inline-flex items-center px-4 py-2 rounded-full bg-teal-50 border border-teal-200 text-teal-700 text-sm font-medium mb-6'>
<SparklesIcon className='w-4 h-4 mr-2' />
Choose Your Writing Journey
</div>
<h1 className='text-5xl md:text-6xl font-bold text-slate-900 mb-6 leading-tight'>
Your Next Chapter
<span className='block bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent'>
Starts Here
</span>
</h1>
<p className='text-xl text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed'>
From first draft to published masterpiece, find the perfect plan
to unlock your creative potential and bring your stories to life.
</p>
</div>
</div>
</div>
{/* Billing Toggle */}
<div className='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mb-16 relative z-10'>
<div className='flex justify-center'>
<div className='bg-white/80 backdrop-blur-sm rounded-2xl p-2 border border-slate-200 shadow-lg'>
<div className='flex'>
<button
onClick={() => setBillingInterval('month')}
className={`px-8 py-3 rounded-xl text-sm font-medium transition-all duration-300 ${
billingInterval === 'month'
? 'bg-teal-600 text-white shadow-lg shadow-teal-600/25'
: 'text-slate-600 hover:text-slate-900'
}`}
>
Monthly
</button>
<button
onClick={() => setBillingInterval('year')}
className={`px-8 py-3 rounded-xl text-sm font-medium transition-all duration-300 relative ${
billingInterval === 'year'
? 'bg-teal-600 text-white shadow-lg shadow-teal-600/25'
: 'text-slate-600 hover:text-slate-900'
}`}
>
Annual
<span className='absolute -top-[10px] -right-1 bg-gradient-to-r from-emerald-500 to-teal-500 text-white text-xs px-2 py-1 rounded-full font-medium'>
Save 17%
</span>
</button>
</div>
</div>
</div>
</div>
{/* Pricing Tiers */}
<div className='max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-20 relative z-10'>
<div className='grid lg:grid-cols-3 gap-8'>
{Object.entries(PRICING_TIERS)
.filter(([key, tier]) => tier.id !== 'free') // Remove free tier from cards
.map(([key, tier]) => {
const pricing = getPriceForInterval(tier, billingInterval)
const monthlySavings = calculateMonthlySavings(tier)
return (
<div
key={tier.name}
className={`relative group ${
tier.popular ? 'transform scale-105' : ''
}`}
>
<div
className={`relative rounded-3xl p-8 transition-all duration-300 ${
tier.popular
? 'bg-white border-2 border-teal-200 shadow-2xl shadow-teal-600/10'
: 'bg-white/60 backdrop-blur-sm border border-slate-200 shadow-lg hover:shadow-xl hover:shadow-slate-200/50'
} group-hover:transform group-hover:scale-105`}
>
{tier.popular && (
<div className='absolute -top-4 left-1/2 transform -translate-x-1/2'>
<div className='bg-gradient-to-r from-teal-600 to-cyan-600 py-2 px-6 rounded-full text-sm font-semibold text-white shadow-lg'>
Most Popular
</div>
</div>
)}
<div className='text-center mb-8'>
<div
className='inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6 shadow-lg'
style={{
background:
tier.name === 'Explorer'
? 'linear-gradient(to right, rgb(13 148 136), rgb(6 182 212))'
: tier.name === 'Storyteller'
? 'linear-gradient(to right, rgb(6 182 212), rgb(20 184 166))'
: 'linear-gradient(to right, rgb(245 158 11), rgb(249 115 22))',
}}
>
<tier.icon className='h-8 w-8 text-white drop-shadow-sm' />
</div>
<h3 className='text-2xl font-bold text-slate-900 mb-2'>
{tier.name}
</h3>
<p className='text-slate-600 leading-relaxed'>
{tier.description}
</p>
</div>
<div className='text-center mb-8'>
<div className='flex items-baseline justify-center'>
<span className='text-5xl font-black text-slate-900'>
{formatPrice(
billingInterval === 'month'
? pricing.price
: pricing.price / 12
)}
</span>
<span className='text-lg font-medium text-slate-600 ml-2'>
/month
</span>
</div>
{billingInterval === 'year' && (
<div className='mt-3 flex items-center justify-center space-x-2'>
<span className='text-sm text-slate-400 line-through'>
{formatPrice(tier.pricing.monthly.price)}/month
</span>
<span className='text-sm text-emerald-600 font-medium bg-emerald-50 px-2 py-1 rounded-full'>
Save {formatPrice(monthlySavings)}/month
</span>
</div>
)}
{billingInterval === 'year' && (
<div className='mt-2 text-sm text-slate-500'>
Billed annually ({formatPrice(pricing.price)})
</div>
)}
</div>
<button
onClick={() =>
handleUpgrade(key as keyof typeof PRICING_TIERS)
}
disabled={checkoutLoading}
className={`group/btn w-full rounded-2xl py-4 text-center text-base font-semibold transition-all duration-300 ${
tier.popular
? 'bg-gradient-to-r from-teal-600 to-cyan-600 text-white shadow-lg shadow-teal-600/25 hover:shadow-xl hover:shadow-teal-600/30'
: 'bg-slate-900 text-white hover:bg-slate-800 shadow-lg shadow-slate-900/25 hover:shadow-xl'
} disabled:opacity-50 disabled:cursor-not-allowed mb-8`}
>
<span className='flex items-center justify-center'>
{checkoutLoading ? (
<div className='animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2'></div>
) : (
<>
<span>
{tier.id === 'free'
? 'Start Free - No Credit Card'
: tier.popular
? 'Upgrade Now'
: tier.cta
}
</span>
<ArrowRightIcon className='w-5 h-5 ml-2 transition-transform duration-300 group-hover/btn:translate-x-1' />
</>
)}
</span>
</button>
<div>
<h4 className='text-sm font-semibold text-slate-900 tracking-wide uppercase mb-4 flex items-center'>
<CheckIcon className='w-4 h-4 mr-2 text-teal-600' />
Everything included
</h4>
<ul className='space-y-3'>
{tier.features.map((feature) => (
<li
key={feature}
className='flex items-start space-x-3'
>
<CheckIcon className='flex-shrink-0 h-5 w-5 text-teal-600 mt-0.5' />
<span className='text-sm text-slate-700 leading-relaxed'>
{feature}
</span>
</li>
))}
</ul>
</div>
</div>
</div>
)
})}
</div>
</div>
{/* Feature Comparison Table */}
<div className='relative z-10 py-20'>
<div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
<div className='text-center mb-16'>
<div className='inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-teal-50 to-cyan-50 border border-teal-200 text-teal-700 text-sm font-medium mb-6'>
<CheckIcon className='w-4 h-4 mr-2' />
Compare All Plans
</div>
<h2 className='text-4xl md:text-5xl font-bold text-slate-900 mb-4'>
Choose the Perfect Plan
<span className='block bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent'>
For Your Writing Journey
</span>
</h2>
<p className='text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed'>
Compare features across all plans to find the perfect fit for your
creative needs and budget.
</p>
</div>
<div className='bg-white/90 backdrop-blur-sm rounded-3xl shadow-2xl border border-slate-200 overflow-hidden overflow-x-auto'>
<div className='min-w-[800px]'>
{/* Table Header */}
<div className='bg-gradient-to-r from-slate-50 to-slate-100 border-b border-slate-200'>
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8'>
<div className='text-left'>
<h3 className='text-lg font-semibold text-slate-900'>
Features
</h3>
</div>
{Object.values(PRICING_TIERS).map((tier) => (
<div key={tier.id} className='text-center'>
<div className='flex flex-col items-center'>
<div
className='inline-flex items-center justify-center w-12 h-12 rounded-xl mb-3 shadow-md'
style={{
background:
tier.id === 'free'
? 'linear-gradient(to right, rgb(100 116 139), rgb(71 85 105))'
: tier.id === 'explorer'
? 'linear-gradient(to right, rgb(13 148 136), rgb(6 182 212))'
: tier.id === 'storyteller'
? 'linear-gradient(to right, rgb(6 182 212), rgb(20 184 166))'
: 'linear-gradient(to right, rgb(245 158 11), rgb(249 115 22))',
}}
>
<tier.icon className='h-6 w-6 text-white' />
</div>
<h4 className='text-lg font-bold text-slate-900'>
{tier.name}
</h4>
<p className='text-sm text-slate-600 mt-1'>
{tier.id === 'free'
? 'Free'
: `${formatPrice(
billingInterval === 'month'
? tier.pricing.monthly.price
: tier.pricing.annually.price / 12
)}/mo`}
</p>
{tier.popular && (
<span className='mt-2 bg-gradient-to-r from-teal-600 to-cyan-600 text-white text-xs px-2 py-1 rounded-full font-medium'>
Most Popular
</span>
)}
</div>
</div>
))}
</div>
</div>
{/* Table Body */}
<div className='divide-y divide-slate-100'>
{/* Books */}
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8 hover:bg-slate-50/50 transition-colors duration-200'>
<div className='flex items-center'>
<span className='text-slate-900 font-medium'>
Writing Projects
</span>
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.FREE.maxBooks} books
</div>
<div className='text-center text-slate-700 font-semibold'>
Unlimited
</div>
<div className='text-center text-slate-700 font-semibold'>
Unlimited
</div>
<div className='text-center text-slate-700 font-semibold'>
Unlimited
</div>
</div>
{/* Smart AI Prompts */}
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8 hover:bg-slate-50/50 transition-colors duration-200'>
<div className='flex items-center'>
<span className='text-slate-900 font-medium'>
🧠 Smart AI Prompts
</span>
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.FREE.maxSmartPrompts}
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.EXPLORER.maxSmartPrompts}
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.STORYTELLER.maxSmartPrompts}
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.PROFESSIONAL.maxSmartPrompts}
</div>
</div>
{/* Fast AI Prompts */}
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8 hover:bg-slate-50/50 transition-colors duration-200'>
<div className='flex items-center'>
<span className='text-slate-900 font-medium'>
⚡ Fast AI Prompts
</span>
</div>
<div className='text-center text-slate-700 font-semibold'>
15/month
</div>
<div className='text-center text-slate-700 font-semibold'>
Unlimited
</div>
<div className='text-center text-slate-700 font-semibold'>
Unlimited
</div>
<div className='text-center text-slate-700 font-semibold'>
Unlimited
</div>
</div>
{/* Cloud Storage */}
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8 hover:bg-slate-50/50 transition-colors duration-200'>
<div className='flex items-center'>
<span className='text-slate-900 font-medium'>
Cloud Storage
</span>
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.FREE.maxStorageGB}GB
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.EXPLORER.maxStorageGB}GB
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.STORYTELLER.maxStorageGB}GB
</div>
<div className='text-center text-slate-700 font-semibold'>
{PRICING_TIERS.PROFESSIONAL.maxStorageGB}GB
</div>
</div>
{/* Custom Templates */}
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8 hover:bg-slate-50/50 transition-colors duration-200'>
<div className='flex items-center'>
<span className='text-slate-900 font-medium'>
Custom Templates
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-100'>
<svg
className='w-4 h-4 text-red-600'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
clipRule='evenodd'
/>
</svg>
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-100'>
<svg
className='w-4 h-4 text-red-600'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
clipRule='evenodd'
/>
</svg>
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-100'>
<CheckIcon className='w-4 h-4 text-emerald-600' />
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-100'>
<CheckIcon className='w-4 h-4 text-emerald-600' />
</span>
</div>
</div>
{/* Advanced Exports */}
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8 hover:bg-slate-50/50 transition-colors duration-200'>
<div className='flex items-center'>
<span className='text-slate-900 font-medium'>
Advanced Exports
</span>
<span className='ml-2 text-xs text-slate-500'>
(PDF, EPUB, DOCX)
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-100'>
<svg
className='w-4 h-4 text-red-600'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
clipRule='evenodd'
/>
</svg>
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-100'>
<svg
className='w-4 h-4 text-red-600'
fill='currentColor'
viewBox='0 0 20 20'
>
<path
fillRule='evenodd'
d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
clipRule='evenodd'
/>
</svg>
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-100'>
<CheckIcon className='w-4 h-4 text-emerald-600' />
</span>
</div>
<div className='text-center'>
<span className='inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-100'>
<CheckIcon className='w-4 h-4 text-emerald-600' />
</span>
</div>
</div>
{/* Support */}
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8 hover:bg-slate-50/50 transition-colors duration-200'>
<div className='flex items-center'>
<span className='text-slate-900 font-medium'>Support</span>
</div>
<div className='text-center text-slate-700 font-semibold'>
Community
</div>
<div className='text-center text-slate-700 font-semibold'>
Standard
</div>
<div className='text-center text-slate-700 font-semibold'>
Priority
</div>
<div className='text-center text-slate-700 font-semibold'>
24/7 Priority
</div>
</div>
</div>
{/* Table Footer with CTA buttons */}
<div className='bg-gradient-to-r from-slate-50 to-slate-100 border-t border-slate-200'>
<div className='grid grid-cols-5 gap-4 p-6 lg:p-8'>
<div></div>
<div className='text-center'>
<button className='w-full bg-gradient-to-r from-slate-600 to-slate-700 text-white px-4 py-3 rounded-xl font-semibold hover:from-slate-700 hover:to-slate-800 transition-all duration-300 shadow-lg hover:shadow-xl'>
Get Started Free
</button>
</div>
{Object.entries(PRICING_TIERS)
.filter(([key, tier]) => tier.id !== 'free')
.map(([key, tier]) => (
<div key={tier.id} className='text-center'>
<button
onClick={() =>
handleUpgrade(key as keyof typeof PRICING_TIERS)
}
disabled={checkoutLoading}
className={`w-full px-4 py-3 rounded-xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl ${
tier.popular
? 'bg-gradient-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-700 hover:to-cyan-700'
: 'bg-gradient-to-r from-slate-900 to-slate-800 text-white hover:from-slate-800 hover:to-slate-700'
} disabled:opacity-50 disabled:cursor-not-allowed`}
>
{checkoutLoading ? (
<div className='animate-spin rounded-full h-5 w-5 border-b-2 border-white mx-auto'></div>
) : (
tier.cta
)}
</button>
</div>
))}
</div>
</div>
</div>
</div>
</div>
{/* Testimonials */}
<Testimonials />
{/* FAQ Section */}
<div className='py-20 relative z-10'>
<div className='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8'>
<div className='text-center mb-16'>
<h2 className='text-4xl font-bold text-slate-900 mb-4'>
Frequently Asked Questions
</h2>
<p className='text-xl text-slate-600'>
Everything you need to know about your writing journey
</p>
</div>
<dl className='space-y-4'>
<div className='group bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300'>
<dt className='text-lg font-semibold text-slate-900 group-hover:text-teal-600 transition-colors duration-300'>
Can I change plans later?
</dt>
<dd className='mt-3 text-slate-700 leading-relaxed'>
Absolutely! You can upgrade or downgrade your plan at any
time. Changes will be reflected in your next billing cycle,
and we'll prorate any differences.
</dd>
</div>
<div className='group bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300'>
<dt className='text-lg font-semibold text-slate-900 group-hover:text-teal-600 transition-colors duration-300'>
What payment methods do you accept?
</dt>
<dd className='mt-3 text-slate-700 leading-relaxed'>
We accept all major credit cards (Visa, MasterCard, American
Express), PayPal, and other popular payment methods. All
transactions are secured with enterprise-grade encryption.
</dd>
</div>
<div className='group bg-white/80 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300'>
<dt className='text-lg font-semibold text-slate-900 group-hover:text-teal-600 transition-colors duration-300'>
What's the difference between ⚡ Fast and 🧠 Smart AI
models?
</dt>
<dd className='mt-3 text-slate-700 leading-relaxed'>
⚡ Fast models are perfect for quick edits, grammar suggestions,
and basic writing assistance. 🧠 Smart models provide
sophisticated help with character development, plot
structuring, and complex narrative challenges.
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
)
}