'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { ShoppingCart, FileText, Settings, ShieldCheck, Activity } from 'lucide-react';
import styles from './Sensor.module.css';

export default function Sensor() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.productGrid}>
          <motion.div 
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            className={styles.imageMain}
          >
            <div className={styles.imagePlaceholder}>
              <Image 
                src="/map_sensor.png" 
                alt="4BAR MAP Sensor" 
                width={800} 
                height={800}
                className={styles.sensorImg}
              />
            </div>
          </motion.div>

          <div className={styles.productInfo}>
            <span className={styles.label}>PRECISION ENGINEERING</span>
            <h2 className={styles.title}>
              4BAR MAP <br />
              <span className={styles.red}>SENSOR</span>
            </h2>
            <p className={styles.description}>
              Engineered for high-boost applications requiring surgical telemetry accuracy.
              Rapid response frequency with +/- 0.01% deviation for consistent performance.
            </p>

            <div className={styles.compatibility}>
              <span className={styles.compLabel}>DEVICE COMPATIBILITY</span>
              <div className={styles.tags}>
                <span>HONDA VERT KPRO</span>
                <span>HONDA VERT PRECAN</span>
                <span>HONDA VERT S300</span>
              </div>
            </div>

            <div className={styles.purchaseBox}>
              <div className={styles.price}>
                <span className={styles.msrp}>MSRP</span>
                <span className={styles.amount}>$149.00</span>
              </div>
              <button className={styles.btnAction}>
                ADD TO SYSTEM <ShoppingCart size={18} />
              </button>
            </div>
          </div>
        </div>

        <div className={styles.specsGrid}>
          <div className={styles.specsCol}>
            <h3 className={styles.colTitle}>PERFORMANCE SPECS</h3>
            <div className={styles.specItem}>
              <span className={styles.specName}>PRESSURE RANGE</span>
              <p className={styles.specVal}>0.1 - 4.0 BAR</p>
              <div className={styles.specBar}><div className={styles.specFill} style={{width: '90%'}}></div></div>
            </div>
            <div className={styles.specItem}>
              <span className={styles.specName}>VOLTAGE OUTPUT</span>
              <p className={styles.specVal}>0.5V - 4.5V Linear</p>
            </div>
            <div className={styles.specItem}>
              <span className={styles.specName}>THERMAL TOLERANCE</span>
              <p className={styles.specVal}>-40°C to +125°C</p>
            </div>
          </div>

          <div className={styles.specsColMiddle}>
            <h3 className={styles.colTitle}>INSTALLATION DATA</h3>
            <div className={styles.dataRow}>
              <span>Thread Pitch</span>
              <strong>1/8" NPT</strong>
            </div>
            <div className={styles.dataRow}>
              <span>Connector Type</span>
              <strong>3-PIN WEATHERPROOF</strong>
            </div>
            <div className={styles.dataRow}>
              <span>Input Voltage</span>
              <strong>5.0V DC</strong>
            </div>
            <div className={styles.dataRow}>
              <span>Calibration</span>
              <strong>PLUG & PLAY PROFILE</strong>
            </div>
            
            <div className={styles.downloadBox}>
              <FileText size={20} className={styles.red} />
              <div>
                <p>DOWNLOAD WIRING DIAGRAM FOR PRECAN INTEGRATION (PDF 1.4MB)</p>
              </div>
            </div>
          </div>

          <div className={styles.specsCol}>
            <h3 className={styles.colTitle}>HARDWARE LOGIC</h3>
            <p className={styles.colPara}>
              Our sensors utilize a solid-state piezoresistive design, encapsulated in 
              high-grade chemical-resistant composite housing. Unlike cheap alternatives, 
              the HondaVert 4Bar sensor maintains zero-point calibration even under extreme 
              engine bay heat-soak conditions.
            </p>
            <div className={styles.proTip}>
              <Settings size={20} className={styles.red} />
              <div className={styles.tipContent}>
                <strong>PRO TIP:</strong>
                <p>Ensure sensor is mounted above the manifold vacuum port to prevent fuel condensation buildup.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
