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.
            </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 to monitor everything. 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 and effortless.
              </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: "Open Core",
                  description:
                    "The core of DashCaddy is free and always will be. Premium features fund development, but the essentials are open to everyone.",
                },
                {
                  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: "Built to Last",
                  description:
                    "We use proven technologies — Caddy, Docker, Node.js. No bleeding-edge frameworks that break every six months. Stable, reliable, boring (in the best way).",
                },
              ].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: "🌐",
                },
              ].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>

        {/* 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, feedback, or want to contribute? 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>
              <a
                href="#"
                className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
              >
                Join Discord
              </a>
              <a
                href="#"
                className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
              >
                GitHub
              </a>
            </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">
              Start with the free tier. Upgrade when you&apos;re ready.
            </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 />
    </>
  );
}