"use client";

import { motion, useScroll, useTransform, useInView } from "framer-motion";
import Link from "next/link";
import { useRef, useState, useEffect } from "react";
import { investmentHighlights } from "@/data/siteData";

// ─── TOKENS ───────────────────────────────────────────────────
const G = "#C9A84C";
const GL = "#E8D5A3";
const GD = "#9A7A32";
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 pipelineData = [
  { stage: "Exploration", region: "Sudan", target: "Gold", status: "Active", color: "#5A8A6A" },
  { stage: "Resource Validation", region: "East Africa", target: "Gold & Base Metals", status: "In Progress", color: "#C9A84C" },
  { stage: "Feasibility Study", region: "Sudan", target: "Gold", status: "Planning", color: "#4A7FA5" },
  { stage: "Development Planning", region: "West Africa", target: "Minerals", status: "Evaluation", color: "#7A6A9A" },
  { stage: "Infrastructure Prep", region: "Sudan", target: "Gold Operations", status: "Design Phase", color: "#A0785A" },
];

// ─── 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 Counter({ value, suffix }: { value: number; suffix: string }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true });
  const [n, setN] = useState(0);
  useEffect(() => {
    if (!inView) return;
    let start = 0;
    const end = value;
    const duration = 2000;
    const increment = end / (duration / 16);
    const timer = setInterval(() => {
      start += increment;
      if (start >= end) { setN(end); clearInterval(timer); }
      else { setN(start); }
    }, 16);
    return () => clearInterval(timer);
  }, [inView, value]);
  return <span ref={ref}>{n.toFixed(value % 1 === 0 ? 0 : 1)}{suffix}</span>;
}

function FloatingDiamonds() {
  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }}>
      {[
        { x: "8%", y: "20%", size: 6, delay: 0, dur: 8 },
        { x: "92%", y: "35%", size: 8, delay: 2, dur: 10 },
        { x: "75%", y: "70%", size: 5, delay: 4, dur: 7 },
        { x: "15%", y: "80%", size: 7, delay: 1, dur: 12 },
        { x: "50%", y: "15%", size: 4, delay: 3, dur: 9 },
      ].map((d, i) => (
        <motion.div
          key={i}
          animate={{ y: [0, -20, 0], opacity: [0.15, 0.4, 0.15] }}
          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 op = useTransform(scrollYProgress, [0, 0.35], [1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 1.1]);

  const stats = [
    { v: "6+", s: "Business Divisions" },
    { v: "Gold", s: "Primary Focus" },
    { v: "Africa", s: "Strategic Hub" },
    { v: "ESG", s: "Aligned Growth" },
  ];

  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.4 }}>
        <img src="/images/878787.png" alt="Strategic Corporate" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 40%, #000 100%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at center, transparent, rgba(0,0,0,0.4))" }} />
      </motion.div>

      <FloatingDiamonds />

      <motion.div className="resp-container" style={{ y, opacity: op, position: "relative", zIndex: 10, width: "100%", maxWidth: 1200, 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={{ width: 40, height: 1, background: G }} />
          <GoldDiamond size={6} opacity={0.6} />
          <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.35em", fontWeight: 700, color: G }}>
            Crown Rock Minerals — Investors
          </span>
        </motion.div>

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

        <motion.p initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.9, delay: 0.4 }}
          style={{ fontSize: 18, lineHeight: 1.8, maxWidth: 540, color: "rgba(255,255,255,0.55)", fontWeight: 300, margin: "0 0 80px" }}>
          Structured governance, transparent reporting, and disciplined project management designed to meet institutional investor expectations for long-term African mineral development.
        </motion.p>

        {/* Stats strip */}
        <motion.div className="stats-grid" initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.9, delay: 0.7 }}
          style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40, borderTop: "1px solid rgba(255,255,255,0.06)", paddingTop: 48 }}>
          {stats.map((s) => (
            <div key={s.v}>
              <div style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(18px, 2vw, 26px)", fontWeight: 700, color: "rgba(255,255,255,0.9)", marginBottom: 8 }}>{s.v}</div>
              <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 700 }}>{s.s}</div>
            </div>
          ))}
        </motion.div>
      </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>
        <span style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: "0.2em", color: "rgba(255,255,255,0.3)" }}>Scroll</span>
      </div>

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

