@extends('layouts.marketing')

@section('title', 'Features – 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">Platform Features</h1>
            <p class="text-xl text-slate-600 max-w-3xl mx-auto">
                Everything you need to connect, apply, and succeed
            </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-8">
                <div class="text-4xl mb-4">👤</div>
                <h3 class="text-xl font-semibold text-ink mb-3">Comprehensive Profiles</h3>
                <p class="text-slate-600 mb-4">Create detailed profiles showcasing your skills, experience, and credentials.</p>
                <ul class="space-y-2 text-sm text-slate-600">
                    <li>✓ License verification</li>
                    <li>✓ Work history tracking</li>
                    <li>✓ Skills assessment</li>
                </ul>
            </div>
            <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-8">
                <div class="text-4xl mb-4">🔍</div>
                <h3 class="text-xl font-semibold text-ink mb-3">Advanced Search</h3>
                <p class="text-slate-600 mb-4">Find the perfect match with powerful filtering options.</p>
                <ul class="space-y-2 text-sm text-slate-600">
                    <li>✓ Location-based search</li>
                    <li>✓ Specialty filtering</li>
                    <li>✓ Salary range options</li>
                </ul>
            </div>
            <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-8">
                <div class="text-4xl mb-4">💬</div>
                <h3 class="text-xl font-semibold text-ink mb-3">Real-Time Messaging</h3>
                <p class="text-slate-600 mb-4">Communicate directly with employers and candidates.</p>
                <ul class="space-y-2 text-sm text-slate-600">
                    <li>✓ Instant notifications</li>
                    <li>✓ Document sharing</li>
                    <li>✓ Interview scheduling</li>
                </ul>
            </div>
            <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-8">
                <div class="text-4xl mb-4">📋</div>
                <h3 class="text-xl font-semibold text-ink mb-3">Application Management</h3>
                <p class="text-slate-600 mb-4">Track all your applications in one place.</p>
                <ul class="space-y-2 text-sm text-slate-600">
                    <li>✓ Status tracking</li>
                    <li>✓ Application history</li>
                    <li>✓ Quick apply feature</li>
                </ul>
            </div>
            <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-8">
                <div class="text-4xl mb-4">🔔</div>
                <h3 class="text-xl font-semibold text-ink mb-3">Smart Notifications</h3>
                <p class="text-slate-600 mb-4">Stay updated on opportunities and responses.</p>
                <ul class="space-y-2 text-sm text-slate-600">
                    <li>✓ Job alerts</li>
                    <li>✓ Application updates</li>
                    <li>✓ Message notifications</li>
                </ul>
            </div>
            <div class="bg-white rounded-2xl shadow-sm ring-1 ring-slate-100 p-8">
                <div class="text-4xl mb-4">🔒</div>
                <h3 class="text-xl font-semibold text-ink mb-3">Secure & Private</h3>
                <p class="text-slate-600 mb-4">Your data is protected with enterprise-grade security.</p>
                <ul class="space-y-2 text-sm text-slate-600">
                    <li>✓ Data encryption</li>
                    <li>✓ Privacy controls</li>
                    <li>✓ HIPAA compliant</li>
                </ul>
            </div>
        </div>
    </div>
@endsection