'use client'
import Link from 'next/link'
import { ArrowLeftIcon } from '@heroicons/react/24/outline'
import { IoHelpCircleOutline } from 'react-icons/io5'
const faqs = [
{
category: '📝 General',
color: 'from-pink-400/30 to-pink-900/10',
items: [
{
q: 'What is Bookwiz?',
a: 'Bookwiz is a modern, AI-powered writing platform designed to help authors, novelists, and creators organize, write, and enhance their projects with ease. It combines a file-based structure, context-aware AI, and version control for a seamless creative workflow.'
},
{
q: 'Who is Bookwiz for?',
a: 'Bookwiz is for anyone who writes: novelists, non-fiction authors, screenwriters, students, and creative professionals. Whether you\'re working solo or collaborating, Bookwiz adapts to your needs.'
}
]
},
{
category: '🤖 AI & Writing',
color: 'from-cyan-400/30 to-cyan-900/10',
items: [
{
q: 'How does the AI work?',
a: 'Bookwiz integrates advanced AI models (like Claude, Gemini, and more) to provide context-aware suggestions, editing, brainstorming, and direct file operations. The AI can reference your actual files and help you improve your writing in real time.'
},
{
q: 'Is my writing private and secure?',
a: 'Yes! Your work is private by default. Only you (and collaborators you invite) can access your projects. We use secure cloud storage and never share your content without your permission.'
},
{
q: 'Can the AI write my whole book?',
a: 'The AI is a powerful assistant, but your creativity is at the heart of every project. Use the AI for brainstorming, editing, and overcoming writer\'s block—but the story is always yours.'
}
]
},
{
category: '🔄 Version Control & Collaboration',
color: 'from-violet-400/30 to-violet-900/10',
items: [
{
q: 'What is version control?',
a: 'Version control lets you track every change, experiment with new ideas, and collaborate without fear. Bookwiz uses Git (the same system developers use) and integrates with GitHub for secure cloud backup and collaboration.'
},
{
q: 'Can I collaborate with others?',
a: 'Yes! Bookwiz is built for collaboration. Invite co-authors, editors, or beta readers to your project. Track changes, review suggestions, and merge edits with ease.'
},
{
q: 'How do I restore a previous version?',
a: 'With version control, you can browse your commit history and restore any previous version of your work—no more lost drafts or accidental deletions.'
}
]
},
{
category: '💸 Pricing & Plans',
color: 'from-yellow-300/30 to-yellow-900/10',
items: [
{
q: 'Is Bookwiz free?',
a: 'Bookwiz offers a free plan with core features. For advanced AI models, higher usage limits, and premium support, upgrade to a paid plan. See our Pricing page for details.'
},
{
q: 'What happens if I hit my usage limit?',
a: 'You\'ll be notified if you approach your usage limit. You can upgrade your plan or wait for your quota to reset at the start of the next month.'
}
]
}
]
function FAQList() {
return (
<div className="space-y-16">
{faqs.map((cat) => (
<section key={cat.category}>
<div className={`relative mb-8 h-10 flex items-center justify-center`}>
<div className={`absolute inset-0 blur-xl opacity-60 rounded-full bg-gradient-to-r ${cat.color}`}></div>
<h2 className="relative z-10 text-2xl md:text-3xl font-extrabold flex items-center gap-2 drop-shadow-glow">
<span>{cat.category}</span>
<span className="animate-pulse">✨</span>
</h2>
</div>
<div className="space-y-8">
{cat.items.map((item, idx) => (
<div key={item.q} className="rounded-2xl bg-gradient-to-br from-slate-900/80 to-slate-800/60 p-6 shadow-xl border border-teal-900/20 relative overflow-hidden">
<div className="absolute -z-10 right-0 top-0 w-24 h-24 bg-gradient-to-br from-teal-400/10 to-fuchsia-400/10 rounded-full blur-2xl opacity-60" />
<div className="flex items-center gap-3 mb-2">
<span className="text-2xl">❓</span>
<span className="text-lg font-semibold text-teal-300">Q:</span>
<span className="text-lg font-medium italic text-slate-100">{item.q}</span>
</div>
<div className="flex items-center gap-3 mt-2">
<span className="text-2xl">💡</span>
<span className="text-base text-slate-200 leading-relaxed">
<span className="text-teal-400 font-bold">A:</span>{' '}
{item.a.includes('Pricing page') ? <Link href="/pricing" className="text-teal-400 underline">Pricing page</Link> : item.a}
</span>
</div>
</div>
))}
</div>
</section>
))}
</div>
)
}
export default function FAQPage() {
return (
<article className="prose prose-invert prose-lg max-w-3xl mx-auto relative">
<div className="absolute -z-10 inset-0 pointer-events-none">
<div className="absolute left-1/2 top-0 -translate-x-1/2 w-[80vw] h-[40vh] bg-gradient-to-br from-teal-500/10 via-fuchsia-500/10 to-cyan-500/10 rounded-full blur-3xl opacity-70 animate-fade-in" />
<div className="absolute right-0 bottom-0 w-1/3 h-1/3 bg-gradient-to-br from-yellow-400/10 to-pink-400/10 rounded-full blur-2xl opacity-60 animate-fade-in" />
</div>
<Link href="/blog" className="inline-flex items-center text-teal-400 hover:text-teal-300 mb-8 group">
<ArrowLeftIcon className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
Back to blog
</Link>
<div className="flex flex-col items-center mb-8 animate-fade-in">
<span className="text-5xl md:text-6xl mb-2 animate-bounce">🧚♂️</span>
<h1 className="mb-0 text-3xl md:text-4xl font-extrabold tracking-tight drop-shadow-glow text-center">Bookwiz FAQ: Your Questions Answered</h1>
<span className="text-lg text-teal-300 mt-2">Your magical guide to all things Bookwiz</span>
</div>
<div className="flex items-center space-x-4 text-sm text-slate-400 mb-8 animate-fade-in">
<span>FAQ</span>
<span>•</span>
<span>June 2, 2024</span>
<span>•</span>
<span>5 min read</span>
</div>
<p className="lead animate-fade-in">
<span className="inline-block mr-2">💡</span>
Got questions about Bookwiz? You're in the right place! Browse our magical FAQ below. If you can't find what you're looking for, just use the contact details in the footer below and we'll be happy to help.
</p>
<FAQList />
<div className="mt-16 p-8 rounded-2xl bg-gradient-to-br from-teal-900/70 to-fuchsia-900/60 border-2 border-teal-700 flex flex-col items-center animate-fade-in shadow-2xl">
<span className="text-4xl mb-2 animate-pulse">🌟</span>
<div className="text-xl text-slate-100 mb-2 font-semibold">Still have questions?</div>
<div className="text-slate-200 text-base text-center">
Reach out using the <span className="text-teal-300 font-medium">email address</span> or <span className="text-teal-300 font-medium">social links</span> in the footer below—our team will be happy to help!
</div>
<div className="mt-4 flex gap-4">
<span className="inline-block text-2xl animate-bounce">📧</span>
<span className="inline-block text-2xl animate-bounce">💬</span>
<span className="inline-block text-2xl animate-bounce">✨</span>
</div>
</div>
</article>
)
}