'use client';

import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureCard from '@/components/FeatureCard';

interface FeatureItem {
  icon: string;
  label: string;
  premium?: boolean;
}

interface FeatureSection {
  id: string;
  title: string;
  description: string;
  icon: string;
  badge?: string;
  features: FeatureItem[];
}

export default function FeaturesPage() {
  const features: FeatureSection[] = [
    {
      id: 'ai-self-hosting',
      title: 'AI-Powered Self-Hosting',
      description:
        'Talk to your homelab. DashCaddy\'s AI Intent Router understands natural language commands, and the built-in MCP Server lets AI assistants like Claude and GPT control your infrastructure directly. The first self-hosting platform built for the agentic era.',
      icon: '🤖',
      badge: 'New',
      features: [
        { icon: '🎯', label: 'AI Intent Router — natural language commands' },
        { icon: '🔌', label: 'MCP Server for Claude & GPT control' },
        { icon: '💬', label: '"deploy Plex", "check SSL status", "restart jellyfin"' },
        { icon: '🧠', label: 'Context-aware infrastructure reasoning' },
      ],
    },
    {
      id: 'app-deployment',
      title: 'App Deployment',
      description:
        'Deploy from a library of 93 pre-configured Docker templates with one click. Automatic configuration, smart defaults, and service discovery that auto-detects running containers and lets you adopt them instantly. From zero to live in seconds.',
      icon: '🚀',
      features: [
        { icon: '⚡', label: 'One-click deployment' },
        { icon: '📦', label: '93 app templates' },
        { icon: '⚙️', label: 'Automatic configuration' },
        { icon: '🔍', label: 'Service Discovery & auto-adopt' },
        { icon: '🧙', label: 'Smart Defaults Wizard' },
      ],
    },
    {
      id: 'ssl-security',
      title: 'SSL & Security',
      description:
        'Enterprise-grade security, baked in. Automatic SSL via Caddy\'s internal CA, TOTP 2FA with email magic link, multi-user admin with role-based access, encrypted credential vault, comprehensive audit logs, and a Security Center that unifies events from every source.',
      icon: '🔒',
      features: [
        { icon: '🔐', label: 'Automatic SSL certificates' },
        { icon: '📱', label: 'TOTP 2FA + email magic link' },
        { icon: '👥', label: 'Multi-user admin (RBAC + invites)' },
        { icon: '🔑', label: 'Encrypted credential vault' },
        { icon: '📝', label: 'Audit logging' },
        { icon: '🛡️', label: 'Security Center (multi-source events)' },
      ],
    },
    {
      id: 'dns-networking',
      title: 'DNS & Networking',
      description:
        'Full DNS automation powered by Technitium DNS, plus a Caddyfile-as-code visual builder for crafting reverse proxy rules without touching config files. Manage subdomains, routes, and proxies from a single dashboard.',
      icon: '🌐',
      features: [
        { icon: '✨', label: 'Automatic DNS records' },
        { icon: '🔗', label: 'Technitium DNS integration' },
        { icon: '🏗️', label: 'Caddyfile-as-code visual builder' },
        { icon: '🔁', label: 'Reverse proxy management' },
      ],
    },
    {
      id: 'monitoring-ops',
      title: 'Monitoring & Operations',
      description:
        'Real-time visibility into every container and service. WebSocket live updates keep your dashboard in sync instantly, health checks catch problems early, and Prometheus metrics export feeds your existing observability stack.',
      icon: '📊',
      features: [
        { icon: '🟢', label: 'Real-time health monitoring' },
        { icon: '⚡', label: 'WebSocket live updates' },
        { icon: '📈', label: 'Prometheus metrics export' },
        { icon: '💓', label: 'Container health checks' },
        { icon: '⏱️', label: 'Response time & resource tracking' },
      ],
    },
    {
      id: 'backup-recovery',
      title: 'Backup & Recovery',
      description:
        'One-click backup and disaster recovery built for peace of mind. Full-system backups with checksum verification, point-in-time restore, and a disaster recovery workflow that gets you back online fast when it matters most.',
      icon: '💾',
      features: [
        { icon: '🔙', label: 'One-click backup & restore' },
        { icon: '🆘', label: 'Disaster Recovery mode' },
        { icon: '✅', label: 'Full-system backup w/ checksums' },
        { icon: '⏮️', label: 'Point-in-time restore' },
      ],
    },
    {
      id: 'developer-platform',
      title: 'Developer Platform',
      description:
        'DashCaddy isn\'t just a UI—it\'s a platform. A full REST API with JSON endpoints, a plugin/extension system for custom workflows, and internationalization across 31 languages including full RTL support.',
      icon: '🛠️',
      features: [
        { icon: '🌐', label: 'REST API (JSON, MCP protocol)' },
        { icon: '🔌', label: 'Plugin / Extension system' },
        { icon: '🔄', label: 'Auto-update manager' },
        { icon: '🌍', label: 'i18n: EN/ES/FR/DE/AR (RTL)' },
      ],
    },
    {
      id: 'premium',
      title: 'Premium Features',
      description:
        'Power features for production and multi-host deployments. Auto-Login SSO across your apps, multi-container Recipes, Docker Swarm orchestration, and Fleet Management to register remote instances with parallel health probes and multi-host deploy plans.',
      icon: '⭐',
      features: [
        { icon: '🔑', label: 'Auto-Login SSO', premium: true },
        { icon: '📚', label: 'Recipes (multi-container stacks)', premium: true },
        { icon: '🐳', label: 'Docker Swarm orchestration', premium: true },
        { icon: '📡', label: 'Multi-Host Fleet Management', premium: true },
        { icon: '🚀', label: 'Priority support', premium: true },
      ],
    },
  ];

  return (
    <div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
      <Navbar />

      {/* Hero Section */}
      <section className="relative py-16 sm:py-20 lg:py-24">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl opacity-30 animate-pulse" />
        </div>

        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-300">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
            </span>
            AI-native self-hosting platform
          </div>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
            Every Tool You Need to <span className="text-brand-400">Self-Host</span>
          </h1>
          <p className="text-xl text-surface-300 max-w-2xl mx-auto">
            From AI-powered deployment to enterprise security, real-time monitoring, and multi-host fleet management — DashCaddy brings the entire self-hosting stack under one roof.
          </p>
        </div>
      </section>

      {/* Feature Sections */}
      <section className="relative py-16 sm:py-20 lg:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="space-y-24">
            {features.map((feature, idx) => (
              <div
                key={feature.id}
                className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}
              >
                {/* Content Side */}
                <div className={idx % 2 === 1 ? 'lg:order-2' : ''}>
                  <div className="mb-6 inline-flex rounded-lg bg-brand-500/10 p-4 text-brand-400">
                    <div className="text-3xl">{feature.icon}</div>
                  </div>

                  {feature.badge && (
                    <span className="mb-3 ml-2 inline-block align-middle text-xs px-2 py-1 bg-brand-500/20 text-brand-300 rounded-full font-semibold uppercase tracking-wide">
                      {feature.badge}
                    </span>
                  )}

                  <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-surface-50">
                    {feature.title}
                  </h2>
                  <p className="text-lg text-surface-300 mb-8 leading-relaxed">
                    {feature.description}
                  </p>

                  {/* Feature Grid */}
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {feature.features.map((item, itemIdx) => (
                      <div
                        key={itemIdx}
                        className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
                          item.premium
                            ? 'border-brand-500/30 bg-brand-500/5 hover:bg-brand-500/10'
                            : 'border-surface-700/30 bg-surface-800/30 hover:border-surface-700/50'
                        }`}
                      >
                        <span className="text-xl flex-shrink-0">{item.icon}</span>
                        <span
                          className={`text-sm font-medium ${item.premium ? 'text-brand-300' : 'text-surface-300'}`}
                        >
                          {item.label}
                          {item.premium && (
                            <span className="ml-1 inline-block text-xs px-2 py-0.5 bg-brand-500/20 text-brand-300 rounded font-semibold">
                              Premium
                            </span>
                          )}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Visual Side */}
                <div className={idx % 2 === 1 ? 'lg:order-1' : ''}>
                  <div className="relative">
                    <div className="absolute inset-0 bg-gradient-to-br from-brand-500/10 to-brand-600/5 rounded-2xl blur-xl" />
                    <div className="relative rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8">
                      <div className="space-y-4">
                        {feature.features.slice(0, 3).map((item, itemIdx) => (
                          <div
                            key={itemIdx}
                            className="flex items-center gap-3 p-3 bg-surface-900/50 rounded-lg border border-surface-700/30"
                          >
                            <div className="w-2 h-2 rounded-full bg-brand-400" />
                            <span className="text-sm text-surface-300">{item.label}</span>
                          </div>
                        ))}
                      </div>
                      <div className="mt-6 pt-6 border-t border-surface-700/30">
                        <div className="text-sm text-surface-500 text-center">
                          <span className="text-brand-400 font-semibold">
                            {feature.features.length} features
                          </span>{' '}
                          included
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AI Features Highlight */}
      <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-900 to-surface-950">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[40rem] h-96 bg-brand-500/10 rounded-full blur-3xl opacity-40" />
        </div>

        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <span className="rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
              The Agentic Era of Self-Hosting
            </span>
            <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
              Control Your Homelab With <span className="text-brand-400">Natural Language</span>
            </h2>
            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
              DashCaddy speaks AI natively. Type what you want, or let your favorite assistant do it.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* AI Intent Router */}
            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
              <div className="relative z-10">
                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
                  <div className="text-3xl">🎯</div>
                </div>
                <h3 className="mb-2 text-xl font-semibold text-surface-50">AI Intent Router</h3>
                <p className="text-surface-300 text-sm leading-relaxed mb-6">
                  Skip the menus. Just type a command in plain English and DashCaddy figures out the right actions.
                </p>
                <div className="space-y-2">
                  {['"deploy Plex"', '"check SSL status"', '"restart jellyfin"', '"show failing containers"'].map(
                    (cmd, i) => (
                      <div
                        key={i}
                        className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
                      >
                        <span className="text-brand-400 font-mono text-xs select-none">›</span>
                        <span className="text-sm text-surface-300 font-mono">{cmd}</span>
                      </div>
                    )
                  )}
                </div>
              </div>
            </div>

            {/* MCP Server */}
            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
              <div className="relative z-10">
                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
                  <div className="text-3xl">🔌</div>
                </div>
                <h3 className="mb-2 text-xl font-semibold text-surface-50">MCP Server</h3>
                <p className="text-surface-300 text-sm leading-relaxed mb-6">
                  DashCaddy runs as a Model Context Protocol server, so AI assistants can manage your homelab directly.
                </p>
                <div className="space-y-2">
                  {[
                    'Claude desktop & API',
                    'GPT / ChatGPT integrations',
                    'Any MCP-compatible client',
                    'Scoped, audited, secure access',
                  ].map((item, i) => (
                    <div
                      key={i}
                      className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
                    >
                      <div className="w-2 h-2 rounded-full bg-brand-400" />
                      <span className="text-sm text-surface-300">{item}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Free vs Premium Comparison */}
      <section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
              Free vs <span className="text-brand-400">Premium</span>
            </h2>
            <p className="text-lg text-surface-400">
              A powerful free tier for everyone. Premium unlocks multi-host, SSO, and more.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Free Column */}
            <div className="rounded-2xl border border-surface-700/50 bg-surface-800/40 backdrop-blur p-8">
              <div className="mb-6">
                <h3 className="text-2xl font-bold text-surface-50">Free</h3>
                <p className="text-sm text-surface-400 mt-1">Everything to self-host a single node.</p>
              </div>
              <ul className="space-y-3">
                {[
                  '93 one-click app templates',
                  'Automatic SSL certificates',
                  'Technitium DNS automation',
                  'Reverse proxy + Caddyfile builder',
                  'Real-time monitoring & WebSocket updates',
                  'TOTP 2FA + multi-user admin',
                  'Encrypted credential vault',
                  'Audit logging',
                  'Security Center',
                  'One-click backup & restore',
                  'AI Intent Router + MCP Server',
                  'REST API (260+ endpoints)',
                  'Plugin / Extension system',
                  'i18n (31 languages, RTL)',
                  'Prometheus metrics export',
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                    <span className="text-sm text-surface-300">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Premium Column */}
            <div className="relative rounded-2xl border border-brand-500/40 bg-gradient-to-br from-brand-950/40 to-surface-900 p-8">
              <div className="absolute -top-3 right-6">
                <span className="rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white uppercase tracking-wide">
                  Premium
                </span>
              </div>
              <div className="mb-6">
                <h3 className="text-2xl font-bold text-surface-50">Premium</h3>
                <p className="text-sm text-surface-400 mt-1">For production, multi-host, and teams.</p>
              </div>
              <p className="text-sm text-brand-300 mb-4 font-medium">
                Everything in Free, plus:
              </p>
              <ul className="space-y-3">
                {[
                  'Auto-Login SSO for deployed apps',
                  'Recipes — multi-container stack deployment',
                  'Docker Swarm orchestration',
                  'Multi-Host Fleet Management (remote instances, parallel health probes, multi-host deploy plans)',
                  'Disaster Recovery (full-system backup w/ checksums)',
                  'Priority support',
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span className="text-sm text-surface-200">{item}</span>
                  </li>
                ))}
              </ul>

              <Link
                href="/pricing"
                className="mt-8 inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30"
              >
                Explore Premium Plans
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                </svg>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ CTA Section */}
      <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <div className="mb-12 text-center">
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
              Questions About <span className="text-brand-400">Features?</span>
            </h2>
            <p className="text-lg text-surface-400">
              Check our documentation or contact support.
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/docs"
              className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 font-semibold text-white hover:bg-brand-600 transition-all"
            >
              Read Documentation
            </Link>
            <a
              href="mailto:support@dashcaddy.net"
              className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 font-semibold text-surface-50 hover:border-brand-400 transition-colors"
            >
              Contact Support
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}