'use client';

import Link from 'next/link';
import { HelpCircle, BookOpen, Brain, Heart, Shield, MessageSquare, ChevronRight, Sparkles, PenTool, History } from 'lucide-react';
import SpotlightCard from '@/components/SpotlightCard';
import ShinyButton from '@/components/ShinyButton';

const helpCategories = [
  {
    title: 'Getting Started',
    icon: Sparkles,
    color: 'purple',
    items: ['What is ORA?', 'How to start a conversation', 'Understanding agent responses', 'Using the dashboard'],
  },
  {
    title: 'Chat Features',
    icon: MessageSquare,
    color: 'blue',
    items: ['Markdown formatting', 'Show Reasoning toggle', 'Quick actions', 'Message history'],
  },
  {
    title: 'Bible Study',
    icon: BookOpen,
    color: 'amber',
    items: ['Scripture search', 'Cross-references', 'Theological insights', 'Study guides'],
  },
  {
    title: 'Journaling',
    icon: PenTool,
    color: 'emerald',
    items: ['S.O.A.P. method', 'Reflection prompts', 'Memory integration', 'Tagging entries'],
  },
];

const colorClasses: Record<string, { bg: string; border: string; text: string }> = {
  purple: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', text: 'text-purple-400' },
  blue: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', text: 'text-blue-400' },
  amber: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400' },
  emerald: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', text: 'text-emerald-400' },
};

export default function HelpPage() {
  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">Help Center</span>
          </div>

          <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6 text-white">
            How can we <span className="text-purple-400">help?</span>
          </h1>

          <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
            Find guides, tutorials, and answers to help you get the most out of ORA.
          </p>
        </div>
      </section>

      {/* Help Categories */}
      <section className="py-16 border-t border-white/5">
        <div className="max-w-6xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {helpCategories.map((category) => {
              const colors = colorClasses[category.color];
              return (
                <SpotlightCard
                  key={category.title}
                  className={`p-6 rounded-xl border ${colors.border} bg-white/[0.02]`}
                  spotlightColor="purple"
                >
                  <div className="flex items-center gap-4 mb-4">
                    <div className={`w-12 h-12 rounded-xl ${colors.bg} flex items-center justify-center border ${colors.border}`}>
                      <category.icon className={`w-6 h-6 ${colors.text}`} />
                    </div>
                    <h3 className="text-xl font-semibold text-white">{category.title}</h3>
                  </div>
                  <ul className="space-y-2">
                    {category.items.map((item) => (
                      <li key={item}>
                        <Link
                          href="#"
                          className="flex items-center gap-2 text-neutral-400 hover:text-white transition-colors py-1"
                        >
                          <ChevronRight className="w-4 h-4 text-purple-400" />
                          {item}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </SpotlightCard>
              );
            })}
          </div>
        </div>
      </section>

      {/* Quick Links */}
      <section className="py-16 border-t border-white/5 bg-[#030303]">
        <div className="max-w-4xl mx-auto px-6">
          <h2 className="text-2xl font-bold text-white text-center mb-8">Popular Topics</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              { icon: Shield, title: 'Gatekeeper Agent', desc: 'How routing works' },
              { icon: BookOpen, title: 'Theologian Agent', desc: 'Scripture analysis' },
              { icon: Heart, title: 'Healer Agent', desc: 'Pastoral care' },
              { icon: Brain, title: 'Episodic Memory', desc: 'How ORA remembers' },
              { icon: History, title: 'Reasoning Traces', desc: 'Transparency features' },
              { icon: MessageSquare, title: 'Getting Started', desc: 'First steps with ORA' },
            ].map((topic) => (
              <Link
                key={topic.title}
                href="#"
                className="flex items-center gap-3 p-4 rounded-xl bg-white/[0.02] border border-white/10 hover:border-purple-500/30 transition-all"
              >
                <topic.icon className="w-5 h-5 text-purple-400" />
                <div>
                  <span className="text-white font-medium block">{topic.title}</span>
                  <span className="text-neutral-500 text-sm">{topic.desc}</span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Contact CTA */}
      <section className="py-16 border-t border-white/5">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-2xl font-bold text-white mb-4">Need more help?</h2>
          <p className="text-neutral-400 mb-8">
            Our team is here to assist you with any questions about ORA.
          </p>
          <Link href="/contact">
            <ShinyButton>
              <span className="flex items-center gap-2">
                <MessageSquare className="w-4 h-4" />
                Contact Support
              </span>
            </ShinyButton>
          </Link>
        </div>
      </section>
    </>
  );
}