"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Navbar } from "@/components/home/Navbar";
import { Footer } from "@/components/home/Footer";
import { PageHeader } from "@/components/shared/PageHeader";
import { BookOpen, Calendar, ArrowRight } from "lucide-react";

const latestIssue = {
  title: "DIASPORA PROPERTY MAGAZINE — ISSUE 24",
  subtitle: "The Kenya Real Estate Investment Guide 2026",
  description:
    "Our flagship quarterly issue featuring in-depth market analysis, exclusive interviews with top developers, and detailed investment guides for diaspora buyers.",
  image: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2053&auto=format&fit=crop",
  articles: 18,
  pages: 96,
  date: "Q2 2026",
};

const pastIssues = [
  {
    title: "Issue 23 — Market Outlook",
    date: "Q1 2026",
    image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=2070&auto=format&fit=crop",
    articles: 15,
  },
  {
    title: "Issue 22 — Land Investment Guide",
    date: "Q4 2025",
    image: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=2232&auto=format&fit=crop",
    articles: 14,
  },
  {
    title: "Issue 21 — Nairobi Special",
    date: "Q3 2025",
    image: "https://images.unsplash.com/photo-1611348524140-53c9a25263d6?q=80&w=2073&auto=format&fit=crop",
    articles: 16,
  },
  {
    title: "Issue 20 — Coast Properties",
    date: "Q2 2025",
    image: "https://images.unsplash.com/photo-1596005554384-d293674c91d7?q=80&w=2070&auto=format&fit=crop",
    articles: 12,
  },
];

const featuredArticles = [
  {
    title: "THE COMPLETE GUIDE TO BUYING LAND IN KENYA FROM ABROAD",
    excerpt: "Everything you need to know about land ownership, title deeds, and the buying process for diaspora investors.",
    category: "Guide",
    readTime: "15 min",
    image: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=2232&auto=format&fit=crop",
  },
  {
    title: "INTERVIEW: CEO OF CENTUM REAL ESTATE ON DIASPORA MARKET",
    excerpt: "Exclusive interview discussing how Kenya's top developer is tailoring products for overseas buyers.",
    category: "Interview",
    readTime: "12 min",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop",
  },
  {
    title: "NAIROBI METROPOLITAN: WHERE TO INVEST IN 2026",
    excerpt: "Our analysts break down the best neighborhoods for capital appreciation and rental yield.",
    category: "Analysis",
    readTime: "10 min",
    image: "https://images.unsplash.com/photo-1611348524140-53c9a25263d6?q=80&w=2073&auto=format&fit=crop",
  },
];

export default function MagazinePage() {
  const issuesRef = useRef(null);
  const issuesInView = useInView(issuesRef, { once: true, margin: "-50px" });
  const articlesRef = useRef(null);
  const articlesInView = useInView(articlesRef, { once: true, margin: "-50px" });

  return (
    <div className="flex flex-1 flex-col">
      <Navbar />

      <PageHeader
        title="Magazine"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Magazine" },
        ]}
        backgroundImage="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2053&auto=format&fit=crop"
      />

      {/* Latest Issue */}
      <section className="py-20 lg:py-28 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
            className="grid lg:grid-cols-2 gap-12 items-center"
          >
            {/* Image */}
            <div className="relative aspect-[3/4] max-h-[600px] overflow-hidden shadow-elevated group">
              <img
                src={latestIssue.image}
                alt={latestIssue.title}
                className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-obsidian-900/70 to-transparent" />
              <div className="absolute bottom-8 left-8 right-8">
                <span className="bg-primary text-white text-xs font-semibold px-3 py-1.5 uppercase tracking-wider">
                  Latest Issue
                </span>
                <h3 className="font-display text-2xl font-bold text-white mt-4">
                  {latestIssue.subtitle}
                </h3>
              </div>
            </div>

            {/* Content */}
            <div>
              <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
                //CURRENT ISSUE
              </p>
              <h2 className="font-display text-3xl sm:text-4xl font-bold text-obsidian-700 leading-tight">
                {latestIssue.title}
              </h2>
              <p className="mt-6 text-base text-obsidian-400 leading-relaxed">
                {latestIssue.description}
              </p>

              <div className="mt-8 flex items-center gap-8">
                <div className="text-center">
                  <p className="font-display text-2xl font-bold text-obsidian-700">{latestIssue.articles}</p>
                  <p className="text-xs text-obsidian-400 uppercase tracking-wider mt-1">Articles</p>
                </div>
                <div className="h-10 w-px bg-obsidian-200" />
                <div className="text-center">
                  <p className="font-display text-2xl font-bold text-obsidian-700">{latestIssue.pages}</p>
                  <p className="text-xs text-obsidian-400 uppercase tracking-wider mt-1">Pages</p>
                </div>
                <div className="h-10 w-px bg-obsidian-200" />
                <div className="text-center">
                  <p className="font-display text-2xl font-bold text-obsidian-700">{latestIssue.date}</p>
                  <p className="text-xs text-obsidian-400 uppercase tracking-wider mt-1">Published</p>
                </div>
              </div>

              <div className="mt-10 flex flex-wrap gap-4">
                <a
                  href="#"
                  className="bg-primary text-white px-8 py-4 text-sm font-semibold uppercase tracking-wider hover:bg-orange-600 transition-colors inline-flex items-center gap-2"
                >
                  <BookOpen size={16} /> Read Online
                </a>
                <a
                  href="#"
                  className="bg-obsidian-700 text-white px-8 py-4 text-sm font-semibold uppercase tracking-wider hover:bg-obsidian-900 transition-colors"
                >
                  Subscribe
                </a>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Featured Articles */}
      <section className="py-20 lg:py-24 bg-obsidian-50" ref={articlesRef}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={articlesInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7 }}
            className="mb-12"
          >
            <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
              //FEATURED ARTICLES
            </p>
            <h2 className="font-display text-3xl sm:text-4xl font-bold text-obsidian-700">
              FROM THIS <span className="text-primary">ISSUE</span>
            </h2>
          </motion.div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {featuredArticles.map((article, i) => (
              <motion.div
                key={article.title}
                initial={{ opacity: 0, y: 40 }}
                animate={articlesInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                className="group cursor-pointer bg-white border border-obsidian-100 hover:shadow-card transition-shadow"
              >
                <div className="relative aspect-[16/10] overflow-hidden">
                  <img
                    src={article.image}
                    alt={article.title}
                    className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  <div className="absolute top-4 left-4 bg-obsidian-700/80 text-white text-xs font-medium px-3 py-1.5 uppercase tracking-wider">
                    {article.category}
                  </div>
                </div>
                <div className="p-6">
                  <p className="text-xs text-obsidian-400 mb-2">{article.readTime} read</p>
                  <h3 className="font-display text-base font-bold text-obsidian-700 group-hover:text-primary transition-colors leading-snug">
                    {article.title}
                  </h3>
                  <p className="mt-2 text-sm text-obsidian-400 leading-relaxed line-clamp-2">
                    {article.excerpt}
                  </p>
                  <a className="inline-flex items-center gap-2 mt-4 text-xs font-semibold text-primary uppercase tracking-wider">
                    Read Article <ArrowRight size={12} />
                  </a>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Past Issues */}
      <section className="py-20 lg:py-24 bg-white" ref={issuesRef}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={issuesInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7 }}
            className="flex items-end justify-between mb-12"
          >
            <div>
              <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
                //ARCHIVE
              </p>
              <h2 className="font-display text-3xl sm:text-4xl font-bold text-obsidian-700">
                PAST <span className="text-primary">ISSUES</span>
              </h2>
            </div>
            <a
              href="#"
              className="hidden sm:inline-flex items-center gap-2 text-xs font-semibold text-primary uppercase tracking-wider"
            >
              View All <ArrowRight size={12} />
            </a>
          </motion.div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {pastIssues.map((issue, i) => (
              <motion.div
                key={issue.title}
                initial={{ opacity: 0, y: 30 }}
                animate={issuesInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                className="group cursor-pointer"
              >
                <div className="relative aspect-[3/4] overflow-hidden">
                  <img
                    src={issue.image}
                    alt={issue.title}
                    className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-obsidian-900/80 to-transparent" />
                  <div className="absolute bottom-4 left-4 right-4">
                    <p className="text-xs text-white/60 flex items-center gap-1.5 mb-2">
                      <Calendar size={12} /> {issue.date}
                    </p>
                    <h3 className="font-display text-sm font-bold text-white">
                      {issue.title}
                    </h3>
                    <p className="text-xs text-white/50 mt-1">{issue.articles} articles</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}
