---
// Contact Page for WorkRoot IT Solutions LLP
// Enhanced: Professional form design, interactive map embed, contact cards, social links, scroll animations

import BaseLayout from '../layouts/BaseLayout.astro';
import SEO from '../components/SEO.astro';

// Contact info data
const contactInfo = [
  {
    icon: 'location',
    title: 'Visit Us',
    details: ['At Post Rajapur, Shantinagar', 'Khatav, Maharashtra 415503'],
    link: 'https://maps.app.goo.gl/9bZ5ez1pjbU74ATq5',
    linkLabel: 'Get directions',
    color: 'primary',
  },
  {
    icon: 'phone',
    title: 'Call Us',
    details: ['+91 9561417403'],
    link: 'tel:+919561417403',
    linkLabel: 'Call now',
    color: 'accent',
  },
  {
    icon: 'email',
    title: 'Email Us',
    details: ['admin@workroot.in'],
    link: 'mailto:admin@workroot.in',
    linkLabel: 'Send email',
    color: 'emerald',
  },
  {
    icon: 'clock',
    title: 'Business Hours',
    details: ['Mon – Fri: 10:00 AM – 6:00 PM', 'Sat – Sun: Closed'],
    link: null,
    linkLabel: null,
    color: 'violet',
  },
];

// Social links
const socialLinks = [
  {
    name: 'LinkedIn',
    href: 'https://www.linkedin.com/company/workroot',
    icon: 'linkedin',
    description: 'Connect professionally',
    color: 'hover:bg-[#0077b5]',
  },
  {
    name: 'Twitter / X',
    href: 'https://x.com/GhanwatAjay',
    icon: 'twitter',
    description: 'Follow for updates',
    color: 'hover:bg-[#000000]',
  },
  {
    name: 'GitHub',
    href: 'https://git.workroot.in/WorkRoot/',
    icon: 'github',
    description: 'See our open source',
    color: 'hover:bg-[#333333]',
  },
  {
    name: 'Facebook',
    href: 'https://www.facebook.com/profile.php?id=61576503897897',
    icon: 'facebook',
    description: 'Follow us on Facebook',
    color: 'hover:bg-[#1877f2]',
  },
];

// Trust indicators
const trustStats = [
  { value: '20+', label: 'Projects Delivered' },
  { value: '100%', label: 'Client Satisfaction' },
  { value: '< 24h', label: 'Response Time' },
  { value: '3+', label: 'Years Experience' },
];
---

<BaseLayout
  title="Contact Us — Get a Free Quote"
  description="Start your project with WorkRoot IT Solutions LLP. 20+ projects delivered, 100% client satisfaction, response within 24 hours. Reach us at admin@workroot.in or call +91 9561417403."
