@extends('layouts.app')

@section('title', 'Redsom Group - Renewable Energy | IT | Electronics')

@section('content')
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-primary to-primary-800 text-white py-32">
    <div class="absolute inset-0 bg-black/30"></div>
    <div class="relative max-w-7xl mx-auto px-4 text-center">
        <h1 class="text-4xl md:text-6xl font-bold mb-6">Powering Somalia's Future</h1>
        <p class="text-xl md:text-2xl mb-8 text-gray-200">Renewable Energy • IT Solutions • Electronics</p>
        <a href="/contact" class="inline-block bg-accent text-primary font-semibold px-8 py-3 rounded-lg hover:bg-white transition">
            Get Started
        </a>
    </div>
</section>

<!-- About Summary -->
<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 items-center">
            <div>
                <h2 class="text-3xl font-bold text-primary mb-6">About Redsom Group</h2>
                <p class="text-gray-600 mb-4">Redsom Group is a leading Somali company operating in Renewable Energy, IT, and Electronics sectors. We are committed to driving innovation and sustainable development across Somalia.</p>
                <a href="/about" class="text-accent font-semibold hover:underline">Learn more →</a>
            </div>
            <div class="bg-primary-100 p-8 rounded-xl">
                <div class="grid grid-cols-3 gap-4 text-center">
                    <div>
                        <div class="text-3xl font-bold text-accent">10+</div>
                        <div class="text-sm text-gray-600">Years Experience</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold text-accent">500+</div>
                        <div class="text-sm text-gray-600">Projects</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold text-accent">50+</div>
                        <div class="text-sm text-gray-600">Team Members</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Sectors -->
<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 Sectors</h2>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition border-t-4 border-accent">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-primary mb-3">Renewable Energy</h3>
                <p class="text-gray-600">Solar power solutions, energy efficiency systems, and sustainable infrastructure for businesses and communities.</p>
            </div>
            <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition border-t-4 border-accent">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-primary mb-3">IT Solutions</h3>
                <p class="text-gray-600">Software development, network infrastructure, cybersecurity, and digital transformation services.</p>
            </div>
            <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition border-t-4 border-accent">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-primary mb-3">Electronics</h3>
                <p class="text-gray-600">Smart home systems, industrial automation, electronics sales, and technical support services.</p>
            </div>
        </div>
    </div>
</section>

<!-- Latest Posts -->
@if($posts->count() > 0)
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-primary mb-12">Latest News & Media</h2>
        <div class="grid md:grid-cols-3 gap-8">
            @foreach($posts as $post)
            <a href="{{ route('posts.show', $post->slug) }}" class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
                @if($post->thumbnail_path)
                <img src="{{ asset('storage/' . $post->thumbnail_path) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                @elseif($post->media_path)
                <img src="{{ asset('storage/' . $post->media_path) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover">
                @else
                <div class="w-full h-48 bg-primary-100 flex items-center justify-center">
                    <span class="text-4xl text-accent">{{ $post->type === 'video' ? '🎬' : '📰' }}</span>
                </div>
                @endif
                <div class="p-6">
                    <span class="text-xs font-semibold text-accent uppercase">{{ $post->category }}</span>
                    <h3 class="text-lg font-bold text-primary mt-2 line-clamp-2">{{ $post->title }}</h3>
                    <p class="text-sm text-gray-500 mt-2">{{ $post->published_at->format('M d, Y') }}</p>
                </div>
            </a>
            @endforeach
        </div>
        <div class="text-center mt-8">
            <a href="/media" class="inline-block bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition">View All Media</a>
        </div>
    </div>
</section>
@endif

<!-- Contact CTA -->
<section class="py-16 bg-primary text-white">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold mb-4">Ready to Work With Us?</h2>
        <p class="text-xl text-gray-200 mb-8">Get in touch for a free consultation on your next project.</p>
        <a href="/contact" class="inline-block bg-accent text-primary font-semibold px-8 py-3 rounded-lg hover:bg-white transition">
            Contact Us Today
        </a>
    </div>
</section>
@endsection