import PageBanner from "@/components/PageBanner";
import SectionHeading from "@/components/SectionHeading";
import { motion } from "framer-motion";
import { Target, Eye, Heart, Handshake } from "lucide-react";
import heroEthical from "@/assets/hero-ethical.jpg";
import heroMining from "@/assets/hero-mining.jpg";
import processRefining from "@/assets/process-refining.jpg";

const values = [
  { icon: Heart, title: "Integrity", desc: "Every transaction is conducted with complete honesty and ethical standards." },
  { icon: Target, title: "Excellence", desc: "We pursue the highest quality in every aspect of our gold supply chain." },
  { icon: Handshake, title: "Partnership", desc: "We build long-term relationships based on trust and mutual benefit." },
  { icon: Eye, title: "Transparency", desc: "Full visibility into sourcing, processing, and documentation at every stage." },
];

const About = () => (
  <div>
    <PageBanner title="About Primera Gold Africa" subtitle="A trusted gold trading institution rooted in the heart of Africa" image={heroEthical} />

    <section className="section-padding bg-background">
      <div className="container mx-auto">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <motion.div initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
            <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-4">Company Overview</h2>
            <div className="gold-divider !mx-0 mb-6" />
            <p className="text-muted-foreground leading-relaxed mb-4">
              Primera Gold Africa is a premier gold trading company headquartered in the Democratic Republic of Congo. We specialize in the sourcing, processing, and international export of high-purity gold products including gold dust, nuggets, and doré bars.
            </p>
            <p className="text-muted-foreground leading-relaxed mb-4">
              Our operations are built on a foundation of ethical sourcing, working exclusively with licensed artisanal miners who adhere to responsible mining practices. We maintain full compliance with DRC mining regulations and international trade standards.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              With a network spanning multiple continents, we serve international buyers, refineries, and investors seeking reliable, conflict-free gold from Africa's richest mineral regions.
            </p>
          </motion.div>
          <motion.div initial={{ opacity: 0, x: 30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
            <img src={heroMining} alt="Mining operations in DRC" className="rounded-xl shadow-2xl w-full" loading="lazy" />
          </motion.div>
        </div>
      </div>
    </section>

    <section className="section-padding bg-muted">
      <div className="container mx-auto">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <motion.div initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} className="order-2 md:order-1">
            <img src={processRefining} alt="Gold refining" className="rounded-xl shadow-2xl w-full" loading="lazy" />
          </motion.div>
          <motion.div initial={{ opacity: 0, x: 30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} className="order-1 md:order-2">
            <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-4">Mission & Vision</h2>
            <div className="gold-divider !mx-0 mb-6" />
            <p className="text-muted-foreground leading-relaxed mb-4">
              <strong className="text-foreground">Our Mission:</strong> To be Africa's most trusted gold trading institution by delivering high-purity, ethically sourced gold to the global market with unmatched transparency and professionalism.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              <strong className="text-foreground">Our Vision:</strong> To transform the African gold trade by setting new standards for responsible sourcing, operational excellence, and international compliance — empowering local mining communities while serving global markets.
            </p>
          </motion.div>
        </div>
      </div>
    </section>

    <section className="section-padding bg-background">
      <div className="container mx-auto">
        <SectionHeading title="Our Core Values" subtitle="The principles that guide every transaction and relationship" />
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {values.map((v, i) => (
            <motion.div key={v.title} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }} className="text-center p-6 bg-card rounded-xl border border-border">
              <div className="w-14 h-14 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                <v.icon size={24} className="text-secondary" />
              </div>
              <h3 className="font-heading font-semibold text-foreground mb-2">{v.title}</h3>
              <p className="text-muted-foreground text-sm">{v.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

export default About;
