"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import { useRef, useState } from "react";

// ── Shared Constants ──────────────────────────────────────────
const G = "#C9A84C";
const DARK = "#07070A";
const DARK2 = "#0D0D0D";

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

const facts = [
  { label: "Founded Purpose", value: "Responsible mineral development across Africa" },
  { label: "Headquarters", value: "Istanbul, Turkey 🇹🇷" },
  { label: "Primary Focus", value: "Gold mining & mineral exploration" },
  { label: "Key Region", value: "Sudan 🇸🇩 & high-potential African markets" },
  { label: "Group Structure", value: "Integrated multi-division mining group" },
];

const values = [
  { badge: "01", title: "Integrity", sub: "Uncompromising Ethics", desc: "Conducting every aspect of our business with honesty, transparency, and ethical accountability." },
  { badge: "02", title: "Responsibility", sub: "Stewardship First", desc: "Upholding our duty to communities, environments, and stakeholders in all we do." },
  { badge: "03", title: "Precision", sub: "Technical Rigor", desc: "Applying geological and operational expertise with meticulous attention to detail and data." },
  { badge: "04", title: "Sustainability", sub: "Long-Term Vision", desc: "Ensuring our operations create enduring value while preserving natural and social capital." },
  { badge: "05", title: "Growth", sub: "Disciplined Expansion", desc: "Pursuing strategic development that builds lasting institutional and industrial value." },
  { badge: "06", title: "Partnership", sub: "Mutual Benefit", desc: "Building collaborative relationships founded on trust, shared goals, and long-term commitment." },
];

const whyItems = [
  { num: "01", title: "Greenfield Expertise", desc: "We specialize in identifying and developing mining opportunities from the ground up, bringing geological insight." },
  { num: "02", title: "Regional Understanding", desc: "Deep knowledge of African mineral regions, regulatory landscapes, and operational environments — particularly in Sudan." },
  { num: "03", title: "Integrated Group Structure", desc: "Our multi-division approach enables coordinated delivery across exploration, development, and operations." },
  { num: "04", title: "Sustainability-First Approach", desc: "Environmental responsibility and community engagement are embedded in our planning from day one." },
  { num: "05", title: "Investor-Ready Platform", desc: "Transparent governance, structured reporting, and disciplined project management designed for excellence." },
  { num: "06", title: "Long-Term Partnership Vision", desc: "We build relationships for decades, not transactions — creating durable partnerships that serve mutual interests." },
];

function AdvantageCard({ item, i }: { item: typeof whyItems[0], i: number }) {
  const [hovered, setHovered] = useState(false);
  return (
    <motion.div 
      onHoverStart={() => setHovered(true)}
      onHoverEnd={() => setHovered(false)}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, delay: i * 0.1 }}
      style={{ 
        position: "relative",
        display: "flex", 
        gap: 32, 
        padding: "48px", 
        background: hovered ? "rgba(198,160,79,0.08)" : "rgba(255,255,255,0.01)", 
        borderRadius: 8, 
        border: `1px solid ${hovered ? G : 'rgba(255,255,255,0.05)'}`, 
        borderLeft: `4px solid ${hovered ? G : `${G}40`}`, 
        transition: "all 0.5s cubic-bezier(0.23, 1, 0.32, 1)",
        boxShadow: hovered ? `0 20px 50px rgba(198,160,79,0.15), inset 0 0 30px rgba(198,160,79,0.05)` : "none",
        transform: hovered ? "translateX(15px)" : "translateX(0px)",
        overflow: "hidden",
        cursor: "default"
      }}
    >
      <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", background: `linear-gradient(135deg, ${G}15 0%, transparent 100%)`, opacity: hovered ? 1 : 0, transition: "opacity 0.5s", pointerEvents: "none" }} />
      
      <div style={{ position: "relative", zIndex: 1, fontSize: 32, fontWeight: 800, color: G, opacity: hovered ? 1 : 0.3, fontFamily: "'Syncopate', sans-serif", transition: "opacity 0.5s" }}>
        {item.num}
      </div>
      <div style={{ position: "relative", zIndex: 1 }}>
        <h4 style={{ fontSize: 16, fontWeight: 700, textTransform: "uppercase", color: hovered ? G : "#FFF", marginBottom: 16, letterSpacing: "0.05em", transition: "color 0.4s" }}>
          {item.title}
        </h4>
        <p style={{ fontSize: 15, lineHeight: 1.8, color: hovered ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,0.45)", margin: 0, fontWeight: 300, transition: "color 0.4s" }}>
          {item.desc}
        </p>
      </div>
    </motion.div>
  );
}

