"use client";

import { motion, useScroll, useTransform, useInView } from "framer-motion";
import { useRef, useState } from "react";
import Link from "next/link";
import GeographicFootprint from "@/components/ui/GeographicFootprint";

// ─── THEME TOKENS ───────────────────────────────────────────────────────────
const G = "#C9A84C";
const GL = "#E8D5A3";
const DARK = "#07070A";
const DARK2 = "#0D0D12";

const goldText: React.CSSProperties = {
  background: `linear-gradient(135deg, ${G} 0%, ${GL} 45%, ${G} 100%)`,
  WebkitBackgroundClip: "text",
  WebkitTextFillColor: "transparent",
  backgroundClip: "text",
};

const GSHADOW = `0 4px 32px rgba(0,0,0,0.45), 0 0 0 1px ${G}22, 0 8px 48px rgba(198,160,79,0.18)`;
const GSHADOW_HOVER = `0 12px 52px rgba(0,0,0,0.6), 0 0 0 1px ${G}40, 0 20px 64px rgba(198,160,79,0.32)`;

// ─── DATA ─────────────────────────────────────────────────────────────────────
const sudanFacts = [
  { label: "Primary Commodity", value: "Gold (High Purity)" },
  { label: "Mining Potential", value: "Tier 1 Global Opportunity" },
  { label: "Development Stage", value: "Strategic Greenfield Focus" },
  { label: "Strategic Value", value: "Core Regional Hub" },
];

const africaRegions = [
  {
    title: "East Africa",
    status: "Active Exploration",
    desc: "Emerging targets along the East African mineral belt with high prospectivity for precious and base metals.",
    image: "/images/20 (2).png",
  },
  {
    title: "West Africa",
    status: "Evaluation Phase",
    desc: "Resource evaluation across proven gold-bearing regions with established heritage and robust infrastructure.",
    image: "/images/showcase_landscape.png",
  },
  {
    title: "Central Hub",
    status: "Strategic Review",
    desc: "Securing initial footholds in highly underexplored regions to build the next generation of assets.",
    image: "/images/22222 (1).png",
  },
];

const geologicalAdvantages = [
  { title: "Precambrian Shields", desc: "Targeting ancient crustal formations known for hosting world-class gold deposits.", icon: "🏜️" },
  { title: "Greenstone Belts", desc: "Focusing exploration on prolific greenstone belts with high structural connectivity.", icon: "⛰️" },
  { title: "Base Metals", desc: "Expanding portfolio into copper and critical minerals vital for the energy transition.", icon: "⚙️" },
  { title: "Surface Indicators", desc: "Leveraging visible, high-grade surface expressions to fast-track resource modeling.", icon: "🔬" },
];

const strategyPhases = [
  { phase: "01", title: "Consolidate Operations", desc: "Strengthening operational foundations in core concession areas through technical rigor." },
  { phase: "02", title: "Regional Expansion", desc: "Extending exploration activities into adjacent high-potential jurisdictions." },
  { phase: "03", title: "Portfolio Diversification", desc: "Selective entry into new African markets based on technical merit and governance stability." },
  { phase: "04", title: "Operational Scaling", desc: "Building integrated infrastructure to support sustainable multi-regional presence." },
];

// ─── ATOMS ────────────────────────────────────────────────────────────────────
function GoldDiamond({ size = 12, opacity = 0.5 }: { size?: number; opacity?: number }) {
  return (
    <div style={{
      width: size, height: size, transform: "rotate(45deg)",
      background: `linear-gradient(135deg, ${G}, ${GL})`, opacity, flexShrink: 0,
    }} />
  );
}

function DiamondDivider() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, justifyContent: "center", margin: "40px 0" }}>
      <div style={{ flex: 1, maxWidth: 120, height: 1, background: `linear-gradient(90deg, transparent, ${G}40)` }} />
      <GoldDiamond size={5} opacity={0.4} />
      <GoldDiamond size={8} opacity={0.7} />
      <GoldDiamond size={5} opacity={0.4} />
      <div style={{ flex: 1, maxWidth: 120, height: 1, background: `linear-gradient(270deg, transparent, ${G}40)` }} />
    </div>
  );
}

