@extends('frontend.layouts.app')

@section('title', 'Contact Us')

@section(
    'meta_description',
    'Get in touch with Hi-Tech Pathshala — questions about test series, courses, products or your order.'
)

@section('content')

<section class="ht-contact-section">
  <!-- =========================================
       HERO / HEADER BANNER
  ========================================== -->
  <div class="contact-hero">
    <div class="contact-hero__bg-dots" aria-hidden="true"></div>
    <div class="container contact-hero__container">
      
      <!-- Top Pill Badge -->
      <div class="contact-hero__badge">
        <i class="fas fa-headset" aria-hidden="true"></i>
        <span>Get in Touch</span>
      </div>

      <!-- Main Title & Accent -->
      <h1 class="contact-hero__title">Contact Us</h1>
      <div class="contact-hero__divider" aria-hidden="true">
        <span class="line"></span>
        <span class="diamond">◆</span>
        <span class="line"></span>
      </div>

      <!-- Subtitle -->
      <p class="contact-hero__subtitle">
        We're here to help CA, CS, CMA, JEE, NEET and SSC aspirants throughout their preparation journey. 
        Reach out to us for any questions regarding test series, courses, notes, products or your orders.
      </p>

      <!-- Envelope 3D Visual Illustration -->
      <div class="contact-hero__illustration" aria-hidden="true">
        <div class="envelope-wrapper">
          <div class="envelope-body">
            <div class="envelope-card">
              <span class="card-line short"></span>
              <span class="card-line long"></span>
              <span class="card-line medium"></span>
            </div>
          </div>
          <div class="airplane-badge">
            <i class="fas fa-paper-plane"></i>
          </div>
        </div>
        <svg class="trail-path" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10,80 Q50,0 90,40" stroke="rgba(255,255,255,0.4)" stroke-dasharray="4 4" stroke-width="2" fill="none"/>
        </svg>
      </div>

    </div>
  </div>

  <!-- =========================================
       MAIN CARDS SECTION (2 COLUMNS)
  ========================================== -->
  <div class="container contact-content">
    <div class="contact-grid">

      <!-- LEFT COLUMN: Contact Form -->
      <div class="ht-card contact-form-card">
        <div class="contact-form-card__accent-bar"></div>
        <div class="contact-card-header">
          <div class="contact-card-icon contact-card-icon--blue">
            <i class="fas fa-paper-plane"></i>
          </div>
          <div>
            <h3 class="contact-card-title">Send us a Message</h3>
            <p class="contact-card-desc">Fill out the form below and our team will get back to you as soon as possible.</p>
          </div>
        </div>

        <form class="contact-form" action="#" method="POST" onsubmit="event.preventDefault();">
          <div class="form-row form-row--2col">
            <div class="ht-form-group">
              <label class="ht-label">Full Name <span class="required">*</span></label>
              <div class="input-icon-wrapper">
                <i class="far fa-user input-icon"></i>
                <input type="text" class="ht-input" placeholder="Enter your full name" required />
              </div>
            </div>

            <div class="ht-form-group">
              <label class="ht-label">Email Address <span class="required">*</span></label>
              <div class="input-icon-wrapper">
                <i class="far fa-envelope input-icon"></i>
                <input type="email" class="ht-input" placeholder="you@example.com" required />
              </div>
            </div>
          </div>

          <div class="ht-form-group">
            <label class="ht-label">Phone Number <span class="optional">(Optional)</span></label>
            <div class="input-icon-wrapper">
              <i class="fas fa-phone-alt input-icon"></i>
              <input type="tel" class="ht-input" placeholder="+91 98765 43210" />
            </div>
          </div>

          <div class="ht-form-group">
            <label class="ht-label">Message <span class="required">*</span></label>
            <div class="input-icon-wrapper input-icon-wrapper--textarea">
              <i class="far fa-comment-dots input-icon"></i>
              <textarea class="ht-input ht-textarea" rows="4" placeholder="Tell us how we can help you..." required></textarea>
            </div>
          </div>

          <button type="submit" class="ht-btn-submit">
            <i class="fas fa-paper-plane"></i> Send Message
          </button>
        </form>

        <div class="card-dots-bg" aria-hidden="true"></div>
      </div>

      <!-- RIGHT COLUMN: Contact Information -->
      <div class="ht-card contact-info-card">
        <div class="contact-card-header">
          <div class="contact-card-icon contact-card-icon--blue">
            <i class="far fa-user"></i>
          </div>
          <div>
            <h3 class="contact-card-title">Contact Information</h3>
            <p class="contact-card-desc">Visit our office or connect with us through the details below.</p>
          </div>
        </div>

        <div class="info-list">
          <div class="info-item">
            <div class="info-item__icon">
              <i class="fas fa-map-marker-alt"></i>
            </div>
            <div class="info-item__content">
              <h4>Visit Our Office</h4>
              <p>170 Khamla,<br>Nagpur 440025</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-item__icon">
              <i class="fas fa-phone-alt"></i>
            </div>
            <div class="info-item__content">
              <h4>Call Us</h4>
              <p>+91 78418 99984</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-item__icon">
              <i class="fas fa-envelope"></i>
            </div>
            <div class="info-item__content">
              <h4>Email Us</h4>
              <p>hitechpathshala00@gmail.com</p>
            </div>
          </div>

          <div class="info-item">
            <div class="info-item__icon">
              <i class="far fa-clock"></i>
            </div>
            <div class="info-item__content">
              <h4>Working Hours</h4>
              <p>Monday – Saturday<br>10:00 AM – 7:00 PM</p>
            </div>
          </div>
        </div>

        <!-- Embedded Map Widget -->
        <div class="contact-map-card">
          <iframe 
            title="Office Location Map"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3721.5283526189913!2d79.0601!3d21.1312!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjHCsDA3JzUyLjMiTiA3OcKwMDMnMzYuNCJF!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin" 
            width="100%" 
            height="100%" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy">
          </iframe>
          <a href="https://maps.google.com" target="_blank" rel="noopener noreferrer" class="map-btn">
            Open in Google Maps <i class="fas fa-arrow-right"></i>
          </a>
        </div>
      </div>

    </div>

    <!-- =========================================
         BOTTOM HIGHLIGHTS BAR (4 COLUMNS)
    ========================================== -->
    <div class="ht-card contact-features-bar">
      <div class="feature-col">
        <div class="feature-icon feature-icon--blue">
          <i class="fas fa-user-friends"></i>
        </div>
        <div>
          <h4>Quick Response</h4>
          <p>We typically reply within 24 hours</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--gold">
          <i class="fas fa-shield-alt"></i>
        </div>
        <div>
          <h4>Trusted Support</h4>
          <p>Our team is here to guide you at every step</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--green">
          <i class="fas fa-headset"></i>
        </div>
        <div>
          <h4>Dedicated Team</h4>
          <p>Experienced mentors ready to assist you</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--purple">
          <i class="far fa-heart"></i>
        </div>
        <div>
          <h4>We Care</h4>
          <p>Your success is our priority</p>
        </div>
      </div>
    </div>

  </div>
</section>

@endsection


@push('styles')

<link
    rel="stylesheet"
    href="{{ asset('assets/css/contact.css') }}">

@endpush