"use client";

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

// ─── TOKENS ───────────────────────────────────────────────────────────────────
const G = "#C6A04F";
const GL = "#E8D5A3";
const GD = "#9a7a32";
const DARK = "#07070A";
const DARK2 = "#0D0D0D";

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

const GSHADOW_DARK  = `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_DARK  = `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 divisions = [
  { slug: "exploration", num: "01", title: "Mineral Exploration", description: "Rigorous geological surveys and target identification across high-potential African terrains." },
  { slug: "gold", num: "02", title: "Gold Operations", description: "Disciplined gold extraction with a focus on yield optimization and responsible practices." },
  { slug: "greenfield", num: "03", title: "Greenfield Development", description: "Building mining value from untouched ground through structured multi-phase programs." },
  { slug: "infrastructure", num: "04", title: "Infrastructure", description: "Creating the operational backbone required for sustainable long-term extraction." },
  { slug: "sustainability", num: "05", title: "ESG & Sustainability", description: "Embedding environmental and social governance at the core of every decision." },
  { slug: "investment", num: "06", title: "Investment & Finance", description: "Structuring capital deployment and investor relationships for enduring growth." },
];

const greenfieldSteps = [
  { step: "01", title: "Geological Reconnaissance", desc: "Deep geological mapping and data synthesis to identify viable mineral corridors." },
  { step: "02", title: "Target Delineation", desc: "Precise target identification through geochemical and geophysical methods." },
  { step: "03", title: "Feasibility & Planning", desc: "Comprehensive feasibility studies aligned with long-term strategic value creation." },
  { step: "04", title: "Infrastructure Readiness", desc: "Developing site-specific infrastructure capable of supporting scalable operations." },
  { step: "05", title: "Operational Commissioning", desc: "Disciplined commissioning process ensuring operational efficiency from day one." },
];

const sustainabilityPillars = [
  { icon: "🌱", title: "Environmental Stewardship", description: "Protecting ecosystems through rigorous rehabilitation protocols, responsible land stewardship, and proactive ecological monitoring." },
  { icon: "🤝", title: "Community Partnership", description: "Fostering enduring relationships with local communities through transparent dialogue, economic empowerment, and shared value creation." },
  { icon: "⚖️", title: "Governance & Integrity", description: "Operating under uncompromising governance frameworks that mandate ethical conduct, transparency, and accountability at every level." },
  { icon: "💧", title: "Water Responsibility", description: "Implementing advanced water conservation and recycling measures to preserve vital resources across all operational footprints." },
  { icon: "♻️", title: "Circular Operations", description: "Maximizing resource efficiency and reducing waste through closed-loop operational strategies spanning the mining lifecycle." },
  { icon: "🛡️", title: "Safety Culture", description: "Enforcing a zero-harm safety culture embedded in daily operations, ensuring the absolute wellbeing of our workforce and partners." },
];

const investmentHighlights = [
  { title: "Greenfield Upside Potential", description: "First-mover advantage in under-explored jurisdictions with high geological prospectivity." },
  { title: "Disciplined Capital Allocation", description: "Capital deployed with rigorous project-level discipline and risk-adjusted return focus." },
  { title: "Experienced Technical Leadership", description: "Backed by seasoned geologists, engineers, and operational specialists." },
  { title: "Sustainability-Linked Value", description: "ESG-aligned operations reducing risk and expanding investor universe." },
  { title: "Strategic Regional Positioning", description: "Established presence in Sudan and growing footprint across key African regions." },
  { title: "Long-Term Value Orientation", description: "Structured for enduring industrial relevance over market cycles." },
];

const newsItems = [
  { category: "Operations", date: "March 2025", title: "Crown Rock Advances Greenfield Program in East Sudan", slug: "greenfield-program-east-sudan", excerpt: "Our latest geological campaign confirms significant mineral potential across three newly identified target zones.", img: "/images/news/geological_services.png" },
  { category: "ESG", date: "February 2025", title: "2024 Sustainability Report: Progress Across All Pillars", slug: "2024-sustainability-report", excerpt: "Comprehensive review of our environmental, social, and governance performance across group operations.", img: "/images/news/sustainability.png" },
  { category: "Investors", date: "January 2025", title: "Strategic Vision: Building for the Next Decade of African Mining", slug: "strategic-vision-next-decade", excerpt: "Group leadership outlines the long-term capital strategy driving our African mineral development program.", img: "/images/news/vision.png" },
];

const customSlides = [
  { 
    id: "01", 
    title: "Gold Operations", 
    desc: "Disciplined gold extraction with advanced recovery systems across high-potential African concessions.", 
    img: "/images/showcase_mining.png",
    tag: "Core Division"
  },
  { 
    id: "02", 
    title: "Geological Intelligence", 
    desc: "Cutting-edge geophysical surveying and AI-driven target delineation powering exploration success.", 
    img: "/images/showcase_tech.png",
    tag: "Technology"
  },
  { 
    id: "03", 
    title: "Greenfield Frontier", 
    desc: "First-mover advantage in under-explored jurisdictions with exceptional geological prospectivity.", 
    img: "/images/greenfield_site.png",
    tag: "Growth"
  },
  { 
    id: "04", 
    title: "Sustainable Legacy", 
    desc: "ESG-embedded operations ensuring environmental stewardship and lasting community impact.", 
    img: "/images/Image_fx (7).png",
    tag: "ESG"
  }
];

// ─── ATOMS ────────────────────────────────────────────────────────────────────
function Eyebrow({ children, light = true }: { children: React.ReactNode; light?: boolean }) {
  return (
    <motion.div initial={{ opacity: 0, y: 12 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }}
      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.22em", color: G, fontWeight: 700 }}>{children}</span>
      <span style={{ display: "block", height: 1, width: 32, background: G }} />
    </motion.div>
  );
}

function SectionHeading({ children, light = true, center = false, style = {} }: { children: React.ReactNode; light?: boolean; center?: boolean; style?: React.CSSProperties }) {
  return (
    <motion.h2 initial={{ opacity: 0, y: 32 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.8, delay: 0.08 }}
      style={{ fontFamily: "'Syncopate', sans-serif", fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em", fontSize: "clamp(32px, 4vw, 54px)", color: "#FFF", textAlign: center ? "center" : "left", textTransform: "uppercase", margin: 0, ...style }}>
      {children}
    </motion.h2>
  );
}

function GoldLine() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "36px 0" }}>
      <div style={{ flex: 1, height: 1, background: `linear-gradient(90deg, transparent, ${G}40)` }} />
      <div style={{ width: 5, height: 5, transform: "rotate(45deg)", background: `${G}50` }} />
      <div style={{ width: 7, height: 7, transform: "rotate(45deg)", background: G }} />
      <div style={{ width: 5, height: 5, transform: "rotate(45deg)", background: `${G}50` }} />
      <div style={{ flex: 1, height: 1, background: `linear-gradient(270deg, transparent, ${G}40)` }} />
    </div>
  );
}

function Arrow() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>;
}

function GoldBtn({ children, dark = true, href, style = {} }: { children: React.ReactNode; dark?: boolean; href?: string; style?: React.CSSProperties }) {
  const s: React.CSSProperties = {
    display: "inline-flex", alignItems: "center", gap: 10, padding: "16px 40px",
    background: dark ? G : "transparent", border: dark ? "none" : `1px solid ${G}60`,
    color: dark ? "#000" : G, fontWeight: 700, fontSize: 11, textTransform: "uppercase",
    letterSpacing: "0.2em", cursor: "pointer", outline: "none", textDecoration: "none", borderRadius: 2, ...style
  };
  if (href) return <Link href={href} style={s}>{children}</Link>;
  return <motion.span whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} style={s}>{children}</motion.span>;
}