// ─── INVESTMENT THESIS ────────────────────────────────────────
function InvestmentThesis() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });

  return (
    <section className="resp-section" style={{ background: DARK, padding: "160px 0", position: "relative", overflow: "hidden" }}>
      <SectionDiamonds />
      <FloatingDiamonds />

      {/* Vertical gold lines */}
      <div style={{ position: "absolute", top: 0, left: "10%", width: 1, height: "100%", background: `linear-gradient(to bottom, transparent, ${G}12, transparent)` }} />
      <div style={{ position: "absolute", top: 0, right: "10%", width: 1, height: "100%", background: `linear-gradient(to bottom, transparent, ${G}08, transparent)` }} />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px" }}>
        <div className="split-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center", marginBottom: 100 }}>
          <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 }} />
              <GoldDiamond size={6} opacity={0.6} />
              <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", color: G, fontWeight: 700 }}>Capital Allocation</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, 4.5vw, 54px)", textTransform: "uppercase", lineHeight: 1.1, color: "#FFF", margin: "0 0 32px" }}>
              INVESTMENT <span style={goldText}>THESIS</span>
            </motion.h2>
            <DiamondDivider />
            <motion.p 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, marginBottom: 48 }}>
              Crown Rock Minerals offers a differentiated investment profile built on geological expertise, operational discipline, and first-mover advantages in under-explored African corridors.
            </motion.p>
          </div>

          {/* Image */}
          <motion.div initial={{ opacity: 0, x: 40 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 1 }}
            style={{ position: "relative", borderRadius: 4, overflow: "hidden", border: `2px solid ${G}30`, boxShadow: GSHADOW }}>
            <img src="/dddd.png" alt="Investment Strategy" style={{ width: "100%", height: "auto", display: "block" }} />
            <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: "40%", background: `linear-gradient(to top, ${DARK}, transparent)` }} />
            <div style={{ position: "absolute", bottom: 24, left: 24, display: "flex", alignItems: "center", gap: 10 }}>
              <GoldDiamond size={8} opacity={0.7} />
              <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 700 }}>Strategic Value</span>
            </div>
          </motion.div>
        </div>

        <div ref={ref} className="child-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 28 }}>
          {investmentHighlights.map((item, i) => (
            <motion.div
              key={item.title}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: i * 0.1 }}
              whileHover={{
                backgroundColor: "#000",
                borderColor: G,
                y: -10,
                boxShadow: `0 30px 60px rgba(0,0,0,0.8), 0 0 0 1px ${G}33`
              }}
              style={{
                background: "rgba(255,255,255,0.02)",
                border: "1px solid rgba(255,255,255,0.08)",
                borderRadius: 4, padding: "48px 40px",
                transition: "all 0.5s cubic-bezier(0.23, 1, 0.32, 1)",
                position: "relative", overflow: "hidden",
              }}
            >
              {/* Corner diamond */}
              <div style={{ position: "absolute", top: 16, right: 16 }}>
                <GoldDiamond size={6} opacity={0.2} />
              </div>
              {/* Top gold line */}
              <div style={{ position: "absolute", top: 0, left: 0, width: 50, height: 2, background: `linear-gradient(90deg, ${G}, transparent)` }} />

              <div style={{ fontSize: 28, fontWeight: 700, color: G, fontFamily: "serif", marginBottom: 24 }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <h3 style={{
                fontFamily: "'Syncopate', sans-serif", fontSize: 13, fontWeight: 700,
                textTransform: "uppercase", color: "#FFF", marginBottom: 20, letterSpacing: "1px"
              }}>{item.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(255,255,255,0.45)", fontWeight: 300, margin: 0 }}>
                {item.description}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PROJECT PIPELINE ─────────────────────────────────────────
function Pipeline() {
  return (
    <section className="resp-section" style={{ background: DARK2, padding: "160px 0", position: "relative", overflow: "hidden", borderTop: `1px solid rgba(255,255,255,0.05)` }}>
      <SectionDiamonds />

      {/* Cinematic background */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.08 }}>
        <img src="/images/20 (4).png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, ${DARK2} 0%, transparent 30%, transparent 70%, ${DARK2} 100%)` }} />
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, ${DARK2} 0%, transparent 30%, transparent 70%, ${DARK2} 100%)` }} />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", marginBottom: 100 }}>
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
            style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginBottom: 28 }}>
            <span style={{ width: 32, height: 1, background: G }} />
            <GoldDiamond size={6} opacity={0.6} />
            <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", color: G, fontWeight: 700 }}>Growth Portfolio</span>
            <GoldDiamond size={6} opacity={0.6} />
            <span style={{ width: 32, height: 1, background: G }} />
          </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, 50px)", textTransform: "uppercase", lineHeight: 1.1, color: "#FFF", margin: 0 }}>
            PROJECT <span style={goldText}>PIPELINE</span>
          </motion.h2>
        </div>

        <div className="pipeline-wrap">
          <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
            style={{
              background: "rgba(0,0,0,0.5)",
              border: `1px solid ${G}20`,
              borderRadius: 6,
              overflow: "hidden",
              backdropFilter: "blur(10px)",
              boxShadow: GSHADOW,
              minWidth: "800px"
            }}>
          {/* Header */}
          <div style={{
            display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr",
            padding: "24px 40px", background: `${G}08`,
            borderBottom: `1px solid ${G}20`,
            fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 700
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <GoldDiamond size={5} opacity={0.5} />
              Stage
            </div>
            <div>Region</div>
            <div>Target</div>
            <div>Status</div>
          </div>

          {/* Rows */}
          {pipelineData.map((project, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.1 }}
              whileHover={{ backgroundColor: `${G}08` }}
              style={{
                display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr",
                padding: "28px 40px", borderBottom: "1px solid rgba(255,255,255,0.05)",
                fontSize: 14, color: "rgba(255,255,255,0.8)", alignItems: "center",
                transition: "background 0.3s",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 16, fontWeight: 600, color: "#FFF" }}>
                <div style={{ width: 8, height: 8, borderRadius: "50%", background: project.color, boxShadow: `0 0 12px ${project.color}60` }} />
                {project.stage}
              </div>
              <div style={{ color: "rgba(255,255,255,0.5)" }}>{project.region}</div>
              <div>{project.target}</div>
              <div>
                <span style={{
                  fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 700,
                  padding: "6px 14px", borderRadius: 2, background: `${project.color}15`, border: `1px solid ${project.color}30`, color: project.color
                }}>{project.status}</span>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>  {/* Closing pipeline-wrap */}
    </div>    {/* Closing resp-container */}
    </section>
  );
}

// ─── GOVERNANCE & PARTNERSHIPS ────────────────────────────────
function Governance() {
  const [hoveredCard, setHoveredCard] = useState<number | null>(null);

  return (
    <section className="resp-section" style={{ background: DARK, padding: "160px 0", position: "relative", overflow: "hidden" }}>
      <SectionDiamonds />
      <FloatingDiamonds />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px" }}>
        {/* Partnerships Row with Image */}
        <div className="split-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginBottom: 120, alignItems: "center" }}>
          {/* Image */}
          <motion.div initial={{ opacity: 0, x: -40 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 1 }}
            style={{ position: "relative", borderRadius: 4, overflow: "hidden", border: `2px solid ${G}25`, boxShadow: GSHADOW }}>
            <img src="/sssss (2).png" alt="Strategic Partnerships" style={{ width: "100%", height: "auto", display: "block" }} />
            <div style={{ position: "absolute", inset: 0, background: `linear-gradient(135deg, transparent 50%, ${DARK}CC 100%)` }} />
            <div style={{ position: "absolute", bottom: 32, right: 32, display: "flex", alignItems: "center", gap: 12 }}>
              <GoldDiamond size={8} opacity={0.6} />
              <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", fontWeight: 700, color: G }}>Partnerships</span>
            </div>
          </motion.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 }} />
              <GoldDiamond size={6} opacity={0.6} />
              <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", color: G, fontWeight: 700 }}>Collaboration</span>
            </motion.div>
            <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(30px, 3.5vw, 44px)", textTransform: "uppercase", lineHeight: 1.1, color: "#FFF", marginBottom: 28 }}>
              STRATEGIC <span style={goldText}>PARTNERSHIPS</span>
            </h2>
            <DiamondDivider />
            <p style={{ fontSize: 18, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", fontWeight: 300, marginBottom: 48 }}>
              We actively seek partnerships with aligned organizations that share our commitment to responsible mining and long-term value creation across priority jurisdictions.
            </p>

            <div className="child-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
              {[
                { title: "Joint Ventures", icon: "🤝" },
                { title: "Technical Expertise", icon: "🔬" },
                { title: "Institutional Capital", icon: "💰" },
                { title: "Public Sector", icon: "🏛️" },
              ].map((p, i) => (
                <motion.div
                  key={i}
                  whileHover={{ y: -5, borderColor: G, boxShadow: `0 15px 40px rgba(0,0,0,0.5), inset 0 0 0 1px ${G}20` }}
                  style={{
                    padding: "28px 24px",
                    background: "rgba(255,255,255,0.02)",
                    border: "1px solid rgba(255,255,255,0.08)",
                    borderRadius: 4,
                    transition: "all 0.4s ease",
                    position: "relative",
                    overflow: "hidden",
                  }}
                >
                  <div style={{ position: "absolute", top: 8, right: 8 }}><GoldDiamond size={5} opacity={0.15} /></div>
                  <div style={{ fontSize: 24, marginBottom: 14 }}>{p.icon}</div>
                  <div style={{ fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: "#FFF", letterSpacing: "1px" }}>{p.title}</div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>

        {/* Governance Cards */}
        <div style={{ marginBottom: 40 }}>
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
            style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginBottom: 32 }}>
            <span style={{ width: 40, height: 1, background: G }} />
            <GoldDiamond size={6} opacity={0.6} />
            <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.3em", color: G, fontWeight: 700 }}>Governance Framework</span>
            <GoldDiamond size={6} opacity={0.6} />
            <span style={{ width: 40, height: 1, background: G }} />
          </motion.div>
        </div>

        <div className="gov-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {[
            { title: "Board Oversight", desc: "Independent board governance with clear mandates for risk, audit, and sustainability.", icon: "⚖️" },
            { title: "Regulatory Compliance", desc: "Full adherence to host country mining regulations and international standards.", icon: "📜" },
            { title: "Risk Framework", desc: "Structured identification, assessment, and management of operational risks.", icon: "🛡️" },
          ].map((item, i) => (
            <motion.div
              key={i}
              onMouseEnter={() => setHoveredCard(i)}
              onMouseLeave={() => setHoveredCard(null)}
              whileHover={{ backgroundColor: "#000", borderColor: G, y: -10 }}
              style={{
                padding: "48px 40px",
                background: "rgba(255,255,255,0.02)",
                border: "1px solid rgba(255,255,255,0.08)",
                borderRadius: 4,
                transition: "all 0.5s cubic-bezier(0.23, 1, 0.32, 1)",
                position: "relative",
                overflow: "hidden",
              }}
            >
              {/* Top diamond line */}
              <motion.div
                animate={{ width: hoveredCard === i ? "100%" : "0%" }}
                transition={{ duration: 0.5 }}
                style={{ position: "absolute", top: 0, left: 0, height: 2, background: `linear-gradient(90deg, ${G}, ${GL}, ${G})` }}
              />
              <div style={{ position: "absolute", top: 16, right: 16 }}><GoldDiamond size={6} opacity={0.15} /></div>
              
              <div style={{ fontSize: 32, marginBottom: 24, filter: hoveredCard === i ? "grayscale(0)" : "grayscale(1) opacity(0.6)", transition: "all 0.3s" }}>{item.icon}</div>
              <h3 style={{ fontSize: 13, fontWeight: 700, color: G, textTransform: "uppercase", letterSpacing: "2px", marginBottom: 20 }}>{item.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(255,255,255,0.45)", fontWeight: 300, margin: 0 }}>{item.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── RESOURCES & DOWNLOADS ────────────────────────────────────
function Resources() {
  return (
    <section className="resp-section" style={{ background: DARK2, padding: "160px 0", position: "relative", overflow: "hidden", borderTop: `1px solid rgba(255,255,255,0.05)` }}>
      <SectionDiamonds />

      <div className="resp-container" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
        <div className="split-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
          <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 }} />
              <GoldDiamond size={6} opacity={0.6} />
              <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", color: G, fontWeight: 700 }}>Data Room</span>
            </motion.div>
            <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(28px, 3.5vw, 44px)", textTransform: "uppercase", color: "#FFF", margin: "0 0 28px" }}>
              REPORTS & <span style={goldText}>DOWNLOADS</span>
            </h2>
            <DiamondDivider />
            <p style={{ fontSize: 16, lineHeight: 1.8, color: "rgba(255,255,255,0.4)", fontWeight: 300 }}>
              Access our latest corporate publications, sustainability reports, and investment presentations.
            </p>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {[
              { title: "Corporate Overview", format: "PDF", size: "2.4 MB", icon: "📄" },
              { title: "Sustainability Report 2025", format: "PDF", size: "5.1 MB", icon: "🌱" },
              { title: "Investment Presentation", format: "PDF", size: "3.8 MB", icon: "📊" },
            ].map((doc, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 }}
                whileHover={{ y: -5, borderColor: G, backgroundColor: "#000", boxShadow: GSHADOW_HOVER }}
                style={{
                  cursor: "pointer",
                  padding: "32px 36px",
                  background: "rgba(255,255,255,0.02)",
                  border: "1px solid rgba(255,255,255,0.08)",
                  borderRadius: 4,
                  transition: "all 0.4s ease",
                  display: "flex",
                  alignItems: "center",
                  gap: 24,
                  position: "relative",
                  overflow: "hidden",
                }}
              >
                <div style={{ position: "absolute", top: 8, right: 8 }}><GoldDiamond size={5} opacity={0.15} /></div>
                <div style={{
                  width: 56, height: 56, borderRadius: 4,
                  background: `linear-gradient(135deg, ${G}15, ${G}08)`,
                  border: `1px solid ${G}20`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 24, flexShrink: 0,
                }}>{doc.icon}</div>
                <div style={{ flex: 1 }}>
                  <h4 style={{ fontSize: 14, fontWeight: 700, color: "#FFF", marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.05em" }}>{doc.title}</h4>
                  <p style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", margin: 0 }}>{doc.format} • {doc.size}</p>
                </div>
                <div style={{ color: G }}>
                  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA ────────────────────────────────────────────────
function CTA() {
  return (
    <section className="resp-section" style={{ background: "#000", padding: "160px 0", position: "relative", overflow: "hidden" }}>
      <SectionDiamonds />

      {/* Cinematic background */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.1 }}>
        <img src="/images/20 (8).png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to bottom, #000 0%, transparent 30%, transparent 70%, #000 100%)` }} />

      <FloatingDiamonds />

      <div className="resp-container" style={{ maxWidth: 800, margin: "0 auto", padding: "0 64px", textAlign: "center", position: "relative", zIndex: 10 }}>
        <DiamondDivider />

        <motion.h3 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
          style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(24px, 4vw, 42px)", textTransform: "uppercase", color: "#FFF", marginBottom: 32, lineHeight: 1.1 }}>
          SHAPING A <span style={goldText}>RESPONSIBLE</span> FUTURE
        </motion.h3>

        <motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }}
          style={{ fontSize: 18, lineHeight: 1.8, color: "rgba(255,255,255,0.4)", marginBottom: 56, fontWeight: 300 }}>
          We welcome conversations with institutional investors and strategic partners interested in the next generation of African mining.
        </motion.p>

        <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }}
          style={{ display: "flex", gap: 24, justifyContent: "center", flexWrap: "wrap" }}>
          <motion.div whileHover={{ scale: 1.05, boxShadow: `0 10px 40px ${G}40` }} whileTap={{ scale: 0.95 }}>
            <Link href="/contact?type=investor" style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              padding: "18px 44px", background: G, color: "#000",
              fontWeight: 800, fontSize: 12, textTransform: "uppercase",
              letterSpacing: "0.2em", textDecoration: "none", borderRadius: 2,
            }}>
              <GoldDiamond size={6} opacity={0.4} />
              Investor Inquiry
            </Link>
          </motion.div>
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <Link href="/contact?type=partnership" style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              padding: "18px 44px", border: `1px solid ${G}`,
              color: G, fontWeight: 800, fontSize: 12, textTransform: "uppercase",
              letterSpacing: "0.2em", textDecoration: "none", borderRadius: 2,
            }}>
              Partnerships
            </Link>
          </motion.div>
        </motion.div>
      </div>

      {/* Bottom glow */}
      <div style={{ position: "absolute", bottom: "-20%", left: "50%", transform: "translateX(-50%)", width: "60%", height: "40%", background: `radial-gradient(ellipse at center, ${G}15 0%, transparent 70%)`, pointerEvents: "none" }} />
    </section>
  );
}

// ─── ROOT ─────────────────────────────────────────────────────
export default function InvestorsContent() {
  return (
    <div style={{ background: DARK, color: "#FFF" }}>
      <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; }
          .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; }
          .pipeline-wrap { overflow-x: auto !important; padding-bottom: 20px !important; margin: 0 -24px !important; padding: 0 24px !important; }
        }
        @media(max-width: 480px) {
          .stats-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <Hero />
      <InvestmentThesis />
      <Pipeline />
      <Governance />
      <Resources />
      <CTA />
    </div>
  );
}