import Image from 'next/image';
import styles from './LocationSection.module.css';

export default function LocationSection() {
  return (
    <section id="contact" className={styles.section}>
      <div className={styles.container}>
        <div className={styles.header}>
          <p className={styles.sectionTag}>📍 Contact & Location</p>
          <h2 className={styles.sectionTitle}>Get in Touch</h2>
          <p className={styles.sectionDesc}>We'd love to hear from you. Book a table or ask us a question.</p>
        </div>

        <div className={styles.premiumCard}>
          {/* Left - Image & Glass Info */}
          <div className={styles.imagePane}>
            <Image 
              src="/images/hero-dosa.png" 
              alt="Restaurant ambiance" 
              fill 
              className={styles.bgImage} 
            />
            <div className={styles.imageOverlay}></div>
            
            <div className={styles.glassInfo}>
              <div className={styles.infoItem}>
                <div className={styles.infoIcon}>
                  <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                </div>
                <div>
                  <h4 className={styles.infoLabel}>Our Location</h4>
                  <p className={styles.infoText}>
                    123 King St S, Waterloo,<br />
                    ON N2J 1N9, Canada
                  </p>
                </div>
              </div>

              <div className={styles.infoItem}>
                <div className={styles.infoIcon}>
                  <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                </div>
                <div>
                  <h4 className={styles.infoLabel}>Opening Hours</h4>
                  <p className={styles.infoText}>
                    Mon – Thu: 4 PM – 10 PM<br />
                    Fri – Sun: 11 AM – 10 PM
                  </p>
                </div>
              </div>

              <div className={styles.infoItem}>
                <div className={styles.infoIcon}>
                  <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                </div>
                <div>
                  <h4 className={styles.infoLabel}>Contact Us</h4>
                  <p className={styles.infoText}>
                    +1 (519) 888-7459<br />
                    mydosaplacewaterloo@gmail.com
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Right - Contact Form */}
          <div className={styles.formPane}>
            <h3 className={styles.formTitle}>Send a Message</h3>
            <p className={styles.formSubtitle}>Fill out the form below and our team will get back to you shortly.</p>
            
            <form className={styles.form}>
              <div className={styles.formRow}>
                <div className={styles.formGroup}>
                  <label htmlFor="name" className={styles.label}>First Name</label>
                  <input type="text" id="name" className={styles.input} placeholder="John" />
                </div>
                <div className={styles.formGroup}>
                  <label htmlFor="lastName" className={styles.label}>Last Name</label>
                  <input type="text" id="lastName" className={styles.input} placeholder="Doe" />
                </div>
              </div>
              
              <div className={styles.formGroup}>
                <label htmlFor="email" className={styles.label}>Email Address</label>
                <input type="email" id="email" className={styles.input} placeholder="john@example.com" />
              </div>
              
              <div className={styles.formGroup}>
                <label htmlFor="message" className={styles.label}>Your Message</label>
                <textarea id="message" rows="4" className={styles.textarea} placeholder="How can we help you?"></textarea>
              </div>
              
              <button type="submit" className={styles.btnSubmit}>
                Send Message
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}