---
import Hero from "@/components/sections/Hero.astro";
---

<Hero 
  badge="NEW"
  badgeText="Introducing our latest feature"
  title="Build amazing products faster"
  subtitle="Start with our pre-built components and focus on what matters. Ship faster, iterate quicker."
  primaryCta={{ text: "Get Started", href: "/signup" }}
  secondaryCta={{ text: "Learn More", href: "/docs" }}
  centered
/>

---
import Hero from "@/components/sections/Hero.astro";
---

<Hero 
  tagline="🚀 Launch Week"
  title="Ship your SaaS in days, not months"
  subtitle="Everything you need to build a modern landing page. TypeScript, Tailwind, and shadcn/ui included."
  primaryCta={{ text: "Start Building", href: "/get-started" }}
  secondaryCta={{ text: "View Demo", href: "/demo" }}
  image={{ src: "/images/hero.png", alt: "Product screenshot" }}
/>

---
import Hero from "@/components/sections/Hero.astro";
---

<Hero 
  title="The complete toolkit for modern development"
  subtitle="Join thousands of developers building with AstroDeck"
  centered
  stats={[
    { value: "50K+", label: "Downloads" },
    { value: "1.2K+", label: "GitHub Stars" },
    { value: "99%", label: "Satisfaction" }
  ]}
/>

---
import CTA from "@/components/sections/CTA.astro";
---

<CTA 
  title="Ready to get started?"
  subtitle="Join thousands of developers already using AstroDeck to build amazing products."
  primaryCta={{ text: "Start Free Trial", href: "/trial" }}
/>

---
import CTA from "@/components/sections/CTA.astro";
---

<CTA 
  title="Build faster with our components"
  features={[
    "Pre-built components",
    "Full TypeScript support",
    "Dark mode ready"
  ]}
  primaryCta={{ text: "Get Started Free", href: "/signup" }}
  secondaryCta={{ text: "View Documentation", href: "/docs" }}
  variant="split"
/>

---
import CTA from "@/components/sections/CTA.astro";
---

<CTA 
  title="Try AstroDeck today"
  subtitle="Start building your next project with our components"
  primaryCta={{ text: "Download Now", href: "/download" }}
  secondaryCta={{ text: "GitHub", href: "https://github.com" }}
  variant="banner"
/>

---
import Pricing from "@/components/sections/Pricing.astro";
---

<Pricing 
  title="Free forever. Open source."
  subtitle="All features included. No hidden costs."
  plans={[
    {
      name: "Landing Page",
      description: "Everything you need for a stunning landing page.",
      price: "Free",
      features: ["Hero & CTA sections", "Logo cloud", "Feature showcase", "Responsive design", "Dark mode support"],
      cta: { text: "View on GitHub", href: "https://github.com" }
    },
    {
      name: "Full SaaS",
      description: "Complete boilerplate for your SaaS product.",
      price: "Free",
      featured: true,
      features: ["All landing page features", "Authentication layouts", "Pricing sections", "Privacy & legal pages", "TypeScript & shadcn/ui", "Production-ready"],
      cta: { text: "Get Started", href: "/get-started" }
    },
    {
      name: "Open Source",
      description: "MIT licensed and open for contributions.",
      price: "Free",
      features: ["Full source code access", "Regular updates", "Community support", "No vendor lock-in", "Commercial use allowed"],
      cta: { text: "Star on GitHub", href: "https://github.com" }
    }
  ]}
/>

---
import Pricing from "@/components/sections/Pricing.astro";
---

<Pricing 
  plans={[
    {
      name: "Starter",
      description: "For small projects",
      price: "$9",
      period: "/month",
      features: ["5 Projects", "Basic Support", "1 GB Storage"],
      cta: { text: "Get Started", href: "/signup" }
    },
    {
      name: "Pro",
      description: "For growing teams",
      price: "$29",
      period: "/month",
      featured: true,
      badge: "Popular",
      features: ["Unlimited Projects", "Priority Support", "100 GB Storage"],
      cta: { text: "Get Started", href: "/signup" }
    },
    {
      name: "Enterprise",
      description: "For large organizations",
      price: "Custom",
      features: ["Everything in Pro", "24/7 Support", "Unlimited Storage"],
      cta: { text: "Contact Sales", href: "/contact" }
    }
  ]}
/>

---
import Pricing from "@/components/sections/Pricing.astro";
---

<Pricing 
  title="Choose your plan"
  subtitle="Simple, transparent pricing"
  variant="comparison"
  features={["Projects", "Storage", "Support"]}
  plans={[
    { name: "Free", values: ["3", "1 GB", "Community"] },
    { name: "Pro", values: ["Unlimited", "100 GB", "Email"] },
    { name: "Enterprise", values: ["Unlimited", "Unlimited", "24/7"] }
  ]}
