import React, { useState, useEffect, useRef } from 'react';
import {
MessageCircle,
Phone,
ShieldCheck,
Star,
MapPin,
ChevronDown,
Sparkles,
Heart,
CheckCircle2,
Clock,
Calendar,
Stethoscope,
Gift,
Smile,
ZapOff,
ChevronRight,
ChevronLeft,
Quote,
Zap,
Layers,
Scissors,
Wallet,
Monitor,
UserCheck,
Check,
Plus,
Minus,
RotateCcw,
Info,
User,
Smartphone,
CreditCard,
BookOpen,
Loader2
} from 'lucide-react';

// --- الثوابت والبيانات الخارجية لضمان استقرار التشغيل ---

const GOOGLE_SHEET_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbzY7vg5oG8QfL6NiKogm3CLRYAzBAThV8pWpssoO00uVGQRyURVB6qBvoCYBIhG_Xl2fQ/exec";

const palette = {
primary: "#1B365D",
secondary: "#2F6F73",
accent: "#9B86BD",
lavenderDark: "#862B59",
mauveHero: "#9D3A6C", // اللون الموف من الصورة المرفقة
lavenderGlow: "rgba(155, 134, 189, 0.4)",
platinum: "#FFFFFF",
textMain: "#1A2B3C"
};

const phoneNumber = "+966507270424";
const rawPhone = "966507270424";
const whatsappLinkBase = `https://wa.me/${rawPhone}?text=`;
const whatsappLink = `https://wa.me/${rawPhone}?text=${encodeURIComponent("مرحباً، أريد حجز استشارة مع د. شيماء شمخ بخصوص التجميل النسائي")}`;

const allServicesList = [
"تضييق المهبل جراحياً لعلاج الاتساعات",
"تفتيح المناطق الحساسة والنضارة",
"علاج الجفاف المهبلي بالميزوثيرابي",
"فيلر المناطق الحساسة وتجميلها",
"عملية قص وتهذيب الشفرات",
"شد ترهلات المنطقة بالخيوط",
"بكجات العروس المتكاملة",
"خدمات العروس قبل الزفاف",
"خدمات العروس بعد الزفاف",
"ترميم مابعد الولادة الطبيعية"
];

const statsData = [
{ value: 5000, label: "حالة ناجحة", prefix: "أكثر من ", suffix: "" },
{ value: 10, label: "سنوات خبرة", prefix: "أكثر من ", suffix: "" },
{ value: 20, label: "طبيبة مختصة", prefix: "", suffix: "" },
{ value: 30, label: "تقنية علاجية مميزة", prefix: "+ ", suffix: "" }
];

const featuresData = [
{ title: "أحدث التقنيات الطبية", desc: "نواكب أحدث ما توصل إليه الطب التجميلي العالمي في الترميم والحقن بخصوصية تامة.", icon: <Monitor size={32} /> },
{ title: "طبيبات بخبرة عالية", desc: "نخبة من الطبيبات المتخصصات لضمان أفضل النتائج الطبية والرعاية الفائقة.", icon: <UserCheck size={32} /> },
{ title: "خصوصية وراحة مطلقة", desc: "بيئة نسائية بالكامل توفر لكِ الأمان والسرية التامة في كل خطوة من رحلتكِ.", icon: <ShieldCheck size={32} /> }
];

