'use client';

import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureCard from '@/components/FeatureCard';
import AppShowcase from '@/components/AppShowcase';
import InstallCommand from '@/components/InstallCommand';
import CompetitorComparison from '@/components/CompetitorComparison';
import FaqSection from '@/components/FaqSection';

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
      {/* Navigation */}
      <Navbar />

      {/* Hero Section */}
      <section id="hero" className="relative w-full overflow-hidden py-20 sm:py-32 lg:py-40">
        {/* Background gradient effects */}
        <div className="absolute inset-0 -z-10">
          {/* Radial gradient glow */}
          <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-slow" />
          <div className="absolute top-1/3 right-0 w-72 h-72 bg-brand-600/10 rounded-full blur-3xl opacity-20" />
          <div className="absolute bottom-0 left-1/4 w-80 h-80 bg-brand-400/10 rounded-full blur-3xl opacity-20" />
        </div>

        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            {/* Left Content */}
            <div className="flex flex-col justify-center space-y-8">
              <div className="space-y-4">
                {/* AI badge */}
                <div className="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-400 backdrop-blur-sm">
                  <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-Powered Self-Hosting
                </div>

                <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
                  <span className="text-brand-400">Self-Hosting</span>
                  <br />
                  <span>Made Intelligent</span>
                </h1>
                <p className="text-xl text-surface-300 max-w-lg leading-relaxed">
                  Just say &ldquo;deploy Plex&rdquo; — DashCaddy&rsquo;s AI Intent Router handles the rest.
                  Deploy apps with one click, automatic SSL, DNS, and reverse proxy — or ship your own code straight from GitHub with built-in Shipdeck deploys.
                  78 templates, fleet management, and an MCP control plane for AI assistants.
                  Everything you need for self-hosted perfection.
                </p>
              </div>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4">
                <Link
                  href="/pricing"
                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 text-base font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
                >
                  <span>View Plans</span>
                  <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>
                <Link
                  href="/docs"
                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 text-base font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
                >
                  <span>Read the Docs</span>
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                  </svg>
                </Link>
              </div>

              {/* Trust indicators */}
              <div className="flex flex-col sm:flex-row gap-6 pt-4">
                <div className="flex items-center gap-3">
                  <div className="flex -space-x-2">
                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
                  </div>
                  <p className="text-sm text-surface-400">Trusted by self-hosting enthusiasts</p>
                </div>
                <div className="flex items-center gap-3">
                  <div className="text-2xl">🌍</div>
                  <p className="text-sm text-surface-400">31 languages incl. Arabic (RTL)</p>
                </div>
              </div>
            </div>

            {/* Right - Dashboard Mockup */}
            <div className="relative hidden lg:block">
              <div className="relative mx-auto aspect-square max-w-md">
                {/* Outer glow */}
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand-400/20 to-brand-600/20 blur-2xl" />

                {/* Dashboard mockup container */}
                <div className="relative rounded-2xl border border-surface-700/50 bg-gradient-to-br from-surface-800 to-surface-900 p-6 overflow-hidden">
                  {/* Terminal-like dashboard header */}
                  <div className="space-y-4">
                    {/* Top bar */}
                    <div className="flex items-center justify-between bg-surface-900/50 rounded-lg p-3 border border-surface-700/30">
                      <div className="flex items-center gap-2">
                        <div className="w-3 h-3 rounded-full bg-red-500/60" />
                        <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
                        <div className="w-3 h-3 rounded-full bg-green-500/60" />
                      </div>
                      <span className="text-xs font-mono text-surface-500">dashcaddy.local</span>
                    </div>

                    {/* AI command bar */}
                    <div className="bg-brand-500/10 border border-brand-500/30 rounded-lg p-3 animate-fade-in">
                      <div className="flex items-center gap-2">
                        <span className="text-sm">🤖</span>
                        <span className="text-sm font-mono text-brand-300">&ldquo;deploy Plex&rdquo;</span>
                      </div>
                      <div className="mt-2 flex items-center gap-2 text-xs text-surface-400">
                        <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded">✓ deployed</span>
                        <span>SSL + DNS + route configured</span>
                      </div>
                    </div>

                    {/* Content area with animated elements */}
                    <div className="space-y-3">
                      {/* Container item 1 */}
                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-mono text-brand-400">🐳 plex</span>
                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
                        </div>
                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-2/3 rounded-full" />
                        </div>
                      </div>

                      {/* Container item 2 */}
                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.1s' }}>
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-mono text-brand-400">☁️ nextcloud</span>
                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
                        </div>
                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-3/4 rounded-full" />
                        </div>
                      </div>

                      {/* Container item 3 */}
                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.2s' }}>
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-mono text-brand-400">📊 prometheus</span>
                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
                        </div>
                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-1/2 rounded-full" />
                        </div>
                      </div>
                    </div>

                    {/* Stats row */}
                    <div className="grid grid-cols-3 gap-2 pt-2 border-t border-surface-700/30">
                      <div className="text-center py-2">
                        <div className="text-lg font-bold text-brand-400">3</div>
                        <div className="text-xs text-surface-500">Containers</div>
                      </div>
                      <div className="text-center py-2 border-l border-r border-surface-700/30">
                        <div className="text-lg font-bold text-brand-400">100%</div>
                        <div className="text-xs text-surface-500">Uptime</div>
                      </div>
                      <div className="text-center py-2">
                        <div className="text-lg font-bold text-brand-400">42GB</div>
                        <div className="text-xs text-surface-500">Storage</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Install Command */}
      <InstallCommand />

      {/* Key Features Grid */}
      <section id="features" 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-7xl px-4 sm:px-6 lg:px-8">
          {/* Section Header */}
          <div className="mb-16 text-center">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
              Powerful Features
            </h2>
            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
              AI-native self-hosting — from one-click deploys to fleet management and a full MCP control plane.
            </p>
          </div>

          {/* Feature Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <FeatureCard
              icon="🤖"
              title="AI Intent Router"
              description="Natural language to structured actions. Just type &ldquo;deploy Plex&rdquo; and DashCaddy provisions the container, SSL, DNS, and reverse proxy automatically."
            />
            <FeatureCard
              icon="🧩"
              title="MCP Server"
              description="Model Context Protocol integration turns DashCaddy into an AI-native control plane. Your AI assistant deploys apps, checks health, manages containers, backups, and DNS through one MCP endpoint — and the public /api/v1/capabilities manifest tells it exactly what the running build supports."
            />
            <FeatureCard
              icon="🚀"
              title="78 App Templates"
              description="Choose from 78 pre-configured app templates with smart defaults — deploy your favorite applications in one click, no manual configuration, no compose files to write."
            />
            <FeatureCard
              icon="🛡️"
              title="Security Center"
              description="Unified event pipeline aggregates deploys, Caddy, DNS, Tailscale, audit log, and health checker events into one real-time security dashboard — with per-IP perimeter analytics and automatic PII masking on every log."
            />
            <FeatureCard
              icon="🖥️"
              title="Multi-Host Fleet"
              description="Register remote DashCaddy instances, run parallel health probes across your fleet, and execute multi-host deployment plans from one console."
            />
            <FeatureCard
              icon="🔍"
              title="Service Discovery"
              description="Auto-detect running containers and adopt them with one click — Caddy route and DNS record created automatically, zero manual config."
            />
            <FeatureCard
              icon="🔒"
              title="Security & Auth"
              description="TOTP 2FA, email magic links, multi-user with admin invites, audit logging, and encrypted credential management built in."
            />
            <FeatureCard
              icon="♻️"
              title="Disaster Recovery"
              description="Full-system backups with SHA-256 checksum verification and one-click restore. Your infrastructure is always recoverable."
            />
            <FeatureCard
              icon="🔌"
              title="Plugin System"
              description="Extend DashCaddy with custom service types, notification providers, workflow actions, and dashboard widgets. A fully extensible platform."
            />
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section id="how-it-works" 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">
          {/* Section Header */}
          <div className="mb-16 text-center">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
              How It Works
            </h2>
            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
              Get up and running in minutes, not hours.
            </p>
          </div>

          {/* Steps */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Step 1 */}
            <div className="relative">
              <div className="flex flex-col items-center space-y-4">
                {/* Number Circle */}
                <div className="relative">
                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
                    <span className="text-2xl font-bold text-brand-400">1</span>
                  </div>
                  {/* Connector line (hidden on mobile, visible on larger screens) */}
                  <div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
                </div>

                {/* Content */}
                <div className="text-center pt-4">
                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
                    Install &amp; Setup Wizard
                  </h3>
                  <p className="text-surface-400">
                    Install DashCaddy, then answer one question — &ldquo;What do you want to self-host?&rdquo; The Smart Defaults Wizard matches your hardware profile and configures everything automatically.
                  </p>
                </div>
              </div>
            </div>

            {/* Step 2 */}
            <div className="relative">
              <div className="flex flex-col items-center space-y-4">
                {/* Number Circle */}
                <div className="relative">
                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
                    <span className="text-2xl font-bold text-brand-400">2</span>
                  </div>
                  {/* Connector line */}
                  <div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
                </div>

                {/* Content */}
                <div className="text-center pt-4">
                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
                    Deploy
                  </h3>
                  <p className="text-surface-400">
                    Click &ldquo;Deploy&rdquo; on any template, or just ask the AI Intent Router in plain English. SSL certificates and DNS records are automatically configured.
                  </p>
                </div>
              </div>
            </div>

            {/* Step 3 */}
            <div className="relative">
              <div className="flex flex-col items-center space-y-4">
                {/* Number Circle */}
                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
                  <span className="text-2xl font-bold text-brand-400">3</span>
                </div>

                {/* Content */}
                <div className="text-center pt-4">
                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
                    Done
                  </h3>
                  <p className="text-surface-400">
                    Your app is live with SSL and DNS configured. Monitor health in real time, manage containers, and run one-click backups from the dashboard.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* App Showcase */}
      <AppShowcase />

      {/* Competitor Comparison */}
      <CompetitorComparison />

      {/* Why DashCaddy Section */}
      <section id="why-dashcaddy" 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-7xl px-4 sm:px-6 lg:px-8">
          {/* Section Header */}
          <div className="mb-16 text-center">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
              Why DashCaddy?
            </h2>
            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
              Compare the pain of manual setup versus the power of an AI-native self-hosting platform.
            </p>
          </div>

          {/* Comparison Table */}
          <div className="overflow-hidden rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-surface-700/50">
                    <th className="px-6 py-4 text-left text-sm font-semibold text-surface-300 bg-surface-900/50">
                      Feature
                    </th>
                    <th className="px-6 py-4 text-center text-sm font-semibold text-surface-300 bg-surface-900/50">
                      Manual Setup
                    </th>
                    <th className="px-6 py-4 text-center text-sm font-semibold text-brand-400 bg-surface-900/70">
                      DashCaddy
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-surface-700/30">
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">SSL Certificates</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Manual configuration via Let&rsquo;s Encrypt</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Automatic</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">DNS Management</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Manual DNS records</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Automatic (Technitium)</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Reverse Proxy Setup</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Complex Nginx/Caddy config</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Caddyfile-as-Code builder</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">App Templates</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Write your own compose files</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ 78 pre-configured</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">AI Commands</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Not available</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ AI Intent Router + MCP</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Fleet Management</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">SSH into each host manually</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Multi-host, parallel probes</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Security Center</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Scattered logs &amp; tools</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Unified event pipeline</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Disaster Recovery</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Manual scripts, no verification</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ SHA-256 verified backups</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Real-Time Updates</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Manual refresh, CLI only</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ WebSocket live dashboard</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Plugin System</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Not extensible</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Custom widgets, providers</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Health Monitoring</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Third-party tools required</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Built-in + Prometheus export</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Backup &amp; Restore</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Manual scripts and planning</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ One-click backup</span>
                    </td>
                  </tr>
                  <tr className="hover:bg-surface-800/30 transition-colors">
                    <td className="px-6 py-4 text-sm text-surface-300">Audit Logs</td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-surface-500">Not included</span>
                    </td>
                    <td className="px-6 py-4 text-center text-sm">
                      <span className="text-green-400 font-semibold">✓ Built-in</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Additional Benefits */}
          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
              <div className="flex items-start gap-4">
                <div className="text-2xl">⏱️</div>
                <div>
                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
                    Save Countless Hours
                  </h3>
                  <p className="text-surface-400 text-sm">
                    What takes days of manual configuration takes minutes with DashCaddy&rsquo;s Smart Defaults Wizard and automated setup.
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
              <div className="flex items-start gap-4">
                <div className="text-2xl">🔐</div>
                <div>
                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
                    Enterprise Security
                  </h3>
                  <p className="text-surface-400 text-sm">
                    TOTP 2FA, magic links, encrypted credentials, audit logging, and a unified Security Center — built in.
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
              <div className="flex items-start gap-4">
                <div className="text-2xl">📈</div>
                <div>
                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
                    Scale Confidently
                  </h3>
                  <p className="text-surface-400 text-sm">
                    Real-time WebSocket monitoring, Prometheus metrics export, and multi-host fleet management give you visibility across your infrastructure 24/7.
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
              <div className="flex items-start gap-4">
                <div className="text-2xl">🛠️</div>
                <div>
                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
                    Never Lose Data
                  </h3>
                  <p className="text-surface-400 text-sm">
                    Disaster recovery with full-system backups, SHA-256 checksum verification, and one-click restore keeps your data protected.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Developer & Integrations Section */}
      <section id="integrations" 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">
          {/* Section Header */}
          <div className="mb-16 text-center">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
              Built for Developers
            </h2>
            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
              Everything you need to automate, integrate, and extend DashCaddy.
            </p>
          </div>

          {/* Integration Grid */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
              <div className="text-3xl mb-2">📦</div>
              <h3 className="text-sm font-semibold text-surface-50">REST API</h3>
              <p className="text-xs text-surface-400 mt-1">Full JSON API</p>
            </div>
            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
              <div className="text-3xl mb-2">📊</div>
              <h3 className="text-sm font-semibold text-surface-50">Prometheus</h3>
              <p className="text-xs text-surface-400 mt-1">Metrics export</p>
            </div>
            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
              <div className="text-3xl mb-2">🗂️</div>
              <h3 className="text-sm font-semibold text-surface-50">Caddyfile-as-Code</h3>
              <p className="text-xs text-surface-400 mt-1">Visual proxy builder</p>
            </div>
            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
              <div className="text-3xl mb-2">🌍</div>
              <h3 className="text-sm font-semibold text-surface-50">i18n</h3>
              <p className="text-xs text-surface-400 mt-1">31 languages, RTL</p>
            </div>
            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
              <div className="text-3xl mb-2">🔌</div>
              <h3 className="text-sm font-semibold text-surface-50">Plugin API</h3>
              <p className="text-xs text-surface-400 mt-1">Extend everything</p>
            </div>
            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
              <div className="text-3xl mb-2">🔐</div>
              <h3 className="text-sm font-semibold text-surface-50">TypeScript</h3>
              <p className="text-xs text-surface-400 mt-1">Full type definitions</p>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <FaqSection />

      {/* Final CTA Section */}
      <section id="get-started" className="relative py-20 sm:py-24 lg:py-32 bg-gradient-to-b from-surface-900 to-surface-950 overflow-hidden">
        {/* Background effects */}
        <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/10 rounded-full blur-3xl opacity-20" />
        </div>

        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-surface-50">
            Ready to Transform Your
            <br />
            <span className="text-brand-400">Self-Hosting Setup?</span>
          </h2>
          <p className="text-xl text-surface-300 mb-12 max-w-2xl mx-auto leading-relaxed">
            Join developers and self-hosting enthusiasts who&rsquo;ve simplified their infrastructure management with DashCaddy&rsquo;s AI-native platform.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/pricing"
              className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-10 py-4 text-lg font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
            >
              Get Started
              <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>
            <Link
              href="/docs"
              className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-10 py-4 text-lg font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
            >
              View Documentation
            </Link>
          </div>

          {/* Trust badges */}
          <div className="mt-12 flex flex-wrap justify-center gap-8 text-center">
            <div>
              <div className="text-2xl font-bold text-brand-400">Self-Hosted</div>
              <p className="text-sm text-surface-400">Your Data, Your Rules</p>
            </div>
            <div className="border-l border-surface-700/50" />
            <div>
              <div className="text-2xl font-bold text-brand-400">AI-Native</div>
              <p className="text-sm text-surface-400">Intent Router + MCP</p>
            </div>
            <div className="border-l border-surface-700/50" />
            <div>
              <div className="text-2xl font-bold text-brand-400">24/7</div>
              <p className="text-sm text-surface-400">Real-Time Monitoring</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <Footer />
    </div>
  );
}