@extends('layouts.app')

@section('content')
<div class="contact-page-wrapper">
    <div class="contact-hero">
        <h1>Contact Us</h1>
        <p>We're here to assist you with any questions about our jewelry, custom designs, or your order.</p>
    </div>

    <div class="contact-container">
        <!-- Contact Information -->
        <div class="contact-info">
            <h2>Get In Touch</h2>
            <p>Our dedicated team is available to provide you with a personalized experience.</p>
            
            <div class="info-item">
                <i data-lucide="map-pin"></i>
                <div>
                    <strong>Visit Our Showroom</strong>
                    <p>123 Diamond Avenue, Suite 100<br>New York, NY 10036</p>
                </div>
            </div>
            
            <div class="info-item">
                <i data-lucide="phone"></i>
                <div>
                    <strong>Call Us</strong>
                    <p>+1 (800) 123-4567<br><small>Mon-Fri: 9am - 6pm EST</small></p>
                </div>
            </div>
            
            <div class="info-item">
                <i data-lucide="mail"></i>
                <div>
                    <strong>Email Us</strong>
                    <p>support@arjoni.com<br><small>We aim to reply within 24 hours.</small></p>
                </div>
            </div>
        </div>

        <!-- Contact Form -->
        <div class="contact-form-section">
            <h2>Send a Message</h2>
            @if(session('success'))
                <div class="alert-success" style="background:#e6f6eb; color:#2b7042; padding:15px; border-radius:4px; margin-bottom:20px; display:flex; align-items:center; gap:10px;">
                    <i data-lucide="check-circle"></i> {{ session('success') }}
                </div>
            @endif

            <form action="{{ route('contact.submit') }}" method="POST" class="contact-form">
                @csrf
                <div class="form-group">
                    <label for="name">Full Name *</label>
                    <input type="text" name="name" id="name" required value="{{ old('name') }}">
                    @error('name') <span class="error-text" style="color:red; font-size:12px;">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label for="email">Email Address *</label>
                    <input type="email" name="email" id="email" required value="{{ old('email') }}">
                    @error('email') <span class="error-text" style="color:red; font-size:12px;">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label for="subject">Subject</label>
                    <input type="text" name="subject" id="subject" value="{{ old('subject') }}">
                </div>

                <div class="form-group">
                    <label for="message">Message *</label>
                    <textarea name="message" id="message" rows="5" required>{{ old('message') }}</textarea>
                    @error('message') <span class="error-text" style="color:red; font-size:12px;">{{ $message }}</span> @enderror
                </div>

                <button type="submit" class="btn-primary" style="width: 100%; margin-top: 10px; padding: 15px; background: #1a252f; color: #fff; border:none; cursor:pointer;">Send Message</button>
            </form>
        </div>
    </div>
</div>

<style>
    .contact-page-wrapper {
        background: #fdfdfd;
        padding-bottom: 80px;
    }
    .contact-hero {
        background: #f5f5f5;
        text-align: center;
        padding: 80px 20px;
        margin-bottom: 60px;
    }
    .contact-hero h1 {
        font-family: 'Cinzel', serif;
        font-size: 36px;
        letter-spacing: 2px;
        margin-bottom: 15px;
        color: #1a252f;
    }
    .contact-hero p {
        color: #666;
        max-width: 600px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.6;
    }

    .contact-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }

    .contact-info h2, .contact-form-section h2 {
        font-family: 'Cinzel', serif;
        font-size: 24px;
        margin-bottom: 20px;
        color: #1a252f;
    }

    .contact-info p {
        color: #555;
        line-height: 1.6;
        margin-bottom: 40px;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 30px;
    }
    .info-item i {
        color: #1a252f;
        margin-top: 3px;
    }
    .info-item strong {
        display: block;
        font-size: 16px;
        color: #1a252f;
        margin-bottom: 5px;
        font-weight: 600;
    }
    .info-item p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

    .contact-form {
        background: #fff;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        border-radius: 4px;
    }

    .form-group {
        margin-bottom: 20px;
    }
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #1a252f;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    .form-group input, .form-group textarea {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        transition: border-color 0.3s;
        box-sizing: border-box;
    }
    .form-group input:focus, .form-group textarea:focus {
        border-color: #1a252f;
        outline: none;
    }
</style>
@endsection