@extends('layouts.website')

@section('title', 'News & Updates')

@section('content')

<x-website.page-header
title=“News & Updates”
subtitle=“Stories, announcements, publications and updates highlighting community impact, partnerships and organizational growth.” />

{{-- INTRODUCTION --}}

<section class="py-20 bg-white">
<div class="max-w-5xl mx-auto px-6 text-center">
    <h2 class="text-4xl font-bold mb-8">
        Sharing Progress, Impact & Learning
    </h2>
    <p class="text-lg leading-8 text-gray-700">
        Transparency, accountability and stakeholder engagement are central to our work. Through this news and updates platform, {{ config('organization.short_name') }} shares stories from the field, organizational milestones, partnership developments, volunteer achievements and lessons learned from implementation.
    </p>
    <p class="mt-6 text-lg leading-8 text-gray-700">
        Our goal is not only to report activities, but also to demonstrate impact, encourage collaboration and document community-driven solutions that contribute to sustainable development.
    </p>
</div>
</section>

{{-- FEATURED STORY --}}

<section class="py-24 bg-green-50">
<div class="max-w-7xl mx-auto px-6">
    <div class="grid lg:grid-cols-2 gap-12 items-center">
        <img
            src="/images/camps/camp1.jpg"
            alt="Featured Story"
            class="rounded-2xl shadow-xl w-full">
        <div>
            <span class="text-green-700 font-semibold uppercase tracking-wide">
                Featured Story
            </span>
            <h2 class="text-4xl font-bold mt-4">
                Community Outreach Program Delivers Healthcare Services To Hundreds Of Residents
            </h2>
            <p class="mt-6 text-lg leading-8 text-gray-700">
                Healthcare professionals, volunteers and community leaders collaborated to provide consultations, disease screening, health education and referral services through a comprehensive outreach initiative designed to improve access to essential healthcare services.
            </p>
            <a href="#"
               class="inline-block mt-8 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-lg">
                Read Full Story
            </a>
        </div>
    </div>
</div>
</section>

{{-- NEWS CATEGORIES --}}

<section class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
    <div class="text-center mb-16">
        <h2 class="text-4xl font-bold">
            Explore Updates By Category
        </h2>
        <p class="mt-4 text-lg text-gray-600">
            Follow developments across our programs, projects and organizational activities.
        </p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-6">
        <div class="border rounded-xl p-6 text-center">
            Programs
        </div>
        <div class="border rounded-xl p-6 text-center">
            Projects
        </div>
        <div class="border rounded-xl p-6 text-center">
            Partnerships
        </div>
        <div class="border rounded-xl p-6 text-center">
            Volunteers
        </div>
        <div class="border rounded-xl p-6 text-center">
            Organizational Updates
        </div>
    </div>
</div>
</section>

{{-- RECENT STORIES --}}

<section class="py-24 bg-gray-50">
<div class="max-w-7xl mx-auto px-6">
    <h2 class="text-4xl font-bold text-center mb-16">
        Recent Stories & Updates
    </h2>
    <div class="grid md:grid-cols-3 gap-8">
        <article class="bg-white rounded-xl overflow-hidden shadow-sm">
            <img src="/images/camps/camp2.jpg"
                 class="h-56 w-full object-cover">
            <div class="p-8">
                <span class="text-sm text-green-700">
                    Community Health
                </span>
                <h3 class="font-bold text-xl mt-3">
                    Health Screening Campaign Expands Community Access
                </h3>
                <p class="mt-4 text-gray-600">
                    Early detection services and health education activities delivered through community outreach initiatives.
                </p>
            </div>
        </article>
        <article class="bg-white rounded-xl overflow-hidden shadow-sm">
            <img src="/images/camps/camp3.jpg"
                 class="h-56 w-full object-cover">
            <div class="p-8">
                <span class="text-sm text-green-700">
                    Partnerships
                </span>
                <h3 class="font-bold text-xl mt-3">
                    New Strategic Collaboration Strengthens Community Programs
                </h3>
                <p class="mt-4 text-gray-600">
                    Partnership initiatives supporting service delivery, capacity building and sustainable impact.
                </p>
            </div>
        </article>
        <article class="bg-white rounded-xl overflow-hidden shadow-sm">
            <img src="/images/camps/camp4.jpg"
                 class="h-56 w-full object-cover">
            <div class="p-8">
                <span class="text-sm text-green-700">
                    Volunteers
                </span>
                <h3 class="font-bold text-xl mt-3">
                    Volunteer Network Continues To Grow
                </h3>
                <p class="mt-4 text-gray-600">
                    Professionals and community leaders contribute expertise and service to support outreach activities.
                </p>
            </div>
        </article>
    </div>
</div>
</section>

{{-- IMPACT HIGHLIGHTS --}}

<section class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-6">
    <h2 class="text-4xl font-bold text-center mb-16">
        Impact Highlights
    </h2>
    <div class="grid md:grid-cols-4 gap-8 text-center">
        <div class="bg-green-50 rounded-xl p-8">
            <h3 class="text-5xl font-bold text-green-700">493</h3>
            <p class="mt-3">Beneficiaries Reached</p>
        </div>
        <div class="bg-green-50 rounded-xl p-8">
            <h3 class="text-5xl font-bold text-green-700">43</h3>
            <p class="mt-3">Volunteers Mobilized</p>
        </div>
        <div class="bg-green-50 rounded-xl p-8">
            <h3 class="text-5xl font-bold text-green-700">107</h3>
            <p class="mt-3">Malaria Cases Managed</p>
        </div>
        <div class="bg-green-50 rounded-xl p-8">
            <h3 class="text-5xl font-bold text-green-700">35</h3>
            <p class="mt-3">Referrals Facilitated</p>
        </div>
    </div>
</div>
</section>

{{-- PUBLICATIONS --}}

<section class="py-24 bg-green-50">
<div class="max-w-7xl mx-auto px-6">
    <h2 class="text-4xl font-bold text-center mb-16">
        Publications & Media
    </h2>
    <div class="grid md:grid-cols-4 gap-8">
        <div class="bg-white rounded-xl p-8 shadow-sm text-center">
            Reports
        </div>
        <div class="bg-white rounded-xl p-8 shadow-sm text-center">
            Press Releases
        </div>
        <div class="bg-white rounded-xl p-8 shadow-sm text-center">
            Success Stories
        </div>
        <div class="bg-white rounded-xl p-8 shadow-sm text-center">
            Photo Galleries
        </div>
    </div>
</div>
</section>

{{-- NEWSLETTER --}}

<section class="py-24 bg-white">
<div class="max-w-4xl mx-auto px-6 text-center">
    <h2 class="text-4xl font-bold">
        Stay Connected
    </h2>
    <p class="mt-6 text-lg text-gray-700">
        Subscribe to receive updates on programs, partnerships, volunteer opportunities and community impact.
    </p>
    <form class="mt-10 flex flex-col md:flex-row gap-4 justify-center">
        <input
            type="email"
            placeholder="Your email address"
            class="border rounded-lg px-5 py-4 w-full md:w-96">
        <button
            class="bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-lg">
            Subscribe
        </button>
    </form>
</div>
</section>

@include('website.partials.development-alignment')

@include('website.partials.cta-partnership')

@endsection