---
import Layout from '../layouts/Layout.astro';
import { FeedbackForm } from '../components/FeedbackForm';

// Page-specific SEO metadata
const pageTitle = "Suggestion or Report | SiliconPin";
const pageDescription = "Submit your suggestions or report issues to help us improve our services.";
const pageImage = "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?q=80&w=2000&auto=format&fit=crop";
---

<Layout
  title={pageTitle}
  description={pageDescription}
  image={pageImage}
  type="website"
>
  <main class="container mx-auto px-4 sm:px-6 py-8 sm:py-12">
    <div class="text-center mb-8 sm:mb-12">
      <h1 class="text-3xl sm:text-4xl font-bold text-[#6d9e37] mb-3 sm:mb-4">Suggestion or Report</h1>
      <p class="text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300">
        We value your feedback! Use this form to submit suggestions or report any issues you've encountered.
      </p>
    </div>

    <div class="max-w-3xl mx-auto">
      <FeedbackForm client:load />
    </div>
  </main>
</Layout>

<script>
  // Script to capture referrer information
  document.addEventListener('DOMContentLoaded', () => {
    // Check if there is a referrer
    const referrer = document.referrer || 'Direct Access';
    // Store the referrer in a hidden field or local storage
    if (typeof window !== 'undefined') {
      localStorage.setItem('pageReferrer', referrer);

      // Add referrer to hidden field if it exists
      const referrerField = document.getElementById('referrerField') as HTMLInputElement;
      if (referrerField) {
        referrerField.value = referrer;
      }
    }
  });
</script>