HondaVert/src/components/S300.tsx

'use client';

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

export default function S300() {
  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 injector settings.', icon: <Activity size={24} /> },
    { title: 'Advanced Bluetooth', desc: 'Wireless datalogging and telemetry via S300 Rev.3 architecture.', icon: <Bluetooth size={24} /> },
    { title: 'Flex Fuel & Boost', desc: 'Variable boost control, Flex Fuel support, and custom MAP sensor logic.', 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: 'Full throttle shift capabilities and programmable anti-lag.', icon: <Gauge size={24} /> },
    { title: 'Nitrous / Methanol', desc: 'Auxiliary outputs for nitrous control and methanol injection systems.', icon: <Layers size={24} /> },
  ];

  const factoryModels = [
    { name: '91-92 Honda Integra DA', codes: 'DA' },
    { name: '93-95 Honda Integra DB', codes: 'DB' },
    { name: '92-95 Honda Civic', codes: 'EG/EH/EJ' },
    { name: '92-95 Honda CR-X DelSol', codes: 'EG1/EG2' },
  ];

  const replacementModels = [
    { name: '96-01 Honda Civic', codes: 'EK/EJ' },
    { name: '96-01 Honda Integra', codes: 'DC2/DC4' },
    { name: '96-01 Honda Prelude 5', codes: 'BB5-BB8' },
    { name: '95-01 Honda CR-V', codes: 'RD1' },
  ];

  const ecuSupport = [
    { region: 'USDM ECU BOARDS', versions: '02D011F0-1500, 02D01720-1500, 02D01980-1500' },
    { region: 'JDM ECU BOARDS', versions: '02D01550-1500, 02D01840-1501' },
    { region: 'EDM ECU BOARDS', versions: '2PU6098-4460P1, 2PU6098-4508P1' },
  ];

  return (
    <div className={styles.wrapper}>
      {/* 1. HERO SECTION */}
      <section className={styles.hero}>
        <div className={styles.bgWrapper}>
          <Image src="/s300_board.png" alt="S300 Hero Component" 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}>OBD1 ENGINE MANAGEMENT SYSTEM</span>
              <h1 className={styles.heroTitle}>
                S300 <br />
                <span className={styles.red}>CORE</span>
              </h1>
              <p className={styles.heroDesc}>
                Expand your Honda OBD1 ECU capabilities. Professional grade engine management 
                featuring Live Tuning, Flex Fuel support, and advanced Bluetooth telemetry options.
              </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}>PLATFORM SUPPORT</span>
                    <h3>OBD1 USDM/JDM/EDM</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>SOFTWARE PROTOCOL</span>
                    <h3>S300 / OSTRICH 2</h3>
                  </div>
                  <div className={styles.specItem}>
                    <span className={styles.specLabel}>I/O EXPANSION</span>
                    <h3>6 ANALOG INPUTS</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="S300 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.codes}</span>
                  </div>
                ))}
              </div>
              <div className={styles.ecuSupported}>
                {ecuSupport.map((ecu, index) => (
                  <div key={index} className={styles.ecuRow}>
                    <span className={styles.ecuRegion}>{ecu.region}</span>
                    <span className={styles.ecuVer}>{ecu.versions}</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 OBD1 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(5, prev + 1))}
                 className={`${styles.navBtn} ${currentSlide === 5 ? 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 Install (USDM ECU)', desc: 'Step by Step installation Guide', icon: <Terminal size={32} />, img: '/engine_bay.png' },
                 { title: 'Hardware Install (EDM ECU)', desc: 'Step by Step installation Guide', icon: <Terminal size={32} />, img: '/engine_bay.png' },
                 { title: 'Hardware Install (JDM ECU)', desc: 'Step by Step installation Guide', icon: <Terminal size={32} />, img: '/engine_bay.png' },
                 { title: 'Bluetooth', desc: 'Connection Guide and Compatible Applications', icon: <Bluetooth size={32} />, img: '/hud_telemetry.png' },
                 { title: 'S300 / Ostrich 2 Mode Switch', desc: 'Use board with S300 Manager or 3rd-party software', icon: <Settings size={32} />, img: '/precan_car.png' },
                 { title: 'Board LEDs Meaning', desc: 'Troubleshooting using DIAG LEDs', icon: <ShieldCheck size={32} />, img: '/map_sensor.png' },
                 { title: 'ECU Pinout', desc: 'Detailed ECU Connectors Pinout', icon: <Cpu size={32} />, img: '/ecu_kpro.png' },
                 { title: 'Automatic Transmission Setup', desc: 'How to control an automatic transmission using S300 Manager', icon: <Settings size={32} />, img: '/ecu_kpro.png' },
               ].map((card, i) => (
                 <div 
                    key={i} 
                    className={styles.guideCard} 
                    style={{ '--card-bg': `url(${card.img})` } as React.CSSProperties}
                 >
                    <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.dlStack}>
                 <div className={styles.dlRowCard}>
                    <div className={styles.dlRowInfo}>
                       <h4>S300 MANAGER</h4>
                       <p>Native tuning software environment.</p>
                       <span className={styles.versionTag}>PRIMARY GUI</span>
                    </div>
                    <a href="/files/S300Setup.rar" className={styles.dlBtn}>
                       <Download size={18} />
                       DOWNLOAD
                    </a>
                 </div>
                 
                 <div className={styles.dlRowCard}>
                    <div className={styles.dlRowInfo}>
                       <h4>HTS 2.15</h4>
                       <p>Ostrich 2 Protocol mapping software.</p>
                       <span className={styles.versionTag}>LEGACY COM</span>
                    </div>
                    <a href="/files/HTSSetup.rar" className={styles.dlBtn}>
                       <Download size={18} />
                       DOWNLOAD
                    </a>
                 </div>
             </div>
          </div>
        </div>
      </section>
    </div>
  );
}