@extends('layouts.marketing')

@section('title', 'News – HireCameroon')

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-br from-brand-navy via-slate-800 to-brand-navy text-white py-20 relative overflow-hidden">
        <div class="absolute inset-0 bg-black/20"></div>
        <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-20"></div>
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-6">
                Latest <span class="bg-gradient-to-r from-bg-black text-white hover:bg-gray-800 to-brand-gold bg-clip-text text-transparent">News</span>
            </h1>
            <p class="text-xl text-slate-300 max-w-3xl mx-auto leading-relaxed">
                Stay updated with the latest developments, features, and insights from the HireCameroon team.
            </p>
        </div>
    </section>

    <!-- News Grid -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Featured Article -->
            <div class="mb-16">
                <div class="bg-gradient-to-r from-slate-50 to-gray-100 rounded-2xl p-8 md:p-12">
                    <div class="grid md:grid-cols-2 gap-8 items-center">
                        <div>
                            <div class="flex items-center mb-4">
                                <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">BREAKING</span>
                                <span class="ml-3 text-gray-500 text-sm">November 2, 2024</span>
                            </div>
                            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">🎉 AI-Powered Job Matching Now Live!</h2>
                            <p class="text-gray-600 text-lg leading-relaxed mb-6">
                                We're excited to announce the launch of our revolutionary AI-powered job matching system. Using advanced machine learning algorithms, we now connect candidates with their perfect job opportunities faster than ever before.
                            </p>
                            <div class="flex items-center text-sm text-gray-500 mb-6">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                5 min read
                                <span class="mx-2">•</span>
                                <span>By Sarah Nkou, CEO</span>
                            </div>
                            <a href="/news/ai-job-matching" class="inline-flex items-center px-6 py-3 bg-bg-black text-white hover:bg-gray-800 hover:bg-bg-black text-white hover:bg-gray-800/90 text-white font-semibold rounded-lg transition">
                                Read Full Article
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                        </div>
                        <div class="relative">
                            <div class="bg-gradient-to-br from-bg-black text-white hover:bg-gray-800/20 to-brand-blue/20 rounded-2xl p-8">
                                <div class="text-center">
                                    <div class="w-24 h-24 bg-bg-black text-white hover:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                        </svg>
                                    </div>
                                    <h3 class="text-xl font-bold text-gray-900 mb-2">Smart Matching</h3>
                                    <p class="text-gray-600">Our AI analyzes skills, experience, and preferences to find the perfect job matches.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- News Articles Grid -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Article 1 -->
                <article class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-yellow-500 text-black px-2 py-1 rounded text-xs font-bold">UPDATE</span>
                            <span class="ml-3 text-gray-500 text-sm">October 28, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">📈 500+ New Jobs in Douala This Week</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            Record-breaking job postings this week with major companies expanding their teams across technology, finance, and healthcare sectors.
                        </p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">3 min read</span>
                            <a href="/news/job-growth-douala" class="text-bg-black text-white hover:bg-gray-800 hover:text-bg-black text-white hover:bg-gray-800/80 font-medium text-sm">Read more →</a>
                        </div>
                    </div>
                </article>

                <!-- Article 2 -->
                <article class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-yellow-500 text-black px-2 py-1 rounded text-xs font-bold">EVENT</span>
                            <span class="ml-3 text-gray-500 text-sm">October 25, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">📚 Free CV Review Workshop</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            Join our career experts for a free CV review workshop. Learn how to make your resume stand out to employers.
                        </p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">4 min read</span>
                            <a href="/news/cv-workshop" class="text-bg-black text-white hover:bg-gray-800 hover:text-bg-black text-white hover:bg-gray-800/80 font-medium text-sm">Read more →</a>
                        </div>
                    </div>
                </article>

                <!-- Article 3 -->
                <article class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-purple-500 text-white px-2 py-1 rounded text-xs font-bold">COMMUNITY</span>
                            <span class="ml-3 text-gray-500 text-sm">October 20, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">💬 Join Our Job Seeker Community</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            Connect with fellow job seekers, share experiences, and get support from our growing community of professionals.
                        </p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">2 min read</span>
                            <a href="/news/community-chat" class="text-bg-black text-white hover:bg-gray-800 hover:text-bg-black text-white hover:bg-gray-800/80 font-medium text-sm">Read more →</a>
                        </div>
                    </div>
                </article>

                <!-- Article 4 -->
                <article class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-bold">SECURITY</span>
                            <span class="ml-3 text-gray-500 text-sm">October 15, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">🔒 Bank-Level Security & Encryption</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            Your data is now protected with bank-level encryption. Learn about our enhanced security measures and privacy protections.
                        </p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">5 min read</span>
                            <a href="/news/security-update" class="text-bg-black text-white hover:bg-gray-800 hover:text-bg-black text-white hover:bg-gray-800/80 font-medium text-sm">Read more →</a>
                        </div>
                    </div>
                </article>

                <!-- Article 5 -->
                <article class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-yellow-500 text-black px-2 py-1 rounded text-xs font-bold">FEATURE</span>
                            <span class="ml-3 text-gray-500 text-sm">October 10, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">🎯 New Skills Assessment Tools</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            Take our new skills assessment tests to showcase your abilities and get better job matches tailored to your strengths.
                        </p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">3 min read</span>
                            <a href="/news/skills-assessment" class="text-bg-black text-white hover:bg-gray-800 hover:text-bg-black text-white hover:bg-gray-800/80 font-medium text-sm">Read more →</a>
                        </div>
                    </div>
                </article>

                <!-- Article 6 -->
                <article class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="bg-indigo-500 text-white px-2 py-1 rounded text-xs font-bold">PARTNERSHIP</span>
                            <span class="ml-3 text-gray-500 text-sm">October 5, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">🤝 New University Partnerships</h3>
                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                            We're excited to announce partnerships with leading Cameroonian universities to support student career development.
                        </p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">4 min read</span>
                            <a href="/news/university-partnerships" class="text-bg-black text-white hover:bg-gray-800 hover:text-bg-black text-white hover:bg-gray-800/80 font-medium text-sm">Read more →</a>
                        </div>
                    </div>
                </article>
            </div>

            <!-- Newsletter Signup -->
            <div class="mt-16 bg-gradient-to-r from-brand-navy to-slate-800 rounded-2xl p-8 text-center text-white">
                <h3 class="text-2xl font-bold mb-4">Stay in the Loop</h3>
                <p class="text-slate-300 mb-6 max-w-md mx-auto">Get the latest news and updates delivered directly to your inbox.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
                    <input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-bg-black text-white hover:bg-gray-800 focus:border-transparent">
                    <button class="px-6 py-3 bg-bg-black text-white hover:bg-gray-800 hover:bg-bg-black text-white hover:bg-gray-800/90 text-white font-semibold rounded-lg transition">
                        Subscribe
                    </button>
                </div>
            </div>
        </div>
    </section>
@endsection