//! Contact page component
//!
//! This page demonstrates the usage of the ContactForm component and provides
//! a complete contact page implementation with additional information and styling.

use crate::components::forms::ContactForm;
use leptos::prelude::*;
use leptos_meta::*;

#[component]
pub fn ContactPage() -> impl IntoView {
    view! {
        <Title text="Contact Us - Get in Touch"/>
        <Meta name="description" content="Contact us for questions, support, or feedback. We're here to help!"/>

        <div class="min-h-screen bg-gray-50 py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                // Header Section
                <div class="text-center mb-16">
                    <h1 class="text-4xl font-bold text-gray-900 sm:text-5xl mb-4">
                        "Get in Touch"
                    </h1>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                        "We'd love to hear from you. Whether you have a question about features, "
                        "pricing, need support, or anything else, our team is ready to answer all your questions."
                    </p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                    // Contact Information
                    <div class="lg:col-span-1">
                        <div class="bg-white rounded-lg shadow-lg p-8">
                            <h2 class="text-2xl font-bold text-gray-900 mb-6">
                                "Contact Information"
                            </h2>

                            <div class="space-y-6">
                                // Email
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                        </svg>
                                    </div>
                                    <div class="ml-4">
                                        <h3 class="text-lg font-medium text-gray-900">"Email"</h3>
                                        <p class="text-gray-600">"contact@yourapp.com"</p>
                                        <p class="text-sm text-gray-500">"We'll respond within 24 hours"</p>
                                    </div>
                                </div>

                                // Support
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 12l2.828-2.828m0 5.656L12 12m0 0l-2.828-2.828M12 12l2.828 2.828"/>
                                        </svg>
                                    </div>
                                    <div class="ml-4">
                                        <h3 class="text-lg font-medium text-gray-900">"Support"</h3>
                                        <p class="text-gray-600">"support@yourapp.com"</p>
                                        <p class="text-sm text-gray-500">"Technical support and assistance"</p>
                                    </div>
                                </div>

                                // Response Time
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    </div>
                                    <div class="ml-4">
                                        <h3 class="text-lg font-medium text-gray-900">"Response Time"</h3>
                                        <p class="text-gray-600">"Usually within 4 hours"</p>
                                        <p class="text-sm text-gray-500">"Business hours: Mon-Fri 9AM-5PM EST"</p>
                                    </div>
                                </div>
                            </div>

                            // Quick Links
                            <div class="mt-8 pt-8 border-t border-gray-200">
                                <h3 class="text-lg font-medium text-gray-900 mb-4">"Quick Links"</h3>
                                <div class="space-y-2">
                                    <a href="/docs" class="block text-blue-600 hover:text-blue-700 text-sm">
                                        "📚 Documentation"
                                    </a>
                                    <a href="/faq" class="block text-blue-600 hover:text-blue-700 text-sm">
                                        "❓ Frequently Asked Questions"
                                    </a>
                                    <a href="/support" class="block text-blue-600 hover:text-blue-700 text-sm">
                                        "🛠️ Support Center"
                                    </a>
                                    <a href="/status" class="block text-blue-600 hover:text-blue-700 text-sm">
                                        "📊 System Status"
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    // Contact Form
                    <div class="lg:col-span-2">
                        <div class="bg-white rounded-lg shadow-lg p-8">
                            <ContactForm
                                title="Send us a Message"
                                description="Fill out the form below and we'll get back to you as soon as possible."
                                recipient="contact@yourapp.com"
                                submit_text="Send Message"
                                show_success=true
                                reset_after_success=true
                                class=""
                            />
                        </div>
                    </div>
                </div>

                // FAQ Section
                <div class="mt-16">
                    <div class="bg-white rounded-lg shadow-lg p-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">
                            "Frequently Asked Questions"
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            // FAQ Item 1
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                    "How quickly do you respond to messages?"
                                </h3>
                                <p class="text-gray-600">
                                    "We aim to respond to all messages within 4 hours during business hours "
                                    "(Mon-Fri 9AM-5PM EST). For urgent matters, please mark your message as high priority."
                                </p>
                            </div>

                            // FAQ Item 2
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                    "What information should I include in my message?"
                                </h3>
                                <p class="text-gray-600">
                                    "Please include as much detail as possible about your question or issue. "
                                    "If it's a technical problem, include any error messages and steps to reproduce the issue."
                                </p>
                            </div>

                            // FAQ Item 3
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                    "Do you offer phone support?"
                                </h3>
                                <p class="text-gray-600">
                                    "Currently, we provide support primarily through email and our contact form. "
                                    "This allows us to better track and resolve issues while providing detailed responses."
                                </p>
                            </div>

                            // FAQ Item 4
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                    "Can I request new features?"
                                </h3>
                                <p class="text-gray-600">
                                    "Absolutely! We love hearing feature requests from our users. "
                                    "Please describe the feature you'd like and how it would help you."
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                // Alternative Contact Methods
                <div class="mt-16">
                    <div class="text-center">
                        <h2 class="text-2xl font-bold text-gray-900 mb-8">
                            "Other Ways to Reach Us"
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                            // Technical Support
                            <div class="bg-blue-50 rounded-lg p-6">
                                <div class="text-blue-600 mb-4">
                                    <svg class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                    "Technical Support"
                                </h3>
                                <p class="text-gray-600 mb-4">
                                    "For technical issues, bugs, or integration help"
                                </p>
                                <a
                                    href="/support"
                                    class="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
                                >
                                    "Open Support Ticket"
                                </a>
                            </div>

                            // Sales Inquiries
                            <div class="bg-green-50 rounded-lg p-6">
                                <div class="text-green-600 mb-4">
                                    <svg class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                    "Sales & Pricing"
                                </h3>
                                <p class="text-gray-600 mb-4">
                                    "Questions about pricing, plans, or enterprise solutions"
                                </p>
                                <a
                                    href="mailto:sales@yourapp.com"
                                    class="inline-block bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors"
                                >
                                    "Contact Sales"
                                </a>
                            </div>

                            // General Feedback
                            <div class="bg-purple-50 rounded-lg p-6">
                                <div class="text-purple-600 mb-4">
                                    <svg class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                    "Feedback & Suggestions"
                                </h3>
                                <p class="text-gray-600 mb-4">
                                    "Share your ideas, feedback, or feature requests"
                                </p>
                                <a
                                    href="mailto:feedback@yourapp.com"
                                    class="inline-block bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700 transition-colors"
                                >
                                    "Send Feedback"
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}