---
import "../styles/global.css";
import { Header } from "../components/Header";
import { Hero } from "../components/Hero";
import ShaderBackground from "../components/ShaderBackground.astro";
import Features from "../components/Features.astro";
import UseCases from "../components/UseCases.astro";
import Screenshots from "../components/Screenshots.astro";
import { Installation } from "../components/Installation";
import { CTA } from "../components/CTA";
import FAQ from "../components/FAQ.astro";
import Footer from "../components/Footer.astro";
import { PromoBanner } from "../components/PromoBanner";

const siteUrl = "https://gitea-mirror.com";
const title = "GitHub Backup Tool | Self-Hosted Repository Backup to Gitea";
const description =
  "Automatically backup GitHub repos to your own Gitea server. Preserve issues, PRs, releases & wiki. Self-hosted, Docker-ready. Free alternative to cloud backup services.";
const keywords =
  "github backup, github backup self hosted, github repository backup, backup github to nas, github disaster recovery, offline github backup, github backup docker, automatic github backup, github account backup, gitea mirror, self-hosted git backup, repository sync, github to gitea, git mirror, code backup, self-hosted backup solution";

// Structured data for SEO
const structuredData = {
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  name: "Gitea Mirror",
  applicationCategory: "BackupApplication",
  operatingSystem: "Linux, macOS, Windows",
  offers: {
    "@type": "Offer",
    price: "0",
    priceCurrency: "USD",
  },
  description:
    "Automatic GitHub repository backup to self-hosted Gitea. Preserves complete history, issues, PRs, and releases. Free alternative to cloud backup services.",
  url: siteUrl,
  author: {
    "@type": "Organization",
    name: "RayLabs",
    url: "https://github.com/RayLabsHQ",
  },
  softwareVersion: "3.11.0",
  screenshot: [
    `${siteUrl}/assets/dashboard.png`,
    `${siteUrl}/assets/repositories.png`,
    `${siteUrl}/assets/organisation.png`,
  ],
  featureList: [
    "Automated scheduled backups",
    "Self-hosted (full data ownership)",
    "Metadata preservation (issues, PRs, releases, wiki)",
    "Force-push protection with smart detection",
    "Docker, Helm, Nix, and Proxmox support",
    "Multi-repository and organization backup",
    "Git LFS support",
    "Free and open source",
  ],
  softwareRequirements: "Docker or Bun runtime",
};
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" href="/assets/logo.png" />
    <meta name="generator" content={Astro.generator} />

    <!-- Primary Meta Tags -->
    <title>{title}</title>
    <meta name="title" content={title} />
    <meta name="description" content={description} />
    <meta name="keywords" content={keywords} />
    <meta
      name="robots"
      content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
    />
    <meta name="author" content="RayLabs" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content={siteUrl} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={`${siteUrl}/og-image.png`} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="Gitea Mirror" />
    <meta property="og:locale" content="en_US" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={siteUrl} />
    <meta property="twitter:title" content={title} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content={`${siteUrl}/og-image.png`} />
    <meta name="twitter:creator" content="@RayLabsHQ" />

    <!-- Canonical URL -->
    <link rel="canonical" href={siteUrl} />

    <!-- Additional Meta Tags -->
    <meta name="theme-color" content="#5b6fff" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Gitea Mirror" />

    <!-- Structured Data -->
    <script
      type="application/ld+json"
      is:inline
      set:html={JSON.stringify(structuredData)}
    />

    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://github.com" />

    <!-- Theme detection script (prevent flash) -->
    <script is:inline>
      const theme =
        localStorage.getItem("theme") ||
        (window.matchMedia("(prefers-color-scheme: dark)").matches
          ? "dark"
          : "light");
      document.documentElement.classList.toggle("dark", theme === "dark");
    </script>

    <!-- 100% privacy-first analytics -->
    <script
      async
      src="https://scripts.simpleanalyticscdn.com/latest.js"
      is:inline></script>
  </head>

  <body class="min-h-screen bg-background text-foreground antialiased">
    <!-- <PromoBanner client:load /> -->
    <Header client:load />

    <main>
      <div class="relative">
        <ShaderBackground />
        <Hero client:load />
      </div>
      <Features />
      <UseCases />
      <Screenshots />
      <Installation client:load />
      <FAQ />
      <CTA client:load />
    </main>

    <Footer />

    <style>
      /* Smooth scrolling */
      html {
        scroll-behavior: smooth;
      }

      /* Blob animation */
      @keyframes blob {
        0% {
          transform: translate(0px, 0px) scale(1);
        }
        33% {
          transform: translate(30px, -50px) scale(1.1);
        }
        66% {
          transform: translate(-20px, 20px) scale(0.9);
        }
        100% {
          transform: translate(0px, 0px) scale(1);
        }
      }

      .animate-blob {
        animation: blob 7s infinite;
      }

      .animation-delay-2000 {
        animation-delay: 2s;
      }

      .animation-delay-4000 {
        animation-delay: 4s;
      }

      /* Grid background pattern */
      .bg-grid-white\/10 {
        background-image:
          linear-gradient(
            to right,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
          ),
          linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 1px
          );
        background-size: 20px 20px;
      }

      /* Smooth gradient animations */
      @keyframes gradient-shift {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      .animate-gradient {
        background-size: 200% 200%;
        animation: gradient-shift 15s ease infinite;
      }
    </style>
  </body>
</html>
