<template>
  <div class="landing-page">
    <!-- Hero Section -->
    <LandingHeroSection />

    <!-- Stats Section (Social Proof) -->
    <LandingStatsSection />

    <!-- Benefits for Works Councils -->
    <LandingBenefitsWorksCouncil />

    <!-- Features Grid (Bento Layout) -->
    <LandingFeaturesGrid />

    <!-- Additional Features / Trust Signals -->
    <LandingAdditionalFeatures />

    <!-- Framework Agreement Section -->
    <LandingFrameworkAgreement />

    <!-- Newsletter Signup (Glass-morphism) -->
    <LandingNewsletterSignup />

    <!-- Expert Access CTA (Gradient Mesh) -->
    <LandingExpertAccess />
  </div>
</template>

<script setup lang="ts">
const { t, locale } = useI18n()

// SEO Meta
useSeoMeta({
  title: () => t('meta.title'),
  description: () => t('meta.description'),
  ogTitle: () => t('meta.title'),
  ogDescription: () => t('meta.ogDescription'),
  ogImage: '/og-image.png',
  ogType: 'website',
  twitterCard: 'summary_large_image'
})

// Structured data for SEO
useHead({
  htmlAttrs: {
    lang: () => locale.value
  },
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'SoftwareApplication',
        name: 'GremiumHub',
        applicationCategory: 'BusinessApplication',
        operatingSystem: 'Web',
        description: t('meta.description'),
        offers: {
          '@type': 'Offer',
          price: '0',
          priceCurrency: 'EUR',
          description: t('common.onRequest')
        },
        featureList: [
          t('features.items[0].title'),
          t('features.items[1].title'),
          t('features.items[3].title'),
          t('features.items[5].title'),
          t('features.items[8].title')
        ]
      })
    }
  ]
})
</script>

<style scoped>
/* Smooth scrolling for anchor links */
.landing-page {
  scroll-behavior: smooth;
}

/* Add padding to account for fixed header */
.landing-page > :deep(section:first-child) {
  padding-top: 0;
}
</style>
