<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 -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />

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

  <!-- Header -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" />

  <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <h1 class="text-4xl md:text-5xl font-bold mb-6 text-center" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
      Contact Us
    </h1>

    <p class="text-lg mb-12 text-center max-w-2xl mx-auto" style="color: var(--t-text-secondary);">
      Questions about your order or just want to say hello? Drop us a message and we'll get back to you as soon as we can.
    </p>

    <div class="grid gap-8 md:grid-cols-2 mb-12">
      <!-- Contact Form -->
      <div
        class="p-8"
        style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
      >
        <h2 class="text-xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
          Send us a message
        </h2>

        <form class="space-y-4">
          <div>
            <label class="block font-medium mb-2" style="color: var(--t-text-primary);">
              Name
            </label>
            <input
              type="text"
              placeholder="Your name"
              class="w-full px-4 py-2"
              style="background-color: var(--t-surface-base); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
            />
          </div>

          <div>
            <label class="block font-medium mb-2" style="color: var(--t-text-primary);">
              Email
            </label>
            <input
              type="email"
              placeholder="your@email.com"
              class="w-full px-4 py-2"
              style="background-color: var(--t-surface-base); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
            />
          </div>

          <div>
            <label class="block font-medium mb-2" style="color: var(--t-text-primary);">
              Subject
            </label>
            <input
              type="text"
              placeholder="How can we help?"
              class="w-full px-4 py-2"
              style="background-color: var(--t-surface-base); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
            />
          </div>

          <div>
            <label class="block font-medium mb-2" style="color: var(--t-text-primary);">
              Message
            </label>
            <textarea
              rows="5"
              placeholder="Your message..."
              class="w-full px-4 py-2"
              style="background-color: var(--t-surface-base); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
            ></textarea>
          </div>

          <button
            type="submit"
            class="w-full px-6 py-3 font-semibold transition-all"
            style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button);"
          >
            Send Message
          </button>
        </form>
      </div>

      <!-- Contact Info -->
      <div class="space-y-6">
        <!-- Order Tracking -->
        <div
          class="p-6"
          style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
        >
          <h3 class="font-bold mb-3" style="color: var(--t-text-primary);">Track your order</h3>
          <p class="text-sm mb-3" style="color: var(--t-text-secondary);">
            Enter your email and we'll send you a link to check your order status.
          </p>
          <div class="flex flex-wrap gap-2">
            <input
              type="email"
              placeholder="your@email.com"
              class="flex-1 min-w-0 px-3 py-2 text-sm"
              style="background-color: var(--t-surface-base); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input); min-width: 150px;"
            />
            <button
              class="px-4 py-2 text-sm font-medium whitespace-nowrap"
              style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button);"
            >
              Send
            </button>
          </div>
        </div>

        <!-- Helpful info -->
        <div
          class="p-6"
          style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
        >
          <h3 class="font-bold mb-3" style="color: var(--t-text-primary);">Handy to know</h3>
          <ul class="space-y-2 text-sm" style="color: var(--t-text-secondary);">
            <li class="flex items-start gap-2">
              <span style="color: var(--t-text-tertiary);">•</span>
              <span><strong style="color: var(--t-text-primary);">Printing:</strong> 2-5 business days</span>
            </li>
            <li class="flex items-start gap-2">
              <span style="color: var(--t-text-tertiary);">•</span>
              <span><strong style="color: var(--t-text-primary);">Delivery:</strong> 3-7 business days after printing</span>
            </li>
            <li class="flex items-start gap-2">
              <span style="color: var(--t-text-tertiary);">•</span>
              <span><strong style="color: var(--t-text-primary);">Returns:</strong> Happy to help with faulty or damaged items</span>
            </li>
          </ul>
        </div>

        <!-- Get in touch -->
        <div
          class="p-6"
          style="background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
        >
          <h3 class="font-bold mb-3" style="color: var(--t-text-primary);">Get in touch</h3>
          <a href="mailto:hello@example.com" class="flex items-center gap-2 mb-2" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); text-decoration: none;">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            hello@example.com
          </a>
          <p class="text-sm" style="color: var(--t-text-secondary);">
            We typically respond within 24 hours
          </p>
        </div>

        <!-- Social links -->
        <div class="flex gap-4 justify-center">
          <a
            href="#"
            class="social-link w-9 h-9 flex items-center justify-center transition-all"
            style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
            aria-label="Instagram"
          >
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
            </svg>
          </a>
          <a
            href="#"
            class="social-link w-9 h-9 flex items-center justify-center transition-all"
            style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
            aria-label="Pinterest"
          >
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"></circle>
              <path d="M8 12c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4"></path>
              <line x1="12" y1="16" x2="9" y2="21"></line>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_footer theme_settings={@theme_settings} />

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

  <SimpleshopThemeWeb.ThemeLive.PreviewPages.search_modal />
</div>
