defmodule ToweropsWeb.MarketingLayouts do
  @moduledoc """
  Marketing layouts for public-facing pages.
  """
  use ToweropsWeb, :html

  alias ToweropsWeb.Components.CookieConsent

  require Logger

  @doc """
  Renders the marketing layout.

  Use this for public-facing marketing pages.

  ## Examples

      <MarketingLayouts.marketing flash={@flash}>
        <h1>Marketing Content</h1>
      </MarketingLayouts.marketing>

  """
  attr :flash, :map, required: true, doc: "the map of flash messages"

  slot :inner_block, required: true

  def marketing(assigns) do
    # Get cookie consent from process dictionary (set in plug)
    requires_cookie_consent = Process.get(:requires_cookie_consent, false)
    assigns = Map.put(assigns, :requires_cookie_consent, requires_cookie_consent)

    ~H"""
    <div class="bg-white">
      <header class="py-10">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <nav class="relative z-50 flex justify-between">
            <div class="flex items-center md:gap-x-12">
              <.link navigate={~p"/"} aria-label="Home">
                <img src="/images/towerops_logo.png" alt="Towerops" class="w-48 h-auto sm:w-64" />
              </.link>
            </div>
            <div class="flex items-center gap-x-5 md:gap-x-8">
              <div class="hidden md:block">
                <.link
                  navigate={~p"/users/log-in"}
                  class="inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
                >
                  Sign in
                </.link>
              </div>
              <.link
                navigate={~p"/users/register"}
                class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600"
              >
                <span>
                  Get started <span class="hidden lg:inline">today</span>
                </span>
              </.link>
            </div>
          </nav>
        </div>
      </header>

      <main>
        {render_slot(@inner_block)}
      </main>

      <footer class="bg-slate-50">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div class="py-16">
            <img src="/images/towerops_logo.png" alt="Towerops" class="mx-auto w-48 h-auto sm:w-64" />
          </div>
          <div class="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
            <div class="flex gap-x-6"></div>
            <div class="flex flex-col items-center gap-2 sm:items-start">
              <p class="text-sm text-slate-500">
                Copyright © {Date.utc_today().year} Towerops
              </p>
              <div class="flex gap-x-4 text-xs text-slate-500">
                <.link
                  navigate={~p"/privacy"}
                  class="hover:text-slate-700 underline decoration-dotted underline-offset-2"
                >
                  Privacy Policy
                </.link>
                <span>·</span>
                <.link
                  navigate={~p"/terms"}
                  class="hover:text-slate-700 underline decoration-dotted underline-offset-2"
                >
                  Terms of Service
                </.link>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>

    <Layouts.flash_group flash={@flash} />
    <CookieConsent.banner requires_consent={@requires_cookie_consent} />
    """
  end
end
