import reflex as rx

class State(rx.State):
    form_submitted: bool = False
    
    def handle_submit(self):
        self.form_submitted = True
        return rx.toast.success("پیام شما با موفقیت ارسال شد!")

def navbar() -> rx.Component:
    return rx.box(
        rx.hstack(
            rx.hstack(
                rx.image(src="/logo.png", width="50px", height="50px"),
                rx.heading("پیکربند", size="7", 
                          background="linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5)",
                          background_clip="text",
                          style={"-webkit-background-clip": "text", "-webkit-text-fill-color": "transparent"},
                          letter_spacing="1px", 
                          font_weight="900"),
                spacing="3",
                align="center",
            ),
            rx.spacer(),
            rx.hstack(
                rx.link("خدمات", href="#services", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
                # rx.link("قیمت‌ها", href="#pricing", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
                # rx.link("سرورها", href="#servers", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
                # rx.link("نظرات", href="#testimonials", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
                # rx.link("تماس", href="#contact", color="#E2E8F0", font_weight="600", font_size="16px", _hover={"color": "#6DD7E5", "transform": "translateY(-2px)"}, transition="all 0.2s"),
                rx.button(
                    rx.hstack(
                        rx.text("شروع رایگان", font_weight="800"),
                        rx.icon("arrow-left", size=18),
                        spacing="2",
                        align="center",
                    ),
                    background="linear-gradient(135deg, #1B4B7F 0%, #4DB8C4 50%, #6DD7E5 100%)",
                    color="white",
                    border_radius="full",
                    padding="16px 36px",
                    font_size="16px",
                    box_shadow="0 12px 35px rgba(77, 184, 196, 0.7), 0 0 60px rgba(109, 215, 229, 0.3)",
                    _hover={
                        "transform": "translateY(-4px) scale(1.08)", 
                        "box_shadow": "0 18px 50px rgba(109, 215, 229, 0.9), 0 0 80px rgba(109, 215, 229, 0.5)"
                    },
                    transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
                    style={"animation": "glow 3s ease-in-out infinite"},
                ),
                spacing="8",
            ),
            width="100%",
            align="center",
        ),
        position="fixed",
        top="0",
        width="100%",
        backdrop_filter="blur(20px) saturate(180%)",
        background="rgba(5, 10, 20, 0.92)",
        border_bottom="1px solid rgba(109, 215, 229, 0.3)",
        padding="20px 8%",
        z_index="1000",
        box_shadow="0 8px 32px rgba(0, 0, 0, 0.4)",
    )

def hero() -> rx.Component:
    return rx.box(
        # Background decorative layers
        rx.box(
            rx.box(
                width="600px",
                height="600px",
                background="radial-gradient(circle, rgba(27, 75, 127, 0.3) 0%, transparent 70%)",
                position="absolute",
                top="-200px",
                left="-100px",
                border_radius="50%",
                filter="blur(100px)",
                style={"animation": "floatSlow 20s ease-in-out infinite"},
            ),
            rx.box(
                width="500px",
                height="500px",
                background="radial-gradient(circle, rgba(77, 184, 196, 0.25) 0%, transparent 70%)",
                position="absolute",
                top="100px",
                right="-150px",
                border_radius="50%",
                filter="blur(80px)",
                style={"animation": "floatSlow 18s ease-in-out infinite reverse"},
            ),
            rx.box(
                width="400px",
                height="400px",
                background="radial-gradient(circle, rgba(109, 215, 229, 0.2) 0%, transparent 70%)",
                position="absolute",
                bottom="-100px",
                right="20%",
                border_radius="50%",
                filter="blur(90px)",
                style={"animation": "floatSlow 22s ease-in-out infinite"},
            ),
            position="absolute",
            width="100%",
            height="100%",
            overflow="hidden",
            z_index="0",
        ),
        # Main content with floating cards
        rx.hstack(
            rx.vstack(
                rx.badge(
                    rx.hstack(
                        rx.icon("clock", size=20, color="#fbbf24"),
                        rx.text("بزودی کنار شما خواهیم بود", font_weight="800", font_size="16px"),
                        rx.icon("zap", size=20, color="#fbbf24"),
                        spacing="3",
                        align="center",
                    ),
                    variant="outline",
                    padding="18px 42px",
                    border_radius="full",
                    background="linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2))",
                    border="3px solid rgba(251, 191, 36, 0.7)",
                    box_shadow="0 12px 50px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.3)",
                    margin_bottom="32px",
                    font_size="17px",
                    style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"},
                ),
                rx.heading(
                    "میزبانی وب و زیرساخت ابری ",
                    rx.el.span("حرفه‌ای", 
                           style={
                               "background": "linear-gradient(135deg, #4DB8C4, #6DD7E5, #7CE3F2)",
                               "background-clip": "text",
                               "-webkit-background-clip": "text", 
                               "-webkit-text-fill-color": "transparent",
                               "animation": "gradientShift 4s ease infinite",
                               "background-size": "200% auto",
                           }),
                    size="9",
                    font_weight="900",
                    line_height="1.2",
                    letter_spacing="-0.02em",
                    margin_top="24px",
                    color="#FFFFFF",
                    style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"},
                ),
                rx.text(
                    "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
                    rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#8B9EB8"}),
                    color="#C7D2E8",
                    font_size="20px",
                    line_height="1.8",
                    max_width="650px",
                    font_weight="400",
                    margin_top="28px",
                    margin_bottom="16px",
                    opacity="0.95",
                    style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"},
                ),
                rx.hstack(
                    rx.button(
                        rx.hstack(
                            rx.icon("message-circle", size=20),
                            rx.text("مشاوره رایگان", font_weight="700", font_size="17px"),
                            spacing="2",
                            align="center",
                        ),
                        size="4",
                        background="linear-gradient(135deg, #4DB8C4, #6DD7E5)",
                        color="#FFFFFF",
                        border_radius="12px",
                        padding="24px 48px",
                        box_shadow="0 10px 35px rgba(77, 184, 196, 0.5), 0 0 50px rgba(109, 215, 229, 0.3)",
                        _hover={
                            "transform": "translateY(-4px)", 
                            "box_shadow": "0 15px 50px rgba(77, 184, 196, 0.7), 0 0 70px rgba(109, 215, 229, 0.5)"
                        },
                        transition="all 0.3s ease",
                        style={"animation": "fadeInUp 0.8s ease-out 0.8s backwards"},
                    ),
                    rx.button(
                        rx.hstack(
                            rx.icon("play", size=18),
                            rx.text("مشاهده ویدیو", font_weight="700", font_size="17px"),
                            spacing="2",
                            align="center",
                        ),
                        size="4",
                        variant="outline",
                        border="2px solid rgba(77, 184, 196, 0.5)",
                        color="#6DD7E5",
                        border_radius="12px",
                        padding="24px 48px",
                        background="rgba(77, 184, 196, 0.05)",
                        backdrop_filter="blur(10px)",
                        _hover={
                            "background": "rgba(77, 184, 196, 0.15)", 
                            "transform": "translateY(-4px)", 
                            "border": "2px solid #6DD7E5"
                        },
                        transition="all 0.3s ease",
                        style={"animation": "fadeInUp 0.8s ease-out 1s backwards"},
                    ),
                    spacing="6",
                    margin_top="56px",
                ),
                # Domain Search Box - BluisHost inspired
                rx.box(
                    rx.vstack(
                        rx.text(
                            "دامنه خود را جستجو کنید",
                            font_size="20px",
                            font_weight="700",
                            color="#FFFFFF",
                            margin_bottom="16px",
                        ),
                        rx.box(
                            rx.hstack(
                                rx.input(
                                    placeholder="نام دامنه خود را وارد کنید...",
                                    size="3",
                                    width="100%",
                                    border="none",
                                    background="transparent",
                                    color="#FFFFFF",
                                    font_size="16px",
                                    padding="24px",
                                    _placeholder={"color": "rgba(255, 255, 255, 0.5)"},
                                    _focus={"outline": "none"},
                                ),
                                rx.button(
                                    rx.hstack(
                                        rx.icon("search", size=20),
                                        rx.text("جستجو", font_weight="700"),
                                        spacing="2",
                                    ),
                                    size="3",
                                    background="linear-gradient(135deg, #4DB8C4, #6DD7E5)",
                                    color="#FFFFFF",
                                    padding="24px 36px",
                                    border_radius="10px",
                                    _hover={"transform": "scale(1.05)"},
                                    transition="all 0.3s ease",
                                ),
                                spacing="0",
                                width="100%",
                                align="center",
                            ),
                            background="rgba(27, 75, 127, 0.15)",
                            backdrop_filter="blur(20px)",
                            border="1px solid rgba(77, 184, 196, 0.3)",
                            border_radius="14px",
                            padding="8px",
                            box_shadow="0 8px 32px rgba(0, 0, 0, 0.3)",
                        ),
                        # Domain extensions
                        rx.hstack(
                            rx.box(
                                rx.text(".ir", font_weight="600", color="#6DD7E5"),
                                padding="8px 16px",
                                background="rgba(77, 184, 196, 0.1)",
                                border="1px solid rgba(77, 184, 196, 0.3)",
                                border_radius="8px",
                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
                                transition="all 0.3s ease",
                            ),
                            rx.box(
                                rx.text(".com", font_weight="600", color="#6DD7E5"),
                                padding="8px 16px",
                                background="rgba(77, 184, 196, 0.1)",
                                border="1px solid rgba(77, 184, 196, 0.3)",
                                border_radius="8px",
                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
                                transition="all 0.3s ease",
                            ),
                            rx.box(
                                rx.text(".net", font_weight="600", color="#6DD7E5"),
                                padding="8px 16px",
                                background="rgba(77, 184, 196, 0.1)",
                                border="1px solid rgba(77, 184, 196, 0.3)",
                                border_radius="8px",
                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
                                transition="all 0.3s ease",
                            ),
                            rx.box(
                                rx.text(".org", font_weight="600", color="#6DD7E5"),
                                padding="8px 16px",
                                background="rgba(77, 184, 196, 0.1)",
                                border="1px solid rgba(77, 184, 196, 0.3)",
                                border_radius="8px",
                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
                                transition="all 0.3s ease",
                            ),
                            rx.box(
                                rx.text(".io", font_weight="600", color="#6DD7E5"),
                                padding="8px 16px",
                                background="rgba(77, 184, 196, 0.1)",
                                border="1px solid rgba(77, 184, 196, 0.3)",
                                border_radius="8px",
                                _hover={"background": "rgba(77, 184, 196, 0.2)", "cursor": "pointer"},
                                transition="all 0.3s ease",
                            ),
                            spacing="4",
                            margin_top="16px",
                            wrap="wrap",
                        ),
                        align="center",
                    ),
                    max_width="700px",
                    margin_top="48px",
                    style={"animation": "fadeInUp 0.8s ease-out 1.2s backwards"},
                ),
                rx.hstack(
                    rx.hstack(
                        rx.icon("check", size=18, color="#10B981"),
                        rx.text("پشتیبانی 24/7", color="#CBD5E1", font_size="15px", font_weight="600"),
                        spacing="2",
                        align="center",
                    ),
                    rx.hstack(
                        rx.icon("check", size=18, color="#10B981"),
                        rx.text("امنیت بالا", color="#CBD5E1", font_size="15px", font_weight="600"),
                        spacing="2",
                        align="center",
                    ),
                    rx.hstack(
                        rx.icon("check", size=18, color="#10B981"),
                        rx.text("سرعت فوق‌العاده", color="#CBD5E1", font_size="15px", font_weight="600"),
                        spacing="2",
                        align="center",
                    ),
                    spacing="8",
                    margin_top="40px",
                ),
                spacing="8",
                align="start",
                width="100%",
                position="relative",
                z_index="1",
            ),
            rx.box(
                rx.box(
                    # Background glow
                    rx.box(
                        width="500px",
                        height="500px",
                        background="radial-gradient(circle, rgba(77, 184, 196, 0.12) 0%, transparent 70%)",
                        position="absolute",
                        top="50%",
                        left="50%",
                        transform="translate(-50%, -50%)",
                        border_radius="50%",
                        filter="blur(50px)",
                        style={"animation": "pulse 4s ease-in-out infinite"},
                    ),
                    # Main illustration - BluisHost style isometric servers
                    rx.box(
                        rx.image(
                            src="/hero-servers.svg",
                            width="600px",
                            height="auto",
                            filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
                            style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 6s ease-in-out 1.5s infinite"},
                        ),
                        position="relative",
                    ),
                    position="relative",
                ),
                display=["none", "none", "none", "block"],
                position="relative",
                z_index="1",
            ),
            spacing="9",
            align="center",
            width="100%",
            max_width="1500px",
            margin="0 auto",
            padding="200px 8% 160px",
        ),
        width="100%",
        background="linear-gradient(135deg, #0a1e3d 0%, #091428 30%, #050a14 60%, #020509 100%)",
        position="relative",
        overflow="hidden",
    )

def wordpress_cloud_highlight() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.hstack(
                rx.vstack(
                    rx.badge(
                        rx.hstack(
                            rx.icon("award", size=20, color="#F59E0B"),
                            rx.text("تخصصی و پیشرو", font_weight="700"),
                            spacing="2",
                            align="center",
                        ),
                        background="linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.2))",
                        border="2px solid rgba(245, 158, 11, 0.5)",
                        padding="12px 28px",
                        border_radius="full",
                        font_size="16px",
                        box_shadow="0 8px 30px rgba(245, 158, 11, 0.4)",
                    ),
                    rx.heading(
                        "اولین ارائه‌دهنده تخصصی ",
                        rx.el.span("وردپرس کلود", 
                               style={
                                   "background": "linear-gradient(135deg, #F59E0B, #FB923C, #F97316)",
                                   "background-clip": "text",
                                   "-webkit-background-clip": "text",
                                   "-webkit-text-fill-color": "transparent"
                               }),
                        " در ایران",
                        size="9",
                        font_weight="900",
                        line_height="1.2",
                        letter_spacing="-0.03em",
                        text_align=["center", "center", "right"],
                    ),
                    rx.text(
                        "با کلود اختصاصی وردپرس، سایت شما را با سرعت، امنیت و مدیریت هوشمند تجربه کنید. بدون نگرانی از فنی‌ها، فقط روی کسب‌وکارتان تمرکز کنید",
                        color="#CBD5E1",
                        font_size="20px",
                        line_height="1.8",
                        font_weight="500",
                        max_width="600px",
                        text_align=["center", "center", "right"],
                    ),
                    rx.vstack(
                        rx.hstack(
                            rx.box(
                                rx.icon("check", size=24, color="#10B981"),
                                width="48px",
                                height="48px",
                                background="linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2))",
                                border_radius="12px",
                                display="flex",
                                align_items="center",
                                justify_content="center",
                            ),
                            rx.vstack(
                                rx.text("مدیریت خودکار", font_weight="800", font_size="18px", color="white"),
                                rx.text("بروزرسانی، بکاپ و امنیت به صورت کاملا اتوماتیک", color="#94A3B8", font_size="15px"),
                                spacing="1",
                                align="start",
                            ),
                            spacing="4",
                            align="start",
                        ),
                        rx.hstack(
                            rx.box(
                                rx.icon("zap", size=24, color="#F59E0B"),
                                width="48px",
                                height="48px",
                                background="linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.2))",
                                border_radius="12px",
                                display="flex",
                                align_items="center",
                                justify_content="center",
                            ),
                            rx.vstack(
                                rx.text("بهینه‌سازی حرفه‌ای", font_weight="800", font_size="18px", color="white"),
                                rx.text("کش پیشرفته، CDN و بهینه‌سازی دیتابیس", color="#94A3B8", font_size="15px"),
                                spacing="1",
                                align="start",
                            ),
                            spacing="4",
                            align="start",
                        ),
                        rx.hstack(
                            rx.box(
                                rx.icon("shield", size=24, color="#4DB8C4"),
                                width="48px",
                                height="48px",
                                background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
                                border_radius="12px",
                                display="flex",
                                align_items="center",
                                justify_content="center",
                            ),
                            rx.vstack(
                                rx.text("امنیت پیشرفته", font_weight="800", font_size="18px", color="white"),
                                rx.text("فایروال WAF، محافظت از Brute Force و اسکن مداوم", color="#94A3B8", font_size="15px"),
                                spacing="1",
                                align="start",
                            ),
                            spacing="4",
                            align="start",
                        ),
                        spacing="6",
                        align="start",
                        width="100%",
                    ),
                    # Features Grid
                    rx.box(
                        rx.hstack(
                            # Feature 1
                            rx.box(
                                rx.vstack(
                                    rx.box(
                                        rx.icon("server", size=32, color="#4DB8C4"),
                                        width="64px",
                                        height="64px",
                                        background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.1))",
                                        border_radius="16px",
                                        display="flex",
                                        align_items="center",
                                        justify_content="center",
                                        border="1px solid rgba(77, 184, 196, 0.3)",
                                    ),
                                    rx.text(
                                        "سرورهای SSD",
                                        font_weight="700",
                                        font_size="16px",
                                        color="#FFFFFF",
                                    ),
                                    rx.text(
                                        "سرعت بالا با NVMe",
                                        font_size="13px",
                                        color="#8B9EB8",
                                    ),
                                    spacing="3",
                                    align="center",
                                ),
                                background="rgba(27, 75, 127, 0.1)",
                                backdrop_filter="blur(10px)",
                                border="1px solid rgba(77, 184, 196, 0.2)",
                                border_radius="14px",
                                padding="24px",
                                _hover={
                                    "background": "rgba(27, 75, 127, 0.18)",
                                    "border": "1px solid rgba(77, 184, 196, 0.4)",
                                    "transform": "translateY(-4px)",
                                },
                                transition="all 0.3s ease",
                                flex="1",
                            ),
                            # Feature 2
                            rx.box(
                                rx.vstack(
                                    rx.box(
                                        rx.icon("rocket", size=32, color="#F59E0B"),
                                        width="64px",
                                        height="64px",
                                        background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
                                        border_radius="16px",
                                        display="flex",
                                        align_items="center",
                                        justify_content="center",
                                        border="1px solid rgba(245, 158, 11, 0.3)",
                                    ),
                                    rx.text(
                                        "سرعت 10 برابر",
                                        font_weight="700",
                                        font_size="16px",
                                        color="#FFFFFF",
                                    ),
                                    rx.text(
                                        "با کش پیشرفته",
                                        font_size="13px",
                                        color="#8B9EB8",
                                    ),
                                    spacing="3",
                                    align="center",
                                ),
                                background="rgba(27, 75, 127, 0.1)",
                                backdrop_filter="blur(10px)",
                                border="1px solid rgba(245, 158, 11, 0.2)",
                                border_radius="14px",
                                padding="24px",
                                _hover={
                                    "background": "rgba(27, 75, 127, 0.18)",
                                    "border": "1px solid rgba(245, 158, 11, 0.4)",
                                    "transform": "translateY(-4px)",
                                },
                                transition="all 0.3s ease",
                                flex="1",
                            ),
                            # Feature 3
                            rx.box(
                                rx.vstack(
                                    rx.box(
                                        rx.icon("headphones", size=32, color="#10B981"),
                                        width="64px",
                                        height="64px",
                                        background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
                                        border_radius="16px",
                                        display="flex",
                                        align_items="center",
                                        justify_content="center",
                                        border="1px solid rgba(16, 185, 129, 0.3)",
                                    ),
                                    rx.text(
                                        "پشتیبانی 24/7",
                                        font_weight="700",
                                        font_size="16px",
                                        color="#FFFFFF",
                                    ),
                                    rx.text(
                                        "همیشه کنارتان",
                                        font_size="13px",
                                        color="#8B9EB8",
                                    ),
                                    spacing="3",
                                    align="center",
                                ),
                                background="rgba(27, 75, 127, 0.1)",
                                backdrop_filter="blur(10px)",
                                border="1px solid rgba(16, 185, 129, 0.2)",
                                border_radius="14px",
                                padding="24px",
                                _hover={
                                    "background": "rgba(27, 75, 127, 0.18)",
                                    "border": "1px solid rgba(16, 185, 129, 0.4)",
                                    "transform": "translateY(-4px)",
                                },
                                transition="all 0.3s ease",
                                flex="1",
                            ),
                            spacing="5",
                            width="100%",
                            wrap="wrap",
                        ),
                        margin_top="40px",
                    ),
                    rx.button(
                        rx.hstack(
                            rx.icon("external-link", size=20),
                            rx.text("بیشتر بدانید", font_weight="700", font_size="17px"),
                            spacing="2",
                            align="center",
                        ),
                        size="4",
                        background="linear-gradient(135deg, #F59E0B, #FB923C)",
                        color="white",
                        border_radius="12px",
                        padding="22px 44px",
                        box_shadow="0 10px 35px rgba(245, 158, 11, 0.5)",
                        _hover={"transform": "translateY(-4px)", "box_shadow": "0 15px 50px rgba(245, 158, 11, 0.7)"},
                        transition="all 0.3s ease",
                        margin_top="40px",
                    ),
                    spacing="8",
                    align="start",
                    width="100%",
                ),
                rx.box(
                    rx.box(
                        # Background glow
                        rx.box(
                            width="550px",
                            height="550px",
                            background="radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%)",
                            position="absolute",
                            top="50%",
                            left="50%",
                            transform="translate(-50%, -50%)",
                            border_radius="50%",
                            filter="blur(60px)",
                            style={"animation": "pulse 6s ease-in-out infinite"},
                            z_index="0",
                        ),
                        # Central WordPress icon
                        rx.box(
                            rx.html("<svg viewBox='0 0 24 24' width='140' height='140' fill='#F59E0B'><path d='M12.158 12.786L9.46 20.625 12.158 12.786z M3.648 12c0 3.162 1.75 5.92 4.342 7.358L4.285 8.87C3.858 9.826 3.648 10.887 3.648 12z M20.352 12c0-.936-.18-1.81-.504-2.598-.308-.788-.672-1.454-1.092-1.958-.42-.504-.756-.84-.924-1.008-.168-.168-.252-.336-.252-.504 0-.168.084-.336.252-.504.168-.168.42-.252.756-.252h.084c-1.344-1.26-3.15-2.016-5.124-2.016-2.646 0-4.956 1.344-6.3 3.36.336-.024.672-.036 1.008-.036.672 0 1.722.084 1.722.084.336.024.378.504.042.546 0 0-.336.042-.714.06l2.268 6.762 1.362-4.086-1.008-2.676c-.336-.018-.672-.06-.672-.06-.336-.024-.294-.57.042-.546 0 0 1.074.084 1.722.084.672 0 1.722-.084 1.722-.084.336-.024.378.504.042.546 0 0-.336.042-.714.06l2.25 6.702.63-2.1c.252-.84.42-1.428.42-1.932z M12.252 13.032l-1.866 5.418c.546.168 1.134.252 1.722.252.714 0 1.386-.126 2.016-.336-.018-.024-.03-.054-.042-.084l-1.83-5.25z M20.352 12c0 .42-.042.84-.126 1.26-.084.42-.21.882-.378 1.386l-1.89 5.46c1.89-1.092 3.168-3.15 3.168-5.502 0-1.092-.294-2.142-.774-3.024.336.672.546 1.428.546 2.22z M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'/></svg>"),
                            position="relative",
                            padding="40px",
                            background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.12))",
                            border="3px solid rgba(245, 158, 11, 0.35)",
                            border_radius="32px",
                            box_shadow="0 20px 70px rgba(245, 158, 11, 0.5)",
                            z_index="2",
                            style={"animation": "scaleFloat 8s ease-in-out infinite"},
                        ),
                        # Floating icon 1: Shield (security - top-left)
                        rx.box(
                            rx.icon("shield-check", size=65, color="#10B981"),
                            position="absolute",
                            top="8%",
                            left="8%",
                            padding="22px",
                            background="linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2))",
                            border="2px solid rgba(16, 185, 129, 0.45)",
                            border_radius="20px",
                            backdrop_filter="blur(12px)",
                            box_shadow="0 12px 40px rgba(16, 185, 129, 0.4)",
                            opacity="0.85",
                            z_index="3",
                            style={"animation": "fadeInScale 0.8s ease-out 0.4s backwards, bobFloat 8s ease-in-out 1.5s infinite"},
                        ),
                        # Floating icon 2: Cloud (cloud hosting - top-right)
                        rx.box(
                            rx.icon("cloud", size=70, color="#6DD7E5"),
                            position="absolute",
                            top="5%",
                            right="10%",
                            padding="24px",
                            background="linear-gradient(135deg, rgba(109, 215, 229, 0.25), rgba(77, 184, 196, 0.2))",
                            border="2px solid rgba(109, 215, 229, 0.45)",
                            border_radius="22px",
                            backdrop_filter="blur(12px)",
                            box_shadow="0 12px 40px rgba(109, 215, 229, 0.4)",
                            opacity="0.8",
                            z_index="1",
                            style={"animation": "fadeInScale 0.8s ease-out 0.6s backwards, floatDiagonal 9s ease-in-out 2s infinite"},
                        ),
                        # Floating icon 3: Zap/Speed (middle-left)
                        rx.box(
                            rx.icon("zap", size=60, color="#FB923C"),
                            position="absolute",
                            top="42%",
                            left="2%",
                            padding="20px",
                            background="linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(245, 158, 11, 0.2))",
                            border="2px solid rgba(251, 146, 60, 0.45)",
                            border_radius="18px",
                            backdrop_filter="blur(12px)",
                            box_shadow="0 10px 35px rgba(251, 146, 60, 0.4)",
                            opacity="0.85",
                            z_index="3",
                            style={"animation": "fadeInScale 0.8s ease-out 0.8s backwards, float 7s ease-in-out 2.3s infinite reverse"},
                        ),
                        # Floating icon 4: Package/Plugin (middle-right)
                        rx.box(
                            rx.icon("package", size=55, color="#A78BFA"),
                            position="absolute",
                            top="38%",
                            right="5%",
                            padding="18px",
                            background="linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(139, 92, 246, 0.2))",
                            border="2px solid rgba(167, 139, 250, 0.45)",
                            border_radius="16px",
                            backdrop_filter="blur(12px)",
                            box_shadow="0 10px 35px rgba(167, 139, 250, 0.4)",
                            opacity="0.8",
                            z_index="1",
                            style={"animation": "fadeInScale 0.8s ease-out 1s backwards, scaleBreath 9s ease-in-out 2.5s infinite"},
                        ),
                        # Floating icon 5: Database (bottom-left)
                        rx.box(
                            rx.icon("database", size=58, color="#4DB8C4"),
                            position="absolute",
                            bottom="12%",
                            left="12%",
                            padding="19px",
                            background="linear-gradient(135deg, rgba(77, 184, 196, 0.25), rgba(27, 75, 127, 0.2))",
                            border="2px solid rgba(77, 184, 196, 0.45)",
                            border_radius="17px",
                            backdrop_filter="blur(12px)",
                            box_shadow="0 10px 35px rgba(77, 184, 196, 0.4)",
                            opacity="0.85",
                            z_index="3",
                            style={"animation": "fadeInScale 0.8s ease-out 1.2s backwards, floatComplex 10s ease-in-out 2.8s infinite"},
                        ),
                        # Floating icon 6: Settings/Gear (bottom-right)
                        rx.box(
                            rx.icon("settings", size=62, color="#F97316"),
                            position="absolute",
                            bottom="10%",
                            right="8%",
                            padding="21px",
                            background="linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(245, 158, 11, 0.2))",
                            border="2px solid rgba(249, 115, 22, 0.45)",
                            border_radius="19px",
                            backdrop_filter="blur(12px)",
                            box_shadow="0 12px 40px rgba(249, 115, 22, 0.4)",
                            opacity="0.8",
                            z_index="1",
                            style={"animation": "fadeInScale 0.8s ease-out 1.4s backwards, rotateSubtle 40s linear infinite, bobFloat 8s ease-in-out 3s infinite"},
                        ),
                        # Stats card 1: 99.9% Uptime (repositioned - outer left)
                        rx.box(
                            rx.vstack(
                                rx.text("99.9%", font_size="26px", font_weight="900", color="#F59E0B", line_height="1"),
                                rx.text("آپتایم", font_size="11px", color="#94A3B8", font_weight="700"),
                                spacing="1",
                                align="center",
                            ),
                            position="absolute",
                            top="20%",
                            left="-35px",
                            padding="16px 22px",
                            background="rgba(20, 20, 35, 0.92)",
                            border="2px solid rgba(245, 158, 11, 0.5)",
                            border_radius="16px",
                            backdrop_filter="blur(15px)",
                            box_shadow="0 10px 40px rgba(245, 158, 11, 0.35)",
                            z_index="4",
                            style={"animation": "fadeInScale 0.8s ease-out 1.6s backwards, float 7s ease-in-out 3.2s infinite"},
                        ),
                        # Stats card 2: 10x Speed (repositioned - outer right)
                        rx.box(
                            rx.vstack(
                                rx.text("10x", font_size="24px", font_weight="900", color="#10B981", line_height="1"),
                                rx.text("سرعت", font_size="11px", color="#94A3B8", font_weight="700"),
                                spacing="1",
                                align="center",
                            ),
                            position="absolute",
                            top="60%",
                            right="-30px",
                            padding="14px 20px",
                            background="rgba(20, 20, 35, 0.92)",
                            border="2px solid rgba(16, 185, 129, 0.5)",
                            border_radius="14px",
                            backdrop_filter="blur(15px)",
                            box_shadow="0 10px 40px rgba(16, 185, 129, 0.35)",
                            z_index="4",
                            style={"animation": "fadeInScale 0.8s ease-out 1.8s backwards, float 8s ease-in-out 3.5s infinite reverse"},
                        ),
                        # Stats card 3: 24/7 Support (repositioned - bottom center)
                        rx.box(
                            rx.vstack(
                                rx.text("24/7", font_size="22px", font_weight="900", color="#6DD7E5", line_height="1"),
                                rx.text("پشتیبانی", font_size="10px", color="#94A3B8", font_weight="700"),
                                spacing="1",
                                align="center",
                            ),
                            position="absolute",
                            bottom="-20px",
                            left="35%",
                            padding="13px 18px",
                            background="rgba(20, 20, 35, 0.92)",
                            border="2px solid rgba(109, 215, 229, 0.5)",
                            border_radius="13px",
                            backdrop_filter="blur(15px)",
                            box_shadow="0 10px 40px rgba(109, 215, 229, 0.35)",
                            z_index="4",
                            style={"animation": "fadeInScale 0.8s ease-out 2s backwards, float 6s ease-in-out 3.8s infinite"},
                        ),
                        position="relative",
                        width="600px",
                        height="600px",
                        display="flex",
                        align_items="center",
                        justify_content="center",
                    ),
                    display=["none", "none", "none", "block"],
                    width="50%",
                ),
                spacing="9",
                align="center",
                width="100%",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="120px 8%",
        ),
        width="100%",
        background="linear-gradient(135deg, rgba(15, 25, 45, 0.9) 0%, rgba(10, 18, 35, 0.95) 100%)",
        border_top="1px solid rgba(77, 184, 196, 0.15)",
        border_bottom="1px solid rgba(77, 184, 196, 0.15)",
        position="relative",
    )

