<div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
  <!-- Skip Link for Accessibility -->
  <.skip_link />

  <!-- Announcement Bar -->
  <%= if @theme_settings.announcement_bar do %>
    <.announcement_bar theme_settings={@theme_settings} />
  <% end %>

  <!-- Header -->
  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" mode={:preview} cart_count={2} />

  <!-- Content Page -->
  <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
    <!-- Hero Section -->
    <div class="content-hero text-center" style="padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-sunken);">
      <h1 class="text-3xl md:text-4xl mb-3" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);">
        About the studio
      </h1>
      <p class="text-lg" style="color: var(--t-text-secondary);">
        Nature photography, printed with care
      </p>
    </div>

    <!-- Content Body -->
    <div class="content-body" style="padding: var(--space-xl) var(--space-lg); max-width: 800px; margin: 0 auto;">
      <!-- About Image -->
      <div
        class="content-image about-image"
        style="width: 100%; height: 300px; border-radius: var(--t-radius-image); margin-bottom: var(--space-lg); background-size: cover; background-position: center; background-image: url('/mockups/night-sky-blanket-3.jpg');"
      ></div>

      <!-- Content Text -->
      <div class="content-text" style="line-height: 1.7;">
        <p class="lead-text text-lg mb-4" style="color: var(--t-text-primary);">
          I'm Emma, a nature photographer based in the UK. What started as weekend walks with my camera has grown into something I never expected – a little shop where I can share my favourite captures with others.
        </p>

        <p class="mb-4" style="color: var(--t-text-secondary);">
          Every design in this shop comes from my own photography. Whether it's early morning mist over the hills, autumn leaves in the local woods, or the quiet beauty of wildflower meadows, I'm drawn to the peaceful moments that nature offers.
        </p>

        <p class="mb-4" style="color: var(--t-text-secondary);">
          I work with quality print partners to bring these images to life on products you can actually use and enjoy – from art prints for your walls to mugs for your morning tea.
        </p>

        <h2 class="mt-8 mb-3" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-xl); color: var(--t-text-primary);">
          Quality you can trust
        </h2>
        <p class="mb-4" style="color: var(--t-text-secondary);">
          I've carefully chosen print partners who share my commitment to quality. Every product is made to order using premium materials and printing techniques that ensure vibrant colours and lasting quality.
        </p>

        <h2 class="mt-8 mb-3" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-xl); color: var(--t-text-primary);">
          Printed sustainably
        </h2>
        <p class="mb-4" style="color: var(--t-text-secondary);">
          Because each item is printed on demand, there's no waste from unsold stock. My print partners use eco-friendly inks where possible, and products are shipped directly to you to minimise unnecessary handling.
        </p>

        <p class="mt-8" style="color: var(--t-text-secondary);">
          Thank you for visiting. It means a lot that you're here.
        </p>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <.shop_footer theme_settings={@theme_settings} mode={:preview} />

  <!-- Search Modal -->
  <!-- Cart Drawer -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />

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