export default function AboutContent() {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 0.4], [0, 160]);
  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 1.05]);

  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; }
          .mission-grid { grid-template-columns: 1fr !important; }
          .adv-grid { grid-template-columns: 1fr !important; }
          .split-img { min-height: 400px !important; }
          .resp-padding { padding: 120px 0 !important; }
        }
      `}</style>
      
      {/* ─── ABOUT HERO ───────────────────────────────────────── */}
      <section className="resp-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/20 (4).png" 
            alt="Crown Rock About"
            style={{ width: "100%", height: "100%", objectFit: "cover" }}
          />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 40%, #000 100%)" }} />
        </motion.div>

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

          <motion.h1
            initial={{ opacity: 0, y: 48 }} animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1.1, delay: 0.1 }}
            style={{
              fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(48px, 8vw, 110px)",
              fontWeight: 700, lineHeight: 0.9, letterSpacing: "-0.04em",
              margin: "0 0 44px", textTransform: "uppercase", color: "#FFF"
            }}
          >
            ABOUT<br />
            THE<br />
            <span style={goldText}>CROWN ROCK</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.9, delay: 0.3 }}
            style={{ fontSize: 18, lineHeight: 1.8, maxWidth: 540, color: "rgba(255,255,255,0.6)", fontWeight: 300, margin: 0 }}
          >
            A high-growth mining group dedicated to responsible mineral development across Africa and strategic exploration initiatives.
          </motion.p>
        </motion.div>

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

      {/* ─── WHO WE ARE (SPLIT) ────────────────────────────────── */}
      <section className="resp-section" style={{ background: DARK, padding: "160px 0", position: "relative", overflow: "hidden" }}>
        {/* Subtle background glow */}
        <div style={{ position: "absolute", top: "20%", left: "-10%", width: "50%", height: "60%", background: `radial-gradient(ellipse at center, ${G}15 0%, transparent 60%)`, filter: "blur(80px)", pointerEvents: "none" }} />

        <div className="split-grid resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          
          <div style={{ position: "relative", zIndex: 1 }}>
            <motion.span 
              initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}
              style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 24 }}
            >
              The Foundation
            </motion.span>
            <motion.h2 
              initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.1 }}
              style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(24px, 3.5vw, 42px)", textTransform: "uppercase", lineHeight: 1.2, color: "#FFF", marginBottom: 40 }}
            >
              RESPONSIBLE MINERAL <br /><span style={goldText}>DEVELOPMENT</span>
            </motion.h2>
            <motion.div 
              initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }}
              style={{ fontSize: 15, lineHeight: 1.8, color: "rgba(255,255,255,0.6)", fontWeight: 300 }}
            >
              <p style={{ marginBottom: 32 }}>Crown Rock Minerals is a mining-focused group dedicated to responsible mineral development across Africa. With strategic emphasis on gold, exploration, and operational readiness, the group combines geological insight with disciplined execution.</p>
              <p>Our integrated approach spans the full mining lifecycle — from early-stage geological assessment through resource validation and sustained operational excellence.</p>
            </motion.div>

            {/* Dynamic Facts Grid */}
            <div style={{ marginTop: 60, display: "grid", gap: 16 }}>
              {facts.map((f, i) => (
                <motion.div 
                  key={i} 
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: 0.3 + (i * 0.1) }}
                  whileHover={{ 
                    x: 10, 
                    backgroundColor: "rgba(198,160,79,0.08)", 
                    borderColor: `${G}80`,
                    boxShadow: `0 10px 30px rgba(198,160,79,0.15)`
                  }}
                  style={{ 
                    position: "relative",
                    padding: "24px 32px", 
                    background: "rgba(255,255,255,0.02)", 
                    border: "1px solid rgba(255,255,255,0.08)", 
                    borderRadius: 8, 
                    transition: "all 0.4s cubic-bezier(0.23, 1, 0.32, 1)",
                    overflow: "hidden",
                    cursor: "pointer"
                  }}
                >
                  {/* Subtle sweep gradient on hover could be added here if needed */}
                  <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div style={{ width: 6, height: 6, background: G, borderRadius: "50%" }} />
                      <div style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 700 }}>{f.label}</div>
                    </div>
                    <div style={{ fontSize: 13, color: "#FFF", fontWeight: 500, paddingLeft: 16 }}>{f.value}</div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Cinematic Image Side */}
          <div style={{ position: "relative", height: "100%", minHeight: "750px" }} className="split-about">
            <motion.div 
              style={{ position: "absolute", inset: 0, borderRadius: 8, overflow: "hidden", border: `2px solid ${G}30`, boxShadow: `0 20px 50px rgba(0,0,0,0.5)` }}
              initial={{ opacity: 0, scale: 0.9, rotateY: 10 }} 
              whileInView={{ opacity: 1, scale: 1, rotateY: 0 }} 
              transition={{ duration: 1.2, ease: "easeOut" }}
            >
              <img 
                src="/images/hero_bg.png" 
                alt="Responsible Mineral Development"
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
              />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, ${DARK} 0%, transparent 30%, transparent 70%, ${DARK}20 100%)` }} />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${DARK} 0%, transparent 40%)` }} />
            </motion.div>
          </div>
        </div>
      </section>

      {/* ─── LEADERSHIP & CHAIRMAN ─────────────────────────────── */}
      <section className="resp-section" style={{ background: "#000", padding: "200px 0", position: "relative", overflow: "hidden" }}>
        {/* Subtle background glow */}
        <div style={{ position: "absolute", top: "10%", left: "50%", transform: "translateX(-50%)", width: "60%", height: "80%", background: `radial-gradient(ellipse, ${G}10 0%, transparent 60%)`, filter: "blur(100px)", pointerEvents: "none" }} />
        
        <div className="resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 10 }}>
           
           {/* Chairman Section */}
           <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", marginBottom: 160 }}>
             <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 24 }}>Executive Perspective</span>
             <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(24px, 3.5vw, 42px)", textTransform: "uppercase", color: "#FFF", marginBottom: 60, lineHeight: 1.3 }}>
               A WORD FROM OUR CO-FOUNDER & <span style={goldText}>CHAIRMAN</span>
             </h2>

             {/* Chairman Image */}
             <motion.div 
               initial={{ opacity: 0, y: 30, scale: 0.95 }} 
               whileInView={{ opacity: 1, y: 0, scale: 1 }} 
               transition={{ duration: 0.8 }} 
               style={{ 
                 position: "relative", width: "100%", maxWidth: 320, height: 400, 
                 border: `1px solid ${G}50`, borderRadius: 8, 
                 overflow: "hidden", marginBottom: 36, 
                 boxShadow: `0 30px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05)` 
               }}
             >
                <img src="/oudah.jpeg" alt="Vecih Oudah" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
                <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, #000 0%, transparent 40%)` }} />
             </motion.div>

             <h3 style={{ fontSize: 28, fontWeight: 700, color: "#FFF", textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }}>VECIH OUDAH</h3>
             <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 40 }}>
                <span style={{ width: 32, height: 1, background: G }} />
                <span style={{ fontSize: 11, color: G, textTransform: "uppercase", letterSpacing: "0.2em", fontWeight: 700 }}>Co-founder & Chairman, UBC HOLDING</span>
                <span style={{ width: 32, height: 1, background: G }} />
             </div>

             <blockquote style={{ 
               fontSize: "clamp(18px, 2vw, 24px)", fontWeight: 300, 
               lineHeight: 1.8, color: "rgba(255,255,255,0.7)", 
               maxWidth: 900, margin: "0 auto", fontStyle: "italic",
               position: "relative",
             }}>
               &ldquo;As we expand across Africa, our journey is built on a foundation of geological truth and operational discipline. Responsible mining is not just a practice — it is a commitment to the communities, environments, and economies we serve. We are building Crown Rock Minerals to be a group that stakeholders trust and communities welcome.&rdquo;
             </blockquote>
           </div>

           {/* Our Leadership Grid */}
           <div style={{ textAlign: "center", marginBottom: 80 }}>
             <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(28px, 4vw, 48px)", textTransform: "uppercase", color: "#FFF", margin: 0 }}>
               OUR <span style={goldText}>LEADERSHIP</span>
             </h2>
           </div>

           <div className="leadership-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 32 }}>
             <style>{`@media(max-width: 768px) { .leadership-grid { grid-template-columns: 1fr !important; } }`}</style>
             
             {/* Ali Oudah */}
             <motion.div 
               initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.1 }} viewport={{ once: true }}
               style={{ background: "rgba(255,255,255,0.02)", border: `1px solid rgba(255,255,255,0.05)`, borderRadius: 8, overflow: "hidden", textAlign: "center", paddingBottom: 40, transition: "transform 0.4s", cursor: "default" }}
               whileHover={{ y: -10, borderColor: `${G}40` }}
             >
               <div style={{ width: "100%", height: 380, overflow: "hidden", marginBottom: 32, position: "relative" }}>
                 <img src="/ali.png" alt="Ali Oudah" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
                 <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 30%)` }} />
                 <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, transparent, ${G}, transparent)` }} />
               </div>
               <h3 style={{ fontSize: 18, fontWeight: 700, color: "#FFF", textTransform: "uppercase", letterSpacing: "0.05em", margin: "0 0 12px 0" }}>ALI OUDAH</h3>
               <p style={{ fontSize: 11, color: G, textTransform: "uppercase", letterSpacing: "0.15em", fontWeight: 700, padding: "0 20px", margin: 0 }}>Co-Founder & Deputy Chairman of UBC HOLDING</p>
             </motion.div>

             {/* Ahmed Mohammed Khalifa Al Sada */}
             <motion.div 
               initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.2 }} viewport={{ once: true }}
               style={{ background: "rgba(255,255,255,0.02)", border: `1px solid rgba(255,255,255,0.05)`, borderRadius: 8, overflow: "hidden", textAlign: "center", paddingBottom: 40, transition: "transform 0.4s", cursor: "default" }}
               whileHover={{ y: -10, borderColor: `${G}40` }}
             >
               <div style={{ width: "100%", height: 380, overflow: "hidden", marginBottom: 32, position: "relative" }}>
                 <img src="/KHALIFA.jpg" alt="Ahmed Mohammed Khalifa Al Sada" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
                 <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 30%)` }} />
                 <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, transparent, ${G}, transparent)` }} />
               </div>
               <h3 style={{ fontSize: 18, fontWeight: 700, color: "#FFF", textTransform: "uppercase", letterSpacing: "0.05em", margin: "0 auto 12px auto", maxWidth: "80%" }}>AHMED MOHAMMED KHALIFA AL SADA</h3>
               <p style={{ fontSize: 11, color: G, textTransform: "uppercase", letterSpacing: "0.15em", fontWeight: 700, padding: "0 20px", margin: 0 }}>Board Member</p>
             </motion.div>

             {/* Mahmoud Salih */}
             <motion.div 
               initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.3 }} viewport={{ once: true }}
               style={{ background: "rgba(255,255,255,0.02)", border: `1px solid rgba(255,255,255,0.05)`, borderRadius: 8, overflow: "hidden", textAlign: "center", paddingBottom: 40, transition: "transform 0.4s", cursor: "default" }}
               whileHover={{ y: -10, borderColor: `${G}40` }}
             >
               <div style={{ width: "100%", height: 380, overflow: "hidden", marginBottom: 32, position: "relative" }}>
                 <img src="/mahmoud.png" alt="Mahmoud Salih" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
                 <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 30%)` }} />
                 <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, transparent, ${G}, transparent)` }} />
               </div>
               <h3 style={{ fontSize: 18, fontWeight: 700, color: "#FFF", textTransform: "uppercase", letterSpacing: "0.05em", margin: "0 0 12px 0" }}>Mahmoud Salih</h3>
               <p style={{ fontSize: 11, color: G, textTransform: "uppercase", letterSpacing: "0.15em", fontWeight: 700, padding: "0 20px", margin: 0 }}>Board Member</p>
             </motion.div>

           </div>
        </div>
      </section>

      {/* ─── VISION & VALUES ──────────────────────────────────── */}
      <section className="resp-section" style={{ background: DARK, padding: "160px 0", position: "relative" }}>
        <div style={{ position: "absolute", top: 0, right: 0, width: "40%", height: "40%", background: `radial-gradient(circle, ${G}05 0%, transparent 70%)` }} />
        <div className="resp-container" style={{ maxWidth: 1400, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
          
          {/* New Gold Centered Title */}
          <div style={{ textAlign: "center", marginBottom: 80 }}>
            <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 20 }}>Core Identity</span>
            <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 4vw, 54px)", textTransform: "uppercase", color: "#FFF", margin: 0 }}>
              INSTITUTIONAL <span style={goldText}>PRINCIPLES</span>
            </h2>
          </div>

          {/* VISON & MISSION BENTO */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginBottom: 80 }} className="mission-grid">
            <style>{`@media(max-width: 768px) { .mission-grid { grid-template-columns: 1fr !important; } }`}</style>
            
            <motion.div 
              whileHover={{ y: -5 }} transition={{ duration: 0.4 }}
              style={{ position: "relative", padding: "80px 48px", borderRadius: 8, overflow: "hidden", border: `1px solid ${G}30`, boxShadow: `0 20px 40px ${DARK2}` }}
            >
              <img src="/images/1247777.png" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.4 }} alt="Strategic Vision" />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${DARK} 0%, transparent 100%)` }} />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, ${DARK} 0%, transparent 100%)` }} />
              
              <div style={{ position: "relative", zIndex: 10 }}>
                 <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px", background: `${G}20`, border: `1px solid ${G}40`, borderRadius: 4, marginBottom: 32 }}>
                    <div style={{ width: 6, height: 6, borderRadius: "50%", background: G }} />
                    <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.3em", color: G, fontWeight: 800 }}>Strategic Vision</span>
                 </div>
                 <div style={{ fontSize: 26, fontWeight: 300, color: "#FFF", lineHeight: 1.5, textShadow: "0 4px 20px rgba(0,0,0,0.8)" }}>To become a respected mining group contributing to a sustainable future for Africa.</div>
              </div>
            </motion.div>

            <motion.div 
               whileHover={{ y: -5 }} transition={{ duration: 0.4 }}
              style={{ position: "relative", padding: "80px 48px", borderRadius: 8, overflow: "hidden", border: `1px solid ${G}30`, boxShadow: `0 20px 40px ${DARK2}` }}
            >
              <img src="/images/001.png" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.3 }} alt="Corporate Mission" />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${DARK} 0%, transparent 100%)` }} />
              <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to left, ${DARK} 0%, transparent 100%)` }} />
              
              <div style={{ position: "relative", zIndex: 10 }}>
                 <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px", background: `${G}20`, border: `1px solid ${G}40`, borderRadius: 4, marginBottom: 32 }}>
                    <div style={{ width: 6, height: 6, borderRadius: "50%", background: G }} />
                    <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.3em", color: G, fontWeight: 800 }}>Corporate Mission</span>
                 </div>
                 <div style={{ fontSize: 26, fontWeight: 300, color: "#FFF", lineHeight: 1.5, textShadow: "0 4px 20px rgba(0,0,0,0.8)" }}>To develop mining opportunities with discipline, responsibility, and long-term vision.</div>
              </div>
            </motion.div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 24 }}>
            {values.map((v, i) => (
              <motion.div 
                key={i} 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: i * 0.1 }}
                whileHover={{ backgroundColor: "rgba(198,160,79,0.05)", borderColor: G, y: -10, boxShadow: `0 10px 30px ${G}15` }}
                style={{ position: "relative", padding: "48px", background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: 8, transition: "all 0.5s cubic-bezier(0.2, 1, 0.3, 1)", overflow: "hidden" }}
              >
                <div style={{ position: "absolute", top: 0, right: 0, width: 80, height: 80, background: `radial-gradient(circle at top right, ${G}20 0%, transparent 70%)` }} />
                <div style={{ fontSize: 24, fontWeight: 800, color: G, marginBottom: 24, letterSpacing: "0.1em", fontFamily: "'Syncopate', sans-serif" }}>{v.badge}</div>
                <h4 style={{ fontSize: 16, fontWeight: 700, color: "#FFF", textTransform: "uppercase", marginBottom: 8, letterSpacing: "0.05em" }}>{v.title}</h4>
                <div style={{ fontSize: 10, color: G, textTransform: "uppercase", marginBottom: 20, letterSpacing: "0.2em", fontWeight: 700 }}>{v.sub}</div>
                <p style={{ fontSize: 14, lineHeight: 1.8, color: "rgba(255,255,255,0.45)", fontWeight: 300, margin: 0 }}>{v.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── THE ADVANTAGE ────────────────────────────────────── */}
      <section className="resp-section" style={{ position: "relative", background: "#000", padding: "160px 0", borderTop: "1px solid rgba(255,255,255,0.05)", overflow: "hidden" }}>
        <img 
          src="/images/1247777.png" 
          alt="Advantage Background"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.3, filter: "brightness(0.7)" }}
        />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to top, ${DARK} 0%, transparent 50%, ${DARK} 100%)` }} />
        <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, ${DARK} 0%, transparent 60%)` }} />
        
        <div className="resp-container" style={{ position: "relative", zIndex: 10, maxWidth: 1200, margin: "0 auto", padding: "0 64px" }}>
          <div style={{ textAlign: "center", marginBottom: 100 }}>
            <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 24 }}>Value Proposition</span>
            <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(28px, 3.5vw, 44px)", textTransform: "uppercase", color: "#FFF" }}>
              THE CROWN ROCK <span style={goldText}>ADVANTAGE</span>
            </h2>
          </div>
          <div className="adv-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(400px, 1fr))", gap: 32 }}>
            <style>{`@media(max-width: 480px) { .adv-grid { grid-template-columns: 1fr !important; } }`}</style>
            {whyItems.map((item, i) => (
              <AdvantageCard key={i} item={item} i={i} />
            ))}
          </div>
        </div>
      </section>

      {/* Decorative Footer Ornament */}
      <div style={{ background: DARK, padding: "100px 0", textAlign: "center" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 20, opacity: 0.4 }}>
          <div style={{ width: 100, height: 1, background: `linear-gradient(90deg, transparent, ${G})` }} />
          <div style={{ width: 10, height: 10, background: G, transform: "rotate(45deg)" }} />
          <div style={{ width: 100, height: 1, background: `linear-gradient(90deg, ${G}, transparent)` }} />
        </div>
      </div>
    </div>
  );
}