import React, { useState } from "react";

import { motion, AnimatePresence } from "framer-motion";

import { ShoppingCart, ShieldCheck, Truck, RotateCw, Star, Phone, MessageCircle } from "lucide-react";

// ملاحظة: استبدل روابط الصور أدناه بروابط صورك الفعلية (البني/الأسود)

const IMG_BROWN = "https://images.unsplash.com/photo-1528702748617-c64d49f918af?q=80&w=1200&auto=format&fit=crop"; // ضع رابط صورة الحذاء البني هنا

const IMG_BLACK = "https://images.unsplash.com/photo-1583778171730-d138e8d0bde9?q=80&w=1200&auto=format&fit=crop"; // ضع رابط صورة الحذاء الأسود هنا

export default function LandingPage() {

  const [color, setColor] = useState("brown");

  const [size, setSize] = useState("42");

  const [qty, setQty] = useState(1);

  const price = 349; // السعر التقريبي — غيّره كما تشاء

  const imgSrc = color === "brown" ? IMG_BROWN : IMG_BLACK;

  const sizes = ["39","40","41","42","43","44","45"];

  return (

    <div dir="rtl" className="min-h-screen bg-gradient-to-b from-zinc-50 to-white text-zinc-900">

      {/* شريط علوي */}

      <div className="w-full bg-zinc-900 text-white text-sm">

        <div className="max-w-6xl mx-auto px-4 py-2 flex items-center justify-between">

          <p className="flex items-center gap-2"><Truck className="w-4 h-4"/>شحن سريع ومجاني للطلبات فوق 499 ر.س</p>

          <div className="flex items-center gap-3 opacity-90">

            <a href="#faq" className="hover:underline">الأسئلة الشائعة</a>

            <a href="#contact" className="hover:underline">تواصل معنا</a>

          </div>

        </div>

      </div>

      {/* الهيرو */}

      <section className="max-w-6xl mx-auto px-4 py-10 grid md:grid-cols-2 gap-8 items-center">

        <div className="order-2 md:order-1">

          <span className="inline-flex items-center gap-2 text-xs font-medium bg-amber-100 text-amber-700 px-3 py-1 rounded-full mb-4">جديد</span>

          <h1 className="text-3xl md:text-5xl font-extrabold leading-tight mb-4">حذاء لوكس كاجوال — راحة جلد طبيعي وأناقة يومية</h1>

          <p className="text-zinc-600 mb-6">صُمم ليلائم يومك بالكامل: خامة جلد طبيعي مع نقش مضفر، نعل مرن خفيف، ودعم لقوس القدم. متوفر بلونين: أسود أنيق وبني كلاسيكي.</p>

          {/* اختيار اللون */}

          <div className="mb-4">

            <p className="text-sm font-semibold mb-2">اللون</p>

            <div className="flex items-center gap-3">

              <button onClick={() => setColor("brown")} className={`w-9 h-9 rounded-full border-2 ${color==="brown"?"border-zinc-900":"border-transparent"}`} style={{background:"#5a3e36"}} aria-label="بني"/>

              <button onClick={() => setColor("black")} className={`w-9 h-9 rounded-full border-2 ${color==="black"?"border-zinc-900":"border-transparent"}`} style={{background:"#0f1115"}} aria-label="أسود"/>

            </div>

          </div>

          {/* اختيار المقاس والكمية */}

          <div className="flex flex-wrap gap-4 mb-6">

            <div>

              <p className="text-sm font-semibold mb-2">المقاس (EU)</p>

              <div className="flex flex-wrap gap-2">

                {sizes.map((s)=> (

                  <button key={s} onClick={()=>setSize(s)} className={`px-3 py-2 rounded-xl border text-sm ${size===s?"bg-zinc-900 text-white border-zinc-900":"border-zinc-300 hover:border-zinc-900"}`}>{s}</button>

                ))}

              </div>

            </div>

            <div>

              <p className="text-sm font-semibold mb-2">الكمية</p>

              <div className="flex items-center rounded-xl border border-zinc-300 overflow-hidden">

                <button onClick={()=> setQty(Math.max(1, qty-1))} className="px-3 py-2">-</button>

                <span className="px-4 py-2 min-w-10 text-center">{qty}</span>

                <button onClick={()=> setQty(qty+1)} className="px-3 py-2">+</button>

              </div>

            </div>

          </div>

          {/* السعر والأزرار */}

          <div className="flex items-center gap-4 mb-8">

            <div className="text-3xl font-extrabold">{price.toLocaleString()} ر.س</div>

            <button className="inline-flex items-center gap-2 bg-zinc-900 text-white px-5 py-3 rounded-2xl shadow hover:shadow-lg transition">

              <ShoppingCart className="w-5 h-5"/> أضِف إلى السلة

            </button>

            <a href="#contact" className="underline text-zinc-700 hover:text-zinc-900">اطلب عبر واتساب</a>

          </div>

          {/* أيقونات الثقة */}

          <div className="grid grid-cols-3 gap-4 text-sm text-zinc-700">

            <div className="flex items-center gap-2"><ShieldCheck className="w-5 h-5"/> ضمان سنة</div>

            <div className="flex items-center gap-2"><RotateCw className="w-5 h-5"/> استبدال خلال 14 يومًا</div>

            <div className="flex items-center gap-2"><Truck className="w-5 h-5"/> توصيل خلال 48–72 ساعة</div>

          </div>

        </div>

        {/* صورة المنتج */}

        <div className="order-1 md:order-2">

          <div className="bg-white rounded-3xl shadow-lg p-3 md:p-5">

            <AnimatePresence mode="wait">

              <motion.img

                key={color}

                src={imgSrc}

                alt={`حذاء ${color === "brown" ? "بني" : "أسود"}`}

                className="w-full h-[380px] md:h-[520px] object-cover rounded-2xl"

                initial={{opacity:0, y:10}}

                animate={{opacity:1, y:0}}

                exit={{opacity:0, y:-10}}

                transition={{duration:0.35}}

              />

            </AnimatePresence>

          </div>

          <p className="text-xs text-zinc-500 mt-2">* الصور توضيحية — سيتم استبدالها بصور المنتج الفعلية</p>

        </div>

      </section>

      {/* المميزات */}

      <section className="bg-zinc-50 border-y">

        <div className="max-w-6xl mx-auto px-4 py-12">

          <h2 className="text-2xl md:text-3xl font-extrabold mb-6">لماذا ستُحبه؟</h2>

          <div className="grid md:grid-cols-3 gap-5">

            {[

              {t:"جلد طبيعي فاخر", d:"خامه متينة بملمس ناعم مع تهوية منسوجة للحفاظ على راحة القدم طوال اليوم."},

              {t:"نعل مريح وخفيف", d:"امتصاص عالي للصدمات مع مرونة ممتازة للمشي الطويل."},

              {t:"خيارات ألوان عملية", d:"أسود أنيق وبني كلاسيكي ليتناسب مع ملابسك الكاجوال والرسمية."},

              {t:"خياطة دقيقة", d:"تشطيب احترافي ولمسة مضفرة تضيف أناقة."},

              {t:"دعم لقوس القدم", d:"راحة إضافية وثبات أفضل أثناء الحركة."},

              {t:"مقاسات من 39 إلى 45", d:"اختر مقاسك بسهولة بتوافق أوروبي قياسي."},

            ].map((f,i)=> (

              <div key={i} className="bg-white rounded-2xl p-5 shadow-sm border">

                <h3 className="font-bold mb-1">{f.t}</h3>

                <p className="text-zinc-600 text-sm leading-relaxed">{f.d}</p>

              </div>

            ))}

          </div>

        </div>

      </section>

      {/* التقييمات */}

      <section className="max-w-6xl mx-auto px-4 py-12">

        <div className="flex items-center justify-between mb-4">

          <h2 className="text-2xl md:text-3xl font-extrabold">تقييم العملاء</h2>

          <div className="flex items-center gap-1 text-amber-500" aria-label="متوسط 4.8 من 5">

            {[...Array(5)].map((_,i)=> <Star key={i} className="w-5 h-5 fill-current"/>) }

            <span className="text-zinc-700 text-sm ms-2">4.8/5 (126 مراجعة)</span>

          </div>

        </div>

        <div className="grid md:grid-cols-3 gap-5">

          {[

            {n:"أسامة.", c:"مريح جدًا للمشي اليومي، والخامة ممتازة."},

            {n:"خالد.", c:"ألوانه راقية وينفع للعمل والطلعات."},

            {n:"مازن.", c:"مقاسي مضبوط والنعل خفيف، أنصح به."}

          ].map((r,i)=> (

            <div key={i} className="bg-white rounded-2xl p-5 border shadow-sm">

              <div className="flex items-center gap-2 mb-2">

                {[...Array(5)].map((_,j)=> <Star key={j} className="w-4 h-4 text-amber-500 fill-current"/>)}

                <span className="text-xs text-zinc-500">مشتري موثّق</span>

              </div>

              <p className="text-zinc-700">“{r.c}”</p>

              <p className="text-sm text-zinc-500 mt-2">{r.n}</p>

            </div>

          ))}

        </div>

      </section>

      {/* الأسئلة الشائعة */}

      <section id="faq" className="bg-zinc-50 border-t">

        <div className="max-w-6xl mx-auto px-4 py-12">

          <h2 className="text-2xl md:text-3xl font-extrabold mb-6">الأسئلة الشائعة</h2>

          <div className="grid md:grid-cols-2 gap-5">

            {[

              {q:"هل المقاسات مطابقة للمقاس الأوروبي؟", a:"نعم، ننصح باختيار مقاسك المعتاد. في حال التردد بين مقاسين اختَر الأكبر."},

              {q:"ما سياسة الإرجاع؟", a:"استبدال مجاني أو استرجاع خلال 14 يومًا بشرط بقاء المنتج بحالته الأصلية."},

              {q:"ما مدة الشحن؟", a:"داخل المملكة 48–72 ساعة عمل. قد تختلف المدة للمناطق البعيدة."},

              {q:"ممَّ يتكوّن النعل؟", a:"نعل مرن وخفيف بامتصاص صدمات لتجربة مريحة أثناء الحركة."}

            ].map((f,i)=> (

              <details key={i} className="bg-white rounded-2xl p-5 border shadow-sm">

                <summary className="cursor-pointer font-semibold">{f.q}</summary>

                <p className="text-zinc-600 mt-2">{f.a}</p>

              </details>

            ))}

          </div>

        </div>

      </section>

      {/* تواصل */}

      <section id="contact" className="max-w-6xl mx-auto px-4 py-12">

        <div className="grid md:grid-cols-2 gap-6 items-center">

          <div className="bg-white rounded-2xl p-6 border shadow-sm">

            <h3 className="text-xl font-bold mb-2">هل تحتاج مساعدة في اختيار مقاسك؟</h3>

            <p className="text-zinc-600 mb-4">راسلنا عبر واتساب أو اتصل بنا وسنخدمك فورًا.</p>

            <div className="flex flex-wrap items-center gap-3">

              <a href="https://wa.me/" className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-600 text-white"><MessageCircle className="w-4 h-4"/> تواصل واتساب</a>

              <a href="tel:+966000000000" className="inline-flex items-center gap-2 px-4 py-2 rounded-xl border"><Phone className="w-4 h-4"/> 966xxxxxxxx+</a>

            </div>

          </div>

          <div className="bg-zinc-900 text-white rounded-2xl p-6">

            <h4 className="text-lg font-semibold mb-2">عرض محدود</h4>

            <p className="text-3xl font-extrabold mb-2">خصم 15% عند شراء زوجين</p>

            <p className="text-sm opacity-80">طبِّق الكود: <span className="font-mono">LOUX15</span> — صالح حتى نهاية الشهر</p>

          </div>

        </div>

      </section>

      {/* التذييل */}

      <footer className="bg-zinc-100 border-t">

        <div className="max-w-6xl mx-auto px-4 py-8 text-sm text-zinc-600 flex flex-col md:flex-row gap-2 md:items-center md:justify-between">

          <p>© {new Date().getFullYear()} علامة لوكس — كل الحقوق محفوظة</p>

          <div className="flex gap-4">

            <a href="#" className="hover:underline">الشروط والأحكام</a>

            <a href="#" className="hover:underline">سياسة الخصوصية</a>

          </div>

        </div>

      </footer>

    </div>

  );

}