'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import { ShieldCheck, Zap, Cpu, Award, ChevronRight } from 'lucide-react';
import styles from './WhyChooseUs.module.css';

export default function WhyChooseUs() {
  const reasons = [
    {
      title: 'PRECISION HARDWARE',
      desc: 'Our proprietary hardware is built to surgical standards in-house, ensuring zero-latency communication and unmatched reliability.',
      icon: <Cpu size={32} />
    },
    {
      title: 'RAPID SUPPORT',
      desc: 'Expert technical assistance from actual enthusiasts. We speak your language and understand your build goals.',
      icon: <Zap size={32} />
    },
    {
      title: 'SECURE ENCRYPTION',
      desc: 'Industry-leading AES-256 bit encryption ensures your custom tunes and intellectual property remain yours and yours alone.',
      icon: <ShieldCheck size={32} />
    },
    {
      title: 'PROVEN PERFORMANCE',
      desc: 'Over 20 years of track records across time attack, drag, and circuit series worldwide.',
      icon: <Award size={32} />
    }
  ];

  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.grid}>
           <div className={styles.header}>
              <span className={styles.label}>WHY HONDA VERT</span>
              <h2 className={styles.title}>THE PRECISION DIFFERENCE</h2>
              <p className={styles.desc}>
                 We don't manufacture parts; we craft engineering solutions for those who demand more than 'adequate' performance.
              </p>
           </div>
           
           <div className={styles.reasons}>
              {reasons.map((item, i) => (
                <motion.div 
                  key={i} 
                  className={styles.card}
                  initial={{ opacity: 0, x: 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                >
                  <div className={styles.iconBox}>{item.icon}</div>
                  <div className={styles.cardContent}>
                     <h3>{item.title}</h3>
                     <p>{item.desc}</p>
                  </div>
                </motion.div>
              ))}
              
              <motion.div 
                className={styles.ctaBox}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.5 }}
              >
                <Link href="/products" className={styles.ctaBtn}>
                   EXPLORE ALL SYSTEMS <ChevronRight size={18} />
                </Link>
              </motion.div>
           </div>
        </div>
      </div>
    </section>
  );
}
