'use client'
import { useState } from 'react'
import {
BookOpenIcon,
RocketLaunchIcon,
QuestionMarkCircleIcon,
LightBulbIcon,
ChevronDownIcon,
ChevronRightIcon,
ChatBubbleLeftIcon,
SparklesIcon,
BoltIcon,
DocumentTextIcon,
PlayIcon
} from '@heroicons/react/24/outline'
import { useWelcomeTour } from '@/lib/hooks/useWelcomeTour'
import WelcomeTour from '@/components/WelcomeTour'
interface FAQItem {
question: string
answer: string
category: string
}
const faqData: FAQItem[] = [
{
question: "How do I create my first book?",
answer: "Click on 'New Book' in your dashboard or books page. Choose a template or start from scratch, add a title and description, then start writing. Your book will auto-save as you type.",
category: "Getting Started"
},
{
question: "What file formats can I export my book to?",
answer: "You can export your books to PDF, DOCX, EPUB, and plain text formats. Premium plans include additional formatting options and custom styling.",
category: "Export & Publishing"
},
{
question: "How does the AI writing assistance work?",
answer: "Our AI can help with brainstorming, character development, plot suggestions, grammar checking, and style improvements. Access AI features through the chat panel while writing.",
category: "AI Features"
},
{
question: "Can I collaborate with other writers?",
answer: "Yes! Premium plans include collaboration features where you can invite other writers to review, comment, and edit your books together in real-time.",
category: "Collaboration"
},
{
question: "Is my work automatically saved?",
answer: "Yes, your work is automatically saved every few seconds while you write. You can also manually save at any time with Ctrl/Cmd + S.",
category: "Getting Started"
},
{
question: "What are the subscription limits?",
answer: "Free accounts have basic AI features and standard export options. Premium plans offer unlimited AI usage, advanced features, priority support, and enhanced collaboration tools.",
category: "Billing & Plans"
}
]
const categories = Array.from(new Set(faqData.map(item => item.category)))
const quickStartSteps = [
{
icon: RocketLaunchIcon,
title: "Create Your First Book",
description: "Click 'New Book' in your dashboard. Choose from templates or start with a blank page.",
color: "from-blue-500 to-purple-600"
},
{
icon: DocumentTextIcon,
title: "Start Writing",
description: "Use our distraction-free editor. Your work saves automatically as you type.",
color: "from-emerald-500 to-teal-600"
},
{
icon: SparklesIcon,
title: "Use AI Assistance",
description: "Open the AI chat panel for writing suggestions, character development, and plot ideas.",
color: "from-amber-500 to-orange-600"
},
{
icon: BoltIcon,
title: "Export & Share",
description: "Export to PDF, DOCX, or EPUB formats. Share with readers or publish your masterpiece.",
color: "from-violet-500 to-purple-600"
}
]
const writingTips = [
{ title: "Set Daily Goals", tip: "Establish a consistent writing routine with achievable daily word count targets." },
{ title: "Use Active Voice", tip: "Active voice makes your writing more engaging and direct." },
{ title: "Show, Don't Tell", tip: "Show emotions through actions, dialogue, and sensory details." },
{ title: "Edit Later", tip: "Focus on getting your story down first. Perfect drafts come from revisions." }
]
export default function DocsPage() {
const [expandedFAQ, setExpandedFAQ] = useState<number | null>(null)
const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
const { isOpen: isTourOpen, openTour, closeTour, completeTour } = useWelcomeTour()
const filteredFAQs = selectedCategory
? faqData.filter(item => item.category === selectedCategory)
: faqData
const toggleFAQ = (index: number) => {
setExpandedFAQ(expandedFAQ === index ? null : index)
}
return (
<div className="p-6 space-y-6 max-w-7xl mx-auto">
{/* Modern Header */}
<div className="mb-12">
<h1 className="text-4xl font-black text-white mb-3 tracking-tight">Documentation</h1>
<p className="text-lg text-gray-400 font-medium">
Master Bookwiz and become a writing pro
</p>
</div>
{/* Quick Start Guide */}
<div className="mb-12">
<h2 className="text-2xl font-black text-white mb-6 flex items-center justify-between">
<div className="flex items-center space-x-3">
<PlayIcon className="w-8 h-8 text-emerald-400" />
<span>Quick Start</span>
</div>
<button
onClick={openTour}
className="text-sm text-gray-400 hover:text-white transition-colors font-medium"
>
Take the Tour
</button>
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{quickStartSteps.map((step, index) => (
<div key={index} className="group relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all duration-200 hover:scale-105">
{/* Step Number */}
<div className="absolute top-4 right-4 w-8 h-8 bg-black/40 backdrop-blur-sm rounded-xl flex items-center justify-center">
<span className="text-white font-black text-sm">{index + 1}</span>
</div>
{/* Icon */}
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${step.color} flex items-center justify-center mb-4 shadow-lg`}>
<step.icon className="w-6 h-6 text-white" />
</div>
{/* Content */}
<h3 className="text-white font-bold mb-2">{step.title}</h3>
<p className="text-gray-400 text-sm leading-relaxed">{step.description}</p>
</div>
))}
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* FAQ Section */}
<div className="lg:col-span-2">
<div className="mb-12">
<h2 className="text-2xl font-black text-white mb-6">Frequently Asked Questions</h2>
{/* Scrollable Tags with Gradient Fade */}
<div className="relative mb-8">
<div className="flex space-x-2 overflow-x-auto pb-4 scrollbar-hide">
<button
onClick={() => setSelectedCategory(null)}
className={`px-4 py-2 text-xs font-bold rounded-xl transition-all duration-200 whitespace-nowrap ${
selectedCategory === null
? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
: 'bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white border border-white/10'
}`}
>
All
</button>
{categories.map((category) => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-4 py-2 text-xs font-bold rounded-xl transition-all duration-200 whitespace-nowrap ${
selectedCategory === category
? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
: 'bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white border border-white/10'
}`}
>
{category}
</button>
))}
</div>
{/* Gradient fade effect */}
<div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-black to-transparent pointer-events-none" />
</div>
<div className="space-y-3">
{filteredFAQs.map((faq, index) => (
<div key={index} className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden">
<button
onClick={() => toggleFAQ(index)}
className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-all duration-200 group"
>
<span className="text-white font-bold group-hover:text-gray-200">{faq.question}</span>
<div className="flex items-center space-x-3">
<span className="text-xs font-bold text-gray-500 bg-white/10 px-2 py-1 rounded-lg">
{faq.category}
</span>
{expandedFAQ === index ? (
<ChevronDownIcon className="h-5 w-5 text-gray-400 group-hover:text-white transition-colors" />
) : (
<ChevronRightIcon className="h-5 w-5 text-gray-400 group-hover:text-white transition-colors" />
)}
</div>
</button>
{expandedFAQ === index && (
<div className="px-6 pb-4">
<div className="pt-4 border-t border-white/10">
<p className="text-gray-300 leading-relaxed">{faq.answer}</p>
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* Writing Tips */}
<div className="bg-gradient-to-br from-amber-500/10 to-orange-500/10 border border-white/10 rounded-2xl p-6">
<div className="flex items-center space-x-3 mb-6">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
<LightBulbIcon className="w-5 h-5 text-white" />
</div>
<h3 className="text-xl font-black text-white">Pro Tips</h3>
</div>
<div className="space-y-4">
{writingTips.map((tip, index) => (
<div key={index} className="group">
<h4 className="text-white font-bold mb-2 group-hover:text-amber-300 transition-colors">
{tip.title}
</h4>
<p className="text-gray-400 text-sm leading-relaxed">
{tip.tip}
</p>
</div>
))}
</div>
</div>
{/* Quick Actions */}
<div className="space-y-3">
<h3 className="text-xl font-black text-white mb-4">Quick Actions</h3>
<a
href="/dashboard/books"
className="group block bg-gradient-to-br from-emerald-500/10 to-teal-500/10 border border-white/10 rounded-2xl p-4 hover:from-emerald-500/20 hover:to-teal-500/20 transition-all duration-200"
>
<div className="flex items-center space-x-4">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
<BookOpenIcon className="w-5 h-5 text-white" />
</div>
<div>
<h4 className="text-white font-bold">Your Books</h4>
<p className="text-gray-400 text-sm">Manage your library</p>
</div>
</div>
</a>
<a
href="/dashboard/billing"
className="group block bg-gradient-to-br from-violet-500/10 to-purple-500/10 border border-white/10 rounded-2xl p-4 hover:from-violet-500/20 hover:to-purple-500/20 transition-all duration-200"
>
<div className="flex items-center space-x-4">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
<RocketLaunchIcon className="w-5 h-5 text-white" />
</div>
<div>
<h4 className="text-white font-bold">Upgrade Plan</h4>
<p className="text-gray-400 text-sm">Unlock AI power</p>
</div>
</div>
</a>
</div>
{/* Support Card */}
<div className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-white/10 rounded-2xl p-6">
<div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
<ChatBubbleLeftIcon className="w-5 h-5 text-white" />
</div>
<h3 className="text-xl font-black text-white">Need Help?</h3>
</div>
<p className="text-gray-400 mb-6 leading-relaxed">
Can't find what you're looking for? Our support team is here to help you succeed.
</p>
<button className="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-bold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl">
Contact Support
</button>
</div>
</div>
</div>
{/* Welcome Tour */}
<WelcomeTour
isOpen={isTourOpen}
onClose={() => closeTour('skipped')}
onComplete={completeTour}
/>
</div>
)
}