defmodule <%= @web_module %>.HomeLive do
  @moduledoc """
  Clean welcome page generated by `mix joby_kit.bootstrap`. Composes
  the host's `<Layouts.app>` (so the existing nav, flash group, and
  chrome are reused) with content that points at /design and
  /custom-designs.

  Edit freely — this file lives in your app, not in the kit.
  """

  use <%= @web_module %>, :live_view

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

  @impl true
  def handle_event(_event, _params, socket), do: {:noreply, socket}

  @impl true
  def render(assigns) do
    ~H"""
    <Layouts.app flash={@flash}>
      <main class="mx-auto max-w-4xl space-y-10 px-6 py-12">
        <header class="space-y-3">
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50">
            <%= @app %>
          </p>
          <h1 class="text-4xl font-semibold leading-tight">
            Welcome to <%= @app_camel %>.
          </h1>
          <p class="max-w-2xl text-base text-base-content/75">
            This app is bootstrapped with
            <a href="https://github.com/jobycorp/joby_kit" class="link link-primary" target="_blank" rel="noopener">
              JobyKit
            </a>, an opinionated, agentic-first design system on top of Phoenix and daisyUI.
            The two pages below are the discoverability surface for human and AI contributors.
          </p>
        </header>

        <section class="grid gap-4 md:grid-cols-2">
          <article class="card card-bordered border-base-300 bg-base-100 shadow-sm">
            <div class="card-body">
              <h2 class="card-title">Design system</h2>
              <p class="text-sm text-base-content/70">
                Kit-curated wrapper inventory, the wrapper contract, and the daisyUI catalogue.
                Same shape across every JobyKit consumer.
              </p>
              <div class="card-actions mt-2">
                <.link navigate={~p"/design"} class="btn btn-primary">
                  Open /design
                </.link>
              </div>
            </div>
          </article>

          <article class="card card-bordered border-base-300 bg-base-100 shadow-sm">
            <div class="card-body">
              <h2 class="card-title">Custom designs</h2>
              <p class="text-sm text-base-content/70">
                This app's generic composites and domain components — your team's
                additions to the catalogue.
              </p>
              <div class="card-actions mt-2">
                <.link navigate={~p"/custom-designs"} class="btn btn-soft">
                  Open /custom-designs
                </.link>
              </div>
            </div>
          </article>
        </section>

        <section class="space-y-3 rounded-2xl border border-base-300 bg-base-200/40 p-6">
          <h2 class="text-lg font-semibold">Manifest API for AI agents</h2>
          <p class="text-sm text-base-content/70">
            The combined manifest (kit core + composites + domain) is served as JSON. Your
            coding agent can fetch it without parsing rendered HEEx.
          </p>
          <pre class="overflow-x-auto rounded-lg bg-base-300/40 p-4 text-xs" phx-no-curly-interpolation><code>curl http://localhost:4000/design.json | jq</code></pre>
        </section>
      </main>
    </Layouts.app>
    """
  end
end