Add share dropdown: Facebook, WhatsApp, Telegram, Instagram, Copy Link

- Replaced single Facebook button with dropdown menu
- WhatsApp: shares via wa.me with structured text + link
- Telegram: shares via t.me with text + URL
- Instagram: copies link + opens Instagram
- Copy Link: copies URL with toast notification
- Each share includes: property type, price, rooms, area, link

app/property/[id]/PropertyDetail.js

@@ -42,7 +42,8 @@ import {
   Printer,
   Download,
   ArrowLeft,
-  LogIn
+  LogIn,
+  Copy
 } from 'lucide-react';
 import { getRentProperty, getSaleProperty, bookReservation, checkAvailability, getAvailableDateRanges } from '../../utils/api';
 import AuthService from '../../services/AuthService';
@@ -138,6 +139,7 @@ export default function PropertyDetailsPage() {
   const params = useParams();
   const [currentImage, setCurrentImage] = useState(0);
   const [showContact, setShowContact] = useState(false);
+  const [showShareMenu, setShowShareMenu] = useState(false);
   const [bookingDates, setBookingDates] = useState({ start: '', end: '' });
   const [selectedDuration, setSelectedDuration] = useState(1);
   const [property, setProperty] = useState(null);
@@ -394,29 +396,121 @@ export default function PropertyDetailsPage() {
               <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
                 <Heart className="w-5 h-5 text-gray-600" />
               </button>
-              <button
+              {/* Share Dropdown */}
-                onClick={() => {
+              <div className="relative">
-                  const typeLabel = property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت';
+                <button
-                  const priceLabel = `${formatCurrency(property.price)} / ${property.priceUnit === 'daily' ? 'يوم' : 'شهر'}`;
+                  onClick={() => setShowShareMenu(!showShareMenu)}
-                  const lines = [
+                  className="p-2 hover:bg-gray-100 rounded-full transition-colors flex items-center gap-1"
-                    `🏠 ${typeLabel} مفروشة في ${property.location?.address || ''}`,
+                  title="مشاركة"
-                    `💰 ${priceLabel}`,
+                >
-                    `🛏️ ${property.bedrooms} غرف نوم | 🚿 ${property.bathrooms} حمامات | 📐 ${property.area} م²`,
+                  <Share2 className="w-5 h-5 text-gray-500" />
-                    property.description ? `📝 ${property.description.substring(0, 80)}...` : '',
+                </button>
-                    '',
+
-                    '🔥 احجز الآن على SweetHome',
+                {showShareMenu && (
-                  ].filter(Boolean);
+                  <>
-                  const quote = encodeURIComponent(lines.join('\n'));
+                    <div className="fixed inset-0 z-40" onClick={() => setShowShareMenu(false)} />
-                  const url = encodeURIComponent(window.location.href);
+                    <div className="absolute left-0 top-full mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50">
-                  window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${quote}`, '_blank', 'width=600,height=400');
+                      <div className="p-2 space-y-1">
-                }}
+                        {/* Facebook */}
-                className="p-2 hover:bg-blue-50 rounded-full transition-colors flex items-center gap-1"
+                        <button
-                title="مشاركة على فيسبوك"
+                          onClick={() => {
-              >
+                            const typeLabel = property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت';
-                <svg className="w-5 h-5 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+                            const priceLabel = `${formatCurrency(property.price)} / ${property.priceUnit === 'daily' ? 'يوم' : 'شهر'}`;
-                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                            const lines = [
-                </svg>
+                              `🏠 ${typeLabel} مفروشة في ${property.location?.address || ''}`,
-              </button>
+                              `💰 ${priceLabel}`,
+                              `🛏️ ${property.bedrooms} غرف نوم | 🚿 ${property.bathrooms} حمامات | 📐 ${property.area} م²`,
+                              property.description ? `📝 ${property.description.substring(0, 80)}...` : '',
+                              '',
+                              '🔥 احجز الآن على SweetHome',
+                            ].filter(Boolean);
+                            const quote = encodeURIComponent(lines.join('\n'));
+                            const url = encodeURIComponent(window.location.href);
+                            window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${quote}`, '_blank', 'width=600,height=400');
+                            setShowShareMenu(false);
+                          }}
+                          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-blue-50 transition-colors"
+                        >
+                          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                            <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
+                          </div>
+                          <span className="text-sm font-medium text-gray-700">فيسبوك</span>
+                        </button>
+
+                        {/* WhatsApp */}
+                        <button
+                          onClick={() => {
+                            const typeLabel = property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت';
+                            const priceLabel = `${formatCurrency(property.price)} / ${property.priceUnit === 'daily' ? 'يوم' : 'شهر'}`;
+                            const text = encodeURIComponent(
+                              `🏠 ${typeLabel} في ${property.location?.address || ''}\n💰 ${priceLabel}\n🛏️ ${property.bedrooms} غرف | 📐 ${property.area} م²\n\n🔗 ${window.location.href}\n\n🔥 احجز على SweetHome`
+                            );
+                            window.open(`https://wa.me/?text=${text}`, '_blank');
+                            setShowShareMenu(false);
+                          }}
+                          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-green-50 transition-colors"
+                        >
+                          <div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
+                            <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
+                          </div>
+                          <span className="text-sm font-medium text-gray-700">واتساب</span>
+                        </button>
+
+                        {/* Telegram */}
+                        <button
+                          onClick={() => {
+                            const typeLabel = property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت';
+                            const priceLabel = `${formatCurrency(property.price)} / ${property.priceUnit === 'daily' ? 'يوم' : 'شهر'}`;
+                            const text = encodeURIComponent(
+                              `🏠 ${typeLabel} في ${property.location?.address || ''}\n💰 ${priceLabel}\n🛏️ ${property.bedrooms} غرف | 📐 ${property.area} م²\n\n🔥 احجز على SweetHome`
+                            );
+                            const url = encodeURIComponent(window.location.href);
+                            window.open(`https://t.me/share/url?url=${url}&text=${text}`, '_blank');
+                            setShowShareMenu(false);
+                          }}
+                          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-sky-50 transition-colors"
+                        >
+                          <div className="w-8 h-8 bg-sky-500 rounded-lg flex items-center justify-center">
+                            <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
+                          </div>
+                          <span className="text-sm font-medium text-gray-700">تيليجرام</span>
+                        </button>
+
+                        {/* Instagram (copy link) */}
+                        <button
+                          onClick={() => {
+                            navigator.clipboard.writeText(window.location.href);
+                            toast.success('تم نسخ الرابط! الصقه في انستغرام');
+                            window.open('https://www.instagram.com', '_blank');
+                            setShowShareMenu(false);
+                          }}
+                          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-pink-50 transition-colors"
+                        >
+                          <div className="w-8 h-8 bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400 rounded-lg flex items-center justify-center">
+                            <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
+                          </div>
+                          <span className="text-sm font-medium text-gray-700">انستغرام</span>
+                        </button>
+
+                        {/* Copy Link */}
+                        <button
+                          onClick={() => {
+                            navigator.clipboard.writeText(window.location.href);
+                            toast.success('تم نسخ الرابط');
+                            setShowShareMenu(false);
+                          }}
+                          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors"
+                        >
+                          <div className="w-8 h-8 bg-gray-500 rounded-lg flex items-center justify-center">
+                            <Copy className="w-4 h-4 text-white" />
+                          </div>
+                          <span className="text-sm font-medium text-gray-700">نسخ الرابط</span>
+                        </button>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
             </div>
           </div>
         </div>