import { Car, Info, TriangleAlert } from 'lucide-react';
import styles from './Compatibility.module.css';

export default function Compatibility() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.header}>
          <span className={styles.subtitle}>COMPATIBILITY MATRIX</span>
          <h2 className={styles.title}>ECU COMPATIBILITY LIST</h2>
        </div>

        <div className={styles.grid}>
          <div className={styles.cardMain}>
            <div className={styles.cardHeader}>
              <Car className={styles.iconRed} size={24} />
              <h3>CIVIC & INTEGRA HIGH-PERFORMANCE</h3>
            </div>
            
            <div className={styles.cardBody}>
              <ul className={styles.list}>
                <li><span className={styles.redDot}></span> 02-05 Honda Civic Si (EP3)</li>
                <li><span className={styles.redDot}></span> 01-05 Honda Civic TypeR (EP3)</li>
                <li><span className={styles.redDot}></span> 01-06 Honda Integra DC5</li>
                <li><span className={styles.redDot}></span> 02-06 Honda Integra TypeR</li>
              </ul>
              
              <div className={styles.divider}></div>
              <p className={styles.hardwareNote}>HARDWARE REVISION: 4.2 (FEB 2026)</p>
            </div>
          </div>

          <div className={styles.cardRight}>
            <div className={styles.cardSmall}>
              <div className={styles.cardHeader}>
                <TriangleAlert className={styles.iconRed} size={20} />
                <h3>ACURA RSX LINEUP</h3>
              </div>
              <ul className={styles.listSmall}>
                <li>02-04 Acura RSX Base</li>
                <li>02-04 Acura RSX TypeS</li>
              </ul>
              
              <div className={styles.alert}>
                <TriangleAlert size={14} className={styles.iconRed} />
                <div className={styles.alertContent}>
                  <strong>TECHNICAL CONSTRAINT</strong>
                  <p>Pr-Kpro for automatic not supported. Manual & Sequential conversion required for full functionality.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className={styles.statsGrid}>
           <div className={styles.specBox}>
              <span className={styles.specLabel}>INTERFACE SPECS</span>
              <div className={styles.specItem}>
                 <span>CAN RATE:</span>
                 <span className={styles.red}>500kbps</span>
              </div>
              <div className={styles.specItem}>
                 <span>CONNECTIVITY:</span>
                 <span className={styles.red}>USB 2.1 TYPE-C</span>
              </div>
              <div className={styles.specItem}>
                 <span>ONBOARD STORAGE:</span>
                 <span className={styles.red}>8GB FLASH</span>
              </div>
           </div>

           <div className={styles.performanceBox}>
              <span className={styles.specLabel}>PERFORMANCE GAINS</span>
              <p className={styles.note}>Real-world benchmarking across supported ECU platforms shows significant response improvement.</p>
              <div className={styles.progressItem}>
                 <div className={styles.progressHeader}>
                    <span>VTEC ENGAGEMENT</span>
                    <span className={styles.red}>+12.6% PRECISION</span>
                 </div>
                 <div className={styles.progressBar}><div className={styles.progressFill} style={{width: '92%'}}></div></div>
              </div>
              <div className={styles.progressItem}>
                 <div className={styles.progressHeader}>
                    <span>FUEL INJECTION MAP</span>
                    <span className={styles.red}>+11.2% EFFICIENCY</span>
                 </div>
                 <div className={styles.progressBar}><div className={styles.progressFill} style={{width: '88%'}}></div></div>
              </div>
           </div>

           <div className={styles.versionBox}>
              <div className={styles.vLabel}>v4.2</div>
              <span className={styles.vStatus}>FIRMWARE REV 0226</span>
           </div>
        </div>
      </div>
    </section>
  );
}
