<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Flexo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0; 
            padding: 0;
        }

        .container {
            max-width: 600px;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .logo-container {
            margin-bottom: 20px;
        }

        .logo {
            width: 100px;
        }

        h1 {
            font-size: 24px;
            color: #333333;
            margin-bottom: 10px;
        }

        p {
            font-size: 16px;
            color: #666666;
            line-height: 1.5;
        }

        .username {
            font-weight: bold;
        }

        .cta-button {
            display: inline-block;
            background-color: #FF7300;
            color: #ffffff;
            text-decoration: none;
            padding: 4px 20px;
            border-radius: 30px;
            font-size: 16px;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

        .cta-button:hover {
            background-color: #E06600;
        }
        .social-icons {
            margin-block: 10px;
        }
        .social-icons img {
            width: 20px;
            margin: 0 5px;
        }
        .booking-data{
            width: 25%;
        }
    </style>
</head>
<body>
    <div class="container" style=" padding: 15px; margin: 0 auto; background-color: #fff;">

   
    <div class="" style="background-color: #ffefe3; padding: 15px; border-radius: 10px;">
        <div style="background-color: #fff;  padding: 10px; border-radius: 10px;">
        <!-- <div class="email-container"> -->
            <div class="logo-container">
                <img src="https://worker-app.s3.amazonaws.com/images/1705985271602_Flexologo.png" alt="Flexo Logo" class="logo">
            </div>
            <div>
                <h3 class="fw-bold">🎉 Welcome to Flexo!</h3>
                <p class="text-start">Hi <span class="username"><%= data.name %></span>,</p>
                <p style="text-align: start;">Welcome to Flexo! You’re all set to explore and book the perfect space for your needs.</p>
                <a href="<%= data.webUrl %>" class="cta-button fw-bold" style="color: #ffffff; font-size: 16px;">Get Started</a>
            </div>
        </div>
        <div class="footer  mt-3" style="width:100%;display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap;">
            <div style="width: 50%;">
                <p style="text-align: start;color: black; " >Stay connected with us:</p>
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left">
                    <tr>
                        <td align="left" style="padding-right:10px">
                        <a href="https://www.instagram.com/flexospaces/" target="_blank">
                            <img src="<%= data.flexoUrl + '/assets/instagram.png' %>" alt="Instagram" width="20" style="display:block; margin:0 5px;">
                        </a>
                    </td>
                    <td align="left"  style="padding-right:10px">
                        <a href="https://www.youtube.com/@flexospaces" target="_blank">
                            <img src="<%= data.flexoUrl + '/assets/youtube.png' %>" alt="YouTube" width="20" style="display:block; margin:0 5px;">
                        </a>
                    </td>
                    <td align="left">
                        <a href="https://www.linkedin.com/company/flexospaces/" target="_blank">
                            <img src="<%= data.flexoUrl + '/assets/linkedin.png' %>" alt="LinkedIn" width="20" style="display:block; margin:0 5px;">
                        </a>
                        </td>
                    </tr>
                </table>
            </div>
        
            <div style="width: 50%;">
                <p class="mb-2" style="color: black;">&copy; 2024 Flexo, all rights reserved.</p>
                <p><a href="<%= data.webUrl + '/privacy-policy' %>"  style="text-decoration: none; color: black;">Privacy Policy</a></p>
            </div>
            
        </div>
            
    </div>  
</div>
</body>
</html>