function SectionDiamonds() {
  return (
    <div style={{ position: "absolute", top: 0, left: 0, right: 0, display: "flex", justifyContent: "center", transform: "translateY(-50%)", zIndex: 20 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ width: 80, height: 1, background: `linear-gradient(90deg, transparent, ${G}60)` }} />
        <GoldDiamond size={6} opacity={0.3} />
        <GoldDiamond size={10} opacity={0.8} />
        <GoldDiamond size={6} opacity={0.3} />
        <div style={{ width: 80, height: 1, background: `linear-gradient(270deg, transparent, ${G}60)` }} />
      </div>
    </div>
  );
}

function FloatingDiamonds() {
  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }}>
      {[
        { x: "10%", y: "15%", size: 6, delay: 0, dur: 9 },
        { x: "85%", y: "45%", size: 8, delay: 2, dur: 11 },
        { x: "70%", y: "80%", size: 5, delay: 4, dur: 8 },
        { x: "20%", y: "75%", size: 7, delay: 1, dur: 13 },
      ].map((d, i) => (
        <motion.div
          key={i}
          animate={{ y: [0, -30, 0], opacity: [0.1, 0.35, 0.1] }}
          transition={{ duration: d.dur, repeat: Infinity, ease: "easeInOut", delay: d.delay }}
          style={{ position: "absolute", left: d.x, top: d.y, width: d.size, height: d.size, transform: "rotate(45deg)", background: `linear-gradient(135deg, ${G}, ${GL})` }}
        />
      ))}
    </div>
  );
}

// ─── HERO ─────────────────────────────────────────────────────────────────────
function Hero() {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 0.4], [0, 160]);
  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 1.05]);
  const op = useTransform(scrollYProgress, [0, 0.35], [1, 0]);

  return (
    <section style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center", background: "#000", overflow: "hidden" }}>
      <motion.div style={{ position: "absolute", inset: 0, scale, opacity: 0.45 }}>
        <img src="/images/1247777.png" alt="Geographic Overview" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 30%, #000 100%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at center, transparent, rgba(0,0,0,0.5))" }} />
      </motion.div>

      <FloatingDiamonds />

      <motion.div className="resp-container" style={{ y, opacity: op, position: "relative", zIndex: 10, width: "100%", maxWidth: 1200, margin: "0 auto", padding: "0 64px" }}>
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 40 }}>
          <span style={{ width: 40, height: 1, background: G }} />
          <GoldDiamond size={6} opacity={0.6} />
          <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", fontWeight: 700, color: G }}>Regional Presence</span>
        </motion.div>

        <motion.h1 initial={{ opacity: 0, y: 48 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1.1, delay: 0.1 }}
          style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(36px, 6vw, 84px)", fontWeight: 700, lineHeight: 0.95, letterSpacing: "-0.03em", margin: "0 0 44px", textTransform: "uppercase", color: "#FFF" }}>
          REGIONS &<br />
          STRATEGIC<br />
          <span style={goldText}>MARKETS</span>
        </motion.h1>

        <motion.p initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.9, delay: 0.3 }}
          style={{ fontSize: 18, lineHeight: 1.8, maxWidth: 580, color: "rgba(255,255,255,0.6)", fontWeight: 300 }}>
          Crown Rock Minerals operates across strategically selected African mineral regions, focusing on geological truth, extensive exploration, and responsible development.
        </motion.p>
      </motion.div>

      {/* Scroll indicator */}
      <div style={{ position: "absolute", bottom: 64, left: "50%", transform: "translateX(-50%)", zIndex: 10, display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
        <motion.div animate={{ y: [0, 8, 0] }} transition={{ duration: 1.6, repeat: Infinity, ease: "easeInOut" }} style={{ width: 24, height: 40, border: `1px solid ${G}40`, borderRadius: 12, display: "flex", justifyContent: "center", paddingTop: 6 }}>
          <div style={{ width: 4, height: 4, borderRadius: "50%", background: G }} />
        </motion.div>
      </div>

      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 250, background: `linear-gradient(to top, ${DARK}, transparent)`, zIndex: 5 }} />
    </section>
  );
}

