"use client";
import Link from "next/link";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef, use } from "react";
import { newsItems } from "@/data/siteData";

// ─── THEME TOKENS ───────────────────────────────────────────────────────────
const G = "#C9A84C";
const DARK = "#07070A";

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

export default function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = use(params);
  const article = newsItems.find((n) => n.slug === slug);
  const title = article?.title || slug.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
  const date = article?.date || "2026";
  const category = article?.category || "Article";

  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 0.4], [0, 100]);
  const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0]);

  return (
    <div style={{ background: DARK, color: "#FFF", minHeight: "100vh" }}>
      {/* ─── ARTICLE HERO ─────────────────────────────────────── */}
      <section style={{ position: "relative", height: "70vh", display: "flex", alignItems: "flex-end", paddingBottom: "80px", overflow: "hidden", background: "#000" }}>
        <motion.div style={{ position: "absolute", inset: 0, opacity: 0.5, y }}>
          <img 
            src={article?.image || "/images/hero_bg.png"} 
            alt={title}
            style={{ width: "100%", height: "100%", objectFit: "cover" }}
          />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 30%, #07070A 100%)" }} />
        </motion.div>

        <div style={{ position: "relative", zIndex: 10, width: "100%", maxWidth: 900, margin: "0 auto", padding: "0 40px" }}>
          <motion.div
            initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
            style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}
          >
            <span style={{ width: 24, height: 1, background: G }} />
            <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", fontWeight: 700, color: G }}>
              {category} — {date}
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            style={{
              fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 5vw, 64px)",
              fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.04em",
              textTransform: "uppercase", color: "#FFF", margin: 0
            }}
          >
            {title}
          </motion.h1>
        </div>
      </section>

      {/* ─── ARTICLE CONTENT ──────────────────────────────────── */}
      <section style={{ padding: "80px 0 160px", background: DARK }}>
        <div style={{ maxWidth: 900, margin: "0 auto", padding: "0 40px" }}>
          
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            style={{ 
              background: "rgba(255,255,255,0.02)", 
              border: "1px solid rgba(255,255,255,0.05)", 
              borderRadius: 4, 
              padding: "64px",
              boxShadow: "0 40px 100px rgba(0,0,0,0.5)"
            }}
          >
            {/* Body */}
            {(article as any)?.body ? (
              <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
                {(article as any).body.map((para: string, i: number) => (
                  <p 
                    key={i} 
                    style={{ 
                      fontSize: "19px", 
                      lineHeight: "1.9", 
                      color: "rgba(255,255,255,0.6)", 
                      margin: 0,
                      fontWeight: 300,
                      fontFamily: "'Inter', sans-serif"
                    }}
                  >
                    {para}
                  </p>
                ))}
              </div>
            ) : (
              <p style={{ fontSize: "20px", lineHeight: "1.9", color: "rgba(255,255,255,0.5)", fontWeight: 300, fontStyle: "italic" }}>
                {article?.excerpt || "Detailed briefing from Crown Rock Minerals operational and strategic teams."}
              </p>
            )}

            {/* Institutional Sign-off */}
            <div style={{ marginTop: "80px", paddingTop: "40px", borderTop: "1px solid rgba(255,255,255,0.05)" }}>
              <h3 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: 12, fontWeight: 700, color: G, textTransform: "uppercase", letterSpacing: "0.2em", marginBottom: 20 }}>
                About Crown Rock Minerals
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(255,255,255,0.35)", fontWeight: 300, margin: 0 }}>
                Crown Rock Minerals is an institutional mining group dedicated to responsible mineral development across core African corridors. By integration geological excellence with disciplined operational readiness, we unlock long-term industrial value for our partners and regional stakeholders.
              </p>
            </div>
          </motion.div>

          <div style={{ marginTop: "64px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Link
              href="/media"
              style={{ 
                display: "inline-flex", alignItems: "center", gap: 12, 
                fontSize: 11, fontWeight: 700, textTransform: "uppercase", 
                letterSpacing: "0.2em", color: G, textDecoration: "none" 
              }}
            >
              <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
              Back to Media Center
            </Link>

            <Link
              href="/contact"
              style={{ 
                padding: "16px 36px", background: G, color: "#000", 
                fontSize: 11, fontWeight: 800, textTransform: "uppercase", 
                letterSpacing: "0.2em", borderRadius: 4, textDecoration: "none" 
              }}
            >
              Inquiry
            </Link>
          </div>
        </div>
      </section>

      {/* Decorative Ornament */}
      <div style={{ padding: "80px 0", textAlign: "center", background: "#000", opacity: 0.3 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16 }}>
          <div style={{ width: 80, height: 1, background: `linear-gradient(90deg, transparent, ${G})` }} />
          <div style={{ width: 8, height: 8, background: G, transform: "rotate(45deg)" }} />
          <div style={{ width: 80, height: 1, background: `linear-gradient(90deg, ${G}, transparent)` }} />
        </div>
      </div>
    </div>
  );
}