@extends('layouts.app')

@section('content')
<!-- Banner Section -->
<div class="relative bg-gray-900 h-80 flex items-center justify-center overflow-hidden">
    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="About Us Banner" class="absolute inset-0 w-full h-full object-cover opacity-30">
    <div class="relative z-10 text-center px-4">
        <h1 class="text-5xl font-light text-white uppercase tracking-widest border-b-2 border-blue-600 pb-4 inline-block">Who We Are</h1>
        <p class="mt-4 text-gray-300 text-lg max-w-2xl mx-auto font-light">Pioneering Excellence in Animal Health & Nutrition Since 1984</p>
    </div>
</div>

<!-- Introduction & Story -->
<div class="bg-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row gap-16 items-center">
            <div class="md:w-1/2">
                <h2 class="text-3xl font-light text-gray-900 mb-6 uppercase tracking-wide">Our Story</h2>
                <div class="w-16 h-1 bg-blue-600 mb-8"></div>
                <p class="text-gray-600 leading-loose mb-6">
                    Established in <span class="font-bold text-gray-800">1984</span>, SA Animal Nutrition represents a legacy of trust and quality in the veterinary and animal nutrition sector. What started as a vision to improve livestock health in Pakistan has grown into a vast network of marketing and distribution that spans the entire nation.
                </p>
                <p class="text-gray-600 leading-loose">
                    Our strength lies in our eclectic mix of individuals—a team connecting deep market knowledge with technical expertise. We don't just distribute products; we provide scientific support and regulatory assurance that our partners rely on.
                </p>
            </div>
            <div class="md:w-1/2">
                <div class="relative">
                    <div class="absolute -top-4 -left-4 w-full h-full border-2 border-blue-100 z-0"></div>
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Corporate Team" class="relative z-10 rounded shadow-2xl">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Vision & Mission (Dark Section) -->
<div class="bg-gray-900 py-20 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
            <!-- Vision -->
            <div class="bg-gray-800 p-10 border-l-4 border-blue-500 hover:bg-gray-700 transition duration-300">
                <div class="flex items-center mb-6">
                    <span class="text-4xl mr-4">👁️</span>
                    <h3 class="text-2xl font-light uppercase tracking-widest">Our Vision</h3>
                </div>
                <p class="text-gray-400 leading-relaxed font-light">
                    To be the undisputed leader in the animal health industry, bridging the gap between global innovation and local needs, ensuring a healthier and more productive future for livestock and poultry in the region.
                </p>
            </div>
             <!-- Mission -->
             <div class="bg-gray-800 p-10 border-l-4 border-green-500 hover:bg-gray-700 transition duration-300">
                <div class="flex items-center mb-6">
                    <span class="text-4xl mr-4">🚀</span>
                    <h3 class="text-2xl font-light uppercase tracking-widest">Our Mission</h3>
                </div>
                <p class="text-gray-400 leading-relaxed font-light">
                    To market and distribute superior quality animal health products and additives. We are dedicated to providing safe, effective solutions that protect animal well-being while fostering lasting relationships built on trust and mutual respect with our customers and suppliers.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Why Choose Us / Values -->
<div class="bg-gray-50 py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-light text-gray-900 mb-12 uppercase tracking-wide">Our Core Strengths</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="bg-white p-8 shadow hover:shadow-xl transition duration-300 border-t-2 border-blue-600">
                <div class="text-blue-600 text-4xl mb-4 font-bold">35+</div>
                <h4 class="text-lg font-bold text-gray-800 uppercase mb-2">Years Experience</h4>
                <p class="text-sm text-gray-500">Decades of industry leadership and operational excellence.</p>
            </div>
            
            <div class="bg-white p-8 shadow hover:shadow-xl transition duration-300 border-t-2 border-blue-600">
                <div class="text-blue-600 text-4xl mb-4 font-bold">ISO</div>
                <h4 class="text-lg font-bold text-gray-800 uppercase mb-2">Certified Quality</h4>
                <p class="text-sm text-gray-500">Adhering to ISO 9001-2015 global quality standards.</p>
            </div>
            
            <div class="bg-white p-8 shadow hover:shadow-xl transition duration-300 border-t-2 border-blue-600">
                <div class="text-blue-600 text-4xl mb-4 font-bold">100%</div>
                <h4 class="text-lg font-bold text-gray-800 uppercase mb-2">Market Reach</h4>
                <p class="text-sm text-gray-500">Vast distribution network covering all of Pakistan & Central Asia.</p>
            </div>
            
            <div class="bg-white p-8 shadow hover:shadow-xl transition duration-300 border-t-2 border-blue-600">
                <div class="text-blue-600 text-4xl mb-4 font-bold">DRAP</div>
                <h4 class="text-lg font-bold text-gray-800 uppercase mb-2">Registered</h4>
                <p class="text-sm text-gray-500">Fully compliant and enlisted with regulatory authorities.</p>
            </div>
        </div>
    </div>
</div>

<!-- CTA Section -->
<div class="bg-blue-900 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between">
        <div class="text-white mb-6 md:mb-0">
            <h2 class="text-2xl font-bold uppercase tracking-wide">Ready to Partner With Us?</h2>
            <p class="text-blue-200 mt-2">Get in touch to learn more about our products and services.</p>
        </div>
        <a href="{{ route('contact') }}" class="bg-white text-blue-900 font-bold py-3 px-8 uppercase tracking-wider hover:bg-gray-100 transition shadow-lg">
            Contact Us Today
        </a>
    </div>
</div>
@endsection