'use client';

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

export default function CANFlash() {
  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: 'Direct ECU Reflashing', desc: 'Modify factory firmware natively via CAN Bus through the OBDII port.', icon: <Cpu size={24} /> },
    { title: 'Drive-by-Wire & VTC', desc: 'Full electronic throttle curve tuning and variable timing control.', icon: <Activity size={24} /> },
    { title: 'Live Sensor Logging', desc: 'Precision data streaming for closed-loop combustion analysis.', icon: <Gauge size={24} /> },
    { title: '2-Step & Launch', desc: 'Customizable 2-step rev limiters for aggressive launch strategies.', icon: <Zap size={24} /> },
    { title: 'Monitor Disabling', desc: 'Deactivate specific sensors and emissions monitors for track use.', icon: <ShieldCheck size={24} /> },
    { title: 'MAF Scaling', desc: 'Scale Mass Air Flow sensors for high-flow intake systems.', icon: <Settings size={24} /> },
  ];

  const supportedVehicles = [
    { title: 'Acura ILX', variants: ['13-22 Acura ILX'] },
    { title: 'Acura MDX', variants: ['07-13 Acura MDX', '14-15 Acura MDX'] },
    { title: 'Acura RDX', variants: ['19-23 Acura RDX'] },
    { title: 'Acura TL', variants: ['07-08 Acura TL', '09-14 Acura TL'] },
    { title: 'Acura TLX', variants: ['15-20 Acura TLX I', '21+ Acura TLX II'] },
    { title: 'Acura TSX', variants: ['07-08 Acura TSX I', '09-14 Acura TSX II'] },
    { title: 'Honda Accord', variants: ['08-12 Honda Accord 8 (USA Spec.)', '08-12 Honda Accord 8 (JDM Spec.)', '13-17 Honda Accord 9', '18-22 Honda Accord X'] },
    { title: 'Honda Civic', variants: ['06-11 Honda Civic 8', '12-15 Honda Civic 9', '16-21 Honda Civic X', '22+ Honda Civic 11'] },
    { title: 'Honda CR-V', variants: ['17-22 Honda CR-V'] },
    { title: 'Honda CR-Z', variants: ['11-16 Honda CR-Z'] },
    { title: 'Honda Element', variants: ['07-08 Honda Element'] },
    { title: 'Honda Fit', variants: ['09-13 Honda Fit', '15-20 Honda Fit'] },
    { title: 'Honda Ridgeline', variants: ['09-14 Honda Ridgeline'] },
    { title: 'Honda S2000', variants: ['06-09 Honda S2000 AP2'] },
  ];

  return (
    <div className={styles.wrapper}>
      {/* 1. HERO SECTION */}
      <section className={styles.hero}>
        <div className={styles.bgWrapper}>
          <Image src="/engine_bay.png" alt="CANFlash 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}>OBDII FLASHING INTERFACE</span>
              <h1 className={styles.heroTitle}>
                CAN<span className={styles.red}>FLASH</span>
              </h1>
              <p className={styles.heroDesc}>
                Designed to modify your factory ECU firmware directly via the CAN Bus through the OBDII connector, 
                achieving total control without requiring any physical hardware modifications to your ECU.
              </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}>CONNECTION TYPE</span>
                    <h3>OBDII PORT NATIVE</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>HARDWARE MODS</span>
                    <h3>ZERO REQUIRED</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>SYSTEM COMPATIBILITY</span>
                    <h3>ABS / VSA / CLIMATE</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="/hud_telemetry.png" width={600} height={500} alt="CANFlash OBDII Tuning Interface" className={styles.hwImg} />
            </div>
          </div>
        </div>
      </section>

      {/* 3. SUPPORTED VEHICLES */}
      <section className={styles.compatibility}>
        <div className={styles.container}>
          <div className={styles.sectionHeader}>
            <div className={styles.headerTitle}>
               <span className={styles.sub}>NATIVE OBDII DEPLOYMENT</span>
               <h2>SUPPORTED <span className={styles.red}>VEHICLES</span></h2>
            </div>
          </div>
          <div className={styles.platformGrid}>
            {supportedVehicles.map((platform, bIdx) => (
              <div key={bIdx} className={styles.platformCard}>
                <div className={styles.platformHeader}>
                  <Cpu size={20} className={styles.platformIcon} />
                  <h3>{platform.title}</h3>
                </div>
                <div className={styles.variantList}>
                  {platform.variants.map((v, i) => (
                    <span key={i} className={styles.variantTag}>{v}</span>
                  ))}
                </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>
          
          <div className={styles.sliderContainer}>
            <motion.div 
              className={styles.sliderTray}
              animate={{ x: 0 }}
              transition={{ type: "spring", stiffness: 100, damping: 20 }}
            >
               {[
                 { title: 'Device LEDs Meaning', desc: 'Troubleshoot status indicators and system health.', icon: <Settings size={32} /> },
                 { title: 'Sign In or Register', desc: 'Create KTuner Account or Sign In to your dashboard.', icon: <User size={32} /> },
                 { title: 'Registering CANFlash Unit', desc: 'Initialize and lock your hardware to your software account.', icon: <Lock 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" target="_blank">WinRAR</a> or <a href="https://www.7-zip.org" target="_blank">7-Zip</a>.
                </p>
             </div>
             <div className={styles.dlCard}>
                <Download size={32} />
                <h3>KTuner Manager</h3>
                <p>Get the latest KTuner Software Environment. Flash multiple map setups directly to your ECU.</p>
                <span className={styles.versionTag}>V1.0.11.2 STABLE</span>
                <a href="/files/KTSetup.rar" className={styles.dlBtn} download>
                   <Download size={18} />
                   DOWNLOAD INSTALLER
                </a>
             </div>
          </div>
        </div>
      </section>
    </div>
  );
}