function CursorGlow() {
  const x = useMotionValue(-300); const y = useMotionValue(-300);
  const sx = useSpring(x, { stiffness: 60, damping: 20 }); const sy = useSpring(y, { stiffness: 60, damping: 20 });
  useEffect(() => { const fn = (e: MouseEvent) => { x.set(e.clientX - 250); y.set(e.clientY - 250); }; window.addEventListener("mousemove", fn); return () => window.removeEventListener("mousemove", fn); }, [x, y]);
  return (
    <motion.div style={{ x: sx, y: sy, position: "fixed", top: 0, left: 0, width: 500, height: 500, borderRadius: "50%", zIndex: 0, pointerEvents: "none", mixBlendMode: "screen" }}>
      <div style={{ width: "100%", height: "100%", borderRadius: "50%", background: "radial-gradient(circle, rgba(198,160,79,0.055) 0%, transparent 68%)" }} />
    </motion.div>
  );
}

// ─── SAFE SCROLL HOOK ─────────────────────────────────────────────────────────
function useSafeScroll(offset: [string, string] = ["start end", "end start"]) {
  const [node, setNode] = useState<HTMLElement | null>(null);
  const ref = useCallback((el: HTMLElement | null) => { setNode(el); }, []);
  const { scrollYProgress } = useScroll({
    ...(node ? { target: { current: node } } : {}),
    offset: offset as any,
  });
  return { ref, scrollYProgress };
}

// ─── 01 HERO ──────────────────────────────────────────────────────────────────
const heroSlides = [
  { img: "/images/hero_bg.png", mainTop: "RESPONSIBLE", mainMid: "MINERAL", mainBot: "DEVELOPMENT" },
  { img: "/images/20 (7).png", mainTop: "STRATEGIC", mainMid: "GOLD", mainBot: "OPERATIONS" },
  { img: "/images/20 (2).png", mainTop: "SUSTAINABLE", mainMid: "GREENFIELD", mainBot: "GROWTH" },
  { img: "/images/Image_fx (7).png", mainTop: "INSTITUTIONAL", mainMid: "MINING", mainBot: "EXCELLENCE" }
];

function StatBox({ s }: { s: { v: string; s: string } }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div 
      whileHover={{ y: -5 }} 
      style={{ cursor: "default" }} 
      onMouseEnter={() => setHovered(true)} 
      onMouseLeave={() => setHovered(false)}
    >
      <div style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(20px, 2.5vw, 28px)", fontWeight: 700, marginBottom: 8, color: hovered ? G : "rgba(255,255,255,0.9)", transition: "color 0.3s ease" }}>{s.v}</div>
      <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 700 }}>{s.s}</div>
    </motion.div>
  );
}

function Hero() {
  const { scrollYProgress } = useScroll();
  const bgY = useTransform(scrollYProgress, [0, 1], [0, 200]);
  const opac = useTransform(scrollYProgress, [0, 0.4], [1, 0]);
  const textY = useTransform(scrollYProgress, [0, 0.4], [0, 100]);
  const stats = [{ v: "Gold", s: "Primary Focus" }, { v: "Africa", s: "Regional Scope" }, { v: "6+", s: "Business Divisions" }, { v: "Sudan", s: "Strategic Hub" }];
  
  const [currentSlide, setCurrentSlide] = useState(0);

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

  return (
    <section style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center", overflow: "hidden", background: DARK }}>
      <AnimatePresence mode="popLayout">
        <motion.div 
          key={currentSlide}
          initial={{ opacity: 0, scale: 1.1 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 1.5, ease: "easeOut" }}
          style={{ y: bgY, position: "absolute", inset: 0, backgroundImage: `url('${heroSlides[currentSlide].img}')`, backgroundSize: "cover", backgroundPosition: "center" }} 
        />
      </AnimatePresence>
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, rgba(7,7,10,0.4) 0%, ${DARK} 90%)`, zIndex: 1 }} />
      <div style={{ position: "absolute", inset: 0, opacity: 0.1, backgroundImage: `radial-gradient(${G} 1px, transparent 1px)`, backgroundSize: "40px 40px", zIndex: 1 }} />
      
      <motion.div className="resp-container" style={{ opacity: opac, y: textY, position: "relative", zIndex: 10, width: "100%", maxWidth: 1400, margin: "0 auto", padding: "140px 64px 80px" }}>
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.7 }} style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 36 }}>
          <span style={{ display: "block", width: 40, height: 1, background: G }} />
          <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.45em", fontWeight: 700, color: G }}>Institutional Group — Africa &amp; Sudan</span>
        </motion.div>
        
        <div style={{ maxWidth: 1000, marginBottom: 48, minHeight: 240 }}>
          <AnimatePresence mode="wait">
            <motion.h1 
              key={currentSlide}
              initial={{ opacity: 0, y: 30 }} 
              animate={{ opacity: 1, y: 0 }} 
              exit={{ opacity: 0, y: -30 }}
              transition={{ duration: 0.8 }} 
              style={{ fontFamily: "'Syncopate', sans-serif", fontWeight: 700, lineHeight: 1, letterSpacing: "-0.02em", fontSize: "clamp(28px, 6vw, 76px)", textTransform: "uppercase", margin: 0 }}
            >
              {heroSlides[currentSlide].mainTop}<br />
              {heroSlides[currentSlide].mainMid}<br />
              <span style={goldText}>{heroSlides[currentSlide].mainBot}</span>
            </motion.h1>
          </AnimatePresence>
        </div>
        
        <motion.p className="lead-p" initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.9, delay: 0.42 }} style={{ fontSize: 18, lineHeight: 1.8, maxWidth: 600, marginBottom: 60, color: "rgba(255,255,255,0.45)", fontWeight: 300 }}>Crown Rock Minerals advances gold exploration, greenfield development, and sustainable operations across Sudan and high-potential African regions.</motion.p>
        
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.62 }} style={{ display: "flex", gap: 24, flexWrap: "wrap", marginBottom: 100 }}>
          <GoldBtn dark href="/about">Corporate Profile <Arrow /></GoldBtn>
          <GoldBtn dark={false} href="/divisions">Operational Network</GoldBtn>
        </motion.div>
        
        <motion.div className="stats-grid" initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.9, delay: 0.95 }} style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 40, borderTop: "1px solid rgba(255,255,255,0.05)", paddingTop: 48 }}>
          {stats.map((s) => (<StatBox key={s.v} s={s} />))}
        </motion.div>
      </motion.div>
    </section>
  );
}

// ─── 02 TRUST STRIP ───────────────────────────────────────────────────────────
function TrustStrip() {
  const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-40px" });
  const items = [
    { icon: "⛰", title: "Greenfield", desc: "Building mining value" },
    { icon: "◆", title: "Execution", desc: "Disciplined operations" },
    { icon: "◉", title: "Geology", desc: "Deep regional understanding" },
    { icon: "♾", title: "E S G", desc: "Sustainability-led growth" },
  ];
  return (
    <section className="resp-section" style={{ background: DARK, borderBottom: "1px solid rgba(255,255,255,0.05)" }}>
      <div ref={ref} className="stats-grid resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
        {items.map((item, i) => (
          <motion.div key={item.title} initial={{ opacity: 0, y: 10 }} animate={isInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.4, delay: i * 0.1 }} style={{ display: "flex", alignItems: "center", gap: 20, padding: "40px 0", borderRight: i < 3 ? "1px solid rgba(255,255,255,0.05)" : "none", justifyContent: "center" }}>
            <span style={{ fontSize: 18, color: G }}>{item.icon}</span>
            <div>
              <h3 style={{ fontSize: 11, fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.2em", color: "#FFF", margin: 0 }}>{item.title}</h3>
              <p style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", color: "rgba(255,255,255,0.3)", margin: "4px 0 0" }}>{item.desc}</p>
            </div>
          </motion.div>
        ))}
      </div>
    </section>
  );
}

// ─── 03 ABOUT (SPLIT EDITORIAL) ─────────────────────────────────
function About() {
  const { ref, scrollYProgress } = useSafeScroll(["start end", "end start"]);
  const imgY = useTransform(scrollYProgress, [0, 1], [-50, 50]);

  return (
    <section className="resp-section" ref={ref} style={{ background: DARK, padding: "160px 0", position: "relative", overflow: "hidden" }}>
      <div className="split-grid resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 100, alignItems: "stretch" }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "40px 0" }}>
          <Eyebrow>Strategic Foundation</Eyebrow>
          <SectionHeading>Built to Unlock<br /><span style={goldText}>Mineral Value</span></SectionHeading>
          <GoldLine />
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.8 }}>
            <p className="lead-p" style={{ fontSize: 18, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", fontWeight: 300, marginBottom: 32 }}>Crown Rock Minerals is engineered to unlock strategic value through disciplined exploration, responsible development, and long-term operational thinking.</p>
            <p style={{ fontSize: 15, lineHeight: 1.8, color: "rgba(255,255,255,0.25)", fontWeight: 300, marginBottom: 48 }}>Operating across Sudan and high-potential African regions, we bridge the gap between geological reconnaissance and scalable production infrastructure.</p>
            <GoldBtn dark href="/about">Corporate Profile <Arrow /></GoldBtn>
          </motion.div>
        </div>

        <div className="split-img" style={{ position: "relative", width: "100%", display: "flex" }}>
          <motion.div style={{ position: "relative", width: "100%", height: "100%", minHeight: "450px", borderRadius: 4, overflow: "hidden", border: `3px solid ${G}`, boxShadow: GSHADOW_DARK }} initial={{ opacity: 0, x: 40 }} whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 1 }}>
            <img 
              style={{ width: "100%", height: "100%", display: "block", objectFit: "cover" }} 
              src="/images/blog_strategic_vision.png" 
              alt="Mining Excellence" 
            />
          </motion.div>
          <div style={{ position: "absolute", bottom: -40, left: -40, padding: 40, background: DARK2, border: `1px solid ${G}20`, borderRadius: 4, zIndex: 5, boxShadow: GSHADOW_DARK }}>
            <div style={{ fontSize: 40, fontWeight: 700, color: G, lineHeight: 1, marginBottom: 8 }}>10+</div>
            <div style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: "0.2em", color: "rgba(255,255,255,0.4)", whiteSpace: "nowrap" }}>Concession Targets</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 04 DIVISIONS (INSTITUTIONAL GRID) ──────────────────────────
function DivisionBox({ d, i, isInView }: { d: any, i: number, isInView: boolean }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.5, delay: i * 0.1 }}>
      <Link href={`/divisions#${d.slug}`} style={{ textDecoration: "none" }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
        <motion.div 
          whileHover={{ y: -5 }}
          style={{ display: "flex", flexDirection: "column", height: "100%", padding: "40px", background: hovered ? G : "rgba(255,255,255,0.015)", border: `1px solid ${hovered ? G : "rgba(255,255,255,0.06)"}`, borderRadius: 4, transition: "background 0.3s, border 0.3s", position: "relative", overflow: "hidden" }}
        >
          <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: 2, background: i === 0 && !hovered ? G : "transparent" }} />
          <div style={{ fontSize: 10, fontWeight: 700, color: hovered ? "#000" : G, letterSpacing: "0.2em", marginBottom: 20, transition: "0.3s" }}>{d.num}</div>
          <h3 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: 13, fontWeight: 700, color: hovered ? "#000" : "#FFF", marginBottom: 12, letterSpacing: "0.02em", textTransform: "uppercase", transition: "0.3s" }}>{d.title}</h3>
          <p style={{ fontSize: 12, lineHeight: 1.6, color: hovered ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.4)", margin: 0, fontWeight: 300, transition: "0.3s" }}>{d.description}</p>
          <div style={{ marginTop: "auto", paddingTop: 32, display: "flex", alignItems: "center", gap: 8, fontSize: 9, textTransform: "uppercase", letterSpacing: "0.2em", color: hovered ? "#000" : G, fontWeight: 700, transition: "0.3s" }}>
            Protocol Access <Arrow />
          </div>
        </motion.div>
      </Link>
    </motion.div>
  );
}

