@extends('layouts.app')

@section('content')
<div class="bg-white">
    <!-- Hero Section -->
    <div class="relative bg-gray-900 h-[600px] flex items-center justify-center bg-cover bg-center" style="background-image: url('{{ asset('images/hero.png') }}');">
        <div class="absolute inset-0 bg-black/50"></div> <!-- Modern overlay using slash opacity syntax if supported, else bg-black opacity-50 -->
        
        <main class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
            <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight drop-shadow-md">
                <span class="block">Premium Quality</span>
                <span class="block text-indigo-400 mt-2">Animal Nutrition</span>
            </h1>
            <p class="mt-4 text-lg sm:text-xl md:text-2xl text-gray-100 max-w-3xl mx-auto font-light drop-shadow">
                Providing the best nutrition for your livestock and pets. Scientifically formulated products to ensure health, growth, and sustainable farming.
            </p>
            <div class="mt-8 sm:mt-10 flex justify-center gap-4">
                <a href="{{ route('products.index') }}" class="px-8 py-3 border border-transparent text-base font-semibold rounded-full text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                    View Products
                </a>
                <a href="{{ route('contact') }}" class="px-8 py-3 border border-white text-base font-semibold rounded-full text-white hover:bg-white hover:text-gray-900 md:py-4 md:text-lg md:px-10 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 bg-white/10 backdrop-blur-sm">
                    Contact Us
                </a>
            </div>
        </main>
    </div>

    <!-- Key Features / Highlights -->
    <div class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 p-8 text-center border border-gray-100">
                    <div class="h-16 w-16 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-6 text-indigo-600 text-2xl font-bold">
                        35+
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">Years of Excellence</h3>
                    <p class="text-gray-500 leading-relaxed">More than 35 years of dedicated service and experience in the animal nutrition industry.</p>
                </div>
                 <!-- Feature 2 -->
                 <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 p-8 text-center border border-gray-100">
                    <div class="h-16 w-16 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-6 text-indigo-600 text-2xl font-bold">
                        ISO
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">Certified Quality</h3>
                    <p class="text-gray-500 leading-relaxed">ISO 9001-2015 Certified for Quality Management Systems, ensuring top-tier standards.</p>
                </div>
                 <!-- Feature 3 -->
                 <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 p-8 text-center border border-gray-100">
                    <div class="h-16 w-16 bg-indigo-50 rounded-full flex items-center justify-center mx-auto mb-6 text-indigo-600 text-2xl font-bold">
                        DRAP
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">Registered</h3>
                    <p class="text-gray-500 leading-relaxed">Fully enlisted with the Drug Regulatory Authority of Pakistan (DRAP) for safety and compliance.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Corporate Mission Section -->
    <div class="py-20 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center gap-12">
                <div class="lg:w-1/2">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6 tracking-tight">Corporate Mission <span class="text-indigo-600">&</span> Values</h2>
                    <p class="text-lg text-gray-600 mb-8 leading-relaxed">
                        We are committed to improving animal health through innovation and quality. Our mission extends beyond just products; we aim to be a partner in your success.
                    </p>
                    <div class="space-y-6">
                        <div class="flex items-start">
                             <div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 flex items-center justify-center mt-1">
                                <svg class="h-4 w-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                             </div>
                             <div class="ml-4">
                                 <h4 class="text-lg font-semibold text-gray-900">Nationwide Reach</h4>
                                 <p class="text-gray-500 mt-1">Distributing quality animal health products effectively across Pakistan and Central Asia.</p>
                            </div>
                        </div>
                         <div class="flex items-start">
                             <div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 flex items-center justify-center mt-1">
                                <svg class="h-4 w-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                             </div>
                             <div class="ml-4">
                                 <h4 class="text-lg font-semibold text-gray-900">Livestock & Poultry Welfare</h4>
                                 <p class="text-gray-500 mt-1">Dedicated to improving and protecting the health of livestock and poultry assets.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-10">
                         <a href="{{ route('about') }}" class="text-indigo-600 font-semibold hover:text-indigo-800 flex items-center gap-2 group transition-colors">
                            Read More About Us 
                            <span class="transform group-hover:translate-x-1 transition-transform">→</span>
                        </a>
                    </div>
                </div>
                <div class="lg:w-1/2 relative">
                    <div class="rounded-2xl overflow-hidden shadow-2xl relative z-10">
                        <img src="https://images.unsplash.com/photo-1500595046743-cd271d694d30?ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80" alt="Farm landscape" class="w-full h-full object-cover">
                    </div>
                     <!-- Decorative backdrop -->
                    <div class="absolute -bottom-6 -right-6 w-full h-full border-2 border-indigo-100 rounded-2xl -z-10"></div>
                </div>
             </div>
         </div>
    </div>

    <!-- Featured Products Section -->
    <div class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Featured Products</h2>
                <div class="w-20 h-1.5 bg-indigo-600 mx-auto rounded-full"></div>
                <p class="mt-4 text-xl text-gray-500 max-w-2xl mx-auto">The Vital Link to Your Feed Chain. State of the art machines and complete feed mill solutions.</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                @forelse($featuredProducts as $product)
                    <div class="group bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 flex flex-col h-full">
                         <a href="{{ route('products.show', $product) }}" class="block flex-1">
                            <div class="relative aspect-w-1 aspect-h-1 w-full overflow-hidden bg-gray-200">
                                 @if($product->image)
                                    <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-full h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500">
                                @else
                                    <div class="w-full h-64 flex items-center justify-center bg-gray-100 text-gray-400">
                                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                    </div>
                                @endif
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div>
                            </div>
                            <div class="p-6">
                                <h3 class="text-lg font-bold text-gray-900 group-hover:text-indigo-600 transition-colors mb-2 line-clamp-1">{{ $product->name }}</h3>
<p class="text-sm text-gray-500 mb-4 line-clamp-2">
    {{ Str::limit(strip_tags($product->description), 60) }}
</p>
                                <div class="flex justify-between items-center mt-auto">
                                    <span class="text-xl font-bold text-gray-900">PKR {{ $product->price }}</span>
                                    <span class="text-sm font-medium text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full group-hover:bg-indigo-100 transition-colors">View</span>
                                </div>
                            </div>
                        </a>
                    </div>
                @empty
                    <div class="col-span-4 text-center py-12">
                        <div class="text-gray-400 mb-2">
                             <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                             </svg>
                        </div>
                        <p class="text-gray-500 text-lg">No featured products available at the moment.</p>
                    </div>
                @endforelse
            </div>
            
            <div class="text-center mt-16">
                <a href="{{ route('products.index') }}" class="inline-flex items-center justify-center px-8 py-3 border border-indigo-600 text-base font-medium rounded-full text-indigo-600 bg-white hover:bg-indigo-50 transition-colors duration-300">
                    View All Products
                    <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection