defmodule CommunityDemoWeb.Community.Components.Footers.Footer003 do
  use Phoenix.Component
  import CommunityDemoWeb.Components.Footer

  @doc type: :component
  attr(:id, :string,
    default: nil,
    doc: "A unique identifier is used to manage state and interaction"
  )

  attr(:class, :string, default: nil, doc: "")
  attr(:brand, :string, default: nil, doc: "Heading of footer")
  attr(:description, :string, default: nil, doc: "Description of footer")

  attr(:rest, :global,
    doc:
      "Global attributes can define defaults which are merged with attributes provided by the caller"
  )

  slot(:inner_block, required: false, doc: "Inner block that renders HEEx content")

  def community_footer_003(assigns) do
    ~H"""
    <.footer
      variant="bg-white"
      padding="py-20 px-9"
      max_width="extra_large"
      border="none"
      class="overflow-hidden footer-bg-1"
      id={@id}
    >
      <div class="flex gap-8 flex-wrap">
        <div class="space-y-5 lg:w-1/4">
          <h3 :if={@brand} class="text-2xl font-bold">
            {@brand}
          </h3>
          <p :if={@description} class="text-[12px] dark:text-[#637381] my-3">
            {@description}
          </p>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 flex-1 lg:w-3/4">
          {render_slot(@inner_block)}
        </div>

        <div class="space-y-5">
          <div class="text-lg text-semibold">
            Follow Us On
          </div>
          <div class="flex text-slate-500 dark:text-[#71717A] gap-3 items-center mb-5 dark:[&_svg]:hover:text-[#62626b]">
            <.link href="/" target="_blank">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="size-5 me-2 -mt-0.5 inline-block"
              >
                <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
                <path d="M9 18c-4.51 2-5-2-7-2" />
              </svg>
            </.link>

            <.link href="/" target="_blank" title="">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="size-5 me-2 -mt-0.5 inline-block"
              >
                <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
                <path d="m10 15 5-3-5-3z" />
              </svg>
            </.link>

            <.link href="/" target="_blank" title="">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="size-5 me-2 -mt-0.5 inline-block"
              >
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
                <rect width="4" height="12" x="2" y="9" /> <circle cx="4" cy="4" r="2" />
              </svg>
            </.link>
          </div>
          <div class="text-[#637381] text-xs">
            © 2025 Mishka.
          </div>
        </div>
      </div>
    </.footer>
    """
  end
end
