@extends('layouts.app')

@section('title', 'Home')

@section('content')
<section class="hero-section" id="home">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-content">
                <div class="hero-dots">
                    <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                </div>
                <h1 class="hero-title">Harness the Future Of Electricity Today!</h1>
                <p class="hero-description">We deliver expert power plant repair, maintenance, and 24/7 support to keep your energy infrastructure running at peak performance. Trusted by industry leaders including TurkmenGaz and TurkmenEnergo.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ route('contact') }}" class="btn btn-hero-primary"><i class="bi bi-envelope"></i> Contact Us</a>
                    <a href="#" class="btn btn-hero-secondary" data-bs-toggle="modal" data-bs-target="#quoteModal"><i class="bi bi-calculator"></i> Get A Quote</a>
                </div>
            </div>
            <div class="col-lg-6 hero-image mt-5 mt-lg-0">
                <img src="https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=800&h=520&fit=crop" alt="Power plant maintenance">
                <img src="{{ asset('img/icon.webp') }}" alt="" class="lightning-effect" width="90" height="90">
            </div>
        </div>
    </div>
</section>

<section id="why-us-section">
    <div class="container">
        <h2 class="section-title text-center centered">Why Choose Us</h2>
        <div class="row g-4 text-center mt-4">
            <div class="col-6 col-md-3">
                <div class="stat-box">
                    <span class="number">10+</span>
                    <span class="label">Years Experience</span>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-box">
                    <span class="number">500+</span>
                    <span class="label">Projects Completed</span>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-box">
                    <span class="number">24/7</span>
                    <span class="label">Support Available</span>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="stat-box">
                    <span class="number">100%</span>
                    <span class="label">Safety Compliant</span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="partners-section">
    <div class="container">
        <h2 class="partners-title">Our Trusted Partners</h2>
        <div class="row justify-content-center g-4">
            <div class="col-md-5 col-sm-6">
                <div class="partner-logo">TurkmenGaz</div>
            </div>
            <div class="col-md-5 col-sm-6">
                <div class="partner-logo">TurkmenEnergo</div>
            </div>
        </div>
        <p class="text-center text-muted mt-4 mx-auto" style="max-width: 600px;">We work closely with TurkmenGaz and TurkmenEnergo to ensure reliable energy infrastructure and continuous power supply across the region.</p>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container text-center">
        <h2 class="section-title centered">Ready to Power Ahead?</h2>
        <p class="text-muted mb-4">Explore our services, view past projects, or get in touch for a custom quote.</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <a href="{{ route('services') }}" class="btn btn-quote">Our Services</a>
            <a href="{{ route('projects') }}" class="btn btn-outline-dark px-4 py-3 rounded">View Projects</a>
            <a href="{{ route('contact') }}" class="btn btn-outline-dark px-4 py-3 rounded">Contact Us</a>
        </div>
    </div>
</section>
@endsection
