<div
  class="shop-container min-h-screen pb-20 md:pb-0"
  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
>
  <.skip_link />

  <%= if @theme_settings.announcement_bar do %>
    <.announcement_bar theme_settings={@theme_settings} />
  <% end %>

  <.shop_header
    theme_settings={@theme_settings}
    logo_image={@logo_image}
    header_image={@header_image}
    active_page="contact"
    mode={@mode}
    cart_count={@cart_count}
  />

  <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <.hero_section
      variant={:page}
      title="Get in touch"
      description="Questions about your order or just want to say hello? Drop me a message and I'll get back to you as soon as I can."
    />

    <div class="grid gap-8 md:grid-cols-2 mb-12">
      <.contact_form email="hello@example.com" />

      <div class="flex flex-col gap-6">
        <.order_tracking_card />

        <.info_card
          title="Handy to know"
          items={[
            %{label: "Printing", value: "2-5 business days"},
            %{label: "Delivery", value: "3-7 business days after printing"},
            %{label: "Returns", value: "Happy to help with faulty or damaged items"}
          ]}
        />

        <.newsletter_card />

        <.social_links_card links={[
          %{platform: :instagram, url: "#", label: "Instagram"},
          %{platform: :bluesky, url: "#", label: "Bluesky"},
          %{platform: :mastodon, url: "#", label: "Mastodon"},
          %{platform: :kofi, url: "#", label: "Ko-fi"},
          %{platform: :github, url: "#", label: "GitHub"}
        ]} />
      </div>
    </div>
  </main>

  <.shop_footer theme_settings={@theme_settings} mode={@mode} />

  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />

  <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />

  <.mobile_bottom_nav active_page="contact" mode={@mode} />
</div>