function Divisions() {
  const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-80px" });
  return (
    <section className="resp-section" style={{ background: DARK2, padding: "160px 0", position: "relative" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(circle, ${G}15 1px, transparent 1px)`, backgroundSize: "40px 40px", opacity: 0.1 }} />
      <div className="resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        <div className="split-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
          
          <div className="sticky-col" style={{ position: "sticky", top: 160 }}>
            <div style={{ marginBottom: 40 }}>
              <Eyebrow>Business Divisions</Eyebrow>
              <SectionHeading>Integrated<br /><span style={goldText}>Mining Ecosystem</span></SectionHeading>
            </div>
            <motion.div style={{ position: "relative", borderRadius: 4, overflow: "hidden", border: `2px solid ${G}40`, boxShadow: GSHADOW_DARK }} initial={{ opacity: 0, x: -40 }} whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 1 }}>
               <img src="/images/sdsdsd.png" style={{ width: "100%", height: "auto", display: "block", objectFit: "cover" }} alt="Divisions Ecosystem" />
            </motion.div>
          </div>

          <div ref={ref} className="child-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
            {divisions.map((d, i) => (
              <DivisionBox key={d.slug} d={d} i={i} isInView={isInView} />
            ))}
          </div>

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

// ─── 05 GREENFIELD (OPERATIONAL PROTOCOL) ──────────────────────
function GreenfieldStep({ s, i, isInView }: { s: typeof greenfieldSteps[0]; i: number; isInView: boolean }) {
  const [hovered, setHovered] = useState(false);
  const icons = ["⛰", "🎯", "📐", "🏗", "⚡"];
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.7, delay: i * 0.12 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: "relative",
        padding: "48px 40px 48px 48px",
        background: hovered ? `linear-gradient(135deg, rgba(198,160,79,0.08) 0%, ${DARK2} 100%)` : DARK2,
        border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.04)'}`,
        borderRadius: 8,
        overflow: "hidden",
        transition: "all 0.4s ease",
        boxShadow: hovered ? GSHADOW_HOVER_DARK : "none",
      }}
    >
      {/* Animated gold top line */}
      <motion.div
        animate={{ width: hovered ? "100%" : "0%" }}
        transition={{ duration: 0.6 }}
        style={{ position: "absolute", top: 0, left: 0, height: 2, background: `linear-gradient(90deg, ${G}, ${GL}, ${G})`, zIndex: 2 }}
      />

      {/* Subtle corner glow */}
      <motion.div
        animate={{ opacity: hovered ? 0.15 : 0 }}
        transition={{ duration: 0.4 }}
        style={{ position: "absolute", top: -40, right: -40, width: 200, height: 200, borderRadius: "50%", background: `radial-gradient(circle, ${G} 0%, transparent 70%)`, zIndex: 0 }}
      />

      <div style={{ position: "relative", zIndex: 1 }}>
        {/* Header row: number circle + icon + title */}
        <div style={{ display: "flex", alignItems: "center", gap: 20, marginBottom: 20 }}>
          <motion.div
            animate={{ scale: hovered ? 1.1 : 1, borderColor: hovered ? G : "rgba(255,255,255,0.1)" }}
            transition={{ duration: 0.3 }}
            style={{
              width: 52, height: 52, borderRadius: "50%",
              display: "flex", alignItems: "center", justifyContent: "center",
              border: `2px solid rgba(255,255,255,0.1)`,
              background: hovered ? `${G}15` : "rgba(255,255,255,0.02)",
              transition: "background 0.3s, border 0.3s",
              flexShrink: 0,
            }}
          >
            <span style={{ fontFamily: "'Syncopate', sans-serif", fontSize: 14, fontWeight: 700, color: hovered ? G : "rgba(255,255,255,0.5)", transition: "color 0.3s" }}>{s.step}</span>
          </motion.div>

          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ fontSize: 18, filter: hovered ? "grayscale(0)" : "grayscale(1)", transition: "filter 0.3s" }}>{icons[i]}</span>
              <h3 style={{
                fontFamily: "'Syncopate', sans-serif",
                fontSize: 15,
                fontWeight: 700,
                color: hovered ? "#FFF" : "rgba(255,255,255,0.85)",
                textTransform: "uppercase",
                letterSpacing: "0.08em",
                margin: 0,
                transition: "color 0.3s"
              }}>{s.title}</h3>
            </div>
          </div>
        </div>

        {/* Description */}
        <motion.p
          animate={{ opacity: hovered ? 0.7 : 0.4 }}
          transition={{ duration: 0.3 }}
          style={{ fontSize: 14, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", margin: 0, paddingLeft: 72, fontWeight: 300 }}
        >{s.desc}</motion.p>

        {/* Progress bar */}
        <div style={{ marginTop: 20, paddingLeft: 72 }}>
          <div style={{ width: "100%", height: 2, background: "rgba(255,255,255,0.04)", borderRadius: 1, overflow: "hidden" }}>
            <motion.div
              animate={{ width: hovered ? "100%" : `${(i + 1) * 20}%` }}
              transition={{ duration: 0.8, ease: "easeOut" }}
              style={{ height: "100%", background: `linear-gradient(90deg, ${GD}, ${G}, ${GL})`, borderRadius: 1 }}
            />
          </div>
        </div>
      </div>
    </motion.div>
  );
}