// ─── SUDAN FOCUS ──────────────────────────────────────────────────────────────
function SudanFocus() {
  return (
    <section className="resp-section" style={{ background: DARK, padding: "160px 0", position: "relative" }}>
      <SectionDiamonds />
      <FloatingDiamonds />

      <div className="split-grid resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 100, alignItems: "center" }}>
        {/* Image */}
        <div className="split-img" style={{ position: "relative", height: "700px" }}>
          <motion.div 
            style={{ position: "absolute", inset: 0, borderRadius: 4, overflow: "hidden", border: `1px solid ${G}30`, boxShadow: GSHADOW }}
            initial={{ opacity: 0, x: -40 }} whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 0.8 }} viewport={{ once: true }}
          >
            <img src="/images/hero-mine-bg.png" alt="Sudan Mining" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: `linear-gradient(90deg, ${DARK}99 0%, transparent 60%)` }} />
            <div style={{ position: "absolute", bottom: 24, left: 24 }}><GoldDiamond size={10} opacity={0.8} /></div>
          </motion.div>
        </div>

        <div>
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 28 }}>
            <span style={{ display: "block", height: 1, width: 32, background: G }} />
            <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700 }}>Primary Market</span>
          </motion.div>
          <motion.h2 initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
            style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 4vw, 54px)", textTransform: "uppercase", lineHeight: 1.1, color: "#FFF", marginBottom: 32 }}>
            SUDAN 🇸🇩: A <span style={goldText}>STRATEGIC</span> FOCUS
          </motion.h2>
          <DiamondDivider />
          
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} style={{ fontSize: 18, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", fontWeight: 300 }}>
            <p style={{ marginBottom: 32 }}>Sudan represents one of Africa&apos;s most geologically significant and underexplored mineral territories. With extensive gold-bearing formations, it offers a compelling foundation for long-term mining investment.</p>
            <p>Crown Rock Minerals has positioned itself to be a meaningful participant in Sudan&apos;s mining evolution — bringing technical discipline, institutional partnerships, and a commitment to local value creation.</p>
          </motion.div>

          {/* Stats Grid */}
          <div className="child-grid" style={{ marginTop: 60, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            {sudanFacts.map((f, i) => (
              <motion.div 
                key={i} 
                initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.1 }} viewport={{ once: true }}
                whileHover={{ backgroundColor: "#000", borderColor: G, y: -5, boxShadow: `0 10px 30px ${G}20` }}
                style={{ padding: "32px", background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4, transition: "0.3s", position: "relative" }}
              >
                <div style={{ position: "absolute", top: 12, right: 12 }}><GoldDiamond size={4} opacity={0.3} /></div>
                <div style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: "0.2em", color: G, marginBottom: 12, fontWeight: 700 }}>{f.label}</div>
                <div style={{ fontSize: 15, color: "#FFF", fontWeight: 500 }}>{f.value}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── GEOLOGICAL ADVANTAGE (NEW SECTION) ───────────────────────────────────────
function GeologicalAdvantage() {
  return (
    <section className="resp-section" style={{ background: DARK2, padding: "160px 0", borderTop: `1px solid rgba(255,255,255,0.05)`, position: "relative", overflow: "hidden" }}>
      <SectionDiamonds />
      
      {/* Background Image Subdued */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.12 }}>
         <img src="/images/showcase_mining.png" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${DARK2} 0%, transparent 20%, transparent 80%, ${DARK2} 100%)` }} />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 10 }}>
        <div style={{ textAlign: "center", marginBottom: 100 }}>
          <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 24 }}>Exploration Edge</span>
          <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 4vw, 54px)", textTransform: "uppercase", color: "#FFF" }}>
            GEOLOGICAL <span style={goldText}>ADVANTAGE</span>
          </h2>
          <DiamondDivider />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 32 }}>
          {geologicalAdvantages.map((item, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }}
              whileHover={{ y: -10, backgroundColor: "#000", borderColor: G, boxShadow: GSHADOW_HOVER }}
              style={{
                background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4, padding: "40px 32px",
                transition: "0.5s", position: "relative", overflow: "hidden"
              }}
            >
              <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: 2, background: `linear-gradient(90deg, transparent, ${G}, transparent)` }} />
              <div style={{ fontSize: 32, marginBottom: 24 }}>{item.icon}</div>
              <h3 style={{ fontSize: 14, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: G, marginBottom: 16 }}>{item.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(255,255,255,0.45)", margin: 0 }}>{item.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── AFRICA GROWTH STRATEGY ───────────────────────────────────────────────────
function AfricaGrowth() {
  return (
    <section className="resp-section" style={{ background: DARK, padding: "160px 0", borderTop: "1px solid rgba(255,255,255,0.05)", position: "relative" }}>
      <SectionDiamonds />
      <FloatingDiamonds />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 10 }}>
        <div style={{ textAlign: "center", marginBottom: 100 }}>
          <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 24 }}>Continental Vision</span>
          <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 4vw, 54px)", textTransform: "uppercase", color: "#FFF" }}>
            AFRICA <span style={goldText}>GROWTH</span> STRATEGY
          </h2>
          <DiamondDivider />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 32 }}>
          {africaRegions.map((region, i) => (
            <motion.div 
              key={i} 
              initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6, delay: i * 0.1 }}
              whileHover={{ y: -10, backgroundColor: "#000", borderColor: G, boxShadow: GSHADOW_HOVER }}
              style={{ background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4, overflow: "hidden", transition: "0.5s", position: "relative" }}
            >
              <div style={{ position: "absolute", top: 12, left: 12, zIndex: 10 }}><GoldDiamond size={6} opacity={0.6} /></div>
              <div style={{ height: "260px", overflow: "hidden", position: "relative", borderBottom: `1px solid ${G}30` }}>
                <img src={region.image} alt={region.title} style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.7, transition: "transform 1s cubic-bezier(0.2, 1, 0.3, 1)" }} className="hover:scale-110" />
                <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${DARK}, transparent)` }} />
                <div style={{ position: "absolute", top: 20, right: 20 }}>
                  <span style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: "0.15em", color: G, padding: "6px 12px", background: "rgba(0,0,0,0.8)", border: `1px solid ${G}40`, borderRadius: 2, fontWeight: 700 }}>{region.status}</span>
                </div>
              </div>
              <div style={{ padding: 40 }}>
                <h3 style={{ fontSize: 20, fontWeight: 700, color: "#FFF", marginBottom: 16 }}>{region.title}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.7, color: "rgba(255,255,255,0.45)", margin: 0 }}>{region.desc}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── COMMAND CENTER ───────────────────────────────────────────────────────────
