"use client";

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

// ── Types ──────────────────────────────────────────────────────────────────
interface Division {
  slug: string;
  num: string;
  title: string;
  accent: string;
  description: string;
  details: string[];
  progress: number;
  image: string;
  summary: string;
}

// ── Data ───────────────────────────────────────────────────────────────────
const divisions: Division[] = [
  {
    slug: "gold-mining", num: "01", title: "Gold Mining", accent: "#C9A84C",
    description: "Developing gold assets through structured planning, operational discipline, and long-term production strategy.",
    summary: "Strategic gold extraction focusing on high-yield deposits and sustainable production cycles across African terrains.",
    image: "/images/20 (7).png",
    details: [
      "Systematic gold deposit evaluation and resource estimation",
      "Mine planning and production scheduling",
      "Extraction methodology optimization",
      "Long-term asset development and lifecycle management",
      "Grade control and quality assurance systems",
      "Production scalability and efficiency frameworks",
    ],
    progress: 71,
  },
  {
    slug: "mineral-exploration", num: "02", title: "Mineral Exploration", accent: "#A08B6E",
    description: "Turning geological potential into validated opportunity through technical analysis, field expertise, and data-driven assessment.",
    summary: "Systematic geological mapping and high-precision data synthesis to identify viable mineral corridors in under-explored regions.",
    image: "/images/Image_fx (1).png",
    details: [
      "Geological mapping and prospect identification",
      "Geophysical and geochemical survey programs",
      "Core drilling and sample analysis",
      "Resource modeling and estimation",
      "Exploration target prioritization",
      "Data management and technical reporting",
    ],
    progress: 77,
  },
  {
    slug: "greenfield", num: "03", title: "Greenfield Project Development", accent: "#6A9A7A",
    description: "Building mining opportunities from the ground up through phased planning, disciplined project structuring, and infrastructure readiness.",
    summary: "Phased de-risking and structured project advancement from early-stage discoveries to bankable feasibility and operational readiness.",
    image: "/images/greenfield_site.png",
    details: [
      "Site identification and preliminary feasibility",
      "Environmental and social baseline studies",
      "Permitting and regulatory compliance",
      "Infrastructure planning and design",
      "Capital structuring and investment readiness",
      "Phased development scheduling",
    ],
    progress: 83,
  },
  {
    slug: "mining-operations", num: "04", title: "Mining Operations", accent: "#5A8FB5",
    description: "Supporting extraction and site performance through efficient systems, operational continuity, and scalable execution.",
    summary: "Disciplined operational management focusing on safety, efficiency, and continuous performance optimization across all active sites.",
    image: "/images/hero-mine-bg.png",
    details: [
      "Open-pit and underground mining management",
      "Equipment selection and fleet optimization",
      "Production monitoring and reporting",
      "Operational safety management systems",
      "Cost control and efficiency benchmarking",
      "Workforce planning and site coordination",
    ],
    progress: 89,
  },
  {
    slug: "processing", num: "05", title: "Processing & Technical Services", accent: "#8A7AAA",
    description: "Delivering technical support across processing, field systems, geological review, and mining project readiness.",
    summary: "Advanced metallurgical services and technical advisory ensuring optimized mineral recovery and robust site technical standards.",
    image: "/images/processing_technical.png",
    details: [
      "Mineral processing flow sheet design",
      "Metallurgical testing and optimization",
      "Laboratory services and quality control",
      "Technical due diligence and advisory",
      "Process engineering and commissioning",
      "Performance monitoring and troubleshooting",
    ],
    progress: 95,
  },
  {
    slug: "infrastructure", num: "06", title: "Infrastructure & Site Support", accent: "#B0886A",
    description: "Strengthening mining environments through practical logistics, site services, operational groundwork, and support systems.",
    summary: "Critical site support systems providing the logistical and structural foundation for safe and efficient mining activities in remote areas.",
    image: "/images/20 (6).png",
    details: [
      "Access road and site infrastructure development",
      "Power generation and distribution",
      "Water management systems",
      "Camp and accommodation facilities",
      "Supply chain and logistics coordination",
      "Telecommunications and IT infrastructure",
    ],
    progress: 65,
  },
];

// ── Icons ──────────────────────────────────────────────────────────────────
function ArrowIcon({ size = 12 }: { size?: number }) {
  return (
    <svg width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M17 8l4 4m0 0l-4 4m4-4H3" />
    </svg>
  );
}

function CheckIcon({ color }: { color: string }) {
  return (
    <svg width="10" height="10" fill="none" stroke={color} strokeWidth="2.5"
      strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

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

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

  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.6 }}>
        <img 
          src="/images/001.png" 
          alt="Crown Rock Divisions"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }}
        />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(6,6,6,0.05) 0%, rgba(6,6,6,0.8) 95%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at center, transparent, rgba(0,0,0,0.25))" }} />
      </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: "#C9A84C" }} />
          <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", fontWeight: 700, color: "#C9A84C" }}>Our Capabilities</span>
        </motion.div>

        <motion.h1
          initial={{ opacity: 0, y: 48 }} animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1.1, delay: 0.1 }}
          style={{
            fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(36px, 6vw, 76px)",
            fontWeight: 700, lineHeight: 1.0, letterSpacing: "-0.02em",
            margin: "0 0 44px", textTransform: "uppercase", color: "#FFF"
          }}
        >
          BUSINESS<br />
          <span style={goldText}>DIVISIONS</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 }}
        >
          Across exploration, project development, and operational delivery, our divisions provide the technical expertise and structured planning required to advance mining value.
        </motion.p>
      </motion.div>

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

// ── SECTION INTRO ──────────────────────────────────────────────────────────
function SectionIntro() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section id="overview" ref={ref} style={s.intro} className="resp-section">
      <motion.div 
        initial={{ opacity: 0, y: 40 }}
        animate={isInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.9 }}
        style={s.introInner}
      >
        <div style={{ position: "relative" }}>
          <p style={s.introEyebrow}>Strategy & Delivery</p>
          <h2 style={{ ...s.introTitle, fontFamily: "'Syncopate', sans-serif", fontWeight: 700 }}>
            SIX DIVISIONS.<br />
            <span style={{ color: "#C9A84C" }}>ONE MISSION.</span>
          </h2>
          <div style={{ position: "absolute", left: -64, top: 40, width: 32, height: 1, background: "#C9A84C33" }} />
        </div>
        <div>
          <p style={s.introDesc}>
            Across exploration, project development, and operational delivery, our divisions
            provide the technical expertise and structured planning required to advance mining
            value. Each division operates with precision, accountability, and a long-term perspective.
          </p>
          <div style={s.introStats}>
            {[
              { value: "06", label: "Active Divisions" },
              { value: "80%", label: "Avg. Readiness" },
              { value: "36+", label: "Capabilities" },
            ].map((stat, i) => (
              <motion.div 
                key={stat.label} 
                initial={{ opacity: 0, scale: 0.9 }}
                animate={isInView ? { opacity: 1, scale: 1 } : {}}
                transition={{ delay: 0.2 * i + 0.3 }}
                style={s.statItem}
              >
                <span style={s.statValue}>{stat.value}</span>
                <span style={s.statLabel}>{stat.label}</span>
              </motion.div>
            ))}
          </div>
        </div>
      </motion.div>
    </section>
  );
}

// ── DIVISION BLOCK ─────────────────────────────────────────────────────────
function DivisionBlock({ division, index }: { division: Division; index: number }) {
  const isReverse = index % 2 !== 0;
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const [accentHover, setAccentHover] = useState(false);

  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });
  const imageY = useTransform(scrollYProgress, [0, 1], [-40, 40]);

  return (
    <section
      id={division.slug}
      ref={ref}
      style={s.divBlock}
      className="div-block"
    >
      {/* Background Watermark */}
      <motion.span
        style={{
          ...s.watermark,
          ...(isReverse ? { left: 48, x: -20 } : { right: 48, x: 20 }),
          opacity: isInView ? 0.04 : 0,
        }}
      >
        {division.num}
      </motion.span>

      <div className="div-inner resp-container" style={{ ...s.divInner, direction: isReverse ? "rtl" : "ltr" }}>

        {/* ── Text Content ── */}
        <motion.div
          initial={{ opacity: 0, x: isReverse ? 40 : -40 }}
          animate={isInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 1, ease: "easeOut" }}
          style={{ direction: "ltr", alignSelf: "center" }}
          onMouseEnter={() => setAccentHover(true)}
          onMouseLeave={() => setAccentHover(false)}
        >
          <div style={s.divPill}>
            <div style={{ ...s.divPillDot, background: division.accent }} />
            <span style={{ ...s.divPillNum, color: division.accent }}>{division.num}</span>
            <span style={s.divPillSep}>—</span>
            <span style={s.divPillSlug}>{division.slug.replace(/-/g, " ")}</span>
          </div>

          <h2 style={s.divTitle}>{division.title}</h2>

          <motion.div 
            animate={{ width: accentHover ? 96 : 48 }}
            style={{ ...s.divLine, background: division.accent }} 
          />

          <p style={s.divDesc}>{division.description}</p>
          <p style={s.divSummary}>{division.summary}</p>

          <div style={s.readinessBadge}>
            <div style={s.readinessTrack}>
              <motion.div 
                initial={{ width: 0 }}
                whileInView={{ width: `${division.progress}%` }}
                viewport={{ once: true }}
                transition={{ duration: 1.8, delay: 0.5, ease: "circOut" }}
                style={{ ...s.readinessFill, background: division.accent }} 
              />
            </div>
            <span style={{ ...s.readinessLabel, color: division.accent }}>
              {division.progress}% Operational Readiness
            </span>
          </div>

          <motion.a 
            href="/contact" 
            whileHover={{ x: 8 }}
            style={{ ...s.divCta, color: division.accent, borderColor: division.accent + "44" }}
          >
            Discuss Operations <ArrowIcon />
          </motion.a>
        </motion.div>

        {/* ── Image & Card Container ── */}
        <div style={{ direction: "ltr", position: "relative" }}>
          
          {/* Main Cinematic Image */}
          <motion.div 
            style={{ ...s.imageWrap, y: imageY }}
            initial={{ opacity: 0, scale: 1.1 }}
            animate={isInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 1.5, ease: "easeOut" }}
          >
            <div style={s.imageOverlay} />
            <img 
              src={division.image} 
              alt={division.title} 
              style={s.image} 
            />
          </motion.div>

          {/* Overlapping Capability Card */}
          <motion.div 
            initial={{ opacity: 0, y: 60 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}
            className="div-card"
            style={{ 
              ...s.divCard, 
              ...(isReverse ? { right: "auto", left: -40 } : { left: "auto", right: -40 })
            }}
          >
            <div style={{ height: 3, background: `linear-gradient(90deg,${division.accent},transparent)` }} />

            <div style={s.cardHeader}>
              <div>
                <span style={{ ...s.cardLabel, color: division.accent }}>Capabilities</span>
                <p style={s.cardMeta}>Optimized · {division.details.length} Items</p>
              </div>
              <div style={s.cardBadge}>
                <div style={{ ...s.statusDot, background: division.accent }} className="status-dot" />
                <span style={{ ...s.cardBadgeText, color: division.accent }}>VERIFIED</span>
              </div>
            </div>

            <ul style={s.capList}>
              {division.details.map((detail, i) => (
                <motion.li 
                  key={detail} 
                  initial={{ opacity: 0, x: 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  whileHover={{ x: 8, backgroundColor: "rgba(201,168,76,0.05)", borderLeftColor: division.accent }}
                  transition={{ delay: 0.1 * i + 0.6 }}
                  style={{ ...s.capItem, borderLeft: "2px solid transparent" }}
                >
                  <div style={{ ...s.capIcon, borderColor: division.accent + "44" }}>
                    <CheckIcon color={division.accent} />
                  </div>
                  <span style={s.capText}>{detail}</span>
                </motion.li>
              ))}
            </ul>

            <div style={s.cardFooter}>
              <div style={s.progressRow}>
                <div style={s.progressTrack}>
                  <motion.div 
                    initial={{ width: 0 }}
                    whileInView={{ width: `${division.progress}%` }}
                    style={{ ...s.progressFill, background: `linear-gradient(90deg,${division.accent}22,${division.accent})` }} 
                  />
                </div>
                <span style={{ ...s.progressValue, color: division.accent }}>{division.progress}%</span>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Ornamental divider */}
      <div className="divider resp-container" style={s.divider} aria-hidden="true">
        <div style={s.dividerLine} />
        <div style={{ ...s.dividerDiamond, borderColor: division.accent + "50" }} />
        <div style={s.dividerLine} />
      </div>
    </section>
  );
}



// ── PAGE ───────────────────────────────────────────────────────────────────
export default function DivisionsPage() {
  return (
    <>
      <style>{globalCss}</style>
      <main style={{ background: "#060606", minHeight: "100vh" }}>
        <Hero />
        <SectionIntro />
        <section id="divisions" aria-label="Business Divisions">
          {divisions.map((division, i) => (
            <DivisionBlock key={division.slug} division={division} index={i} />
          ))}
        </section>
      </main>
    </>
  );
}

// ── Global CSS ─────────────────────────────────────────────────────────────
const globalCss = `
  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Syncopate:wght@400;700&family=Inter:wght@300;400;500;700&display=swap');
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:#060606; color:#E8E6DF; font-family:'Inter',sans-serif; font-weight:300; overflow-x:hidden; }
  
  @keyframes pulse { 0%,100%{opacity:1; scale:1} 50%{opacity:.4; scale:0.8} }
  .status-dot { animation: pulse 2.5s ease-in-out infinite; }
  
  .btn-primary:hover   { background:#E8C97A !important; }
  .btn-secondary:hover { border-color:#C9A84C !important; color:#E8C97A !important; }

  @media (max-width:1100px) {
    .div-card { position: relative !important; right: 0 !important; left: 0 !important; margin: -40px 24px 0 !important; max-width: none !important; }
    .image-wrap { margin-bottom: 20px !important; }
  }

  @media (max-width:900px) {
    .div-inner { grid-template-columns:1fr !important; gap:40px !important; direction:ltr !important; }
    .hero-index { display:none !important; }
    .hero-body  { flex-direction:column !important; }
    .intro-inner { grid-template-columns:1fr !important; gap: 40px !important; }
  }
  
  /* Unified Responsive Container Additions */
  @media (max-width: 768px) {
    .resp-section { padding: 80px 0 !important; }
    .resp-container { padding: 0 24px !important; }
    .div-block { padding: 80px 0 !important; }
    .div-card { margin: -20px 16px 0 !important; padding: 16px !important; }
    .divider { padding: 40px 24px 0 !important; }
  }
`;

// ── Inline Styles ──────────────────────────────────────────────────────────
const s: Record<string, React.CSSProperties> = {
  hero: {
    minHeight: "100vh", display: "flex", flexDirection: "column",
    padding: "0 64px 64px", position: "relative", overflow: "hidden",
    borderBottom: "1px solid #161616",
    background: "radial-gradient(ellipse at 50% -20%, #1a1505 0%, #060606 70%)",
  },
  heroGridBg: {
    position: "absolute", inset: 0,
    backgroundImage: "linear-gradient(rgba(201,168,76,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.02) 1px,transparent 1px)",
    backgroundSize: "80px 80px",
  },
  heroGlow: {
    position: "absolute", bottom: -300, left: "50%", transform: "translateX(-50%)",
    width: 1200, height: 600,
    background: "radial-gradient(ellipse,rgba(201,168,76,0.08) 0%,transparent 70%)",
    pointerEvents: "none",
  },
  heroTopBar: {
    display: "flex", alignItems: "center", gap: 24,
    padding: "40px 0", borderBottom: "1px solid rgba(255,255,255,0.03)", marginBottom: 80,
  },
  heroTopLabel: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 10, letterSpacing: "0.45em",
    color: "#C9A84C", textTransform: "uppercase", whiteSpace: "nowrap", fontWeight: 700,
  },
  heroTopLine: { flex: 1, height: 1, background: "rgba(255,255,255,0.05)", transformOrigin: "left" },
  heroTopCount: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 10, letterSpacing: "0.45em",
    color: "rgba(255,255,255,0.2)", textTransform: "uppercase", whiteSpace: "nowrap",
  },
  heroBody: { display: "flex", gap: 100, flex: 1, alignItems: "flex-end" },
  heroLeft: { flex: 1 },
  heroEyebrow: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 11, letterSpacing: "0.4em",
    color: "#8A6E2E", textTransform: "uppercase", marginBottom: 32,
  },
  heroTitle: {
    fontFamily: "'Cormorant Garamond',serif", fontSize: "clamp(60px,10vw,110px)",
    fontWeight: 300, lineHeight: 0.9, letterSpacing: "-0.04em",
    color: "#E8E6DF", marginBottom: 36, maxWidth: 800,
  },
  heroSubtitle: {
    fontSize: 18, fontWeight: 300, lineHeight: 1.8, color: "rgba(255,255,255,0.4)",
    maxWidth: 520, borderLeft: "2px solid #C9A84C33", paddingLeft: 24, marginBottom: 52,
  },
  heroActions: { display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap" },
  heroCtaPrimary: {
    display: "inline-flex", alignItems: "center", gap: 12,
    fontFamily: "'Syncopate',sans-serif", fontSize: 10, letterSpacing: "0.25em",
    color: "#000", background: "#C9A84C", textDecoration: "none",
    textTransform: "uppercase", padding: "18px 40px", fontWeight: 700,
    boxShadow: "0 10px 40px rgba(201,168,76,0.25)",
  },
  heroCtaSecondary: {
    display: "inline-flex", alignItems: "center", gap: 12,
    fontFamily: "'Syncopate',sans-serif", fontSize: 11, letterSpacing: "0.25em",
    color: "#C9A84C", textDecoration: "none", textTransform: "uppercase",
    paddingBottom: 6, borderBottom: "2px solid rgba(201,168,76,0.2)", fontWeight: 700,
  },
  heroIndex: {
    width: 280, flexShrink: 0, display: "flex", flexDirection: "column", gap: 4, paddingBottom: 16,
  },
  heroIndexItem: {
    display: "flex", alignItems: "center", gap: 16,
    padding: "16px 0", borderBottom: "1px solid rgba(255,255,255,0.03)",
    textDecoration: "none", transition: "padding 0.3s ease",
  },
  heroIndexNum: {
    fontFamily: "'Cormorant Garamond',serif", fontSize: 24, fontWeight: 300, minWidth: 32,
  },
  heroIndexTitle: {
    fontFamily: "'Inter',sans-serif", fontSize: 12, fontWeight: 400,
    color: "rgba(255,255,255,0.4)", letterSpacing: "0.05em", flex: 1, textTransform: "uppercase",
  },
  heroScroll: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 11, letterSpacing: "0.3em",
    color: "rgba(255,255,255,0.2)", textTransform: "uppercase", display: "flex",
    alignItems: "center", gap: 16, marginTop: 64,
  },
  heroScrollLine: { width: 1, height: 40, background: "linear-gradient(to bottom, #C9A84C, transparent)" },

  // SECTION INTRO
  intro: { borderBottom: "1px solid #161616", padding: "120px 64px", background: "#080808" },
  introInner: {
    maxWidth: 1200, margin: "0 auto",
    display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 100, alignItems: "start",
  },
  introEyebrow: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 9, letterSpacing: "0.5em",
    color: "#8A6E2E", textTransform: "uppercase", marginBottom: 28, fontWeight: 700,
  },
  introTitle: {
    fontFamily: "'Syncopate',sans-serif", fontSize: "clamp(36px,5vw,56px)", textTransform: "uppercase",
    fontWeight: 700, lineHeight: 1.05, color: "#E8E6DF",
  },
  introDesc: { fontSize: 16, lineHeight: 1.9, color: "rgba(255,255,255,0.4)", marginBottom: 52 },
  introStats: { display: "flex", gap: 64 },
  statItem: { display: "flex", flexDirection: "column", gap: 8 },
  statValue: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 52, fontWeight: 700,
    color: "#C9A84C", lineHeight: 1,
  },
  statLabel: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 9, letterSpacing: "0.4em",
    color: "rgba(255,255,255,0.25)", textTransform: "uppercase", fontWeight: 700,
  },

  // DIVISION BLOCK
  divBlock: {
    padding: "160px 0", borderBottom: "1px solid #111",
    position: "relative", overflow: "hidden",
  },
  watermark: {
    position: "absolute", top: 100,
    fontFamily: "'Syncopate',sans-serif",
    fontSize: 280, fontWeight: 700,
    color: "#C9A84C", lineHeight: 1,
    pointerEvents: "none", userSelect: "none",
    transition: "opacity 1s ease, transform 1s ease",
  },
  divInner: {
    maxWidth: 1400, margin: "0 auto", padding: "0 64px",
    display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 70, alignItems: "start",
  },

  // Content Column
  divPill: {
    display: "inline-flex", alignItems: "center", gap: 12,
    background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)", borderRadius: 4,
    padding: "8px 18px", marginBottom: 32,
  },
  divPillDot: { width: 6, height: 6, borderRadius: "50%", flexShrink: 0 },
  divPillNum: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 9, letterSpacing: "0.3em", textTransform: "uppercase", fontWeight: 700,
  },
  divPillSep: { color: "rgba(255,255,255,0.1)", fontSize: 12 },
  divPillSlug: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 9, letterSpacing: "0.2em",
    textTransform: "uppercase", color: "rgba(255,255,255,0.3)",
  },
  divTitle: {
    fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(24px, 3.5vw, 42px)", textTransform: "uppercase",
    fontWeight: 700, lineHeight: 1.1, letterSpacing: "0.02em",
    color: "#E8E6DF", marginBottom: 28,
  },
  divLine: { height: 2, marginBottom: 36, transition: "width 0.8s ease" },
  divDesc: { fontSize: 18, lineHeight: 1.9, color: "rgba(255,255,255,0.5)", marginBottom: 20, maxWidth: 480, fontWeight: 400 },
  divSummary: { fontSize: 16, lineHeight: 1.8, color: "rgba(255,255,255,0.25)", marginBottom: 40, maxWidth: 460, fontStyle: "italic" },
  readinessBadge: { display: "flex", alignItems: "center", gap: 16, marginBottom: 48 },
  readinessTrack: {
    width: 100, height: 2, background: "rgba(255,255,255,0.05)",
    position: "relative", overflow: "hidden", borderRadius: 1,
  },
  readinessFill: { position: "absolute", left: 0, top: 0, height: "100%", borderRadius: 1 },
  readinessLabel: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 9,
    letterSpacing: "0.25em", textTransform: "uppercase", fontWeight: 700,
  },
  divCta: {
    display: "inline-flex", alignItems: "center", gap: 12,
    fontFamily: "'Syncopate',sans-serif", fontSize: 11, letterSpacing: "0.3em",
    textDecoration: "none", textTransform: "uppercase", fontWeight: 700,
    padding: "16px 32px", border: "1px solid", borderRadius: 4,
    transition: "all 0.3s ease",
  },

  // Image/Card Column
  imageWrap: {
    width: "100%", aspectRatio: "16/10",
    borderRadius: 8, overflow: "hidden",
    position: "relative", zIndex: 0,
    boxShadow: "0 40px 100px rgba(0,0,0,0.8)",
  },
  image: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
  imageOverlay: { 
    position: "absolute", inset: 0, 
    background: "linear-gradient(to top, rgba(6,6,6,0.5) 0%, transparent 60%), linear-gradient(to right, rgba(6,6,6,0.3) 0%, transparent 50%)",
    zIndex: 1, pointerEvents: "none"
  },
  divCard: {
    position: "absolute", bottom: 40,
    width: "100%", maxWidth: 360,
    background: "rgba(6, 6, 6, 0.35)", backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
    border: "1px solid rgba(201,168,76,0.25)",
    borderRadius: 8, overflow: "hidden", zIndex: 2,
    boxShadow: "0 30px 70px rgba(0,0,0,0.5), inset 0 0 40px rgba(201,168,76,0.05)",
  },
  cardHeader: {
    padding: "28px 32px", borderBottom: "1px solid rgba(255,255,255,0.05)",
    display: "flex", alignItems: "flex-start", justifyContent: "space-between",
  },
  cardLabel: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 10, letterSpacing: "0.4em",
    textTransform: "uppercase", display: "block", marginBottom: 8, fontWeight: 700,
  },
  cardMeta: { fontSize: 12, color: "rgba(255,255,255,0.2)", letterSpacing: "0.05em" },
  cardBadge: {
    display: "flex", alignItems: "center", gap: 8,
    background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.05)", padding: "6px 12px", borderRadius: 4,
  },
  cardBadgeText: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 9, letterSpacing: "0.25em", fontWeight: 700,
  },
  statusDot: { width: 6, height: 6, borderRadius: "50%", flexShrink: 0 },
  capList: { listStyle: "none", padding: "10px 0" },
  capItem: {
    padding: "14px 32px", display: "flex", alignItems: "flex-start", gap: 16,
    borderBottom: "1px solid rgba(255,255,255,0.02)",
  },
  capIcon: {
    marginTop: 3, flexShrink: 0, width: 22, height: 22,
    border: "1px solid", borderRadius: "50%",
    display: "flex", alignItems: "center", justifyContent: "center",
  },
  capText: { fontSize: 15, lineHeight: 1.6, color: "rgba(255,255,255,0.4)", fontWeight: 400 },
  cardFooter: {
    padding: "20px 32px", borderTop: "1px solid rgba(255,255,255,0.05)",
    background: "rgba(255,255,255,0.01)",
  },
  progressRow: { display: "flex", alignItems: "center", gap: 16 },
  progressTrack: {
    flex: 1, height: 3, background: "rgba(255,255,255,0.05)",
    position: "relative", overflow: "hidden", borderRadius: 2,
  },
  progressFill: { position: "absolute", left: 0, top: 0, height: "100%", borderRadius: 2 },
  progressValue: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 11,
    letterSpacing: "0.15em", flexShrink: 0, fontWeight: 700,
  },

  // Divider
  divider: {
    padding: "80px 64px 0", display: "flex", alignItems: "center", gap: 24,
    maxWidth: 1200, margin: "0 auto",
  },
  dividerLine: { flex: 1, height: 1, background: "linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)" },
  dividerDiamond: { width: 8, height: 8, border: "1px solid", transform: "rotate(45deg)", flexShrink: 0 },

  // CTA
  cta: {
    padding: "160px 64px", textAlign: "center",
    position: "relative", overflow: "hidden", background: "#080808",
  },
  ctaGlow: {
    position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)",
    width: 1000, height: 500,
    background: "radial-gradient(ellipse,rgba(201,168,76,0.12) 0%,transparent 70%)",
    pointerEvents: "none",
  },
  ctaGrid: {
    position: "absolute", inset: 0,
    backgroundImage: "linear-gradient(rgba(201,168,76,0.01) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.01) 1px,transparent 1px)",
    backgroundSize: "60px 60px",
  },
  ctaEyebrow: {
    fontFamily: "'Syncopate',sans-serif", fontSize: 11, letterSpacing: "0.5em",
    color: "#8A6E2E", textTransform: "uppercase", marginBottom: 32, position: "relative", fontWeight: 700,
  },
  ctaTitle: {
    fontFamily: "'Syncopate',sans-serif", fontSize: "clamp(36px,5vw,60px)", textTransform: "uppercase",
    fontWeight: 700, color: "#E8E6DF", lineHeight: 1.05,
    maxWidth: 800, margin: "0 auto 32px", position: "relative",
  },
  ctaSubtext: {
    fontSize: 18, color: "rgba(255,255,255,0.3)", maxWidth: 500, margin: "0 auto 64px",
    lineHeight: 1.8, position: "relative",
  },
  ctaBtns: {
    display: "flex", alignItems: "center", justifyContent: "center",
    gap: 24, flexWrap: "wrap", position: "relative",
  },
  btnPrimary: {
    display: "inline-flex", alignItems: "center", gap: 14,
    background: "#C9A84C", color: "#000",
    fontFamily: "'Syncopate',sans-serif", fontSize: 10, letterSpacing: "0.3em",
    textTransform: "uppercase", padding: "20px 48px", fontWeight: 700,
    border: "none", cursor: "pointer", transition: "all 0.3s ease",
    boxShadow: "0 10px 40px rgba(201,168,76,0.3)",
  },
  btnSecondary: {
    display: "inline-flex", alignItems: "center", gap: 14,
    background: "transparent", color: "#C9A84C",
    fontFamily: "'Syncopate',sans-serif", fontSize: 10, letterSpacing: "0.3em",
    textTransform: "uppercase", padding: "19px 48px",
    border: "1px solid rgba(201,168,76,0.4)", cursor: "pointer", fontWeight: 700,
    transition: "all 0.3s ease",
  },
};