function Greenfield() {
  const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-80px" });
  return (
    <section style={{ background: DARK, padding: "0 0 160px 0", position: "relative", overflow: "hidden" }}>
      {/* Full-width cinematic header */}
      <div style={{ position: "relative", height: 400, overflow: "hidden", marginBottom: 100 }}>
        <motion.div
          initial={{ scale: 1.1 }}
          whileInView={{ scale: 1 }}
          transition={{ duration: 1.5, ease: "easeOut" }}
          viewport={{ once: true }}
          style={{ position: "absolute", inset: 0 }}
        >
          <img src="/images/greenfield_site.png" style={{ width: "100%", height: "100%", objectFit: "cover" }} alt="Greenfield Strategy" />
        </motion.div>
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, ${DARK} 0%, transparent 30%, transparent 50%, ${DARK} 100%)` }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, ${DARK} 0%, transparent 40%, transparent 60%, ${DARK} 100%)` }} />

        {/* Centered header content */}
        <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", zIndex: 2 }}>
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.8 }}>
            <Eyebrow>Our Approach</Eyebrow>
          </motion.div>
          <motion.h2 initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 1, delay: 0.1 }}
            style={{ fontFamily: "'Syncopate', sans-serif", fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em", fontSize: "clamp(32px, 5vw, 64px)", color: "#FFF", textAlign: "center", textTransform: "uppercase", margin: 0 }}
          >
            Greenfield <span style={goldText}>Protocol</span>
          </motion.h2>
          <motion.p className="lead-p" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ duration: 0.8, delay: 0.3 }}
            style={{ marginTop: 24, fontSize: 16, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", fontWeight: 300, textAlign: "center", maxWidth: 600 }}
          >Development begins with disciplined geological understanding and evolves through structured, multi-phase technical roadmaps.</motion.p>
        </div>
      </div>

      {/* Background patterns */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.02, backgroundImage: `linear-gradient(${G} 1px, transparent 1px), linear-gradient(90deg, ${G} 1px, transparent 1px)`, backgroundSize: "100px 100px" }} />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        {/* Horizontal progress indicator */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="horizontal-progress"
          style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 0, marginBottom: 80 }}
        >
          {greenfieldSteps.map((s, i) => (
            <div key={s.step} style={{ display: "flex", alignItems: "center" }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: `linear-gradient(135deg, ${G}, ${GL})`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, fontWeight: 700, color: "#000",
                  boxShadow: `0 0 20px ${G}40`
                }}>{s.step}</div>
                <span style={{ fontSize: 8, textTransform: "uppercase", letterSpacing: "0.15em", color: "rgba(255,255,255,0.3)", fontWeight: 700, whiteSpace: "nowrap", maxWidth: 100, textAlign: "center", lineHeight: 1.3 }}>{s.title}</span>
              </div>
              {i < greenfieldSteps.length - 1 && (
                <div style={{ width: 80, height: 1, background: `linear-gradient(90deg, ${G}60, ${G}20)`, margin: "0 8px", marginBottom: 20 }} />
              )}
            </div>
          ))}
        </motion.div>

        {/* Step cards */}
        <div ref={ref} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {greenfieldSteps.map((s, i) => (
            <GreenfieldStep key={s.step} s={s} i={i} isInView={isInView} />
          ))}
        </div>

        {/* Quote callout */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          style={{
            marginTop: 80,
            padding: "48px 56px",
            background: `linear-gradient(135deg, ${DARK2} 0%, rgba(198,160,79,0.04) 100%)`,
            border: `1px solid ${G}20`,
            borderRadius: 8,
            position: "relative",
            overflow: "hidden",
            textAlign: "center"
          }}
        >
          {/* Glow behind quote */}
          <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 400, height: 400, borderRadius: "50%", background: `radial-gradient(circle, ${G}08 0%, transparent 70%)`, pointerEvents: "none" }} />
          
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 40, height: 1, background: `linear-gradient(90deg, transparent, ${G})` }} />
              <div style={{ width: 7, height: 7, transform: "rotate(45deg)", background: G }} />
              <div style={{ width: 40, height: 1, background: `linear-gradient(270deg, transparent, ${G})` }} />
            </div>
          </div>
          <div style={{ fontSize: 11, fontWeight: 700, color: G, letterSpacing: "0.25em", marginBottom: 20, textTransform: "uppercase", position: "relative" }}>Strategic Focus</div>
          <p className="lead-p" style={{ fontSize: 20, color: "rgba(255,255,255,0.6)", lineHeight: 1.7, fontStyle: "italic", fontWeight: 300, maxWidth: 600, margin: "0 auto", position: "relative" }}>&ldquo;We build from geological truth toward sustainable, long-term industrial production.&rdquo;</p>
        </motion.div>
      </div>
    </section>
  );
}