const categoriesData = [
{
name: "الأكثر طلبًا",
icon: <Star size={18} />,
services: [
{
title: "تضييق المهبل جراحياً",
duration: "60-90 دقيقة",
isSurgical: true,
image: "https://i.postimg.cc/7L7tBN79/Image-fx-(14).jpg",
details: "إجراء جراحي تجميلي متخصص لعلاج اتساع القناة بعد الولادة الطبيعية، يهدف لشد العضلات واستعادة التناغم الوظيفي (لا يتضمن بلازما لهذا الإجراء)."
},
{
title: "تفتيح ونضارة المنطقة",
duration: "20-30 دقيقة",
isSurgical: false,
image: "https://i.postimg.cc/FH6wCR6S/Image-fx-(10).jpg",
details: "تقنيات تفتيح وتوريد المناطق الحساسة باستخدام أحدث حقن الميزوثيرابي والتقشير البارد لاستعادة النضارة وتوحيد اللون."
},
{
title: "علاج الجفاف بالميزوثيرابي",
duration: "30 دقيقة",
isSurgical: false,
image: "https://i.postimg.cc/MZtPrHcr/Image-fx-(15).jpg",
details: "حلول طبية متطورة باستخدام الميزوثيرابي والبلازما لتحفيز الأنسجة وترطيب المنطقة وعلاج الجفاف بخصوصية تامة."
}
]
},
{
name: "تحسين جمالي",
icon: <Sparkles size={18} />,
services: [
{
title: "فيلر المنطقة الحساسة",
duration: "30 دقيقة",
isSurgical: false,
image: "https://i.postimg.cc/2yTKQ8vf/Image-fx-(12).jpg",
details: "استعادة الحجم والامتلاء الطبيعي للمناطق الحساسة باستخدام أفضل أنواع الفيلر الآمنة لنتائج جمالية فورية وطبيعية."
},
{
title: "قص وتهذيب الشفرات",
duration: "60-90 دقيقة",
isSurgical: true,
image: "https://i.postimg.cc/Ss65KGxK/Image-fx-(11).jpg",
details: "تصحيح جراحي تجميلي لشكل الشفرات غير المتناسقة لتحقيق الراحة التامة والمظهر المتوازن والمنسق."
}
]
},
{
name: "بكجات العروس",
icon: <Gift size={18} />,
services: [
{
title: "خدمات العروس قبل الزفاف",
duration: "متعدد",
isSurgical: false,
image: "https://i.postimg.cc/YqZxJWtD/Image-fx-(16).jpg",
details: "برنامج متكامل يبدأ قبل الزفاف بأسابيع، يشمل تفتيح ونضارة وترطيب عميق للمناطق الحساسة لتكوني في كامل تألقكِ وثقتكِ في ليلة العمر."
},
{
title: "خدمات العروس بعد الزفاف",
duration: "متعدد",
isSurgical: false,
image: "https://i.postimg.cc/Y0V1K5Bt/Image-fx-(17).jpg",
details: "جلسات وقائية وتجميلية للمحافظة على نضارة وصحة المنطقة الحساسة بعد الزفاف، تضمن دوام النتائج الجمالية والراحة التامة."
}
]
}
];

const blogPostsData = [
{
title: "تضييق المهبل جراحياً لعلاج الاتساع بعد الولادة",
content: "تعتبر عملية تضييق المهبل جراحياً بالرياض الحل الجذري والنهائي لمشاكل اتساع القناة المهبلية التي قد تطرأ بعد الولادة الطبيعية المتكررة. يهدف هذا الإجراء الطبي المتقدم إلى ترميم الأنسجة المرتخية وشد العضلات واستعادة مرونتها الطبيعية لضمان الراحة الوظيفية والجمالية المطلقة. نحن نعتمد في عيادتنا على الجراحة التجميلية النسائية الدقيقة التي تضمن استعادة الثقة بالنفس، مع التأكيد على أن هذا الإجراء الجراحي يتم بخصوصية طبية تامة ولا يتضمن استخدام البلازما أو أي تقنيات حقن أخرى، لضمان أعلى مستويات الدقة والتعافي."
},
{
title: "حقن الفيلر للمنطقة الأنثوية: استعادة الشباب والنضارة",
content: "تبحث الكثير من السيدات عن طرق تجميل المنطقة الحساسة بدون جراحة. يعتبر فيلر المنطقة الأنثوية من أكثر الإجراءات طلباً لاستعادة الحجم المفقود وعلاج الترهلات الناتجة عن فقدان الوزن أو التقدم في العمر. يساعد الفيلر في تحسين المظهر الخارجي وزيادة النعومة والترطيب بعمق، مما يمنحكِ مظهراً طبيعياً وجذاباً. نستخدم في مجمع سند الجزيرة بالرياض أجود أنواع الفيلر العالمية التي تضمن نتائج فورية وآمنة تماماً بخصوصية وسرية مطلقة."
},
{
title: "تجميل وقص الشفرات: تنسيق المظهر والراحة الجسدية",
content: "عملية قص وتهذيب الشفرات هي إجراء تجميلي يهدف إلى تصحيح تضخم أو عدم تناسق الشفرات الصغرى. هذه المشكلة قد تسبب إزعاجاً أثناء الحركة أو ممارسة الرياضة. تساعد الجراحة التجميلية في إعادة تناسق المظهر الخارجي بشكل متماثل، مما يرفع من مستوى الراحة النفسية والجسدية للسيدة. يتم الإجراء تحت تخدير موضعي وبأحدث التقنيات الجراحية لضمان التئام سريع ومظهر طبيعي متناسق."
},
{
title: "نضارة وتفتيح المنطقة بالميزوثيرابي والتقشير البارد",
content: "استعيدي لون المنطقة الطبيعي مع جلسات تفتيح المناطق الحساسة بالميزوثيرابي والتقشير. نعمل على إزالة التصبغات العميقة وتوحيد لون البشرة باستخدام مواد غنية بالفيتامينات والمواد المفتحة الآمنة. هذه الإجراءات مثالية للعرائس وللسيدات اللواتي يرغبن في تحسين مظهر ونضارة البشرة بخصوصية تامة ونتائج تدوم طويلاً."
}
];

