@extends('layouts.app')
@section('title', 'Contact Us | Saree E-Commerce Store')

@section('content')
<!-- BREADCRUMB -->
@include('layouts.breadcrumb', [
    'title' => 'Contact Us',
    'crumbs' => [
        ['name' => 'Home', 'url' => route('home')],
        ['name' => 'Contact Us', 'url' => '']
    ]
])

<!-- CONTACT SECTION START -->
<div class="contact-page-wrapper py-5" style="background: #FDFBFC;">
    <div class="ul-container">
        <!-- Section Header -->
        <div class="text-center mb-5">
            <span class="ul-section-sub-title text-uppercase" style="color: #EF2853; font-weight: 700; letter-spacing: 1.5px; font-size: 0.82rem;">Get In Touch</span>
            <h2 class="ul-section-title fw-bold mt-2" style="color: #2B1820; font-size: clamp(1.8rem, 2.5vw, 2.5rem);">We'd Love to Help You Find Your Perfect Saree</h2>
            <p class="text-muted mx-auto mt-2" style="max-width: 680px; font-size: 0.95rem; line-height: 1.6;">
                Whether you need bridal trousseau styling, custom blouse stitching, bulk wedding orders, or shipment tracking, our saree specialists are here to help.
            </p>
        </div>

        <!-- 4 Quick Contact Cards -->
        <div class="row row-cols-lg-4 row-cols-md-2 row-cols-1 g-4 mb-5">
            <!-- 1. Boutique Address -->
            <div class="col">
                <div class="contact-info-card h-100 p-4 rounded-4 bg-white border shadow-sm text-center d-flex flex-column align-items-center justify-content-center">
                    <div class="contact-icon-circle mb-3 d-flex align-items-center justify-content-center rounded-circle" style="width: 58px; height: 58px; background: #FDE8ED; color: #EF2853; font-size: 22px;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    </div>
                    <h5 class="fw-bold mb-2" style="color: #2B1820; font-size: 1.05rem;">Boutique Store</h5>
                    <p class="text-muted small mb-0" style="line-height: 1.5;">123, Demo Street, Main Textile Market, Chennai – 600001.</p>
                </div>
            </div>

            <!-- 2. Phone Support -->
            <div class="col">
                <div class="contact-info-card h-100 p-4 rounded-4 bg-white border shadow-sm text-center d-flex flex-column align-items-center justify-content-center">
                    <div class="contact-icon-circle mb-3 d-flex align-items-center justify-content-center rounded-circle" style="width: 58px; height: 58px; background: #FDE8ED; color: #EF2853; font-size: 22px;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    </div>
                    <h5 class="fw-bold mb-2" style="color: #2B1820; font-size: 1.05rem;">Direct Phone</h5>
                    <p class="mb-1"><a href="tel:+919876543210" class="text-decoration-none fw-semibold" style="color: #EF2853;">+91 98765 43210</a></p>
                    <span class="text-muted small">Mon - Sat: 9:00 AM - 8:00 PM</span>
                </div>
            </div>

            <!-- 3. WhatsApp Bridal Styling -->
            <div class="col">
                <div class="contact-info-card h-100 p-4 rounded-4 bg-white border shadow-sm text-center d-flex flex-column align-items-center justify-content-center">
                    <div class="contact-icon-circle mb-3 d-flex align-items-center justify-content-center rounded-circle" style="width: 58px; height: 58px; background: #E8F8EE; color: #25D366; font-size: 22px;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2zm.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.196 8.196 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24zm4.52 11.64c-.25-.13-1.47-.72-1.7-.81-.23-.08-.39-.13-.56.13-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.13-1.06-.39-2.02-1.25-.75-.67-1.26-1.5-1.41-1.75-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.13-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1 0 1.24.9 2.44 1.03 2.61.13.17 1.77 2.7 4.29 3.79.6.26 1.07.41 1.44.53.6.19 1.15.16 1.58.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.11-.23-.18-.48-.3z"/></svg>
                    </div>
                    <h5 class="fw-bold mb-2" style="color: #2B1820; font-size: 1.05rem;">WhatsApp Live</h5>
                    <p class="mb-1"><a href="https://wa.me/919876543210" target="_blank" class="text-decoration-none fw-semibold" style="color: #25D366;">Chat on WhatsApp</a></p>
                    <span class="text-muted small">Instant Saree Styling Advice</span>
                </div>
            </div>

            <!-- 4. Email Inquiries -->
            <div class="col">
                <div class="contact-info-card h-100 p-4 rounded-4 bg-white border shadow-sm text-center d-flex flex-column align-items-center justify-content-center">
                    <div class="contact-icon-circle mb-3 d-flex align-items-center justify-content-center rounded-circle" style="width: 58px; height: 58px; background: #FDE8ED; color: #EF2853; font-size: 22px;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    </div>
                    <h5 class="fw-bold mb-2" style="color: #2B1820; font-size: 1.05rem;">Email Support</h5>
                    <p class="mb-1"><a href="mailto:sareeecommerce@gmail.com" class="text-decoration-none fw-semibold" style="color: #EF2853; font-size: 0.88rem;">sareeecommerce@gmail.com</a></p>
                    <span class="text-muted small">Response in 2–4 Hours</span>
                </div>
            </div>
        </div>

        <!-- Main Form & Boutique Info Section -->
        <div class="row g-4 align-items-stretch mb-5">
            <!-- Left: Contact Inquiry Form (Connected to WhatsApp) -->
            <div class="col-lg-7 col-12">
                <div class="contact-form-box p-4 p-lg-5 bg-white rounded-4 shadow-sm border h-100" style="border-color: #F0E4E8 !important;">
                    <div class="mb-4">
                        <span class="badge px-3 py-2 rounded-pill mb-2" style="background: #E8F8EE; color: #128C7E; font-size: 0.78rem; font-weight: 600;">Direct WhatsApp Inquiry</span>
                        <h3 class="fw-bold" style="color: #2B1820; font-size: 1.5rem;">Have a Question or Custom Order?</h3>
                        <p class="text-muted small">Fill out the details below to chat directly with our saree concierge on WhatsApp.</p>
                    </div>

                    <form id="contactWhatsAppForm">
                        <div class="row g-3">
                            <div class="col-md-6 col-12">
                                <label for="contact_name" class="form-label fw-semibold" style="color: #2B1820; font-size: 0.88rem;">Your Full Name *</label>
                                <input type="text" class="form-control rounded-3 py-2 px-3 border" id="contact_name" name="name" placeholder="e.g. Priya Sundaram" required>
                            </div>

                            <div class="col-md-6 col-12">
                                <label for="contact_email" class="form-label fw-semibold" style="color: #2B1820; font-size: 0.88rem;">Email Address *</label>
                                <input type="email" class="form-control rounded-3 py-2 px-3 border" id="contact_email" name="email" placeholder="e.g. priya@example.com" required>
                            </div>

                            <div class="col-md-6 col-12">
                                <label for="contact_phone" class="form-label fw-semibold" style="color: #2B1820; font-size: 0.88rem;">Phone / WhatsApp Number</label>
                                <input type="tel" class="form-control rounded-3 py-2 px-3 border" id="contact_phone" name="phone" placeholder="e.g. +91 98765 43210">
                            </div>

                            <div class="col-md-6 col-12">
                                <label for="contact_subject" class="form-label fw-semibold" style="color: #2B1820; font-size: 0.88rem;">Inquiry Topic</label>
                                <select class="form-select rounded-3 py-2 px-3 border" id="contact_subject" name="subject">
                                    <option value="Bridal Silk Sarees Inquiry">Bridal Silk Sarees Inquiry</option>
                                    <option value="Custom Blouse Stitching / Pre-pleating">Custom Blouse Stitching / Pre-pleating</option>
                                    <option value="Handloom Cotton & Daily Wear">Handloom Cotton & Daily Wear</option>
                                    <option value="Bulk Wedding Order / Trousseau">Bulk Wedding Order / Trousseau</option>
                                    <option value="Order Tracking & Delivery">Order Tracking & Delivery</option>
                                    <option value="Returns & Exchanges">Returns & Exchanges</option>
                                    <option value="General Inquiry">General Inquiry</option>
                                </select>
                            </div>

                            <div class="col-12">
                                <label for="contact_message" class="form-label fw-semibold" style="color: #2B1820; font-size: 0.88rem;">Your Message *</label>
                                <textarea class="form-control rounded-3 py-2 px-3 border" id="contact_message" name="message" rows="4" placeholder="Tell us about the saree you're looking for, wedding dates, or any special requirements..." required></textarea>
                            </div>

                            <!-- Right-Aligned Compact WhatsApp Submit Button -->
                            <div class="col-12 mt-4 d-flex justify-content-end">
                                <button type="submit" class="whatsapp-submit-btn d-inline-flex align-items-center gap-2 px-4 py-2 rounded-pill fw-bold shadow-sm">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2zm.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.196 8.196 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24zm4.52 11.64c-.25-.13-1.47-.72-1.7-.81-.23-.08-.39-.13-.56.13-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.13-1.06-.39-2.02-1.25-.75-.67-1.26-1.5-1.41-1.75-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.13-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1 0 1.24.9 2.44 1.03 2.61.13.17 1.77 2.7 4.29 3.79.6.26 1.07.41 1.44.53.6.19 1.15.16 1.58.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.11-.23-.18-.48-.3z"/></svg>
                                    <span>Send on WhatsApp</span>
                                    <i class="flaticon-up-right-arrow ms-1" style="font-size: 11px;"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Right: Boutique Experience & Why Us -->
            <div class="col-lg-5 col-12">
                <div class="boutique-info-card p-4 p-lg-5 rounded-4 shadow-sm h-100 text-white d-flex flex-column justify-content-between" style="background: linear-gradient(145deg, #1C0F16 0%, #0C1829 100%); border: 1px solid rgba(255, 255, 255, 0.1);">
                    <div>
                        <span class="text-uppercase fw-bold" style="color: #00D2FF; letter-spacing: 1px; font-size: 0.82rem;">Authentic Saree House</span>
                        <h3 class="fw-bold text-white mt-2 mb-3" style="font-size: 1.5rem;">Visit Our Heritage Boutique</h3>
                        <p class="small" style="color: #94A3B8; line-height: 1.7;">
                            Experience the touch and drape of pure Kanjeevaram silks, Chettinad handloom cottons, and tissue sarees in person. Our expert draping consultants are ready to assist you.
                        </p>

                        <hr style="border-color: rgba(255, 255, 255, 0.15);" class="my-4">

                        <div class="d-flex flex-column gap-3">
                            <div class="d-flex align-items-start gap-3">
                                <div class="p-2 rounded-3" style="background: rgba(255,255,255,0.08); color: #00D2FF;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                                </div>
                                <div>
                                    <h6 class="text-white fw-bold mb-0" style="font-size: 0.95rem;">100% Silk Mark Certified</h6>
                                    <span class="small" style="color: #94A3B8;">Govt. certified pure natural mulberry silks.</span>
                                </div>
                            </div>

                            <div class="d-flex align-items-start gap-3">
                                <div class="p-2 rounded-3" style="background: rgba(255,255,255,0.08); color: #00D2FF;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
                                </div>
                                <div>
                                    <h6 class="text-white fw-bold mb-0" style="font-size: 0.95rem;">Free Shipping in India</h6>
                                    <span class="small" style="color: #94A3B8;">Insured express delivery across all pin codes.</span>
                                </div>
                            </div>

                            <div class="d-flex align-items-start gap-3">
                                <div class="p-2 rounded-3" style="background: rgba(255,255,255,0.08); color: #00D2FF;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                                </div>
                                <div>
                                    <h6 class="text-white fw-bold mb-0" style="font-size: 0.95rem;">7-Day Easy Returns</h6>
                                    <span class="small" style="color: #94A3B8;">100% money-back guarantee on unstitched sarees.</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 pt-3 border-top" style="border-color: rgba(255, 255, 255, 0.15) !important;">
                        <a href="https://wa.me/919876543210" target="_blank" class="btn btn-success w-100 rounded-pill py-2 fw-bold d-flex align-items-center justify-content-center gap-2" style="background: #25D366; border: none;">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2zm.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.196 8.196 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24zm4.52 11.64c-.25-.13-1.47-.72-1.7-.81-.23-.08-.39-.13-.56.13-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.13-1.06-.39-2.02-1.25-.75-.67-1.26-1.5-1.41-1.75-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.13-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1 0 1.24.9 2.44 1.03 2.61.13.17 1.77 2.7 4.29 3.79.6.26 1.07.41 1.44.53.6.19 1.15.16 1.58.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.11-.23-.18-.48-.3z"/></svg>
                            Chat With Bridal Stylist on WhatsApp
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Google Map Section -->
        <div class="rounded-4 overflow-hidden shadow-sm border" style="border-color: #EEDBE2 !important;">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15546.73238914619!2d80.2707!3d13.0827!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a5265ea4f7d3361%3A0x6e61a70b6863d433!2sChennai!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin" width="100%" height="380" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