def about_card(icon: str, title: str, desc: str, gradient: str, glow_color: str) -> rx.Component:
    return rx.vstack(
        rx.box(
            rx.icon(icon, size=80, color="white"),
            width="120px",
            height="120px",
            background=gradient,
            border_radius="28px",
            display="flex",
            align_items="center",
            justify_content="center",
            margin_bottom="32px",
            box_shadow=f"0 20px 60px {glow_color}",
            _hover={"transform": "scale(1.1) rotate(3deg)", "box_shadow": f"0 25px 80px {glow_color}"},
            transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
        ),
        rx.heading(title, size="7", color="white", font_weight="800", margin_bottom="16px"),
        rx.text(desc, color="#94A3B8", text_align="center", font_size="17px", line_height="1.7", font_weight="500"),
        padding="60px 40px",
        background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
        border="2px solid rgba(27, 75, 127, 0.3)",
        border_radius="32px",
        align="center",
        min_height="420px",
        box_shadow="0 10px 40px rgba(0, 0, 0, 0.4)",
        _hover={"transform": "translateY(-16px) scale(1.05)", "border": f"2px solid {glow_color.split('(')[1].split(',')[0]})", "box_shadow": f"0 30px 80px {glow_color}"},
        transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
    )

def about_section() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.badge(
                "✨ چرا ما؟",
                background="linear-gradient(135deg, rgba(27, 75, 127, 0.2), rgba(77, 184, 196, 0.2))",
                border="2px solid rgba(27, 75, 127, 0.4)",
                color="#4DB8C4",
                font_weight="700",
                font_size="16px",
                padding="10px 24px",
                border_radius="full",
            ),
            rx.heading("زایای انتخاب پیکربند", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
            rx.text(
                "ارائه‌دهنده معتبر خدمات هاستینگ و زیرساخت ابری در ایران",
                color="#94A3B8",
                font_size="21px",
                margin_bottom="80px",
                font_weight="500",
            ),
            rx.hstack(
                about_card("zap", "سرعت فوق‌العاده", "سرورهای بهینه‌شده با SSD NVMe و CDN جهانی برای بارگذاری آنی", "linear-gradient(135deg, #1B4B7F, #4F46E5)", "rgba(27, 75, 127, 0.5)"),
                about_card("clock", "پشتیبانی 24/7", "تیم پشتیبانی حرفه‌ای و با تجربه، آماده کمک در هر لحظه", "linear-gradient(135deg, #4DB8C4, #7C3AED)", "rgba(77, 184, 196, 0.5)"),
                about_card("shield-check", "امنیت پیشرفته", "SSL رایگان، بکاپ اتوماتیک روزانه و محافظت DDoS", "linear-gradient(135deg, #6DD7E5, #9333EA)", "rgba(109, 215, 229, 0.5)"),
                spacing="9",
                width="100%",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="140px 8%",
        ),
        background="linear-gradient(180deg, rgba(10, 18, 35, 0.98) 0%, rgba(5, 10, 20, 1) 100%)",
        width="100%",
    )

