app.py

import streamlit as st

# إعداد الصفحة
st.set_page_config(
    page_title="الوكيل الصوتي الذكي",
    layout="wide",
    initial_sidebar_state="collapsed"
)

# CSS مخصص
st.markdown("""
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

        html, body, [class*="css"] {
            font-family: 'Cairo', sans-serif;
            background-color: #0f1117;
        }

        .full-screen {
            min-height: 100vh;
            width: 100%;
            background: linear-gradient(-45deg, #2193b0, #6dd5ed, #1e3c72, #2a5298);
            background-size: 400% 400%;
            animation: gradientBG 10s ease infinite;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            padding: 60px 20px;
            border-radius: 0 0 40px 40px;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .logo-container img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid white;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
            animation: glow 3s infinite alternate;
        }

        @keyframes glow {
            0% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
            100% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.9); }
        }

        h1 {
              font-size: 3.5rem;
              font-weight: 700;
              margin: 20px 0;
              color: #ffffff;
        }

        p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 20px auto;
            opacity: 0.9;
            color: rgba(255, 255, 255, 0.95);
        }

        .cta-buttons {
            margin-top: 30px;
        }

        .cta-buttons a {
            background: #00bcd4;
            color: white;
            font-size: 1.1rem;
            font-weight: bold;
            text-decoration: none;
            padding: 12px 30px;
            border-radius: 30px;
            transition: 0.3s;
            box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
        }

        .cta-buttons a:hover {
            background: #0097a7;
            box-shadow: 0 6px 20px rgba(0, 188, 212, 0.6);
            transform: translateY(-3px);
        }

        .about-section {
            background-color: #ffffff;
            color: #222;
            border-radius: 30px;
            padding: 70px 40px;
            max-width: 1100px;
            margin: 80px auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .about-section h2 {
            font-size: 3rem;
            color: #0f1117;
            margin-bottom: 25px;
            font-weight: 800;
        }

        .about-section p {
            font-size: 1.3rem;
            color: #555;
            margin: 0 auto 50px;
            max-width: 750px;
        }

        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 35px;
        }

        .feature {
            background: linear-gradient(135deg, #ffffff, #f7f7f7);
            border-radius: 25px;
            padding: 35px 25px;
            width: 280px;
            text-align: center;
            box-shadow: 0 6px 18px rgba(0,0,0,0.1);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .feature:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 24px rgba(0,0,0,0.15);
        }

        .feature img {
            width: 64px;
            height: 64px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .feature:hover img {
            transform: rotate(6deg) scale(1.1);
        }

        .feature h4 {
            font-size: 1.4rem;
            color: #0077b6;
            margin-bottom: 12px;
            font-weight: 700;
        }

        .feature p {
            font-size: 1.05rem;
            color: #444;
        }

        .feature:nth-child(1) { background: #fef6f0; }
        .feature:nth-child(2) { background: #f0f8ff; }
        .feature:nth-child(3) { background: #f4f4fe; }

    </style>
""", unsafe_allow_html=True)

# واجهة الوكيل الصوتي
st.markdown("""
    <div class="full-screen">
        <div class="logo-container">
            <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Voice Assistant">
        </div>
        <h1>وكيلك الصوتي الذكي</h1>
        <p>
            تحدث، ودع وكيلنا الذكي يتولى المهمة!<br>
            حجوزاتك وطلباتك تُنجز بسهولة واحترافية.
        </p>
        <div class="cta-buttons">
            <a href="https://vapi.ai?demo=true&shareKey=f612978f-043a-48ad-8133-d5902b2aba32&assistantId=acdaf234-999f-4fc9-b229-d51e1d9fd10d" target="_blank">
                تواصل مع وكيلك الآن 
            </a>
        </div>
    </div>

    <div class="about-section">
        <h2>من نحن</h2>
        <p>نحن فريق تقني نؤمن بقوة الذكاء الاصطناعي في تسهيل حياتك اليومية، من خلال مساعد ذكي صوتي يفهمك ويتفاعل معك.</p>
        <div class="features">
            <div class="feature">
                <img src="https://cdn-icons-png.flaticon.com/512/3595/3595455.png" alt="Booking">
                <h4>سهولة الحجز</h4>
                <p>إجراء الحجوزات في العيادات والمطاعم بكل سهولة ويسر.</p>
            </div>
            <div class="feature">
                <img src="https://cdn-icons-png.flaticon.com/512/2099/2099058.png" alt="Recording">
                <h4>تسجيل دقيق</h4>
                <p>تسجيل الأوامر والطلبات الصوتية بدقة واحترافية عالية.</p>
            </div>
            <div class="feature">
                <img src="https://cdn-icons-png.flaticon.com/512/4712/4712006.png" alt="Interaction">
                <h4>تفاعل ذكي</h4>
                <p>الرد الفوري والتفاعل الطبيعي مع محادثاتك وكأنك تتحدث مع إنسان.</p>
            </div>
        </div>
    </div>
""", unsafe_allow_html=True)