<template>
	<div>
		<!-- Hero Section -->
		<XMarkHero
			image-src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1920&q=80"
			eyebrow="Welcome to the future"
			title="Build something amazing today"
			subtitle="The modern platform for teams who want to ship faster, collaborate better, and scale effortlessly."
			align="left"
			overlay="gradient"
		>
			<template #actions>
				<UButton size="xl" color="white"> Get Started Free </UButton>
				<UButton size="xl" variant="outline" color="white">
					Watch Demo
				</UButton>
			</template>
		</XMarkHero>

		<!-- Features Section -->
		<XMarkSection id="features" bg="default" padding="xl">
			<header class="text-center max-w-3xl mx-auto mb-16">
				<p class="xText-eyebrow text-primary-500 mb-4">Features</p>
				<h2
					class="xText-headline text-neutral-900 dark:text-white xText-balance"
				>
					Everything you need to succeed
				</h2>
				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
					Powerful tools designed to help you build, launch, and grow your
					product.
				</p>
			</header>

			<XMarkFeatures :features="features" layout="grid" :columns="3" />
		</XMarkSection>

		<!-- Testimonials Section -->
		<XMarkSection bg="subtle" padding="xl">
			<header class="text-center max-w-3xl mx-auto mb-16">
				<p class="xText-eyebrow text-primary-500 mb-4">Testimonials</p>
				<h2
					class="xText-headline text-neutral-900 dark:text-white xText-balance"
				>
					Loved by teams worldwide
				</h2>
			</header>

			<XMarkSocialProofTestimonials :testimonials="testimonials" layout="grid" />
		</XMarkSection>

		<!-- Pricing Section -->
		<XMarkSection bg="default" padding="xl">
			<header class="text-center max-w-3xl mx-auto mb-16">
				<p class="xText-eyebrow text-primary-500 mb-4">Pricing</p>
				<h2
					class="xText-headline text-neutral-900 dark:text-white xText-balance"
				>
					Simple, transparent pricing
				</h2>
				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
					Choose the plan that works best for your team.
				</p>
			</header>

			<XMarkPricingPlans :plans="pricingPlans" />
		</XMarkSection>

		<!-- CTA Section -->
		<XMarkSection bg="bold" padding="xl">
			<div class="text-center max-w-3xl mx-auto">
				<h2 class="xText-headline xText-balance">Ready to get started?</h2>
				<p class="mt-4 text-lg opacity-80">
					Join thousands of teams already using our platform.
				</p>
				<div class="mt-8 flex flex-wrap justify-center gap-4">
					<UButton size="xl" color="white"> Start Free Trial </UButton>
					<UButton size="xl" variant="outline" color="white">
						Contact Sales
					</UButton>
				</div>
				<div class="mt-6 flex flex-wrap justify-center gap-4">
					<XMarkSocialProofBadge preset="no-credit-card" variant="subtle" />
					<XMarkSocialProofBadge preset="cancel-anytime" variant="subtle" />
				</div>
			</div>
		</XMarkSection>

	</div>
</template>

<script setup>
const appConfig = useAppConfig();

useSeoMeta({
	title: "Modern Platform for Teams",
	description:
		"Build, launch, and grow your product with our powerful platform.",
	ogUrl: appConfig.xMarketing?.url,
});

// Features data
const features = [
	{
		icon: "i-lucide-zap",
		title: "Lightning Fast",
		description: "Built for speed with optimized performance at every level.",
	},
	{
		icon: "i-lucide-shield-check",
		title: "Secure by Default",
		description: "Enterprise-grade security with SOC 2 compliance.",
	},
	{
		icon: "i-lucide-users",
		title: "Team Collaboration",
		description: "Real-time collaboration tools for modern teams.",
	},
	{
		icon: "i-lucide-bar-chart-3",
		title: "Analytics",
		description: "Deep insights into your product's performance.",
	},
	{
		icon: "i-lucide-puzzle",
		title: "Integrations",
		description: "Connect with 100+ tools your team already uses.",
	},
	{
		icon: "i-lucide-headphones",
		title: "24/7 Support",
		description: "Expert support whenever you need it.",
	},
];

// Testimonials data
const testimonials = [
	{
		quote:
			"This platform transformed how our team works. We shipped 3x faster within the first month.",
		name: "Sarah Chen",
		title: "CTO",
		company: "TechStart",
		avatar: "https://randomuser.me/api/portraits/women/44.jpg",
	},
	{
		quote: "The best investment we've made. The ROI was visible within weeks.",
		name: "Marcus Johnson",
		title: "Founder",
		company: "ScaleUp",
		avatar: "https://randomuser.me/api/portraits/men/32.jpg",
	},
	{
		quote:
			"Finally, a platform that understands what modern teams need. Highly recommended.",
		name: "Emily Park",
		title: "Product Lead",
		company: "InnovateCo",
		avatar: "https://randomuser.me/api/portraits/women/68.jpg",
	},
];


// Pricing plans data
const pricingPlans = [
	{
		name: "Starter",
		description: "Perfect for small teams getting started.",
		price: "$19",
		period: "month",
		features: [
			"Up to 5 team members",
			"Basic analytics",
			"Email support",
			"1GB storage",
		],
		cta: "Start Free Trial",
	},
	{
		name: "Pro",
		description: "For growing teams that need more power.",
		price: "$49",
		period: "month",
		features: [
			"Up to 25 team members",
			"Advanced analytics",
			"Priority support",
			"10GB storage",
			"Custom integrations",
		],
		cta: "Start Free Trial",
		popular: true,
	},
	{
		name: "Enterprise",
		description: "For large organizations with custom needs.",
		price: "Custom",
		period: "",
		features: [
			"Unlimited team members",
			"Enterprise analytics",
			"Dedicated support",
			"Unlimited storage",
			"Custom integrations",
			"SLA guarantee",
		],
		cta: "Contact Sales",
	},
];
</script>
