'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { Mail, Phone, MapPin, Send, Clock, Globe, Shield } from 'lucide-react';
import styles from './Contact.module.css';

export default function Contact() {
  return (
    <section className={styles.section}>
      {/* 1. CREATIVE INNER BANNER */}
      <div className={styles.hero}>
        <div className={styles.heroBg}>
          <Image 
            src="/contact_hero.png" 
            alt="Technical Hub" 
            fill 
            priority
            className={styles.bgImg} 
          />
          <div className={styles.heroOverlay}></div>
        </div>
        <div className={styles.container}>
          <motion.div 
            className={styles.heroContent}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <span className={styles.label}>ESTABLISHED 2004</span>
            <h1 className={styles.heroTitle}>TECHNICAL <br />SUPPORT <span className={styles.red}>HUB</span></h1>
            <p className={styles.heroDesc}>
              Our specialized team provides surgical-grade technical assistance for your ECU management and performance builds.
            </p>
          </motion.div>
        </div>
      </div>

      <div className={styles.container}>
        <div className={styles.mainGrid}>
          {/* 2. CREATIVE INFO SECTION */}
          <motion.div 
            className={styles.infoCol}
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
          >
            <div className={styles.sideLabel}>COMMUNICATION LINE</div>
            
            <div className={styles.infoGrid}>
              <div className={styles.infoBox}>
                <div className={styles.iconWrapper}><Mail size={20} /></div>
                <div className={styles.boxText}>
                  <h4>EMAIL SYSTEMS</h4>
                  <p>support@hondavert.com</p>
                  <p>sales@hondavert.com</p>
                </div>
              </div>
              
              <div className={styles.infoBox}>
                <div className={styles.iconWrapper}><Phone size={20} /></div>
                <div className={styles.boxText}>
                  <h4>GLOBAL VOICE</h4>
                  <p>+48 123 456 789 (EU)</p>
                  <p>+1 800 555-JDM (US)</p>
                </div>
              </div>

              <div className={styles.infoBox}>
                <div className={styles.iconWrapper}><Clock size={20} /></div>
                <div className={styles.boxText}>
                  <h4>LAB HOURS</h4>
                  <p>MON - FRI: 09:00 - 18:00</p>
                  <p>SAT: EMERGENCY ONLY</p>
                </div>
              </div>

              <div className={styles.infoBox}>
                <div className={styles.iconWrapper}><Globe size={20} /></div>
                <div className={styles.boxText}>
                  <h4>LOCATION</h4>
                  <p>WARSAW HQ</p>
                  <p>POLAND, EUROPE</p>
                </div>
              </div>
            </div>

            <div className={styles.securityBox}>
               <Shield className={styles.shieldIcon} />
               <p>All technical data transmissions are secured using 256-bit industrial encryption standards.</p>
            </div>
          </motion.div>

          {/* 3. CREATIVE FORM SECTION */}
          <motion.div 
            className={styles.formCol}
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <div className={styles.formHeader}>
               <h3>TRANSMIT <span className={styles.red}>DATA</span></h3>
               <p>Initialize a secure communication channel with our engineers.</p>
            </div>

            <form className={styles.contactForm} onSubmit={(e) => e.preventDefault()}>
              <div className={styles.formRow}>
                <div className={styles.inputBox}>
                  <label>COMMANDER NAME</label>
                  <input type="text" placeholder="ENTER FULL NAME" />
                  <div className={styles.inputLine}></div>
                </div>
                <div className={styles.inputBox}>
                  <label>EMAIL ADDRESS</label>
                  <input type="email" placeholder="ENTER VALID EMAIL" />
                  <div className={styles.inputLine}></div>
                </div>
              </div>

              <div className={styles.inputBox}>
                <label>SUBJECT PROTOCOL</label>
                <select>
                  <option>TECHNICAL SUPPORT</option>
                  <option>HARDWARE INSTALLATION</option>
                  <option>SOFTWARE LICENSING</option>
                  <option>DEALER APPLICATIONS</option>
                </select>
                <div className={styles.inputLine}></div>
              </div>

              <div className={styles.inputBox}>
                <label>TECHNICAL MESSAGE</label>
                <textarea rows={6} placeholder="DESCRIBE YOUR SYSTEM OR TECHNICAL QUERY..."></textarea>
                <div className={styles.inputLine}></div>
              </div>

              <div className={styles.buttonWrapper}>
                <button className={styles.submitBtn}>
                  INITIATE TRANSMISSION <Send size={18} />
                </button>
              </div>
            </form>
          </motion.div>
        </div>
      </div>
    </section>
  );
}