def service_card(title: str, desc: str, icon: str, features: list, color: str) -> rx.Component:
    return rx.vstack(
        rx.box(
            rx.icon(icon, size=64, color="white"),
            padding="28px",
            background=f"linear-gradient(135deg, {color}, {color}dd)",
            border_radius="24px",
            margin_bottom="32px",
            box_shadow=f"0 15px 50px {color}80",
            _hover={"transform": "rotateY(10deg)", "box_shadow": f"0 20px 70px {color}a0"},
            transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
        ),
        rx.heading(title, size="7", color="white", font_weight="800", margin_bottom="20px"),
        rx.text(desc, color="#94A3B8", text_align="center", font_size="17px", line_height="1.7", margin_bottom="28px", font_weight="500"),
        rx.vstack(
            *[rx.hstack(
                rx.icon("check", size=20, color="#10B981"),
                rx.text(feature, color="#CBD5E1", font_size="16px", font_weight="600"),
                spacing="3",
                align="center",
            ) for feature in features],
            spacing="4",
            align="start",
            width="100%",
        ),
        padding="48px 40px",
        background="linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
        border="2px solid rgba(27, 75, 127, 0.25)",
        border_radius="32px",
        align="center",
        min_height="520px",
        box_shadow="0 15px 50px rgba(0, 0, 0, 0.5)",
        _hover={
            "transform": "translateY(-12px) scale(1.03)",
            "border": f"2px solid {color}",
            "box_shadow": f"0 35px 90px {color}70"
        },
        transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
    )