/>

---
import Pricing from "@/components/sections/Pricing.astro";
---

<Pricing 
  title="Flexible pricing"
  subtitle="Save 20% with annual billing"
  variant="toggle"
  plans={[
    {
      name: "Basic",
      monthlyPrice: "$19",
      yearlyPrice: "$15",
      cta: { text: "Choose Plan", href: "/signup" }
    },
    {
      name: "Professional",
      monthlyPrice: "$49",
      yearlyPrice: "$39",
      featured: true,
      cta: { text: "Choose Plan", href: "/signup" }
    }
  ]}
/>

---
import Testimonials from "@/components/sections/Testimonials.astro";
---

<Testimonials 
  items={[
    {
      quote: "AstroDeck saved us weeks of development time. The components are beautiful and easy to customize.",
      author: "Sarah Chen",
      role: "CEO, TechCorp",
      avatar: "/images/avatar-1.jpg"
    },
    {
      quote: "Best Astro boilerplate I've used. Clean code, great documentation, and excellent support.",
      author: "Marcus Johnson",
      role: "Developer"
    },
    {
      quote: "The perfect starting point for any SaaS project. Highly recommended for anyone using Astro.",
      author: "Emily Rodriguez",
      role: "Product Manager"
    }
  ]}
/>

---
import Testimonials from "@/components/sections/Testimonials.astro";
---

<Testimonials 
  variant="featured"
  quote="AstroDeck has completely transformed how we build landing pages. The quality of the components and attention to detail is exceptional. Our development time has been cut in half."
  author="Alex Kim"
  role="CTO, StartupCo"
  avatar="/images/avatar.jpg"
/>

---
import Testimonials from "@/components/sections/Testimonials.astro";
---

<Testimonials 
  variant="scroll"
  items={[
    { quote: "Game changer for our team!", author: "Jane Doe", role: "Designer" },
    { quote: "Excellent components and documentation.", author: "Tom Peters", role: "Engineer" },
    { quote: "Best boilerplate for Astro projects.", author: "Lisa Wang", role: "Founder" },
    { quote: "Saved us months of development.", author: "Ryan Brown", role: "Developer" }
  ]}
/>

---
// Add to your page
---

<section class="py-16">
  <div class="max-w-2xl mx-auto px-6 text-center">
    <h3 class="text-xl font-bold mb-2">Subscribe to our newsletter</h3>
    <p class="text-sm text-muted-foreground mb-6">Get the latest updates delivered to your inbox.</p>
    <form class="flex gap-2">
      <input
        type="email"
        placeholder="Enter your email"
        class="flex-1 h-10 rounded-md border px-3 text-sm"
        required
      />
      <button type="submit" class="px-6 h-10 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90">
        Subscribe
      </button>
    </form>
    <p class="text-xs text-muted-foreground mt-4">We respect your privacy. Unsubscribe at any time.</p>
  </div>
</section>

---
// Add to your page
---

<section class="py-16">
  <div class="max-w-4xl mx-auto px-6">
    <div class="rounded-lg border overflow-hidden grid md:grid-cols-2">
      <div class="bg-primary/10 p-12 flex items-center justify-center">
        <div class="text-center">
          <div class="text-6xl mb-4">📧</div>
          <p class="font-semibold">Stay Updated</p>
        </div>
      </div>
      <div class="p-12 flex flex-col justify-center">
        <h3 class="text-2xl font-bold mb-2">Join our newsletter</h3>
        <p class="text-muted-foreground mb-6">Weekly insights on building better products.</p>
        <form class="space-y-3">
          <input type="email" placeholder="Your email address" class="w-full h-10 rounded-md border px-3 text-sm" required />
          <button type="submit" class="w-full h-10 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90">
            Get Started
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

---
// Add to your page (e.g., before footer)
---

<section class="border-t bg-muted/30 py-6">
  <div class="max-w-4xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
    <div>
      <h4 class="font-semibold mb-1">Get product updates</h4>
      <p class="text-sm text-muted-foreground">Join 10,000+ subscribers</p>
    </div>
    <form class="flex gap-2 w-full md:w-auto">
      <input type="email" placeholder="you@example.com" class="flex-1 md:w-64 h-9 rounded-md border px-3 text-sm" required />
      <button type="submit" class="px-4 h-9 bg-foreground text-background rounded-md text-sm font-medium hover:bg-foreground/90 whitespace-nowrap">
        Sign Up
      </button>
    </form>
  </div>
</section>