/**
 * 01 - קומפוננטה ראשונה ב-React
 * 
 * זהו הקובץ הראשון שלנו ב-React!
 * הוא מדגים קומפוננטות בסיסיות וכללי JSX.
 */

// ============================================
// קומפוננטה פשוטה ביותר
// ============================================

function HelloWorld() {
    return <h1>שלום עולם!</h1>;
}

// ============================================
// קומפוננטה עם מספר אלמנטים (Fragment)
// ============================================

function Welcome() {
    return (
        <>
            <h1>ברוכים הבאים!</h1>
            <p>זו האפליקציה הראשונה שלי ב-React</p>
        </>
    );
}

// ============================================
// קומפוננטה עם משתנים
// ============================================

function UserInfo() {
    const name = "דני";
    const age = 25;
    const city = "תל אביב";
    
    return (
        <div className="user-info">
            <h2>פרטי משתמש</h2>
            <p>שם: {name}</p>
            <p>גיל: {age}</p>
            <p>עיר: {city}</p>
        </div>
    );
}

// ============================================
// קומפוננטה עם פונקציה פנימית
// ============================================

function Clock() {
    function getCurrentTime() {
        return new Date().toLocaleTimeString('he-IL');
    }
    
    return (
        <div className="clock">
            <p>השעה הנוכחית: {getCurrentTime()}</p>
        </div>
    );
}

// ============================================
// קומפוננטה עם סגנון inline
// ============================================

function StyledBox() {
    const boxStyle = {
        backgroundColor: '#3498db',
        color: 'white',
        padding: '20px',
        borderRadius: '10px',
        textAlign: 'center'
    };
    
    return (
        <div style={boxStyle}>
            <h2>קופסה מעוצבת</h2>
            <p>זה טקסט בתוך קופסה כחולה</p>
        </div>
    );
}

// ============================================
// קומפוננטה עם תנאי פשוט
// ============================================

function Greeting() {
    const hour = new Date().getHours();
    let greeting;
    
    if (hour < 12) {
        greeting = "בוקר טוב!";
    } else if (hour < 18) {
        greeting = "צהריים טובים!";
    } else {
        greeting = "ערב טוב!";
    }
    
    return <h1>{greeting}</h1>;
}

// ============================================
// קומפוננטה ראשית שמרכיבה הכל
// ============================================

function App() {
    return (
        <div className="app">
            <HelloWorld />
            <hr />
            
            <Welcome />
            <hr />
            
            <UserInfo />
            <hr />
            
            <Clock />
            <hr />
            
            <StyledBox />
            <hr />
            
            <Greeting />
        </div>
    );
}

export default App;

// ============================================
// הערות:
// ============================================
/*
    1. כל קומפוננטה היא פונקציה שמחזירה JSX
    2. שם הקומפוננטה חייב להתחיל באות גדולה (PascalCase)
    3. סוגריים מסולסלים {} להכנסת JavaScript לתוך JSX
    4. Fragment (<> </>) לעטיפת מספר אלמנטים ללא div נוסף
    5. סגנונות inline נכתבים כאובייקט JavaScript
*/