import PageBanner from "@/components/PageBanner";
import SectionHeading from "@/components/SectionHeading";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { FileCheck, Plane, Shield, Package, ArrowRight } from "lucide-react";
import heroExport from "@/assets/hero-export.jpg";

const exportSteps = [
  { num: "01", title: "Order Confirmation", desc: "Buyer and seller agree on gold type, quantity, purity, and price. A formal purchase agreement is signed." },
  { num: "02", title: "Documentation", desc: "All required export documents are prepared including export license, certificate of origin, and assay certificates." },
  { num: "03", title: "Secure Packaging", desc: "Gold is weighed, sealed, and packaged in tamper-proof containers with security seals and tracking numbers." },
  { num: "04", title: "Air Freight Shipping", desc: "Insured shipment via international air freight carriers with real-time tracking and customs clearance support." },
  { num: "05", title: "Delivery & Verification", desc: "Gold arrives at the buyer's designated facility. Independent verification and inspection upon delivery." },
];

const documents = [
  { icon: FileCheck, title: "Export License", desc: "Government-issued license authorizing the legal export of gold from the DRC" },
  { icon: FileCheck, title: "Certificate of Origin", desc: "Official document certifying the gold's country and region of origin" },
  { icon: FileCheck, title: "Assay Certificate", desc: "Independent lab certification of gold purity, weight, and composition" },
];

const ExportLogistics = () => (
  <div>
    <PageBanner title="Export & Logistics" subtitle="Secure, compliant, and insured gold shipments to destinations worldwide" image={heroExport} />

    <section className="section-padding bg-background">
      <div className="container mx-auto">
        <SectionHeading title="Export Process" subtitle="A step-by-step overview of how we deliver gold to international buyers" />
        <div className="max-w-3xl mx-auto space-y-8">
          {exportSteps.map((step, i) => (
            <motion.div
              key={step.num}
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="flex gap-6 items-start"
            >
              <div className="w-14 h-14 rounded-full gold-gradient flex items-center justify-center shrink-0">
                <span className="font-heading font-bold text-secondary">{step.num}</span>
              </div>
              <div>
                <h3 className="font-heading font-semibold text-foreground text-lg mb-1">{step.title}</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">{step.desc}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>

    <section className="section-padding bg-muted">
      <div className="container mx-auto">
        <SectionHeading title="Required Documentation" subtitle="Every shipment includes comprehensive documentation for compliance and verification" />
        <div className="grid md:grid-cols-3 gap-8">
          {documents.map((doc, i) => (
            <motion.div key={doc.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-16 h-16 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                <doc.icon size={28} className="text-secondary" />
              </div>
              <h3 className="font-heading font-semibold text-foreground mb-2 text-lg">{doc.title}</h3>
              <p className="text-muted-foreground text-sm">{doc.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>

    <section className="section-padding bg-secondary">
      <div className="container mx-auto">
        <SectionHeading title="Shipping & Insurance" subtitle="Your gold is in safe hands from departure to delivery" light />
        <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
          {[
            { icon: Plane, title: "Air Freight", desc: "International air cargo via trusted carriers with priority handling" },
            { icon: Shield, title: "Full Insurance", desc: "Comprehensive transit insurance covering the full value of every shipment" },
            { icon: Package, title: "Secure Packaging", desc: "Military-grade tamper-proof containers with GPS tracking" },
          ].map((item, i) => (
            <motion.div key={item.title} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.15 }} className="text-center">
              <div className="w-14 h-14 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                <item.icon size={24} className="text-secondary" />
              </div>
              <h3 className="font-heading font-semibold text-primary mb-2">{item.title}</h3>
              <p className="text-muted-foreground text-sm">{item.desc}</p>
            </motion.div>
          ))}
        </div>
        <div className="text-center mt-10">
          <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">
            Request a Shipment Quote <ArrowRight size={18} />
          </Link>
        </div>
      </div>
    </section>
  </div>
);

export default ExportLogistics;