// ─── 06 AFRICA (STRATEGIC FRONTIER) ───────────────────────────
function RegionBox({ r, i }: { r: { label: string; desc: string; num: string }; i: number }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div 
      key={r.label} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6, delay: i * 0.1 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ 
        padding: "48px 32px", 
        background: hovered ? G : "rgba(0,0,0,0.3)", 
        border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.06)'}`, 
        borderRadius: 4, 
        backdropFilter: "blur(10px)", 
        textAlign: "center", 
        position: "relative",
        transition: "all 0.4s ease",
        transform: hovered ? "translateY(-10px)" : "translateY(0)",
        boxShadow: hovered ? `0 20px 50px rgba(198,160,79,0.3)` : "none",
        cursor: "pointer"
      }}
    >
      <div style={{ fontSize: 10, fontWeight: 700, color: hovered ? "#000" : G, letterSpacing: "0.2em", marginBottom: 24, transition: "color 0.3s" }}>{r.num}</div>
      <h3 style={{ fontSize: 16, fontWeight: 700, color: hovered ? "#000" : "#FFF", marginBottom: 12, transition: "color 0.3s" }}>{r.label}</h3>
      <p style={{ fontSize: 13, color: hovered ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.4)", lineHeight: 1.5, margin: 0, transition: "color 0.3s" }}>{r.desc}</p>
      <div style={{ position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", width: hovered ? "60px" : "40px", height: hovered ? "2px" : "1px", background: hovered ? "#000" : G, opacity: hovered ? 0.5 : 0.3, transition: "all 0.3s" }} />
    </motion.div>
  );
}

function Africa() {
  const regions = [
    { label: "Sudan 🇸🇩", desc: "Strategic operational hub", num: "01" },
    { label: "East Africa", desc: "Growth exploration zone", num: "02" },
    { label: "West Africa", desc: "Resource evaluation", num: "03" },
    { label: "North Africa", desc: "Partnership development", num: "04" }
  ];
  
  return (
    <section className="resp-section" style={{ background: DARK2, padding: "160px 0", position: "relative", overflow: "hidden" }}>
       <div style={{ position: "absolute", inset: 0, backgroundImage: "url('/images/878787.png')", backgroundSize: "cover", backgroundPosition: "center", opacity: 0.25 }} />
       <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, ${DARK2}CC 0%, transparent 40%, transparent 60%, ${DARK2}CC 100%)` }} />
       <div className="resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
         <div style={{ textAlign: "center", marginBottom: 80 }}>
           <Eyebrow>Regional Presence</Eyebrow>
           <SectionHeading center>Africa & Sudan: <span style={goldText}>Strategic Frontier</span></SectionHeading>
         </div>

         <div className="stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
           {regions.map((r, i) => (
             <RegionBox key={r.label} r={r} i={i} />
           ))}
         </div>

         <div style={{ marginTop: 80, textAlign: "center" }}>
           <GoldBtn dark={false} href="/regions">Explore Regional Strategy <Arrow /></GoldBtn>
         </div>
       </div>
    </section>
  );
}

// ─── 07 SUSTAINABILITY (CORE PILLARS) ────────────────────────
function SustainabilityCard({ p, i, isInView }: { p: typeof sustainabilityPillars[0], i: number, isInView: boolean }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6, delay: i * 0.1 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: "40px 32px",
        background: hovered ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.4)",
        border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.08)'}`,
        borderRadius: 6,
        backdropFilter: "blur(12px)",
        position: "relative",
        overflow: "hidden",
        cursor: "pointer",
        transition: "all 0.4s ease",
        transform: hovered ? "translateY(-8px)" : "translateY(0)",
        boxShadow: hovered ? `0 20px 40px rgba(0,0,0,0.5), inset 0 0 0 1px ${G}40` : "none"
      }}
    >
      {/* Animated top edge */}
      <motion.div
        animate={{ width: hovered ? "100%" : "0%" }}
        transition={{ duration: 0.5 }}
        style={{ position: "absolute", top: 0, left: 0, height: 2, background: `linear-gradient(90deg, ${G}, ${GL})` }}
      />
      
      {/* Corner Glow */}
      <motion.div
        animate={{ opacity: hovered ? 1 : 0 }}
        transition={{ duration: 0.5 }}
        style={{ position: "absolute", bottom: -50, right: -50, width: 150, height: 150, background: `radial-gradient(circle, ${G}20 0%, transparent 70%)`, borderRadius: "50%", pointerEvents: "none" }}
      />

      <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", height: "100%" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
          <motion.div
            animate={{ scale: hovered ? 1.1 : 1, rotate: hovered ? 5 : 0 }}
            transition={{ type: "spring", stiffness: 300 }}
            style={{ fontSize: 26, filter: hovered ? "grayscale(0)" : "grayscale(1) opacity(0.8)", transition: "all 0.3s" }}
          >
            {p.icon}
          </motion.div>
          <div style={{ fontSize: 10, fontWeight: 700, color: G, letterSpacing: "0.2em", opacity: 0.5 }}>0{i+1}</div>
        </div>

        <h3 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: 14, fontWeight: 700, color: hovered ? "#FFF" : "rgba(255,255,255,0.9)", marginBottom: 16, textTransform: "uppercase", letterSpacing: "0.05em", lineHeight: 1.4, transition: "color 0.3s" }}>
          {p.title}
        </h3>
        
        <p style={{ fontSize: 13, lineHeight: 1.7, color: "rgba(255,255,255,0.5)", margin: 0, fontWeight: 300 }}>
          {p.description}
        </p>
      </div>
    </motion.div>
  );
}

function Sustainability() {
  const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-80px" });
  return (
    <section className="resp-section" style={{ position: "relative", padding: "160px 0", overflow: "hidden" }}>
      {/* Cinematic Background */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <img src="/images/sustainability_bg.png" alt="Sustainability Background" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        {/* Gradients to blend with section above and below */}
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, ${DARK2} 0%, transparent 20%, transparent 80%, ${DARK2} 100%)` }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, ${DARK2}FA 0%, ${DARK2}D0 30%, ${DARK2}80 100%)` }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.4)" }} /> {/* Overall darkening for text readability */}
      </div>

      <div className="resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        {/* Header Area */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 80, flexWrap: "wrap", gap: 40 }}>
          <div style={{ maxWidth: 600 }}>
            <Eyebrow>ESG Framework</Eyebrow>
            <SectionHeading>Embedded<br /><span style={goldText}>Governance</span></SectionHeading>
            <p className="lead-p" style={{ marginTop: 24, fontSize: 18, lineHeight: 1.8, color: "rgba(255,255,255,0.7)", fontWeight: 300, textShadow: "0 2px 10px rgba(0,0,0,0.5)" }}>
              Sustainability is not an accessory to our operations. It is the primary framework through which we measure industrial success.
            </p>
          </div>
          <div>
            <GoldBtn dark={false} href="/sustainability">Sustainability Commitment <Arrow /></GoldBtn>
          </div>
        </div>

        {/* 3-Column Compact Grid */}
        <div ref={ref} className="gov-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {sustainabilityPillars.map((p, i) => (
            <SustainabilityCard key={p.title} p={p} i={i} isInView={isInView} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 08 INVESTMENT (STRATEGIC HIGHLIGHTS) ─────────────────────
function InvestmentCard({ item, i }: { item: typeof investmentHighlights[0], i: number }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div
      className="marquee-card"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ 
        width: 380, // Fixed width for marquee items
        padding: "40px", 
        background: hovered ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.2)", 
        border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.06)'}`, 
        borderRadius: 8,
        backdropFilter: "blur(10px)",
        position: "relative",
        overflow: "hidden",
        flexShrink: 0,
        transition: "all 0.4s ease",
        transform: hovered ? "scale(1.02)" : "scale(1)",
        boxShadow: hovered ? `0 20px 40px rgba(0,0,0,0.5), inset 0 0 0 1px ${G}20` : "none"
      }}
    >
      <motion.div
        animate={{ opacity: hovered ? 1 : 0 }}
        transition={{ duration: 0.4 }}
        style={{ position: "absolute", top: 0, right: 0, width: 100, height: 100, background: `radial-gradient(circle at top right, ${G}30 0%, transparent 70%)` }}
      />
      
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 24 }}>
        <div style={{ fontFamily: "'Syncopate', sans-serif", fontSize: 24, fontWeight: 700, color: hovered ? "#FFF" : "rgba(255,255,255,0.1)", transition: "color 0.4s" }}>
          0{i + 1}
        </div>
        <div style={{ width: 40, height: 1, background: hovered ? G : "rgba(255,255,255,0.1)", transition: "background 0.4s" }} />
      </div>

      <h3 style={{ fontSize: 16, fontWeight: 700, color: hovered ? G : "rgba(255,255,255,0.9)", marginBottom: 16, lineHeight: 1.4, transition: "color 0.3s" }}>
        {item.title}
      </h3>
      <p style={{ fontSize: 13, lineHeight: 1.7, color: "rgba(255,255,255,0.4)", margin: 0 }}>
        {item.description}
      </p>
    </motion.div>
  );
}

