'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { 
  Info, 
  Activity, 
  Settings, 
  Gauge, 
  Zap,
  CheckCircle,
  Database
} from 'lucide-react';
import { useRef } from 'react';
import styles from './MapSensor.module.css';

export default function MapSensor() {

  const infoRef = useRef<HTMLElement>(null);
  const specsRef = useRef<HTMLElement>(null);

  const scrollToSection = (ref: React.RefObject<HTMLElement | null>) => {
    if (ref.current) {
      ref.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const coreFeatures = [
    { title: 'Direct Plug & Play', desc: 'Installs securely in under 60 seconds. Completely eliminates risky custom wiring splices.', icon: <CheckCircle size={24} /> },
    { title: '4-Bar Pressure Limit', desc: 'Reads vacuum to upwards of 43+ PSI of boost precisely across the curve.', icon: <Gauge size={24} /> },
    { title: 'Linear Calibration', desc: 'Exceptional linear voltage scaling ensures tuning stability under high output.', icon: <Activity size={24} /> },
    { title: 'B-D-F-H Series Fitment', desc: 'Bolts directly to the B/D/F/H-series proprietary factory throttle bodies.', icon: <Settings size={24} /> },
    { title: 'K-Series Fitment', desc: 'Available in specifically engineered K-series intake manifold form factors.', icon: <Zap size={24} /> },
    { title: 'Data Resolution', desc: 'High-speed transducer delivers robust feedback for ECU closed-loop processes.', icon: <Database size={24} /> },
  ];

  return (
    <div className={styles.wrapper}>
      {/* 1. HERO SECTION */}
      <section className={styles.hero}>
        <div className={styles.bgWrapper}>
          <Image src="/map_sensor.png" alt="MAP Sensor Hero" fill className={styles.heroImg} priority />
        </div>
        <div className={styles.heroOverlay}></div>
        <div className={styles.container}>
          <div className={styles.heroGrid}>
            <motion.div 
              className={styles.heroContent}
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8 }}
            >
              <span className={styles.heroLabel}>PLUG-COMPATIBLE ENGINE SENSOR</span>
              <h1 className={styles.heroTitle}>
                4-BAR <span className={styles.red}>MAP</span>
              </h1>
              <p className={styles.heroDesc}>
                The HondaVert 4 bar MAP sensor is a direct-fit replacement engineered for 
                B, D, H, F, and K-series engines. Safely and accurately measure up to 43+ PSI of boost.
              </p>
              <div className={styles.heroActions}>
                <button className={styles.primaryBtn} onClick={() => scrollToSection(infoRef)}>
                  <Info size={18} />
                  <span>INFORMATION</span>
                </button>
                <button className={styles.secondaryBtn} onClick={() => scrollToSection(specsRef)}>
                  <Settings size={18} />
                  <span>CALIBRATION DATA</span>
                </button>
              </div>
            </motion.div>

            <motion.div 
              className={styles.heroSpecs}
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
               <div className={styles.specBox}>
                  <div className={styles.progressLine}></div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>PLATFORM SUPPORT</span>
                    <h3>B/D/F/H & K SERIES</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>MAXIMUM PRESSURE</span>
                    <h3>4 BAR (43.5 PSI)</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>INSTALLATION</span>
                    <h3>PLUG & PLAY - NO WIRING</h3>
                  </div>
               </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* 2. CORE CAPABILITIES */}
      <section className={styles.overview} ref={infoRef}>
        <div className={styles.container}>
          <div className={styles.overviewGrid}>
            <motion.div 
              className={styles.overviewContent}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <h2>HARDWARE <br /><span className={styles.red}>INTEGRATION</span></h2>
              <div className={styles.featuresGrid}>
                {coreFeatures.map((feature, i) => (
                  <div key={i} className={styles.featureItem}>
                    <div className={styles.fIcon}>{feature.icon}</div>
                    <h3>{feature.title}</h3>
                    <p>{feature.desc}</p>
                  </div>
                ))}
              </div>
            </motion.div>
            <div className={styles.overviewImage}>
               <Image src="/map_sensor.png" width={600} height={500} alt="4 Bar MAP Sensor Hardware" className={styles.hwImg} />
            </div>
          </div>
        </div>
      </section>

      {/* 3. CALIBRATION DATA */}
      <section className={styles.calibration} ref={specsRef}>
        <div className={styles.container}>
          <div className={styles.compGrid}>
            <div className={styles.compBox}>
              <h2>ECU CALIBRATION CHARACTERISTICS</h2>
              <div className={styles.vList}>
                  <div className={styles.vItem}>
                    <span style={{color: '#fff'}}>Required Scalar Value</span>
                    <span className={styles.vTag}>838</span>
                  </div>
                  <div className={styles.vItem}>
                    <span style={{color: '#fff'}}>Required Offset Value</span>
                    <span className={styles.vTag}>31</span>
                  </div>
              </div>
              <div className={styles.note}>
                <Activity size={16} />
                <p>Ensure these values are accurately entered into your engine management software to guarantee precise output vs absolute pressure scaling.</p>
              </div>
              <div className={styles.ecuSupported}>
                  <div className={styles.ecuRow}>
                    <span className={styles.ecuRegion}>SOFTWARE COMPATIBILITY</span>
                    <span className={styles.ecuVer}>Native support within Hondata, KPro, PreCAN, CANFlash, and S300 Manager. Select &quot;HondaVert 4-Bar&quot; or input the scalar/offset manually.</span>
                  </div>
              </div>
            </div>

            <div className={styles.compBox}>
              <h2>OUTPUT VS ABSOLUTE PRESSURE</h2>
              <div className={styles.graphContainer}>
                 <Image src="/map_graph.png" alt="MAP Sensor Transfer Function Graph" width={600} height={400} className={styles.graphImg} />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
