@extends('layouts.app')

@section('title', 'Contact')

@section('content')
    <section class="contact-page-intro section-shell">
        <div class="container">
            <div class="section-head text-center" data-animate="fade-up">
                <span class="section-tag">Get in Touch</span>
                <h1>Contact Us</h1>
                <p>
                    Have questions about our Solar Power Plant, Heat Pump, or Water Treatment solutions? Get in touch &mdash; we'd love to help you.
                </p>
            </div>

            <div class="contact-info-grid" data-animate="fade-up">
                <article class="contact-info-card">
                    <span class="contact-info-icon">&#128205;</span>
                    <h3>Address</h3>
                    <p>T-3, A802, NX One, Tech Zone-IV, Greater Noida West, U.P. - 201306</p>
                </article>
                <article class="contact-info-card">
                    <span class="contact-info-icon">&#128222;</span>
                    <h3>Phone</h3>
                    <p><a href="tel:+919555872224">+91 9555872224</a></p>
                </article>
                <article class="contact-info-card">
                    <span class="contact-info-icon">&#9993;</span>
                    <h3>Email</h3>
                    <p><a href="mailto:info@sun24solarsolutions.com">info@sun24solarsolutions.com</a></p>
                </article>
            </div>
        </div>
    </section>

    <section class="section-shell">
        <div class="container">
            <div class="contact-form-wrap" data-animate="fade-up">
                @if (session('success'))
                    <div class="form-alert success-alert">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="form-alert error-alert">
                        <ul class="form-error-list">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('contact.submit') }}" method="POST" class="contact-form-grid" novalidate>
                    @csrf

                    <div class="form-field">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" placeholder="Enter your full name" required>
                    </div>

                    <div class="form-field">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="Enter your email address" required>
                    </div>

                    <div class="form-field">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" placeholder="Enter your phone number" required>
                    </div>

                    <div class="form-field">
                        <label for="product">Select Product</label>
                        <select id="product" name="product" required>
                            <option value="">Choose a solution</option>
                            <option value="Solar Power Plant" {{ old('product') === 'Solar Power Plant' ? 'selected' : '' }}>Solar Power Plant</option>
                            <option value="Heat Pump" {{ old('product') === 'Heat Pump' ? 'selected' : '' }}>Heat Pump</option>
                            <option value="Water Treatment" {{ old('product') === 'Water Treatment' ? 'selected' : '' }}>Water Treatment</option>
                        </select>
                    </div>

                    <div class="form-field full-span">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" rows="6" placeholder="Tell us about your requirement">{{ old('message') }}</textarea>
                    </div>

                    <div class="full-span">
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection