feat: Implement contact page and backend

src/App.tsx

@@ -43,6 +43,7 @@ const BlogPost = lazy(() => import("./pages/BlogPost"));
 const Terms = lazy(() => import("./pages/Terms"));
 const Privacy = lazy(() => import("./pages/Privacy"));
 const SubmissionGuidelines = lazy(() => import("./pages/SubmissionGuidelines"));
+const Contact = lazy(() => import("./pages/Contact"));
 
 // Admin routes (lazy-loaded - heavy bundle)
 const AdminDashboard = lazy(() => import("./pages/AdminDashboard"));
@@ -52,6 +53,7 @@ const AdminSystemLog = lazy(() => import("./pages/AdminSystemLog"));
 const AdminUsers = lazy(() => import("./pages/AdminUsers"));
 const AdminBlog = lazy(() => import("./pages/AdminBlog"));
 const AdminSettings = lazy(() => import("./pages/AdminSettings"));
+const AdminContact = lazy(() => import("./pages/admin/AdminContact"));
 
 // User routes (lazy-loaded)
 const Profile = lazy(() => import("./pages/Profile"));

src/components/contact/ContactFAQ.tsx

@@ -0,0 +1,104 @@
+import { Link } from 'react-router-dom';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+
+export function ContactFAQ() {
+  const faqs = [
+    {
+      question: 'How do I submit a new park or ride?',
+      answer: (
+        <>
+          You can submit new parks and rides through our submission system. Simply navigate to the{' '}
+          <Link to="/parks" className="text-primary hover:underline">
+            Parks
+          </Link>{' '}
+          or{' '}
+          <Link to="/rides" className="text-primary hover:underline">
+            Rides
+          </Link>{' '}
+          page and click the "Add" button. All submissions go through our moderation queue to ensure quality and accuracy.
+        </>
+      ),
+    },
+    {
+      question: 'How long does moderation take?',
+      answer:
+        'Most submissions are reviewed within 24-48 hours. Complex submissions or those requiring additional verification may take slightly longer. You can track the status of your submissions in your profile.',
+    },
+    {
+      question: 'Can I edit my submissions?',
+      answer:
+        'Yes! You can edit any information you\'ve submitted. All edits also go through moderation to maintain data quality. We track all changes in our version history system.',
+    },
+    {
+      question: 'How do I report incorrect information?',
+      answer: (
+        <>
+          If you notice incorrect information, you can either submit an edit with the correct data or contact us using the form above with category "Report an Issue". Please include the page URL and describe what needs to be corrected.
+        </>
+      ),
+    },
+    {
+      question: 'What if I forgot my password?',
+      answer: (
+        <>
+          Use the "Forgot Password" link on the{' '}
+          <Link to="/auth" className="text-primary hover:underline">
+            login page
+          </Link>
+          . We'll send you a password reset link via email. If you don't receive it, check your spam folder or contact us for assistance.
+        </>
+      ),
+    },
+    {
+      question: 'How do I delete my account?',
+      answer: (
+        <>
+          You can request account deletion from your{' '}
+          <Link to="/settings" className="text-primary hover:underline">
+            Settings page
+          </Link>
+          . For security, we require confirmation before processing deletion requests. Please note that some anonymized data (like submissions) may be retained for database integrity.
+        </>
+      ),
+    },
+    {
+      question: 'Do you have a community Discord or forum?',
+      answer:
+        'We\'re planning to launch community features soon! For now, you can connect with other enthusiasts through reviews and comments on park and ride pages.',
+    },
+    {
+      question: 'Can I contribute photos?',
+      answer:
+        'Absolutely! You can upload photos to any park or ride page. Photos go through moderation and must follow our content guidelines. High-quality photos are greatly appreciated!',
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-2xl font-bold mb-2">Frequently Asked Questions</h2>
+        <p className="text-muted-foreground">
+          Find answers to common questions. If you don't see what you're looking for, feel free to contact us.
+        </p>
+      </div>
+
+      <Accordion type="single" collapsible className="w-full">
+        {faqs.map((faq, index) => (
+          <AccordionItem key={index} value={`item-${index}`}>
+            <AccordionTrigger className="text-left">
+              {faq.question}
+            </AccordionTrigger>
+            <AccordionContent className="text-muted-foreground">
+              {faq.answer}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

src/components/contact/ContactForm.tsx

@@ -0,0 +1,308 @@
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Send } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha';
+import { supabase } from '@/integrations/supabase/client';
+import { handleError, handleSuccess } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
+import { contactFormSchema, contactCategories, type ContactFormData } from '@/lib/contactValidation';
+import { useAuth } from '@/hooks/useAuth';
+
+export function ContactForm() {
+  const { user } = useAuth();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [captchaToken, setCaptchaToken] = useState<string>('');
+  const [captchaKey, setCaptchaKey] = useState(0);
+  const [userName, setUserName] = useState('');
+  const [userEmail, setUserEmail] = useState('');
+
+  // Fetch user profile if logged in
+  useEffect(() => {
+    const fetchUserProfile = async () => {
+      if (user) {
+        setUserEmail(user.email || '');
+        
+        const { data: profile } = await supabase
+          .from('profiles')
+          .select('display_name, username')
+          .eq('user_id', user.id)
+          .single();
+        
+        if (profile) {
+          setUserName(profile.display_name || profile.username || '');
+        }
+      }
+    };
+    
+    fetchUserProfile();
+  }, [user]);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm<ContactFormData>({
+    resolver: zodResolver(contactFormSchema),
+    defaultValues: {
+      name: userName,
+      email: userEmail,
+      subject: '',
+      category: 'general',
+      message: '',
+      captchaToken: '',
+    },
+  });
+
+  // Update form when user data loads
+  useEffect(() => {
+    if (userName) {
+      setValue('name', userName);
+    }
+    if (userEmail) {
+      setValue('email', userEmail);
+    }
+  }, [userName, userEmail, setValue]);
+
+  const onCaptchaSuccess = (token: string) => {
+    setCaptchaToken(token);
+    setValue('captchaToken', token);
+  };
+
+  const onCaptchaError = () => {
+    setCaptchaToken('');
+    setValue('captchaToken', '');
+    handleError(
+      new Error('CAPTCHA verification failed'),
+      { action: 'verify_captcha' }
+    );
+  };
+
+  const onCaptchaExpire = () => {
+    setCaptchaToken('');
+    setValue('captchaToken', '');
+  };
+
+  const onSubmit = async (data: ContactFormData) => {
+    if (!captchaToken) {
+      handleError(
+        new Error('Please complete the CAPTCHA'),
+        { action: 'submit_contact_form' }
+      );
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      logger.info('Submitting contact form', { category: data.category });
+
+      const { data: result, error } = await supabase.functions.invoke(
+        'send-contact-message',
+        {
+          body: {
+            name: data.name,
+            email: data.email,
+            subject: data.subject,
+            message: data.message,
+            category: data.category,
+            captchaToken: data.captchaToken,
+          },
+        }
+      );
+
+      if (error) {
+        throw error;
+      }
+
+      handleSuccess(
+        'Message Sent!',
+        "Thank you for contacting us. We'll respond within 24-48 hours."
+      );
+
+      // Reset form
+      reset({
+        name: userName,
+        email: userEmail,
+        subject: '',
+        category: 'general',
+        message: '',
+        captchaToken: '',
+      });
+
+      // Reset CAPTCHA
+      setCaptchaToken('');
+      setCaptchaKey((prev) => prev + 1);
+
+      logger.info('Contact form submitted successfully', {
+        submissionId: result?.submissionId,
+      });
+    } catch (error) {
+      logger.error('Failed to submit contact form', {
+        error: error instanceof Error ? error.message : String(error),
+      });
+      handleError(error, {
+        action: 'submit_contact_form',
+        metadata: { category: data.category },
+      });
+
+      // Reset CAPTCHA on error
+      setCaptchaToken('');
+      setCaptchaKey((prev) => prev + 1);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      {/* Name */}
+      <div className="space-y-2">
+        <Label htmlFor="name">Name *</Label>
+        <Input
+          id="name"
+          {...register('name')}
+          placeholder="Your name"
+          disabled={isSubmitting}
+          className={errors.name ? 'border-destructive' : ''}
+        />
+        {errors.name && (
+          <p className="text-sm text-destructive">{errors.name.message}</p>
+        )}
+      </div>
+
+      {/* Email */}
+      <div className="space-y-2">
+        <Label htmlFor="email">Email *</Label>
+        <Input
+          id="email"
+          type="email"
+          {...register('email')}
+          placeholder="your.email@example.com"
+          disabled={isSubmitting}
+          className={errors.email ? 'border-destructive' : ''}
+        />
+        {errors.email && (
+          <p className="text-sm text-destructive">{errors.email.message}</p>
+        )}
+      </div>
+
+      {/* Category */}
+      <div className="space-y-2">
+        <Label htmlFor="category">Category *</Label>
+        <Select
+          value={watch('category')}
+          onValueChange={(value) =>
+            setValue('category', value as ContactFormData['category'])
+          }
+          disabled={isSubmitting}
+        >
+          <SelectTrigger className={errors.category ? 'border-destructive' : ''}>
+            <SelectValue placeholder="Select a category" />
+          </SelectTrigger>
+          <SelectContent>
+            {contactCategories.map((cat) => (
+              <SelectItem key={cat.value} value={cat.value}>
+                {cat.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {errors.category && (
+          <p className="text-sm text-destructive">{errors.category.message}</p>
+        )}
+      </div>
+
+      {/* Subject */}
+      <div className="space-y-2">
+        <Label htmlFor="subject">Subject *</Label>
+        <Input
+          id="subject"
+          {...register('subject')}
+          placeholder="Brief description of your inquiry"
+          disabled={isSubmitting}
+          className={errors.subject ? 'border-destructive' : ''}
+        />
+        {errors.subject && (
+          <p className="text-sm text-destructive">{errors.subject.message}</p>
+        )}
+      </div>
+
+      {/* Message */}
+      <div className="space-y-2">
+        <Label htmlFor="message">Message *</Label>
+        <Textarea
+          id="message"
+          {...register('message')}
+          placeholder="Please provide details about your inquiry..."
+          rows={6}
+          disabled={isSubmitting}
+          className={errors.message ? 'border-destructive' : ''}
+        />
+        <div className="flex justify-between items-center">
+          {errors.message && (
+            <p className="text-sm text-destructive">{errors.message.message}</p>
+          )}
+          <p className="text-sm text-muted-foreground ml-auto">
+            {watch('message')?.length || 0} / 2000
+          </p>
+        </div>
+      </div>
+
+      {/* CAPTCHA */}
+      <div className="space-y-2">
+        <TurnstileCaptcha
+          key={captchaKey}
+          onSuccess={onCaptchaSuccess}
+          onError={onCaptchaError}
+          onExpire={onCaptchaExpire}
+          theme="auto"
+          size="normal"
+        />
+        {errors.captchaToken && (
+          <p className="text-sm text-destructive">
+            {errors.captchaToken.message}
+          </p>
+        )}
+      </div>
+
+      {/* Submit Button */}
+      <Button
+        type="submit"
+        size="lg"
+        disabled={isSubmitting || !captchaToken}
+        className="w-full"
+      >
+        {isSubmitting ? (
+          <>
+            <span className="animate-spin mr-2">⏳</span>
+            Sending...
+          </>
+        ) : (
+          <>
+            <Send className="mr-2 h-4 w-4" />
+            Send Message
+          </>
+        )}
+      </Button>
+
+      <p className="text-sm text-muted-foreground text-center">
+        We typically respond within 24-48 hours
+      </p>
+    </form>
+  );
+}

src/components/contact/ContactInfoCard.tsx

@@ -0,0 +1,28 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { LucideIcon } from 'lucide-react';
+
+interface ContactInfoCardProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  content: React.ReactNode;
+}
+
+export function ContactInfoCard({ icon: Icon, title, description, content }: ContactInfoCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-primary/10">
+            <Icon className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <CardTitle className="text-base">{title}</CardTitle>
+            <CardDescription className="text-sm">{description}</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>{content}</CardContent>
+    </Card>
+  );
+}

src/components/layout/Footer.tsx

@@ -9,6 +9,12 @@ export function Footer() {
             © {new Date().getFullYear()} ThrillWiki. All rights reserved.
           </div>
           <div className="flex items-center gap-4">
+            <Link 
+              to="/contact" 
+              className="hover:text-foreground transition-colors"
+            >
+              Contact
+            </Link>
             <Link 
               to="/terms" 
               className="hover:text-foreground transition-colors"

src/integrations/supabase/types.ts

@@ -441,6 +441,84 @@ export type Database = {
           },
         ]
       }
+      contact_rate_limits: {
+        Row: {
+          email: string
+          last_submission_at: string
+          submission_count: number
+          window_start: string
+        }
+        Insert: {
+          email: string
+          last_submission_at?: string
+          submission_count?: number
+          window_start?: string
+        }
+        Update: {
+          email?: string
+          last_submission_at?: string
+          submission_count?: number
+          window_start?: string
+        }
+        Relationships: []
+      }
+      contact_submissions: {
+        Row: {
+          admin_notes: string | null
+          assigned_to: string | null
+          category: string
+          created_at: string
+          email: string
+          id: string
+          ip_address_hash: string | null
+          message: string
+          name: string
+          resolved_at: string | null
+          resolved_by: string | null
+          status: string
+          subject: string
+          updated_at: string
+          user_agent: string | null
+          user_id: string | null
+        }
+        Insert: {
+          admin_notes?: string | null
+          assigned_to?: string | null
+          category: string
+          created_at?: string
+          email: string
+          id?: string
+          ip_address_hash?: string | null
+          message: string
+          name: string
+          resolved_at?: string | null
+          resolved_by?: string | null
+          status?: string
+          subject: string
+          updated_at?: string
+          user_agent?: string | null
+          user_id?: string | null
+        }
+        Update: {
+          admin_notes?: string | null
+          assigned_to?: string | null
+          category?: string
+          created_at?: string
+          email?: string
+          id?: string
+          ip_address_hash?: string | null
+          message?: string
+          name?: string
+          resolved_at?: string | null
+          resolved_by?: string | null
+          status?: string
+          subject?: string
+          updated_at?: string
+          user_agent?: string | null
+          user_id?: string | null
+        }
+        Relationships: []
+      }
       content_submissions: {
         Row: {
           approval_mode: string | null

src/lib/contactValidation.ts

@@ -0,0 +1,46 @@
+import { z } from 'zod';
+
+export const contactCategories = [
+  { value: 'general', label: 'General Inquiry' },
+  { value: 'moderation', label: 'Moderation Questions' },
+  { value: 'technical', label: 'Technical Support' },
+  { value: 'account', label: 'Account Issues' },
+  { value: 'partnership', label: 'Partnership/Business' },
+  { value: 'report', label: 'Report an Issue' },
+  { value: 'other', label: 'Other' },
+] as const;
+
+export const contactFormSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters'),
+  email: z
+    .string()
+    .trim()
+    .email('Invalid email address')
+    .max(255, 'Email must be less than 255 characters'),
+  subject: z
+    .string()
+    .trim()
+    .min(5, 'Subject must be at least 5 characters')
+    .max(200, 'Subject must be less than 200 characters'),
+  category: z.string()
+    .refine(
+      (val) => ['general', 'moderation', 'technical', 'account', 'partnership', 'report', 'other'].includes(val),
+      { message: 'Please select a valid category' }
+    ),
+  message: z
+    .string()
+    .trim()
+    .min(20, 'Message must be at least 20 characters')
+    .max(2000, 'Message must be less than 2000 characters'),
+  captchaToken: z.string().min(1, 'Please complete the CAPTCHA'),
+});
+
+export type ContactFormData = z.infer<typeof contactFormSchema>;
+
+export interface ContactSubmission extends ContactFormData {
+  userId?: string;
+}

src/pages/Contact.tsx

@@ -0,0 +1,114 @@
+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>
+  );
+}

src/pages/admin/AdminContact.tsx

@@ -0,0 +1,457 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import {
+  Mail,
+  Clock,
+  CheckCircle2,
+  XCircle,
+  Filter,
+  Search,
+  ChevronDown,
+  AlertCircle,
+} from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { handleError, handleSuccess } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
+import { contactCategories } from '@/lib/contactValidation';
+
+interface ContactSubmission {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  user_id: string | null;
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  category: string;
+  status: 'pending' | 'in_progress' | 'resolved' | 'closed';
+  assigned_to: string | null;
+  admin_notes: string | null;
+  resolved_at: string | null;
+  resolved_by: string | null;
+}
+
+export default function AdminContact() {
+  const queryClient = useQueryClient();
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [categoryFilter, setCategoryFilter] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSubmission, setSelectedSubmission] = useState<ContactSubmission | null>(null);
+  const [adminNotes, setAdminNotes] = useState('');
+
+  // Fetch contact submissions
+  const { data: submissions, isLoading } = useQuery({
+    queryKey: ['admin-contact-submissions', statusFilter, categoryFilter, searchQuery],
+    queryFn: async () => {
+      let query = supabase
+        .from('contact_submissions')
+        .select('*')
+        .order('created_at', { ascending: false });
+
+      if (statusFilter !== 'all') {
+        query = query.eq('status', statusFilter);
+      }
+
+      if (categoryFilter !== 'all') {
+        query = query.eq('category', categoryFilter);
+      }
+
+      if (searchQuery) {
+        query = query.or(
+          `name.ilike.%${searchQuery}%,email.ilike.%${searchQuery}%,subject.ilike.%${searchQuery}%`
+        );
+      }
+
+      const { data, error } = await query;
+
+      if (error) {
+        logger.error('Failed to fetch contact submissions', { error: error.message });
+        throw error;
+      }
+
+      return data as ContactSubmission[];
+    },
+  });
+
+  // Update submission status
+  const updateStatusMutation = useMutation({
+    mutationFn: async ({
+      id,
+      status,
+      notes,
+    }: {
+      id: string;
+      status: string;
+      notes?: string;
+    }) => {
+      const updateData: Record<string, unknown> = { status };
+      
+      if (notes) {
+        updateData.admin_notes = notes;
+      }
+
+      if (status === 'resolved' || status === 'closed') {
+        const { data: { user } } = await supabase.auth.getUser();
+        updateData.resolved_at = new Date().toISOString();
+        updateData.resolved_by = user?.id;
+      }
+
+      const { error } = await supabase
+        .from('contact_submissions')
+        .update(updateData)
+        .eq('id', id);
+
+      if (error) throw error;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
+      handleSuccess('Status Updated', 'Contact submission status has been updated');
+      setSelectedSubmission(null);
+      setAdminNotes('');
+    },
+    onError: (error) => {
+      handleError(error, { action: 'update_contact_status' });
+    },
+  });
+
+  const handleUpdateStatus = (status: string) => {
+    if (!selectedSubmission) return;
+
+    updateStatusMutation.mutate({
+      id: selectedSubmission.id,
+      status,
+      notes: adminNotes || undefined,
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    const variants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+      pending: 'default',
+      in_progress: 'secondary',
+      resolved: 'outline',
+      closed: 'outline',
+    };
+
+    return (
+      <Badge variant={variants[status] || 'default'}>
+        {status.replace('_', ' ').toUpperCase()}
+      </Badge>
+    );
+  };
+
+  const getCategoryLabel = (category: string) => {
+    const cat = contactCategories.find((c) => c.value === category);
+    return cat?.label || category;
+  };
+
+  const stats = {
+    pending: submissions?.filter((s) => s.status === 'pending').length || 0,
+    inProgress: submissions?.filter((s) => s.status === 'in_progress').length || 0,
+    resolved: submissions?.filter((s) => s.status === 'resolved').length || 0,
+    total: submissions?.length || 0,
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-7xl">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold mb-2">Contact Submissions</h1>
+        <p className="text-muted-foreground">
+          Manage and respond to user contact form submissions
+        </p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardDescription>Pending</CardDescription>
+            <CardTitle className="text-3xl">{stats.pending}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-3">
+            <CardDescription>In Progress</CardDescription>
+            <CardTitle className="text-3xl">{stats.inProgress}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-3">
+            <CardDescription>Resolved</CardDescription>
+            <CardTitle className="text-3xl">{stats.resolved}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-3">
+            <CardDescription>Total</CardDescription>
+            <CardTitle className="text-3xl">{stats.total}</CardTitle>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {/* Search */}
+            <div className="space-y-2">
+              <Label>Search</Label>
+              <div className="relative">
+                <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Name, email, or subject..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+            </div>
+
+            {/* Status Filter */}
+            <div className="space-y-2">
+              <Label>Status</Label>
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Statuses</SelectItem>
+                  <SelectItem value="pending">Pending</SelectItem>
+                  <SelectItem value="in_progress">In Progress</SelectItem>
+                  <SelectItem value="resolved">Resolved</SelectItem>
+                  <SelectItem value="closed">Closed</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Category Filter */}
+            <div className="space-y-2">
+              <Label>Category</Label>
+              <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Categories</SelectItem>
+                  {contactCategories.map((cat) => (
+                    <SelectItem key={cat.value} value={cat.value}>
+                      {cat.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Submissions List */}
+      {isLoading ? (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground">Loading submissions...</p>
+        </div>
+      ) : submissions && submissions.length > 0 ? (
+        <div className="space-y-4">
+          {submissions.map((submission) => (
+            <Card
+              key={submission.id}
+              className="cursor-pointer hover:border-primary transition-colors"
+              onClick={() => {
+                setSelectedSubmission(submission);
+                setAdminNotes(submission.admin_notes || '');
+              }}
+            >
+              <CardContent className="p-6">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 space-y-2">
+                    <div className="flex items-center gap-3 flex-wrap">
+                      <h3 className="font-semibold text-lg">{submission.subject}</h3>
+                      {getStatusBadge(submission.status)}
+                      <Badge variant="outline">{getCategoryLabel(submission.category)}</Badge>
+                    </div>
+                    <div className="flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
+                      <span className="flex items-center gap-1">
+                        <Mail className="h-3 w-3" />
+                        {submission.name} ({submission.email})
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        {format(new Date(submission.created_at), 'MMM d, yyyy h:mm a')}
+                      </span>
+                    </div>
+                    <p className="text-sm line-clamp-2">{submission.message}</p>
+                  </div>
+                  <ChevronDown className="h-5 w-5 text-muted-foreground" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="py-12">
+            <div className="text-center">
+              <Mail className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+              <p className="text-muted-foreground">No submissions found</p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Submission Detail Dialog */}
+      <Dialog
+        open={!!selectedSubmission}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedSubmission(null);
+            setAdminNotes('');
+          }
+        }}
+      >
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          {selectedSubmission && (
+            <>
+              <DialogHeader>
+                <DialogTitle className="text-2xl">
+                  {selectedSubmission.subject}
+                </DialogTitle>
+                <DialogDescription>
+                  Submitted {format(new Date(selectedSubmission.created_at), 'PPpp')}
+                </DialogDescription>
+              </DialogHeader>
+
+              <div className="space-y-6">
+                {/* Sender Info */}
+                <div className="space-y-2">
+                  <Label>From</Label>
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{selectedSubmission.name}</span>
+                    <span className="text-muted-foreground">
+                      ({selectedSubmission.email})
+                    </span>
+                  </div>
+                </div>
+
+                {/* Category & Status */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>Category</Label>
+                    <div>{getCategoryLabel(selectedSubmission.category)}</div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Status</Label>
+                    <div>{getStatusBadge(selectedSubmission.status)}</div>
+                  </div>
+                </div>
+
+                {/* Message */}
+                <div className="space-y-2">
+                  <Label>Message</Label>
+                  <div className="p-4 bg-muted rounded-lg whitespace-pre-wrap">
+                    {selectedSubmission.message}
+                  </div>
+                </div>
+
+                {/* Existing Admin Notes */}
+                {selectedSubmission.admin_notes && (
+                  <div className="space-y-2">
+                    <Label>Previous Admin Notes</Label>
+                    <div className="p-4 bg-muted rounded-lg whitespace-pre-wrap">
+                      {selectedSubmission.admin_notes}
+                    </div>
+                  </div>
+                )}
+
+                {/* Admin Notes Input */}
+                <div className="space-y-2">
+                  <Label>Add/Update Admin Notes</Label>
+                  <Textarea
+                    value={adminNotes}
+                    onChange={(e) => setAdminNotes(e.target.value)}
+                    placeholder="Add internal notes about this submission..."
+                    rows={4}
+                  />
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-2 flex-wrap">
+                  <Button
+                    variant="secondary"
+                    onClick={() => handleUpdateStatus('in_progress')}
+                    disabled={
+                      updateStatusMutation.isPending ||
+                      selectedSubmission.status === 'in_progress'
+                    }
+                  >
+                    <Clock className="mr-2 h-4 w-4" />
+                    Mark In Progress
+                  </Button>
+                  <Button
+                    variant="default"
+                    onClick={() => handleUpdateStatus('resolved')}
+                    disabled={
+                      updateStatusMutation.isPending ||
+                      selectedSubmission.status === 'resolved'
+                    }
+                  >
+                    <CheckCircle2 className="mr-2 h-4 w-4" />
+                    Mark Resolved
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => handleUpdateStatus('closed')}
+                    disabled={
+                      updateStatusMutation.isPending ||
+                      selectedSubmission.status === 'closed'
+                    }
+                  >
+                    <XCircle className="mr-2 h-4 w-4" />
+                    Close
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    asChild
+                    className="ml-auto"
+                  >
+                    <a href={`mailto:${selectedSubmission.email}`}>
+                      <Mail className="mr-2 h-4 w-4" />
+                      Email Sender
+                    </a>
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}