"use client";

import { useState } from "react";
import { motion } from "framer-motion";

const G = "#C6A04F";
const GL = "#E8D5A3";
const DARK2 = "#0D0D0D";

interface Country {
  name: string;
  flag: string;
  role: string;
}

const footprintData: Country[] = [
  { name: "SUDAN", flag: "🇸🇩", role: "MINING AND PROCESSING OPERATIONS" },
  { name: "ZAMBIA", flag: "🇿🇲", role: "CORE PROCESSING HUB" },
  { name: "EGYPT", flag: "🇪🇬", role: "EXPANSION AND DEVELOPMENT HUB" },
  { name: "CANADA", flag: "🇨🇦", role: "CORPORATE & LISTING HUB" },
];

const sliderImages = [
  { country: "SUDAN 🇸🇩", img: "/images/flag_sudan.webp" },
  { country: "ZAMBIA 🇿🇲", img: "/images/flag_zambia.jpg" },
  { country: "EGYPT 🇪🇬", img: "/images/flag_egypt.jpg" },
  { country: "CANADA 🇨🇦", img: "/images/flag_canada.webp" },
];

export default function GeographicFootprint() {
  const [activeCountry, setActiveCountry] = useState<string | null>(null);

  return (
    <section className="footprint-section" style={{ backgroundColor: DARK2, padding: "160px 0", position: "relative", overflow: "hidden" }}>
      {/* Earth Background */}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <img src="/images/earth_bg.png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", opacity: 0.19 }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, ${DARK2} 0%, transparent 30%, transparent 70%, ${DARK2} 100%)` }} />
        <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse at center, transparent 40%, ${DARK2}cc 85%)` }} />
      </div>
      {/* Gold Glow Ambience */}
      <div style={{ position: "absolute", top: "20%", right: "10%", width: "50%", height: "50%", background: `radial-gradient(ellipse, ${G}08 0%, transparent 70%)`, filter: "blur(80px)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 0, opacity: 0.02, backgroundImage: `radial-gradient(${G} 1px, transparent 1px)`, backgroundSize: "40px 40px", pointerEvents: "none" }} />

      <div className="footprint-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 10 }}>
        {/* Header */}
        <div className="footprint-header" style={{ textAlign: "center", marginBottom: 80 }}>
          <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 24 }}>Strategic Presence</span>
          <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(28px, 4vw, 48px)", textTransform: "uppercase", color: "#FFF", marginBottom: 16 }}>
            GEOGRAPHIC <span style={{ background: `linear-gradient(135deg, ${G} 0%, ${GL} 45%, ${G} 100%)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}>FOOTPRINT</span>
          </h2>
          <p style={{ fontSize: 16, color: "rgba(255,255,255,0.45)", fontWeight: 300, letterSpacing: "0.05em", textTransform: "uppercase", maxWidth: 600, margin: "0 auto" }}>
            Multi-Jurisdictional Presence with Defined Operational Roles
          </p>
        </div>

        <style>{`
          @media (max-width: 1024px) {
            .footprint-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
            .map-card { height: 350px !important; }
          }
          @media (max-width: 768px) {
            .footprint-section { padding: 80px 0 !important; }
            .footprint-container { padding: 0 20px !important; }
            .footprint-layout { gap: 32px !important; }
            .footprint-header { margin-bottom: 48px !important; }
            .footprint-header h2 { font-size: 24px !important; }
            .footprint-header p { font-size: 13px !important; letter-spacing: 0.02em !important; }
            .map-card { height: 240px !important; }
            .flag-slider { height: 160px !important; }
            .table-row { padding: 20px 12px !important; grid-template-columns: 1fr !important; gap: 8px !important; }
            .table-header { grid-template-columns: 1fr !important; }
            .table-header > div:last-child { display: none !important; }
            .country-name { font-size: 14px !important; }
            .country-role { font-size: 11px !important; }
            .map-flags { flex-wrap: wrap !important; gap: 8px !important; }
            .map-badge { font-size: 8px !important; padding: 6px 10px !important; letter-spacing: 0.1em !important; }
          }
          @media (max-width: 480px) {
            .footprint-container { padding: 0 16px !important; }
            .map-card { height: 200px !important; }
            .flag-slider { height: 130px !important; }
          }
        `}</style>

        <div className="footprint-layout" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 60, alignItems: "start" }}>
          
          {/* Left: Interactive Table & Slider */}
          <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
            
            {/* Table */}
            <div style={{ borderTop: `1px solid ${G}30` }}>
              <div className="table-header" style={{ display: "grid", gridTemplateColumns: "1.2fr 2fr", padding: "20px 0", borderBottom: `1px solid ${G}30`, fontSize: 12, fontWeight: 800, color: G, textTransform: "uppercase", letterSpacing: "0.15em" }}>
                <div>Country</div>
                <div>Role</div>
              </div>

              {footprintData.map((item) => {
                const isActive = activeCountry === item.name;
                return (
                  <motion.div
                    key={item.name}
                    className="table-row"
                    onHoverStart={() => setActiveCountry(item.name)}
                    onHoverEnd={() => setActiveCountry(null)}
                    style={{
                      display: "grid",
                      gridTemplateColumns: "1.2fr 2fr",
                      padding: "32px 24px",
                      borderBottom: "1px solid rgba(255,255,255,0.06)",
                      cursor: "pointer",
                      background: isActive ? "rgba(198,160,79,0.08)" : "transparent",
                      borderLeft: `3px solid ${isActive ? G : "transparent"}`,
                      transition: "background 0.3s, border-left 0.3s",
                      position: "relative",
                      overflow: "hidden"
                    }}
                  >
                    {isActive && (
                      <motion.div layoutId="footprint-bg" style={{ position: "absolute", inset: 0, background: `linear-gradient(90deg, ${G}10 0%, transparent 100%)`, pointerEvents: "none" }} />
                    )}
                    
                    <div className="country-name" style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 16, fontWeight: 700, color: isActive ? "#FFF" : "rgba(255,255,255,0.7)", letterSpacing: "0.05em", transition: "color 0.3s", position: "relative", zIndex: 2 }}>
                      <span style={{ fontSize: 24, filter: isActive ? "grayscale(0)" : "grayscale(0.8)", transition: "filter 0.3s" }}>{item.flag}</span>
                      {item.name}
                    </div>
                    <div className="country-role" style={{ display: "flex", alignItems: "center", fontSize: 13, color: isActive ? G : "rgba(255,255,255,0.4)", fontWeight: isActive ? 600 : 300, textTransform: "uppercase", letterSpacing: "0.05em", lineHeight: 1.5, transition: "color 0.3s", position: "relative", zIndex: 2 }}>
                      {item.role}
                    </div>
                  </motion.div>
                );
              })}
            </div>

            {/* Marquee Image Slider */}
            <div className="flag-slider" style={{ position: "relative", width: "100%", height: "220px", overflow: "hidden", borderRadius: 12, border: `1px solid ${G}30`, background: "rgba(0,0,0,0.5)" }}>
              <div style={{ position: "absolute", zIndex: 5, top: 12, left: 16, fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: G, fontWeight: 800 }}>Operating Environments</div>
              
              <motion.div
                animate={{ x: ["0%", "-50%"] }}
                transition={{ duration: 25, ease: "linear", repeat: Infinity }}
                style={{ display: "flex", height: "100%", width: "200%" }}
              >
                {[...sliderImages, ...sliderImages].map((slide, idx) => (
                  <div key={idx} style={{ position: "relative", width: "25%", height: "100%", flexShrink: 0, borderRight: "2px solid #000" }}>
                    <img src={slide.img} alt={slide.country} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%)" }} />
                    <div style={{ position: "absolute", bottom: 16, left: 16, fontSize: 12, fontWeight: 700, color: "#FFF", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                      {slide.country}
                    </div>
                  </div>
                ))}
              </motion.div>
            </div>
          </div>

          {/* Right: Dual Map Display */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            
            {/* Africa Map — Primary */}
            <motion.div 
              className="map-card"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              style={{ 
                position: "relative", 
                width: "100%", 
                height: 420, 
                borderRadius: 12, 
                overflow: "hidden", 
                border: `1px solid ${G}20`,
                boxShadow: `0 30px 60px rgba(0,0,0,0.6)`,
              }}
            >
              <img 
                src="/images/africa_map_gold.png" 
                alt="Crown Rock Minerals - Africa Operations"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} 
              />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, transparent 70%, ${DARK2} 100%)`, pointerEvents: "none" }} />
              
              {/* Label Badge */}
              <div style={{ position: "absolute", top: 20, left: 20, display: "flex", alignItems: "center", gap: 10, padding: "8px 16px", background: "rgba(0,0,0,0.7)", backdropFilter: "blur(8px)", border: `1px solid ${G}30`, borderRadius: 4 }}>
                <div style={{ width: 6, height: 6, borderRadius: "50%", background: G, boxShadow: `0 0 8px ${G}` }} />
                <span className="map-badge" style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 800 }}>Africa Operations</span>
              </div>

              {/* Country flags overlay */}
              <div className="map-flags" style={{ position: "absolute", bottom: 20, left: 20, display: "flex", gap: 12 }}>
                {[
                  { flag: "🇸🇩", name: "Sudan" },
                  { flag: "🇪🇬", name: "Egypt" },
                  { flag: "🇿🇲", name: "Zambia" },
                ].map((c) => (
                  <div key={c.name} style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4 }}>
                    <span style={{ fontSize: 16 }}>{c.flag}</span>
                    <span style={{ fontSize: 10, color: "rgba(255,255,255,0.7)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }}>{c.name}</span>
                  </div>
                ))}
              </div>
            </motion.div>

            {/* Canada Map — Secondary */}
            <motion.div 
              className="map-card"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.15 }}
              style={{ 
                position: "relative", 
                width: "100%", 
                height: 300, 
                borderRadius: 12, 
                overflow: "hidden", 
                border: `1px solid ${G}20`,
                boxShadow: `0 30px 60px rgba(0,0,0,0.6)`,
              }}
            >
              <img 
                src="/images/canada_map_gold.png" 
                alt="Crown Rock Minerals - Canada Corporate Hub"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%" }} 
              />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, transparent 60%, ${DARK2} 100%)`, pointerEvents: "none" }} />
              
              {/* Label Badge */}
              <div className="map-badge" style={{ position: "absolute", top: 20, left: 20, display: "flex", alignItems: "center", gap: 10, padding: "8px 16px", background: "rgba(0,0,0,0.7)", backdropFilter: "blur(8px)", border: `1px solid ${G}30`, borderRadius: 4 }}>
                <div style={{ width: 6, height: 6, borderRadius: "50%", background: G, boxShadow: `0 0 8px ${G}` }} />
                <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 800 }}>Corporate & Listing Hub</span>
              </div>

              {/* Canada flag badge */}
              <div className="map-badge" style={{ position: "absolute", bottom: 20, left: 20, display: "flex", alignItems: "center", gap: 8, padding: "8px 16px", background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4 }}>
                <span style={{ fontSize: 20 }}>🇨🇦</span>
                <div>
                  <div style={{ fontSize: 12, color: "#FFF", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em" }}>Canada</div>
                  <div style={{ fontSize: 9, color: G, textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>TSX Listing Strategy</div>
                </div>
              </div>

              {/* Connecting line decoration */}
              <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 1, height: 24, background: `linear-gradient(to bottom, ${G}40, transparent)` }} />
            </motion.div>

          </div>
        </div>
      </div>
    </section>
  );
}