const faqsData = [
{ q: "هل تتوفر خصوصية تامة في العيادة؟", a: "نعم، نحن نضمن خصوصية طبية مطلقة؛ الطاقم بالكامل نسائي والملفات الطبية سرية تماماً لضمان راحتكِ." },
{ q: "هل يمكن التقسيط عبر تابي وتمارا؟", a: "بالتأكيد، يمكنكِ تقسيط إجمالي الفاتورة على دفعات ميسرة بدون فوائد لتنعمي بالراحة المالية والطبية." }
];

const trustBadgesData = [
{ icon: "⭐", text: "أكثر من ٥٠٠٠ حالة ناجحة" },
{ icon: "🔒", text: "خصوصية طبية مطلقة" },
{ icon: "👩‍⚕️", text: "إشراف استشاري نسائي" },
{ icon: "📍", text: "الرياض - حي طويق" },
];

// --- المكونات المساعدة ---

const CountUp = ({ end, duration = 6000 }) => {
const [count, setCount] = useState(0);
const [isVisible, setIsVisible] = useState(false);
const elementRef = useRef(null);

useEffect(() => {
const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) setIsVisible(true); }, { threshold: 0.1 });
if (elementRef.current) observer.observe(elementRef.current);
return () => observer.disconnect();
}, []);

useEffect(() => {
if (!isVisible) return;
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
setCount(Math.floor(progress * end));
if (progress < 1) window.requestAnimationFrame(step);
};
window.requestAnimationFrame(step);
}, [end, duration, isVisible]);

return <span ref={elementRef}>{count.toLocaleString('ar-SA')}</span>;
};

// --- المكون الرئيسي App ---

