681 lines
30 KiB
JavaScript
681 lines
30 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
import { useParams } from 'next/navigation';
|
||
import {
|
||
MapPin,
|
||
Bed,
|
||
Bath,
|
||
Square,
|
||
DollarSign,
|
||
Heart,
|
||
Share2,
|
||
Phone,
|
||
Mail,
|
||
MessageCircle,
|
||
Calendar,
|
||
Shield,
|
||
Star,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
Check,
|
||
X,
|
||
Wifi,
|
||
Car,
|
||
Coffee,
|
||
Wind,
|
||
Thermometer,
|
||
Lock,
|
||
Camera,
|
||
Home,
|
||
Building2,
|
||
Users,
|
||
Ruler,
|
||
CalendarDays,
|
||
Clock,
|
||
Award,
|
||
FileText,
|
||
Printer,
|
||
Download,
|
||
ArrowLeft
|
||
} from 'lucide-react';
|
||
|
||
export default function PropertyDetailsPage() {
|
||
const params = useParams();
|
||
const [currentImage, setCurrentImage] = useState(0);
|
||
const [showContact, setShowContact] = useState(false);
|
||
const [bookingDates, setBookingDates] = useState({ start: '', end: '' });
|
||
const [selectedDuration, setSelectedDuration] = useState(1);
|
||
const [property, setProperty] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
const propertiesData = {
|
||
1: {
|
||
id: 1,
|
||
title: 'فيلا فاخرة في المزة',
|
||
description: `تتميز هذه الفيلا الفاخرة بتصميمها العصري وموقعها المميز في أفضل أحياء دمشق. تم بناء الفيلا بأعلى المواصفات باستخدام أفضل المواد، مع مساحات واسعة وحديقة خاصة.
|
||
|
||
المميزات الرئيسية:
|
||
• موقع راقي وقريب من جميع الخدمات
|
||
• تصميم داخلي عصري مع أثاث فاخر
|
||
• إطلالة رائعة على المدينة
|
||
• خصوصية تامة وأمن على مدار الساعة
|
||
|
||
المساحات الداخلية:
|
||
• الطابق الأرضي: صالة استقبال كبيرة (80 م²)، مجلس رجال (40 م²)، مجلس نساء (35 م²)، مطبخ (25 م²)، غرفة طعام (30 م²)
|
||
• الطابق الأول: 5 غرف نوم ماستر مع حمامات خاصة (كل غرفة 35-45 م²)
|
||
• الطابق الثاني: غرفة معيشة عائلية (50 م²)، غرفة ترفيه (40 م²)، سطح مع إطلالة (100 م²)
|
||
|
||
الخدمات القريبة:
|
||
• مدارس وجامعات على بعد 5 دقائق
|
||
• مستشفيات ومراكز طبية
|
||
• مولات تجارية ومطاعم
|
||
• حدائق عامة ومسارات مشي`,
|
||
type: 'villa',
|
||
price: 500000,
|
||
priceUnit: 'daily',
|
||
location: {
|
||
city: 'دمشق',
|
||
district: 'المزة',
|
||
address: 'شارع المزة - فيلات غربية',
|
||
lat: 33.5,
|
||
lng: 36.3
|
||
},
|
||
bedrooms: 5,
|
||
bathrooms: 4,
|
||
area: 450,
|
||
features: [
|
||
{ name: 'مسبح', available: true, description: 'مسبح خاص بمساحة 40 م²' },
|
||
{ name: 'حديقة خاصة', available: true, description: 'حديقة بمساحة 200 م² مع نوافير' },
|
||
{ name: 'موقف سيارات', available: true, description: 'موقف يتسع لـ 4 سيارات' },
|
||
{ name: 'أمن 24/7', available: true, description: 'كاميرات مراقبة وحراسة' },
|
||
{ name: 'تدفئة مركزية', available: true, description: 'تدفئة مركزية لجميع الغرف' },
|
||
{ name: 'تكييف مركزي', available: true, description: 'تكييف مركزي في جميع الغرف' },
|
||
{ name: 'مطبخ مجهز', available: true, description: 'مطبخ أمريكي مجهز بالكامل' },
|
||
{ name: 'غرفة خادمة', available: true, description: 'غرفة خادمة مع حمام خاص' },
|
||
{ name: 'مصعد', available: false, description: 'قابل للتركيب' },
|
||
{ name: 'واي فاي', available: true, description: 'ألياف بصرية' }
|
||
],
|
||
images: [
|
||
'/villa1.jpg',
|
||
'/villa2.jpg',
|
||
'/villa3.jpg',
|
||
'/villa4.jpg',
|
||
'/villa5.jpg',
|
||
'/villa6.jpg'
|
||
],
|
||
status: 'available',
|
||
rating: 4.8,
|
||
reviews: 24,
|
||
reviewList: [
|
||
{ user: 'أحمد محمد', rating: 5, comment: 'فيلا رائعة ونظيفة، موقع ممتاز', date: '2024-01-15' },
|
||
{ user: 'سارة أحمد', rating: 5, comment: 'إقامة مريحة، خدمات ممتازة', date: '2024-01-10' },
|
||
{ user: 'خالد عمر', rating: 4, comment: 'مكان جميل ولكن السعر مرتفع قليلاً', date: '2023-12-20' }
|
||
],
|
||
owner: {
|
||
name: 'محمد الخالد',
|
||
phone: '0933111222',
|
||
email: 'mohamed@example.com',
|
||
rating: 4.9,
|
||
properties: 5,
|
||
memberSince: '2023',
|
||
responseRate: '98%',
|
||
responseTime: 'خلال ساعة'
|
||
},
|
||
nearby: [
|
||
{ type: 'مدرسة', distance: '500م' },
|
||
{ type: 'مستشفى', distance: '1كم' },
|
||
{ type: 'مول تجاري', distance: '2كم' },
|
||
{ type: 'مطعم', distance: '300م' },
|
||
{ type: 'جامعة', distance: '1.5كم' },
|
||
{ type: 'حديقة', distance: '800م' }
|
||
],
|
||
specifications: {
|
||
constructionYear: 2022,
|
||
floor: 'أرضي + 2',
|
||
parking: 4,
|
||
gardenArea: 200,
|
||
poolArea: 40,
|
||
furnished: true,
|
||
airConditioning: 'مركزي',
|
||
heating: 'مركزي',
|
||
electricity: '220V',
|
||
water: 'شبكة عامة'
|
||
},
|
||
rules: [
|
||
'لا يسمح بالحيوانات الأليفة',
|
||
'لا يسمح بالتدخين داخل الغرف',
|
||
'حفلات مسموحة بعد التنسيق',
|
||
'وقت المغادرة: 12:00 ظهراً'
|
||
]
|
||
},
|
||
2: {
|
||
id: 2,
|
||
title: 'شقة حديثة في الشهباء',
|
||
description: 'شقة عصرية في حي الشهباء الراقي بحلب. إطلالة رائعة وتشطيب فاخر.',
|
||
type: 'apartment',
|
||
price: 250000,
|
||
priceUnit: 'daily',
|
||
location: {
|
||
city: 'حلب',
|
||
district: 'الشهباء',
|
||
address: 'شارع النيل - بناء الرحاب',
|
||
lat: 36.2,
|
||
lng: 37.1
|
||
},
|
||
bedrooms: 3,
|
||
bathrooms: 2,
|
||
area: 180,
|
||
features: [
|
||
{ name: 'مطبخ مجهز', available: true, description: 'مطبخ أمريكي' },
|
||
{ name: 'بلكونة', available: true, description: 'بلكونة بمساحة 10 م²' },
|
||
{ name: 'موقف سيارات', available: true, description: 'موقف خاص' },
|
||
{ name: 'مصعد', available: true, description: 'مصعد حديث' }
|
||
],
|
||
images: ['/apartment1.jpg', '/apartment2.jpg'],
|
||
status: 'available',
|
||
rating: 4.5,
|
||
reviews: 12,
|
||
owner: {
|
||
name: 'أحمد حلبي',
|
||
phone: '0944222333',
|
||
email: 'ahmad@example.com',
|
||
rating: 4.7,
|
||
properties: 3,
|
||
memberSince: '2023'
|
||
},
|
||
nearby: [
|
||
{ type: 'مدرسة', distance: '300م' },
|
||
{ type: 'مستشفى', distance: '1.2كم' },
|
||
{ type: 'مول', distance: '500م' }
|
||
]
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
setLoading(true);
|
||
setTimeout(() => {
|
||
setProperty(propertiesData[params.id] || propertiesData[1]);
|
||
setLoading(false);
|
||
}, 500);
|
||
}, [params.id]);
|
||
|
||
const formatCurrency = (amount) => {
|
||
return amount?.toLocaleString() + ' ل.س';
|
||
};
|
||
|
||
const calculateTotalPrice = () => {
|
||
if (!property) return 0;
|
||
const days = bookingDates.start && bookingDates.end
|
||
? Math.ceil((new Date(bookingDates.end) - new Date(bookingDates.start)) / (1000 * 60 * 60 * 24))
|
||
: selectedDuration;
|
||
return property.price * (days > 0 ? days : 1);
|
||
};
|
||
|
||
const handleBooking = () => {
|
||
alert('تم إرسال طلب الحجز بنجاح. سيتم التواصل معك قريباً.');
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 border-4 border-gray-200 border-t-gray-800 rounded-full animate-spin mx-auto mb-4"></div>
|
||
<p className="text-gray-600">جاري تحميل تفاصيل العقار...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!property) {
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<Home className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-2">العقار غير موجود</h2>
|
||
<p className="text-gray-600 mb-4">لم نتمكن من العثور على العقار المطلوب</p>
|
||
<Link href="/properties" className="bg-gray-800 text-white px-6 py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors">
|
||
العودة إلى العقارات
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
<div className="bg-white border-b sticky top-16 z-40 shadow-sm">
|
||
<div className="container mx-auto px-4">
|
||
<div className="flex items-center justify-between h-16">
|
||
<Link href="/properties" className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors">
|
||
<ArrowLeft className="w-5 h-5" />
|
||
<span>العودة إلى العقارات</span>
|
||
</Link>
|
||
<div className="flex gap-2">
|
||
<button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
||
<Heart className="w-5 h-5 text-gray-600" />
|
||
</button>
|
||
<button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
||
<Share2 className="w-5 h-5 text-gray-600" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 py-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="mb-8"
|
||
>
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||
<div className="relative h-[500px] rounded-2xl overflow-hidden group bg-gray-100">
|
||
<Image
|
||
src={property.images[currentImage] || '/property-placeholder.jpg'}
|
||
alt={property.title}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
|
||
{property.images.length > 1 && (
|
||
<>
|
||
<button
|
||
onClick={() => setCurrentImage(prev => Math.max(0, prev - 1))}
|
||
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-white"
|
||
>
|
||
<ChevronLeft className="w-5 h-5" />
|
||
</button>
|
||
<button
|
||
onClick={() => setCurrentImage(prev => Math.min(property.images.length - 1, prev + 1))}
|
||
className="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-white"
|
||
>
|
||
<ChevronRight className="w-5 h-5" />
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
|
||
{property.images.map((_, idx) => (
|
||
<button
|
||
key={idx}
|
||
onClick={() => setCurrentImage(idx)}
|
||
className={`w-2 h-2 rounded-full transition-all ${
|
||
idx === currentImage ? 'bg-gray-800 w-4' : 'bg-white/70 hover:bg-white'
|
||
}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<div className="absolute bottom-4 right-4 bg-black/50 text-white px-3 py-1 rounded-full text-sm backdrop-blur-sm">
|
||
<Camera className="w-4 h-4 inline ml-1" />
|
||
{currentImage + 1} / {property.images.length}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{property.images.slice(1, 5).map((img, idx) => (
|
||
<div
|
||
key={idx}
|
||
onClick={() => setCurrentImage(idx + 1)}
|
||
className="relative h-[240px] rounded-2xl overflow-hidden cursor-pointer hover:opacity-90 transition-opacity bg-gray-100"
|
||
>
|
||
<Image src={img} alt={`${property.title} ${idx + 2}`} fill className="object-cover" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<div className="lg:col-span-2 space-y-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.1 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<div className="flex justify-between items-start mb-4">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-gray-900 mb-2">{property.title}</h1>
|
||
<div className="flex items-center gap-2 text-gray-500">
|
||
<MapPin className="w-5 h-5" />
|
||
<span>{property.location.address}</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-left">
|
||
<div className="text-3xl font-bold text-gray-900">{formatCurrency(property.price)}</div>
|
||
<div className="text-sm text-gray-500">/{property.priceUnit === 'daily' ? 'يوم' : 'شهر'}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-1">
|
||
<Star className="w-5 h-5 fill-gray-800 text-gray-800" />
|
||
<span className="font-bold text-gray-900">{property.rating}</span>
|
||
<span className="text-gray-500">({property.reviews} تقييم)</span>
|
||
</div>
|
||
<div className="w-px h-4 bg-gray-200" />
|
||
<span className={`font-medium ${
|
||
property.status === 'available' ? 'text-gray-800' : 'text-gray-500'
|
||
}`}>
|
||
{property.status === 'available' ? 'متاح للإيجار' : 'محجوز حالياً'}
|
||
</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<h2 className="text-xl font-bold mb-4 text-gray-900">المواصفات الرئيسية</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="text-center p-4 bg-gray-50 rounded-xl">
|
||
<Bed className="w-6 h-6 text-gray-700 mx-auto mb-2" />
|
||
<div className="font-bold text-gray-900">{property.bedrooms}</div>
|
||
<div className="text-sm text-gray-500">غرف نوم</div>
|
||
</div>
|
||
<div className="text-center p-4 bg-gray-50 rounded-xl">
|
||
<Bath className="w-6 h-6 text-gray-700 mx-auto mb-2" />
|
||
<div className="font-bold text-gray-900">{property.bathrooms}</div>
|
||
<div className="text-sm text-gray-500">حمامات</div>
|
||
</div>
|
||
<div className="text-center p-4 bg-gray-50 rounded-xl">
|
||
<Square className="w-6 h-6 text-gray-700 mx-auto mb-2" />
|
||
<div className="font-bold text-gray-900">{property.area}</div>
|
||
<div className="text-sm text-gray-500">م²</div>
|
||
</div>
|
||
<div className="text-center p-4 bg-gray-50 rounded-xl">
|
||
<Home className="w-6 h-6 text-gray-700 mx-auto mb-2" />
|
||
<div className="font-bold text-gray-900">
|
||
{property.type === 'villa' ? 'فيلا' :
|
||
property.type === 'apartment' ? 'شقة' : 'بيت'}
|
||
</div>
|
||
<div className="text-sm text-gray-500">نوع العقار</div>
|
||
</div>
|
||
</div>
|
||
|
||
{property.specifications && (
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
|
||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||
<Calendar className="w-4 h-4" />
|
||
<span>بناء: {property.specifications.constructionYear}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||
<Ruler className="w-4 h-4" />
|
||
<span>حديقة: {property.specifications.gardenArea} م²</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||
<Car className="w-4 h-4" />
|
||
<span>موقف: {property.specifications.parking}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||
<Wind className="w-4 h-4" />
|
||
<span>{property.specifications.airConditioning}</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.3 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<h2 className="text-xl font-bold mb-4 text-gray-900">وصف العقار</h2>
|
||
<p className="text-gray-600 whitespace-pre-line leading-relaxed">{property.description}</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.4 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<h2 className="text-xl font-bold mb-4 text-gray-900">المميزات والخدمات</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{property.features.map((feature, idx) => (
|
||
<div key={idx} className="flex items-start gap-3 p-3 bg-gray-50 rounded-xl">
|
||
<div className={`w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||
feature.available ? 'bg-gray-800 text-white' : 'bg-gray-200 text-gray-500'
|
||
}`}>
|
||
{feature.available ? (
|
||
<Check className="w-4 h-4" />
|
||
) : (
|
||
<X className="w-4 h-4" />
|
||
)}
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-2xl">{feature.icon}</span>
|
||
<span className={`font-medium ${feature.available ? 'text-gray-900' : 'text-gray-400'}`}>
|
||
{feature.name}
|
||
</span>
|
||
</div>
|
||
{feature.description && (
|
||
<p className={`text-sm mt-1 ${feature.available ? 'text-gray-500' : 'text-gray-400'}`}>
|
||
{feature.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.5 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<h2 className="text-xl font-bold mb-4 text-gray-900">القرب من الخدمات</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||
{property.nearby.map((item, idx) => (
|
||
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xl">{item.icon}</span>
|
||
<span className="text-gray-700">{item.type}</span>
|
||
</div>
|
||
<span className="font-medium text-gray-900">{item.distance}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{property.reviewList && property.reviewList.length > 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.6 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<h2 className="text-xl font-bold mb-4 text-gray-900">تقييمات المستأجرين</h2>
|
||
<div className="space-y-4">
|
||
{property.reviewList.map((review, idx) => (
|
||
<div key={idx} className="border-b border-gray-100 last:border-0 pb-4 last:pb-0">
|
||
<div className="flex justify-between items-start mb-2">
|
||
<div>
|
||
<span className="font-bold text-gray-900">{review.user}</span>
|
||
<div className="flex items-center gap-1 mt-1">
|
||
{[...Array(5)].map((_, i) => (
|
||
<Star key={i} className={`w-4 h-4 ${
|
||
i < review.rating ? 'fill-gray-800 text-gray-800' : 'text-gray-300'
|
||
}`} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
<span className="text-sm text-gray-500">{review.date}</span>
|
||
</div>
|
||
<p className="text-gray-600">{review.comment}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{property.rules && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.7 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<h2 className="text-xl font-bold mb-4 text-gray-900">قوانين المنزل</h2>
|
||
<ul className="space-y-2">
|
||
{property.rules.map((rule, idx) => (
|
||
<li key={idx} className="flex items-center gap-2 text-gray-600">
|
||
<div className="w-1.5 h-1.5 bg-gray-400 rounded-full" />
|
||
{rule}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</motion.div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<div className="sticky top-28">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 mb-6"
|
||
>
|
||
<h2 className="text-xl font-bold mb-4 text-gray-900">احجز هذا العقار</h2>
|
||
|
||
<div className="mb-4">
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">اختر المدة (أيام)</label>
|
||
<div className="flex gap-2">
|
||
{[1, 3, 7, 14, 30].map(days => (
|
||
<button
|
||
key={days}
|
||
onClick={() => setSelectedDuration(days)}
|
||
className={`flex-1 py-2 rounded-xl text-sm font-medium transition-colors ${
|
||
selectedDuration === days
|
||
? 'bg-gray-800 text-white'
|
||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||
}`}
|
||
>
|
||
{days}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4 mb-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">تاريخ البداية</label>
|
||
<input
|
||
type="date"
|
||
value={bookingDates.start}
|
||
onChange={(e) => setBookingDates({ ...bookingDates, start: e.target.value })}
|
||
className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">تاريخ النهاية</label>
|
||
<input
|
||
type="date"
|
||
value={bookingDates.end}
|
||
onChange={(e) => setBookingDates({ ...bookingDates, end: e.target.value })}
|
||
className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 p-4 rounded-xl mb-6">
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-gray-600">السعر لـ {selectedDuration} أيام</span>
|
||
<span className="font-bold text-gray-900">{formatCurrency(property.price * selectedDuration)}</span>
|
||
</div>
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-gray-600">سلفة ضمان</span>
|
||
<span className="font-bold text-gray-900">{formatCurrency(500000)}</span>
|
||
</div>
|
||
<div className="flex justify-between pt-2 border-t border-gray-200 font-bold">
|
||
<span className="text-gray-900">الإجمالي</span>
|
||
<span className="text-gray-900">{formatCurrency(property.price * selectedDuration + 500000)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={handleBooking}
|
||
className="w-full bg-gray-800 text-white py-4 rounded-xl font-bold text-lg hover:bg-gray-900 transition-colors mb-4"
|
||
>
|
||
تأكيد الحجز
|
||
</button>
|
||
|
||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||
<Shield className="w-4 h-4 text-gray-600" />
|
||
<span>الدفع آمن ومضمون. سلفة الضمان قابلة للاسترداد.</span>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
|
||
>
|
||
<h3 className="font-bold mb-4 text-gray-900">معلومات المالك</h3>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
|
||
<span className="text-xl font-bold text-gray-700">
|
||
{property.owner.name.charAt(0)}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-gray-900">{property.owner.name}</div>
|
||
<div className="flex items-center gap-1 text-sm text-gray-500">
|
||
<Star className="w-3 h-3 fill-gray-600 text-gray-600" />
|
||
<span>{property.owner.rating}</span>
|
||
<span>· {property.owner.properties} عقارات</span>
|
||
</div>
|
||
{property.owner.responseRate && (
|
||
<div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
|
||
<Clock className="w-3 h-3" />
|
||
<span>استجابة: {property.owner.responseRate}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{showContact ? (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center gap-2 p-3 bg-gray-50 rounded-xl">
|
||
<Phone className="w-4 h-4 text-gray-600" />
|
||
<span className="font-medium text-gray-900">{property.owner.phone}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 p-3 bg-gray-50 rounded-xl">
|
||
<Mail className="w-4 h-4 text-gray-600" />
|
||
<span className="font-medium text-gray-900">{property.owner.email}</span>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<button
|
||
onClick={() => setShowContact(true)}
|
||
className="w-full bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors flex items-center justify-center gap-2"
|
||
>
|
||
<Phone className="w-5 h-5" />
|
||
عرض معلومات الاتصال
|
||
</button>
|
||
)}
|
||
|
||
<button className="w-full mt-3 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center justify-center gap-2">
|
||
<MessageCircle className="w-5 h-5" />
|
||
مراسلة المالك
|
||
</button>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |