@extends('layouts.app')

@section('title', 'About Us - Redsom Group')

@section('content')
<div class="bg-primary text-white py-20">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <h1 class="text-4xl md:text-5xl font-bold">About Us</h1>
        <p class="text-xl text-gray-200 mt-4">Learn more about Redsom Group</p>
    </div>
</div>

<section class="py-16">
    <div class="max-w-7xl mx-auto px-4">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-3xl font-bold text-primary mb-6">Our Story</h2>
                <p class="text-gray-600 mb-4">Redsom Group was founded with a vision to bring cutting-edge technology and sustainable energy solutions to Somalia. Since our inception, we have grown to become a trusted name in Renewable Energy, IT, and Electronics.</p>
                <p class="text-gray-600 mb-4">Our team consists of dedicated professionals passionate about innovation and customer satisfaction. We believe in building lasting relationships with our clients by delivering exceptional results on every project.</p>
            </div>
            <div class="bg-primary-100 rounded-xl p-8">
                <div class="aspect-video bg-primary-200 rounded-lg flex items-center justify-center">
                    <svg class="w-24 h-24 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="grid md:grid-cols-2 gap-12">
            <div class="bg-white p-8 rounded-xl shadow-lg">
                <h3 class="text-2xl font-bold text-primary mb-4">Vision</h3>
                <p class="text-gray-600">To be the leading provider of sustainable energy and technology solutions in Somalia and the East Africa region, driving progress and improving lives through innovation.</p>
            </div>
            <div class="bg-white p-8 rounded-xl shadow-lg">
                <h3 class="text-2xl font-bold text-primary mb-4">Mission</h3>
                <p class="text-gray-600">To deliver excellence in Renewable Energy, IT, and Electronics through professional service, innovative solutions, and a commitment to sustainable development that benefits our clients and communities.</p>
            </div>
        </div>
    </div>
</section>

<section class="py-16">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-primary mb-12">Our Core Values</h2>
        <div class="grid md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="text-2xl">🎯</span>
                </div>
                <h3 class="font-bold text-primary">Excellence</h3>
                <p class="text-gray-600 text-sm mt-2">Delivering the highest quality in everything we do</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="text-2xl">💡</span>
                </div>
                <h3 class="font-bold text-primary">Innovation</h3>
                <p class="text-gray-600 text-sm mt-2">Embracing new ideas and technologies</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="text-2xl">🤝</span>
                </div>
                <h3 class="font-bold text-primary">Integrity</h3>
                <p class="text-gray-600 text-sm mt-2">Building trust through honest relationships</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="text-2xl">🌱</span>
                </div>
                <h3 class="font-bold text-primary">Sustainability</h3>
                <p class="text-gray-600 text-sm mt-2">Committed to environmental responsibility</p>
            </div>
        </div>
    </div>
</section>

<section class="py-16 bg-primary text-white">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">Our Team</h2>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="w-32 h-32 bg-gray-300 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <span class="text-4xl">👤</span>
                </div>
                <h3 class="text-xl font-bold">Ahmed Mohamed</h3>
                <p class="text-gray-300">CEO & Founder</p>
            </div>
            <div class="text-center">
                <div class="w-32 h-32 bg-gray-300 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <span class="text-4xl">👤</span>
                </div>
                <h3 class="text-xl font-bold">Fatima Ali</h3>
                <p class="text-gray-300">Head of Operations</p>
            </div>
            <div class="text-center">
                <div class="w-32 h-32 bg-gray-300 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <span class="text-4xl">👤</span>
                </div>
                <h3 class="text-xl font-bold">Mohamed Yusuf</h3>
                <p class="text-gray-300">Technical Director</p>
            </div>
        </div>
    </div>
</section>
@endsection