function Investment() {
  const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-80px" });
  return (
    <section className="resp-section" style={{ background: DARK2, padding: "160px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.02, backgroundImage: `radial-gradient(${G} 1px, transparent 1px)`, backgroundSize: "30px 30px" }} />
      <div className="resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        
        {/* Top Content Row */}
        <div className="split-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100, alignItems: "center", marginBottom: 80 }}>
           <motion.div style={{ position: "relative", borderRadius: 4, overflow: "hidden", border: `2px solid ${G}20`, boxShadow: GSHADOW_DARK }} initial={{ opacity: 0, x: -40 }} whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 1 }}>
              <img src="/images/Image_fx (6).png" style={{ width: "100%", height: "auto", display: "block" }} alt="Investment Excellence" />
           </motion.div>
           <div>
            <Eyebrow>Investors</Eyebrow>
            <SectionHeading>Industrial<br /><span style={goldText}>Relevance</span></SectionHeading>
            <p className="lead-p" style={{ marginTop: 32, fontSize: 18, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", fontWeight: 300, marginBottom: 48 }}>We invite institutional focus into a portfolio structured for enduring regional impact and technical excellence.</p>
            <GoldBtn dark href="/investors">Investor Center <Arrow /></GoldBtn>
          </div>
        </div>

        {/* Infinite Marquee Slider (Bounded width) */}
        <div ref={ref} style={{ position: "relative", width: "100%", overflow: "hidden", marginTop: 40, padding: "20px 0" }}>
          {/* Fade Masks for seamless loop effect inside container */}
          <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: "100px", background: `linear-gradient(to right, ${DARK2}, transparent)`, zIndex: 2, pointerEvents: "none" }} />
          <div style={{ position: "absolute", top: 0, bottom: 0, right: 0, width: "100px", background: `linear-gradient(to left, ${DARK2}, transparent)`, zIndex: 2, pointerEvents: "none" }} />

          {isInView && (
            <motion.div
              animate={{ x: ["0%", "-50%"] }}
              transition={{ ease: "linear", duration: 40, repeat: Infinity }}
              style={{ display: "flex", gap: 24, width: "max-content" }}
            >
              {/* Duplicate array twice for seamless infinite loop */}
              {[...investmentHighlights, ...investmentHighlights].map((item, i) => (
                <InvestmentCard key={i} item={item} i={i % investmentHighlights.length} />
              ))}
            </motion.div>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── CAPITAL MARKETS & LISTING STRATEGY (CANADIAN FLAG) ────────────────
const capitalMarketCards = [
  {
    num: "01",
    title: "Target Markets",
    items: ["Toronto Stock Exchange (TSX)", "International mining-focused exchanges"],
    icon: "📊",
  },
  {
    num: "02",
    title: "Internal Capabilities",
    items: ["Technical documentation preparation", "Financial modeling and valuation", "Corporate structuring"],
    icon: "⚙️",
  },
  {
    num: "03",
    title: "Structuring Approach",
    items: ["Consolidation of assets into structured entities", "Preparation for public listing and investor entry", "Alignment with international reporting and governance standards"],
    icon: "🏛️",
  },
  {
    num: "04",
    title: "External Alignment",
    items: ["Coordination with advisors and consultants", "Alignment with regulatory frameworks", "Engagement with institutional investors"],
    icon: "🤝",
  },
  {
    num: "05",
    title: "Strategic Objective",
    items: ["Consolidation of assets into structured entities", "Preparation for public listing and investor entry", "Alignment with international reporting and governance standards"],
    icon: "🎯",
  },
  {
    num: "06",
    title: "Financial Readiness",
    items: ["Supported by strong banking relationships", "Ability to structure financing alongside listing"],
    icon: "💰",
  },
];

function CapitalMarketCard({ card, i, isInView }: { card: typeof capitalMarketCards[0]; i: number; isInView: boolean }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6, delay: i * 0.1 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: "36px 32px",
        background: hovered ? "rgba(0,0,0,0.75)" : "rgba(0,0,0,0.45)",
        border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.08)'}`,
        borderRadius: 8,
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        position: "relative",
        overflow: "hidden",
        cursor: "default",
        transition: "all 0.4s ease",
        transform: hovered ? "translateY(-6px)" : "translateY(0)",
        boxShadow: hovered ? `0 20px 50px rgba(0,0,0,0.6), inset 0 0 0 1px ${G}30` : "0 4px 20px rgba(0,0,0,0.2)",
      }}
    >
      {/* Animated gold top accent */}
      <motion.div
        animate={{ width: hovered ? "100%" : "0%" }}
        transition={{ duration: 0.5 }}
        style={{ position: "absolute", top: 0, left: 0, height: 2, background: `linear-gradient(90deg, ${G}, ${GL}, ${G})`, zIndex: 2 }}
      />

      {/* Corner glow */}
      <motion.div
        animate={{ opacity: hovered ? 0.2 : 0 }}
        transition={{ duration: 0.4 }}
        style={{ position: "absolute", top: -40, right: -40, width: 160, height: 160, background: `radial-gradient(circle, ${G} 0%, transparent 70%)`, borderRadius: "50%", pointerEvents: "none" }}
      />

      <div style={{ position: "relative", zIndex: 1 }}>
        {/* Header: num + icon + title */}
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }}>
          <div style={{
            width: 44, height: 44, borderRadius: "50%",
            display: "flex", alignItems: "center", justifyContent: "center",
            background: hovered ? `${G}20` : "rgba(255,255,255,0.04)",
            border: `1.5px solid ${hovered ? G : 'rgba(255,255,255,0.1)'}`,
            transition: "all 0.3s", flexShrink: 0,
          }}>
            <span style={{ fontSize: 18 }}>{card.icon}</span>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 9, fontWeight: 700, color: G, letterSpacing: "0.2em", marginBottom: 4 }}>{card.num}</div>
            <h3 style={{
              fontFamily: "'Syncopate', sans-serif", fontSize: 13, fontWeight: 700,
              color: hovered ? "#FFF" : "rgba(255,255,255,0.9)",
              textTransform: "uppercase", letterSpacing: "0.06em", margin: 0,
              transition: "color 0.3s",
            }}>{card.title}</h3>
          </div>
        </div>

        {/* Bullet items */}
        <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {card.items.map((item, idx) => (
            <li key={idx} style={{
              display: "flex", alignItems: "flex-start", gap: 12,
              fontSize: 13, lineHeight: 1.7, color: "rgba(255,255,255,0.55)",
              fontWeight: 300, marginBottom: idx < card.items.length - 1 ? 8 : 0,
            }}>
              <span style={{
                display: "inline-block", width: 5, height: 5, borderRadius: "50%",
                background: hovered ? G : "rgba(255,255,255,0.2)", flexShrink: 0,
                marginTop: 8, transition: "background 0.3s",
              }} />
              {item}
            </li>
          ))}
        </ul>
      </div>
    </motion.div>
  );
}

