@extends('layouts.app')

@section('title', 'Services - 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">Our Services</h1>
        <p class="text-xl text-gray-200 mt-4">Comprehensive solutions across all sectors</p>
    </div>
</div>

<!-- Renewable Energy -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center mb-8">
            <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mr-4">
                <svg class="w-8 h-8 text-primary" 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>
            <h2 class="text-3xl font-bold text-primary">Renewable Energy</h2>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Solar Power Systems</h3>
                <p class="text-gray-600">Residential and commercial solar panel installations with battery backup solutions for uninterrupted power supply.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Energy Efficiency</h3>
                <p class="text-gray-600">LED lighting upgrades, smart energy management systems, and power optimization services to reduce energy costs.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Wind Energy</h3>
                <p class="text-gray-600">Wind turbine installation and maintenance services for both grid-connected and off-grid applications.</p>
            </div>
        </div>
    </div>
</section>

<!-- IT Solutions -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center mb-8">
            <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mr-4">
                <svg class="w-8 h-8 text-primary" 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>
            <h2 class="text-3xl font-bold text-primary">IT Solutions</h2>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Software Development</h3>
                <p class="text-gray-600">Custom software solutions, web applications, mobile apps, and enterprise systems tailored to your needs.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Network Infrastructure</h3>
                <p class="text-gray-600">LAN/WAN setup, network security, VPN configuration, and infrastructure management services.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Cybersecurity</h3>
                <p class="text-gray-600">Security assessments, firewall setup, vulnerability testing, and security monitoring services.</p>
            </div>
        </div>
    </div>
</section>

<!-- Electronics -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center mb-8">
            <div class="w-16 h-16 bg-accent rounded-full flex items-center justify-center mr-4">
                <svg class="w-8 h-8 text-primary" 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>
            <h2 class="text-3xl font-bold text-primary">Electronics</h2>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Smart Home Systems</h3>
                <p class="text-gray-600">Home automation, security systems, smart lighting, and integrated home management solutions.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Industrial Automation</h3>
                <p class="text-gray-600">PLC programming, SCADA systems, process automation, and industrial control solutions.</p>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-bold text-primary mb-3">Equipment Sales & Support</h3>
                <p class="text-gray-600">Sales of electronics, computers, and accessories with technical support and warranty services.</p>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<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">Why Choose Redsom Group?</h2>
        <div class="grid md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="text-4xl mb-4">⭐</div>
                <h3 class="font-bold">Experienced Team</h3>
                <p class="text-gray-300 text-sm mt-2">10+ years of combined expertise</p>
            </div>
            <div class="text-center">
                <div class="text-4xl mb-4">🛡️</div>
                <h3 class="font-bold">Quality Assured</h3>
                <p class="text-gray-300 text-sm mt-2">Industry-leading warranties</p>
            </div>
            <div class="text-center">
                <div class="text-4xl mb-4">⚡</div>
                <h3 class="font-bold">Fast Service</h3>
                <p class="text-gray-300 text-sm mt-2">Quick turnaround times</p>
            </div>
            <div class="text-center">
                <div class="text-4xl mb-4">💰</div>
                <h3 class="font-bold">Competitive Prices</h3>
                <p class="text-gray-300 text-sm mt-2">Best value for money</p>
            </div>
        </div>
    </div>
</section>

<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-primary mb-6">Need Our Services?</h2>
        <p class="text-gray-600 mb-8">Contact us today for a free consultation and quote.</p>
        <a href="/contact" class="inline-block bg-accent text-primary font-semibold px-8 py-3 rounded-lg hover:bg-primary-100 transition">Get in Touch</a>
    </div>
</section>
@endsection