const App = () => {
const [activeFaq, setActiveFaq] = useState(null);
const [activeBlog, setActiveBlog] = useState(null);
const [activeCategory, setActiveCategory] = useState("الأكثر طلبًا");
const [formData, setFormData] = useState({ name: '', phone: '', service: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitStatus, setSubmitStatus] = useState(null);
const [currentServiceIndex, setCurrentServiceIndex] = useState(0);
const [flippedService, setFlippedService] = useState(null);

// --- إضافة Google Tag Manager و Charset Meta Tag برمجياً ---
useEffect(() => {
// 1. إضافة charset UTF-8 لضمان قراءة اللغة العربية بشكل صحيح
let metaCharset = document.querySelector('meta[charset]');
if (!metaCharset) {
metaCharset = document.createElement('meta');
metaCharset.setAttribute('charset', 'UTF-8');
document.head.prepend(metaCharset); // يوضع في بداية الـ Head
}

// 2. إضافة كود Google Tag Manager
const script = document.createElement('script');
script.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PVDW295H');`;
document.head.appendChild(script);

return () => {
if (document.head.contains(script)) document.head.removeChild(script);
};
}, []);

const handleBookingSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
setSubmitStatus(null);
try {
await fetch(GOOGLE_SHEET_SCRIPT_URL, {
method: 'POST',
mode: 'no-cors',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
setSubmitStatus('success');
const message = `حجز جديد من الموقع:\nالاسم: ${formData.name}\nالهاتف: ${formData.phone}\nالخدمة: ${formData.service}`;
setTimeout(() => {
window.location.href = whatsappLinkBase + encodeURIComponent(message);
setIsSubmitting(false);
}, 1200);
} catch (error) {
setIsSubmitting(false);
setSubmitStatus('error');
}
};

const activeServices = categoriesData.find(c => c.name === activeCategory)?.services || [];
const nextService = () => { setFlippedService(null); setCurrentServiceIndex((prev) => (prev + 1) % activeServices.length); };
const prevService = () => { setFlippedService(null); setCurrentServiceIndex((prev) => (prev - 1 + activeServices.length) % activeServices.length); };

useEffect(() => { setCurrentServiceIndex(0); setFlippedService(null); }, [activeCategory]);

return (
<div className="min-h-screen selection:bg-[#9B86BD] selection:text-white relative overflow-x-hidden text-[#1A2B3C] leading-normal" dir="rtl" style={{ fontFamily: "'Cairo', sans-serif" }}>

<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PVDW295H" height="0" width="0" style={{ display: 'none', visibility: 'hidden' }}></iframe>
</noscript>

<style>{`
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Aref+Ruqaa:wght@400;700&family=El+Messiri:wght@400;500;600;700&display=swap');

h1, h2, .soft-title { font-family: 'Aref Ruqaa', serif !important; line-height: 1.7 !important; margin-bottom: 0.5rem; }
.points-text-clear { font-family: 'El Messiri', sans-serif; }

.full-site-bg { background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.9)), url('https://i.postimg.cc/sfcqPmRM/Image-fx-(7).jpg'); background-size: cover; background-position: center; background-attachment: fixed; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.hero-bg-custom { background-image: linear-gradient(rgba(155, 134, 189, 0.55), rgba(155, 134, 189, 0.65)), url('https://i.postimg.cc/XvnFyqrB/Image-fx-(8).jpg'); background-size: cover; background-position: center; position: relative; }
.premium-lavender-glow { box-shadow: 0 10px 50px -5px ${palette.lavenderGlow}; transition: all 0.5s ease; }

.shiny-mauve-text {
color: ${palette.mauveHero};
filter: drop-shadow(0 0 8px rgba(157, 58, 108, 0.3));
animation: subtle-pulse 3s ease-in-out infinite;
}
@keyframes subtle-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.01); } }

.doctor-portrait-container {
position: relative; width: 100%; max-width: 450px; display: flex; align-items: center; justify-content: center; padding: 60px 20px;
}

.arch-main-frame {
position: relative; width: 290px; height: 400px; border-radius: 145px 145px 35px 35px; overflow: hidden; z-index: 10; border: 8px solid white; box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 0 40px ${palette.lavenderGlow}; background: white;
}
.arch-main-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }

.arch-decoration-border {
position: absolute; width: 290px; height: 400px; border-radius: 145px 145px 35px 35px; border: 3px solid ${palette.accent}; z-index: 5; transform: translate(15px, 15px); opacity: 0.4;
}

.floating-badge-special {
position: absolute; background: white; padding: 10px 20px; border-radius: 50px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid rgba(155, 134, 189, 0.2); z-index: 30; display: flex; align-items: center; gap: 10px; font-weight: 800; color: #1B365D; animation: floatEffect 4s ease-in-out infinite; white-space: nowrap; font-size: 0.9rem;
}
@keyframes floatEffect { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.stat-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 25px 15px; transition: all 0.4s ease; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.stat-card:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.15); }

.booking-input { background: #F8FAFC; border: 2px solid #F1F5F9; border-radius: 20px; padding: 18px 50px 18px 20px; width: 100%; font-weight: 700; font-size: 1.1rem; transition: all 0.3s ease; outline: none; text-align: right; color: #1A2B3C; }
.booking-input:focus { border-color: ${palette.accent}; background: white; box-shadow: 0 0 15px ${palette.lavenderGlow}; }

.top-announcement-bar { background-color: ${palette.accent}; color: white; height: 35px; display: flex; align-items: center; overflow: hidden; position: relative; z-index: 60; }
.announcement-marquee { display: inline-flex; animation: top-marquee 60s linear infinite; white-space: nowrap; gap: 60px; font-weight: 800; font-size: 0.95rem; }
@keyframes top-marquee { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.marquee-container { overflow: hidden; white-space: nowrap; position: relative; mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); }
.marquee-content { display: inline-flex; animation: marquee-scroll 35s linear infinite; gap: 35px; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }

.lavender-shiny-point { border: 2px solid ${palette.accent}; background: white; padding: 12px 35px; border-radius: 50px; box-shadow: 0 0 20px ${palette.lavenderGlow}; display: flex; align-items: center; gap: 15px; transition: transform 0.3s ease; }

.flip-container { perspective: 1500px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.is-flipped { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.flip-back { transform: rotateY(180deg); background: white; border: 2px solid ${palette.accent}; padding: 30px; align-items: center; justify-content: center; text-align: center; }

.cta-btn-lavender { background-color: ${palette.accent}; color: white; font-weight: 900; transition: all 0.3s ease; box-shadow: 0 8px 30px ${palette.lavenderGlow}; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cta-btn-lavender:hover { background-color: ${palette.lavenderDark}; transform: translateY(-3px); }

.green-check-frame { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #166534; display: flex; align-items: center; justify-content: center; background-color: rgba(22, 101, 52, 0.05); color: #166534; flex-shrink: 0; }

@media (max-width: 768px) {
.arch-main-frame, .arch-decoration-border { width: 230px; height: 310px; border-radius: 115px 115px 25px 25px; }
h1 { font-size: 2.2rem !important; line-height: 1.5 !important; }
h2 { font-size: 1.8rem !important; line-height: 1.6 !important; }
.stat-card { padding: 15px 10px; }
.floating-badge-special { font-size: 0.75rem; padding: 6px 14px; }
}
`}</style>

<div className="full-site-bg"></div>

{/* Floating Buttons */}
<div className="fab-container fixed bottom-[100px] left-[20px] z-[70] flex flex-col gap-4">
<a href={whatsappLink} target="_blank" rel="noopener noreferrer" className="w-[60px] h-[60px] rounded-full bg-[#25D366] text-white flex items-center justify-center shadow-2xl hover:scale-110 transition-all border-2 border-white animate-bounce"><MessageCircle size={32} /></a>
<a href={`tel:${phoneNumber}`} className="w-[60px] h-[60px] rounded-full bg-[#1B365D] text-white flex items-center justify-center shadow-2xl hover:scale-110 transition-all border-2 border-white"><Phone size={30} /></a>
</div>

<header className="fixed top-0 w-full z-50 shadow-md">
<nav className="w-full bg-white/95 h-16 flex items-center border-b border-[#9B86BD]/15">
<div className="max-w-6xl mx-auto px-6 w-full flex justify-between items-center">
<img src="https://i.postimg.cc/gjWK1CFR/snd.png" alt="Logo" className="h-9 object-contain" />
<div className="hidden md:flex gap-8 text-[13px] font-bold tracking-wide uppercase text-[#1B365D]">
<a href="#services" className="hover:text-[#9B86BD] font-bold">الخدمات</a>
<a href="#doctor" className="hover:text-[#9B86BD] font-bold">عن الدكتورة</a>
<a href="#offers" className="hover:text-[#9B86BD] font-bold">العروض</a>
<a href="#blog" className="hover:text-[#9B86BD] font-bold">المدونة</a>
</div>
<a href="#booking" className="bg-[#9B86BD] text-white px-6 py-2 rounded-full text-[12px] font-bold shadow-sm">حجز موعد</a>
</div>
</nav>
<div className="top-announcement-bar">
<div className="announcement-marquee">
{[...Array(6)].map((_, i) => (
<span key={i} className="flex items-center gap-4">
<CreditCard size={18} /> قسطي فاتورتك وريحي بالك مع تابي وتمارا <Sparkles size={18} />
</span>
))}
</div>
</div>
</header>

{/* Hero Section */}
<section className="pt-40 pb-20 lg:pt-48 lg:pb-32 px-6 hero-bg-custom min-h-screen flex items-center justify-center text-center">
<div className="max-w-5xl mx-auto w-full relative z-10 flex flex-col items-center">
<div className="space-y-6 animate-fade-in flex flex-col items-center">
<img src="https://i.postimg.cc/gjWK1CFR/snd.png" alt="Logo" className="max-h-24 md:max-h-28 mb-4 filter drop-shadow-xl" />
<h1 className="text-5xl md:text-8xl leading-[1.4] mb-2 px-2 text-center shiny-mauve-text drop-shadow-lg">اكتشفي سر جمالكِ الداخلي.. وعززي ثقتكِ بنفسكِ</h1>
<p className="text-xl md:text-3xl font-bold max-w-4xl text-white drop-shadow-lg leading-relaxed mb-8 px-4 text-shadow-md">
في قسم التجميل النسائي بمجمع سند الجزيرة الطبي، نقدم لكِ أحدث تقنيات تضييق المهبل جراحياً وتفتيح المناطق الحساسة بالميزوثيرابي بخصوصية تامة.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full px-4">
<a href="#booking" className="cta-btn-lavender px-10 py-5 rounded-full text-xl font-black shadow-2xl flex items-center justify-center gap-3"><Calendar size={24} /> احجزي استشارتكِ الخاصة</a>
<div className="flex gap-4">
<a href={whatsappLink} target="_blank" rel="noopener noreferrer" className="bg-[#25D366] text-white flex-1 sm:flex-none px-8 py-5 rounded-full shadow-2xl flex items-center justify-center gap-3 font-bold hover:scale-105 transition-all"><MessageCircle size={24} /> واتساب</a>
<a href={`tel:${phoneNumber}`} className="bg-white text-[#1B365D] flex-1 sm:flex-none px-8 py-5 rounded-full shadow-2xl flex items-center justify-center gap-3 font-bold hover:scale-105 transition-all border border-gray-100"><Phone size={24} /> اتصال</a>
</div>
</div>
</div>
</div>
</section>

{/* لماذا تختاريننا */}
<section className="py-24 px-6 bg-white/40 text-center">
<div className="max-w-6xl mx-auto text-[#1B365D]">
<h2 className="text-4xl md:text-6xl leading-[1.7] text-center mb-16">لماذا تختارين قسم التجميل النسائي <br/><span className="text-[#9B86BD]">بمجموعة سند الجزيرة؟</span></h2>
<div className="grid md:grid-cols-3 gap-8">
{featuresData.map((feature, idx) => (
<div key={idx} className="premium-lavender-glow bg-white p-10 rounded-[3rem] border border-gray-100 flex flex-col items-center text-center group cursor-default">
<div className="bg-[#F5F3FF] p-6 rounded-full mb-8 group-hover:bg-[#9B86BD] group-hover:text-white transition-all duration-500 text-[#9B86BD] group-hover:rotate-6">{feature.icon}</div>
<h3 className="text-2xl font-bold mb-4 group-hover:text-[#9B86BD] transition-colors duration-300 text-center">{feature.title}</h3>
<p className="text-lg font-medium text-[#546E7A] leading-relaxed text-center">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>

{/* --- SECTION: نعتز بثقتكم --- */}
<section className="py-24 px-6 relative bg-[#1B365D] overflow-hidden text-center text-white">
<div className="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://i.postimg.cc/XvnFyqrB/Image-fx-(8).jpg')] bg-cover"></div>
<div className="max-w-6xl mx-auto relative z-10">
<h2 className="text-5xl md:text-7xl mb-8 drop-shadow-md">نعتز بثقتكم</h2>
<p className="text-xl md:text-2xl text-white/80 font-bold max-w-3xl mx-auto leading-relaxed mb-16 px-4">ثقة تُبنى على آلاف القصص الناجحة برعاية طبية فائقة تمنحكِ الطمأنينة الكاملة.</p>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 max-w-5xl mx-auto px-2">
{statsData.map((stat, idx) => (
<div key={idx} className="stat-card">
<h3 className="text-3xl md:text-5xl font-black text-[#9B86BD] mb-2 flex items-center justify-center gap-1">
<span className="text-sm md:text-lg opacity-80">{stat.prefix}</span>
<CountUp end={stat.value} />
<span className="text-sm md:text-lg opacity-80">{stat.suffix}</span>
</h3>
<p className="text-xs md:text-base text-white font-bold tracking-wide leading-tight">{stat.label}</p>
</div>
))}
</div>
</div>
</section>

{/* Marquee */}
<div className="w-full py-12 marquee-container z-30 bg-transparent border-y border-[#9B86BD]/10 my-4">
<div className="marquee-content">
{[...trustBadgesData, ...trustBadgesData, ...trustBadgesData, ...trustBadgesData].map((badge, idx) => (
<div key={idx} className="lavender-shiny-point whitespace-nowrap">
<span className="text-2xl">{badge.icon}</span>
<span className="text-[16px] font-black text-[#1B365D] tracking-wide uppercase">{badge.text}</span>
</div>
))}
</div>
</div>

{/* Meet the Doctor Section */}
<section id="doctor" className="py-24 px-6 relative overflow-hidden">
<div className="max-w-6xl mx-auto flex flex-col lg:flex-row items-center gap-16 lg:gap-24 text-right">
<div className="flex-1 order-2 lg:order-1 text-[#1B365D]">
<p className="text-[#9B86BD] font-bold text-xl mb-4 tracking-widest uppercase text-right">خبيرة متميزة</p>
<h2 className="text-4xl md:text-6xl mb-8">تعرفي على طبيبتكِ</h2>
<h3 className="text-2xl md:text-3xl font-bold text-[#9B86BD] mb-6 text-right text-shadow-sm">د. شيماء شمخ - خبيرة التجميل والترميم النسائي</h3>
<ul className="space-y-5 mb-10 flex flex-col items-end">
{["أخصائية النساء والولادة بخبرة واسعة في الجراحة التجميلية", "خبيرة في استخدام تقنيات الميزوثيرابي والبلازما لتجديد الأنسجة", "رائدة في عمليات تضييق المهبل جراحياً وبتقنيات الترميم الحديثة"].map((item, i) => (
<li key={i} className="flex items-center gap-4 flex-row-reverse w-full justify-start text-[#1B365D]">
<div className="green-check-frame"><Check size={20} strokeWidth={3} /></div>
<span className="text-xl md:text-2xl font-bold points-text-clear tracking-wide text-right">{item}</span>
</li>
))}
</ul>
</div>

<div className="flex-1 order-1 lg:order-2 flex justify-center">
<div className="doctor-portrait-container">
<div className="floating-badge-special -top-4 -right-10" style={{ animationDelay: '0s' }}>
<Star size={18} className="text-yellow-500 fill-yellow-500" /> نتائج مضمونة
</div>
<div className="floating-badge-special top-[45%] -left-14" style={{ animationDelay: '1s' }}>
<ShieldCheck size={18} className="text-green-600" /> خصوصية طبية مطلقة
</div>
<div className="floating-badge-special -bottom-6 right-2" style={{ animationDelay: '2s' }}>
<UserCheck size={18} className="text-[#9B86BD]" /> إشراف استشاري نسائي
</div>
<div className="arch-decoration-border"></div>
<div className="arch-main-frame">
<img src="https://i.postimg.cc/RZMDWnYH/54548.png" alt="د. شيماء شمخ" />
</div>
</div>
</div>
</div>
</section>

{/* الخدمات - مع استعادة بكجات العروس (قبل وبعد) */}
<section id="services" className="py-24 px-6 relative text-[#1B365D] text-center">
<div className="max-w-6xl mx-auto">
<h2 className="text-4xl md:text-6xl font-black mb-4 text-[#1B365D]">خدماتنا المتميزة</h2>

<div className="flex flex-wrap justify-center gap-3 mb-16">
{categoriesData.map((cat) => (
<button
key={cat.name}
onClick={() => setActiveCategory(cat.name)}
className={`flex items-center gap-3 px-8 py-3 rounded-full text-sm font-bold tracking-widest transition-all ${activeCategory === cat.name ? "bg-[#1B365D] text-white shadow-xl scale-105" : "bg-white/80 text-[#1B365D]/60 border border-[#9B86BD]/20"}`}
>
{cat.icon} {cat.name}
</button>
))}
</div>

<div className="relative flex items-center justify-center min-h-[500px]">
<button onClick={(e) => { e.stopPropagation(); prevService(); }} className="absolute left-2 md:-left-12 z-40 p-4 bg-white shadow-xl rounded-full text-[#1B365D] hover:bg-[#9B86BD] hover:text-white transition-all active:scale-90">
<ChevronRight size={36} />
</button>
<button onClick={(e) => { e.stopPropagation(); nextService(); }} className="absolute right-2 md:-right-12 z-40 p-4 bg-white shadow-xl rounded-full text-[#1B365D] hover:bg-[#9B86BD] hover:text-white transition-all active:scale-90">
<ChevronLeft size={36} />
</button>

<div className="flip-container w-full max-w-[460px] h-[520px]" onClick={() => setFlippedService(flippedService === currentServiceIndex ? null : currentServiceIndex)}>
<div className={`flip-inner h-full ${flippedService === currentServiceIndex ? 'is-flipped' : ''}`}>
<div className="flip-front bg-white premium-lavender-glow flex flex-col text-right">
{activeServices[currentServiceIndex]?.image && (
<div className="w-full h-80 overflow-hidden">
<img src={activeServices[currentServiceIndex].image} alt={activeServices[currentServiceIndex].title} className="w-full h-full object-cover" />
</div>
)}
<div className="p-8 flex flex-col justify-between flex-1 text-center">
<h3 className="text-2xl md:text-3xl font-black mb-4 leading-tight">{activeServices[currentServiceIndex]?.title}</h3>
<div className="flex items-center gap-3 text-[#9B86BD] font-black border-t border-gray-50 pt-6 justify-center text-[#9B86BD]"><RotateCcw size={20} /> <span className="text-lg">اضغطي للتفاصيل</span></div>
</div>
</div>
<div className="flip-back">
<h4 className="text-2xl font-black mb-6 border-b-2 border-[#9B86BD]/20 pb-4 w-full text-center">شرح الخدمة</h4>
<p className="text-lg md:text-xl font-bold text-[#1A2B3C]/80 mb-10 text-center leading-relaxed px-4">{activeServices[currentServiceIndex]?.details}</p>
<button onClick={(e) => { e.stopPropagation(); document.getElementById('booking').scrollIntoView({behavior: 'smooth'}); }} className="w-full bg-[#1B365D] text-white py-4 rounded-2xl font-black text-lg shadow-lg">حجز موعد الآن</button>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="booking" className="py-24 px-6 relative">
<div className="max-w-4xl mx-auto">
<div className="bg-white rounded-[3rem] premium-lavender-glow p-8 md:p-16 border border-gray-100 text-center relative overflow-hidden">
<h2 className="text-3xl md:text-5xl font-black mb-10 text-center">احجزي موعدكِ الآن بخصوصية تامة</h2>
{submitStatus === 'success' && <div className="mb-8 p-4 bg-green-50 text-green-700 rounded-2xl font-bold text-xl animate-bounce">✅ تم حفظ طلبك بنجاح.. جاري تحويلك للواتساب</div>}
<form className="w-full space-y-6 text-right" onSubmit={handleBookingSubmit}>
<div className="relative"><User className="absolute right-5 top-1/2 -translate-y-1/2 text-gray-400" size={20} /><input type="text" placeholder="الاسم الكريم" className="booking-input" required onChange={(e) => setFormData({...formData, name: e.target.value})} /></div>
<div className="relative"><Smartphone className="absolute right-5 top-1/2 -translate-y-1/2 text-gray-400" size={20} /><input type="tel" placeholder="رقم الهاتف (05xxxxxxxx)" className="booking-input" pattern="(05)[0-9]{8}" required onChange={(e) => setFormData({...formData, phone: e.target.value})} /></div>
<div className="relative"><ChevronDown className="absolute left-5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" size={20} /><select className="booking-input appearance-none" required onChange={(e) => setFormData({...formData, service: e.target.value})}><option value="">اختاري الخدمة المطلوبة</option>{allServicesList.map((s, i) => (<option key={i} value={s}>{s}</option>))}</select></div>
<button type="submit" disabled={isSubmitting} className="w-full cta-btn-lavender py-6 rounded-[2rem] text-2xl font-black shadow-xl">{isSubmitting ? <Loader2 className="animate-spin" size={28} /> : <><Calendar size={28} /> حجز موعد الآن</>}</button>
</form>
</div>
</div>
</section>

<section id="blog" className="py-24 px-6 bg-[#F5F3FF]/50 text-right text-[#1B365D]">
<div className="max-w-4xl mx-auto">
<h2 className="text-4xl md:text-5xl font-black text-center mb-16 text-[#1B365D]">مدونة الجمال والوعي الطبي</h2>
<div className="space-y-6 text-right">
{blogPostsData.map((post, i) => (
<div key={i} className="blog-card premium-lavender-glow text-[#1B365D]">
<button onClick={() => setActiveBlog(activeBlog === i ? null : i)} className="w-full p-6 md:p-8 flex justify-between items-center text-right font-black text-xl md:text-2xl transition-all text-[#1B365D]">
<span className={activeBlog === i ? "text-[#9B86BD]" : ""}>{post.title}</span>
<div className={`transition-transform duration-300 ${activeBlog === i ? "rotate-180" : ""}`}>{activeBlog === i ? <Minus className="text-[#9B86BD]" /> : <Plus className="text-gray-400" />}</div>
</button>
<div className={`overflow-hidden transition-all duration-700 ${activeBlog === i ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"}`}><div className="p-8 pt-0 text-[#1A2B3C]/80 font-bold text-lg md:text-xl leading-relaxed border-t border-gray-50 bg-white text-center text-[#1B365D]">{post.content}</div></div>
</div>
))}
</div>
</div>
</section>

<section id="faq" className="py-24 px-6 bg-white/40 text-right text-[#1B365D]">
<div className="max-w-3xl mx-auto text-[#1B365D]">
<h2 className="text-3xl md:text-5xl font-black text-center mb-16">الأسئلة الشائعة</h2>
<div className="space-y-4 text-[#1B365D]">
{faqsData.map((faq, i) => (
<div key={i} className="faq-card premium-lavender-glow text-right">
<button onClick={() => setActiveFaq(activeFaq === i ? null : i)} className="w-full p-6 flex justify-between items-center text-right font-black text-lg md:text-xl transition-all">
<span className={activeFaq === i ? "text-[#9B86BD]" : ""}>{faq.q}</span>
<div className={`transition-transform duration-300 ${activeFaq === i ? "rotate-180" : ""}`}>{activeFaq === i ? <Minus className="text-[#9B86BD]" /> : <Plus className="text-gray-400" />}</div>
</button>
<div className={`overflow-hidden transition-all duration-500 ${activeFaq === i ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}`}><div className="p-8 pt-0 text-[#546E7A] font-bold text-lg leading-relaxed border-t border-gray-50 text-center text-[#1B365D]">{faq.a}</div></div>
</div>
))}
</div>
</div>
</section>

<footer className="py-20 px-6 border-t border-[#9B86BD]/20 bg-white/95 text-right text-[#1B365D]">
<div className="max-w-6xl mx-auto grid lg:grid-cols-3 gap-16 text-right">
<div><img src="https://i.postimg.cc/gjWK1CFR/snd.png" alt="Logo" className="h-10 mb-4 mx-auto lg:mx-0" /><p className="text-lg font-medium text-[#1A2B3C]/60 text-right text-[#1B365D]">مجموعة سند الجزيرة الطبية - الرياض - حي طويق. التميز في خدمات تضييق المهبل جراحياً وتفتيح المناطق الحساسة بالميزوثيرابي.</p></div>
<div><h4 className="text-xl font-bold mb-4 text-[#1B365D]">تواصلوا معنا</h4><div className="space-y-4 text-right">
<p className="flex items-center justify-end gap-3 text-[#1B365D]"><MapPin size={20} className="text-[#9B86BD]" /> الرياض - حي طويق - شارع خديجة بنت خويلد</p>
<a href={`tel:${phoneNumber}`} className="flex items-center justify-end gap-3 font-black text-2xl text-[#1B365D] hover:text-[#9B86BD] transition-colors">{phoneNumber} <Phone size={24} className="text-[#9B86BD]" /></a>
</div></div>
</div>
</footer>
</div>
);
};

export default App;