'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { LayoutDashboard, Database, Lock } from 'lucide-react';
import styles from './Telemetry.module.css';

export default function Telemetry() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.grid}>
          <motion.div 
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            className={styles.left}
          >
            <div className={styles.hudOverlay}>
              <Image 
                src="/hud_telemetry.png" 
                alt="HUD Telemetry" 
                width={800} 
                height={600}
                className={styles.hudImg}
              />
              <div className={styles.hudLabel}>
                 <span>VISUAL INTERFACE</span>
                 <h3>Real-Time HUD Telemetry</h3>
              </div>
            </div>
          </motion.div>

          <div className={styles.right}>
            <span className={styles.label}>PERFORMANCE DATA</span>
            <h2 className={styles.title}>
              ENGINEERED FOR THE <br />
              <span className={styles.red}>TRACK</span>
            </h2>

            <div className={styles.featureList}>
              <div className={styles.feature}>
                <LayoutDashboard className={styles.red} size={24} />
                <div className={styles.content}>
                  <h3>LIVE TABLE EDITING</h3>
                  <p>Modify fuel and ignition maps while the engine is running. Instant feedback for precise tuning results.</p>
                </div>
              </div>

              <div className={styles.feature}>
                <Database className={styles.red} size={24} />
                <div className={styles.content}>
                  <h3>ADVANCED DATA LOGGING</h3>
                  <p>Capture up to 100 sensors simultaneously at high frequency. Export to CSV or view in our proprietary analyzer.</p>
                </div>
              </div>

              <div className={styles.feature}>
                <Lock className={styles.red} size={24} />
                <div className={styles.content}>
                  <h3>FULL SECURITY CONTROL</h3>
                  <p>Immobilizer bypass and valet mode settings built-in. Protect your intellectual property with encrypted map files.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
