@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<div class="relative bg-blue-900 overflow-hidden">
    <div class="absolute inset-0">
        <img class="w-full h-full object-cover" src="{{ asset('images/hero.png') }}" alt="Healthy Livestock">
        <div class="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-60"></div>
    </div>
    <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center sm:text-left">
        <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
            <span class="block">Pioneering Animal Health</span>
            <span class="block text-blue-200">Since 1984</span>
        </h1>
        <p class="mt-6 text-xl text-blue-100 max-w-3xl">
            We provide world-class animal nutrition products and feed additives to ensure the health and productivity of your livestock and poultry.
        </p>
        <div class="mt-10 max-w-sm sm:max-w-none sm:flex sm:justify-start">
            <div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
                <a href="{{ route('products.index') }}" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50 sm:px-8">
                    View Products
                </a>
                <a href="{{ route('contact') }}" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 sm:px-8">
                    Contact Us
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Stats / Trust Bar -->
<div class="bg-white border-b border-gray-200">
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 gap-8 md:grid-cols-4 text-center">
            <div>
                <div class="text-3xl font-extrabold text-blue-900">35+</div>
                <div class="mt-2 text-sm font-medium text-gray-500 uppercase tracking-wide">Years Experience</div>
            </div>
            <div>
                <div class="text-3xl font-extrabold text-blue-900">DRAP</div>
                <div class="mt-2 text-sm font-medium text-gray-500 uppercase tracking-wide">Registered</div>
            </div>
            <div>
                <div class="text-3xl font-extrabold text-blue-900">ISO</div>
                <div class="mt-2 text-sm font-medium text-gray-500 uppercase tracking-wide">9001:2015 Certified</div>
            </div>
            <div>
                <div class="text-3xl font-extrabold text-blue-900">Nationwide</div>
                <div class="mt-2 text-sm font-medium text-gray-500 uppercase tracking-wide">Coverage</div>
            </div>
        </div>
    </div>
</div>

<!-- About Snippet -->
<div class="bg-gray-50 py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center">
            <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Who We Are</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Innovation is our Tradition
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                Established in 1984, SA Animal Nutrition now has a vast network of marketing and distribution throughout Pakistan. We represent world renowned manufacturers and enjoy the trust of our principals.
            </p>
            <div class="mt-8">
                  <a href="{{ route('about') }}" class="text-base font-medium text-blue-600 hover:text-blue-500">
                    Learn more about us <span aria-hidden="true">&rarr;</span>
                  </a>
            </div>
        </div>
    </div>
</div>

<!-- Divisions / Core Strengths -->
<div class="bg-white py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center mb-12">
            <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Divisions</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Comprehensive Solutions
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
            <!-- Card 1 -->
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
                <div class="flex-shrink-0 bg-blue-600 h-48 flex items-center justify-center">
                    <svg class="h-20 w-20 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
                    </svg>
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <h3 class="text-xl font-semibold text-gray-900">Livestock Health</h3>
                        <p class="mt-3 text-base text-gray-500">
                            Improving productivity and health of dairy and beef cattle through premium feed additives and medicines.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
             <div class="flex flex-col rounded-lg shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
                <div class="flex-shrink-0 bg-blue-700 h-48 flex items-center justify-center">
                    <svg class="h-20 w-20 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <h3 class="text-xl font-semibold text-gray-900">Poultry Solutions</h3>
                        <p class="mt-3 text-base text-gray-500">
                            Advanced nutritional supplements and disease prevention for optimal poultry farm performance.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
             <div class="flex flex-col rounded-lg shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
                 <div class="flex-shrink-0 bg-blue-800 h-48 flex items-center justify-center">
                    <svg class="h-20 w-20 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <h3 class="text-xl font-semibold text-gray-900">Quality Assurance</h3>
                        <p class="mt-3 text-base text-gray-500">
                            Every product we distribute goes through rigorous quality checks to meet international standards.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection