HJ للإستشارات المالية والتكنولوجيا

import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowLeft, BarChart3, BriefcaseBusiness, LineChart, Target, BookOpen, MessageCircle, ShieldCheck } from "lucide-react";
export default function HJFinancialWebsite() {
  const services = [
    {
      icon: <BarChart3 className="w-7 h-7" />,
      title: "الاستشارات المالية الشخصية",
      desc: "تحليل الدخل والمصاريف، بناء خطط سداد، تنظيم الميزانية، وتحويل الفوضى المالية إلى قرارات واضحة."
    },
    {
      icon: <BriefcaseBusiness className="w-7 h-7" />,
      title: "استشارات المشاريع والأعمال",
      desc: "تطوير الأفكار، دراسة الجدوى، تحسين التشغيل، التسعير، وتقليل الهدر داخل المشاريع الصغيرة والمتوسطة."
    },
    {
      icon: <LineChart className="w-7 h-7" />,
      title: "الوعي المالي والاستثماري",
      desc: "تبسيط مفاهيم الاقتصاد، التضخم، الاستثمار، إدارة المخاطر، وبناء عقلية مالية أكثر نضجاً."
    },
    {
      icon: <Target className="w-7 h-7" />,
      title: "التدريب والتطوير",
      desc: "برامج تدريبية عملية في المال، الإنتاجية، اتخاذ القرار، والسلوك المالي للأفراد ورواد الأعمال."
    }
  ];
  const articles = [
    "لماذا يفشل الناس مالياً رغم ارتفاع الدخل؟",
    "العلاقة بين الاقتصاد والسلوك المالي اليومي",
    "كيف تحمي أموالك من التضخم؟",
    "إدارة الوقت والمال: أساس الاستقلال المالي"
  ];
  return (
    <div dir="rtl" className="min-h-screen bg-[#07111f] text-white font-sans">
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#07111f] via-[#0d1f35] to-[#030712]" />
        <div className="absolute top-0 left-0 w-96 h-96 bg-yellow-500/10 blur-3xl rounded-full" />
        <div className="relative max-w-7xl mx-auto px-6 py-8">
          <nav className="flex items-center justify-between mb-20">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-yellow-400 to-yellow-700 flex items-center justify-center text-[#07111f] font-black text-xl shadow-lg">
                HJ
              </div>
              <div>
                <p className="font-bold text-lg">حجي وليد الحجي</p>
                <p className="text-sm text-gray-300">Financial & Business Consultant</p>
              </div>
            </div>
            <div className="hidden md:flex items-center gap-8 text-sm text-gray-300">
              <a href="#services" className="hover:text-yellow-400">الخدمات</a>
              <a href="#articles" className="hover:text-yellow-400">المقالات</a>
              <a href="#about" className="hover:text-yellow-400">من أنا</a>
              <a href="#contact" className="hover:text-yellow-400">تواصل</a>
            </div>
          </nav>
          <div className="grid lg:grid-cols-2 gap-12 items-center pb-24">
            <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
              <p className="text-yellow-400 font-semibold mb-4">استشارات مالية • إدارة مشاريع • وعي اقتصادي</p>
              <h1 className="text-4xl md:text-6xl font-black leading-tight mb-6">
                ابنِ وعيك المالي… ثم ابنِ مشروعك وثروتك بقرارات أذكى
              </h1>
              <p className="text-lg text-gray-300 leading-9 mb-8">
                منصة متخصصة في تبسيط المال والاقتصاد وإدارة المشاريع للأفراد ورواد الأعمال، بأسلوب عملي يجمع بين التحليل المالي، السلوك المعرفي، والخبرة الواقعية في السوق.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button className="bg-yellow-500 hover:bg-yellow-600 text-[#07111f] font-bold rounded-2xl px-7 py-6 text-base">
                  احجز استشارة أولية <ArrowLeft className="mr-2 w-5 h-5" />
                </Button>
                <Button variant="outline" className="border-yellow-500/50 text-yellow-300 hover:bg-yellow-500/10 rounded-2xl px-7 py-6 text-base">
                  تصفح المقالات
                </Button>
              </div>
            </motion.div>
            <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.8 }}>
              <Card className="bg-white/8 border-white/10 rounded-[2rem] shadow-2xl backdrop-blur">
                <CardContent className="p-8">
                  <div className="flex items-center justify-between mb-8">
                    <div>
                      <p className="text-gray-300 text-sm">منهجية HJ</p>
                      <h2 className="text-2xl font-bold text-white">من الفوضى إلى القرار</h2>
                    </div>
                    <ShieldCheck className="text-yellow-400 w-10 h-10" />
                  </div>
                  <div className="space-y-5">
                    {["تشخيص الوضع المالي أو التشغيلي", "تحديد مصادر الخلل والهدر", "بناء خطة عملية بالأرقام", "متابعة التنفيذ وتحسين القرار"].map((item, i) => (
                      <div key={item} className="flex items-center gap-4 bg-white/5 rounded-2xl p-4">
                        <div className="w-9 h-9 rounded-xl bg-yellow-500 text-[#07111f] flex items-center justify-center font-black">{i + 1}</div>
                        <p className="text-gray-100">{item}</p>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </div>
      </section>
      <section id="services" className="max-w-7xl mx-auto px-6 py-20">
        <div className="mb-12">
          <p className="text-yellow-400 font-semibold mb-3">الخدمات</p>
          <h2 className="text-3xl md:text-4xl font-black">حلول عملية للمال والمشاريع</h2>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {services.map((service) => (
            <Card key={service.title} className="bg-white/7 border-white/10 rounded-3xl hover:bg-white/10 transition">
              <CardContent className="p-6">
                <div className="text-yellow-400 mb-5">{service.icon}</div>
                <h3 className="text-xl font-bold mb-4 text-white">{service.title}</h3>
                <p className="text-gray-300 leading-8">{service.desc}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>
      <section id="about" className="bg-[#0b1a2d] py-20">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="text-yellow-400 font-semibold mb-3">من أنا</p>
            <h2 className="text-3xl md:text-4xl font-black mb-6">خبرة واقعية في المال والأعمال… وليست تنظيراً فقط</h2>
            <p className="text-gray-300 leading-9 text-lg">
              أنا حجي وليد الحجي، أعمل على بناء هوية استشارية تجمع بين المال، الاقتصاد، إدارة المشاريع، والسلوك المالي. أؤمن أن النجاح المالي لا يبدأ من الدخل فقط، بل من طريقة التفكير، جودة القرار، والانضباط في التنفيذ.
            </p>
          </div>
          <div className="grid sm:grid-cols-2 gap-5">
            {["إدارة وتطوير المشاريع", "التخطيط المالي الشخصي", "دراسة الجدوى والتسعير", "المحتوى والتدريب المالي"].map((x) => (
              <div key={x} className="rounded-3xl bg-white/7 border border-white/10 p-6">
                <BookOpen className="text-yellow-400 mb-4" />
                <p className="font-bold text-lg">{x}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section id="articles" className="max-w-7xl mx-auto px-6 py-20">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12">
          <div>
            <p className="text-yellow-400 font-semibold mb-3">المقالات</p>
            <h2 className="text-3xl md:text-4xl font-black">محتوى يبني الوعي المالي والاقتصادي</h2>
          </div>
          <Button variant="outline" className="border-yellow-500/50 text-yellow-300 hover:bg-yellow-500/10 rounded-2xl px-6 py-5 w-fit">
            عرض جميع المقالات
          </Button>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {articles.map((article) => (
            <Card key={article} className="bg-white/7 border-white/10 rounded-3xl hover:-translate-y-1 transition">
              <CardContent className="p-6">
                <p className="text-sm text-yellow-400 mb-4">مقال LinkedIn</p>
                <h3 className="text-xl font-bold leading-8 mb-5 text-white">{article}</h3>
                <p className="text-gray-400">اقرأ المزيد ←</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>
      <section id="contact" className="max-w-7xl mx-auto px-6 pb-24">
        <div className="rounded-[2rem] bg-gradient-to-l from-yellow-500 to-yellow-700 p-8 md:p-12 text-[#07111f] flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8 shadow-2xl">
          <div>
            <h2 className="text-3xl md:text-4xl font-black mb-4">هل تريد تشخيص وضعك المالي أو تطوير مشروعك؟</h2>
            <p className="text-lg font-medium max-w-3xl">
              ابدأ باستشارة أولية لفهم وضعك الحالي، تحديد نقاط الخلل، وبناء خطة عملية قابلة للتنفيذ.
            </p>
          </div>
          <Button className="bg-[#07111f] hover:bg-[#0d1f35] text-white rounded-2xl px-7 py-6 text-base font-bold">
            <MessageCircle className="ml-2 w-5 h-5" /> تواصل الآن
          </Button>
        </div>
      </section>
      <footer className="border-t border-white/10 py-8 text-center text-gray-400">
        <p>© HJ Financial & Business Consulting — حجي وليد الحجي</p>
      </footer>
    </div>
  );
}