import { createFileRoute } from "@tanstack/react-router";
import { PublicHeader, Footer } from "@/components/layout/PublicHeader";
import { Card, CardContent } from "@/components/ui/card";
import { Shield, Zap, Server, Code2 } from "lucide-react";

export const Route = createFileRoute("/about")({
  head: () => ({ meta: [{ title: "About — warpbox.dev" }] }),
  component: About,
});

const features = [
  { icon: Zap, title: "Fast", body: "Anonymous drop-and-share, no accounts needed. Resumable for large files." },
  { icon: Shield, title: "Private", body: "Password-protected buckets, expiry, max-downloads, optional one-time links." },
  { icon: Server, title: "Self-hosted", body: "Single Go binary or Docker. Local disk or S3-compatible storage." },
  { icon: Code2, title: "Automatable", body: "First-class curl, CLI, REST API and ShareX support." },
];

function About() {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <PublicHeader />
      <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-12">
        <h1 className="text-3xl font-semibold tracking-tight">About warpbox.dev</h1>
        <p className="mt-3 max-w-2xl text-muted-foreground">
          An open-source, self-hosted file transfer platform that pairs frictionless anonymous uploads
          with optional accounts, folders, and a proper admin console. Built in Go with a minimal vanilla frontend.
        </p>
        <div className="mt-8 grid gap-4 sm:grid-cols-2">
          {features.map((f) => (
            <Card key={f.title}>
              <CardContent className="p-5">
                <f.icon className="mb-3 h-5 w-5 text-primary" />
                <h3 className="font-medium">{f.title}</h3>
                <p className="mt-1 text-sm text-muted-foreground">{f.body}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </main>
      <Footer />
    </div>
  );
}