@extends('layouts.public')

@section('title', 'Contact Us | WebsparkIT')
@section('meta_description', 'Contact the best web design company in Sri Lanka. Get a free quote for web development, SEO, and social media marketing Sri Lanka.')
@section('meta_keywords', 'contact web design company sri lanka, social media marketing sri lanka, hotel website design sri lanka')

@section('content')
<div class="bg-navy text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl font-bold">Contact Us</h1>
        <p class="mt-4 text-xl">Let's discuss your next big digital project.</p>
    </div>
</div>

<div class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-2 gap-12">
        <div class="bg-white p-8 rounded-lg shadow-sm">
            <h2 class="text-2xl font-bold text-navy mb-6">Send us a message</h2>
            <form action="#" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-gray-700 font-medium mb-1">Name</label>
                    <input type="text" name="name" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange" required>
                </div>
                <div>
                    <label class="block text-gray-700 font-medium mb-1">Email</label>
                    <input type="email" name="email" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange" required>
                </div>
                <div>
                    <label class="block text-gray-700 font-medium mb-1">Service Required</label>
                    <select name="service" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange">
                        <option>Web Design Sri Lanka</option>
                        <option>Hotel Website Design Sri Lanka</option>
                        <option>Social Media Marketing Sri Lanka</option>
                        <option>SEO Services</option>
                        <option>Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-gray-700 font-medium mb-1">Message</label>
                    <textarea name="message" rows="4" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-orange focus:border-orange" required></textarea>
                </div>
                <button type="submit" class="w-full bg-orange hover:bg-orange-dark text-white font-bold py-3 rounded-md transition-colors">Submit Inquiry</button>
            </form>
        </div>
        
        <div>
            <h2 class="text-2xl font-bold text-navy mb-6">Our Contact Information</h2>
            <div class="space-y-4 text-gray-600">
                <p><strong>Email:</strong> system@websparkit.com</p>
                <p><strong>Address:</strong> Sri Lanka</p>
                <p class="mt-8">We are the trusted partner for countless businesses looking for reliable web development and digital marketing agency Sri Lanka services. Reach out today and let's grow together!</p>
            </div>
        </div>
    </div>
</div>
@endsection