frontend/app/get-started/page.tsx

'use client';

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

const steps = [
  {
    number: '1',
    title: 'Meet ORA',
    description: 'ORA is your AI spiritual companion powered by specialized agents: Gatekeeper routes your questions, Theologian provides Scripture insight, and Healer offers pastoral care.',
    icon: Sparkles,
    color: 'purple',
  },
  {
    number: '2',
    title: 'Start a Conversation',
    description: 'Simply share what\'s on your heart. Ask questions about Scripture, seek guidance for life decisions, request prayer support, or explore theological concepts.',
    icon: MessageSquare,
    color: 'blue',
  },
  {
    number: '3',
    title: 'Engage with Scripture',
    description: 'The Theologian agent helps you dive deep into the Bible with cross-references, historical context, and doctrinal insights from across traditions.',
    icon: BookOpen,
    color: 'amber',
  },
  {
    number: '4',
    title: 'Grow Your Faith',
    description: 'ORA remembers your journey through episodic memory, offering increasingly personalized guidance as you continue your spiritual growth.',
    icon: Heart,
    color: 'rose',
  },
];

const features = [
  {
    icon: Shield,
    title: 'Gatekeeper Agent',
    description: 'Intelligently routes your questions to the right specialist agent.',
    color: 'purple',
  },
  {
    icon: BookOpen,
    title: 'Theologian Agent',
    description: 'Deep Scripture analysis with cross-references and doctrinal insights.',
    color: 'blue',
  },
  {
    icon: Heart,
    title: 'Healer Agent',
    description: 'Compassionate pastoral care with prayer guidance and emotional support.',
    color: 'rose',
  },
  {
    icon: Brain,
    title: 'Episodic Memory',
    description: 'ORA remembers your spiritual journey for personalized guidance.',
    color: 'amber',
  },
  {
    icon: History,
    title: 'Reasoning Traces',
    description: 'See how ORA\'s agents collaborate to formulate responses.',
    color: 'emerald',
  },
  {
    icon: PenTool,
    title: 'S.O.A.P. Journaling',
    description: 'Structured journaling: Scripture, Observation, Application, Prayer.',
    color: 'purple',
  },
];

const colorClasses: Record<string, { bg: string; border: string; text: string; gradient: string }> = {
  purple: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', text: 'text-purple-400', gradient: 'from-purple-500 to-violet-500' },
  blue: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', text: 'text-blue-400', gradient: 'from-blue-500 to-cyan-500' },
  amber: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400', gradient: 'from-amber-500 to-orange-500' },
  rose: { bg: 'bg-rose-500/10', border: 'border-rose-500/30', text: 'text-rose-400', gradient: 'from-rose-500 to-pink-500' },
  emerald: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', text: 'text-emerald-400', gradient: 'from-emerald-500 to-teal-500' },
};

export default function GetStartedPage() {
  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">Get Started</span>
          </div>

          <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-6 text-white">
            Begin Your <span className="text-purple-400">Spiritual Journey</span>
          </h1>

          <p className="text-lg text-neutral-400 max-w-2xl mx-auto mb-10">
            ORA is your sovereign AI spiritual companion, designed to support your faith journey with theologically-grounded guidance, Scripture wisdom, and pastoral care.
          </p>

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

      {/* How It Works */}
      <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">How ORA Works</h2>
            <p className="text-neutral-400 max-w-xl mx-auto">
              Four simple steps to deeper spiritual engagement
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {steps.map((step) => {
              const colors = colorClasses[step.color];
              return (
                <SpotlightCard
                  key={step.number}
                  className={`p-6 rounded-xl border ${colors.border} bg-white/[0.02]`}
                  spotlightColor="purple"
                >
                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${colors.gradient} flex items-center justify-center mb-4`}>
                    <span className="text-xl font-bold text-white">{step.number}</span>
                  </div>
                  <div className={`w-10 h-10 rounded-lg ${colors.bg} flex items-center justify-center border ${colors.border} mb-4`}>
                    <step.icon className={`w-5 h-5 ${colors.text}`} />
                  </div>
                  <h3 className="text-lg font-semibold text-white mb-2">{step.title}</h3>
                  <p className="text-neutral-400 text-sm leading-relaxed">{step.description}</p>
                </SpotlightCard>
              );
            })}
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <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-16">
            <h2 className="text-3xl font-bold text-white mb-4">What You Can Do with ORA</h2>
            <p className="text-neutral-400 max-w-xl mx-auto">
              Powerful features designed for your spiritual growth
            </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} bg-white/[0.02] hover:bg-white/[0.04] 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-neutral-400 text-sm">{feature.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* The ORA Method */}
      <section className="py-20 border-t border-white/5">
        <div className="max-w-4xl 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 max-w-xl mx-auto">
              Our name embodies our framework for spiritual engagement
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-6 rounded-xl bg-purple-500/5 border border-purple-500/20 text-center">
              <div className="text-4xl font-bold text-purple-400 mb-2">O</div>
              <h3 className="text-lg font-semibold text-white mb-2">Observe</h3>
              <p className="text-neutral-400 text-sm">
                Pay attention to Scripture, your circumstances, and God's voice in your life.
              </p>
            </div>
            <div className="p-6 rounded-xl bg-purple-500/5 border border-purple-500/20 text-center">
              <div className="text-4xl font-bold text-purple-400 mb-2">R</div>
              <h3 className="text-lg font-semibold text-white mb-2">Reflect</h3>
              <p className="text-neutral-400 text-sm">
                Consider what God is teaching you through study, meditation, and prayer.
              </p>
            </div>
            <div className="p-6 rounded-xl bg-purple-500/5 border border-purple-500/20 text-center">
              <div className="text-4xl font-bold text-purple-400 mb-2">A</div>
              <h3 className="text-lg font-semibold text-white mb-2">Act</h3>
              <p className="text-neutral-400 text-sm">
                Put your insights into practice and live out your faith in daily life.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 border-t border-white/5 bg-[#030303]">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">Ready to Begin?</h2>
          <p className="text-neutral-400 mb-8 max-w-xl mx-auto">
            Start your conversation with ORA and experience AI-powered spiritual guidance designed for your unique journey.
          </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" />
                  Launch ORA
                </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 inline-flex items-center gap-2"
            >
              Learn More
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}