'use client';

import { useRef } from 'react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import { 
  Info, 
  BookOpen, 
  Download, 
  ShieldCheck, 
  Activity, 
  Car, 
  Gauge, 
  LayoutGrid, 
  Cpu, 
  Zap, 
  Layers, 
  Server, 
  Bluetooth, 
  FileText, 
  ExternalLink,
  ChevronRight,
  Settings,
  CircleCheck,
  Smartphone,
  AlertTriangle,
  ShieldAlert
} from 'lucide-react';
import styles from './KPro.module.css';

export default function KPro() {
  const infoRef = useRef<HTMLDivElement>(null);
  const guidesRef = useRef<HTMLDivElement>(null);
  const downloadRef = useRef<HTMLDivElement>(null);

  const scrollTo = (ref: React.RefObject<HTMLDivElement | null>) => {
    ref.current?.scrollIntoView({ behavior: 'smooth' });
  };

  const coreFeatures = [
    { title: 'Live Engine Tuning', desc: 'Modify and calibrate fuel, ignition, and cam timing maps in real-time.', icon: <Activity size={24} /> },
    { title: 'Live Sensors Logging', desc: 'High-speed data streaming of all critical engine sensors for precision analysis.', icon: <Gauge size={24} /> },
    { title: 'Boost Management', desc: 'Comprehensive boost tables and control with custom MAP sensor support.', icon: <Zap size={24} /> },
    { title: 'Engine Protection', desc: 'Failsafe logic for lean AFR, overboost, and overheat conditions.', icon: <ShieldCheck size={24} /> },
    { title: 'Launch Control', desc: 'Programmable launch parameters with integrated anti-lag systems.', icon: <Settings size={24} /> },
    { title: 'Custom Outputs', desc: 'Programmable outputs for nitrous, methanol injection, and shift lights.', icon: <Layers size={24} /> },
  ];

  const advancedFeatures = [
    { title: 'Bluetooth Connect', desc: 'Wireless datalogging and mobile app integration (Rev.4 boards only).', image: 'https://images.unsplash.com/photo-1758411897998-999b2fe9d8e6?auto=format&fit=crop&q=80&w=1200' },
    { title: 'Onboard Datalog', desc: 'High-precision 100Hz onboard logging for standalone data capture.', image: 'https://images.unsplash.com/photo-1771920800290-53f22e5ac3f8?auto=format&fit=crop&q=80&w=1200' },
    { title: 'FlexFuel Support', desc: 'Ethanol sensor input for automatic fuel and ignition adjustments.', image: 'https://images.unsplash.com/photo-1549411210-613d9061df8d?auto=format&fit=crop&q=80&w=1200' },
    { title: 'Engine Safety', desc: 'Advanced engine protection logic for high-performance builds.', image: 'https://images.unsplash.com/photo-1486496146582-9ffcd0b2b2b7?auto=format&fit=crop&q=80&w=800' },
    { title: 'Analog Inputs', desc: 'Eight additional analog inputs for external wideband and sensors.', image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800' },
    { title: 'Target Lambda', desc: 'Closed-loop target lambda tables for optimized fuel control.', image: 'https://images.unsplash.com/photo-1565105158896-8fce03d1024f?auto=format&fit=crop&q=80&w=1200' },
  ];

  const ecuRevisions = [
    { name: '001DD-L5005-A0', type: 'OKI 66Q592 MCU' },
    { name: '001DD-L5003-00', type: 'OKI 66Q592 MCU' },
  ];

  const factoryModels = [
    { name: '02-05 Honda Civic Si', years: '02-05' },
    { name: '01-05 Honda Civic TypeR', years: '01-05' },
    { name: '01-06 Honda Integra DC5', years: '01-06' },
    { name: '02-06 Honda Integra TypeR', years: '02-06' },
    { name: '02-04 Acura RSX Base', years: '02-04' },
    { name: '02-04 Acura RSX TypeS', years: '02-04' },
  ];

  const replacementModels = [
    { name: '99-03 Honda S2000 AP1', years: '99-03' },
    { name: '02-05 Honda Civic D17 MT', years: '02-05' },
    { name: 'EG/EK/DC K-Swap', years: 'Various' },
  ];

  const downloads = [
    { name: 'KPro Manager Software', size: 'V4.5.6', type: 'Setup Executable' },
    { name: 'USB Driver Pack', size: '1.2 MB', type: 'Drivers' },
  ];

  const guides = [
    { name: 'Hardware Installation Guide', type: 'PDF Documentation' },
    { name: 'Bluetooth Setup Utility', type: 'Config Tool' },
    { name: 'Board LEDs Quick Reference', type: 'Pinout Guide' },
  ];

  return (
    <div className={styles.wrapper}>
      {/* 1. HERO SECTION */}
      <section className={styles.hero}>
        <div className={styles.bgWrapper}>
          <Image src="/engine_bay.png" alt="Engine Bay" 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, ease: "easeOut" }}
            >
              <span className={styles.heroLabel}>ULTIMATE ECU UPGRADE INTERFACE</span>
              <h1 className={styles.heroTitle}>
                K<span className={styles.red}>PRO</span>
              </h1>
              <p className={styles.heroDesc}>
                The Hondavert KPro daughterboard is the definitive performance upgrade for Honda K-Series ECUs. 
                Unlock live tuning, advanced engine protection, and professional motorsport features.
              </p>
              <div className={styles.heroActions}>
                <button 
                  className={styles.primaryBtn}
                  onClick={() => scrollTo(infoRef)}
                >
                  <Info size={18} />
                  <span>INFORMATION</span>
                </button>
                <button 
                  className={styles.secondaryBtn}
                  onClick={() => scrollTo(guidesRef)}
                >
                  <BookOpen size={18} />
                  <span>GUIDES</span>
                </button>
                <button 
                  className={styles.secondaryBtn}
                  onClick={() => scrollTo(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, ease: "easeOut" }}
            >
               <div className={styles.specBox}>
                  <div className={styles.progressLine}></div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>PLATFORM SUPPORT</span>
                    <h3>K-SERIES / VTC</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>DATALOG RATE</span>
                    <h3>100Hz REALTIME</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>CONNECTIVITY</span>
                    <h3>USB / BLUETOOTH</h3>
                  </div>
               </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* 2. OVERVIEW & FEATURES */}
      <section ref={infoRef} className={styles.overview}>
        <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 }}
              transition={{ duration: 0.6 }}
            >
              <h2>CORE PERFORMANCE <br /><span className={styles.red}>CAPABILITIES</span></h2>
              <div className={styles.featuresGrid}>
                {coreFeatures.map((feature, i) => (
                  <motion.div 
                    key={i} 
                    className={styles.featureItem}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: i * 0.1 }}
                  >
                    <div className={styles.fIcon}>{feature.icon}</div>
                    <h3>{feature.title}</h3>
                    <p>{feature.desc}</p>
                  </motion.div>
                ))}
              </div>
            </motion.div>
            <motion.div 
              className={styles.overviewImage}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <Image src="/ecu_kpro.png" alt="KPro Daughterboard" width={600} height={600} className={styles.hwImg} />
              <div className={styles.imageOverlay}></div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* 3. ADVANCED FEATURES (SUBSCRIPTION) */}
      <section className={styles.advanced}>
        <div className={styles.container}>
          <motion.div 
            className={styles.advHeader}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <p>REV.4 EXCLUSIVE FEATURES</p>
            <h2>ADVANCED ENGINE <span className={styles.red}>MANAGEMENT</span></h2>
          </motion.div>
          <div className={styles.advGrid}>
            {advancedFeatures.map((adv, i) => (
              <motion.div 
                key={i} 
                className={`
                  ${styles.advCard} 
                  ${i === 0 ? styles.advCardWide : ''} 
                  ${i === 4 ? styles.advCardWide : ''} 
                  ${i === 1 ? styles.advCardTall : ''}
                `}
                initial={{ opacity: 0, scale: 0.95 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
              >
                <div className={styles.cardImage}>
                   <Image 
                    src={adv.image} 
                    alt={adv.title} 
                    fill 
                    className={styles.advImg} 
                    sizes="(max-width: 768px) 100vw, 50vw"
                   />
                   <div className={styles.cardOverlay}></div>
                </div>
                <div className={styles.cardContent}>
                   <h3>{adv.title}</h3>
                   <p>{adv.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* 4. COMPATIBILITY */}
      <section className={styles.compatibility}>
        <div className={styles.container}>
          <div className={styles.compGrid}>
            <motion.div 
              className={styles.compBox}
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
            >
              <h2>FACTORY EQUIPPED</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>
            </motion.div>
            <motion.div 
              className={styles.compBox}
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
            >
              <h2>ECU MODIFICATION 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.years}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', color: '#ff4444', fontSize: '0.75rem' }}>
                <AlertTriangle size={16} />
                <p>OEM ECUs in these vehicles are not directly compatible. Replacement with a supported ECU is required.</p>
              </div>
            </motion.div>
          </div>

          <motion.div 
            style={{ marginTop: '4rem', padding: '3rem', backgroundColor: 'var(--secondary)', borderRadius: '4px', border: '1px solid var(--border)' }}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h3 style={{ fontSize: '1rem', marginBottom: '1.5rem', fontWeight: 900 }}>SUPPORTED ECU ARCHITECTURE</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '2rem' }}>
              {ecuRevisions.map((rev, i) => (
                <div key={i} style={{ padding: '1.5rem', border: '1px solid var(--border)', borderRadius: '4px' }}>
                  <p style={{ fontSize: '0.65rem', color: '#555', fontWeight: 800, marginBottom: '0.5rem' }}>BOARD REVISION</p>
                  <p style={{ fontFamily: 'monospace', fontWeight: 900, fontSize: '1.1rem' }}>{rev.name}</p>
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* 5. TECH SUITE / INSTALLATION */}
      <section ref={guidesRef} className={styles.techSuite}>
        <div className={styles.container}>
          <motion.div 
            className={styles.techHeader}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h2>TECHNICAL <span className={styles.red}>INTELLIGENCE</span></h2>
          </motion.div>

          <div className={styles.guideGrid}>
             <motion.div 
              className={styles.guideCard}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
             >
                <div className={styles.cardBg}>
                   <Image src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200" alt="Installation" fill className={styles.bgImg} />
                   <div className={styles.cardOverlay}></div>
                </div>
                <div className={styles.guideContent}>
                   <div className={styles.guideIconBox}><Settings size={32} /></div>
                   <h3>Hardware Installation</h3>
                   <p>Comprehensive step-by-step soldering and seating guide for the KPro daughterboard onto your ECU PCB.</p>
                   <button className={styles.guideBtn}>VIEW INSTALL GUIDE</button>
                </div>
             </motion.div>

             <motion.div 
              className={styles.guideCard}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
             >
                <div className={styles.cardBg}>
                   <Image src="https://images.unsplash.com/photo-1695653422718-97d25c1cb8ec?q=80&w=1200" alt="Bluetooth" fill className={styles.bgImg} />
                   <div className={styles.cardOverlay}></div>
                </div>
                <div className={styles.guideContent}>
                   <div className={styles.guideIconBox}><Bluetooth size={32} /></div>
                   <h3>Bluetooth Config</h3>
                   <p>Wireless connection protocols, pairing procedures, and list of compatible mobile tuning applications.</p>
                   <button className={styles.guideBtn}>CONNECTION GUIDE</button>
                </div>
             </motion.div>

             <motion.div 
              className={styles.guideCard}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
             >
                <div className={styles.cardBg}>
                   <Image src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=1200" alt="LED Indicators" fill className={styles.bgImg} />
                   <div className={styles.cardOverlay}></div>
                </div>
                <div className={styles.guideContent}>
                   <div className={styles.guideIconBox}><Activity size={32} /></div>
                   <h3>Board LEDs Meaning</h3>
                   <p>Decipher onboard DIAG LED patterns for rapid troubleshooting and system status verification.</p>
                   <button className={styles.guideBtn}>DIAGNOSTIC KEYS</button>
                </div>
             </motion.div>

             <motion.div 
              className={styles.guideCard}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
             >
                <div className={styles.cardBg}>
                   <Image src="https://images.unsplash.com/photo-1555664424-778a1e5e1b48?q=80&w=1200" alt="ECU Pinout" fill className={styles.bgImg} />
                   <div className={styles.cardOverlay}></div>
                </div>
                <div className={styles.guideContent}>
                   <div className={styles.guideIconBox}><Cpu size={32} /></div>
                   <h3>ECU Pinout</h3>
                   <p>Detailed technical mapping of all ECU connectors, sensor inputs, and programmable output pins.</p>
                   <button className={styles.guideBtn}>VIEW PINOUT MAP</button>
                </div>
             </motion.div>

             <motion.div 
              className={styles.guideCard}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.4 }}
             >
                <div className={styles.cardBg}>
                   <Image src="https://images.unsplash.com/photo-1549411210-613d9061df8d?q=80&w=1200" alt="O2 Sensors" fill className={styles.bgImg} />
                   <div className={styles.cardOverlay}></div>
                </div>
                <div className={styles.guideContent}>
                   <div className={styles.guideIconBox}><Zap size={32} /></div>
                   <h3>O2 Sensor Types</h3>
                   <p>In-depth analysis of PRA vs PRB sensor differences, compatibility notes, and custom wiring diagrams.</p>
                   <button className={styles.guideBtn}>WIRING DIAGRAMS</button>
                </div>
             </motion.div>
          </div>
        </div>
      </section>

      {/* 6. DOWNLOADS & SOFTWARE HUB */}
      <section ref={downloadRef} className={styles.downloads}>
        <div className={styles.container}>
          <motion.div 
            className={styles.dlHeader}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h2>SOFTWARE <span className={styles.red}>HUB</span></h2>
          </motion.div>

          
          
          <div className={styles.dlDashboard}>
            <motion.div 
              className={styles.dlCard}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
            >
              <div className={styles.dlIconBox}><ShieldAlert size={32} /></div>
              <h3>Security & Tools</h3>
              <p>False virus detections may occur. If you have trouble downloading, temporarily disable your antivirus and Windows Defender.</p>
              
              <div className={styles.passwordBox} style={{ marginTop: 'auto' }}>
                <span>Archive Password</span>
                <div className={styles.passKey}>1234</div>
              </div>

              <p style={{ marginTop: '1.5rem', fontSize: '0.65rem' }}>
                * Extract with <a href="https://www.rarlab.com/download.htm" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--primary)', fontWeight: 800, textDecoration: 'underline' }}>WinRAR</a> or <a href="https://www.7-zip.org/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--primary)', fontWeight: 800, textDecoration: 'underline' }}>7-Zip</a> for best results.
              </p>
            </motion.div>

            <motion.div 
              className={styles.dlCard}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
            >
              <div className={styles.dlIconBox}><Settings size={32} /></div>
              <h3>KPro Manager</h3>
              <p>Get Latest KPro Manager + Service Utility Securely. Standard installation package for all K-Series platforms.</p>
              
              <span className={styles.dlVersion} style={{ marginTop: 'auto' }}>V4.5.6 STABLE</span>
              
              <a 
                href="/files/KProSetup.rar" 
                className={styles.dlBtn}
                download
              >
                <Download size={18} />
                DOWNLOAD INSTALLER
              </a>
            </motion.div>
          </div>
        </div>
      </section>
    </div>
  );

}
