import Image from 'next/image'
import Link from 'next/link'
import {
BookOpenIcon,
SparklesIcon,
LightBulbIcon,
HeartIcon,
BoltIcon,
GlobeAltIcon,
UserGroupIcon,
AcademicCapIcon,
PencilIcon,
ChatBubbleBottomCenterTextIcon,
DocumentTextIcon,
FolderIcon,
ArrowRightIcon,
CheckIcon
} from '@heroicons/react/24/outline'
import Testimonials from '@/components/Testimonials'
import { LoginButton } from '@/components/LoginButton'
// Magical floating orbs component
const MagicalOrbs = () => {
return (
<div className='absolute inset-0 overflow-hidden pointer-events-none'>
{[...Array(12)].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>
)
}
// Core values data
const coreValues = [
{
icon: HeartIcon,
title: "Author-Centric",
description: "Every feature is designed with authors in mind, from first-time novelists to bestselling professionals.",
gradient: "from-red-400 to-pink-500"
},
{
icon: BoltIcon,
title: "Intelligent Assistance",
description: "AI that understands your story, characters, and world-building to provide truly contextual help.",
gradient: "from-yellow-400 to-orange-500"
},
{
icon: GlobeAltIcon,
title: "Accessible Excellence",
description: "Professional-grade writing tools that are intuitive enough for anyone to master.",
gradient: "from-green-400 to-teal-500"
},
{
icon: UserGroupIcon,
title: "Community-Driven",
description: "Built with constant feedback from our community of passionate authors and storytellers.",
gradient: "from-blue-400 to-indigo-500"
}
]
// How it works steps with unique visual elements
const howItWorksSteps = [
{
step: "01",
title: "Build Your Story Universe",
description: "Stop juggling scattered notes and docs. Bookwiz gives you a home for everything—character backstories, plot threads, world rules, research notes. It's like having a digital writing desk that never gets messy.",
emoji: "🏗️",
visualElement: "gradient-conic",
features: [
"Keep character profiles linked to their scenes",
"Track plot threads across chapters",
"Store research and inspiration in context"
],
gradient: "from-purple-500 via-blue-500 to-teal-500"
},
{
step: "02",
title: "Write with a Creative Partner",
description: "Imagine having a writing buddy who's read your entire manuscript, knows every character's voice, and never judges your first drafts. That's our AI—always ready to help you push through blocks and develop ideas.",
emoji: "✨",
visualElement: "floating-stars",
features: [
"\"What would Sarah say here?\" - Get character-specific dialogue",
"Stuck on a scene? Get suggestions that fit your story",
"Plot holes? AI spots them and suggests fixes"
],
gradient: "from-pink-500 via-purple-500 to-indigo-500"
},
{
step: "03",
title: "Evolve Your Story Together",
description: "Writing is rewriting. Our AI doesn't just help you write—it helps you think. Chat about plot problems, brainstorm character arcs, or get feedback on scenes. It's like having a critique partner who's available 24/7.",
emoji: "🧠",
visualElement: "pulsing-brain",
features: [
"\"This character feels flat\" - Get development ideas",
"\"How do I make this scene more tense?\" - Craft better pacing",
"\"Does this plot twist work?\" - Test story logic"
],
gradient: "from-orange-500 via-red-500 to-pink-500"
}
]
// Mission & Vision content
const missionVision = {
mission: {
title: "Our Mission",
description: "To democratize storytelling by providing authors with intelligent tools that enhance creativity while preserving the human essence of great writing.",
icon: LightBulbIcon
},
vision: {
title: "Our Vision",
description: "A world where every story gets told - where technology empowers writers to focus on what they do best: creating compelling narratives that move hearts and minds.",
icon: SparklesIcon
}
}
// Team intro
const teamIntro = {
title: "Built by Writers, for Writers",
description: "Our founding team combines deep technical expertise with genuine passion for storytelling. We understand the challenges authors face because we've been there ourselves.",
developers: [
{
name: "Kristiyan",
role: "Co-Founder & Full-Stack Developer",
image: "/developers/kris.png",
description: "Building scalable solutions with 4+ years experience in AI-powered applications."
},
{
name: "Nikola",
role: "Elixir Expert & Lecturer",
image: "/developers/nikola.png",
description: "Distributed systems architect with 6+ years experience teaching and building robust infrastructure."
}
]
}
export default function AboutPage() {
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-5xl 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'>
<BookOpenIcon className='w-4 h-4 mr-2' />
About Bookwiz
</div>
<h1 className='text-5xl md:text-6xl font-bold text-slate-900 mb-6 leading-tight'>
Empowering Every
<span className='block bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent'>
Author's Journey
</span>
</h1>
<p className='text-xl text-slate-600 mb-8 max-w-3xl mx-auto leading-relaxed'>
We're building the future of writing tools - where artificial intelligence amplifies human creativity,
helping authors organize their thoughts, develop their stories, and bring their visions to life.
</p>
</div>
</div>
</div>
{/* Mission & Vision */}
<div className='max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10'>
<div className='grid lg:grid-cols-2 gap-12'>
<div className='relative group'>
<div className='bg-white/60 backdrop-blur-sm rounded-3xl p-8 border border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300 group-hover:transform group-hover:scale-105'>
<div className='flex items-center mb-6'>
<div className='w-12 h-12 rounded-xl bg-gradient-to-r from-teal-500 to-cyan-500 flex items-center justify-center shadow-lg mr-4'>
<LightBulbIcon className='w-6 h-6 text-white' />
</div>
<h2 className='text-2xl font-bold text-slate-900'>Our Mission</h2>
</div>
<p className='text-lg text-slate-600 leading-relaxed'>
To democratize storytelling by providing authors with intelligent tools that enhance creativity while preserving the human essence of great writing.
</p>
</div>
</div>
<div className='relative group'>
<div className='bg-white/60 backdrop-blur-sm rounded-3xl p-8 border border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300 group-hover:transform group-hover:scale-105'>
<div className='flex items-center mb-6'>
<div className='w-12 h-12 rounded-xl bg-gradient-to-r from-teal-500 to-cyan-500 flex items-center justify-center shadow-lg mr-4'>
<SparklesIcon className='w-6 h-6 text-white' />
</div>
<h2 className='text-2xl font-bold text-slate-900'>Our Vision</h2>
</div>
<p className='text-lg text-slate-600 leading-relaxed'>
A world where every story gets told - where technology empowers writers to focus on what they do best: creating compelling narratives that move hearts and minds.
</p>
</div>
</div>
</div>
</div>
{/* Core Values */}
<div className='bg-gradient-to-r from-slate-50 to-slate-100 py-20 relative z-10'>
<div className='max-w-6xl 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'>Our Core Values</h2>
<p className='text-xl text-slate-600 max-w-2xl mx-auto'>
The principles that guide everything we build and every decision we make.
</p>
</div>
<div className='grid md:grid-cols-2 lg:grid-cols-4 gap-8'>
{coreValues.map((value, index) => (
<div key={index} className='group'>
<div className='bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 group-hover:transform group-hover:scale-105 text-center h-full'>
<div className={`w-16 h-16 rounded-2xl bg-gradient-to-r ${value.gradient} flex items-center justify-center mx-auto mb-4 shadow-lg`}>
<value.icon className='w-8 h-8 text-white' />
</div>
<h3 className='text-xl font-bold text-slate-900 mb-3'>{value.title}</h3>
<p className='text-slate-600 leading-relaxed'>{value.description}</p>
</div>
</div>
))}
</div>
</div>
</div>
{/* How It Works */}
<div className='max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10'>
<div className='text-center mb-16'>
<h2 className='text-4xl font-bold text-slate-900 mb-4'>How Bookwiz Works</h2>
<p className='text-xl text-slate-600 max-w-3xl mx-auto'>
Three steps to transform your writing process from chaotic notes to polished manuscripts—with AI that actually understands storytelling.
</p>
</div>
<div className='space-y-20'>
{howItWorksSteps.map((step, index) => (
<div key={index} className={`flex items-center gap-16 ${index % 2 === 1 ? 'flex-row-reverse' : ''}`}>
<div className='flex-1'>
<div className='bg-white/80 backdrop-blur-sm rounded-3xl p-10 border border-slate-200 shadow-xl hover:shadow-2xl transition-all duration-500'>
<div className='flex items-center mb-8'>
<div className={`w-16 h-16 rounded-2xl bg-gradient-to-r ${step.gradient} flex items-center justify-center text-white font-bold text-xl mr-6 shadow-lg`}>
{step.step}
</div>
<div>
<h3 className='text-3xl font-bold text-slate-900 mb-2'>{step.title}</h3>
<div className='text-2xl'>{step.emoji}</div>
</div>
</div>
<p className='text-lg text-slate-700 mb-8 leading-relaxed font-medium'>{step.description}</p>
<div className='space-y-4'>
{step.features.map((feature, featureIndex) => (
<div key={featureIndex} className='flex items-start text-slate-700'>
<div className='w-6 h-6 rounded-full bg-gradient-to-r from-teal-500 to-cyan-500 flex items-center justify-center mr-4 mt-0.5 flex-shrink-0'>
<CheckIcon className='w-3 h-3 text-white' />
</div>
<span className='text-base leading-relaxed'>{feature}</span>
</div>
))}
</div>
</div>
</div>
<div className='flex-1 flex justify-center'>
<div className={`relative w-40 h-40 rounded-full bg-gradient-to-r ${step.gradient} flex items-center justify-center shadow-2xl overflow-hidden`}>
{/* Unique visual elements for each step */}
{step.visualElement === 'gradient-conic' && (
<div className='absolute inset-0 bg-gradient-conic from-purple-500 via-blue-500 via-teal-500 to-purple-500 animate-spin' style={{ animationDuration: '8s' }}></div>
)}
{step.visualElement === 'floating-stars' && (
<div className='absolute inset-0'>
{[...Array(8)].map((_, i) => (
<div
key={i}
className='absolute w-2 h-2 bg-white rounded-full animate-ping'
style={{
left: `${20 + Math.random() * 60}%`,
top: `${20 + Math.random() * 60}%`,
animationDelay: `${Math.random() * 2}s`,
animationDuration: `${2 + Math.random() * 2}s`,
}}
/>
))}
</div>
)}
{step.visualElement === 'pulsing-brain' && (
<div className='absolute inset-0 bg-gradient-radial from-white/20 to-transparent animate-pulse'></div>
)}
<div className='relative z-10 text-6xl filter drop-shadow-lg'>
{step.emoji}
</div>
</div>
</div>
</div>
))}
</div>
</div>
{/* Team Section */}
<div className='bg-gradient-to-r from-slate-50 to-slate-100 py-20 relative z-10'>
<div className='max-w-6xl 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'>{teamIntro.title}</h2>
<p className='text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed'>
{teamIntro.description}
</p>
</div>
<div className='grid md:grid-cols-2 gap-8 max-w-4xl mx-auto'>
{teamIntro.developers.map((dev, index) => (
<div key={index} className='group'>
<div className='bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 group-hover:transform group-hover:scale-105 text-center'>
<div className='relative w-24 h-24 rounded-full overflow-hidden shadow-lg mb-4 border-4 border-white mx-auto'>
<Image src={dev.image} alt={dev.name} fill className='object-cover' sizes='96px' />
</div>
<h3 className='text-xl font-bold text-slate-900 mb-1'>{dev.name}</h3>
<p className='text-teal-600 font-medium mb-3'>{dev.role}</p>
<p className='text-slate-600 text-sm leading-relaxed'>{dev.description}</p>
</div>
</div>
))}
</div>
<div className='text-center mt-12'>
<Link href='/developers' className='inline-flex items-center px-6 py-3 rounded-xl bg-gradient-to-r from-teal-600 to-cyan-600 text-white font-medium hover:from-teal-700 hover:to-cyan-700 transition-all duration-300 shadow-lg hover:shadow-xl'>
Meet the Full Team
<ArrowRightIcon className='w-5 h-5 ml-2' />
</Link>
</div>
</div>
</div>
{/* Future Vision */}
<div className='max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10'>
<div className='bg-gradient-to-r from-teal-50 to-cyan-50 rounded-3xl p-12 border border-teal-200'>
<div className='text-center'>
<div className='w-20 h-20 rounded-full bg-gradient-to-r from-teal-500 to-cyan-500 flex items-center justify-center mx-auto mb-6 shadow-2xl'>
<SparklesIcon className='w-10 h-10 text-white' />
</div>
<h2 className='text-4xl font-bold text-slate-900 mb-6'>The Future of Writing</h2>
<p className='text-xl text-slate-600 mb-8 max-w-3xl mx-auto leading-relaxed'>
We're just getting started. Our roadmap includes advanced collaboration features,
multi-language support, and even more intelligent AI assistance that grows with your writing style.
Join us as we revolutionize how stories are created, one author at a time.
</p>
<div className='flex flex-col sm:flex-row gap-4 justify-center'>
<Link href='/pricing' className='inline-flex items-center px-8 py-4 rounded-xl bg-gradient-to-r from-teal-600 to-cyan-600 text-white font-medium hover:from-teal-700 hover:to-cyan-700 transition-all duration-300 shadow-lg hover:shadow-xl'>
Start Writing Today
<ArrowRightIcon className='w-5 h-5 ml-2' />
</Link>
<Link href='/changelog' className='inline-flex items-center px-8 py-4 rounded-xl border-2 border-teal-600 text-teal-600 font-medium hover:bg-teal-600 hover:text-white transition-all duration-300'>
View Roadmap
<ArrowRightIcon className='w-5 h-5 ml-2' />
</Link>
</div>
</div>
</div>
</div>
{/* Testimonials */}
<Testimonials variant="landing" />
{/* Footer CTA */}
<div className='bg-slate-900 py-20 relative z-10'>
<div className='max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8'>
<h2 className='text-4xl font-bold text-white mb-4'>Ready to Transform Your Writing?</h2>
<p className='text-xl text-slate-300 mb-8 max-w-2xl mx-auto'>
Join thousands of authors who are already using Bookwiz to bring their stories to life.
</p>
<Link href='/pricing' className='inline-flex items-center px-8 py-4 rounded-xl bg-gradient-to-r from-teal-600 to-cyan-600 text-white font-medium hover:from-teal-700 hover:to-cyan-700 transition-all duration-300 shadow-lg hover:shadow-xl'>
Get Started Free
<ArrowRightIcon className='w-5 h-5 ml-2' />
</Link>
</div>
</div>
</div>
)
}