const { useEffect, useState } = React;
const { Link } = ReactRouterDOM;

function HomePage() {
    const [hooks, setHooks] = useState([]);
    
    const fetchHooks = async () => {
        try {
            const res = await fetch('api.php?action=get_hooks');
            const data = await res.json();
            if (data.status === 'success') {
                setHooks(data.data);
            }
        } catch (e) {
            console.error('Failed to fetch hooks');
        }
    };

    useEffect(() => {
        fetchHooks();
    }, []);

    return (
        <div className="d-flex flex-column min-vh-100 bg-light">
            <Header />
            
            <div className="bg-primary text-white py-5 mb-5 texture-bg">
                <div className="container text-center py-4">
                    <h1 className="fw-bold display-4 mb-3">محول ترميز الهاكات</h1>
                    <p className="fs-5 opacity-75 mx-auto" style={{maxWidth: '600px'}}>
                        قم بتحويل هاكات الجيل الثالث والرابع من الترميز اللاتيني  Latin
                        الى الترميز العالمي UTF-8 
                        وذلك بضغطة زر واحدة مجانا ً
                    </p>
                     <div className="d-flex flex-column gap-3 justify-content-center mt-4 flex-wrap">
                        <span className="text-warning fs-6">
                            <i className="fa fa-exclamation-circle ms-2"></i>
                            نقدم خدمة تحويل ترميز المنتدى كاملا ً من الترميز اللاتيني الى الترميز العالمي UTF-8
                        </span>
                        <span className="text-info fs-6">
                            <i className="fa fa-exclamation-circle ms-2"></i>
                            يمكنك طلب الخدمة عن طريق المنتدى
                        </span>
                    </div>
                </div>
            </div>
            
            <main className="flex-grow-1" style={{marginTop: '-60px'}}>
                <div className="container mb-5">
                    <div className="row flex-row-reverse gx-xl-5">
                        <div className="col-lg-5 mb-4 mb-lg-0 z-1 ">
                            <ConverterForm onSuccess={fetchHooks} />
                        </div>
                        
                        <div className="col-lg-7 z-1 ">
                            <HooksList hooks={hooks} refreshHooks={fetchHooks} isHomePage={true} />
                        </div>
                    </div>
                </div>
            </main>

            <footer className="mt-auto py-5 bg-white shadow-sm border-top">
                <div className="container">
                    <div className="row align-items-center">
                        <div className="col-md-6 text-end text-md-end mb-3 mb-md-0">
                            <span className="fw-bold text-primary fs-6">محول الترميز</span>
                            <span className="text-muted me-1">جميع الحقوق محفوظة &copy; 2026 - 2027</span>
                        </div>
                        <div className="col-md-6 text-start text-md-start text-muted">
                           <span> برمجة وتطوير </span>
                            <a href="https://www.shqawe.net/" target="_blank" className="fw-bold" title="شقاوي لخدمات البرمجة والتصميم">
                                ShqawE
                            </a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}