def services_section() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.badge(
                "🚀 خدمات ما",
                background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
                border="2px solid rgba(77, 184, 196, 0.4)",
                color="#6DD7E5",
                font_weight="700",
                font_size="16px",
                padding="10px 24px",
                border_radius="full",
            ),
            rx.heading("همه چیز برای کسب‌وکار آنلاین شما", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
            rx.text(
                "از استارتاپ تا شرکت‌های بزرگ، راهکار مناسب برای هر کسب‌وکاری",
                color="#94A3B8",
                font_size="21px",
                margin_bottom="80px",
                font_weight="500",
            ),
            rx.grid(
                service_card("وردپرس کلود", "کلود اختصاصی وردپرس با مدیریت هوشمند و پیشرفته", "cloud", ["نصب خودکار وردپرس", "مدیریت چند سایتی", "بکاپ اتوماتیک", "SSL رایگان", "بهینه‌سازی خودکار"], "#1B4B7F"),
                service_card("سرورهای ابری", "سرورهای اختصاصی از بهترین دیتاسنترهای دنیا", "server", ["DigitalOcean", "Hetzner", "AWS", "Google Cloud"], "#4DB8C4"),
                service_card("مهاجرت به کلود", "انتقال سایت وردپرسی شما به کلود اختصاصی", "cloud-upload", ["مهاجرت بدون توقف", "تست قبل از انتقال", "بهینه‌سازی کامل", "مشاوره رایگان"], "#6DD7E5"),
                service_card("DevOps حرفه‌ای", "اتوماسیون و مدیریت زیرساخت کلود", "code", ["Kubernetes", "Docker", "CI/CD Pipeline", "Infrastructure as Code"], "#1B4B7F"),
                service_card("فروش دامین", "ثبت دامین‌های بین‌المللی و ایرانی", "tag", [".com, .ir, .net", "قیمت رقابتی", "تحویل فوری", "مدیریت DNS"], "#4DB8C4"),
                service_card("پشتیبانی 24/7", "پشتیبانی تخصصی وردپرس و سرور", "headset", ["تیم متخصص", "پاسخگویی سریع", "مشاوره رایگان", "پشتیبانی فارسی"], "#6DD7E5"),
                columns="3",
                spacing="9",
                width="100%",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="160px 8%",
        ),
        width="100%",
        id="services",
    )

def pricing_card(name: str, price: str, features: list, popular: bool = False, badge_color: str = "#1B4B7F") -> rx.Component:
    return rx.vstack(
        rx.cond(
            popular,
            rx.badge(
                "⭐ محبوب‌ترین",
                background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
                color="white",
                padding="10px 24px",
                border_radius="full",
                font_weight="800",
                font_size="15px",
                position="absolute",
                top="-18px",
                box_shadow="0 8px 30px rgba(27, 75, 127, 0.7)",
            ),
            rx.box(),
        ),
        rx.heading(name, size="8", color="white", font_weight="900", margin_bottom="20px"),
        rx.hstack(
            rx.heading(price, size="9", color="white", font_weight="900", letter_spacing="-0.04em"),
            rx.text("تومان/ماه", color="#94A3B8", font_size="17px", font_weight="600", margin_top="16px"),
            align="baseline",
            spacing="3",
        ),
        rx.divider(background="rgba(27, 75, 127, 0.3)", margin_y="32px"),
        rx.vstack(
            *[rx.hstack(
                rx.icon("check", size=24, color="#10B981"),
                rx.text(feature, color="#CBD5E1", font_size="17px", font_weight="600"),
                spacing="4",
                align="center",
            ) for feature in features],
            spacing="5",
            align="start",
            width="100%",
            margin_bottom="48px",
        ),
        rx.button(
            "انتخاب پلن",
            width="100%",
            padding="20px",
            background="linear-gradient(135deg, #1B4B7F, #4DB8C4)" if popular else "transparent",
            border="2.5px solid #1B4B7F" if not popular else "none",
            color="white",
            border_radius="16px",
            font_weight="800",
            font_size="18px",
            box_shadow="0 10px 35px rgba(27, 75, 127, 0.6)" if popular else "none",
            _hover={"transform": "translateY(-4px)", "box_shadow": "0 15px 50px rgba(27, 75, 127, 0.8)"},
            transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
        ),
        padding="56px 48px",
        background="linear-gradient(135deg, rgba(27, 75, 127, 0.3), rgba(77, 184, 196, 0.3))" if popular else "linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
        border=f"3px solid #4DB8C4" if popular else "2px solid rgba(27, 75, 127, 0.3)",
        border_radius="32px",
        position="relative",
        min_height="620px",
        box_shadow="0 25px 80px rgba(27, 75, 127, 0.5)" if popular else "0 15px 50px rgba(0, 0, 0, 0.4)",
        _hover={"transform": "translateY(-16px) scale(1.04)", "box_shadow": "0 35px 100px rgba(27, 75, 127, 0.7)"},
        transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
        align="center",
    )

