"use client";
import { useRef, useState, useEffect } from "react";
import { motion, useScroll, useTransform, useSpring, useInView, AnimatePresence } from "framer-motion";
// ─── TOKENS ───────────────────────────────────────────────────
const G = "#C9A84C";
const GL = "#E8D5A3";
const GD = "#9A7A32";
const DARK = "#07070A";
const DARK2 = "#0D0D12";
const DARK3 = "#131318";
const goldText: React.CSSProperties = {
background: `linear-gradient(135deg, ${G} 0%, ${GL} 45%, ${G} 100%)`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
};
const GSHADOW = `0 0 0 1px ${G}22, 0 8px 48px rgba(201,168,76,0.18), 0 24px 80px rgba(0,0,0,0.55)`;
const GSHADOW_HOVER = `0 0 0 1px ${G}44, 0 8px 60px rgba(201,168,76,0.32), 0 32px 96px rgba(0,0,0,0.7)`;
// ─── DATA ─────────────────────────────────────────────────────
const pillars = [
{
id: "responsible-mining", title: "Responsible Mining", icon: "⛏️",
accent: "#C9A84C",
image: "/images/Image_fx (2).png",
stat: { value: 100, suffix: "%", label: "Projects Assessed" },
description: "Our approach to mining begins with responsibility. Every project is assessed through the lens of environmental impact, community wellbeing, and long-term sustainability before any operational activity commences.",
points: [
"Pre-development environmental and social impact assessments",
"Progressive land rehabilitation and closure planning",
"Responsible sourcing and supply chain management",
"Compliance with international mining standards",
],
},
{
id: "environment", title: "Environmental Stewardship", icon: "🌱",
accent: "#C9A84C",
image: "/images/Image_fx (1).png",
stat: { value: 40, suffix: "%", label: "Emissions Reduced" },
description: "We recognize our obligation to protect and preserve the natural environments in which we operate. Environmental awareness is not a compliance requirement — it is a fundamental operational commitment.",
points: [
"Water conservation and management systems",
"Air quality monitoring and dust control",
"Biodiversity protection and habitat preservation",
"Waste management and recycling programs",
"Energy efficiency and emissions reduction",
],
},
{
id: "health-safety", title: "Health & Safety", icon: "🛡️",
accent: "#C9A84C",
image: "/images/blog_sustainability_report.png",
stat: { value: 0, suffix: "", label: "Compromise on Safety" },
description: "The safety of our workforce is non-negotiable. We operate under a zero-compromise safety culture with rigorous protocols, continuous training, and a commitment to industry-leading safety performance.",
points: [
"Comprehensive safety management systems",
"Regular safety training and certification programs",
"Incident investigation and prevention protocols",
"Occupational health monitoring",
"Emergency preparedness and response planning",
],
},
{
id: "community", title: "Community Development", icon: "🤝",
accent: "#C9A84C",
image: "/Image_fx.png",
stat: { value: 85, suffix: "%", label: "Local Employment" },
description: "We believe mining operations should create shared value. Our community engagement approach focuses on meaningful partnerships, local employment, skills development, and social infrastructure investment.",
points: [
"Local hiring and skills development programs",
"Community consultation and stakeholder engagement",
"Social infrastructure investment",
"Cultural heritage protection",
"Local procurement and economic participation",
],
},
{
id: "esg", title: "ESG Approach", icon: "📊",
accent: "#C9A84C",
image: "/images/20 (3).png",
stat: { value: 3, suffix: "rd", label: "Party Verified" },
description: "Our Environmental, Social, and Governance framework provides the structured accountability that guides our sustainability commitments and ensures transparent reporting to all stakeholders.",
points: [
"Structured ESG reporting and disclosure",
"Board-level sustainability governance",
"Stakeholder engagement and materiality assessment",
"Third-party audits and verification",
"Alignment with international sustainability frameworks",
],
},
];
// ─── ANIMATED COUNTER ─────────────────────────────────────────
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;
if (value === 0) { setN(0); return; }
let cur = 0;
const step = (value / 1200) * 16;
const t = setInterval(() => {
cur = Math.min(cur + step, value);
setN(Math.round(cur));
if (cur >= value) clearInterval(t);
}, 16);
return () => clearInterval(t);
}, [inView, value]);
return {n}{suffix} ;
}
// ─── SCROLL PROGRESS BAR ──────────────────────────────────────
function ScrollBar() {
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30 });
return (
{pillars.map((p, i) => (
document.getElementById(p.id)?.scrollIntoView({ behavior: "smooth" })}
whileHover="hov"
style={{ display: "flex", alignItems: "center", gap: 10, background: "none", border: "none", cursor: "pointer", padding: 0 }}
>
{p.title}
))}
);
}
// ─── FLOATING ORBS ────────────────────────────────────────────
function FloatingOrbs() {
return (
{[
{ x: "12%", y: "22%", w: 320, h: 320, color: `${G}09`, dur: 9 },
{ x: "72%", y: "14%", w: 200, h: 200, color: `${G}06`, dur: 12 },
{ x: "55%", y: "68%", w: 260, h: 260, color: `${G}07`, dur: 8 },
{ x: "8%", y: "75%", w: 140, h: 140, color: `${G}05`, dur: 14 },
].map((o, i) => (
);
}
// ─── HERO ─────────────────────────────────────────────────────
function Hero() {
const { scrollYProgress } = useScroll();
const y = useTransform(scrollYProgress, [0, 0.4], [0, 180]);
const op = useTransform(scrollYProgress, [0, 0.35], [1, 0]);
const scale = useTransform(scrollYProgress, [0, 0.5], [1, 1.1]);
return (
{/* Cinematic Background */}
{/* Breadcrumb */}
Crown Rock Minerals — Sustainability
{/* Editorial Headline */}
RESPONSIBLEMINERAL
At Crown Rock Minerals, sustainability is not an added layer. It is a core operational principle that informs how we assess, develop, and manage opportunity.
{/* Scroll indicator */}
Scroll to Explore
{/* Grid lines */}
{[...Array(5)].map((_, i) => (
{/* Bottom edge fade */}
);
}
// ─── STATS OVERVIEW ───────────────────────────────────────────
function Overview() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
const metrics = [
{ label: "Community Investment", val: 12.5, suf: "M+", icon: "🤝" },
{ label: "Water Recovery", val: 82, suf: "%", icon: "💧" },
{ label: "Rehabilitation Progress", val: 450, suf: "ha", icon: "🌱" },
{ label: "Safety Milestone", val: 2.1, suf: "M hrs", icon: "🛡️" },
];
return (
Institutional Performance
MEASURING IMPACT
{metrics.map((m, i) => (
{m.icon}
{m.label}
))}
);
}
// ─── PILLAR SECTION ───────────────────────────────────────────
function PillarSection({ pillar, index }: { pillar: any; index: number }) {
const containerRef = useRef(null);
const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start end", "end start"] });
const imgY = useTransform(scrollYProgress, [0, 1], [-80, 80]);
const isEven = index % 2 === 0;
return (
{/* Cinematic Image Side */}
{String(index + 1).padStart(2, "0")} / 05 Pillar
{/* Content Side */}
{pillar.title}
{pillar.description}
{/* Premium Black Hover Card */}
{pillar.points.map((p: string, i: number) => (
))}
);
}
// ─── CTA ──────────────────────────────────────────────────────
function CTA() {
return (
{/* Decorative Elements */}
Strategic Engagement
SHAPING A RESPONSIBLE FUTURE
Engage with our strategic teams to explore how Crown Rock Minerals is redefining the standards of African mining through innovation and accountability.
{[
{ label: "Partner With Us", dark: true },
{ label: "ESG Data Room", dark: false },
].map((b: { label: string, dark: boolean }) => (
{b.label}
))}
{/* Background Glow */}
);
}
// ─── ROOT ─────────────────────────────────────────────────────
export default function SustainabilityPage() {
const [active, setActive] = useState(0);
useEffect(() => {
const obs = pillars.map((p: any, i: number) => {
const el = document.getElementById(p.id);
if (!el) return null;
const o = new IntersectionObserver(
([e]) => { if (e.isIntersecting) setActive(i); },
{ threshold: 0.38 }
);
o.observe(el);
return o;
});
return () => obs.forEach((o: any) => o?.disconnect());
}, []);
return (
{pillars.map((p, i) =>
)}
);
}
