---
import Base from "../layouts/Base.astro";
import Nav from "../components/Nav.astro";
import Footer from "../components/Footer.astro";
import ExplorerHero from "../components/ExplorerHero.astro";
import ProtocolStrip from "../components/ProtocolStrip.astro";
import FeatureCard from "../components/FeatureCard.astro";

const features = [
  { title: "Handy UI", body: "Explore and operate on the remote and local file system with a handy UI." },
  { title: "Cross platform", body: "Runs on Windows, macOS, Linux and BSD." },
  { title: "Customizable", body: "Customize the explorer, the text editor and default options." },
  { title: "Bookmarks", body: "Connect to favourite hosts via bookmarks and recent connections." },
  { title: "Security first", body: "Store passwords in your operating system key vault." },
  { title: "Eye on performance", body: "Built with an eye on performance to keep CPU usage low." },
];
---
<Base
  title="termscp — terminal file transfer & explorer for SCP/SFTP/FTP/S3/Kube/SMB/WebDAV"
  description="A feature-rich terminal UI file transfer and explorer with support for SCP/SFTP/FTP/Kube/S3/WebDAV/SMB."
  path="/"
>
  <Nav />
  <main class="flex-1">
    <ExplorerHero />
    <section class="mx-auto max-w-5xl px-4 py-12">
      <h2 class="mb-6 text-center text-xl text-text">Why termscp</h2>
      <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {features.map((f) => (
          <FeatureCard title={f.title} body={f.body} />
        ))}
      </div>
    </section>
    <ProtocolStrip />
  </main>
  <Footer />
</Base>