<!DOCTYPE html>
<html ng-app="teaserApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teaser App</title>
    <link rel="stylesheet" href="lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <style>
        @font-face {
            font-family: 'Montserrat';
            font-weight: normal;
            src: url("fonts/Montserrat/static/Montserrat-Regular.ttf") format('truetype');
        }

        @font-face {
            font-family: 'Montserrat';
            font-weight: 600; /* SemiBold */
            src: url("fonts/Montserrat/static/Montserrat-SemiBold.ttf") format('truetype');
        }

        .vertical-center-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            margin-top: 0;
        }

        h5 {
            font-weight: 600;
        }

        .teaser-container {
            display: flex;
            flex-wrap: wrap;
            min-height: 75vh;
        }

        .teaser-image {
            background-image: url('img/ff-ps-launcher-startbild.webp');
            background-size: cover;
            background-position: left;
            flex: 1;
            display: block;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .teaser-content {
            flex: 1;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .content-box {
            max-width: 600px;
            width: 100%;
            color: #000;
            text-align: left;

        }

        .teaser-button {
            margin-top: 10px;
        }

        .ff-orange {
            color: #f39206;
        }

        .btn-ff {
            color: #ffffff;
            background-color: #f39206;
            border-color: #f39206;
            border-radius: 30px;
            padding: 15px 30px;
        }

        .btn-ff:hover, .btn-ff:focus, .btn-ff:active, .btn-ff.active, .open > .dropdown-toggle.btn-ff {
            color: #ffffff;
            background-color: #000000;
            border-color: #000000;
        }


        /* Logo Styling */
        .logo {
            display: inline-block;
            max-width: 180px;
            margin-bottom: 30px;
        }

        .buttonplace {
            padding-left: 2px;
        }

        .container-xxl {
            min-width: 95%;
        }


        @media (max-width: 1300px) {
            .teaser-container {
                display: flex;
                flex-wrap: wrap;
                min-height: 70vh;
            }

            .logo {
                display: inline-block;
                max-width: 160px;
                margin-bottom: 20px;
            }

        }
        /* Bei kleinen Viewports (unter 992px) wird das Bild ausgeblendet und das Logo angezeigt */
        @media (max-width: 1100px) {
            .teaser-container {
                display: flex;
                flex-wrap: wrap;
                min-height: 50vh;
            }
            .teaser-button {
                margin-top: 5px;
            }
            .buttonplace {
                text-align: center;
            }

            .btn-ff {
                color: #ffffff;
                background-color: #f39206;
                border-color: #f39206;
                border-radius: 30px;
                padding: 12px 25px;
            }

            .teaser-image {
                display: none;
            }

            .teaser-container {
            }

            h5 {
                font-size: 1.1875rem;
            }

            .bullets{
                display: none;
            }
            .container-xxl {
                min-width: 95%;
            }
            .teaser-content {
                flex: 1 1 100%;
                border-radius: 15px;
                padding: 15px;
            }

            .logo {
                display: inline-block;
                text-align: center;
            }

            .content-box {
                text-align: center;
                max-width: 70%;
                margin: 15px;
            }

            .content-box p {
                text-align: center;
            }


        }
    </style>
</head>
<body ng-controller="TeaserController">
<div class="container-fluid p-0 vertical-center-wrapper">
    <div class="container-xxl p-0">
        <div class="teaser-container">
            <div class="teaser-image"></div>
            <div class="teaser-content text-center" style="background-color: #f9f8f7;">
                <div class="content-box">
                    <img src="img/FALC-Finance-Logo@0,25x.png" alt="FALC Finance Logo" class="logo">
                    <h5>Ihr Finanzierungsspezialist</h5>
                    <p class="mb-0">
                        Mit nur wenigen Angaben erhalten Sie eine individuell auf Sie zugeschnittene monatliche Finanzierungsrate – schnell, transparent und unverbindlich.
                    </p>
                    <ul class="list-group text-left pb-2 bullets" style="border: none; background-color: #f9f8f7;">
                        <li class="list-group-item" style="border: none; background: none;"><i class="fa fa-check-circle-o ff-orange"></i> Vergleich von über 820 Darlehensgebern</li>
                        <li class="list-group-item" style="border: none; background: none;"><i class="fa fa-check-circle-o ff-orange"></i> Angebot innerhalb von 24 Stunden</li>
                        <li class="list-group-item" style="border: none; background: none;"><i class="fa fa-check-circle-o ff-orange"></i> Persönliche oder digitale Beratung</li>
                        <li class="list-group-item" style="border: none; background: none;"><i class="fa fa-check-circle-o ff-orange"></i> Direkter Kontakt zum Immobilienmakler</li>
                    </ul>
                    <div class="buttonplace">
                        <button class="btn btn-ff teaser-button mt-2" style="" ng-click="openNewTab()">Berechnung starten</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- AngularJS -->
<script src="lib/angular-1.7.8/angular.min.js"></script>
<script>
    var app = angular.module('teaserApp', []);

    app.controller('TeaserController', ['$scope', '$window', '$document', function($scope, $window, $document) {
        // Teaser Text
        $scope.teaserText = "Entdecke jetzt die Möglichkeiten mit unserem Angebot.";

        // Extract externeID from the current URL
        var url = new URL($window.location.href);
        var externeID = url.pathname.split('/').pop();

        // Open a new tab with the generated URL
        $scope.openNewTab = function() {
            var newTabUrl = `https://quickcheck.falcfinance.app/index.php#!/start/${externeID}#top`;
            $window.open(newTabUrl, '_blank');
        };

        // document.referrer nutzen, um Domain zu erkennen
        var referer = $document[0].referrer;
        var refererHostname;

        if (referer) {
            try {
                refererHostname = new URL(referer).hostname;
            } catch (e) {
                //console.warn("Fehler beim Parsen des Referers", e);
            }
        }
        //console.log(refererHostname);
        // Button je nach Domain individuell stylen
        var btnStyles;

        if (refererHostname === "crm.propstack.de") {
            btnStyles = {
                borderRadius: '0px',
                padding: '0.3rem 0.5rem'
            };
        } else if (refererHostname === "falcimmo.de") {
            btnStyles = {
                borderRadius:'30px',
                padding: '15px 33px'
            };
        } else {
            btnStyles = {
                borderRadius:'30px',
                padding: '15px 33px'
            };
        }

        // Styles direkt anwenden
        angular.element(document).ready(function () {
            var button = $document[0].querySelector('.btn-ff');
            if (button) {
                button.style.borderRadius = btnStyles.borderRadius;
                button.style.padding = btnStyles.padding;
            }
        });
    }]);
</script>
</body>
</html>
