---
import Layout from '../layouts/Layout.astro';
import { DomainSetupForm } from '../components/DomainSetupForm';

// Page-specific SEO metadata
const pageTitle = "Get Started | SiliconPin";
const pageDescription = "Start your project with SiliconPin's hosting services. Deploy a web app, from source code, or upload a static site.";
const pageImage = "https://siliconpin.com/assets/images/get-started-og-image.png";

// Generate a random subdomain for server side rendering
const randomString = () => {
  return Math.random().toString(36).substring(2, 10);
};
const defaultSubdomain = randomString();
---

<Layout
  title={pageTitle}
  description={pageDescription}
  image={pageImage}
  type="website"
>
  <main class="container mx-auto px-4 sm:px-6 py-8 sm:py-12">
    <div class="text-center mb-8 sm:mb-12">
      <h1 class="text-3xl sm:text-4xl font-bold text-[#6d9e37] mb-3 sm:mb-4">Get Started</h1>
      <p class="text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300">
        Launch your project with SiliconPin's easy and reliable hosting services
      </p>
    </div>

    <div class="max-w-3xl mx-auto">
      <DomainSetupForm defaultSubdomain={defaultSubdomain} client:load />
    </div>
  </main>
</Layout>