import { useState } from 'react';

export default function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [savedProducts, setSavedProducts] = useState({});

  const toggleSave = (id) => {
    setSavedProducts((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

  const products = [
    {
      id: 1,
      name: "ماكينة التطريز الأوتوماتيكية RX-3000",
      description: "ماكينة متطورة لتطريز جميع أنواع القماش بجودة عالية ودقة في التفاصيل.",
      price: "12,500 ريال",
    },
    {
      id: 2,
      name: "ماكينة الخياطة الصناعية TX-900",
      description: "ماكينة خياطة صناعية قوية، مناسبة لمصانع الخياطة والورش الكبيرة.",
      price: "8,900 ريال",
    },
    {
      id: 3,
      name: "ماكينة متعددة الوظائف MX-500",
      description: "تجمع بين التطريز والخياطة بتصميم ذكي وسهل الاستخدام.",
      price: "7,300 ريال",
    },
    {
      id: 4,
      name: "ماكينة تطريز صغيرة RX-100",
      description: "مناسبة للمستخدمين المنزليين أو الورش الصغيرة مع أداء ممتاز.",
      price: "4,200 ريال",
    },
  ];

  return (
    <div className="font-sans text-gray-800 bg-white">
      {/* Header */}
      <header className="bg-gradient-to-r from-blue-700 to-indigo-800 text-white shadow-lg sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold">Richtex</h1>
          <nav className="hidden md:flex space-x-6">
            <a href="#home" className="hover:text-yellow-300 transition">الرئيسية</a>
            <a href="#products" className="hover:text-yellow-300 transition">المنتجات</a>
            <a href="#about" className="hover:text-yellow-300 transition">عن الموقع</a>
            <a href="#contact" className="hover:text-yellow-300 transition">اتصل بنا</a>
          </nav>
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            className="md:hidden focus:outline-none"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
          </button>
        </div>
        {/* Mobile Menu */}
        {menuOpen && (
          <div className="md:hidden bg-indigo-900 p-4">
            <a href="#home" className="block py-2 hover:text-yellow-300">الرئيسية</a>
            <a href="#products" className="block py-2 hover:text-yellow-300">المنتجات</a>
            <a href="#about" className="block py-2 hover:text-yellow-300">عن الموقع</a>
            <a href="#contact" className="block py-2 hover:text-yellow-300">اتصل بنا</a>
          </div>
        )}
      </header>

      {/* Hero Section */}
      <section id="home" className="bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 py-20">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 mb-10 md:mb-0">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-4">
              Richtex - ماكينات التطريز والخياطة
            </h2>
            <p className="text-lg text-gray-600 mb-6">
              اكتشف أفضل ماكينات الخياطة والتطريز ذات الجودة العالية والمرونة في الاستخدام.
            </p>
            <a
              href="#products"
              className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-semibold transition"
            >
              استعرض المنتجات
            </a>
          </div>
          <div className="md:w-1/2">
            <SewingMachineSVG className="w-full h-auto rounded-lg shadow-xl" />
          </div>
        </div>
      </section>

      {/* Products Section */}
      <section id="products" className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">المنتجات المميزة</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {products.map((product) => (
              <div
                key={product.id}
                className="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition transform hover:-translate-y-1"
              >
                <div className="relative h-48 bg-gray-100 flex items-center justify-center">
                  <SewingMachineSVG className="h-36 w-auto" />
                  <span className="absolute bottom-2 right-2 text-xs bg-blue-600 text-white px-2 py-1 rounded">Richtex</span>
                  <button
                    onClick={() => toggleSave(product.id)}
                    className={`absolute top-2 left-2 p-2 rounded-full ${
                      savedProducts[product.id] ? 'bg-red-500' : 'bg-gray-200'
                    }`}
                    aria-label="حفظ المنتج"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className={`h-5 w-5 ${savedProducts[product.id] ? 'text-white' : 'text-gray-600'}`}
                      viewBox="0 0 20 20"
                      fill={savedProducts[product.id] ? 'currentColor' : 'none'}
                      stroke={savedProducts[product.id] ? 'none' : 'currentColor'}
                      strokeWidth="1.5"
                    >
                      <path
                        fillRule="evenodd"
                        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </button>
                </div>
                <div className="p-5">
                  <h3 className="text-xl font-semibold text-gray-800 mb-2">{product.name}</h3>
                  <p className="text-gray-600 mb-4 text-sm">{product.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-lg font-bold text-blue-600">{product.price}</span>
                    <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm transition">
                      شراء الآن
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">عن Richtex</h2>
          <div className="max-w-3xl mx-auto text-center">
            <p className="text-lg text-gray-700 mb-6">
              Richtex هو وجهتك الأولى لشراء ماكينات التطريز والخياطة عالية الجودة. نقدم لك مجموعة متنوعة من ماكينات تتناسب مع الاستخدام المنزلي والصناعي.
            </p>
            <p className="text-lg text-gray-700">
              مع دعم فني متميز وضمان على جميع المنتجات، نحن نحرص على تقديم أفضل تجربة تسوق إلكترونية لك.
            </p>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">تواصل معنا</h2>
          <div className="max-w-3xl mx-auto">
            <form className="space-y-4">
              <input type="text" placeholder="الاسم الكامل" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
              <input type="email" placeholder="البريد الإلكتروني" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
              <textarea placeholder="رسالتك" rows="5" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
              <button
                type="submit"
                className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition"
              >
                إرسال الرسالة
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-10">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between">
            <div className="mb-6 md:mb-0">
              <h3 className="text-xl font-bold mb-2">Richtex</h3>
              <p className="text-gray-400">أفضل ماكينات التطريز والخياطة</p>
            </div>
            <div>
              <p className="text-gray-400">&copy; 2025 Richtex. جميع الحقوق محفوظة.</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

// SVG لماكينة الخياطة
function SewingMachineSVG({ className }) {
  return (
    <svg className={className} viewBox="0 0 200 150" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="20" y="60" width="160" height="70" rx="10" fill="#E5E7EB" stroke="#9CA3AF" strokeWidth="2"/>
      <circle cx="50" cy="40" r="20" fill="#D1D5DB" stroke="#9CA3AF" strokeWidth="2"/>
      <rect x="100" y="30" width="40" height="20" rx="4" fill="#F3F4F6" stroke="#9CA3AF" strokeWidth="2"/>
      <line x1="50" y1="60" x2="120" y2="60" stroke="#9CA3AF" strokeWidth="2"/>
      <text x="100" y="140" fontSize="10" fontWeight="bold" fill="#374151">Richtex</text>
    </svg>
  );
}