import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import Link from "next/link";

export default function AboutPage() {
  return (
    <>
      <Navbar />
      <main className="flex-1">
        {/* Hero */}
        <section className="relative pt-32 pb-20 px-4">
          <div className="absolute inset-0 hero-glow pointer-events-none" />
          <div className="max-w-4xl mx-auto text-center relative z-10">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Built for the{" "}
              <span className="gradient-text">Self-Hosting Community</span>
            </h1>
            <p className="text-xl text-surface-300 max-w-2xl mx-auto">
              DashCaddy was born from the frustration of managing dozens of
              Docker containers, SSL certificates, and DNS records by hand. We
              built the tool we wished existed — and then made it AI-powered.
            </p>
          </div>
        </section>

        {/* Story */}
        <section className="py-20 px-4">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-2xl font-bold text-white mb-6">Our Story</h2>
            <div className="space-y-4 text-surface-300 leading-relaxed">
              <p>
                Self-hosting is powerful. You own your data, you control your
                infrastructure, and you&apos;re not at the mercy of SaaS
                providers who can change their terms, raise prices, or shut down
                overnight. But let&apos;s be honest &mdash; it can also be a
                pain.
              </p>
              <p>
                Every new service means editing Caddyfiles, creating DNS
                records, configuring SSL certificates, writing Docker Compose
                files, and hoping everything plays nicely together. Multiply that
                by 20, 30, or 50 services, and you&apos;ve got a full-time
                operations job on your hands.
              </p>
              <p>
                DashCaddy was built to solve this. One click to deploy an app.
                SSL, DNS, and reverse proxy configuration happen automatically.
                A beautiful dashboard with real-time WebSocket updates to monitor
                everything. Natural language AI commands so you can just say
                &ldquo;deploy Plex&rdquo; and it happens. And when something
                goes wrong, you know about it immediately &mdash; not when a
                family member texts you that Plex is down.
              </p>
              <p>
                We believe self-hosting should be accessible to everyone, not
                just people who enjoy writing YAML at 2 AM. DashCaddy makes it
                beautiful, effortless, and intelligent.
              </p>
            </div>
          </div>
        </section>

        {/* Values */}
        <section className="py-20 px-4 border-t border-surface-800">
          <div className="max-w-5xl mx-auto">
            <h2 className="text-2xl font-bold text-white mb-12 text-center">
              What We Believe In
            </h2>
            <div className="grid md:grid-cols-3 gap-8">
              {[
                {
                  icon: "🔒",
                  title: "Proprietary & Polished",
                  description:
                    "DashCaddy is proprietary software built with care. The core platform is free to use, with Premium features for advanced orchestration.",
                },
                {
                  icon: "🏠",
                  title: "Your Data, Your Server",
                  description:
                    "DashCaddy runs entirely on your hardware. No cloud dependency, no telemetry, no phoning home. Your data never leaves your network.",
                },
                {
                  icon: "🤖",
                  title: "AI-Native",
                  description:
                    "From the AI Intent Router to MCP server integration, DashCaddy is built for the AI era. Control your homelab with natural language or let AI assistants manage it for you.",
                },
              ].map((value) => (
                <div
                  key={value.title}
                  className="glass-card rounded-xl p-8 text-center"
                >
                  <div className="text-4xl mb-4">{value.icon}</div>
                  <h3 className="text-lg font-semibold text-white mb-3">
                    {value.title}
                  </h3>
                  <p className="text-surface-400">{value.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Tech Stack */}
        <section className="py-20 px-4 border-t border-surface-800">
          <div className="max-w-5xl mx-auto">
            <h2 className="text-2xl font-bold text-white mb-12 text-center">
              Built With
            </h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              {[
                { name: "Caddy", role: "Reverse Proxy & SSL", icon: "🔒" },
                { name: "Docker", role: "Container Runtime", icon: "🐳" },
                { name: "Node.js", role: "API Backend", icon: "🟢" },
                { name: "Technitium", role: "DNS Server", icon: "🌐" },
                { name: "Express", role: "REST API + WebSocket", icon: "⚡" },
                { name: "MCP", role: "AI Protocol Layer", icon: "🤖" },
                { name: "Stripe", role: "Payment Processing", icon: "💳" },
                { name: "Jest", role: "Testing (1770+ tests)", icon: "✅" },
              ].map((tech) => (
                <div
                  key={tech.name}
                  className="glass-card rounded-xl p-6 text-center hover:border-brand-500/30 transition-colors"
                >
                  <div className="text-3xl mb-3">{tech.icon}</div>
                  <div className="font-semibold text-white">{tech.name}</div>
                  <div className="text-sm text-surface-400">{tech.role}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Stats */}
        <section className="py-20 px-4 border-t border-surface-800">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-2xl font-bold text-white mb-12 text-center">
              By the Numbers
            </h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
              {[
                { value: "93+", label: "App Templates" },
                { value: "1770+", label: "Test Cases" },
                { value: "260+", label: "API Endpoints" },
                { value: "5", label: "Languages" },
              ].map((stat) => (
                <div key={stat.label} className="text-center">
                  <div className="text-4xl font-bold text-brand-400 mb-2">
                    {stat.value}
                  </div>
                  <p className="text-sm text-surface-400">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Contact / Support */}
        <section className="py-20 px-4 border-t border-surface-800">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-2xl font-bold text-white mb-6">Get In Touch</h2>
            <p className="text-surface-300 mb-8">
              Have questions or feedback? We&apos;d love to hear from you.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a
                href="mailto:support@dashcaddy.net"
                className="px-6 py-3 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-medium transition-colors"
              >
                Email Us
              </a>
              <Link
                href="/docs"
                className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
              >
                Read the Docs
              </Link>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-20 px-4 border-t border-surface-800">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-bold text-white mb-4">
              Ready to simplify your homelab?
            </h2>
            <p className="text-surface-300 mb-8">
              Install DashCaddy and start deploying services today. Free forever.
            </p>
            <Link
              href="/pricing"
              className="inline-block px-8 py-4 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-semibold text-lg transition-colors"
            >
              View Pricing
            </Link>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}