@extends('layouts.app')

@section('title', 'About Us - ECA Networks Electronics Store Kenya')

@section('content')

<!-- Hero -->
<div class="bg-gradient-to-r from-navy to-blue-900 text-white py-20">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h1 class="text-4xl md:text-5xl font-bold mb-4">About <span class="text-electric-blue">ECA Networks</span></h1>
        <p class="text-xl text-blue-200 max-w-2xl mx-auto">Leading supplier of networking equipment based in Nairobi, with a special focus on fiber optic internet.</p>
    </div>
</div>

<!-- Company Story -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
                <span class="text-electric-blue font-semibold text-sm uppercase tracking-wider">About Us</span>
                <h2 class="text-3xl font-bold text-navy mt-2 mb-5">Your Trusted Networking Equipment Partner</h2>
                <div class="space-y-4 text-gray-600 leading-relaxed">
                    <p>ECA Networks Ltd is a leading supplier of networking equipment based in Nairobi. We are the go-to shop for companies &amp; individuals that build and run internet infrastructure, with a special focus on fiber optic internet.</p>
                    <p>We help our customers — like internet providers, individuals, and large businesses — get the right tools to build strong and fast networks.</p>
                </div>
            </div>
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80" alt="ECA Networks Store" class="rounded-2xl shadow-2xl w-full">
                <div class="absolute -bottom-6 -right-6 bg-electric-blue text-white p-6 rounded-2xl shadow-xl hidden md:block">
                    <p class="text-3xl font-bold">3+</p>
                    <p class="text-sm text-blue-100">Years in Business</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div class="text-center">
                <p class="text-4xl font-bold text-electric-blue mb-1">10K+</p>
                <p class="text-gray-600 font-medium">Happy Customers</p>
                <p class="text-sm text-gray-400">Across Kenya</p>
            </div>
            <div class="text-center">
                <p class="text-4xl font-bold text-electric-blue mb-1">5K+</p>
                <p class="text-gray-600 font-medium">Products</p>
                <p class="text-sm text-gray-400">In our catalog</p>
            </div>
            <div class="text-center">
                <p class="text-4xl font-bold text-electric-blue mb-1">50+</p>
                <p class="text-gray-600 font-medium">Brands</p>
                <p class="text-sm text-gray-400">Trusted partners</p>
            </div>
            <div class="text-center">
                <p class="text-4xl font-bold text-electric-blue mb-1">47</p>
                <p class="text-gray-600 font-medium">Counties Served</p>
                <p class="text-sm text-gray-400">Nationwide delivery</p>
            </div>
        </div>
    </div>
</section>

<!-- Values -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-navy mb-3">Our Core Values</h2>
            <p class="text-gray-500">The principles that guide everything we do</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-star text-electric-blue text-2xl"></i>
                </div>
                <h3 class="font-bold text-navy mb-2">Quality First</h3>
                <p class="text-gray-500 text-sm">Every product we sell is genuine and meets our quality standards. No counterfeits, ever.</p>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-handshake text-green-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-navy mb-2">Customer Trust</h3>
                <p class="text-gray-500 text-sm">We build lasting relationships through honest pricing, reliable service, and transparent policies.</p>
            </div>
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center hover:shadow-md transition-shadow">
                <div class="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-rocket text-purple-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-navy mb-2">Innovation</h3>
                <p class="text-gray-500 text-sm">We stay ahead of technology trends to always offer you the latest and best products available.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-16 bg-navy text-white text-center">
    <div class="max-w-2xl mx-auto px-4">
        <h2 class="text-3xl font-bold mb-4">Ready to Build Your Network?</h2>
        <p class="text-gray-400 mb-8">Browse our range of networking equipment — fiber optics, routers, cameras, structured cabling and more.</p>
        <div class="flex gap-4 justify-center">
            <a href="{{ route('products.index') }}" class="bg-electric-blue text-white px-8 py-3.5 rounded-xl font-semibold hover:bg-blue-dark transition-colors">
                Shop Now
            </a>
            <a href="{{ route('contact') }}" class="border-2 border-white/30 text-white px-8 py-3.5 rounded-xl font-semibold hover:bg-white/10 transition-colors">
                Contact Us
            </a>
        </div>
    </div>
</section>

@endsection