import PageBanner from "@/components/PageBanner";
import SectionHeading from "@/components/SectionHeading";
import { motion } from "framer-motion";
import { FileCheck, Shield, Award } from "lucide-react";
import heroProducts from "@/assets/hero-products.jpg";

const certs = [
  { icon: FileCheck, title: "Export License", desc: "Government-issued authorization for the legal export of precious metals from the Democratic Republic of Congo. This license is regularly renewed and subject to government audits." },
  { icon: Shield, title: "Certificate of Origin", desc: "Official documentation certifying the geographic origin and provenance of all gold products. This ensures full traceability and compliance with international trade regulations." },
  { icon: Award, title: "Assay Certificates", desc: "Independent laboratory certificates verifying the purity, weight, and chemical composition of every gold batch. Assays are conducted by accredited third-party laboratories." },
];

const Certifications = () => (
  <div>
    <PageBanner title="Certifications & Compliance" subtitle="Full documentation and regulatory compliance for every transaction" image={heroProducts} />

    <section className="section-padding bg-background">
      <div className="container mx-auto">
        <SectionHeading title="Our Certifications" subtitle="Every shipment is backed by verified documentation from authorized institutions" />
        <div className="grid md:grid-cols-3 gap-8">
          {certs.map((c, i) => (
            <motion.div key={c.title} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.15 }} className="bg-card rounded-xl p-8 border border-border text-center">
              <div className="w-20 h-20 rounded-full gold-gradient flex items-center justify-center mx-auto mb-6">
                <c.icon size={36} className="text-secondary" />
              </div>
              <h3 className="font-heading font-semibold text-foreground mb-3 text-xl">{c.title}</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">{c.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>

    <section className="section-padding bg-muted">
      <div className="container mx-auto max-w-3xl">
        <SectionHeading title="Compliance & Authenticity" subtitle="Our commitment to legal, ethical, and transparent gold trade" />
        <div className="space-y-6 text-muted-foreground leading-relaxed">
          <p>Primera Gold Africa operates in full compliance with all DRC mining and export regulations. Our gold is sourced exclusively from licensed mining cooperatives that meet government standards for responsible artisanal mining.</p>
          <p>We maintain rigorous internal controls and documentation processes that ensure every gram of gold can be traced from its point of extraction to final delivery. Our compliance framework includes regular government audits, third-party inspections, and continuous monitoring of our supply chain.</p>
          <p>International buyers can be confident that gold from Primera Gold Africa is conflict-free, ethically sourced, and fully documented — meeting the due diligence requirements of refineries, trading houses, and financial institutions worldwide.</p>
        </div>
      </div>
    </section>
  </div>
);

export default Certifications;
