import Container from '@/components/frontend/Container'
import ContactHero from '@/components/frontend/contact/ContactHero'
import ContactInfo from '@/components/frontend/contact/ContactInfo'
import ContactForm from '@/components/frontend/contact/ContactForm'
import ContactMap from '@/components/frontend/contact/ContactMap'
import ContactFAQ from '@/components/frontend/contact/ContactFAQ'

export const metadata = {
  title: 'Contact Us - DesiCart.pk | Get in Touch',
  description: 'Have questions? Contact DesiCart.pk customer support. We\'re here to help with your grocery delivery needs in Lahore.',
}

const SUBJECTS = ['order', 'delivery', 'product', 'feedback', 'other']

interface ContactPageProps {
  searchParams: Promise<{ subject?: string; order?: string; request?: string }>
}

// Deep-linked from an order's detail page ("Request cancellation" / "Request
// return" / "Need help?") so the customer lands on a form that already names
// the order — the message arrives in the admin Contact Messages inbox.
export default async function ContactPage({ searchParams }: ContactPageProps) {
  const sp = await searchParams
  const prefill = {
    subject: sp.subject && SUBJECTS.includes(sp.subject) ? sp.subject : '',
    // Order numbers look like ORD-20260918-34F64E — reject anything else so a
    // crafted link can't inject arbitrary text into the form.
    orderNumber: sp.order && /^[A-Za-z0-9-]{3,40}$/.test(sp.order) ? sp.order : '',
    requestType: sp.request === 'cancel' || sp.request === 'return' ? sp.request : '',
  }

  return (
    <>
      <ContactHero />
      
      <Container>
        {/* Contact Info Cards */}
        <div className="mt-8">
          <ContactInfo />
        </div>

        {/* Contact Form & Map */}
        <div className="grid lg:grid-cols-2 gap-8 my-12">
          <ContactForm prefill={prefill} />
          <ContactMap />
        </div>

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