@page
@model LoginModel

<noundry-card title="Sign In" class="max-w-md mx-auto">
    <form method="post">
        <noundry-text-input
            asp-for="Email"
            label="Email"
            type="email"
            placeholder="you@example.com"
            required="true" />

        <noundry-text-input
            asp-for="Password"
            label="Password"
            type="password"
            required="true" />

        <noundry-checkbox
            asp-for="RememberMe"
            label="Remember me" />

        <noundry-button
            type="submit"
            variant="primary"
            size="lg"
            class="w-full">
            Sign In
        </noundry-button>
    </form>
</noundry-card>

@page
@model ContactModel

<noundry-card title="Get In Touch" class="max-w-xl mx-auto">
    <form method="post">
        <div class="grid md:grid-cols-2 gap-4">
            <noundry-text-input
                asp-for="FirstName"
                label="First Name"
                required="true" />

            <noundry-text-input
                asp-for="LastName"
                label="Last Name"
                required="true" />
        </div>

        <noundry-text-input
            asp-for="Email"
            type="email"
            label="Email"
            required="true" />

        <noundry-textarea
            asp-for="Message"
            label="Message"
            rows="4"
            required="true" />

        <noundry-button
            type="submit"
            variant="primary">
            Send Message
        </noundry-button>
    </form>
</noundry-card>

@page

<section class="bg-gradient-to-br from-blue-500 to-purple-600 py-20">
    <div class="max-w-4xl mx-auto px-4 text-center text-white">
        <h1 class="text-5xl font-bold mb-6">
            Build Amazing Apps
        </h1>
        <p class="text-xl mb-8 opacity-90">
            Create production-ready .NET applications with
            Noundry's powerful libraries and components
        </p>
        <div class="flex gap-4 justify-center">
            <noundry-button
                href="/getting-started"
                bg-color="white"
                text-color="blue-600"
                size="lg">
                Get Started
            </noundry-button>

            <noundry-button
                href="/docs"
                variant="outline"
                size="lg">
                Learn More
            </noundry-button>
        </div>
    </div>
</section>

<div class="grid md:grid-cols-3 gap-6">
    <!-- Starter -->
    <noundry-card class="text-center">
        <h3 class="text-xl font-bold mb-2">Starter</h3>
        <div class="text-4xl font-bold mb-4">
            $29<span class="text-lg">/mo</span>
        </div>
        <ul class="space-y-2 mb-6 text-sm">
            <li>5 Projects</li>
            <li>Basic Support</li>
            <li>1 GB Storage</li>
        </ul>
        <noundry-button class="w-full" bg-color="gray">
            Choose Plan
        </noundry-button>
    </noundry-card>

    <!-- Pro (Featured) -->
    <noundry-card class="bg-blue-600 text-white transform scale-105">
        <h3 class="text-xl font-bold mb-2">Pro</h3>
        <div class="text-4xl font-bold mb-4">
            $99<span class="text-lg">/mo</span>
        </div>
        <ul class="space-y-2 mb-6 text-sm">
            <li>Unlimited Projects</li>
            <li>Priority Support</li>
            <li>10 GB Storage</li>
        </ul>
        <noundry-button class="w-full" bg-color="white" text-color="blue-600">
            Choose Plan
        </noundry-button>
    </noundry-card>

    <!-- Enterprise -->
    <noundry-card class="text-center">
        <h3 class="text-xl font-bold mb-2">Enterprise</h3>
        <div class="text-4xl font-bold mb-4">
            $299<span class="text-lg">/mo</span>
        </div>
        <ul class="space-y-2 mb-6 text-sm">
            <li>Unlimited Everything</li>
            <li>24/7 Support</li>
            <li>Unlimited Storage</li>
        </ul>
        <noundry-button class="w-full" bg-color="gray">
            Choose Plan
        </noundry-button>
    </noundry-card>
</div>

<div class="grid md:grid-cols-2 gap-6">
    <noundry-card>
        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <span class="text-2xl">⚡</span>
        </div>
        <h3 class="text-lg font-bold mb-2">Fast Performance</h3>
        <p class="text-sm text-gray-600">Lightning-fast load times</p>
    </noundry-card>

    <noundry-card>
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
            <span class="text-2xl">🔒</span>
        </div>
        <h3 class="text-lg font-bold mb-2">Secure</h3>
        <p class="text-sm text-gray-600">Enterprise-grade security</p>
    </noundry-card>

    <noundry-card>
        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
            <span class="text-2xl">📱</span>
        </div>
        <h3 class="text-lg font-bold mb-2">Responsive</h3>
        <p class="text-sm text-gray-600">Works on all devices</p>
    </noundry-card>

    <noundry-card>
        <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
            <span class="text-2xl">🎨</span>
        </div>
        <h3 class="text-lg font-bold mb-2">Customizable</h3>
        <p class="text-sm text-gray-600">Fully theme-able</p>
    </noundry-card>
</div>