import streamlit as st


side_logo = """
    <style>
        .left-aligned-image {
            display: flex;
            justify-content: flex-start;
            width: 100%;
        }
        .left-aligned-image img {
            width: 100%;
            margin-bottom: 20px;
            height: auto;
            border-radius: 15px;
        }
    </style>
    <div class="left-aligned-image">
        <img src="https://www.medianews4u.com/wp-content/uploads/2021/02/Fynd-Platform-encourages-SMEs-to-start-an-online-business-with-a-new-campaign.jpg" alt="Fynd Image">
    </div>
    """



app_title = """
    <h1 style='
        color: #a689f6;
        font-size: 50px;
        background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
        background-clip: text;
        -webkit-background-clip: text;
        text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
    '>Plan maker</h1>
"""

plan_info_header = """
    <h1 style='
        color: #a689f6;
        font-size: 22px;
        background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
        background-clip: text;
        -webkit-background-clip: text;
        text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
    '>Section 1: Plan Info</h1>
"""

button_styles = """
    <style>
    div.stButton > button {
        color: #ffffff; /* Text color */
        font-size: 50px;
        background-image: linear-gradient(0deg, #a689f6 3%, #413bb9 61%);
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 15px;
        display: inline-block;
    }
    div.stButton > button:hover {
        background-color: #00ff00; /* Hover background color */
        color: #ff0000; /* Hover text color */
    }
    </style>
    """

rule_info_header = """
                            <h1 style='
                                color: #a689f6;
                                font-size: 22px;
                                background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
                                background-clip: text;
                                -webkit-background-clip: text;
                                text-fill-color: transparent;
                                -webkit-text-fill-color: transparent;
                            '>Section 2: Rule Info</h1>
                        """

expected_billing = 0
expected_billing_header = f"""
        <h1 style='
            color: #a689f6;
            font-size: 20px;
            background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
            background-clip: text;
            -webkit-background-clip: text;
            text-fill-color: transparent;
            -webkit-text-fill-color: transparent;
            '>Expected Monthly Billing (excluding GST): {expected_billing}</h1>
            """

final_billing = 0
final_billing_header = f"""
        <h1 style='
            color: #a689f6;
            font-size: 20px;
            background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
            background-clip: text;
            -webkit-background-clip: text;
            text-fill-color: transparent;
            -webkit-text-fill-color: transparent;
            '>Net total billing (excluding GST): {final_billing}</h1>
            """