frontend/app/faq/page.tsx

'use client';

import { useState } from 'react';
import { ChevronDown, HelpCircle, Mail, Sparkles } from 'lucide-react';
import Link from 'next/link';
import ShinyButton from '@/components/ShinyButton';

const faqs = [
  {
    category: 'general',
    question: 'What is ORA?',
    answer: 'ORA is an AI spiritual companion that uses a multi-agent architecture to provide personalized guidance for your faith journey. The name stands for Observe, Reflect, Act - our framework for deeper spiritual engagement.',
  },
  {
    category: 'general',
    question: 'How does ORA work?',
    answer: 'ORA uses specialized AI agents (Gatekeeper, Theologian, Healer) that work together to understand your needs and provide appropriate guidance. The Gatekeeper routes your questions, while specialist agents provide deep Scripture analysis or pastoral care.',
  },
  {
    category: 'features',
    question: 'What can I ask ORA?',
    answer: 'You can ask ORA about Scripture interpretation, seek prayer guidance, discuss life decisions from a faith perspective, explore theological questions, or simply have a conversation about your spiritual journey.',
  },
  {
    category: 'features',
    question: 'Does ORA remember our conversations?',
    answer: 'Yes, ORA uses episodic memory to remember your spiritual journey over time. This allows for more personalized and contextual guidance as you continue to interact with the system.',
  },
  {
    category: 'features',
    question: 'What is the "Show Reasoning" feature?',
    answer: 'The Show Reasoning toggle reveals ORA\'s thought process - the reasoning trace that shows how different agents collaborated to formulate a response. This provides transparency into how conclusions were reached.',
  },
  {
    category: 'privacy',
    question: 'Is my data private?',
    answer: 'Yes, your privacy is sacred to us. We do not sell your data, use it for advertising, or share it with third parties. Your spiritual conversations remain confidential.',
  },
  {
    category: 'privacy',
    question: 'Can I delete my data?',
    answer: 'Yes, you have full control over your data. You can request deletion of your conversation history and episodic memories at any time.',
  },
  {
    category: 'technical',
    question: 'What AI models power ORA?',
    answer: 'ORA is designed to work with various LLM backends. The system uses a swarm architecture with specialized agents, vector databases for memory and Bible search, and safety guardrails for appropriate responses.',
  },
  {
    category: 'technical',
    question: 'Is ORA available offline?',
    answer: 'ORA requires an internet connection to access its AI capabilities. However, the system has fallback modes for graceful degradation if connectivity is limited.',
  },
];

export default function FAQPage() {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const [filter, setFilter] = useState('all');

  const categories = ['all', 'general', 'features', 'privacy', 'technical'];

  const filteredFaqs = filter === 'all' ? faqs : faqs.filter(faq => faq.category === filter);

  return (
    <>
      {/* Hero */}
      <section className="relative pt-32 pb-16 overflow-hidden">
        <div className="absolute inset-0 ora-grid-bg pointer-events-none z-0" />
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-purple-600/20 rounded-full blur-[150px] pointer-events-none -z-10" />

        <div className="max-w-4xl mx-auto px-6 text-center">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-500/30 bg-purple-500/10 mb-8">
            <HelpCircle className="w-4 h-4 text-purple-400" />
            <span className="text-xs font-mono text-purple-300 uppercase tracking-wider">FAQ</span>
          </div>

          <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6 text-white">
            Frequently Asked <span className="text-purple-400">Questions</span>
          </h1>

          <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
            Find answers to common questions about ORA and how it can support your spiritual journey.
          </p>
        </div>
      </section>

      {/* FAQ List */}
      <section className="py-16 border-t border-white/5">
        <div className="max-w-3xl mx-auto px-6">
          {/* Category Filter */}
          <div className="flex flex-wrap gap-2 justify-center mb-10">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setFilter(cat)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                  filter === cat
                    ? 'bg-purple-600 text-white'
                    : 'bg-white/5 text-neutral-400 hover:bg-white/10 hover:text-white'
                }`}
              >
                {cat.charAt(0).toUpperCase() + cat.slice(1)}
              </button>
            ))}
          </div>

          {/* Questions */}
          <div className="space-y-3">
            {filteredFaqs.map((faq, index) => (
              <div
                key={index}
                className="rounded-xl border border-white/10 bg-white/[0.02] overflow-hidden"
              >
                <button
                  onClick={() => setOpenIndex(openIndex === index ? null : index)}
                  className="w-full px-6 py-4 flex items-center justify-between text-left"
                >
                  <span className="text-white font-medium pr-4">{faq.question}</span>
                  <ChevronDown
                    className={`w-5 h-5 text-purple-400 shrink-0 transition-transform ${
                      openIndex === index ? 'rotate-180' : ''
                    }`}
                  />
                </button>
                {openIndex === index && (
                  <div className="px-6 pb-4">
                    <p className="text-neutral-400 leading-relaxed">{faq.answer}</p>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Still have questions */}
          <div className="mt-16 text-center p-8 rounded-2xl bg-purple-500/5 border border-purple-500/20">
            <h3 className="text-xl font-semibold text-white mb-3">Still have questions?</h3>
            <p className="text-neutral-400 mb-6">
              Can't find what you're looking for? Reach out to our team.
            </p>
            <Link href="/contact">
              <ShinyButton>
                <span className="flex items-center gap-2">
                  <Mail className="w-4 h-4" />
                  Contact Us
                </span>
              </ShinyButton>
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}