>
  <SEO
    slot="head"
    type="ContactPage"
    breadcrumbs={[
      { name: 'Home', url: '/' },
      { name: 'Contact', url: '/contact' }
    ]}
  />
  <!-- Prefetch Google Maps domains used for directions link and map embed on this page -->
  <link slot="head" rel="dns-prefetch" href="https://maps.google.com" />
  <link slot="head" rel="preconnect" href="https://maps.google.com" />
  <link slot="head" rel="dns-prefetch" href="https://www.google.com" />
  <link slot="head" rel="dns-prefetch" href="https://maps.googleapis.com" />

  <!-- Hero Section -->
  <section class="relative py-24 bg-hero-dark overflow-hidden">
    <!-- Grid pattern overlay -->
    <div class="absolute inset-0 bg-grid-pattern bg-grid-80 opacity-30 pointer-events-none" aria-hidden="true"></div>

    <!-- Decorative blobs -->
    <div class="absolute -top-40 -right-32 w-96 h-96 bg-primary/15 rounded-full blur-2xl md:blur-3xl pointer-events-none" aria-hidden="true"></div>
    <div class="absolute -bottom-32 -left-32 w-80 h-80 bg-accent/10 rounded-full blur-2xl md:blur-3xl pointer-events-none" aria-hidden="true"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-2xl md:blur-3xl pointer-events-none" aria-hidden="true"></div>

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="max-w-3xl mx-auto text-center">
        <!-- Eyebrow label -->
        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary-300 text-sm font-medium mb-6 reveal-on-scroll">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
          Let's Start a Conversation
        </div>

        <h1 class="text-display-lg font-bold text-white mb-6 reveal-on-scroll reveal-delay-1">
          We'd Love to<br>
          <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-primary-500">Hear From You</span>
        </h1>
        <p class="text-xl text-secondary-300 max-w-2xl mx-auto reveal-on-scroll reveal-delay-2">
          Whether you have a project in mind, a question about our services, or just want to explore the possibilities — our team is ready to help.
        </p>

        <!-- Trust stats strip -->
        <div class="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-4 reveal-on-scroll reveal-delay-3">
          {trustStats.map((stat) => (
            <div class="bg-white/5 border border-white/10 rounded-xl px-4 py-4 text-center backdrop-blur-sm">
              <div class="text-2xl font-bold text-white mb-1">{stat.value}</div>
              <div class="text-xs text-secondary-400 uppercase tracking-wider">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- Main Contact Section -->
  <section class="py-20 lg:py-28 bg-secondary-50 dark:bg-secondary-900">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid lg:grid-cols-5 gap-12 xl:gap-16">

        <!-- LEFT: Contact Form (3 cols) -->
        <div class="lg:col-span-3 reveal-on-scroll">
          <div class="bg-white dark:bg-secondary-800 rounded-2xl shadow-card border border-secondary-100 dark:border-secondary-700 p-8 lg:p-10">
            <!-- Form Header -->
            <div class="mb-8">
              <h2 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-2">Send Us a Message</h2>
              <p class="text-secondary-500 dark:text-secondary-400 text-sm">Fill out the form below and we'll respond within 24 hours.</p>
            </div>

            <form id="contact-form" class="space-y-5" novalidate>
              <!-- Honeypot field (anti-spam) - hidden from users -->
              <div class="absolute -left-[9999px]" aria-hidden="true">
                <label for="website">
                  Website
                  <input
                    type="text"
                    id="website"
                    name="website"
                    tabindex="-1"
                    autocomplete="off"
                  />
                </label>
              </div>

              <!-- Name + Email row -->
              <div class="grid sm:grid-cols-2 gap-5">
                <!-- Name Field -->
                <div class="form-group">
                  <label for="name" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
                    Full Name <span class="text-red-500" aria-hidden="true">*</span>
                    <span class="sr-only">(required)</span>
                  </label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none" aria-hidden="true">
                      <svg class="w-4 h-4 text-secondary-400 field-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                      </svg>
                    </div>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      required
                      minlength="2"
                      autocomplete="name"
                      aria-required="true"
                      aria-describedby="name-error"
                      class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700"
                      placeholder="John Doe"
                    />
                    <div class="valid-check absolute inset-y-0 right-3 flex items-center hidden" aria-label="Valid">
                      <svg class="w-4 h-4 text-green-700 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <div class="invalid-check absolute inset-y-0 right-3 flex items-center hidden" aria-label="Invalid">
                      <svg class="w-4 h-4 text-red-800 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </div>
                  </div>
                  <p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="name-error" data-error="name" role="alert">
                    <svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    Please enter your full name (at least 2 characters).
                  </p>
                </div>

                <!-- Email Field -->
                <div class="form-group">
                  <label for="email" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
                    Email Address <span class="text-red-500" aria-hidden="true">*</span>
                    <span class="sr-only">(required)</span>
                  </label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none" aria-hidden="true">
                      <svg class="w-4 h-4 text-secondary-400 field-icon" 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>
                    </div>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      required
                      autocomplete="email"
                      aria-required="true"
                      aria-describedby="email-error"
                      class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700"
                      placeholder="john@example.com"
                    />
                    <div class="valid-check absolute inset-y-0 right-3 flex items-center hidden" aria-label="Valid">
                      <svg class="w-4 h-4 text-green-700 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <div class="invalid-check absolute inset-y-0 right-3 flex items-center hidden" aria-label="Invalid">
                      <svg class="w-4 h-4 text-red-800 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </div>
                  </div>
                  <p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="email-error" data-error="email" role="alert">
                    <svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    Please enter a valid email address.
                  </p>
                </div>
              </div>

              <!-- Phone + Subject row -->
              <div class="grid sm:grid-cols-2 gap-5">
                <!-- Phone Field -->
                <div class="form-group">
                  <label for="phone" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
                    Phone Number
                    <span class="text-secondary-400 font-normal">(optional)</span>
                  </label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none" aria-hidden="true">
                      <svg class="w-4 h-4 text-secondary-400 field-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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>
                    <input
                      type="tel"
                      id="phone"
                      name="phone"
                      autocomplete="tel"
                      aria-describedby="phone-error"
                      class="form-input w-full pl-10 pr-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700"
                      placeholder="+1 (555) 123-4567"
                    />
                    <div class="valid-check absolute inset-y-0 right-3 flex items-center hidden" aria-label="Valid">
                      <svg class="w-4 h-4 text-green-700 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <div class="invalid-check absolute inset-y-0 right-3 flex items-center hidden" aria-label="Invalid">
                      <svg class="w-4 h-4 text-red-800 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </div>
                  </div>
                  <p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="phone-error" data-error="phone" role="alert">
                    <svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    Please enter a valid phone number.
                  </p>
                </div>

                <!-- Subject Field -->
                <div class="form-group">
                  <label for="subject" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-1.5">
                    Service Needed <span class="text-red-500" aria-hidden="true">*</span>
                    <span class="sr-only">(required)</span>
                  </label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none" aria-hidden="true">
                      <svg class="w-4 h-4 text-secondary-400 field-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                      </svg>
                    </div>
                    <select
                      id="subject"
                      name="subject"
                      required
                      aria-required="true"
                      aria-describedby="subject-error"
                      class="form-input w-full pl-10 pr-8 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700 appearance-none cursor-pointer"
                    >
                      <option value="">Select a service...</option>
                      <option value="web-development">Web Development</option>
                      <option value="mobile-development">Mobile Development</option>
                      <option value="cloud-services">Cloud Services</option>
                      <option value="ai-ml">AI & Machine Learning</option>
                      <option value="consulting">IT Consulting</option>
                      <option value="support">Technical Support</option>
                      <option value="other">Other / General Inquiry</option>
                    </select>
                    <div class="valid-check absolute inset-y-0 right-9 flex items-center hidden" aria-label="Valid">
                      <svg class="w-4 h-4 text-green-700 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <div class="invalid-check absolute inset-y-0 right-9 flex items-center hidden" aria-label="Invalid">
                      <svg class="w-4 h-4 text-red-800 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </div>
                    <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none" aria-hidden="true">
                      <svg class="w-4 h-4 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                      </svg>
                    </div>
                  </div>
                  <p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="subject-error" data-error="subject" role="alert">
                    <svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    Please select a service.
                  </p>
                </div>
              </div>

              <!-- Budget range (new field) -->
              <div class="form-group">
                <label class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300 mb-2">
                  Project Budget
                  <span class="text-secondary-400 dark:text-secondary-500 font-normal">(optional)</span>
                </label>
                <div class="flex flex-wrap gap-2" role="group" aria-label="Budget range options">
                  {['< $5K', '$5K – $15K', '$15K – $50K', '$50K+', 'Not sure yet'].map((range, i) => (
                    <label class="budget-option flex items-center gap-1.5 px-3 py-2 rounded-lg border border-secondary-200 dark:border-secondary-600 text-sm text-secondary-600 dark:text-secondary-400 cursor-pointer hover:border-primary hover:bg-primary/5 dark:hover:bg-primary/10 transition-all duration-150 has-[:checked]:border-primary has-[:checked]:bg-primary/10 has-[:checked]:text-primary-700 dark:has-[:checked]:text-primary-300">
                      <input type="radio" name="budget" value={range} class="sr-only" />
                      {range}
                    </label>
                  ))}
                </div>
              </div>

              <!-- Message Field -->
              <div class="form-group">
                <div class="flex items-center justify-between mb-1.5">
                  <label for="message" class="block text-sm font-semibold text-secondary-700 dark:text-secondary-300">
                    Your Message <span class="text-red-500" aria-hidden="true">*</span>
                    <span class="sr-only">(required)</span>
                  </label>
                  <span id="char-count" class="text-xs text-secondary-400" aria-hidden="true">0 / 5000</span>
                </div>
                <div class="relative">
                  <textarea
                    id="message"
                    name="message"
                    required
                    minlength="10"
                    maxlength="5000"
                    rows="5"
                    aria-required="true"
                    aria-describedby="message-error message-hint"
                    class="form-input w-full px-4 py-3 rounded-xl border border-secondary-200 dark:border-secondary-600 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 text-secondary-900 dark:text-secondary-100 placeholder-secondary-400 dark:placeholder-secondary-500 text-sm bg-secondary-50 dark:bg-secondary-700 focus:bg-white dark:focus:bg-secondary-700 resize-none"
                    placeholder="Tell us about your project, goals, and timeline..."
                  ></textarea>
                  <div class="valid-check absolute top-3 right-3 flex items-center hidden" aria-label="Valid">
                    <svg class="w-4 h-4 text-green-700 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                    </svg>
                  </div>
                  <div class="invalid-check absolute top-3 right-3 flex items-center hidden" aria-label="Invalid">
                    <svg class="w-4 h-4 text-red-800 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </div>
                </div>
                <p id="message-hint" class="mt-1 text-xs text-secondary-400">Minimum 10 characters. Be as detailed as possible for a faster, more accurate response.</p>
                <p class="mt-1.5 text-xs text-red-500 hidden flex items-center gap-1" id="message-error" data-error="message" role="alert">
                  <svg class="w-3.5 h-3.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                  Please enter a message (at least 10 characters).
                </p>
              </div>

              <!-- Submit Button + Privacy note -->
              <div class="pt-2">
                <button
                  type="submit"
                  id="submit-btn"
                  class="w-full py-4 px-6 bg-gradient-to-r from-primary to-primary-600 text-white font-semibold rounded-xl hover:from-primary-600 hover:to-primary-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all duration-200 flex items-center justify-center gap-2 shadow-primary-glow/50 disabled:opacity-60 disabled:cursor-not-allowed group"
                >
                  <span id="btn-text">Send Message</span>
                  <svg id="btn-arrow" class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                  </svg>
                  <svg id="btn-spinner" class="animate-spin w-5 h-5 hidden" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                </button>

                <!-- Privacy note -->
                <p class="mt-3 text-center text-xs text-secondary-400">
                  <svg class="w-3.5 h-3.5 inline mr-1 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                  We respect your privacy. Your information is never shared with third parties.
                </p>
              </div>
            </form>

            <!-- Success state (hidden by default) -->
            <div id="success-state" class="hidden text-center py-12">
              <div class="w-20 h-20 bg-emerald-100 dark:bg-emerald-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h3 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-2">Message Sent!</h3>
              <p class="text-secondary-600 dark:text-secondary-400 mb-6">Message received! We will get back to you shortly.</p>
              <button
                id="send-another"
                class="inline-flex items-center gap-2 text-primary hover:text-primary-700 font-medium text-sm transition-colors"
              >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Send another message
              </button>
            </div>
          </div>
        </div>

        <!-- RIGHT: Contact Info + Map + Social (2 cols) -->
        <div class="lg:col-span-2 space-y-6">

          <!-- Contact Info Cards -->
          <div class="grid grid-cols-1 xs:grid-cols-2 gap-3 sm:gap-4 reveal-on-scroll reveal-delay-1">
            {contactInfo.map((info) => (
              <div class={`contact-card group relative bg-white dark:bg-secondary-800 rounded-2xl p-5 shadow-card border border-secondary-100 dark:border-secondary-700 hover:shadow-card-hover hover:-translate-y-1 transition-all duration-300 overflow-hidden`}>
                <!-- Colored top accent bar -->
                <div class={`absolute top-0 left-0 right-0 h-1 rounded-t-2xl ${
                  info.color === 'primary' ? 'bg-gradient-to-r from-primary to-primary-600' :
                  info.color === 'accent' ? 'bg-gradient-to-r from-accent to-accent-600' :
                  info.color === 'emerald' ? 'bg-gradient-to-r from-emerald-400 to-emerald-600' :
                  'bg-gradient-to-r from-violet-400 to-violet-600'
                }`} aria-hidden="true"></div>

                <!-- Icon -->
                <div class={`w-10 h-10 rounded-xl flex items-center justify-center mb-3 ${
                  info.color === 'primary' ? 'bg-primary-50' :
                  info.color === 'accent' ? 'bg-amber-50' :
                  info.color === 'emerald' ? 'bg-emerald-50' :
                  'bg-violet-50'
                }`} aria-hidden="true">
                  {info.icon === 'location' && (
                    <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <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>
                  )}
                  {info.icon === 'phone' && (
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <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>
                  )}
                  {info.icon === 'email' && (
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <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>
                  )}
                  {info.icon === 'clock' && (
                    <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  )}
                </div>

                <h3 class="text-sm font-bold text-secondary-900 dark:text-secondary-100 mb-1.5">{info.title}</h3>
                {info.details.map((detail) => (
                  <p class="text-xs text-secondary-500 dark:text-secondary-400 leading-relaxed">{detail}</p>
                ))}
                {info.link && (
                  <a
                    href={info.link}
                    class={`mt-3 inline-flex items-center gap-1 text-xs font-medium transition-colors ${
                      info.color === 'primary' ? 'text-primary-600 hover:text-primary-700' :
                      info.color === 'accent' ? 'text-amber-600 hover:text-amber-700' :
                      info.color === 'emerald' ? 'text-emerald-600 hover:text-emerald-700' :
                      'text-violet-600 hover:text-violet-700'
                    }`}
                    {...(info.href?.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                  >
                    {info.linkLabel}
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                  </a>
                )}
              </div>
            ))}
          </div>

          <!-- Map Embed -->
          <div class="reveal-on-scroll reveal-delay-2">
            <div class="bg-white dark:bg-secondary-800 rounded-2xl shadow-card border border-secondary-100 dark:border-secondary-700 overflow-hidden">
              <div class="relative h-52 bg-secondary-100 dark:bg-secondary-700 group">
                <!-- Google Maps Embed -->
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3820.123456789!2d74.3309312!3d17.7733632!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTfCsDQ2JzI0LjEiTiA3NMKwMTknNTEuNCJF!5e0!3m2!1sen!2sin!4v1234567890"
                  width="100%"
                  height="450"
                  style="border:0;"
                  allowfullscreen=""
                  loading="lazy"
                  referrerpolicy="no-referrer-when-downgrade"
                  title="WorkRoot IT Solutions LLP Office Location"
                  class="w-full rounded-2xl absolute inset-0 h-full"
                ></iframe>

                <!-- Hover overlay: Get Directions -->
                <a
                  href="https://maps.app.goo.gl/9bZ5ez1pjbU74ATq5"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Get directions to At Post Rajapur, Shantinagar, Khatav, Maharashtra 415503 (opens in new tab)"
                  class="absolute inset-0 bg-primary/90 flex flex-col items-center justify-center gap-2 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity duration-300"
                >
                  <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l5.447 2.724A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                  </svg>
                  <span class="text-white font-semibold text-sm">Get Directions</span>
                  <span class="text-white/70 text-xs">Opens in Google Maps</span>
                </a>
              </div>

              <!-- Map footer info - Dynamic business hours status -->
              <div class="px-5 py-4 flex items-center justify-between border-t border-secondary-100 dark:border-secondary-700">
                <div class="flex items-center gap-2" id="business-status" role="status" aria-live="polite" aria-atomic="true">
                  <div id="status-dot" class="w-2 h-2 rounded-full"></div>
                  <span id="status-label" class="text-xs font-medium"></span>
                  <span id="status-detail" class="text-xs"></span>
                </div>
                <a
                  href="https://maps.app.goo.gl/9bZ5ez1pjbU74ATq5"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="text-xs text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1 transition-colors"
                  aria-label="View on map (opens in new tab)"
                >
                  View on map
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                  </svg>
                </a>
              </div>
            </div>
          </div>

          <!-- Social Links -->
          <div class="bg-secondary-900 rounded-2xl p-6 reveal-on-scroll reveal-delay-3">
            <h3 class="text-base font-bold text-white mb-1">Connect With Us</h3>
            <p class="text-secondary-400 text-sm mb-5">Follow us for the latest updates and insights.</p>
            <div class="space-y-3">
              {socialLinks.map((social) => (
                <a
                  href={social.href}
                  aria-label={`${social.name} – ${social.description}`}
                  class={`flex items-center gap-3 p-3 rounded-xl bg-secondary-800 text-secondary-300 hover:text-white transition-all duration-200 group ${social.color}`}
                >
                  <div class="w-8 h-8 flex items-center justify-center flex-shrink-0" aria-hidden="true">
                    {social.icon === 'linkedin' && (
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                      </svg>
                    )}
                    {social.icon === 'twitter' && (
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                      </svg>
                    )}
                    {social.icon === 'github' && (
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                      </svg>
                    )}
                    {social.icon === 'facebook' && (
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                      </svg>
                    )}
                  </div>
                  <div class="min-w-0">
                    <div class="text-sm font-medium leading-none mb-0.5">{social.name}</div>
                    <div class="text-xs text-secondary-500 group-hover:text-secondary-300 transition-colors">{social.description}</div>
                  </div>
                  <svg class="w-4 h-4 ml-auto flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                  </svg>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ Strip -->
  <section class="py-16 bg-white dark:bg-secondary-900 border-t border-secondary-100 dark:border-secondary-800">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-2xl mx-auto text-center mb-10 reveal-on-scroll">
        <h2 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-3">Common Questions</h2>
        <p class="text-secondary-500 dark:text-secondary-400 text-sm">Quick answers to help you before reaching out.</p>
      </div>
      <div class="max-w-3xl mx-auto space-y-3">
        {[
          {
            q: 'How quickly will you respond to my inquiry?',
            a: 'We respond to all inquiries within 24 hours on business days. For urgent matters, please call us directly.',
          },
          {
            q: 'Do you work with clients outside Maharashtra?',
            a: 'Absolutely. We work with clients across India and globally, and are fully equipped for remote collaboration across time zones.',
          },
          {
            q: 'What information should I include in my message?',
            a: 'The more detail, the better! Include your project goals, timeline, budget range, and any technical requirements you already have in mind.',
          },
          {
            q: 'Do you offer free consultations?',
            a: 'Yes — we offer a complimentary 30-minute discovery call for all new project inquiries. Just mention it in your message.',
          },
        ].map((faq, i) => (
          <details
            class={`faq-item group bg-secondary-50 dark:bg-secondary-800 rounded-xl border border-secondary-100 dark:border-secondary-700 overflow-hidden reveal-on-scroll reveal-delay-${Math.min(i + 1, 4)}`}
          >
            <summary class="flex items-center justify-between gap-4 px-6 py-4 cursor-pointer list-none hover:bg-secondary-100 dark:hover:bg-secondary-700 transition-colors duration-150">
              <span class="font-semibold text-secondary-900 dark:text-secondary-100 text-sm">{faq.q}</span>
              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-secondary-200 dark:bg-secondary-700 group-open:bg-primary/10 flex items-center justify-center transition-colors" aria-hidden="true">
                <svg class="w-3.5 h-3.5 text-secondary-600 group-open:text-primary group-open:rotate-45 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
                </svg>
              </div>
            </summary>
            <div class="px-6 pb-4">
              <p class="text-secondary-600 dark:text-secondary-400 text-sm leading-relaxed">{faq.a}</p>
            </div>
          </details>
        ))}
      </div>
    </div>
  </section>

  <!-- CTA Banner -->
  <section class="py-16 bg-gradient-to-r from-secondary-900 via-secondary-800 to-secondary-900 relative overflow-hidden">
    <div class="absolute inset-0 bg-grid-pattern bg-grid-64 opacity-20 pointer-events-none" aria-hidden="true"></div>
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="max-w-3xl mx-auto text-center reveal-on-scroll">
        <p class="text-primary-300 text-sm font-medium uppercase tracking-widest mb-4">Ready to get started?</p>
        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
          Let's Build Something <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-300">Remarkable</span> Together
        </h2>
        <p class="text-secondary-400 mb-8 max-w-xl mx-auto">
          Join 200+ companies who've transformed their digital presence with WorkRoot.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href="#contact-form"
            class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-primary text-white font-semibold rounded-xl hover:bg-primary-600 transition-colors duration-200 shadow-primary-glow focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-secondary-900"
          >
            Start a Project
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </a>
          <a
            href="tel:+919561417403"
            class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/10 text-white font-semibold rounded-xl hover:bg-white/20 transition-colors duration-200 border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-secondary-900"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <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>
            Call Us Directly
          </a>
        </div>
        <!-- Response guarantee -->
        <p class="mt-6 text-secondary-500 text-xs flex items-center justify-center gap-2">
          <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
          Guaranteed response within 24 business hours
        </p>
      </div>
    </div>
  </section>

  <!-- Toast Container -->
  <div id="toast-container" class="fixed bottom-4 right-4 z-50 flex flex-col gap-3 max-w-sm w-full pointer-events-none" aria-live="assertive" aria-atomic="true"></div>
</BaseLayout>

<style>
  /* Scroll-reveal base state */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered delays */
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .animate-ping,
    .animate-float,
    .animate-pulse {
      animation: none;
    }
  }

  /* Form input states — WCAG AA compliant (≥ 4.5:1 contrast) */
  .form-input.is-valid {
    border-color: #155724;
    background-color: #f0fff4;
    color: #155724;
  }
  .form-input.is-invalid {
    border-color: #721c24;
    background-color: #fff5f5;
    color: #721c24;
  }
  /* Dark mode validation states */
  :global(.dark) .form-input.is-valid {
    border-color: #48bb78;
    background-color: rgba(72, 187, 120, 0.1);
    color: #c6f6d5;
  }
  :global(.dark) .form-input.is-invalid {
    border-color: #fc8181;
    background-color: rgba(252, 129, 129, 0.1);
    color: #fed7d7;
  }
  .form-input.is-valid ~ .valid-check {
    display: flex;
  }
  .form-input.is-invalid ~ .invalid-check {
    display: flex;
  }

  /* Budget option - checked state via JS since has-[:checked] may not work in all contexts */
  .budget-option.selected {
    border-color: #0891b2;
    background-color: rgb(8 145 178 / 0.1);
    color: #0e7490;
  }

  /* FAQ item */
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::marker { display: none; }

  /* Contact card top bar */
  .contact-card .top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
  }
</style>

<script>
  import { trackFormSubmit, trackEvent } from '../utils/analytics';

  // ── Scroll reveal ──────────────────────────────────────────
  (function() {
    const elements = document.querySelectorAll('.reveal-on-scroll');
    if (!elements.length) return;
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('revealed');
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
    );
    elements.forEach((el) => observer.observe(el));
  })();

  // ── Toast notifications ────────────────────────────────────
  function showToast(message: string, type: 'success' | 'error') {
    const container = document.getElementById('toast-container');
    if (!container) return;

    const toast = document.createElement('div');
    toast.setAttribute('role', 'alert');
    toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
    toast.className = [
      'pointer-events-auto px-5 py-4 rounded-xl shadow-xl transform transition-all duration-300',
      'translate-x-full opacity-0 flex items-start gap-3 border',
      type === 'success'
        ? 'bg-white border-emerald-200 text-secondary-900'
        : 'bg-white border-red-200 text-secondary-900',
    ].join(' ');

    const iconSvg = type === 'success'
      ? `<div class="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
           <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
         </div>`
      : `<div class="flex-shrink-0 w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
           <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
         </div>`;

    const iconWrapper = document.createElement('div');
    iconWrapper.innerHTML = iconSvg; // static, trusted SVG
    const textEl = document.createElement('div');
    textEl.className = 'flex-1 pt-1';
    const msgEl = document.createElement('p');
    msgEl.className = 'text-sm font-medium';
    msgEl.textContent = message; // textContent prevents XSS
    textEl.appendChild(msgEl);
    toast.appendChild(iconWrapper);
    toast.appendChild(textEl);

    // Dismiss button
    const dismissBtn = document.createElement('button');
    dismissBtn.className = 'flex-shrink-0 mt-0.5 text-secondary-400 hover:text-secondary-600 transition-colors';
    dismissBtn.setAttribute('aria-label', 'Dismiss notification');
    dismissBtn.innerHTML = `<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="M6 18L18 6M6 6l12 12"/></svg>`;
    dismissBtn.addEventListener('click', () => removeToast(toast));
    toast.appendChild(dismissBtn);

    container.appendChild(toast);

    requestAnimationFrame(() => {
      toast.classList.remove('translate-x-full', 'opacity-0');
    });

    const timer = setTimeout(() => removeToast(toast), 6000);
    dismissBtn.addEventListener('click', () => clearTimeout(timer));
  }

  function removeToast(toast: HTMLElement) {
    toast.classList.add('translate-x-full', 'opacity-0');
    setTimeout(() => toast.remove(), 300);
  }

  // ── Character counter ──────────────────────────────────────
  const messageField = document.getElementById('message') as HTMLTextAreaElement;
  const charCount = document.getElementById('char-count');
  if (messageField && charCount) {
    messageField.addEventListener('input', () => {
      const len = messageField.value.length;
      charCount.textContent = `${len} / 5000`;
      charCount.className = len > 4500 ? 'text-xs text-red-500' : 'text-xs text-secondary-400';
    });
  }

  // ── Budget toggle (radio-as-chip) ──────────────────────────
  const budgetOptions = document.querySelectorAll('.budget-option');
  budgetOptions.forEach((opt) => {
    const radio = opt.querySelector('input[type="radio"]') as HTMLInputElement;
    if (radio) {
      radio.addEventListener('change', () => {
        budgetOptions.forEach((o) => o.classList.remove('selected'));
        if (radio.checked) opt.classList.add('selected');
      });
    }
  });

  // ── Form Validation ────────────────────────────────────────
  const form = document.getElementById('contact-form') as HTMLFormElement;
  const successState = document.getElementById('success-state');
  const sendAnotherBtn = document.getElementById('send-another');

  if (form) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const phoneRegex = /^[\+]?[(]?[0-9]{1,3}[)]?[-\s\.]?[(]?[0-9]{1,4}[)]?[-\s\.]?[0-9]{1,4}[-\s\.]?[0-9]{1,9}$/;

    function setFieldState(fieldName: string, isValid: boolean | null) {
      const errorEl = document.querySelector(`[data-error="${fieldName}"]`);
      const inputEl = document.getElementById(fieldName) as HTMLElement | null;
      const validCheck = inputEl?.parentElement?.querySelector('.valid-check') as HTMLElement | null;
      const invalidCheck = inputEl?.parentElement?.querySelector('.invalid-check') as HTMLElement | null;

      if (errorEl) errorEl.classList.toggle('hidden', isValid !== false);

      if (inputEl) {
        inputEl.classList.toggle('is-valid', isValid === true);
        inputEl.classList.toggle('is-invalid', isValid === false);
      }
      if (validCheck) {
        validCheck.classList.toggle('hidden', isValid !== true);
      }
      if (invalidCheck) {
        invalidCheck.classList.toggle('hidden', isValid !== false);
      }
    }

    function validateField(field: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement): boolean {
      const name = field.name;
      const value = field.value.trim();

      switch (name) {
        case 'name': {
          const valid = value.length >= 2;
          setFieldState('name', value.length === 0 ? null : valid);
          return valid;
        }
        case 'email': {
          const valid = emailRegex.test(value);
          setFieldState('email', value.length === 0 ? null : valid);
          return valid;
        }
        case 'phone':
          if (value === '') { setFieldState('phone', null); return true; }
          const phoneValid = phoneRegex.test(value);
          setFieldState('phone', phoneValid);
          return phoneValid;
        case 'subject': {
          const valid = value !== '';
          setFieldState('subject', value === '' ? null : valid);
          return valid;
        }
        case 'message': {
          const valid = value.length >= 10;
          setFieldState('message', value.length === 0 ? null : valid);
          return valid;
        }
        default:
          return true;
      }
    }

    // Blur + input event listeners
    const inputs = form.querySelectorAll('input:not([type="radio"]), textarea, select');
    inputs.forEach((input) => {
      input.addEventListener('blur', (e) => {
        validateField(e.target as HTMLInputElement);
      });
      input.addEventListener('input', (e) => {
        const target = e.target as HTMLInputElement;
        // Only re-validate if already touched (has a state class)
        if (target.classList.contains('is-valid') || target.classList.contains('is-invalid')) {
          validateField(target);
        }
      });
    });

    // Form submission
    form.addEventListener('submit', async (e) => {
      e.preventDefault();

      // Check honeypot
      const honeypot = (form.elements.namedItem('website') as HTMLInputElement)?.value;
      if (honeypot) {
        showToast("Message sent successfully! We'll get back to you within 24 hours.", 'success');
        form.reset();
        return;
      }

      // Validate all fields
      let isValid = true;
      ['name', 'email', 'phone', 'subject', 'message'].forEach((fieldName) => {
        const field = form.elements.namedItem(fieldName) as HTMLInputElement;
        if (field && !validateField(field)) isValid = false;
      });

      if (!isValid) {
        showToast('Please fix the highlighted fields before submitting.', 'error');
        // Focus first invalid field
        const firstInvalid = form.querySelector('.is-invalid') as HTMLElement | null;
        firstInvalid?.focus();
        return;
      }

      // Loading state
      const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
      const btnText = document.getElementById('btn-text');
      const btnArrow = document.getElementById('btn-arrow');
      const btnSpinner = document.getElementById('btn-spinner');

      submitBtn.disabled = true;
      if (btnText) btnText.textContent = 'Sending...';
      if (btnArrow) btnArrow.classList.add('hidden');
      if (btnSpinner) btnSpinner.classList.remove('hidden');

      let success = false;
      let errorMessage = 'Something went wrong. Please try again.';

      // Track when loading started for minimum display time
      const loadingStart = Date.now();

      try {
        // Set up a 10-second timeout using AbortController
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 10_000);

        const response = await fetch('/api/contact', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          signal: controller.signal,
          body: JSON.stringify({
            name: (form.elements.namedItem('name') as HTMLInputElement)?.value.trim(),
            email: (form.elements.namedItem('email') as HTMLInputElement)?.value.trim(),
            phone: (form.elements.namedItem('phone') as HTMLInputElement)?.value.trim(),
            subject: (form.elements.namedItem('subject') as HTMLSelectElement)?.value,
            message: (form.elements.namedItem('message') as HTMLTextAreaElement)?.value.trim(),
            website: honeypot,
          }),
        });

        clearTimeout(timeoutId);

        const data = await response.json() as { success: boolean; message?: string; error?: string };

        if (response.ok && data.success) {
          success = true;
        } else {
          errorMessage = data.error ?? 'Failed to send message. Please try again.';
        }
      } catch (err) {
        if (err instanceof DOMException && err.name === 'AbortError') {
          errorMessage = 'Request timed out. Please check your connection and try again.';
        } else {
          errorMessage = 'Network error. Please check your connection and try again.';
        }
      }

      // Ensure loading state is shown for at least 300ms to avoid jarring flash
      const elapsed = Date.now() - loadingStart;
      if (elapsed < 300) {
        await new Promise((resolve) => setTimeout(resolve, 300 - elapsed));
      }

      // Track analytics
      const subject = (form.elements.namedItem('subject') as HTMLSelectElement)?.value;
      trackFormSubmit('contact', success);
      if (success) trackEvent('contact_form_submit', { subject_category: subject });

      // Reset button state
      submitBtn.disabled = false;
      if (btnText) btnText.textContent = 'Send Message';
      if (btnArrow) btnArrow.classList.remove('hidden');
      if (btnSpinner) btnSpinner.classList.add('hidden');

      if (success) {
        // Show success state inline
        form.classList.add('hidden');
        if (successState) successState.classList.remove('hidden');
        showToast('Message received! We will get back to you shortly.', 'success');
      } else {
        showToast(errorMessage, 'error');
      }
    });

    // "Send another message" resets view
    if (sendAnotherBtn) {
      sendAnotherBtn.addEventListener('click', () => {
        form.reset();
        form.classList.remove('hidden');
        if (successState) successState.classList.add('hidden');
        // Reset field states
        inputs.forEach((input) => {
          (input as HTMLElement).classList.remove('is-valid', 'is-invalid');
        });
        form.querySelectorAll('.valid-check').forEach((el) => el.classList.add('hidden'));
        form.querySelectorAll('.invalid-check').forEach((el) => el.classList.add('hidden'));
        form.querySelectorAll('[data-error]').forEach((el) => el.classList.add('hidden'));
        if (charCount) charCount.textContent = '0 / 5000';
        budgetOptions.forEach((o) => o.classList.remove('selected'));
      });
    }
  }
</script>

<script>
  /**
   * Business Hours Status Utility
   * Automatically detects user timezone and shows Open/Closed status
   * Business hours: Monday–Friday, 10:00 AM – 6:00 PM IST (Asia/Kolkata)
   */
  const BUSINESS_TIMEZONE = 'Asia/Kolkata';
  const OPEN_HOUR = 10;  // 10:00 AM
  const CLOSE_HOUR = 18; // 6:00 PM

  interface BusinessStatus {
    isOpen: boolean;
    label: string;
    detail: string;
  }

  function getBusinessStatus(): BusinessStatus {
    const now = new Date();

    // Get current day and time in the business timezone (IST)
    const options: Intl.DateTimeFormatOptions = {
      timeZone: BUSINESS_TIMEZONE,
      hour: 'numeric',
      minute: 'numeric',
      weekday: 'short',
      hour12: false,
    };

    const parts = new Intl.DateTimeFormat('en-US', options).formatToParts(now);
    const weekday = parts.find(p => p.type === 'weekday')?.value ?? '';
    const hour = parseInt(parts.find(p => p.type === 'hour')?.value ?? '0', 10);
    const minute = parseInt(parts.find(p => p.type === 'minute')?.value ?? '0', 10);

    // Map weekday abbreviation to day number (Mon=1 ... Fri=5)
    const dayMap: Record<string, number> = {
      Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6,
    };
    const dayNum = dayMap[weekday] ?? 0;

    const isWeekday = dayNum >= 1 && dayNum <= 5;
    const currentMinutes = hour * 60 + minute;
    const openMinutes = OPEN_HOUR * 60;
    const closeMinutes = CLOSE_HOUR * 60;
    const isWithinHours = currentMinutes >= openMinutes && currentMinutes < closeMinutes;
    const isOpen = isWeekday && isWithinHours;

    let detail = '';
    if (isOpen) {
      // Show closing time in user's local timezone
      const closingIST = new Date(now);
      // Calculate the closing time in IST, then convert
      const istOffset = getTimezoneOffsetMinutes(BUSINESS_TIMEZONE, now);
      const localOffset = now.getTimezoneOffset(); // negative for east of UTC
      const diffMinutes = istOffset + localOffset;
      const minutesUntilClose = closeMinutes - currentMinutes;

      if (minutesUntilClose <= 60) {
        detail = `· Closes in ${minutesUntilClose} min`;
      } else {
        // Format closing time in user's local time
        const closingLocal = new Date(now.getTime() + (minutesUntilClose - diffMinutes + diffMinutes) * 60000);
        // Simpler approach: calculate closing time in UTC then display locally
        const nowInIST = currentMinutes;
        const minsToClose = closeMinutes - nowInIST;
        const closingTime = new Date(now.getTime() + minsToClose * 60000);
        const localCloseStr = closingTime.toLocaleTimeString(undefined, {
          hour: 'numeric',
          minute: '2-digit',
          hour12: true,
        });
        detail = `· Closes at ${localCloseStr}`;
      }
    } else {
      // Calculate next opening time
      let daysUntilOpen = 0;
      let nextDay = dayNum;

      if (isWeekday && currentMinutes < openMinutes) {
        // Today but before opening
        daysUntilOpen = 0;
      } else {
        // After hours or weekend — find next weekday
        nextDay = (dayNum + 1) % 7;
        daysUntilOpen = 1;
        while (nextDay < 1 || nextDay > 5) {
          nextDay = (nextDay + 1) % 7;
          daysUntilOpen++;
        }
      }

      if (daysUntilOpen === 0) {
        const minsToOpen = openMinutes - currentMinutes;
        if (minsToOpen <= 60) {
          detail = `· Opens in ${minsToOpen} min`;
        } else {
          const openingTime = new Date(now.getTime() + minsToOpen * 60000);
          const localOpenStr = openingTime.toLocaleTimeString(undefined, {
            hour: 'numeric',
            minute: '2-digit',
            hour12: true,
          });
          detail = `· Opens at ${localOpenStr}`;
        }
      } else if (daysUntilOpen === 1) {
        detail = '· Opens tomorrow at 10 AM IST';
      } else {
        const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        detail = `· Opens ${dayNames[nextDay]} at 10 AM IST`;
      }
    }

    return {
      isOpen,
      label: isOpen ? 'Open' : 'Closed',
      detail,
    };
  }

  /** Get timezone offset in minutes from UTC for a given IANA timezone */
  function getTimezoneOffsetMinutes(tz: string, date: Date): number {
    const utcStr = date.toLocaleString('en-US', { timeZone: 'UTC' });
    const tzStr = date.toLocaleString('en-US', { timeZone: tz });
    const utcDate = new Date(utcStr);
    const tzDate = new Date(tzStr);
    return (tzDate.getTime() - utcDate.getTime()) / 60000;
  }

  function updateBusinessStatus(): void {
    const dot = document.getElementById('status-dot');
    const label = document.getElementById('status-label');
    const detailEl = document.getElementById('status-detail');

    if (!dot || !label || !detailEl) return;

    const status = getBusinessStatus();

    if (status.isOpen) {
      dot.className = 'w-2 h-2 rounded-full bg-emerald-400 animate-pulse';
      label.className = 'text-xs font-medium text-emerald-600 dark:text-emerald-400';
      label.textContent = 'Open';
    } else {
      dot.className = 'w-2 h-2 rounded-full bg-red-400';
      label.className = 'text-xs font-medium text-red-600 dark:text-red-400';
      label.textContent = 'Closed';
    }

    detailEl.textContent = status.detail;
    detailEl.className = 'text-xs text-secondary-400 dark:text-secondary-500';
  }

  // Run on page load
  updateBusinessStatus();

  // Re-check every 60 seconds so status updates if user keeps the page open
  setInterval(updateBusinessStatus, 60_000);
</script>