<% demo_markers =
  Jason.encode!([
    %{
      title: gettext("Medicine pickup · example"),
      location: gettext("Approximate area · demo data"),
      latitude: 50.4501,
      longitude: 30.5234,
      exact: false
    },
    %{
      title: gettext("Flat tyre help · example"),
      location: gettext("Approximate area · demo data"),
      latitude: 50.4612,
      longitude: 30.4926,
      exact: false
    },
    %{
      title: gettext("Bicycle chain help · example"),
      location: gettext("Approximate area · demo data"),
      latitude: 50.4328,
      longitude: 30.5487,
      exact: false
    }
  ]) %>

<Layouts.app flash={@flash} current_scope={@current_scope}>
  <section
    aria-labelledby="home-title"
    class="grid gap-10 py-8 lg:grid-cols-[1.15fr_.85fr] lg:items-center"
  >
    <div>
      <div class="badge badge-success badge-outline mb-5">
        {gettext("Free, nearby, voluntary help")}
      </div>
      <h1
        id="home-title"
        class="max-w-3xl text-5xl font-black tracking-tight text-balance sm:text-6xl"
      >
        {gettext("Need help nearby? Ask the community.")}
      </h1>
      <p class="mt-6 max-w-2xl text-lg leading-8 text-base-content/70">
        {gettext(
          "Ask a nearby volunteer to collect medicine that is already purchased or help with a safe roadside problem. There is no mandatory fee."
        )}
      </p>
      <div class="mt-8 flex flex-wrap gap-3">
        <.link
          navigate={if @current_scope, do: ~p"/requests/new", else: ~p"/users/register"}
          class="btn btn-primary btn-lg"
        >
          {gettext("I need help")}
        </.link>
        <.link navigate={~p"/requests"} class="btn btn-outline btn-lg">
          {gettext("I can help")}
        </.link>
      </div>
      <p class="mt-5 text-sm text-base-content/70">
        {gettext(
          "Not an emergency or medical service. In immediate danger, contact local emergency services."
        )}
      </p>
    </div>

    <div class="relative">
      <div class="absolute inset-0 rounded-[2rem] bg-success/10 blur-2xl"></div>
      <article class="relative rounded-[2rem] border border-base-300 bg-base-100 p-7 shadow-xl">
        <div class="mb-6 flex items-center justify-between gap-3">
          <span class="text-sm font-semibold text-success">{gettext("Medicine pickup")}</span>
          <span class="badge badge-error badge-sm">{gettext("urgent")}</span>
        </div>
        <div class="badge badge-ghost badge-sm mb-4">{gettext("Example request")}</div>
        <h2 class="text-2xl font-bold">{gettext("Medicine order is ready at the pharmacy")}</h2>
        <p class="mt-3 text-base-content/65">
          {gettext(
            "The pharmacy closes soon and I cannot leave home. The item is already paid for."
          )}
        </p>
        <div class="mt-7 flex items-center justify-between gap-4 border-t border-base-300 pt-5">
          <div>
            <div class="text-sm font-semibold">{gettext("Approximate area")}</div>
            <div class="text-xs text-base-content/55">
              {gettext("Exact address after matching")}
            </div>
          </div>
          <.link navigate={~p"/requests"} class="btn btn-success btn-sm shrink-0">
            {gettext("I can help")}
          </.link>
        </div>
      </article>
    </div>
  </section>

  <section aria-labelledby="help-types-title" class="py-12">
    <div class="max-w-3xl">
      <div class="text-sm font-bold uppercase tracking-[.18em] text-success">
        {gettext("Start with urgent practical help")}
      </div>
      <h2 id="help-types-title" class="mt-3 text-3xl font-black sm:text-4xl">
        {gettext("What can you ask the community for?")}
      </h2>
      <p class="mt-4 text-base-content/65">
        {gettext(
          "Choose a moderated category. Each one asks only for the details needed for that kind of help."
        )}
      </p>
    </div>

    <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <article class="help-card rounded-3xl border border-base-300 bg-base-100 p-6">
        <.icon name="hero-shopping-bag" class="size-7 text-success" />
        <h3 class="mt-5 font-bold">{gettext("Collect medicine")}</h3>
        <p class="mt-2 text-sm text-base-content/65">
          {gettext("The medicine is already legally purchased or reserved for pickup.")}
        </p>
      </article>
      <article class="help-card rounded-3xl border border-base-300 bg-base-100 p-6">
        <.icon name="hero-truck" class="size-7 text-success" />
        <h3 class="mt-5 font-bold">{gettext("Bring fuel")}</h3>
        <p class="mt-2 text-sm text-base-content/65">
          {gettext("Only after people and the vehicle are away from active traffic danger.")}
        </p>
      </article>
      <article class="help-card rounded-3xl border border-base-300 bg-base-100 p-6">
        <.icon name="hero-wrench-screwdriver" class="size-7 text-success" />
        <h3 class="mt-5 font-bold">{gettext("Help with a wheel")}</h3>
        <p class="mt-2 text-sm text-base-content/65">
          {gettext("A flat tyre or another small roadside problem in a safe place.")}
        </p>
      </article>
      <article class="help-card rounded-3xl border border-base-300 bg-base-100 p-6">
        <.icon name="hero-cog-6-tooth" class="size-7 text-success" />
        <h3 class="mt-5 font-bold">{gettext("Bicycle or motorcycle")}</h3>
        <p class="mt-2 text-sm text-base-content/65">
          {gettext("A puncture, broken chain, tyre problem, or similar practical help.")}
        </p>
      </article>
    </div>
  </section>

  <section aria-labelledby="demo-map-title" class="py-12">
    <div class="grid gap-8 lg:grid-cols-[1.1fr_.9fr] lg:items-stretch">
      <div class="relative min-w-0">
        <div
          id="home-demo-map"
          data-static-aid-map="true"
          data-demo-map="true"
          data-map-ready="false"
          data-markers={demo_markers}
          data-map-unavailable-label={
            gettext("The demo map is unavailable. The example steps remain available beside it.")
          }
          role="region"
          aria-label={gettext("Demo map with synthetic approximate help requests")}
          class="aid-map home-demo-map"
        >
        </div>
        <div class="pointer-events-none absolute left-4 top-4 z-10 flex flex-wrap gap-2">
          <span class="badge badge-neutral shadow-sm">{gettext("Interactive demo")}</span>
          <span class="badge badge-ghost border border-base-300 bg-base-100/95 shadow-sm">
            {gettext("Example data — not live requests")}
          </span>
        </div>
      </div>

      <div class="rounded-[2rem] bg-base-200 p-7 sm:p-9">
        <div class="text-sm font-bold uppercase tracking-[.18em] text-success">
          {gettext("Privacy by default")}
        </div>
        <h2 id="demo-map-title" class="mt-3 text-3xl font-black sm:text-4xl">
          {gettext("See nearby needs without exposing a home address")}
        </h2>
        <p class="mt-4 text-base-content/65">
          {gettext(
            "These three points are synthetic examples. Real public discovery follows each requester's location visibility choice."
          )}
        </p>

        <ol class="mt-7 space-y-5">
          <li class="flex gap-4">
            <span class="grid size-9 shrink-0 place-items-center rounded-full bg-success text-sm font-black text-success-content">1</span>
            <div>
              <h3 class="font-bold">{gettext("Discover an approximate area")}</h3>
              <p class="mt-1 text-sm text-base-content/65">
                {gettext("The public marker does not need to reveal an exact address.")}
              </p>
            </div>
          </li>
          <li class="flex gap-4">
            <span class="grid size-9 shrink-0 place-items-center rounded-full bg-success text-sm font-black text-success-content">2</span>
            <div>
              <h3 class="font-bold">{gettext("Accept and open private coordination")}</h3>
              <p class="mt-1 text-sm text-base-content/65">
                {gettext("Only the matched requester and helper receive the private chat.")}
              </p>
            </div>
          </li>
          <li class="flex gap-4">
            <span class="grid size-9 shrink-0 place-items-center rounded-full bg-success text-sm font-black text-success-content">3</span>
            <div>
              <h3 class="font-bold">{gettext("Share live location only by choice")}</h3>
              <p class="mt-1 text-sm text-base-content/65">
                {gettext("Current coordinates are optional and deleted when sharing stops.")}
              </p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section aria-labelledby="how-title" class="py-12">
    <div class="max-w-3xl">
      <div class="text-sm font-bold uppercase tracking-[.18em] text-success">
        {gettext("A clear handover")}
      </div>
      <h2 id="how-title" class="mt-3 text-3xl font-black sm:text-4xl">
        {gettext("From request to verified completion")}
      </h2>
    </div>

    <div class="mt-8 grid gap-4 md:grid-cols-3">
      <article class="rounded-2xl bg-base-200 p-6">
        <div class="text-3xl">1</div>
        <h3 class="mt-4 font-bold">{gettext("Post a clear request")}</h3>
        <p class="mt-2 text-sm text-base-content/65">
          {gettext("Choose a category, urgency, and safe location visibility.")}
        </p>
      </article>
      <article class="rounded-2xl bg-base-200 p-6">
        <div class="text-3xl">2</div>
        <h3 class="mt-4 font-bold">{gettext("Match and coordinate")}</h3>
        <p class="mt-2 text-sm text-base-content/65">
          {gettext("Use private chat and optional live location sharing.")}
        </p>
      </article>
      <article class="rounded-2xl bg-base-200 p-6">
        <div class="text-3xl">3</div>
        <h3 class="mt-4 font-bold">{gettext("Verify the handover")}</h3>
        <p class="mt-2 text-sm text-base-content/65">
          {gettext(
            "Both confirm, the helper enters a one-time code, and reviews stay blind until both submit."
          )}
        </p>
      </article>
    </div>
  </section>

  <section aria-labelledby="trust-title" class="py-12">
    <div class="rounded-[2rem] border border-base-300 bg-base-100 p-7 sm:p-10">
      <div class="max-w-3xl">
        <div class="text-sm font-bold uppercase tracking-[.18em] text-success">
          {gettext("Built for safer coordination")}
        </div>
        <h2 id="trust-title" class="mt-3 text-3xl font-black sm:text-4xl">
          {gettext("You stay in control of the match")}
        </h2>
      </div>

      <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <.icon name="hero-gift" class="size-7 text-success" />
          <h3 class="mt-4 font-bold">{gettext("No mandatory payment")}</h3>
          <p class="mt-2 text-sm text-base-content/65">
            {gettext(
              "Help is voluntary. An external thank-you link is optional after completion."
            )}
          </p>
        </div>
        <div>
          <.icon name="hero-lock-closed" class="size-7 text-success" />
          <h3 class="mt-4 font-bold">{gettext("Private matched chat")}</h3>
          <p class="mt-2 text-sm text-base-content/65">
            {gettext("There is no unsolicited inbox between strangers.")}
          </p>
        </div>
        <div>
          <.icon name="hero-shield-check" class="size-7 text-success" />
          <h3 class="mt-4 font-bold">{gettext("Reports and blocking")}</h3>
          <p class="mt-2 text-sm text-base-content/65">
            {gettext(
              "Leave a match, block a person, or send a scoped report when something feels wrong."
            )}
          </p>
        </div>
        <div>
          <.icon name="hero-star" class="size-7 text-success" />
          <h3 class="mt-4 font-bold">{gettext("Verified reputation signals")}</h3>
          <p class="mt-2 text-sm text-base-content/65">
            {gettext("Handover codes and unique completed matches matter more than raw totals.")}
          </p>
        </div>
      </div>

      <.link navigate={~p"/safety"} class="btn btn-outline mt-8">
        {gettext("Read the safety rules")}
      </.link>
    </div>
  </section>

  <section aria-labelledby="activities-title" class="py-12">
    <div class="grid gap-6 rounded-[2rem] bg-success/10 p-7 sm:p-10 lg:grid-cols-[1fr_auto] lg:items-center">
      <div class="max-w-3xl">
        <div class="text-sm font-bold uppercase tracking-[.18em] text-success">
          {gettext("Not only urgent help")}
        </div>
        <h2 id="activities-title" class="mt-3 text-3xl font-black sm:text-4xl">
          {gettext("Find company for coffee, cinema, a walk, or a hike")}
        </h2>
        <p class="mt-4 text-base-content/65">
          {gettext(
            "Social activities are separate from urgent requests. Organizers approve participants, and exact meeting details stay inside the approved group."
          )}
        </p>
      </div>
      <.link navigate={~p"/activities"} class="btn btn-success btn-lg">
        {gettext("Explore activities")}
      </.link>
    </div>
  </section>

  <section aria-labelledby="faq-title" class="py-12">
    <div class="grid gap-8 lg:grid-cols-[.7fr_1.3fr]">
      <div>
        <div class="text-sm font-bold uppercase tracking-[.18em] text-success">
          {gettext("Quick answers")}
        </div>
        <h2 id="faq-title" class="mt-3 text-3xl font-black sm:text-4xl">
          {gettext("Before you create a request")}
        </h2>
      </div>
      <div class="space-y-3">
        <details class="group rounded-2xl border border-base-300 bg-base-100 p-5">
          <summary class="cursor-pointer font-bold">
            {gettext("Do I have to pay a helper?")}
          </summary>
          <p class="mt-3 text-sm leading-6 text-base-content/65">
            {gettext(
              "No. Help has no mandatory fee. A helper may optionally publish an external thank-you link after a completed handover."
            )}
          </p>
        </details>
        <details class="group rounded-2xl border border-base-300 bg-base-100 p-5">
          <summary class="cursor-pointer font-bold">
            {gettext("Can a volunteer buy medicine for me?")}
          </summary>
          <p class="mt-3 text-sm leading-6 text-base-content/65">
            {gettext(
              "The medicine must already be legally purchased or reserved. The service does not prescribe, recommend, sell, or handle controlled substances."
            )}
          </p>
        </details>
        <details class="group rounded-2xl border border-base-300 bg-base-100 p-5">
          <summary class="cursor-pointer font-bold">
            {gettext("Who can see my exact address?")}
          </summary>
          <p class="mt-3 text-sm leading-6 text-base-content/65">
            {gettext(
              "You choose the visibility. Exact active coordinates can be limited to the matched helper and are removed when sharing stops."
            )}
          </p>
        </details>
        <details class="group rounded-2xl border border-base-300 bg-base-100 p-5">
          <summary class="cursor-pointer font-bold">
            {gettext("What if there is immediate danger?")}
          </summary>
          <p class="mt-3 text-sm leading-6 text-base-content/65">
            {gettext(
              "Contact the emergency service for your location. Who Need Help is for voluntary practical coordination, not emergencies."
            )}
          </p>
        </details>
      </div>
    </div>
  </section>

  <section class="py-12 text-center">
    <div class="rounded-[2rem] bg-neutral px-6 py-12 text-neutral-content sm:px-10">
      <h2 class="text-3xl font-black sm:text-4xl">{gettext("Ready to ask or help nearby?")}</h2>
      <p class="mx-auto mt-4 max-w-2xl text-neutral-content/70">
        {gettext(
          "Create one account, choose your role for each situation, and keep control of what you share."
        )}
      </p>
      <div class="mt-8 flex flex-wrap justify-center gap-3">
        <.link
          navigate={if @current_scope, do: ~p"/requests/new", else: ~p"/users/register"}
          class="btn btn-primary btn-lg"
        >
          {gettext("I need help")}
        </.link>
        <.link
          navigate={~p"/requests"}
          class="btn btn-outline btn-lg border-neutral-content/45 text-neutral-content"
        >
          {gettext("I can help")}
        </.link>
      </div>
    </div>
  </section>
</Layouts.app>
