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

// Page-specific SEO metadata
const pageTitle = "Contact Us | SiliconPin";
const pageDescription = "Contact SiliconPin for reliable hosting solutions. Our team is available 24/7 to help with your PHP, Node.js, Python, Kubernetes, and K3s hosting needs.";
const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=80&w=2000&auto=format&fit=crop";

// Contact schema for structured data
const contactSchema = {
  "@context": "https://schema.org",
  "@type": "ContactPage",
  "name": "SiliconPin Contact Page",
  "description": "Contact SiliconPin for reliable hosting solutions",
  "url": "https://siliconpin.com/contact",
  "mainEntityOfPage": {
    "@type": "Organization",
    "name": "SiliconPin",
    "telephone": "+91-700-160-1485",
    "email": "contact@siliconpin.com",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "121 Lalbari, GourBongo Road",
      "addressLocality": "Habra",
      "addressRegion": "W.B.",
      "postalCode": "743271",
      "addressCountry": "India"
    },
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
        "opens": "09:00",
        "closes": "18:00"
      },
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": "Saturday",
        "opens": "10:00",
        "closes": "16:00"
      }
    ]
  }
};
---

<Layout
  title={pageTitle}
  description={pageDescription}
  image={pageImage}
  type="website"
>
  <script type="application/ld+json" set:html={JSON.stringify(contactSchema)}></script>

  <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">Contact Us</h1>
      <p class="text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300">
        Have questions about our hosting services? Get in touch with our team of experts.
      </p>
    </div>

    <!-- Full width contact form section -->
    <section aria-labelledby="contact-form-heading" class="mb-8 sm:mb-12 bg-neutral-800 rounded-lg p-4 sm:p-6 lg:p-8 border border-neutral-700">
      <h2 id="contact-form-heading" class="text-xl sm:text-2xl font-bold text-white mb-4 sm:mb-6">Send us a message</h2>
      <ContactForm client:load />
    </section>

    <!-- Information sections in a grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
      <section aria-labelledby="company-info-heading" class="bg-neutral-800 rounded-lg p-4 sm:p-6 lg:p-8 border border-neutral-700">
        <h2 id="company-info-heading" class="text-xl sm:text-2xl font-bold text-white mb-4 sm:mb-6">Our Information</h2>

        <div class="space-y-4 sm:space-y-6">
          <div class="flex items-start">
            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-[#6d9e37]/20 flex items-center justify-center mr-4" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#6d9e37]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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>
            </div>
            <div>
              <h3 class="text-lg font-medium text-white">Email</h3>
              <a href="mailto:contact@siliconpin.com" class="mt-1 text-neutral-300 break-words hover:text-[#6d9e37] transition-colors">contact@siliconpin.com</a>
              <a href="mailto:support@siliconpin.com" class="mt-1 text-neutral-300 break-words hover:text-[#6d9e37] transition-colors block">support@siliconpin.com</a>
            </div>
          </div>

          <div class="flex items-start">
            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-[#6d9e37]/20 flex items-center justify-center mr-4" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#6d9e37]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
            </div>
            <div>
              <h3 class="text-lg font-medium text-white">Phone</h3>
              <a href="tel:+917001601485" class="mt-1 text-neutral-300 hover:text-[#6d9e37] transition-colors">+91-700-160-1485</a>
            </div>
          </div>

          <div class="flex items-start">
            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-[#6d9e37]/20 flex items-center justify-center mr-4" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#6d9e37]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </div>
            <div>
              <h3 class="text-lg font-medium text-white">Address</h3>
              <address class="mt-1 text-neutral-300 not-italic">
                121 Lalbari, GourBongo Road<br/>
                Habra, W.B. 743271<br/>
                India
              </address>
            </div>
          </div>
        </div>
      </section>

      <section aria-labelledby="business-hours-heading" class="bg-neutral-800 rounded-lg p-4 sm:p-6 lg:p-8 border border-neutral-700">
        <h2 id="business-hours-heading" class="text-xl sm:text-2xl font-bold text-white mb-4 sm:mb-6">Business Hours</h2>

        <div class="space-y-3">
          <div class="flex flex-col sm:flex-row sm:justify-between">
            <span class="text-neutral-300 font-medium">Monday - Friday:</span>
            <time datetime="09:00-18:00" class="text-white">9:00 AM - 6:00 PM</time>
          </div>
          <div class="flex flex-col sm:flex-row sm:justify-between">
            <span class="text-neutral-300 font-medium">Saturday:</span>
            <time datetime="10:00-16:00" class="text-white">10:00 AM - 4:00 PM</time>
          </div>
          <div class="flex flex-col sm:flex-row sm:justify-between">
            <span class="text-neutral-300 font-medium">Sunday:</span>
            <span class="text-white">Closed</span>
          </div>
          <div class="pt-3 border-t border-neutral-700">
            <span class="text-neutral-300">Technical Support:</span>
            <span class="text-[#6d9e37] font-semibold block mt-1">24/7</span>
          </div>
        </div>
      </section>
    </div>
  </main>
</Layout>