import { Mail, Clock, BookOpen, HelpCircle } from 'lucide-react';
import { ContactForm } from '@/components/contact/ContactForm';
import { ContactInfoCard } from '@/components/contact/ContactInfoCard';
import { ContactFAQ } from '@/components/contact/ContactFAQ';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Link } from 'react-router-dom';

export default function Contact() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-7xl">
      {/* Hero Section */}
      <div className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-bold mb-4">Get in Touch</h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
          Have questions or feedback? We're here to help. Send us a message and we'll respond as soon as possible.
        </p>
      </div>

      <div className="grid lg:grid-cols-3 gap-8 mb-12">
        {/* Contact Form - Main Content */}
        <div className="lg:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Send Us a Message</CardTitle>
              <CardDescription>
                Fill out the form below and we'll get back to you within 24-48 hours
              </CardDescription>
            </CardHeader>
            <CardContent>
              <ContactForm />
            </CardContent>
          </Card>
        </div>

        {/* Sidebar - Quick Info */}
        <div className="space-y-6">
          {/* Email Support */}
          <ContactInfoCard
            icon={Mail}
            title="Email Support"
            description="Direct contact"
            content={
              <a
                href="mailto:support@thrillwiki.com"
                className="text-primary hover:underline font-medium"
              >
                support@thrillwiki.com
              </a>
            }
          />

          {/* Response Time */}
          <ContactInfoCard
            icon={Clock}
            title="Response Time"
            description="Our commitment"
            content={
              <p className="text-sm">
                We typically respond within <strong>24-48 hours</strong> during business days.
                Complex inquiries may take longer.
              </p>
            }
          />

          {/* Documentation */}
          <ContactInfoCard
            icon={BookOpen}
            title="Documentation"
            description="Self-service help"
            content={
              <div className="space-y-2 text-sm">
                <Link
                  to="/submission-guidelines"
                  className="block text-primary hover:underline"
                >
                  Submission Guidelines
                </Link>
                <Link
                  to="/terms"
                  className="block text-primary hover:underline"
                >
                  Terms of Service
                </Link>
                <Link
                  to="/privacy"
                  className="block text-primary hover:underline"
                >
                  Privacy Policy
                </Link>
              </div>
            }
          />

          {/* Help Resources */}
          <ContactInfoCard
            icon={HelpCircle}
            title="Help Resources"
            description="Before you contact us"
            content={
              <p className="text-sm">
                Check out our FAQ section below for answers to common questions. Many issues can be resolved quickly by reviewing our documentation.
              </p>
            }
          />
        </div>
      </div>

      {/* FAQ Section */}
      <div className="mt-12">
        <ContactFAQ />
      </div>
    </div>
  );
}