import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight, Shield, Globe, FileCheck, Users, Pickaxe, FlaskConical, TestTube, Flame, ArrowRight, Building, CreditCard, Wallet, DollarSign } from "lucide-react";
import SectionHeading from "@/components/SectionHeading";

import heroMining from "@/assets/hero-mining.jpg";
import heroProducts from "@/assets/hero-products.jpg";
import heroEthical from "@/assets/hero-ethical.jpg";
import heroExport from "@/assets/hero-export.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";
import processSmelting from "@/assets/process-smelting.jpg";
import processAssaying from "@/assets/process-assaying.jpg";
import processRefining from "@/assets/process-refining.jpg";

const slides = [
  {
    image: heroMining,
    title: "Responsible Gold Sourcing from the Heart of Africa",
    subtitle: "Partnering with licensed artisanal miners across the DRC",
  },
  {
    image: heroProducts,
    title: "High-Purity Gold for Global Markets",
    subtitle: "Supplying gold dust, nuggets, and doré bars to international buyers",
  },
  {
    image: heroEthical,
    title: "Ethical & Conflict-Free Gold Trade",
    subtitle: "Committed to transparency and responsible sourcing",
  },
  {
    image: heroExport,
    title: "Secure Global Delivery & Export",
    subtitle: "Fast, insured, and compliant gold shipments worldwide",
  },
];

const processSteps = [
  { icon: Pickaxe, title: "Mining", desc: "Gold extracted from earth by artisanal miners using responsible methods", image: heroMining },
  { icon: FlaskConical, title: "Refining", desc: "Removal of impurities to increase purity to market standards", image: processRefining },
  { icon: TestTube, title: "Assaying", desc: "Laboratory testing of gold purity and composition verification", image: processAssaying },
  { icon: Flame, title: "Smelting", desc: "Melting refined gold into doré bars for international export", image: processSmelting },
];

const products = [
  { image: productDust, title: "Gold Dust", purity: "92–96%", origin: "DRC Artisanal Mines", packaging: "Sealed containers" },
  { image: productNuggets, title: "Gold Nuggets", purity: "85–95%", origin: "DRC Licensed Sources", packaging: "Secure pouches" },
  { image: productBars, title: "Gold Doré Bars", purity: "96–99%", origin: "DRC Refineries", packaging: "Tamper-proof cases" },
];

const trustItems = [
  { icon: FileCheck, title: "Licensed Exporter", desc: "Fully licensed and registered with DRC mining authorities" },
  { icon: Shield, title: "Secure Trade", desc: "End-to-end security with insured shipments worldwide" },
  { icon: Globe, title: "Global Clients", desc: "Trusted by international buyers across multiple continents" },
  { icon: Users, title: "Verified Documentation", desc: "Complete chain of custody and provenance documentation" },
];

