import { Link } from "@tanstack/react-router";
import { motion } from "framer-motion";
import { ArrowRight, TrendingUp, Users, Headphones } from "lucide-react";

export function DealerCTA() {
  return (
    <section className="py-24 md:py-32 border-t border-border relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-hero opacity-50" />
      <div className="container-regent relative grid lg:grid-cols-2 gap-16 items-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0 }}
          transition={{ duration: 0.6 }}
        >
          <div className="flex items-center gap-3 mb-5">
            <span className="h-px w-10 bg-brand-red" />
            <span className="eyebrow">Partner with us</span>
          </div>
          <h2 className="display-lg">
            Grow your business with <span className="text-gradient-paint">Bangladesh's fastest-growing</span> paint brand.
          </h2>
          <p className="mt-6 text-muted-foreground leading-relaxed extralight max-w-xl">
            Join a network of 300+ dealers earning industry-leading margins, marketing
            support, and exclusive territory rights.
          </p>
          <div className="mt-10 flex flex-wrap gap-x-8 gap-y-4">
            <Link to="/dealers" className="group inline-flex items-center gap-3 text-sm uppercase tracking-editorial extralight text-foreground hover:text-brand-red transition-colors">
              <span className="h-px w-12 bg-foreground group-hover:bg-brand-red group-hover:w-16 transition-all" />
              Apply now <ArrowRight className="w-4 h-4" />
            </Link>
            <Link to="/contact" className="group inline-flex items-center gap-3 text-sm uppercase tracking-editorial extralight text-muted-foreground hover:text-brand-red transition-colors">
              Talk to sales <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0 }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="grid gap-px bg-border border border-border"
        >
          {[
            { icon: TrendingUp, t: "Industry-leading margins", d: "Profitable pricing structure across all SKUs." },
            { icon: Users, t: "Marketing & branding support", d: "Signage, samples, and co-branded campaigns." },
            { icon: Headphones, t: "Dedicated account manager", d: "Local support, fast logistics, training programs." },
          ].map((b) => (
            <div key={b.t} className="flex gap-5 bg-background p-6">
              <b.icon className="h-7 w-7 text-brand-red shrink-0" strokeWidth={1.25} />
              <div>
                <div className="text-sm uppercase tracking-editorial extralight">{b.t}</div>
                <div className="text-sm text-muted-foreground extralight mt-2 leading-relaxed">{b.d}</div>
              </div>
            </div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}