function CapitalMarkets() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });

  return (
    <section className="resp-section" style={{ position: "relative", padding: "160px 0", overflow: "hidden" }}>
      {/* Canadian Flag Background */}
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <img
          src="/images/canada_flag_bg.png"
          alt="Canadian Flag Background"
          style={{ width: "100%", height: "100%", objectFit: "cover" }}
        />
        {/* Dark overlay chain for readability */}
        <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.55)" }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, ${DARK} 0%, transparent 15%, transparent 85%, ${DARK2} 100%)` }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(135deg, rgba(80,0,0,0.25) 0%, transparent 50%, rgba(80,0,0,0.2) 100%)` }} />
        {/* Subtle dot pattern overlay */}
        <div style={{ position: "absolute", inset: 0, opacity: 0.04, backgroundImage: `radial-gradient(${G} 1px, transparent 1px)`, backgroundSize: "40px 40px" }} />
      </div>

      <div className="resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        {/* Header Row */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 80, flexWrap: "wrap", gap: 40 }}>
          <div style={{ maxWidth: 700 }}>
            <Eyebrow>Capital Markets</Eyebrow>
            <motion.h2
              initial={{ opacity: 0, y: 32 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              style={{
                fontFamily: "'Syncopate', sans-serif", fontWeight: 700,
                lineHeight: 1.1, letterSpacing: "-0.02em",
                fontSize: "clamp(24px, 3.5vw, 48px)",
                color: "#FFF", textTransform: "uppercase", margin: 0,
              }}
            >
              Capital Markets &<br />
              <span style={goldText}>Listing Strategy</span>
            </motion.h2>
            <motion.p
              className="lead-p"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.2 }}
              style={{
                marginTop: 24, fontSize: 17, lineHeight: 1.8,
                color: "rgba(255,255,255,0.55)", fontWeight: 300,
                textShadow: "0 2px 10px rgba(0,0,0,0.5)",
              }}
            >
              Positioning Mining Assets for Institutional Capital Access — Crown Rock Minerals
              is strategically structured for potential listing on the Toronto Stock Exchange (TSX)
              and international mining-focused exchanges.
            </motion.p>
          </div>

          {/* Logo Badge */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.3 }}
            style={{
              display: "flex", flexDirection: "column", alignItems: "center",
              gap: 14, padding: "28px 36px",
              background: "rgba(0,0,0,0.5)", border: `1px solid ${G}30`,
              borderRadius: 8, backdropFilter: "blur(16px)",
              boxShadow: `0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px ${G}15`,
            }}
          >
            <img
              src="/images/logo.png"
              alt="Crown Rock Minerals"
              style={{ width: 70, height: "auto", filter: "brightness(1.2)" }}
            />
            <div style={{ textAlign: "center" }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: G, letterSpacing: "0.15em", textTransform: "uppercase" }}>Crown Rock</div>
              <div style={{ fontSize: 8, fontWeight: 600, color: "rgba(255,255,255,0.35)", letterSpacing: "0.2em", textTransform: "uppercase", marginTop: 2 }}>Minerals</div>
            </div>
          </motion.div>
        </div>

        {/* === 2x3 Strategy Cards Grid === */}
        <div ref={ref} className="capital-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {capitalMarketCards.map((card, i) => (
            <CapitalMarketCard key={card.num} card={card} i={i} isInView={isInView} />
          ))}
        </div>

        {/* Bottom CTA */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.3 }}
          style={{
            marginTop: 64, textAlign: "center", padding: "48px 40px",
            background: "rgba(0,0,0,0.45)", border: `1px solid ${G}20`,
            borderRadius: 8, backdropFilter: "blur(16px)",
            position: "relative", overflow: "hidden",
          }}
        >
          {/* Central glow */}
          <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 500, height: 500, borderRadius: "50%", background: `radial-gradient(circle, ${G}08 0%, transparent 70%)`, pointerEvents: "none" }} />
          
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 40, height: 1, background: `linear-gradient(90deg, transparent, ${G})` }} />
              <div style={{ width: 7, height: 7, transform: "rotate(45deg)", background: G }} />
              <div style={{ width: 40, height: 1, background: `linear-gradient(270deg, transparent, ${G})` }} />
            </div>
          </div>
          <p style={{ fontSize: 11, fontWeight: 700, color: G, letterSpacing: "0.25em", textTransform: "uppercase", marginBottom: 16, position: "relative" }}>
            🍁 Toronto Stock Exchange (TSX) Focused
          </p>
          <p className="lead-p" style={{ fontSize: 18, color: "rgba(255,255,255,0.55)", lineHeight: 1.7, fontStyle: "italic", fontWeight: 300, maxWidth: 650, margin: "0 auto 32px", position: "relative" }}>
            &ldquo;Structured for institutional capital access, international governance standards, and long-term shareholder value creation.&rdquo;
          </p>
          <GoldBtn dark href="/investors">Investor Relations <Arrow /></GoldBtn>
        </motion.div>
      </div>
    </section>
  );
}

// ─── 09 NEWS (EDITORIAL UPDATES) ──────────────────────────────
function News() {
  const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-80px" });
  return (
    <section style={{ background: DARK, padding: "160px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 80, flexWrap: "wrap", gap: 20 }}>
          <div><Eyebrow>Media Center</Eyebrow><SectionHeading>News &<br /><span style={goldText}>Insights</span></SectionHeading></div>
          <Link href="/media" style={{ padding: "12px 32px", border: `1px solid ${G}40`, color: G, fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.2em", textDecoration: "none", borderRadius: 2 }}>Archive Center</Link>
        </div>
        <div ref={ref} className="gov-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {newsItems.map((item, i) => (
            <Link key={item.title} href={`/media/${item.slug}`} style={{ textDecoration: "none" }}>
              <motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, delay: i * 0.1 }} whileHover={{ y: -10 }}>
                <div style={{ background: DARK2, border: "1px solid rgba(255,255,255,0.05)", borderRadius: 4, overflow: "hidden" }}>
                  <div style={{ height: 240, background: "#000", position: "relative", overflow: "hidden" }}>
                    <img src={item.img} style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.6 }} alt={item.title} />
                    <div style={{ position: "absolute", inset: 0, background: `linear-gradient(45deg, ${DARK}, transparent)`, opacity: 0.4 }} />
                    <div style={{ position: "absolute", top: 20, left: 20, fontSize: 8, fontWeight: 700, padding: "6px 12px", background: G, color: "#000", textTransform: "uppercase", letterSpacing: "0.2em" }}>{item.category}</div>
                  </div>
                  <div style={{ padding: "40px" }}>
                    <div style={{ fontSize: 11, color: G, opacity: 0.5, marginBottom: 12, fontWeight: 700 }}>{item.date}</div>
                    <h3 style={{ fontSize: 18, fontWeight: 700, color: "#FFF", lineHeight: 1.4, marginBottom: 20 }}>{item.title}</h3>
                    <p style={{ fontSize: 14, lineHeight: 1.7, color: "rgba(255,255,255,0.35)", marginBottom: 32 }}>{item.excerpt}</p>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 9, fontWeight: 700, color: G, textTransform: "uppercase", letterSpacing: "0.2em" }}>Full Transmission <Arrow /></div>
                  </div>
                </div>
              </motion.div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 10 CTA (CINEMATIC FINALE) ────────────────────────────────
