fix(web): wire up Nhắn tin button on agent profile page

The "Nhắn tin" (Message) button on the agent profile ContactCard had no
onClick handler. Now opens the InquiryModal using the agent's first
active listing, or falls back to SMS for agents with no listings.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/agents/agent-profile-client.tsx

@@ -12,6 +12,8 @@ import {
   MessageSquare,
 } from 'lucide-react';
 import Image from 'next/image';
+import * as React from 'react';
+import { InquiryModal } from '@/components/listings/inquiry-modal';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -34,6 +36,17 @@ interface AgentProfileClientProps {
 // ---------------------------------------------------------------------------
 
 export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps) {
+  const [inquiryOpen, setInquiryOpen] = React.useState(false);
+  const firstListing = agent.activeListings[0] ?? null;
+
+  const handleMessageClick = React.useCallback(() => {
+    if (firstListing) {
+      setInquiryOpen(true);
+    } else {
+      window.location.href = `sms:${agent.phone}`;
+    }
+  }, [firstListing, agent.phone]);
+
   return (
     <div className="mx-auto max-w-6xl px-4 py-6">
       {/* Breadcrumb */}
@@ -121,7 +134,7 @@ export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps)
 
         {/* CTA Sidebar (desktop) */}
         <div className="hidden shrink-0 sm:block">
-          <ContactCard agent={agent} />
+          <ContactCard agent={agent} onMessageClick={handleMessageClick} />
         </div>
       </div>
 
@@ -247,17 +260,27 @@ export function AgentProfileClient({ agent, reviews }: AgentProfileClientProps)
         {/* Sidebar (mobile + desktop fallback) */}
         <div className="space-y-6">
           <div className="sm:hidden">
-            <ContactCard agent={agent} />
+            <ContactCard agent={agent} onMessageClick={handleMessageClick} />
           </div>
           <div className="hidden sm:block lg:block">
             <div className="lg:sticky lg:top-20">
               <div className="hidden lg:block">
-                <ContactCard agent={agent} />
+                <ContactCard agent={agent} onMessageClick={handleMessageClick} />
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      {firstListing && (
+        <InquiryModal
+          open={inquiryOpen}
+          onOpenChange={setInquiryOpen}
+          listingId={firstListing.id}
+          listingTitle={firstListing.property.title}
+          sellerName={agent.fullName}
+        />
+      )}
     </div>
   );
 }
@@ -286,7 +309,7 @@ function StatPill({
   );
 }
 
-function ContactCard({ agent }: { agent: AgentPublicProfile }) {
+function ContactCard({ agent, onMessageClick }: { agent: AgentPublicProfile; onMessageClick: () => void }) {
   return (
     <Card>
       <CardHeader>
@@ -299,7 +322,7 @@ function ContactCard({ agent }: { agent: AgentPublicProfile }) {
             Gọi ngay
           </Button>
         </a>
-        <Button variant="outline" className="w-full gap-2">
+        <Button variant="outline" className="w-full gap-2" onClick={onMessageClick}>
           <MessageSquare className="h-4 w-4" />
           Nhắn tin
         </Button>