frontend/app/features/page.tsx

'use client';

import Link from 'next/link';
import {
  Sparkles, Shield, BookOpen, Heart, Brain, Eye, Zap,
  MessageSquare, PenTool, History, Search, Compass,
  ArrowRight, Check, ChevronRight
} from 'lucide-react';
import SpotlightCard from '@/components/SpotlightCard';
import ShinyButton from '@/components/ShinyButton';

const coreAgents = [
  {
    icon: Shield,
    name: 'Gatekeeper',
    role: 'Intelligent Router',
    description: 'Understands your intent and connects you with the right specialist agent for your needs.',
    color: 'purple',
    capabilities: ['Intent Classification', 'Context Analysis', 'Agent Handoffs', 'Safety Guardrails'],
  },
  {
    icon: BookOpen,
    name: 'Theologian',
    role: 'Scripture Expert',
    description: 'Deep Scripture analysis with cross-references, historical context, and doctrinal insights from multiple traditions.',
    color: 'blue',
    capabilities: ['Bible Search (RAG)', 'Cross-References', 'Historical Context', 'Doctrinal Analysis'],
  },
  {
    icon: Heart,
    name: 'Healer',
    role: 'Pastoral Care',
    description: 'Compassionate support for emotional and spiritual needs with prayer guidance and encouragement.',
    color: 'rose',
    capabilities: ['Prayer Guidance', 'Emotional Support', 'Crisis Detection', 'Pastoral Wisdom'],
  },
];

const features = [
  {
    icon: MessageSquare,
    title: 'Intelligent Chat',
    description: 'Natural conversations with specialized AI agents that understand your spiritual context.',
    color: 'purple',
  },
  {
    icon: BookOpen,
    title: 'Bible Study',
    description: 'Search Scripture with semantic understanding, get cross-references and commentary.',
    color: 'blue',
  },
  {
    icon: PenTool,
    title: 'S.O.A.P. Journaling',
    description: 'Structured journaling: Scripture, Observation, Application, Prayer.',
    color: 'amber',
  },
  {
    icon: Heart,
    title: 'Prayer Tracking',
    description: 'Record prayers, track answers, and receive prayer guidance from the Healer.',
    color: 'rose',
  },
  {
    icon: Brain,
    title: 'Episodic Memory',
    description: 'ORA remembers your spiritual journey for personalized, contextual guidance.',
    color: 'violet',
  },
  {
    icon: History,
    title: 'Reasoning Traces',
    description: 'See how agents collaborate with transparent reasoning visibility.',
    color: 'emerald',
  },
];

const oraMethod = [
  { letter: 'O', title: 'Observe', description: 'Notice key themes and insights in Scripture', color: 'purple' },
  { letter: 'R', title: 'Reflect', description: 'Deepen understanding through guided questions', color: 'blue' },
  { letter: 'A', title: 'Act', description: 'Apply biblical truth to daily life', color: 'amber' },
];

const colorClasses: Record<string, { bg: string; border: string; text: string; glow: string }> = {
  purple: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', text: 'text-purple-400', glow: 'shadow-[0_0_30px_rgba(168,85,247,0.3)]' },
  blue: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', text: 'text-blue-400', glow: 'shadow-[0_0_30px_rgba(59,130,246,0.3)]' },
  amber: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400', glow: 'shadow-[0_0_30px_rgba(245,158,11,0.3)]' },
  rose: { bg: 'bg-rose-500/10', border: 'border-rose-500/30', text: 'text-rose-400', glow: 'shadow-[0_0_30px_rgba(244,63,94,0.3)]' },
  violet: { bg: 'bg-violet-500/10', border: 'border-violet-500/30', text: 'text-violet-400', glow: 'shadow-[0_0_30px_rgba(139,92,246,0.3)]' },
  emerald: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', text: 'text-emerald-400', glow: 'shadow-[0_0_30px_rgba(52,211,153,0.3)]' },
};

