import PageBanner from "@/components/PageBanner";
import SectionHeading from "@/components/SectionHeading";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { Shield, Eye, Globe, Award, Handshake, FileCheck, ArrowRight, CheckCircle } from "lucide-react";
import heroProducts from "@/assets/hero-products.jpg";
import heroEthical from "@/assets/hero-ethical.jpg";

const reasons = [
  { icon: Shield, title: "Licensed & Compliant", desc: "Fully licensed by DRC mining authorities with all required export permits and regulatory compliance." },
  { icon: Eye, title: "Full Transparency", desc: "Every transaction includes complete documentation, assay certificates, and provenance tracking." },
  { icon: Globe, title: "Global Reach", desc: "We serve buyers across Europe, Asia, the Middle East, and the Americas with reliable logistics." },
  { icon: Award, title: "Quality Guaranteed", desc: "Independent lab testing and certification ensure every gram meets international purity standards." },
  { icon: Handshake, title: "Trusted Partnerships", desc: "Long-term relationships with licensed miners, refineries, and international buyers." },
  { icon: FileCheck, title: "Complete Documentation", desc: "Export licenses, certificates of origin, assay reports — everything you need for a compliant transaction." },
];

const WhyChooseUs = () => (
  <div>
    <PageBanner title="Why Choose Us" subtitle="The gold standard in African gold trading" image={heroProducts} />

    <section className="section-padding bg-background">
      <div className="container mx-auto">
        <SectionHeading title="What Sets Us Apart" subtitle="Primera Gold Africa offers unmatched reliability, transparency, and professionalism" />
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {reasons.map((r, i) => (
            <motion.div key={r.title} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }} className="bg-card rounded-xl p-8 border border-border hover:border-primary/30 transition-colors">
              <div className="w-14 h-14 rounded-full gold-gradient flex items-center justify-center mb-4">
                <r.icon size={24} className="text-secondary" />
              </div>
              <h3 className="font-heading font-semibold text-foreground mb-2 text-lg">{r.title}</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">{r.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>

    <section className="relative py-20 overflow-hidden">
      <img src={heroEthical} alt="Mining operations" className="absolute inset-0 w-full h-full object-cover" loading="lazy" />
      <div className="dark-overlay-strong absolute inset-0" />
      <div className="container mx-auto relative z-10 px-4">
        <div className="max-w-2xl mx-auto text-center">
          <h2 className="font-heading text-3xl md:text-4xl font-bold text-primary-foreground mb-6">Our Commitment to You</h2>
          <div className="gold-divider mb-8" />
          <div className="space-y-4 text-left max-w-lg mx-auto">
            {["100% conflict-free, ethically sourced gold", "Independent assay verification for every shipment", "Fully insured international delivery", "Dedicated account manager for every client", "24/7 communication via WhatsApp and email"].map((item) => (
              <div key={item} className="flex items-center gap-3">
                <CheckCircle size={20} className="text-primary shrink-0" />
                <span className="text-primary-foreground/90">{item}</span>
              </div>
            ))}
          </div>
          <Link to="/contact" className="inline-flex items-center gap-2 gold-gradient px-8 py-3 rounded-lg font-semibold text-secondary hover:opacity-90 transition-opacity mt-8">
            Start Trading Today <ArrowRight size={18} />
          </Link>
        </div>
      </div>
    </section>
  </div>
);

export default WhyChooseUs;
