'use client';

import { motion } from 'framer-motion';
import { Download, BookOpen } from 'lucide-react';
import styles from './CTA.module.css';

export default function CTA() {
  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          className={styles.header}
        >
          <h2 className={styles.title}>
            READY TO <span className={styles.red}>IGNITE?</span>
          </h2>
        </motion.div>

        <div className={styles.grid}>
          <div className={styles.card}>
            <div className={styles.top}>
              <span className={styles.label}>FIRMWARE</span>
              <h3>v2.1 Stable</h3>
            </div>
            <button className={styles.btnPrimary}>
              DOWNLOAD NOW <Download size={16} />
            </button>
          </div>

          <div className={styles.card}>
            <div className={styles.top}>
              <span className={styles.label}>DOCUMENTATION</span>
              <h3>User Manual</h3>
            </div>
            <button className={styles.btnSecondary}>
              VIEW GUIDES <BookOpen size={16} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
