import { motion } from 'motion/react';
import StoreButtons from './StoreButtons';

const CTA = () => {
  return (
    <section className="py-20">
      <div className="max-w-7xl mx-auto px-6">
        <div className="glass rounded-[48px] p-8 md:p-20 text-center relative overflow-hidden border border-border-subtle">
          <div className="absolute top-0 left-0 w-full h-full bg-brand/5 -z-10" />
          <div className="absolute -top-24 -right-24 w-64 h-64 bg-brand/10 blur-[80px] rounded-full" />

          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ type: "spring", stiffness: 100, damping: 20 }}
          >
            <h2 className="text-4xl md:text-6xl font-display font-extrabold mb-6 text-text-primary tracking-tight">
              Ready to Start Your <br />
              <span className="text-brand">Walking Journey?</span>
            </h2>
            <p className="text-text-secondary text-lg md:text-xl max-w-2xl mx-auto mb-10">
              Join thousands of dog owners who are making every walk count. TailTrails is completely free — download it today!
            </p>

            <StoreButtons className="max-w-md mx-auto" />
            <p className="text-sm text-text-muted font-medium mt-5 flex items-center justify-center gap-2">
              <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-brand/15 text-brand text-xs font-bold uppercase tracking-wider">Free</span>
              100% free — no subscription, no ads, no catch.
            </p>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default CTA;