@extends('layouts.landing')

@section('title', 'Easy Business Interaction')

@section('content')
    <!-- Hero Section -->
    <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-28 lg:pt-48 lg:pb-32 bg-blue-900 text-white">
        <div class="container mx-auto px-6">
            <div class="max-w-3xl">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Easy Business Interaction</h1>
                <h2 class="text-2xl md:text-3xl text-yellow-400 mb-6">Future Of Business</h2>
                <p class="text-lg md:text-xl opacity-90">Specializing in smart platforms, innovative applications, and business solutions</p>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Who We Are</h2>
                <div class="w-24 h-1 bg-yellow-400 mx-auto"></div>
            </div>

            <div class="flex flex-col lg:flex-row items-center gap-12">
                <div class="lg:w-1/2">
                    <h3 class="text-2xl font-bold text-blue-900 mb-6">Easy Business Interaction</h3>
                    <p class="text-gray-700 mb-6">
                        Easy Business Interaction specializes in smart platforms, innovative applications, marine services, and project investments. Since its establishment in 2020, the company has continued to work toward meeting the evolving demands of modern markets by providing advanced electronic solutions and smart systems that keep pace with global development and progress.
                    </p>
                </div>
                <div class="lg:w-1/2">
                    <img src="{{ asset('assets/img/129657.jpg') }}" alt="About EBI" class="rounded-lg shadow-xl">
                </div>
            </div>
        </div>
    </section>

    <!-- Mission/Promise Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-2 gap-12">
                <div>
                    <h3 class="text-2xl font-bold text-blue-900 mb-6">Our Mission</h3>
                    <p class="text-gray-700">
                        We work together to provide advanced services that meet the needs of the community and open up hopes for millions to get meaningful job opportunities and work on the progress and well-being of the community and achieve leadership and excellence, relying on distinguished experiences and an advanced system.
                    </p>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-blue-900 mb-6">Our Promise</h3>
                    <p class="text-gray-700">
                        We have a great ambition to be the pioneer in providing a distinguished model of digital services and smart systems that meets the requirements of modern times and includes all social, economic and environmental aspects locally and regionally.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Our Services</h2>
                <div class="w-24 h-1 bg-yellow-400 mx-auto"></div>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach([
                    [
                        'title' => 'Transportation and Logistics Services',
                        'image' => '2151662981.jpg',
                        'description' => 'Our Transportation and Logistics Services streamline the movement of goods and resources across the globe...'
                    ],
                    [
                        'title' => 'Oil and Energy Services',
                        'image' => '2149352244.jpg',
                        'description' => 'Technology and Communications division drives innovation by providing cutting-edge solutions...'
                    ],
                    [
                        'title' => 'Technology and Communications',
                        'image' => '2150040423.jpg',
                        'description' => 'Technology and Communications division drives innovation by providing cutting-edge solutions...'
                    ],
                    [
                        'title' => 'Projects Investment',
                        'image' => 'projectsinvestments.jpg',
                        'description' => 'We work with clients and stakeholders to invest in high-potential projects that drive innovation...'
                    ]
                ] as $service)
                <div class="service-card relative overflow-hidden rounded-lg shadow-lg group">
                    <img src="{{ asset('assets/img/' . $service['image']) }}" alt="{{ $service['title'] }}" class="w-full h-64 object-cover">
                    <div class="service-overlay absolute inset-0 bg-blue-900/90 flex items-center justify-center p-6 opacity-0 transform translate-y-4 transition-all duration-300">
                        <p class="text-white text-center">{{ $service['description'] }}</p>
                    </div>
                    <div class="bg-white p-6">
                        <h3 class="text-xl font-bold text-blue-900">{{ $service['title'] }}</h3>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-4">Contact Us</h2>
                <div class="w-24 h-1 bg-yellow-400 mx-auto"></div>
            </div>

            <div class="grid md:grid-cols-2 gap-12">
                <div>
                    <h3 class="text-2xl font-bold text-blue-900 mb-6">Send Message</h3>
                    <p class="text-gray-700 mb-6">
                        Have a question, idea, or business inquiry? We'd love to hear from you. Fill out the form below and our team will get back to you as soon as possible.
                    </p>

                    <form id="contactForm" class="space-y-6">
                        @csrf
                        <div>
                            <label for="name" class="block text-gray-700 mb-2">Full Name *</label>
                            <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label for="email" class="block text-gray-700 mb-2">Email *</label>
                            <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label for="message" class="block text-gray-700 mb-2">Message *</label>
                            <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                        </div>
                        <button type="submit" class="bg-blue-900 text-white px-6 py-3 rounded-lg hover:bg-blue-800 transition">Send Message</button>
                    </form>
                    <div id="responseMessage" class="mt-4 hidden"></div>
                </div>

                <div class="bg-white p-8 rounded-lg shadow-lg">
                    <h3 class="text-2xl font-bold text-blue-900 mb-6">More Information</h3>
                    <div class="space-y-6">
                        <div>
                            <h4 class="text-lg font-semibold text-blue-900 mb-2">Address</h4>
                            <p class="text-gray-700">Dubai-UAE</p>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold text-blue-900 mb-2">Phone</h4>
                            <p class="text-blue-900 text-xl font-bold">+971 55 724 3353</p>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold text-blue-900 mb-2">Email</h4>
                            <a href="mailto:info@ebicompany.com" class="text-blue-900 hover:text-yellow-500 transition">info@ebicompany.com</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection