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.badge(
                #     rx.hstack(
                #         rx.icon("sparkles", size=16, color="#6DD7E5"),
                #         rx.text("هاستینگ، دامین و DevOps", font_weight="600"),
                #         spacing="2",
                #         align="center",
                #     ),
                #     variant="outline",
                #     padding="12px 24px",
                #     border_radius="full",
                #     background="linear-gradient(135deg, rgba(77, 184, 196, 0.15), rgba(109, 215, 229, 0.15))",
                #     border="2px solid rgba(77, 184, 196, 0.5)",
                #     font_size="15px",
                #     box_shadow="0 8px 24px rgba(77, 184, 196, 0.3)",
                # ),
                rx.heading(
                    "میزبانی وب و زیرساخت ابری ",
                    rx.el.span("حرفه‌ای", 
                           style={
                               "background": "linear-gradient(135deg, #1B4B7F, #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.15",
                    letter_spacing="-0.04em",
                    margin_top="16px",
                    style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"},
                ),
                rx.text(
                    "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
                    rx.el.span(" مدیریت پیشرفته و هوشمند سایت‌های وردپرسی شما", style={"color": "#94A3B8"}),
                    color="#E2E8F0",
                    font_size="23px",
                    line_height="1.9",
                    max_width="720px",
                    font_weight="500",
                    margin_top="24px",
                    margin_bottom="8px",
                    style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"},
                ),
                rx.hstack(
                    rx.button(
                        rx.hstack(
                            rx.icon("message-circle", size=22),
                            rx.text("مشاوره رایگان", font_weight="800", font_size="18px"),
                            spacing="3",
                            align="center",
                        ),
                        size="4",
                        background="linear-gradient(135deg, #1B4B7F, #4DB8C4, #6DD7E5)",
                        color="white",
                        border_radius="16px",
                        padding="28px 56px",
                        box_shadow="0 15px 50px rgba(27, 75, 127, 0.7), 0 0 80px rgba(109, 215, 229, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
                        _hover={
                            "transform": "translateY(-6px) scale(1.03)", 
                            "box_shadow": "0 25px 70px rgba(27, 75, 127, 0.9), 0 0 120px rgba(109, 215, 229, 0.6)"
                        },
                        transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
                        style={"animation": "glow 4s ease-in-out infinite, fadeInUp 0.8s ease-out 0.8s backwards"},
                    ),
                    rx.button(
                        rx.hstack(
                            rx.icon("zap", size=22),
                            rx.text("مشاهده قیمت‌ها", font_weight="800", font_size="18px"),
                            spacing="3",
                            align="center",
                        ),
                        size="4",
                        variant="outline",
                        border="3px solid #1B4B7F",
                        color="white",
                        border_radius="16px",
                        padding="28px 56px",
                        background="rgba(27, 75, 127, 0.08)",
                        backdrop_filter="blur(10px)",
                        box_shadow="0 10px 40px rgba(27, 75, 127, 0.3)",
                        _hover={
                            "background": "rgba(27, 75, 127, 0.2)", 
                            "transform": "translateY(-6px) scale(1.03)", 
                            "border": "3px solid #6DD7E5",
                            "box_shadow": "0 20px 60px rgba(109, 215, 229, 0.5)"
                        },
                        transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
                        style={"animation": "fadeInUp 0.8s ease-out 1s backwards"},
                    ),
                    spacing="6",
                    margin_top="56px",
                ),
                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(
                # Main illustration with layered effects
                rx.box(
                    # Background glow layer
                    rx.box(
                        width="550px",
                        height="550px",
                        background="radial-gradient(circle, rgba(77, 184, 196, 0.15) 0%, transparent 70%)",
                        position="absolute",
                        top="50%",
                        left="50%",
                        transform="translate(-50%, -50%)",
                        border_radius="50%",
                        filter="blur(60px)",
                        style={"animation": "pulse 4s ease-in-out infinite"},
                    ),
                    # Floating card 1 - top right
                    rx.box(
                        rx.vstack(
                            rx.icon("shield-check", size=28, color="#10B981"),
                            rx.text("99.9%", font_size="24px", font_weight="900", color="white"),
                            rx.text("Uptime", font_size="13px", color="#94A3B8", font_weight="600"),
                            spacing="2",
                            align="center",
                        ),
                        position="absolute",
                        top="-20px",
                        right="-30px",
                        padding="20px 28px",
                        background="linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1))",
                        border="2px solid rgba(16, 185, 129, 0.3)",
                        border_radius="20px",
                        backdrop_filter="blur(10px)",
                        box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)",
                        style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s infinite"},
                    ),
                    # Floating card 2 - left middle
                    rx.box(
                        rx.vstack(
                            rx.icon("zap", size=26, color="#F59E0B"),
                            rx.text("10x", font_size="22px", font_weight="900", color="white"),
                            rx.text("سریع‌تر", font_size="12px", color="#94A3B8", font_weight="600"),
                            spacing="2",
                            align="center",
                        ),
                        position="absolute",
                        top="40%",
                        left="-40px",
                        padding="18px 24px",
                        background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
                        border="2px solid rgba(245, 158, 11, 0.3)",
                        border_radius="18px",
                        backdrop_filter="blur(10px)",
                        box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
                        style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, floatSlow 7s ease-in-out 1.7s infinite reverse"},
                    ),
                    # Floating card 3 - bottom center
                    rx.box(
                        rx.hstack(
                            rx.icon("users", size=24, color="#6DD7E5"),
                            rx.vstack(
                                rx.text("1000+", font_size="20px", font_weight="900", color="white"),
                                rx.text("مشتری راضی", font_size="11px", color="#94A3B8", font_weight="600"),
                                spacing="0",
                                align="start",
                            ),
                            spacing="3",
                            align="center",
                        ),
                        position="absolute",
                        bottom="-10px",
                        left="50%",
                        transform="translateX(-50%)",
                        padding="16px 28px",
                        background="linear-gradient(135deg, rgba(109, 215, 229, 0.15), rgba(124, 227, 242, 0.1))",
                        border="2px solid rgba(109, 215, 229, 0.3)",
                        border_radius="16px",
                        backdrop_filter="blur(10px)",
                        box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
                        style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"},
                    ),
                    # Main image
                    rx.image(
                        src="https://illustrations.popsy.co/violet/web-design.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 5s ease-in-out 1.3s infinite"},
                    ),
                    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="radial-gradient(ellipse at top, #0c2340 0%, #0a1628 40%, #050510 70%)",
        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%",
                    ),
                    rx.button(
                        rx.hstack(
                            rx.icon("external-link", size=22),
                            rx.text("بیشتر بدانید", font_weight="700", font_size="18px"),
                            spacing="2",
                            align="center",
                        ),
                        size="4",
                        background="linear-gradient(135deg, #F59E0B, #FB923C)",
                        color="white",
                        border_radius="14px",
                        padding="24px 48px",
                        box_shadow="0 12px 40px rgba(245, 158, 11, 0.6)",
                        _hover={"transform": "translateY(-4px) scale(1.05)", "box_shadow": "0 20px 60px rgba(245, 158, 11, 0.8)"},
                        transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
                        margin_top="48px",
                    ),
                    spacing="8",
                    align="start",
                    width="100%",
                ),
                rx.box(
                    rx.vstack(
                        rx.box(
                            rx.image(
                                src="https://illustrations.popsy.co/violet/cloud-hosting.svg",
                                width="450px",
                                height="auto",
                            ),
                            padding="40px",
                            background="linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 146, 60, 0.1))",
                            border="3px solid rgba(245, 158, 11, 0.3)",
                            border_radius="32px",
                            box_shadow="0 25px 80px rgba(245, 158, 11, 0.4)",
                            _hover={"transform": "scale(1.05) rotate(2deg)", "box_shadow": "0 30px 100px rgba(245, 158, 11, 0.6)"},
                            transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
                        ),
                        rx.hstack(
                            rx.vstack(
                                rx.text("99.9%", font_size="36px", font_weight="900", color="#F59E0B", line_height="1"),
                                rx.text("آپتایم", font_size="14px", color="#94A3B8", font_weight="600"),
                                align="center",
                                padding="24px",
                                background="rgba(30, 30, 50, 0.8)",
                                border="2px solid rgba(245, 158, 11, 0.3)",
                                border_radius="20px",
                                spacing="2",
                            ),
                            rx.vstack(
                                rx.text("24/7", font_size="36px", font_weight="900", color="#10B981", line_height="1"),
                                rx.text("پشتیبانی", font_size="14px", color="#94A3B8", font_weight="600"),
                                align="center",
                                padding="24px",
                                background="rgba(30, 30, 50, 0.8)",
                                border="2px solid rgba(16, 185, 129, 0.3)",
                                border_radius="20px",
                                spacing="2",
                            ),
                            rx.vstack(
                                rx.text("10x", font_size="36px", font_weight="900", color="#4DB8C4", line_height="1"),
                                rx.text("سریع‌تر", font_size="14px", color="#94A3B8", font_weight="600"),
                                align="center",
                                padding="24px",
                                background="rgba(30, 30, 50, 0.8)",
                                border="2px solid rgba(77, 184, 196, 0.3)",
                                border_radius="20px",
                                spacing="2",
                            ),
                            spacing="5",
                            margin_top="32px",
                        ),
                        spacing="6",
                    ),
                    display=["none", "none", "none", "block"],
                ),
                spacing="9",
                align="center",
                width="100%",
            ),
            max_width="1500px",
            margin="0 auto",
            padding="120px 8%",
        ),
        width="100%",
        background="linear-gradient(135deg, rgba(30, 30, 50, 0.6) 0%, rgba(20, 20, 40, 0.8) 100%)",
        border_top="2px solid rgba(245, 158, 11, 0.2)",
        border_bottom="2px solid rgba(245, 158, 11, 0.2)",
        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(15, 15, 35, 0.95) 0%, rgba(5, 5, 16, 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(15, 15, 35, 0.95) 0%, rgba(5, 5, 16, 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(15, 15, 35, 0.95) 0%, rgba(5, 5, 16, 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, 10, 26, 0.95) 0%, rgba(5, 5, 16, 1) 100%)",
        border_top="2px solid rgba(27, 75, 127, 0.4)",
    )

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(),
        about_section(),
        services_section(),
        # pricing_section(),
        # server_comparison(),
        # testimonials_section(),
        # contact_section(),
        footer(),
        # floating_chat(),
        background="linear-gradient(180deg, #050510 0%, #0a0a1a 30%, #0f0f23 60%, #050510 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، قیمت‌های رقابتی و کیفیت بالا.",
)