export default function FeaturesPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative pt-32 pb-20 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">
            <Sparkles className="w-4 h-4 text-purple-400" />
            <span className="text-xs font-mono text-purple-300 uppercase tracking-wider">All Features</span>
          </div>

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

          <p className="text-lg text-neutral-400 max-w-2xl mx-auto mb-10">
            A multi-agent AI system designed to deepen your faith through intelligent spiritual companionship,
            Scripture study, and pastoral care.
          </p>

          <Link href="/dashboard">
            <ShinyButton>
              <span className="flex items-center gap-2">
                <Sparkles className="w-5 h-5" />
                Try ORA Now
                <ArrowRight className="w-4 h-4" />
              </span>
            </ShinyButton>
          </Link>
        </div>
      </section>

      {/* Core Agents */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-purple-500/20 bg-purple-500/5 mb-6">
              <Brain className="w-3.5 h-3.5 text-purple-400" />
              <span className="text-[10px] uppercase tracking-widest font-medium text-purple-300">
                Multi-Agent Architecture
              </span>
            </div>
            <h2 className="text-3xl font-bold text-white mb-4">Specialized AI Agents</h2>
            <p className="text-neutral-400 max-w-2xl mx-auto">
              Three specialized agents work together as a swarm to provide comprehensive spiritual guidance.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {coreAgents.map((agent) => {
              const colors = colorClasses[agent.color];
              return (
                <SpotlightCard
                  key={agent.name}
                  className={`p-6 rounded-2xl border ${colors.border} bg-white/[0.02]`}
                  spotlightColor="purple"
                >
                  <div className={`w-14 h-14 rounded-xl ${colors.bg} flex items-center justify-center border ${colors.border} ${colors.glow} mb-4`}>
                    <agent.icon className={`w-7 h-7 ${colors.text}`} />
                  </div>
                  <div className="flex items-center gap-2 mb-2">
                    <h3 className="text-xl font-semibold text-white">{agent.name}</h3>
                    <span className={`text-xs px-2 py-0.5 rounded-full ${colors.bg} ${colors.text}`}>
                      {agent.role}
                    </span>
                  </div>
                  <p className="text-neutral-400 text-sm mb-4">{agent.description}</p>
                  <div className="pt-4 border-t border-white/5">
                    <span className="text-xs text-neutral-500 mb-2 block">Capabilities:</span>
                    <div className="flex flex-wrap gap-2">
                      {agent.capabilities.map((cap) => (
                        <span key={cap} className="text-xs px-2 py-1 rounded bg-white/5 text-neutral-300">
                          {cap}
                        </span>
                      ))}
                    </div>
                  </div>
                </SpotlightCard>
              );
            })}
          </div>
        </div>
      </section>

      {/* The ORA Method */}
      <section className="py-20 border-t border-white/5 bg-[#030303]">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">The ORA Method</h2>
            <p className="text-neutral-400">Our framework for deeper spiritual engagement</p>
          </div>

          <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8">
            {oraMethod.map((step, i) => {
              const colors = colorClasses[step.color];
              return (
                <div key={step.letter} className="flex items-center gap-4">
                  <div className={`w-20 h-20 rounded-2xl ${colors.bg} border ${colors.border} flex items-center justify-center ${colors.glow}`}>
                    <span className={`text-4xl font-bold ${colors.text}`}>{step.letter}</span>
                  </div>
                  <div className="text-left">
                    <h3 className="text-lg font-semibold text-white">{step.title}</h3>
                    <p className="text-sm text-neutral-400">{step.description}</p>
                  </div>
                  {i < oraMethod.length - 1 && (
                    <ArrowRight className="w-6 h-6 text-neutral-600 hidden md:block ml-4" />
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-white mb-4">Platform Features</h2>
            <p className="text-neutral-400">Everything you need for your spiritual journey</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature) => {
              const colors = colorClasses[feature.color];
              return (
                <div
                  key={feature.title}
                  className={`p-6 rounded-xl border ${colors.border} ${colors.bg} hover:brightness-110 transition-all`}
                >
                  <div className={`w-12 h-12 rounded-xl ${colors.bg} flex items-center justify-center border ${colors.border} mb-4`}>
                    <feature.icon className={`w-6 h-6 ${colors.text}`} />
                  </div>
                  <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
                  <p className="text-sm text-neutral-400">{feature.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Technical Highlights */}
      <section className="py-20 border-t border-white/5 bg-[#030303]">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">Built with Purpose</h2>
            <p className="text-neutral-400">Advanced technology in service of your faith</p>
          </div>

          <div className="flex flex-wrap justify-center gap-3">
            {[
              'Multi-Agent Swarm',
              'LanceDB Vectors',
              'Bible RAG',
              'Episodic Memory',
              'Reasoning Traces',
              'Safety Guardrails',
              'FastAPI Backend',
              'Next.js Frontend',
            ].map((tech) => (
              <span
                key={tech}
                className="px-4 py-2 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-300 text-sm"
              >
                {tech}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <div className="w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br from-purple-600 to-purple-800 flex items-center justify-center mb-8 shadow-lg shadow-purple-500/30 animate-breathe">
            <Sparkles className="w-10 h-10 text-white" />
          </div>
          <h2 className="text-3xl font-bold text-white mb-4">
            Ready to Experience ORA?
          </h2>
          <p className="text-neutral-400 mb-10 max-w-xl mx-auto">
            Start your spiritual journey with AI-powered guidance designed to deepen your faith.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/dashboard">
              <ShinyButton>
                <span className="flex items-center gap-2">
                  <Sparkles className="w-5 h-5" />
                  Enter Dashboard
                </span>
              </ShinyButton>
            </Link>
            <Link
              href="/about"
              className="px-8 py-3.5 text-sm font-medium text-neutral-300 border border-white/10 rounded-full hover:bg-white/5 hover:text-white transition-all"
            >
              Learn More
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}