function CommandCenter() {
  return (
    <section className="resp-section" style={{ background: DARK2, padding: "160px 0", position: "relative" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.05, backgroundImage: "radial-gradient(circle, #C9A84C 1px, transparent 1px)", backgroundSize: "40px 40px" }} />
      <SectionDiamonds />
      <FloatingDiamonds />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 10 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 32 }}>
          {[
            { label: "Istanbul, Turkey 🇹🇷", role: "Corporate HQ", icon: "🏢" },
            { label: "Sudan 🇸🇩", role: "Primary Operations", icon: "⛏️" },
            { label: "East Africa", role: "Exploration Hub", icon: "🔍" },
            { label: "West Africa", role: "Evaluation Center", icon: "📊" },
          ].map((loc, i) => (
            <motion.div 
              key={i} 
              initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}
              whileHover={{ backgroundColor: "#000", borderColor: G, y: -5, boxShadow: `0 15px 40px rgba(0,0,0,0.6), inset 0 0 0 1px ${G}20` }}
              style={{ padding: "48px 40px", background: "rgba(255,255,255,0.01)", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 4, textAlign: "center", transition: "0.3s", position: "relative" }}
            >
              <div style={{ position: "absolute", top: 10, right: 10 }}><GoldDiamond size={4} opacity={0.2} /></div>
              <div style={{ fontSize: 32, marginBottom: 24, opacity: 0.8 }}>{loc.icon}</div>
              <h4 style={{ fontSize: 16, fontWeight: 700, color: "#FFF", marginBottom: 8 }}>{loc.label}</h4>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.15em", color: G, fontWeight: 700 }}>{loc.role}</div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── STRATEGIC EXPANSION ──────────────────────────────────────────────────────
function Expansion() {
  return (
    <section className="resp-section" style={{ background: "#060606", padding: "160px 0", borderTop: `1px solid ${G}20`, position: "relative", overflow: "hidden" }}>
      <SectionDiamonds />
      {/* Cinematic background */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.1 }}>
        <img src="/images/blog_greenfield_sudan.png" alt="Expansion" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, #060606 0%, transparent 50%, #060606 100%)` }} />
      </div>

      <div className="resp-container" style={{ maxWidth: 900, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 10 }}>
        <div style={{ textAlign: "center", marginBottom: 100 }}>
          <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 24 }}>Strategic Timeline</span>
          <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 4vw, 54px)", textTransform: "uppercase", color: "#FFF", margin: 0 }}>STRATEGIC <span style={goldText}>EXPANSION</span></h2>
          <DiamondDivider />
        </div>

        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 2, background: `linear-gradient(to bottom, transparent, ${G}80, transparent)` }} />
          <div style={{ display: "grid", gap: 80 }}>
            {strategyPhases.map((phase, i) => (
              <motion.div 
                 key={i} 
                 initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }}
                 style={{ position: "relative", paddingLeft: 60 }}
              >
                {/* Timeline dot */}
                <div style={{ position: "absolute", left: -6, top: 0, width: 14, height: 14, background: DARK, border: `2px solid ${G}`, borderRadius: "50%", boxShadow: `0 0 20px ${G}` }}>
                  <div style={{ position: "absolute", inset: 2, background: G, borderRadius: "50%" }} />
                </div>
                
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                  <div style={{ fontSize: 11, fontWeight: 800, color: G, textTransform: "uppercase", letterSpacing: "0.25em" }}>Phase {phase.phase}</div>
                  <div style={{ flex: 1, height: 1, background: `linear-gradient(to right, ${G}40, transparent)` }} />
                </div>
                
                <h4 style={{ fontSize: 24, fontWeight: 700, color: "#FFF", marginBottom: 16, fontFamily: "serif" }}>{phase.title}</h4>
                <p style={{ fontSize: 16, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", fontWeight: 300, margin: 0 }}>{phase.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA ────────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section style={{ background: DARK, padding: "160px 0", textAlign: "center", position: "relative", overflow: "hidden" }}>
      <SectionDiamonds />
      <FloatingDiamonds />

      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 40, position: "relative", zIndex: 10 }}>
        <DiamondDivider />
        <h3 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(24px, 4vw, 42px)", textTransform: "uppercase", letterSpacing: "0.05em", color: "#FFF" }}>
          EXPLORE <span style={goldText}>PARTNERSHIPS</span>
        </h3>
        <p style={{ fontSize: 18, color: "rgba(255,255,255,0.45)", maxWidth: 600, fontWeight: 300, lineHeight: 1.8 }}>
          We actively seek strategic cooperation and institutional alliances to unlock mineral value across African regions.
        </p>
        
        <motion.div whileHover={{ scale: 1.05, boxShadow: `0 10px 40px ${G}40` }} whileTap={{ scale: 0.95 }}>
          <Link href="/contact" style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "20px 56px", background: G, color: "#000", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.3em", fontSize: 12, borderRadius: 2, textDecoration: "none", transition: "0.3s" }}>
            <GoldDiamond size={6} opacity={0.5} />
            Contact the Board
          </Link>
        </motion.div>
      </div>
      
      {/* Glow */}
      <div style={{ position: "absolute", bottom: "-30%", left: "50%", transform: "translateX(-50%)", width: "70%", height: "50%", background: `radial-gradient(ellipse at center, ${G}15 0%, transparent 70%)`, pointerEvents: "none" }} />
    </section>
  );
}

export default function RegionsContent() {
  return (
    <div style={{ background: DARK, color: "#FFF", overflow: "hidden" }}>
      <style>{`
        @media(max-width: 1024px) {
          .resp-section { padding: 80px 0 !important; }
          .resp-container { padding: 0 24px !important; }
          .split-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .split-img { height: 400px !important; }
          .child-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <Hero />
      <SudanFocus />
      <GeologicalAdvantage />
      <AfricaGrowth />
      <CommandCenter />
      <Expansion />
      <GeographicFootprint />
      <FinalCTA />
    </div>
  );
}