'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { 
  Info, 
  BookOpen, 
  Download, 
  ShieldCheck, 
  Activity, 
  Gauge, 
  Zap, 
  Layers, 
  Settings, 
  Cpu, 
  AlertTriangle, 
  Terminal,
  Lock,
  User,
  ChevronLeft,
  ChevronRight
} from 'lucide-react';
import { useState, useRef } from 'react';
import styles from './PreCAN.module.css';

export default function PreCAN() {
  const [currentSlide, setCurrentSlide] = useState(0);

  const infoRef = useRef<HTMLElement>(null);
  const guidesRef = useRef<HTMLElement>(null);
  const downloadRef = useRef<HTMLElement>(null);

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

  const coreFeatures = [
    { title: 'Live Engine Tuning', desc: 'Real-time calibration of fuel, ignition, and cam timing maps.', icon: <Activity size={24} /> },
    { title: 'High-Speed Logging', desc: 'Precision sensor data streaming for accurate combustion analysis.', icon: <Gauge size={24} /> },
    { title: 'Boost Management', desc: 'Variable boost control with custom MAP sensor support.', icon: <Zap size={24} /> },
    { title: 'Engine Safety', desc: 'Failsafe logic for lean AFR, overboost, and overheat conditions.', icon: <ShieldCheck size={24} /> },
    { title: 'Launch Control', desc: 'Programmable launch strategy with integrated anti-lag utility.', icon: <Settings size={24} /> },
    { title: 'Nitrous / Methanol', desc: 'Programmable outputs for auxiliary injection and nitrous control.', icon: <Layers size={24} /> },
  ];

  const factoryModels = [
    { name: '05-06 Acura RSX Base', years: '05-06' },
    { name: '05-06 Acura RSX TypeS', years: '05-06' },
    { name: '05-07 Honda Accord USA', years: '05-07' },
    { name: '05-06 Honda Element', years: '05-06' },
  ];

  const replacementModels = [
    { name: '03-07 Honda Accord EuroR', codes: 'EuroR' },
    { name: '03-04 Honda Accord USA Spec.', codes: 'CM4-CM8' },
    { name: '03-07 Honda Accord JDM Spec.', codes: 'CL7-CL9' },
    { name: '03-07 Acura TSX I', codes: 'TSX I' },
    { name: '03-04 Honda Element', codes: 'MT Only' },
    { name: 'Various EG/EK/DC K-Swapped Vehicles', codes: 'K-Swap' },
  ];

  return (
    <div className={styles.wrapper}>
      {/* 1. HERO SECTION */}
      <section className={styles.hero}>
        <div className={styles.bgWrapper}>
          <Image src="/precan_car.png" alt="PreCAN 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}>ENGINE MANAGEMENT SYSTEMS</span>
              <h1 className={styles.heroTitle}>
                PRE<span className={styles.red}>CAN</span>
              </h1>
              <p className={styles.heroDesc}>
                Expand your ECU capabilities with the PreCAN daughterboard system. Native Renesas SH7058 support,
                live tuning, and professional motorsport-grade failsafes for K-Series platforms.
              </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(guidesRef)}>
                  <BookOpen size={18} />
                  <span>GUIDES</span>
                </button>
                <button className={styles.secondaryBtn} onClick={() => scrollToSection(downloadRef)}>
                  <Download size={18} />
                  <span>DOWNLOAD</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}>MCU SUPPORT</span>
                    <h3>SH7058 RENESAS</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>DATALOG MEMORY</span>
                    <h3>2 HOURS ON-BOARD</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>PROTOCOL</span>
                    <h3>CAN-BUS / K-LINE</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>CORE PERFORMANCE <br /><span className={styles.red}>ENGINEERING</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="/precan_car.png" width={600} height={500} alt="PreCAN Hardware" className={styles.hwImg} />
            </div>
          </div>
        </div>
      </section>

      {/* 3. COMPATIBILITY */}
      <section className={styles.compatibility}>
        <div className={styles.container}>
          <div className={styles.compGrid}>
            <div className={styles.compBox}>
              <h2>FACTORY NATIVE SUPPORT</h2>
              <div className={styles.vList}>
                {factoryModels.map((m, i) => (
                  <div key={i} className={styles.vItem}>
                    <span>{m.name}</span>
                    <span className={styles.vTag}>{m.years}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className={styles.compBox}>
              <h2>REPLACEMENT REQUIRED</h2>
              <div className={styles.vList}>
                {replacementModels.map((m, i) => (
                  <div key={i} className={styles.vItem}>
                    <span>{m.name}</span>
                    <span className={styles.vTag}>{m.codes}</span>
                  </div>
                ))}
              </div>
              <div className={styles.note}>
                <AlertTriangle size={16} />
                <p>OEM ECUs in these models aren't directly compatible. Requires hardware replacement with a supported board version.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 4. TECH GUIDES (SLIDER) */}
      <section className={styles.guides} ref={guidesRef}>
        <div className={styles.container}>
          <div className={styles.sectionHeader}>
            <div className={styles.headerTitle}>
               <span className={styles.sub}>TECHNICAL INTELLIGENCE</span>
               <h2>DOCUMENTATION <span className={styles.red}>SYSTEM</span></h2>
            </div>
            <div className={styles.sliderNav}>
               <button 
                 onClick={() => setCurrentSlide(prev => Math.max(0, prev - 1))}
                 className={`${styles.navBtn} ${currentSlide === 0 ? styles.disabled : ''}`}
               >
                 <ChevronLeft size={24} />
               </button>
               <button 
                 onClick={() => setCurrentSlide(prev => Math.min(3, prev + 1))}
                 className={`${styles.navBtn} ${currentSlide === 3 ? styles.disabled : ''}`}
               >
                 <ChevronRight size={24} />
               </button>
            </div>
          </div>
          
          <div className={styles.sliderContainer}>
            <motion.div 
              className={styles.sliderTray}
              animate={{ x: `-${currentSlide * 33.33}%` }}
              transition={{ type: "spring", stiffness: 100, damping: 20 }}
            >
               {[
                 { title: 'Hardware Installation', desc: 'Step by Step installation Guide', icon: <Terminal size={32} /> },
                 { title: 'Board LEDs Meaning', desc: 'Troubleshooting using DIAG LEDs', icon: <Settings size={32} /> },
                 { title: 'Sign In or Register', desc: 'Create KTuner Account or Sign In', icon: <User size={32} /> },
                 { title: 'Registering PreCAN Unit', desc: 'Hardware Registration & ECU Locking', icon: <Lock size={32} /> },
                 { title: 'ECU Pinout', desc: 'Detailed ECU Connectors Pinout', icon: <Cpu size={32} /> },
                 { title: 'Throttle Body Variants', desc: 'Mechanical vs Electronic Throttle Bodies', icon: <Gauge size={32} /> },
               ].map((card, i) => (
                 <div key={i} className={styles.guideCard}>
                    <div className={styles.cardHeader}>
                      <div className={styles.iconBox}>{card.icon}</div>
                      <span className={styles.cardNum}>0{i+1}</span>
                    </div>
                    <h3>{card.title}</h3>
                    <p>{card.desc}</p>
                    <button className={styles.cardBtn}>
                      VIEW DOCUMENT <ChevronRight size={14} />
                    </button>
                 </div>
               ))}
            </motion.div>
          </div>
        </div>
      </section>

      {/* 5. DOWNLOADS */}
      <section className={styles.downloads} ref={downloadRef}>
        <div className={styles.container}>
          <div className={styles.dlHeader}>
            <h2>SOFTWARE <span className={styles.red}>HUB</span></h2>
          </div>
          <div className={styles.dlDashboard}>
             <div className={styles.dlCard}>
                <ShieldCheck size={32} />
                <h3>Security & Instructions</h3>
                <p>False virus detections may occur. If you have trouble downloading, temporarily disable Antivirus and Windows Defender.</p>
                <div className={styles.passwordBox}>
                   <span>Archive Password</span>
                   <div className={styles.passKey}>1234</div>
                </div>
                <p className={styles.extractNote}>
                  * Extract with <a href="https://www.rarlab.com/download.htm">WinRAR</a> or <a href="https://www.7-zip.org">7-Zip</a>.
                </p>
             </div>
             <div className={styles.dlCard}>
                <Download size={32} />
                <h3>KTuner Manager</h3>
                <p>Get the latest KTuner Manager + Service Utility. Compatible with CANFlash and PreCAN units.</p>
                <span className={styles.versionTag}>V1.0.11.2 STABLE</span>
                <a href="/files/KTSetup.rar" className={styles.dlBtn}>
                   <Download size={18} />
                   DOWNLOAD INSTALLER
                </a>
             </div>
          </div>
        </div>
      </section>
    </div>
  );
}
