'use client';

import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { motion, useScroll, useTransform } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { Shield, Target, Cpu, Globe, Zap, History, ChevronRight, Activity, Terminal, Layers } from 'lucide-react';
import styles from './AboutPage.module.css';

export default function AboutPage() {
  const { scrollYProgress } = useScroll();
  const y1 = useTransform(scrollYProgress, [0, 1], [0, -200]);
  const y2 = useTransform(scrollYProgress, [0, 1], [0, 200]);

  const milestones = [
    { year: '2004', title: 'THE GENESIS', desc: 'Born in a private Warsaw circuit racing lab for high-spec k-swap builds.' },
    { year: '2010', title: 'CAN ARCHITECTURE', desc: 'Universal CAN-Bus communication pioneered for K-Series ECU integration.' },
    { year: '2018', title: 'REV.4 CORE RELEASE', desc: 'Bluetooth-active hardware suite set the new industry standard for mobile tuning.' },
    { year: '2026', title: 'FUTURE OF FLASH', desc: 'Expanding specialized diagnostics into the modern direct-injection era.' },
  ];

  const variants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 }
  };

  return (
    <main className={styles.main}>
      <Navbar />

      {/* 1. ULTRA-CREATIVE HERO BANNER */}
      <section className={styles.hero}>
        <div className={styles.heroBg}>
          <Image 
            src="/about_hero.png" 
            alt="Engineering Lab" 
            fill 
            priority
            className={styles.bgImg} 
          />
          <div className={styles.heroOverlay}></div>
          <motion.div 
            className={styles.scanLine} 
            animate={{ top: ['0%', '100%', '0%'] }}
            transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
          />
        </div>
        <div className={styles.container}>
          <motion.div 
            className={styles.heroContent}
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 1 }}
          >
            <div className={styles.bracketGroup}>
               <span className={styles.label}>EST. 2004 // WARSAW LABS</span>
               <h1 className={styles.title}>
                  WE ENGINEER <br />
                  <span className={styles.outline}>PERFORMANCE</span> <br />
                  <span className={styles.red}>INTELLIGENCE</span>
               </h1>
            </div>
            <p className={styles.desc}>
              Hondavert is not a parts supplier. We are an advanced electronics laboratory dedicated to solving the communication barriers between modern computers and classic combustion engines.
            </p>
          </motion.div>
        </div>
        <div className={styles.heroStats}>
           <div className={styles.hStat}><span>UI_VER:</span> 4.0.2</div>
           <div className={styles.hStat}><span>HW_REV:</span> 4.3</div>
           <div className={styles.hStat}><span>STATUS:</span> ACTIVE</div>
        </div>
      </section>

      {/* 2. OVERLAPPING STORY SECTION WITH TECHNICAL LABELS */}
      <section className={styles.story}>
        <div className={styles.container}>
          <div className={styles.storyGrid}>
             <div className={styles.sideLabel}>ENGINEERING DNA</div>
             
             <motion.div 
               className={styles.storyVisual}
               style={{ y: y1 }}
             >
                <div className={styles.imageStack}>
                   <Image src="/blog_hardware.png" width={800} height={500} alt="Hardware Lab" className={styles.stackMain} />
                   <div className={styles.stackBadge}>HARDWARE REV.4</div>
                   
                   {/* TECHNICAL FLOATING LABELS */}
                   <div className={`${styles.techLabel} ${styles.tl1}`}>
                      <div className={styles.labelLine}></div>
                      <span>MCU_CORE: ARM-CORTEX</span>
                   </div>
                   <div className={`${styles.techLabel} ${styles.tl2}`}>
                      <div className={styles.labelLine}></div>
                      <span>ISO_STABILITY: 100%</span>
                   </div>
                </div>
             </motion.div>

             <motion.div 
               className={styles.storyText}
               initial="hidden"
               whileInView="visible"
               viewport={{ once: true, margin: "-100px" }}
               variants={variants}
             >
                <span className={styles.subLabel}>THE ARCHITECTURE</span>
                <h2>A LEGACY PRESERVED IN <span className={styles.red}>CODE</span></h2>
                <p>
                  Our trajectory has always been dictated by the pursuit of zero-latency. In the high-stakes world of competitive racing, 
                  milli-seconds are the difference between victory and catastrophic failure. Our boards use proprietary power-filtering 
                  logic that was developed on the Polish circuit series, ensuring your tuning data remains stable under extreme voltage oscillation.
                </p>
                <div className={styles.statsRow}>
                   <div className={styles.statBox}>
                      <span className={styles.statNum}>40+</span>
                      <span className={styles.statLab}>GLOBAL NODES</span>
                   </div>
                   <div className={styles.statBox}>
                      <span className={styles.statNum}>100Hz</span>
                      <span className={styles.statLab}>DA-LOGGING</span>
                   </div>
                   <div className={styles.statBox}>
                      <span className={styles.statNum}>AES</span>
                      <span className={styles.statLab}>ENCRYPTION</span>
                   </div>
                </div>
             </motion.div>
          </div>
        </div>
      </section>

      {/* 3. LABORATORY SUITE - BLUEPRINT STYLE */}
      <section className={styles.lab}>
        <div className={styles.container}>
          <motion.div 
            className={styles.labHeader}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <span className={styles.subLabel}>FACILITY OVERVIEW</span>
            <h2>THE <span className={styles.red}>TECHNICAL</span> SUITE</h2>
          </motion.div>

          <div className={styles.labGrid}>
             <div className={styles.labCard}>
                <div className={styles.labImgWrapper}>
                   <Image src="/blog_track.png" fill alt="Testing" className={styles.labImg} />
                   <div className={styles.cardNumber}>01</div>
                </div>
                <div className={styles.labContent}>
                   <div className={styles.labIconStrip}><Activity size={20} /> <Terminal size={14} /></div>
                   <h3>PHYSICAL AUDITS</h3>
                   <p>Thermal stability testing in simulated high-load environments up to 85°C ambient.</p>
                </div>
             </div>

             <div className={styles.labCard}>
                <div className={styles.labImgWrapper}>
                   <Image src="/blog_can.png" fill alt="Firmware" className={styles.labImg} />
                   <div className={styles.cardNumber}>02</div>
                </div>
                <div className={styles.labContent}>
                   <div className={styles.labIconStrip}><Cpu size={20} /> <Layers size={14} /></div>
                   <h3>FIRMWARE LAB</h3>
                   <p>Low-level MCU programming for proprietary CAN-BUS bridge protocols.</p>
                </div>
             </div>

             <div className={styles.labCard}>
                <div className={styles.labImgWrapper}>
                   <Image src="/contact_hero.png" fill alt="Quality" className={styles.labImg} />
                   <div className={styles.cardNumber}>03</div>
                </div>
                <div className={styles.labContent}>
                   <div className={styles.labIconStrip}><Shield size={20} /> <Zap size={14} /></div>
                   <h3>QUALITY CONTROL</h3>
                   <p>Each unit undergoes 18 unique signal continuity tests before regional dispatch.</p>
                </div>
             </div>
          </div>
        </div>
      </section>

      {/* 4. CIRCUIT-PATH TIMELINE (UNIQUE LOOK) */}
      <section className={styles.journey}>
         <div className={styles.container}>
            <div className={styles.journeyHeader}>
               <span className={styles.subLabel}>SYSTEM_EVOLUTION</span>
               <h2>THE <span className={styles.outline}>TIMELINE_NODES</span></h2>
               <div className={styles.circuitDecoration}>0x00A1 // 0x00F4</div>
            </div>
            
            <div className={styles.circuitTimeline}>
               {milestones.map((m, i) => (
                  <motion.div 
                    key={i} 
                    className={`${styles.circuitNode} ${i % 2 === 0 ? styles.nodeLeft : styles.nodeRight}`}
                    initial={{ opacity: 0, scale: 0.95 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    transition={{ delay: i * 0.15 }}
                  >
                     <div className={styles.traceLine}></div>
                     <div className={styles.chipBlock}>
                        <div className={styles.chipHeader}>
                           <span className={styles.chipRev}>REV_{m.year}</span>
                           <Terminal size={14} className={styles.chipIcon} />
                        </div>
                        <div className={styles.chipBody}>
                           <h3 className={styles.chipTitle}>{m.title}</h3>
                           <p>{m.desc}</p>
                        </div>
                        <div className={styles.chipFooter}>
                           <span>STATUS: VERIFIED</span>
                           <span>CHK_SUM: {Math.random().toString(16).slice(2, 6).toUpperCase()}</span>
                        </div>
                     </div>
                  </motion.div>
               ))}
               
               {/* Decorative PCB Traces */}
               <div className={styles.pcbTrace1}></div>
               <div className={styles.pcbTrace2}></div>
            </div>
         </div>
      </section>

      {/* 5. MISSION CTA */}
      <section className={styles.cta}>
        <div className={styles.container}>
          <motion.div 
            className={styles.ctaSection}
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
          >
            <div className={styles.ctaInner}>
               <div className={styles.ctaLabel}>TRANSMISSION_READY</div>
               <h2>ENGINEERING YOUR <span className={styles.red}>VICTORY</span></h2>
               <p>Are you ready to integrate the global standard in performance electronics into your build?</p>
               <div className={styles.ctaButtons}>
                  <Link href="/products" className={styles.ctaMain}>
                     ACCESS PROTOCOL <ChevronRight size={18} />
                  </Link>
                  <Link href="/contact" className={styles.ctaSecondary}>
                     ESTABLISH CONTACT
                  </Link>
               </div>
            </div>
          </motion.div>
        </div>
      </section>

      <Footer />
    </main>
  );
}