</div>
<!-- CONTACT SECTION END -->

<!-- CONTACT CUSTOM STYLES & WHATSAPP SCRIPT -->
<style>
    .contact-info-card {
        border-color: #F0E4E8 !important;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .contact-info-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 28px rgba(239, 40, 83, 0.12) !important;
        border-color: #EF2853 !important;
    }

    .contact-form-box input:focus,
    .contact-form-box textarea:focus,
    .contact-form-box select:focus {
        border-color: #EF2853 !important;
        box-shadow: 0 0 0 0.2rem rgba(239, 40, 83, 0.15) !important;
    }

    /* Upgraded WhatsApp Right-Aligned Submit Button */
    .whatsapp-submit-btn {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        color: #FFFFFF;
        border: none;
        font-size: 0.95rem;
        letter-spacing: 0.3px;
        padding: 12px 28px !important;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .whatsapp-submit-btn:hover {
        background: linear-gradient(135deg, #1EBE5D 0%, #0D7065 100%);
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35) !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const contactForm = document.getElementById('contactWhatsAppForm');
        if (contactForm) {
            contactForm.addEventListener('submit', function (e) {
                e.preventDefault();

                const name = document.getElementById('contact_name').value.trim();
                const email = document.getElementById('contact_email').value.trim();
                const phone = document.getElementById('contact_phone').value.trim();
                const subject = document.getElementById('contact_subject').value;
                const message = document.getElementById('contact_message').value.trim();

                let text = `*New Saree Inquiry from Website*\n`;
                text += `━━━━━━━━━━━━━━━━━━━━━\n`;
                text += `👤 *Name:* ${name}\n`;
                text += `📧 *Email:* ${email}\n`;
                if (phone) {
                    text += `📱 *Phone:* ${phone}\n`;
                }
                text += `🏷️ *Topic:* ${subject}\n`;
                text += `💬 *Message:* ${message}\n`;
                text += `━━━━━━━━━━━━━━━━━━━━━`;

                const whatsappUrl = `https://wa.me/919876543210?text=${encodeURIComponent(text)}`;
                window.open(whatsappUrl, '_blank');
            });
        }
    });
</script>
@endsection