<script>
    import { browser } from "$app/environment";
    import "../app.css";
    export let data;

    let isSubscribed = false;

    function saveSubscribed() {
        isSubscribed = true;
    }
</script>

<div
    class="py-5 px-24 w-full fixed h-min top-0 flex flex-row justify-between bg-white drop-shadow-md"
>
    <div>
        <a href="/" class="font-bold text-2xl">{data.blog.site.name}</a>
    </div>
    <div>
        <a
            href="#subscribe-form"
            class="px-8 py-3 bg-gray-900 text-white rounded-lg font-semibold ml-auto"
            >Subscribe</a
        >
    </div>
</div>

<slot></slot>

<div class="bg-white py-16 text-center" id="subscribe-form">
    <div class="max-w-lg mx-auto">
        <h3 class="text-3xl font-bold mb-3">Our newsletter</h3>
        {#if isSubscribed}
            <p>Thanks for subscribing!</p>
        {:else}
            {#if data.blog.site.freebie_text}
                <p class="text-base/7 mb-8">
                    {data.blog.site.freebie_text}
                </p>
            {/if}
            <div
                class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
            >
                <form method="post" on:submit={saveSubscribed}>
                    <input
                        name="email"
                        id="email"
                        type="text"
                        placeholder="Email address"
                        class="py-3 px-5 flex-grow border-l border-y border-solid border-gray-300 h-[50px] rounded-l-lg"
                    />
                    <button
                        class="px-8 py-3 bg-gray-900 text-white font-semibold rounded-r-lg h-[50px]"
                        >Subscribe</button
                    >
                </form>
            </div>
        {/if}
    </div>
</div>
<div class="h-24 flex items-center justify-center border-t border-gray-200">
    <span>Copyright {new Date().getFullYear()} - Omer Sabic</span>
</div>

<style></style>
