@extends('layouts.app')

@section('title', "Women's Education & Literacy Program | JOYA")
@section('description', 'JOYA project empowering 900 women through literacy and vocational training in Badakhshan and Takhar provinces of Afghanistan.')

@section('head')
<style>
    /* Individual Project Page Styles */
    
    /* Hero Section */
    .project-hero {
        background: linear-gradient(135deg, 
            rgba(75, 122, 58, 0.08) 0%, 
            rgba(255, 255, 255, 0.95) 100%
        );
        padding: 4rem 0 3rem;
        position: relative;
        overflow: hidden;
    }
    
    .dark .project-hero {
        background: linear-gradient(135deg, 
            rgba(75, 122, 58, 0.12) 0%, 
            rgba(15, 26, 8, 0.95) 100%
        );
    }
    
    .project-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, 
            #4b7a3a 0%, 
            #9cc68a 50%, 
            #4b7a3a 100%
        );
    }
    
    /* Breadcrumb */
    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: #6b7280;
        margin-bottom: 1.5rem;
    }
    
    .dark .breadcrumb {
        color: #9ca3af;
    }
    
    .breadcrumb a {
        color: #4b7a3a;
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .dark .breadcrumb a {
        color: #9cc68a;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
    }
    
    /* Project Header */
    .project-header {
        margin-bottom: 2rem;
    }
    
    .project-category {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        background: #eff6ff;
        color: #2563eb;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .dark .project-category {
        background: rgba(37, 99, 235, 0.2);
        color: #93c5fd;
    }
    
    .project-title {
        font-size: 2.5rem;
        font-weight: 800;
        color: #111827;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    .dark .project-title {
        color: #f9fafb;
    }
    
    .project-subtitle {
        font-size: 1.25rem;
        color: #6b7280;
        line-height: 1.6;
        max-width: 800px;
    }
    
    .dark .project-subtitle {
        color: #d1d5db;
    }
    
    /* Project Meta */
    .project-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
        padding: 1.5rem;
        background: white;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
    }
    
    .dark .project-meta {
        background: #1f2937;
        border-color: #374151;
    }
    
    .meta-item {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .meta-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: #f0f7ed;
        color: #4b7a3a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .dark .meta-icon {
        background: rgba(75, 122, 58, 0.2);
        color: #9cc68a;
    }
    
    .meta-content h4 {
        font-size: 0.75rem;
        color: #6b7280;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }
    
    .dark .meta-content h4 {
        color: #9ca3af;
    }
    
    .meta-content p {
        font-weight: 600;
        color: #111827;
        font-size: 1.1rem;
    }
    
    .dark .meta-content p {
        color: #f9fafb;
    }
    
    /* Content Sections */
    .content-section {
        margin: 3rem 0;
    }
    
    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #f0f7ed;
    }
    
    .dark .section-title {
        color: #f9fafb;
        border-bottom-color: #374151;
    }
    
    .section-content {
        color: #4b5563;
        line-height: 1.7;
        font-size: 1.1rem;
    }
    
    .dark .section-content {
        color: #d1d5db;
    }
    
    /* Lists */
    .impact-list, .activity-list {
        list-style: none;
        padding: 0;
    }
    
    .impact-list li, .activity-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .dark .impact-list li, .dark .activity-list li {
        border-bottom-color: #374151;
    }
    
    .impact-list li:last-child, .activity-list li:last-child {
        border-bottom: none;
    }
    
    .list-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 0.25rem;
    }
    
    .impact-list .list-icon {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }
    
    .activity-list .list-icon {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }
    
    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
    }
    
    .stat-card {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .dark .stat-card {
        background: #1f2937;
        border-color: #374151;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(75, 122, 58, 0.1);
        border-color: #9cc68a;
    }
    
    .dark .stat-card:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
        border-color: #4b7a3a;
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 800;
        color: #4b7a3a;
        margin-bottom: 0.5rem;
    }
    
    .dark .stat-number {
        color: #9cc68a;
    }
    
    .stat-label {
        color: #6b7280;
        font-size: 0.95rem;
        font-weight: 500;
    }
    
    .dark .stat-label {
        color: #d1d5db;
    }
    
    /* Success Story */
    .success-story {
        background: #f0f7ed;
        border-radius: 12px;
        padding: 2rem;
        margin: 2rem 0;
        position: relative;
        overflow: hidden;
    }
    
    .dark .success-story {
        background: rgba(75, 122, 58, 0.1);
    }
    
    .success-story::before {
        content: '"';
        position: absolute;
        top: -20px;
        left: 20px;
        font-size: 6rem;
        color: rgba(75, 122, 58, 0.1);
        font-family: Georgia, serif;
        line-height: 1;
    }
    
    .dark .success-story::before {
        color: rgba(156, 198, 138, 0.1);
    }
    
    .story-text {
        font-style: italic;
        color: #4b5563;
        line-height: 1.7;
        font-size: 1.1rem;
        position: relative;
        z-index: 1;
    }
    
    .dark .story-text {
        color: #d1d5db;
    }
    
    /* Action Buttons */
    .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin: 3rem 0;
        padding-top: 2rem;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark .action-buttons {
        border-top-color: #374151;
    }
    
    .action-btn {
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        transition: all 0.2s;
        cursor: pointer;
        border: none;
        font-size: 0.95rem;
    }
    
    .btn-primary {
        background: #4b7a3a;
        color: white;
    }
    
    .btn-primary:hover {
        background: #375523;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(75, 122, 58, 0.2);
    }
    
    .btn-secondary {
        background: white;
        color: #4b7a3a;
        border: 1px solid #4b7a3a;
    }
    
    .dark .btn-secondary {
        background: transparent;
        color: #9cc68a;
        border-color: #4b7a3a;
    }
    
    .btn-secondary:hover {
        background: #f0f7ed;
        transform: translateY(-2px);
    }
    
    .dark .btn-secondary:hover {
        background: rgba(75, 122, 58, 0.1);
    }
    
    /* Related Projects */
    .related-projects {
        background: #f9fafb;
        padding: 3rem 0;
        margin-top: 3rem;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark .related-projects {
        background: #111827;
        border-top-color: #374151;
    }
    
    .related-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }
    
    .dark .related-title {
        color: #f9fafb;
    }
    
    .related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .related-card {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        transition: all 0.2s;
    }
    
    .dark .related-card {
        background: #1f2937;
        border-color: #374151;
    }
    
    .related-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        border-color: #9cc68a;
    }
    
    .dark .related-card:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
        border-color: #4b7a3a;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .project-title {
            font-size: 2rem;
        }
        
        .project-meta {
            grid-template-columns: 1fr;
        }
        
        .action-buttons {
            flex-direction: column;
        }
        
        .action-btn {
            width: 100%;
            justify-content: center;
        }
        
        .related-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<div class="min-h-screen bg-white dark:bg-gray-950">
    <!-- Hero Section -->
    <section class="project-hero">
        <div class="max-w-6xl mx-auto px-6">
            <!-- Breadcrumb -->
            <nav class="breadcrumb">
                <a href="{{ route('home') }}">Home</a>
                <span>/</span>
                <a href="{{ route('projects') }}">Projects</a>
                <span>/</span>
                <span>Women's Education</span>
            </nav>
            
            <!-- Project Header -->
            <div class="project-header">
                <span class="project-category">
                    <i class="ph ph-graduation-cap"></i>
                    Education & Empowerment
                </span>
                
                <h1 class="project-title">Women's Education & Literacy Program (WLSEP)</h1>
                
                <p class="project-subtitle">
                    Empowering 900 women through literacy and vocational training in Badakhshan and Takhar provinces, 
                    creating sustainable pathways to economic independence and community leadership.
                </p>
            </div>
            
            <!-- Project Meta -->
            <div class="project-meta">
                <div class="meta-item">
                    <div class="meta-icon">
                        <i class="ph ph-calendar"></i>
                    </div>
                    <div class="meta-content">
                        <h4>Project Year</h4>
                        <p>2018-2019 (7 months)</p>
                    </div>
                </div>
                
                <div class="meta-item">
                    <div class="meta-icon">
                        <i class="ph ph-map-pin"></i>
                    </div>
                    <div class="meta-content">
                        <h4>Location</h4>
                        <p>Badakhshan & Takhar Provinces</p>
                    </div>
                </div>
                
                <div class="meta-item">
                    <div class="meta-icon">
                        <i class="ph ph-users"></i>
                    </div>
                    <div class="meta-content">
                        <h4>Direct Beneficiaries</h4>
                        <p>900 Women</p>
                    </div>
                </div>
                
                <div class="meta-item">
                    <div class="meta-icon">
                        <i class="ph ph-currency-dollar"></i>
                    </div>
                    <div class="meta-content">
                        <h4>Budget</h4>
                        <p>$139,500 USD</p>
                    </div>
                </div>
                
                <div class="meta-item">
                    <div class="meta-icon">
                        <i class="ph ph-handshake"></i>
                    </div>
                    <div class="meta-content">
                        <h4>Donor/Partner</h4>
                        <p>SCA (Swedish Committee for Afghanistan)</p>
                    </div>
                </div>
                
                <div class="meta-item">
                    <div class="meta-icon">
                        <i class="ph ph-check-circle"></i>
                    </div>
                    <div class="meta-content">
                        <h4>Status</h4>
                        <p>Successfully Completed</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-6 py-8">
        <!-- Project Description -->
        <section class="content-section">
            <h2 class="section-title">Project Overview</h2>
            <div class="section-content">
                <p>
                    The Women's Livelihood and Skills Empowerment Project (WLSEP) was a transformative initiative 
                    aimed at breaking cycles of poverty by equipping 900 women in remote areas of Badakhshan and 
                    Takhar provinces with essential literacy skills and vocational training.
                </p>
                <p class="mt-4">
                    Through tailored courses in sewing, tailoring, handicrafts, beauty services, and carpet weaving, 
                    we created sustainable pathways to economic independence. Each participant received business 
                    development guidance and market linkage support to ensure the long-term success of their enterprises.
                </p>
                <p class="mt-4">
                    This project not only provided vocational skills but also focused on building confidence, 
                    leadership abilities, and community participation among women who had limited access to 
                    formal education and economic opportunities.
                </p>
            </div>
        </section>
        
        <!-- Key Impact -->
        <section class="content-section">
            <h2 class="section-title">Key Impact & Outcomes</h2>
            <ul class="impact-list">
                <li>
                    <div class="list-icon">
                        <i class="ph ph-check"></i>
                    </div>
                    <span><strong>900 women</strong> gained marketable vocational skills in traditional crafts and services</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-check"></i>
                    </div>
                    <span><strong>180 women-led businesses</strong> established or expanded within their communities</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-check"></i>
                    </div>
                    <span><strong>40% average increase</strong> in household income for program participants</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-check"></i>
                    </div>
                    <span><strong>12 women's cooperatives</strong> formed to ensure sustainability and collective bargaining power</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-check"></i>
                    </div>
                    <span><strong>95% satisfaction rate</strong> among participants with the training quality and support received</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-check"></i>
                    </div>
                    <span><strong>Enhanced social status</strong> of women within their families and communities</span>
                </li>
            </ul>
        </section>
        
        <!-- Main Activities -->
        <section class="content-section">
            <h2 class="section-title">Main Activities & Implementation</h2>
            <ul class="activity-list">
                <li>
                    <div class="list-icon">
                        <i class="ph ph-sewing-needle"></i>
                    </div>
                    <span>Tailored vocational courses in sewing, tailoring, and traditional handicrafts</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-sparkle"></i>
                    </div>
                    <span>Beauty services training including hairdressing, makeup, and salon management</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-rug"></i>
                    </div>
                    <span>Carpet weaving workshops preserving traditional Afghan craftsmanship techniques</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-book"></i>
                    </div>
                    <span>Basic literacy and numeracy training for women with no formal education background</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-chart-line-up"></i>
                    </div>
                    <span>Business development workshops covering entrepreneurship, financial management, and marketing</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-storefront"></i>
                    </div>
                    <span>Market linkage establishment with local buyers and regional markets</span>
                </li>
                <li>
                    <div class="list-icon">
                        <i class="ph ph-users-three"></i>
                    </div>
                    <span>Formation and training of women's cooperatives for collective economic activities</span>
                </li>
            </ul>
        </section>
        
        <!-- Statistics -->
        <section class="content-section">
            <h2 class="section-title">Project Statistics</h2>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">900</div>
                    <div class="stat-label">Women Trained</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">180</div>
                    <div class="stat-label">Businesses Started</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">40%</div>
                    <div class="stat-label">Income Increase</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">95%</div>
                    <div class="stat-label">Satisfaction Rate</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">12</div>
                    <div class="stat-label">Cooperatives Formed</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">7</div>
                    <div class="stat-label">Months Duration</div>
                </div>
            </div>
        </section>
        
        <!-- Success Story -->
        <section class="content-section">
            <h2 class="section-title">Success Story</h2>
            <div class="success-story">
                <p class="story-text">
                    "Fatima, a 28-year-old mother of three from a remote village in Badakhshan, joined our program 
                    with no formal education and limited prospects. Through our tailoring course, she discovered 
                    her talent for design and craftsmanship. Today, Fatima runs a successful tailoring business 
                    that employs two other women from her village. She sends all three of her children to school 
                    and has become a role model for other women in her community, proving that education and 
                    skills can transform lives."
                </p>
            </div>
            <p class="section-content mt-4">
                Stories like Fatima's demonstrate the transformative power of education and skills training. 
                Beyond economic benefits, the program fostered confidence, leadership, and community respect 
                for women who had previously been marginalized.
            </p>
        </section>
        
        <!-- Sustainability -->
        <section class="content-section">
            <h2 class="section-title">Sustainability & Legacy</h2>
            <div class="section-content">
                <p>
                    The project's sustainability was ensured through several key strategies:
                </p>
                <ul class="impact-list mt-4">
                    <li>
                        <div class="list-icon">
                            <i class="ph ph-shield-check"></i>
                        </div>
                        <span>Formation of sustainable women's cooperatives that continue to operate independently</span>
                    </li>
                    <li>
                        <div class="list-icon">
                            <i class="ph ph-graduation-cap"></i>
                        </div>
                        <span>Training of local trainers who can continue skills transfer within their communities</span>
                    </li>
                    <li>
                        <div class="list-icon">
                            <i class="ph ph-storefront"></i>
                        </div>
                        <span>Establishment of market linkages that continue to benefit graduates</span>
                    </li>
                    <li>
                        <div class="list-icon">
                            <i class="ph ph-users"></i>
                        </div>
                        <span>Community ownership and support for women's economic activities</span>
                    </li>
                </ul>
            </div>
        </section>
        
        <!-- Action Buttons -->
        <div class="action-buttons">
            <a href="{{ route('projects') }}" class="action-btn btn-secondary">
                <i class="ph ph-arrow-left"></i>
                Back to All Projects
            </a>
            
            <button onclick="window.print()" class="action-btn btn-secondary">
                <i class="ph ph-printer"></i>
                Print Project Details
            </button>
            
            <a href="#" class="action-btn btn-primary">
                <i class="ph ph-download"></i>
                Download Full Report
            </a>
        </div>
        
        <!-- Related Projects -->
        <section class="related-projects">
            <div class="max-w-6xl mx-auto px-6">
                <h2 class="related-title">Related Projects</h2>
                <div class="related-grid">
                    <div class="related-card">
                        <span class="inline-flex items-center gap-2 text-sm font-medium text-joya-600 dark:text-joya-400 mb-3">
                            <i class="ph ph-wrench"></i>
                            Education
                        </span>
                        <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Youth TVET Program</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                            Technical skills training for 320 youth in Kabul and Parwan
                        </p>
                        <a href="{{ route('projects.youth-tvet') }}" class="text-joya-600 dark:text-joya-400 text-sm font-medium hover:underline">
                            View Project Details →
                        </a>
                    </div>
                    
                    <div class="related-card">
                        <span class="inline-flex items-center gap-2 text-sm font-medium text-joya-600 dark:text-joya-400 mb-3">
                            <i class="ph ph-book-open"></i>
                            Education
                        </span>
                        <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Community-Based Education</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                            80 learning centers providing education to 2,400 children
                        </p>
                        <a href="{{ route('projects.community-education') }}" class="text-joya-600 dark:text-joya-400 text-sm font-medium hover:underline">
                            View Project Details →
                        </a>
                    </div>
                    
                    <div class="related-card">
                        <span class="inline-flex items-center gap-2 text-sm font-medium text-joya-600 dark:text-joya-400 mb-3">
                            <i class="ph ph-coin"></i>
                            Livelihood
                        </span>
                        <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Ultra-Poor Graduation Program</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                            Supporting 500 women with livelihood assets and training
                        </p>
                        <a href="{{ route('projects.ultra-poor-graduation') }}" class="text-joya-600 dark:text-joya-400 text-sm font-medium hover:underline">
                            View Project Details →
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Simple print functionality
    const printBtn = document.querySelector('button[onclick="window.print()"]');
    if (printBtn) {
        printBtn.addEventListener('click', function() {
            window.print();
        });
    }
    
    // Download button functionality
    const downloadBtn = document.querySelector('.btn-primary');
    downloadBtn?.addEventListener('click', (e) => {
        if (e.target.closest('a[href="#"]')) {
            e.preventDefault();
            // This would typically generate a PDF report
            alert('PDF report generation would be implemented here. For now, you can print the page.');
        }
    });
});
</script>
@endsection