'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { Target, History, Globe } from 'lucide-react';
import styles from './About.module.css';

export default function About() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.sideLabel}>ENGINEERING LEGACY</div>
        <div className={styles.grid}>
           <div className={styles.content}>
              <div className={styles.labelWrapper}>
                <span className={styles.line}></span>
                <span className={styles.label}>ESTABLISHED 2004</span>
              </div>
              <h2 className={styles.title}>
                PRECISION <span className={styles.outline}>ENGINEERING</span> <br />
                FOR THE <span className={styles.highlight}>JDM</span> COMMUNITY.
              </h2>
              <p className={styles.desc}>
                 For over two decades, HondaVert has been at the forefront of aftermarket engine management solutions. 
                 Born from a passion for circuit racing and technical excellence, we develop hardware and software 
                 that empowers enthusiasts to push the limits of their Honda platforms.
              </p>
              
              <div className={styles.stats}>
                <div className={styles.statItem}>
                   <div className={styles.statIcon}><Target size={20} /></div>
                   <div className={styles.statText}>
                      <h3>OUR MISSION</h3>
                      <p>Surgical-grade tuning tools that bridge the gap between amateur builds and pro racing.</p>
                   </div>
                </div>
                <div className={styles.statItem}>
                   <div className={styles.statIcon}><Globe size={20} /></div>
                   <div className={styles.statText}>
                      <h3>GLOBAL NETWORK</h3>
                      <p>Supported by certified tuners across 40+ countries.</p>
                   </div>
                </div>
              </div>

              <div className={styles.buttonWrapper}>
                <Link href="/about" className={styles.moreBtn}>
                  EXPLORE OUR HISTORY <span className={styles.btnArrow}></span>
                </Link>
              </div>
           </div>

           <div className={styles.visual}>
              <div className={styles.imageOverlay}></div>
              <Image src="/engine_bay.png" alt="Engineering Legacy" width={800} height={600} className={styles.aboutImg} />
              <div className={styles.founderBox}>
                 <strong>DRIVEN BY PERFORMANCE</strong>
                 <p>"We don't just sell parts; we provide the keys to unlock hidden potential."</p>
              </div>
           </div>
        </div>
      </div>
    </section>
  );
}
