import PageBanner from "@/components/PageBanner";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { ArrowRight } from "lucide-react";
import heroProducts from "@/assets/hero-products.jpg";
import productDust from "@/assets/product-gold-dust.jpg";
import productNuggets from "@/assets/product-gold-nuggets.jpg";
import productBars from "@/assets/product-gold-bars.jpg";

const products = [
  {
    image: productDust,
    title: "Gold Dust",
    purity: "92–96% Au",
    origin: "Democratic Republic of Congo",
    packaging: "Sealed laboratory-grade containers with tamper-evident seals",
    desc: "Fine gold dust sourced from licensed artisanal mining operations. Ideal for refineries and bulk buyers seeking raw gold material for further processing.",
    uses: "Industrial refining, jewelry manufacturing, investment holdings",
  },
  {
    image: productNuggets,
    title: "Gold Nuggets",
    purity: "85–95% Au",
    origin: "DRC Licensed Mining Sources",
    packaging: "Secure anti-tamper pouches with documented chain of custody",
    desc: "Natural gold nuggets of varying sizes, sourced directly from verified mining sites. Each batch comes with assay certificates and provenance documentation.",
    uses: "Collectors, refineries, investment, jewelry crafting",
  },
  {
    image: productBars,
    title: "Gold Doré Bars",
    purity: "96–99% Au",
    origin: "DRC Artisanal & Refinery Sources",
    packaging: "Tamper-proof hardcases with serial numbers and assay documentation",
    desc: "Semi-refined gold doré bars produced through our smelting process. Ready for final refining or direct sale to international markets. Each bar is individually weighed, assayed, and serialized.",
    uses: "International trade, central banks, refineries, large-scale investors",
  },
];

const Products = () => (
  <div>
    <PageBanner title="Our Gold Products" subtitle="Premium gold products sourced and processed to international standards" image={heroProducts} />

    <section className="section-padding bg-background">
      <div className="container mx-auto space-y-20">
        {products.map((p, i) => (
          <motion.div
            key={p.title}
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className={`grid md:grid-cols-2 gap-12 items-center ${i % 2 !== 0 ? "md:[direction:rtl]" : ""}`}
          >
            <div className={i % 2 !== 0 ? "md:[direction:ltr]" : ""}>
              <img src={p.image} alt={p.title} className="rounded-xl shadow-2xl w-full" loading="lazy" />
            </div>
            <div className={i % 2 !== 0 ? "md:[direction:ltr]" : ""}>
              <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-3">{p.title}</h2>
              <div className="gold-divider !mx-0 mb-6" />
              <p className="text-muted-foreground leading-relaxed mb-6">{p.desc}</p>
              <div className="space-y-3 mb-6">
                <div className="flex gap-3"><span className="text-primary font-semibold min-w-[100px]">Purity:</span><span className="text-muted-foreground">{p.purity}</span></div>
                <div className="flex gap-3"><span className="text-primary font-semibold min-w-[100px]">Origin:</span><span className="text-muted-foreground">{p.origin}</span></div>
                <div className="flex gap-3"><span className="text-primary font-semibold min-w-[100px]">Packaging:</span><span className="text-muted-foreground">{p.packaging}</span></div>
                <div className="flex gap-3"><span className="text-primary font-semibold min-w-[100px]">Use Cases:</span><span className="text-muted-foreground">{p.uses}</span></div>
              </div>
              <Link to="/contact" className="inline-flex items-center gap-2 gold-gradient px-6 py-3 rounded-lg font-semibold text-secondary hover:opacity-90 transition-opacity">
                Inquire Now <ArrowRight size={18} />
              </Link>
            </div>
          </motion.div>
        ))}
      </div>
    </section>
  </div>
);

export default Products;