def pricing_section() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.badge(
                "💎 پلن‌های قیمتی",
                background="linear-gradient(135deg, rgba(27, 75, 127, 0.2), rgba(77, 184, 196, 0.2))",
                border="2px solid rgba(27, 75, 127, 0.4)",
                color="#1B4B7F",
                font_weight="700",
                font_size="16px",
                padding="10px 24px",
                border_radius="full",
            ),
            rx.heading("پکیج مناسب خود را انتخاب کنید", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
            rx.text("شفاف، منصفانه و بدون هزینه پنهان", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
            rx.hstack(
                pricing_card("استارتر", "۱۵۰,۰۰۰", ["دامین رایگان", "۵ گیگ فضا", "ترافیک نامحدود", "SSL رایگان", "پشتیبانی ایمیل"]),
                pricing_card("حرفه‌ای", "۳۵۰,۰۰۰", ["VPS 2 Core", "۴ گیگ RAM", "۵۰ گیگ SSD", "بکاپ هفتگی", "پشتیبانی 24/7"], True),
                pricing_card("کسب‌وکار", "۷۵۰,۰۰۰", ["سرور اختصاصی", "۸ گیگ RAM", "۱۶۰ گیگ SSD", "راه‌اندازی DevOps", "مدیریت کامل"]),
                pricing_card("سفارشی", "تماس", ["منابع دلخواه", "معماری سفارشی", "مشاوره تخصصی", "SLA اختصاصی", "پشتیبانی اختصاصی"]),
                spacing="8",
                width="100%",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="160px 8%",
        ),
        background="linear-gradient(180deg, rgba(10, 18, 35, 0.98) 0%, rgba(5, 10, 20, 1) 100%)",
        width="100%",
        id="pricing",
    )

def server_table_row(provider: str, price: str, cpu: str, ram: str, location: str, logo_color: str) -> rx.Component:
    return rx.table.row(
        rx.table.cell(
            rx.hstack(
                rx.box(width="4px", height="40px", background=logo_color, border_radius="4px"),
                rx.text(provider, font_weight="800", font_size="18px"),
                spacing="3",
                align="center",
            )
        ),
        rx.table.cell(rx.text(price, color="#4DB8C4", font_weight="700", font_size="17px")),
        rx.table.cell(rx.text(cpu, font_weight="600", font_size="16px")),
        rx.table.cell(rx.text(ram, font_weight="600", font_size="16px")),
        rx.table.cell(rx.text(location, color="#94A3B8", font_weight="600")),
        rx.table.cell(
            rx.button(
                "سفارش",
                size="3",
                background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
                color="white",
                border_radius="10px",
                font_weight="700",
                _hover={"transform": "scale(1.08)", "box_shadow": "0 8px 25px rgba(27, 75, 127, 0.6)"},
                transition="all 0.3s",
            )
        ),
    )

def server_comparison() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.badge(
                "🌐 ارائه‌دهندگان",
                background="linear-gradient(135deg, rgba(109, 215, 229, 0.2), rgba(77, 184, 196, 0.2))",
                border="2px solid rgba(109, 215, 229, 0.4)",
                color="#6DD7E5",
                font_weight="700",
                font_size="16px",
                padding="10px 24px",
                border_radius="full",
            ),
            rx.heading("مقایسه بهترین سرورهای دنیا", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
            rx.text("دسترسی به معتبرترین دیتاسنترهای جهان", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
            rx.box(
                rx.table.root(
                    rx.table.header(
                        rx.table.row(
                            rx.table.column_header_cell("ارائه‌دهنده", color="#4DB8C4", font_weight="800", font_size="17px"),
                            rx.table.column_header_cell("قیمت", color="#4DB8C4", font_weight="800", font_size="17px"),
                            rx.table.column_header_cell("CPU", color="#4DB8C4", font_weight="800", font_size="17px"),
                            rx.table.column_header_cell("RAM", color="#4DB8C4", font_weight="800", font_size="17px"),
                            rx.table.column_header_cell("مکان", color="#4DB8C4", font_weight="800", font_size="17px"),
                            rx.table.column_header_cell("", color="#4DB8C4", font_weight="800"),
                        ),
                    ),
                    rx.table.body(
                        server_table_row("DigitalOcean", "$4/mo", "1 Core", "512MB", "USA, EU, Asia", "#0080FF"),
                        server_table_row("Hetzner", "€3.79/mo", "2 Cores", "2GB", "Germany, Finland", "#D50C2D"),
                        server_table_row("OVH", "€3.50/mo", "1 Core", "2GB", "France, Canada", "#123F6D"),
                        server_table_row("Hostinger", "$3.99/mo", "1 Core", "1GB", "Global", "#673DE6"),
                    ),
                    variant="surface",
                    size="3",
                    width="100%",
                ),
                background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
                border="2px solid rgba(27, 75, 127, 0.3)",
                border_radius="28px",
                padding="40px",
                box_shadow="0 20px 70px rgba(0, 0, 0, 0.6)",
                _hover={"box_shadow": "0 25px 90px rgba(27, 75, 127, 0.3)"},
                transition="all 0.4s",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="140px 8%",
        ),
        width="100%",
        id="servers",
    )

def testimonial_card(name: str, role: str, text: str, initial: str, gradient: str) -> rx.Component:
    return rx.vstack(
        rx.hstack(
            rx.box(
                rx.text(initial, font_size="32px", font_weight="900", color="white"),
                width="72px",
                height="72px",
                background=gradient,
                border_radius="full",
                display="flex",
                align_items="center",
                justify_content="center",
                box_shadow="0 12px 40px rgba(27, 75, 127, 0.6)",
            ),
            rx.vstack(
                rx.text(name, font_weight="800", color="white", font_size="20px"),
                rx.text(role, font_size="16px", color="#94A3B8", font_weight="600"),
                spacing="1",
                align="start",
            ),
            spacing="5",
            align="center",
            width="100%",
        ),
        rx.hstack(
            *[rx.icon("star", size=22, fill="#FBBF24", color="#FBBF24") for _ in range(5)],
            spacing="1",
            margin_y="24px",
        ),
        rx.text(text, color="#CBD5E1", line_height="1.8", font_size="17px", font_weight="500"),
        padding="48px",
        background="linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.8))",
        border="2px solid rgba(27, 75, 127, 0.25)",
        border_radius="28px",
        align="start",
        min_height="320px",
        box_shadow="0 15px 50px rgba(0, 0, 0, 0.5)",
        _hover={"transform": "translateY(-10px) scale(1.02)", "border": "2px solid #1B4B7F", "box_shadow": "0 25px 70px rgba(27, 75, 127, 0.5)"},
        transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
    )

def testimonials_section() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.badge(
                "💬 نظرات مشتریان",
                background="linear-gradient(135deg, rgba(27, 75, 127, 0.2), rgba(77, 184, 196, 0.2))",
                border="2px solid rgba(27, 75, 127, 0.4)",
                color="#1B4B7F",
                font_weight="700",
                font_size="16px",
                padding="10px 24px",
                border_radius="full",
            ),
            rx.heading("تجربه مشتریان راضی ما", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
            rx.text("اعتماد هزاران کسب‌وکار به پیکربند", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
            rx.hstack(
                testimonial_card(
                    "احمد محمدی",
                    "مدیر فنی شرکت آریا",
                    "سرویس عالی با پشتیبانی فوق‌العاده. مهاجرت سایتمان به VPS خیلی روان انجام شد. کاملا راضی هستیم.",
                    "A",
                    "linear-gradient(135deg, #1B4B7F, #4F46E5)"
                ),
                testimonial_card(
                    "مریم حسینی",
                    "مدیر محصول فروشگاه آنلاین",
                    "هاست وردپرسمون خیلی سریع شد. تیم پشتیبانی هم خیلی دلسوز و حرفه‌ای هستند. پیشنهاد می‌کنم.",
                    "M",
                    "linear-gradient(135deg, #4DB8C4, #7C3AED)"
                ),
                testimonial_card(
                    "رضا کریمی",
                    "توسعه‌دهنده نرم‌افزار",
                    "خدمات DevOps و راه‌اندازی CI/CD عالی بود. تیم خیلی با تجربه و کارشناس هستند. ممنونم.",
                    "R",
                    "linear-gradient(135deg, #6DD7E5, #9333EA)"
                ),
                spacing="9",
                width="100%",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="160px 8%",
        ),
        background="linear-gradient(180deg, rgba(10, 18, 35, 0.98) 0%, rgba(5, 10, 20, 1) 100%)",
        width="100%",
        id="testimonials",
    )

def contact_section() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.badge(
                "📞 تماس با ما",
                background="linear-gradient(135deg, rgba(77, 184, 196, 0.2), rgba(109, 215, 229, 0.2))",
                border="2px solid rgba(77, 184, 196, 0.4)",
                color="#4DB8C4",
                font_weight="700",
                font_size="16px",
                padding="10px 24px",
                border_radius="full",
            ),
            rx.heading("آماده پاسخگویی به شما هستیم", size="9", color="white", font_weight="900", letter_spacing="-0.03em", margin_top="16px"),
            rx.text("همین الان با ما در تماس باشید", color="#94A3B8", font_size="21px", margin_bottom="80px", font_weight="500"),
            rx.hstack(
                rx.vstack(
                    rx.form(
                        rx.vstack(
                            rx.input(
                                placeholder="نام و نام خانوادگی",
                                name="name",
                                required=True,
                                width="100%",
                                padding="18px",
                                background="rgba(30, 30, 50, 0.8)",
                                border="2px solid rgba(27, 75, 127, 0.3)",
                                border_radius="14px",
                                color="white",
                                font_size="17px",
                                font_weight="600",
                                _focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
                            ),
                            rx.input(
                                placeholder="ایمیل",
                                type="email",
                                name="email",
                                required=True,
                                width="100%",
                                padding="18px",
                                background="rgba(30, 30, 50, 0.8)",
                                border="2px solid rgba(27, 75, 127, 0.3)",
                                border_radius="14px",
                                color="white",
                                font_size="17px",
                                font_weight="600",
                                _focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
                            ),
                            rx.select(
                                ["هاست وردپرس", "دامین", "سرور اختصاصی", "DevOps", "مشاوره", "سایر"],
                                placeholder="نوع سرویس را انتخاب کنید",
                                name="service",
                                width="100%",
                                size="3",
                            ),
                            rx.text_area(
                                placeholder="توضیحات خود را بنویسید...",
                                name="message",
                                required=True,
                                width="100%",
                                min_height="160px",
                                padding="18px",
                                background="rgba(30, 30, 50, 0.8)",
                                border="2px solid rgba(27, 75, 127, 0.3)",
                                border_radius="14px",
                                color="white",
                                font_size="17px",
                                font_weight="600",
                                _focus={"border": "2px solid #1B4B7F", "box_shadow": "0 0 0 3px rgba(27, 75, 127, 0.2)"},
                            ),
                            rx.button(
                                rx.hstack(
                                    rx.icon("send", size=20),
                                    rx.text("ارسال پیام", font_weight="800", font_size="18px"),
                                    spacing="2",
                                    align="center",
                                ),
                                type="submit",
                                width="100%",
                                padding="22px",
                                background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
                                color="white",
                                border_radius="16px",
                                box_shadow="0 12px 40px rgba(27, 75, 127, 0.6)",
                                _hover={"transform": "translateY(-4px)", "box_shadow": "0 18px 60px rgba(27, 75, 127, 0.8)"},
                                transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
                            ),
                            spacing="7",
                            width="100%",
                        ),
                        on_submit=State.handle_submit,
                        width="100%",
                    ),
                    width="100%",
                ),
                rx.vstack(
                    rx.vstack(
                        rx.box(
                            rx.icon("mail", size=44, color="white"),
                            width="80px",
                            height="80px",
                            background="linear-gradient(135deg, #1B4B7F, #4F46E5)",
                            border_radius="20px",
                            display="flex",
                            align_items="center",
                            justify_content="center",
                            margin_bottom="24px",
                            box_shadow="0 12px 40px rgba(27, 75, 127, 0.6)",
                        ),
                        rx.heading("ایمیل", size="6", font_weight="800"),
                        rx.text("info@peikarband.ir", color="#4DB8C4", font_size="18px", font_weight="700"),
                        rx.text("پاسخ در کمتر از ۲ ساعت", font_size="15px", color="#64748B", font_weight="600"),
                        padding="40px",
                        background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
                        border="2px solid rgba(27, 75, 127, 0.3)",
                        border_radius="24px",
                        align="center",
                        width="100%",
                        _hover={"border": "2px solid #1B4B7F", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(27, 75, 127, 0.4)"},
                        transition="all 0.4s",
                    ),
                    rx.vstack(
                        rx.box(
                            rx.icon("message-circle", size=44, color="white"),
                            width="80px",
                            height="80px",
                            background="linear-gradient(135deg, #4DB8C4, #7C3AED)",
                            border_radius="20px",
                            display="flex",
                            align_items="center",
                            justify_content="center",
                            margin_bottom="24px",
                            box_shadow="0 12px 40px rgba(77, 184, 196, 0.6)",
                        ),
                        rx.heading("تلگرام", size="6", font_weight="800"),
                        rx.text("@peikarband", color="#6DD7E5", font_size="18px", font_weight="700"),
                        rx.text("پشتیبانی آنلاین", font_size="15px", color="#64748B", font_weight="600"),
                        padding="40px",
                        background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
                        border="2px solid rgba(77, 184, 196, 0.3)",
                        border_radius="24px",
                        align="center",
                        width="100%",
                        _hover={"border": "2px solid #4DB8C4", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(77, 184, 196, 0.4)"},
                        transition="all 0.4s",
                    ),
                    rx.vstack(
                        rx.box(
                            rx.icon("phone", size=44, color="white"),
                            width="80px",
                            height="80px",
                            background="linear-gradient(135deg, #6DD7E5, #9333EA)",
                            border_radius="20px",
                            display="flex",
                            align_items="center",
                            justify_content="center",
                            margin_bottom="24px",
                            box_shadow="0 12px 40px rgba(109, 215, 229, 0.6)",
                        ),
                        rx.heading("تلفن", size="6", font_weight="800"),
                        rx.text("۰۲۱-۱۲۳۴۵۶۷۸", color="#7CE3F2", font_size="18px", font_weight="700"),
                        rx.text("شنبه تا پنجشنبه ۹-۱۸", font_size="15px", color="#64748B", font_weight="600"),
                        padding="40px",
                        background="linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.7))",
                        border="2px solid rgba(109, 215, 229, 0.3)",
                        border_radius="24px",
                        align="center",
                        width="100%",
                        _hover={"border": "2px solid #6DD7E5", "transform": "translateY(-8px)", "box_shadow": "0 20px 60px rgba(109, 215, 229, 0.4)"},
                        transition="all 0.4s",
                    ),
                    spacing="7",
                    width="100%",
                ),
                spacing="9",
                width="100%",
            ),
            max_width="1400px",
            margin="0 auto",
            padding="140px 8%",
        ),
        width="100%",
        id="contact",
    )

def footer() -> rx.Component:
    return rx.box(
        rx.vstack(
            rx.divider(background="rgba(27, 75, 127, 0.4)", margin_y="10"),
            rx.hstack(
                rx.vstack(
                    rx.hstack(
                        rx.icon("cloud", size=32, color="#4DB8C4"),
                        rx.heading("پیکربند", size="7", color="#4DB8C4", font_weight="900"),
                        spacing="3",
                    ),
                    rx.text(
                        "ارائه‌دهنده خدمات هاستینگ، دامین و زیرساخت ابری با کیفیت بالا و پشتیبانی 24/7",
                        color="#94A3B8",
                        font_size="17px",
                        line_height="1.7",
                        max_width="450px",
                        font_weight="500",
                    ),
                    spacing="5",
                    align="start",
                ),
                rx.spacer(),
                rx.hstack(
                    rx.link(
                        rx.box(
                            rx.icon("facebook", size=24),
                            width="52px",
                            height="52px",
                            background="rgba(27, 75, 127, 0.15)",
                            border="2px solid rgba(27, 75, 127, 0.4)",
                            border_radius="14px",
                            display="flex",
                            align_items="center",
                            justify_content="center",
                            _hover={"background": "#1B4B7F", "border": "2px solid #1B4B7F", "transform": "translateY(-5px) scale(1.1)"},
                            transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
                        ),
                        href="#",
                        color="#94A3B8",
                    ),
                    rx.link(
                        rx.box(
                            rx.icon("twitter", size=24),
                            width="52px",
                            height="52px",
                            background="rgba(77, 184, 196, 0.15)",
                            border="2px solid rgba(77, 184, 196, 0.4)",
                            border_radius="14px",
                            display="flex",
                            align_items="center",
                            justify_content="center",
                            _hover={"background": "#4DB8C4", "border": "2px solid #4DB8C4", "transform": "translateY(-5px) scale(1.1)"},
                            transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
                        ),
                        href="#",
                        color="#94A3B8",
                    ),
                    rx.link(
                        rx.box(
                            rx.icon("message-circle", size=24),
                            width="52px",
                            height="52px",
                            background="rgba(109, 215, 229, 0.15)",
                            border="2px solid rgba(109, 215, 229, 0.4)",
                            border_radius="14px",
                            display="flex",
                            align_items="center",
                            justify_content="center",
                            _hover={"background": "#6DD7E5", "border": "2px solid #6DD7E5", "transform": "translateY(-5px) scale(1.1)"},
                            transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
                        ),
                        href="https://t.me/peikarband",
                        color="#94A3B8",
                    ),
                    spacing="6",
                ),
                width="100%",
                align="center",
                padding_y="40px",
            ),
            rx.divider(background="rgba(27, 75, 127, 0.3)", margin_y="8"),
            rx.text(
                "© ۱۴۰۳ پیکربند. تمامی حقوق محفوظ است.",
                color="#64748B",
                font_size="16px",
                font_weight="600",
                padding_bottom="10",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="60px 8% 40px",
        ),
        width="100%",
        background="linear-gradient(180deg, rgba(10, 18, 35, 0.98) 0%, rgba(5, 10, 20, 1) 100%)",
        border_top="1px solid rgba(77, 184, 196, 0.2)",
    )

def floating_chat() -> rx.Component:
    return rx.link(
        rx.box(
            rx.icon("message-circle", size=40, color="white"),
            width="76px",
            height="76px",
            background="linear-gradient(135deg, #1B4B7F, #4DB8C4)",
            border_radius="full",
            display="flex",
            align_items="center",
            justify_content="center",
            box_shadow="0 18px 60px rgba(27, 75, 127, 0.7)",
            _hover={"transform": "scale(1.2) rotate(10deg)", "box_shadow": "0 25px 80px rgba(27, 75, 127, 0.9)"},
            transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
        ),
        href="https://t.me/peikarband",
        position="fixed",
        bottom="32px",
        left="32px",
        z_index="1000",
    )

def index() -> rx.Component:
    return rx.box(
        navbar(),
        hero(),
        wordpress_cloud_highlight(),
        services_section(),
        about_section(),
        # pricing_section(),
        # server_comparison(),
        # testimonials_section(),
        # contact_section(),
        footer(),
        # floating_chat(),
        background="linear-gradient(180deg, #020509 0%, #0a1428 20%, #091428 40%, #0a1e3d 70%, #020509 100%)",
        min_height="100vh",
        width="100%",
        direction="rtl",
    )

app = rx.App(
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap",
        "https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css",
        "/custom.css",
    ],
    style={
        "font_family": "'Vazirmatn', 'Inter', sans-serif",
    },
)
app.add_page(
    index,
    title="پیکربند | خدمات هاستینگ، دامین و DevOps حرفه‌ای",
    description="ارائه خدمات هاستینگ وردپرس، فروش دامین، سرور اختصاصی و خدمات DevOps حرفه‌ای. پشتیبانی 24/7، قیمت‌های رقابتی و کیفیت بالا.",
)
