@extends('layouts.marketing')

@section('title', 'Pricing – CuraHealthLine')

@section('content')
    <x-marketing-nav />
    
    <div class="mx-auto max-w-6xl px-6 pb-16" style="padding-top: 80px;">
        <div class="text-center mb-16">
            <h1 class="font-heading text-5xl text-ink mb-6">Simple, Transparent Pricing</h1>
            <p class="text-xl text-slate-600 max-w-3xl mx-auto">
                Choose the plan that works best for you
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8 mb-16">
            <div class="bg-white rounded-3xl shadow-sm ring-1 ring-slate-100 p-8">
                <h3 class="font-heading text-2xl text-ink mb-2">Healthcare Worker</h3>
                <div class="mb-6">
                    <span class="font-heading text-5xl text-brand">Free</span>
                </div>
                <p class="text-slate-600 mb-6">For healthcare professionals</p>
                <ul class="space-y-3 text-slate-600 mb-8">
                    <li>✓ Create your profile</li>
                    <li>✓ Browse unlimited jobs</li>
                    <li>✓ Apply to positions</li>
                    <li>✓ Message employers</li>
                    <li>✓ Track applications</li>
                </ul>
                <a href="{{ route('register', ['role' => 'nurse']) }}" class="block text-center rounded-full bg-brand px-6 py-3 text-white font-semibold shadow hover:-translate-y-0.5 transition-transform">
                    Get Started
                </a>
            </div>

            <div class="bg-white rounded-3xl shadow-lg ring-2 ring-brand p-8 relative transform scale-105">
                <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span class="bg-brand text-white px-4 py-1 rounded-full text-sm font-semibold">Popular</span>
                </div>
                <h3 class="font-heading text-2xl text-ink mb-2">Employer Basic</h3>
                <div class="mb-6">
                    <span class="font-heading text-5xl text-brand">\</span>
                    <span class="text-slate-600">/month</span>
                </div>
                <p class="text-slate-600 mb-6">For small healthcare facilities</p>
                <ul class="space-y-3 text-slate-600 mb-8">
                    <li>✓ Post up to 5 jobs</li>
                    <li>✓ Search healthcare worker profiles</li>
                    <li>✓ Unlimited applications</li>
                    <li>✓ Messaging system</li>
                    <li>✓ Basic analytics</li>
                </ul>
                <a href="{{ route('register', ['role' => 'employer']) }}" class="block text-center rounded-full bg-brand px-6 py-3 text-white font-semibold shadow hover:-translate-y-0.5 transition-transform">
                    Start Free Trial
                </a>
            </div>

            <div class="bg-white rounded-3xl shadow-sm ring-1 ring-slate-100 p-8">
                <h3 class="font-heading text-2xl text-ink mb-2">Employer Pro</h3>
                <div class="mb-6">
                    <span class="font-heading text-5xl text-brand">\</span>
                    <span class="text-slate-600">/month</span>
                </div>
                <p class="text-slate-600 mb-6">For larger organizations</p>
                <ul class="space-y-3 text-slate-600 mb-8">
                    <li>✓ Unlimited job postings</li>
                    <li>✓ Priority placement</li>
                    <li>✓ Advanced analytics</li>
                    <li>✓ Dedicated support</li>
                    <li>✓ Custom branding</li>
                </ul>
                <a href="{{ route('register', ['role' => 'employer']) }}" class="block text-center rounded-full bg-brand px-6 py-3 text-white font-semibold shadow hover:-translate-y-0.5 transition-transform">
                    Start Free Trial
                </a>
            </div>
        </div>

        <div class="bg-slate-100 rounded-3xl p-8 md:p-12 text-center">
            <h2 class="font-heading text-3xl text-ink mb-4">Enterprise Solutions</h2>
            <p class="text-lg text-slate-600 mb-6 max-w-2xl mx-auto">
                Need a custom solution for your organization? Contact us for enterprise pricing and features.
            </p>
            <a href="{{ route('contact') }}" class="inline-block rounded-full bg-brand px-6 py-3 text-white font-semibold shadow hover:-translate-y-0.5 transition-transform">
                Contact Sales
            </a>
        </div>
    </div>
@endsection