defmodule CaloriWeb.HomeLive do
  use CaloriWeb, :live_view

  @impl true
  def render(assigns) do
    ~H"""
    <div class="relative bg-gray-200 px-6 pb-20 lg:px-8 lg:pt-24 lg:pb-28">
      <div class="absolute inset-0">
        <div class="h-1/3 bg-gray-100 sm:h-2/3"></div>
      </div>
      <div class="relative mx-auto max-w-7xl">
        <div class="mx-auto grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
          <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
            <div class="flex-shrink-0">
              <img class="h-48 w-full object-cover" src={~p"/images/blog.png"} alt="" />
            </div>
            <div class="flex flex-1 flex-col justify-between bg-white p-6">
              <div class="flex-1">
                <p class="text-sm font-medium text-indigo-600">
                  <a href="#" class="hover:underline">Blog</a>
                </p>
                <a href="#" class="mt-2 block">
                  <p class="text-xl font-semibold text-gray-900">Check out the new articles</p>
                  <p class="mt-3 text-base text-gray-500">Coming soon...</p>
                </a>
              </div>
            </div>
          </div>

          <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
            <div class="flex-shrink-0">
              <img class="h-48 w-full object-cover" src={~p"/images/who_am_i.png"} alt="" />
            </div>
            <div class="flex flex-1 flex-col justify-between bg-white p-6">
              <div class="flex-1">
                <p class="text-sm font-medium text-indigo-600">
                  <a href={~p"/supervisor"} class="hover:underline">Supervisor</a>
                </p>
                <a href={~p"/supervisor"} class="mt-2 block">
                  <p class="text-xl font-semibold text-gray-900">
                    Who is supervising Calori Software?
                  </p>
                  <p class="mt-3 text-base text-gray-500">
                    If you know about the Erlang or Elixir then you are going to love this one.
                  </p>
                </a>
              </div>
            </div>
          </div>

          <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
            <div class="flex-shrink-0">
              <img class="h-48 w-full object-cover" src={~p"/images/get_in_touch.png"} alt="" />
            </div>
            <div class="flex flex-1 flex-col justify-between bg-white p-6">
              <div class="flex-1">
                <p class="text-sm font-medium text-indigo-600">
                  <a
                    href="https://www.linkedin.com/in/thiago-cesar-calori-esteves-972368115/"
                    class="hover:underline"
                  >
                    Contact
                  </a>
                </p>
                <a
                  href="https://www.linkedin.com/in/thiago-cesar-calori-esteves-972368115/"
                  class="mt-2  block"
                >
                  <p class="text-xl font-semibold text-gray-900">Get in touch!</p>

                  <button class="bg-blue-500 mt-10 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded">
                    <svg
                      class="w-5 h-5 fill-current"
                      role="img"
                      viewBox="0 0 256 256"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <g>
                        <path d="M218.123122,218.127392 L180.191928,218.127392 L180.191928,158.724263 C180.191928,144.559023 179.939053,126.323993 160.463756,126.323993 C140.707926,126.323993 137.685284,141.757585 137.685284,157.692986 L137.685284,218.123441 L99.7540894,218.123441 L99.7540894,95.9665207 L136.168036,95.9665207 L136.168036,112.660562 L136.677736,112.660562 C144.102746,99.9650027 157.908637,92.3824528 172.605689,92.9280076 C211.050535,92.9280076 218.138927,118.216023 218.138927,151.114151 L218.123122,218.127392 Z M56.9550587,79.2685282 C44.7981969,79.2707099 34.9413443,69.4171797 34.9391618,57.260052 C34.93698,45.1029244 44.7902948,35.2458562 56.9471566,35.2436736 C69.1040185,35.2414916 78.9608713,45.0950217 78.963054,57.2521493 C78.9641017,63.090208 76.6459976,68.6895714 72.5186979,72.8184433 C68.3913982,76.9473153 62.7929898,79.26748 56.9550587,79.2685282 M75.9206558,218.127392 L37.94995,218.127392 L37.94995,95.9665207 L75.9206558,95.9665207 L75.9206558,218.127392 Z M237.033403,0.0182577091 L18.8895249,0.0182577091 C8.57959469,-0.0980923971 0.124827038,8.16056231 -0.001,18.4706066 L-0.001,237.524091 C0.120519052,247.839103 8.57460631,256.105934 18.8895249,255.9977 L237.033403,255.9977 C247.368728,256.125818 255.855922,247.859464 255.999,237.524091 L255.999,18.4548016 C255.851624,8.12438979 247.363742,-0.133792868 237.033403,0.000790807055">
                        </path>
                      </g>
                    </svg>
                    <p class="mr-2">Linkedin</p>
                  </button>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end

  @impl true
  def mount(_params, _session, socket) do
    {:ok, socket}
  end
end
