---
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>

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

<FAQ
  title="Frequently Asked Questions"
  subtitle="Everything you need to know about AstroDeck"
  faqs={[
    {
      question: "What is AstroDeck?",
      answer: "AstroDeck is an open-source component library and starter kit for building Astro.js websites. It provides pre-built, production-ready sections for landing pages and SaaS websites — fully typed with TypeScript and styled with Tailwind CSS v4."
    },
    {
      question: "Is AstroDeck free to use?",
      answer: "Yes, AstroDeck is completely free and open-source under the MIT license. You can use it for personal and commercial projects without any cost or attribution requirement."
    },
    {
      question: "Does AstroDeck support dark mode?",
      answer: "Absolutely. Every component is built with CSS variables and Tailwind CSS, so dark mode works out of the box. Just toggle the class on the html element and all sections adapt automatically."
    },
    {
      question: "Can I use AstroDeck with an existing Astro project?",
      answer: "Yes. You can copy individual components into any Astro project. Make sure you have Tailwind CSS v4 configured via the @tailwindcss/vite plugin and the same CSS custom properties defined in your globals.css."
    }
  ]}
/>

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

<Stats
  title="Trusted by developers worldwide"
  subtitle="Numbers that speak for themselves"
  stats={[
    { value: "50K+", label: "Downloads", description: "Across 80+ countries" },
    { value: "1.2K+", label: "GitHub Stars", description: "And growing every week" },
    { value: "30+", label: "Components", description: "Ready to copy and paste" },
    { value: "99.9%", label: "Uptime", description: "Battle-tested infrastructure" }
  ]}
/>

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

<Team
  title="Meet Our Team"
  subtitle="The people building AstroDeck"
  members={[
    {
      name: "Alex Rivera",
      role: "Co-Founder & CEO",
      bio: "Passionate about developer experience and open source.",
      social: {
        github: "https://github.com",
        twitter: "https://twitter.com"
      }
    },
    {
      name: "Sam Chen",
      role: "Lead Engineer",
      bio: "TypeScript enthusiast and Astro core contributor.",
      social: {
        github: "https://github.com",
        linkedin: "https://linkedin.com"
      }
    },
    {
      name: "Jordan Lee",
      role: "Design Lead",
      bio: "Crafting accessible interfaces with Tailwind and shadcn/ui.",
      social: {
        twitter: "https://twitter.com",
        linkedin: "https://linkedin.com"
      }
    }
  ]}
/>

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

<Comparison
  title="How We Compare"
  subtitle="See why teams choose AstroDeck over the alternatives"
  columns={[
    { name: "AstroDeck", highlighted: true },
    { name: "Competitor A" },
    { name: "Competitor B" }
  ]}
  features={[
    { name: "Open source", values: [true, false, false] },
    { name: "TypeScript support", values: [true, true, false] },
    { name: "Dark mode", values: [true, true, false] },
    { name: "Tailwind CSS v4", values: [true, false, false] },
    { name: "Updates per year", values: ["Unlimited", "12", "4"] }
  ]}
/>

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

<Contact
  title="Get in Touch"
  subtitle="Have a question or want to contribute? We would love to hear from you."
  email="hello@astrodeck.dev"
  phone="+1 (555) 000-1234"
  address="123 Developer Lane
San Francisco, CA 94107
United States"
/>