import { useState, useEffect } from “react”; import { Button } from “@/components/ui/button”; import { Card, CardContent } from “@/components/ui/card”; import { Input } from “@/components/ui/input”; import { motion } from “framer-motion”; import { Search } from “lucide-react”;// 🔥 MOCK DATABASE (Replace with Supabase / Firebase) const toolsDB = [ { id: 1, name: “ChatGPT Tool”, desc: “أداة كتابة ذكية”, link: “#” }, { id: 2, name: “Image AI”, desc: “توليد صور بالذكاء”, link: “#” }, { id: 3, name: “Video AI”, desc: “إنشاء فيديو تلقائي”, link: “#” }, ];export default function FullSystemHomePage() { const [search, setSearch] = useState(“”); const [tools, setTools] = useState(toolsDB);// 🔍 SEARCH FUNCTION useEffect(() => { const filtered = toolsDB.filter((tool) => tool.name.toLowerCase().includes(search.toLowerCase()) ); setTools(filtered); }, [search]);return ( ); }/* 🚀 SYSTEM ARCHITECTURE (IMPORTANT)1. FRONTEND: – Next.js + Tailwind2. BACKEND: – Supabase (Auth + DB)3. DATABASE TABLES: – tools (name, desc, link, category) – users (email, favorites) – posts (blog)4. FEATURES: – تسجيل دخول – حفظ الأدوات – نظام بحث – صفحات SEO لكل أداة5. MONETIZATION: – Affiliate links – Digital products6. AUTOMATION: – n8n لجدولة النشر*/