const Index = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setCurrentSlide((prev) => (prev + 1) % slides.length), 5000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      {/* Hero Slider */}
      <section className="relative h-[85vh] md:h-screen overflow-hidden">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentSlide}
            initial={{ opacity: 0, scale: 1.1 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 1 }}
            className="absolute inset-0"
          >
            <img src={slides[currentSlide].image} alt={slides[currentSlide].title} className="w-full h-full object-cover" width={1920} height={1080} />
            <div className="dark-overlay-strong absolute inset-0" />
          </motion.div>
        </AnimatePresence>

        <div className="absolute inset-0 z-10 flex items-center justify-center">
          <motion.div
            key={`text-${currentSlide}`}
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="text-center px-4 max-w-4xl"
          >
            <h1 className="font-heading text-3xl md:text-5xl lg:text-6xl font-bold text-primary-foreground mb-4 leading-tight">
              {slides[currentSlide].title}
            </h1>
            <p className="text-primary-foreground/80 text-base md:text-xl mb-8">{slides[currentSlide].subtitle}</p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link to="/products" className="gold-gradient px-8 py-3 rounded-lg font-semibold text-secondary hover:opacity-90 transition-opacity">
                Explore Products
              </Link>
              <Link to="/contact" className="border-2 border-primary px-8 py-3 rounded-lg font-semibold text-primary hover:bg-primary/10 transition-colors">
                Get in Touch
              </Link>
            </div>
          </motion.div>
        </div>

        <div className="absolute bottom-8 left-0 right-0 z-10 flex justify-center gap-3">
          {slides.map((_, i) => (
            <button key={i} onClick={() => setCurrentSlide(i)} className={`w-3 h-3 rounded-full transition-all ${i === currentSlide ? "gold-gradient w-8" : "bg-primary-foreground/40"}`} />
          ))}
        </div>

        <button onClick={() => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length)} className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-secondary/30 hover:bg-secondary/60 rounded-full text-primary-foreground hidden md:block">
          <ChevronLeft size={24} />
        </button>
        <button onClick={() => setCurrentSlide((prev) => (prev + 1) % slides.length)} className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-secondary/30 hover:bg-secondary/60 rounded-full text-primary-foreground hidden md:block">
          <ChevronRight size={24} />
        </button>
      </section>

      {/* About Preview */}
      <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: -40 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.8 }}>
              <img src={heroMining} alt="Mining operations" className="rounded-xl shadow-2xl w-full" loading="lazy" width={960} height={540} />
            </motion.div>
            <motion.div initial={{ opacity: 0, x: 40 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.8 }}>
              <h2 className="font-heading text-2xl md:text-4xl font-bold text-foreground mb-4">Africa's Trusted Gold Trading Partner</h2>
              <div className="gold-divider !mx-0 mb-6" />
              <p className="text-muted-foreground leading-relaxed mb-4">
                Based in the Democratic Republic of Congo, Primera Gold Africa works directly with licensed artisanal miners to source high-purity gold for international markets. Our operations prioritize transparency, ethical sourcing, and compliance with all regulatory standards.
              </p>
              <p className="text-muted-foreground leading-relaxed mb-6">
                We provide a complete gold supply chain — from mine to market — with verified documentation and secure logistics for every transaction.
              </p>
              <Link to="/about" className="inline-flex items-center gap-2 gold-gradient px-6 py-3 rounded-lg font-semibold text-secondary hover:opacity-90 transition-opacity">
                Learn More <ArrowRight size={18} />
              </Link>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Gold Process */}
      <section className="section-padding bg-secondary">
        <div className="container mx-auto">
          <SectionHeading title="The Gold Lifecycle" subtitle="From mine to market — our rigorous four-step process ensures quality and traceability at every stage" light />
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {processSteps.map((step, i) => (
              <motion.div
                key={step.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.15 }}
                className="bg-charcoal-light/50 rounded-xl overflow-hidden border border-primary/10 hover:border-primary/30 transition-colors group"
              >
                <div className="h-40 overflow-hidden">
                  <img src={step.image} alt={step.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
                </div>
                <div className="p-6">
                  <div className="w-12 h-12 rounded-full gold-gradient flex items-center justify-center mb-3">
                    <step.icon size={22} className="text-secondary" />
                  </div>
                  <h3 className="font-heading text-lg font-semibold text-primary mb-2">{step.title}</h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">{step.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
          <div className="text-center mt-10">
            <Link to="/gold-process" className="inline-flex items-center gap-2 border-2 border-primary px-6 py-3 rounded-lg font-semibold text-primary hover:bg-primary/10 transition-colors">
              View Full Process <ArrowRight size={18} />
            </Link>
          </div>
        </div>
      </section>

      {/* Products */}
      <section className="section-padding bg-background">
        <div className="container mx-auto">
          <SectionHeading title="Our Gold Products" subtitle="High-purity gold sourced from the DRC, processed and packaged to international standards" />
          <div className="grid md:grid-cols-3 gap-8">
            {products.map((p, i) => (
              <motion.div
                key={p.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.15 }}
                className="bg-card rounded-xl overflow-hidden shadow-lg border border-border hover:shadow-xl transition-shadow group"
              >
                <div className="h-56 overflow-hidden">
                  <img src={p.image} alt={p.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
                </div>
                <div className="p-6">
                  <h3 className="font-heading text-xl font-bold text-foreground mb-3">{p.title}</h3>
                  <div className="space-y-2 text-sm text-muted-foreground">
                    <p><span className="text-primary font-semibold">Purity:</span> {p.purity}</p>
                    <p><span className="text-primary font-semibold">Origin:</span> {p.origin}</p>
                    <p><span className="text-primary font-semibold">Packaging:</span> {p.packaging}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
          <div className="text-center mt-10">
            <Link to="/products" className="inline-flex items-center gap-2 gold-gradient px-6 py-3 rounded-lg font-semibold text-secondary hover:opacity-90 transition-opacity">
              View All Products <ArrowRight size={18} />
            </Link>
          </div>
        </div>
      </section>

      {/* Payment Methods */}
      <section className="section-padding bg-muted">
        <div className="container mx-auto">
          <SectionHeading title="Payment Methods" subtitle="Flexible and secure payment options for international gold transactions" />
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { icon: Building, title: "Bank Transfer", desc: "Traditional wire transfers via SWIFT for secure international payments" },
              { icon: Shield, title: "Escrow", desc: "Third-party escrow services for added buyer protection and trust" },
              { icon: Wallet, title: "USDT (TRC20)", desc: "Fast Tron network stablecoin payments for borderless transactions" },
              { icon: DollarSign, title: "USDT (ERC20)", desc: "Ethereum-based stablecoin payments for secure crypto transactions" },
            ].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.1 }}
                className="bg-card rounded-xl p-6 border border-border 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-foreground mb-2">{item.title}</h3>
                <p className="text-muted-foreground text-sm">{item.desc}</p>
              </motion.div>
            ))}
          </div>
          <p className="text-center text-muted-foreground text-sm mt-8 max-w-2xl mx-auto">
            Cryptocurrency payments allow fast, secure, and borderless transactions for international buyers — no banking delays, no currency conversion fees.
          </p>
        </div>
      </section>

      {/* Trust Section */}
      <section className="section-padding bg-background">
        <div className="container mx-auto">
          <SectionHeading title="Why Buyers Trust Us" subtitle="Built on integrity, transparency, and decades of mining expertise" />
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {trustItems.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.1 }}
                className="text-center p-6"
              >
                <div className="w-16 h-16 rounded-full gold-gradient flex items-center justify-center mx-auto mb-4">
                  <item.icon size={28} className="text-secondary" />
                </div>
                <h3 className="font-heading font-semibold text-foreground mb-2">{item.title}</h3>
                <p className="text-muted-foreground text-sm">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="relative h-[400px] md:h-[450px] flex items-center justify-center overflow-hidden">
        <img src={heroProducts} alt="Gold bars" className="absolute inset-0 w-full h-full object-cover" loading="lazy" />
        <div className="dark-overlay-strong absolute inset-0" />
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="relative z-10 text-center px-4"
        >
          <h2 className="font-heading text-3xl md:text-5xl font-bold text-primary-foreground mb-4">Start Your Gold Trade with Confidence</h2>
          <p className="text-primary-foreground/80 mb-8 max-w-xl mx-auto">Connect with our team to discuss your requirements and begin a transparent, secure gold transaction.</p>
          <Link to="/contact" className="gold-gradient px-8 py-4 rounded-lg font-semibold text-secondary text-lg hover:opacity-90 transition-opacity inline-block">
            Contact Us Today
          </Link>
        </motion.div>
      </section>
    </div>
  );
};

export default Index;
