import PageBanner from "@/components/PageBanner";
import SectionHeading from "@/components/SectionHeading";
import { motion } from "framer-motion";
import heroMining from "@/assets/hero-mining.jpg";
import processRefining from "@/assets/process-refining.jpg";
import processAssaying from "@/assets/process-assaying.jpg";
import processSmelting from "@/assets/process-smelting.jpg";

const steps = [
  {
    num: "01",
    title: "Mining",
    image: heroMining,
    paragraphs: [
      "Gold mining in the DRC is primarily conducted through artisanal and small-scale mining (ASM) operations. These licensed miners use both traditional and modern techniques to extract gold-bearing ore from alluvial deposits and hard-rock formations.",
      "Primera Gold Africa partners exclusively with licensed mining cooperatives that follow responsible mining practices, ensuring fair labor conditions, environmental protection, and community benefit sharing.",
    ],
  },
  {
    num: "02",
    title: "Refining",
    image: processRefining,
    paragraphs: [
      "Raw gold undergoes a rigorous purification process to remove base metals, impurities, and other non-gold elements. Chemical and electrolytic methods are employed to achieve the highest possible purity levels.",
      "Our refining partners utilize industry-standard processes that meet international benchmarks, ensuring the gold meets the requirements of global buyers and refineries.",
    ],
  },
  {
    num: "03",
    title: "Assaying",
    image: processAssaying,
    paragraphs: [
      "Every batch of gold is subjected to comprehensive laboratory testing to verify its purity, weight, and composition. Fire assay, XRF spectroscopy, and ICP analysis are used to provide accurate, certified results.",
      "Assay certificates accompany every shipment, providing buyers with independently verified documentation of the gold's quality and authenticity.",
    ],
  },
  {
    num: "04",
    title: "Smelting",
    image: processSmelting,
    paragraphs: [
      "Refined gold is melted at extreme temperatures and cast into doré bars — semi-pure gold bars that are the standard format for international gold trade. Each bar is individually weighed, stamped, and serialized.",
      "The smelting process is conducted under strict quality control conditions, ensuring uniform weight, purity, and finish for every bar produced.",
    ],
  },
];

const GoldProcess = () => (
  <div>
    <PageBanner title="The Gold Process" subtitle="A transparent look at our complete gold lifecycle — from mine to market" image={processSmelting} />

    <section className="section-padding bg-background">
      <div className="container mx-auto">
        <SectionHeading title="From Earth to Export" subtitle="Every step in our process is designed for maximum quality, traceability, and compliance" />
        <div className="space-y-24">
          {steps.map((step, i) => (
            <motion.div
              key={step.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={step.image} alt={step.title} className="rounded-xl shadow-2xl w-full" loading="lazy" />
              </div>
              <div className={i % 2 !== 0 ? "md:[direction:ltr]" : ""}>
                <span className="gold-text-gradient font-heading text-5xl font-bold">{step.num}</span>
                <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground mt-2 mb-4">{step.title}</h2>
                <div className="gold-divider !mx-0 mb-6" />
                {step.paragraphs.map((p, j) => (
                  <p key={j} className="text-muted-foreground leading-relaxed mb-4">{p}</p>
                ))}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

export default GoldProcess;
