<.shop_layout
  theme_settings={@theme_settings}
  logo_image={@logo_image}
  header_image={@header_image}
  mode={@mode}
  cart_items={@cart_items}
  cart_count={@cart_count}
  cart_subtotal={@cart_subtotal}
  cart_drawer_open={assigns[:cart_drawer_open] || false}
  cart_status={assigns[:cart_status]}
  active_page="contact"
>
  <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="Sample contact page for the demo store. Add your own message here – something friendly about how customers can reach you."
    />

    <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: "Example: 2-5 business days"},
            %{label: "Delivery", value: "Example: 3-7 business days after printing"},
            %{label: "Issues", value: "Example: Reprints for any defects"}
          ]}
        />

        <.newsletter_card />

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