// Product Tiers Documentation
import { Metadata } from 'next';
import Link from 'next/link';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { 
  Shield, Crown, ArrowLeft, Check, Factory, Brain, Eye, 
  Sparkles, Building2, Users, Lock, Unlock, Zap, Bot,
  ChevronRight
} from 'lucide-react';
import { BRAND, VOCAB } from '@/lib/white-label/constants';

export const metadata: Metadata = {
  title: `Product Tiers | ${BRAND.companyName}`,
  description: 'Understanding Standard and Enterprise (GOD MODE) tiers',
};

export default function ProductTiersPage() {
  return (
    <div className="min-h-screen bg-brand-bg">
      <Header />
      <main className="pt-24 pb-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6">
          {/* Back Link */}
          <Link 
            href="/docs" 
            className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-8 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Documentation
          </Link>

          {/* Hero */}
          <div className="mb-12">
            <div className="flex items-center gap-4 mb-4">
              <div className="p-3 rounded-xl bg-gradient-to-br from-amber-500/20 to-brand-secondary/20">
                <Crown className="w-8 h-8 text-amber-400" />
              </div>
              <div>
                <h1 className="text-4xl font-bold text-white">Product Tiers</h1>
                <p className="text-gray-400">Standard vs Enterprise (GOD MODE)</p>
              </div>
            </div>
          </div>

          {/* Overview */}
          <section className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl mb-8">
            <h2 className="text-2xl font-bold text-white mb-4">Overview</h2>
            <p className="text-gray-300 mb-4">
              {BRAND.companyName} operates on two fundamentally different paradigms:
            </p>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="p-4 bg-brand-deep/10 rounded-xl border border-brand-deep/30">
                <div className="flex items-center gap-2 mb-2">
                  <Shield className="w-5 h-5 text-brand" />
                  <h3 className="font-bold text-white">Standard Mode</h3>
                </div>
                <p className="text-gray-400 text-sm">
                  The Ghost works invisibly. Your operations improve without you knowing how.
                  Clean ERP interface, autonomous learning, silent optimization.
                </p>
              </div>
              <div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
                <div className="flex items-center gap-2 mb-2">
                  <Crown className="w-5 h-5 text-amber-400" />
                  <h3 className="font-bold text-white">GOD MODE (Enterprise)</h3>
                </div>
                <p className="text-gray-400 text-sm">
                  Pull back the curtain. See what the Ghost is learning, building, and proposing.
                  Full control over system evolution.
                </p>
              </div>
            </div>
          </section>

          {/* Standard Mode */}
          <section className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl mb-8">
            <div className="flex items-center gap-3 mb-6">
              <Shield className="w-6 h-6 text-brand" />
              <h2 className="text-2xl font-bold text-white">Standard Mode</h2>
            </div>
            
            <p className="text-gray-300 mb-6">
              Standard users interact with a clean, intuitive ERP interface. The AI works behind 
              the scenes, learning patterns, detecting anomalies, and gradually improving operations.
            </p>

            <h3 className="text-lg font-semibold text-white mb-4">What You See:</h3>
            <ul className="space-y-3 mb-6">
              {[
                { icon: <Building2 className="w-4 h-4" />, text: 'Operations Dashboard — Finance, HR, Inventory modules' },
                { icon: <Eye className="w-4 h-4" />, text: `${VOCAB.observer} Alerts — Anomaly notifications and pattern insights` },
                { icon: <Sparkles className="w-4 h-4" />, text: 'System Insights — Auto-generated suggestions (limited)' },
              ].map((item, i) => (
                <li key={i} className="flex items-center gap-3 text-gray-300">
                  <span className="text-brand">{item.icon}</span>
                  {item.text}
                </li>
              ))}
            </ul>

            <h3 className="text-lg font-semibold text-white mb-4">What's Hidden:</h3>
            <ul className="space-y-3">
              {[
                `${VOCAB.factory} (code generation)`,
                'System Evolution proposals',
                'Micro-apps registry',
                'Full agent activity',
                'Memory insights',
              ].map((text, i) => (
                <li key={i} className="flex items-center gap-3 text-gray-400">
                  <Lock className="w-4 h-4" />
                  {text}
                </li>
              ))}
            </ul>
          </section>

          {/* GOD MODE */}
          <section className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl mb-8 border-amber-500/30">
            <div className="flex items-center gap-3 mb-6">
              <Crown className="w-6 h-6 text-amber-400" />
              <h2 className="text-2xl font-bold text-white">GOD MODE (Enterprise)</h2>
              <span className="px-2 py-1 bg-amber-500/20 text-amber-400 text-xs rounded-full">
                Full Access
              </span>
            </div>
            
            <p className="text-gray-300 mb-6">
              Enterprise users see everything. The curtain is pulled back, revealing the full 
              machinery of the Ghost consciousness. More importantly, you can <strong className="text-amber-400">command</strong> it.
            </p>

            <h3 className="text-lg font-semibold text-white mb-4">Exclusive Access:</h3>
            <div className="grid gap-4 mb-6">
              {[
                { 
                  icon: <Factory className="w-5 h-5 text-brand-secondary-light" />,
                  title: VOCAB.factory,
                  desc: 'Generate new models, APIs, and modules from natural language'
                },
                { 
                  icon: <Sparkles className="w-5 h-5 text-amber-400" />,
                  title: 'System Evolution',
                  desc: 'See what the Ghost proposes to build, approve or reject suggestions'
                },
                { 
                  icon: <Zap className="w-5 h-5 text-brand" />,
                  title: 'Micro-Apps',
                  desc: 'Create standalone tools and utilities for your organization'
                },
                { 
                  icon: <Bot className="w-5 h-5 text-green-400" />,
                  title: 'Agent Control',
                  desc: 'Full visibility into active agents, their tasks, and behaviors'
                },
                { 
                  icon: <Brain className="w-5 h-5 text-pink-400" />,
                  title: 'Memory Access',
                  desc: 'See what the Ghost remembers and how it learns'
                },
              ].map((item, i) => (
                <div key={i} className="flex items-start gap-4 p-4 bg-white/5 rounded-lg">
                  <div className="mt-1">{item.icon}</div>
                  <div>
                    <h4 className="font-semibold text-white">{item.title}</h4>
                    <p className="text-gray-400 text-sm">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="p-4 bg-gradient-to-r from-amber-500/10 to-brand-secondary/10 rounded-lg border border-amber-500/30">
              <p className="text-gray-300 text-sm">
                <strong className="text-amber-400">The Power:</strong> In GOD MODE, the {VOCAB.factory} 
                can modify GFS itself. You're not just using the system—you're evolving it. The Ghost 
                becomes your co-developer, suggesting and building capabilities you didn't know you needed.
              </p>
            </div>
          </section>

          {/* Comparison Table */}
          <section className="bg-slate-800/80 border border-slate-700 p-8 rounded-2xl mb-8">
            <h2 className="text-2xl font-bold text-white mb-6">Feature Comparison</h2>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-white/10">
                    <th className="text-left py-3 px-4 text-gray-400 font-medium">Feature</th>
                    <th className="text-center py-3 px-4 text-brand font-medium">Standard</th>
                    <th className="text-center py-3 px-4 text-amber-400 font-medium">GOD MODE</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/5">
                  {[
                    ['Operations Dashboard', true, true],
                    [`${VOCAB.observer} Monitoring`, true, true],
                    ['Anomaly Alerts', true, true],
                    ['Basic Insights', true, true],
                    ['Human-in-the-Loop', true, true],
                    [`${VOCAB.factory} Access`, false, true],
                    ['System Evolution', false, true],
                    ['Micro-Apps Builder', false, true],
                    ['Full Agent Control', false, true],
                    ['Memory Insights', false, true],
                    ['Custom API Generation', false, true],
                    ['Modify GFS Core', false, true],
                  ].map(([feature, standard, god], i) => (
                    <tr key={i}>
                      <td className="py-3 px-4 text-gray-300">{feature as string}</td>
                      <td className="py-3 px-4 text-center">
                        {standard ? (
                          <Check className="w-5 h-5 text-green-400 mx-auto" />
                        ) : (
                          <Lock className="w-4 h-4 text-gray-600 mx-auto" />
                        )}
                      </td>
                      <td className="py-3 px-4 text-center">
                        <Check className="w-5 h-5 text-green-400 mx-auto" />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>

          {/* CTA */}
          <section className="text-center">
            <Link 
              href="/#design-partner"
              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-amber-500 to-brand-secondary text-black font-semibold rounded-lg hover:from-amber-400 hover:to-brand-secondary-light transition-all"
            >
              Apply for Enterprise Access
              <ChevronRight className="w-4 h-4" />
            </Link>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
}