function CTA() {
  return (
    <section style={{ background: DARK2, padding: "200px 0", position: "relative", overflow: "hidden", textAlign: "center" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "url('/images/Image_fx (7).png')", backgroundSize: "cover", backgroundPosition: "center", opacity: 0.25 }} />
      <div style={{ position: "absolute", inset: 0, opacity: 0.05, backgroundImage: `radial-gradient(${G} 1px, transparent 1px)`, backgroundSize: "60px 60px" }} />
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 50% 50%, transparent 0%, ${DARK2} 95%)` }} />
      <motion.div 
        animate={{ scale: [1, 1.2, 1], opacity: [0.1, 0.2, 0.1] }} 
        transition={{ duration: 10, repeat: Infinity }}
        style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: "800px", height: "800px", background: `radial-gradient(circle, ${G}20 0%, transparent 70%)`, pointerEvents: "none" }} 
      />
      
      <div style={{ maxWidth: 900, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        <Eyebrow>Strategic Engagement</Eyebrow>
        <SectionHeading center style={{ fontSize: "clamp(32px, 6vw, 72px)", marginBottom: 40 }}>Partner with the<br /><span style={goldText}>Industrial Future</span></SectionHeading>
        <p className="lead-p" style={{ fontSize: 18, lineHeight: 1.8, color: "rgba(255,255,255,0.4)", fontWeight: 300, marginBottom: 64, maxWidth: 700, margin: "0 auto 64px" }}>Connect with our executive team to explore technical partnerships, strategic investment, or operational collaboration across the African continent.</p>
        <div style={{ display: "flex", gap: 24, justifyContent: "center", flexWrap: "wrap" }}>
          <GoldBtn dark href="/contact">Primary Channel <Arrow /></GoldBtn>
          <GoldBtn dark={false} href="/contact?type=partnership">Strategic Liaison</GoldBtn>
        </div>
      </div>
    </section>
  );
}

// ─── 11 FEATURED SLIDES (PREMIUM SHOWCASE) ────────────────────
function ShowcaseCard({ s, i, isInView, large = false }: { s: typeof customSlides[0]; i: number; isInView: boolean; large?: boolean }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.7, delay: i * 0.12 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: "relative",
        height: large ? 560 : 480,
        borderRadius: 6,
        overflow: "hidden",
        cursor: "pointer",
        background: DARK,
        border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.06)'}`,
        boxShadow: hovered ? GSHADOW_HOVER_DARK : GSHADOW_DARK,
        transition: "border 0.4s, box-shadow 0.4s",
        gridColumn: large ? "span 2" : "span 1",
      }}
    >
      {/* Image with zoom on hover */}
      <motion.div
        animate={{ scale: hovered ? 1.08 : 1 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        style={{ position: "absolute", inset: 0, zIndex: 0 }}
      >
        <img
          src={s.img}
          alt={s.title}
          style={{ width: "100%", height: "100%", objectFit: "cover", opacity: hovered ? 0.5 : 0.3, transition: "opacity 0.5s" }}
        />
      </motion.div>

      {/* Gradient overlays */}
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(160deg, ${DARK}CC 0%, transparent 50%, ${DARK}EE 100%)`, zIndex: 1 }} />
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${DARK2} 0%, transparent 60%)`, zIndex: 1 }} />

      {/* Gold accent line at top */}
      <motion.div
        animate={{ width: hovered ? "100%" : "0%" }}
        transition={{ duration: 0.5 }}
        style={{ position: "absolute", top: 0, left: 0, height: 2, background: `linear-gradient(90deg, ${G}, ${GL})`, zIndex: 3 }}
      />

      {/* Content */}
      <div style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", height: "100%", padding: large ? 48 : 32, justifyContent: "space-between" }}>
        {/* Top: Tag + Number */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <motion.div
            animate={{ y: hovered ? 0 : 4, opacity: hovered ? 1 : 0.7 }}
            transition={{ duration: 0.3 }}
            style={{ padding: "6px 16px", background: hovered ? G : 'rgba(255,255,255,0.05)', border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.1)'}`, borderRadius: 2, transition: "background 0.3s, border 0.3s" }}
          >
            <span style={{ fontSize: 9, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.2em", color: hovered ? "#000" : G, transition: "color 0.3s" }}>{s.tag}</span>
          </motion.div>
          <div style={{ fontFamily: "'Syncopate', sans-serif", fontSize: large ? 48 : 36, fontWeight: 700, color: `${G}15`, lineHeight: 1 }}>{s.id}</div>
        </div>

        {/* Bottom: Title + Desc + Arrow */}
        <div>
          {/* Decorative gold diamond */}
          <motion.div
            animate={{ opacity: hovered ? 1 : 0, x: hovered ? 0 : -10 }}
            transition={{ duration: 0.3 }}
            style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}
          >
            <div style={{ width: 6, height: 6, transform: "rotate(45deg)", background: G }} />
            <div style={{ height: 1, width: 30, background: `linear-gradient(90deg, ${G}, transparent)` }} />
          </motion.div>

          <h3 style={{
            fontFamily: "'Syncopate', sans-serif",
            fontSize: large ? 24 : 17,
            fontWeight: 700,
            color: "#FFF",
            marginBottom: 14,
            textTransform: "uppercase",
            letterSpacing: "0.04em",
            lineHeight: 1.3
          }}>{s.title}</h3>

          <motion.p
            animate={{ opacity: hovered ? 0.7 : 0.4, y: hovered ? 0 : 4 }}
            transition={{ duration: 0.3 }}
            style={{ fontSize: large ? 15 : 13, color: "rgba(255,255,255,0.5)", lineHeight: 1.7, margin: 0, marginBottom: 20, maxWidth: large ? 500 : 400 }}
          >{s.desc}</motion.p>

          <motion.div
            animate={{ x: hovered ? 8 : 0, opacity: hovered ? 1 : 0.5 }}
            transition={{ duration: 0.3 }}
            style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 9, fontWeight: 700, color: G, textTransform: "uppercase", letterSpacing: "0.2em" }}
          >
            Explore Division <Arrow />
          </motion.div>
        </div>
      </div>

      {/* Corner accent */}
      <motion.div
        animate={{ opacity: hovered ? 0.6 : 0 }}
        transition={{ duration: 0.4 }}
        style={{ position: "absolute", bottom: 0, right: 0, width: 120, height: 120, background: `radial-gradient(circle at bottom right, ${G}25 0%, transparent 70%)`, zIndex: 1 }}
      />
    </motion.div>
  );
}

function FeatureSlides() {
  const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-80px" });
  return (
    <section style={{ background: DARK2, padding: "140px 0", borderBottom: `1px solid rgba(255,255,255,0.05)`, position: "relative", overflow: "hidden" }}>
      {/* Subtle background pattern */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.015, backgroundImage: `linear-gradient(${G} 1px, transparent 1px), linear-gradient(90deg, ${G} 1px, transparent 1px)`, backgroundSize: "80px 80px" }} />

      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 80, flexWrap: "wrap", gap: 20 }}>
          <div>
            <Eyebrow>Featured Highlights</Eyebrow>
            <SectionHeading>Strategic <span style={goldText}>Showcases</span></SectionHeading>
          </div>
          <p className="lead-p" style={{ fontSize: 16, lineHeight: 1.8, color: "rgba(255,255,255,0.35)", fontWeight: 300, maxWidth: 440, margin: 0 }}>A curated view into the operational pillars that define Crown Rock Minerals&apos; institutional identity.</p>
        </div>

        {/* Bento grid: first card large, rest normal */}
        <div ref={ref} className="bento-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 20 }}>
          <ShowcaseCard s={customSlides[0]} i={0} isInView={isInView} large />
          <ShowcaseCard s={customSlides[1]} i={1} isInView={isInView} />
          <ShowcaseCard s={customSlides[2]} i={2} isInView={isInView} />
          <ShowcaseCard s={customSlides[3]} i={3} isInView={isInView} />
        </div>
      </div>
    </section>
  );
}

// ─── ROOT ──────────────────────────────────────────────────
export default function HomePage() {
  return (
    <div style={{ backgroundColor: DARK, color: "#FFF", minHeight: "100vh" }}>
      <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: 48px !important; }
          .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
          .child-grid { grid-template-columns: 1fr !important; }
          .gov-grid { grid-template-columns: 1fr !important; }
          .split-img { min-height: 350px !important; }
          .horizontal-progress { display: none !important; }
          .marquee-card { width: 300px !important; padding: 32px !important; }
          .bento-grid { grid-template-columns: 1fr !important; }
          .bento-grid > div { grid-column: span 1 !important; height: 400px !important; }
          .capital-grid { grid-template-columns: 1fr !important; }
          .sticky-col { position: relative !important; top: auto !important; margin-bottom: 40px !important; }
          .lead-p { font-size: 15px !important; line-height: 1.6 !important; }
        }
        @media(max-width: 480px) {
          .stats-grid { grid-template-columns: 1fr !important; }
          .marquee-card { width: 260px !important; }
        }
      `}</style>
      <CursorGlow />
      <Hero />
      <FeatureSlides />
      <TrustStrip />
      <About />
      <Divisions />
      <Greenfield />
      <Africa />
      <GeographicFootprint />
      <ZambiaProcessing />
      <Investment />
      <CapitalMarkets />
      <Sustainability />
      <News />
      <CTA />
      
      {/* FINAL PROTOCOL BAR */}
      <footer style={{ padding: "40px 64px", borderTop: "1px solid rgba(255,255,255,0.05)", display: "flex", justifyContent: "space-between", alignItems: "center", background: DARK2, opacity: 0.3 }}>
        <div style={{ fontSize: 9, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.3em" }}>Institutional Intelligence Matrix Enabled</div>
        <div style={{ fontSize: 9, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.3em" }}>© {new Date().getFullYear()} Crown Rock Minerals</div>
      </footer>
    </div>
  );
}