"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { BookOpen, Calendar, FileText } from "lucide-react";
import Link from "next/link";

export function MobileApp() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section
      ref={ref}
      className="py-24 lg:py-32 bg-obsidian-700 relative overflow-hidden"
    >
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-5">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, white 1px, transparent 0)`,
            backgroundSize: "60px 60px",
          }}
        />
      </div>

      <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Left - Content */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.7 }}
          >
            <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
              //DIASPORA PROPERTY MAGAZINE
            </p>
            <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
              YOUR GUIDE TO{" "}
              <span className="text-primary">DIASPORA INVESTING</span>
            </h2>
            <p className="mt-6 text-base text-white/60 leading-relaxed max-w-lg">
              Our quarterly magazine delivers in-depth market analysis, exclusive
              interviews with top developers, and detailed investment guides
              tailored for diaspora buyers looking to invest in Kenya.
            </p>
            <p className="mt-4 text-sm text-white/50 leading-relaxed max-w-lg">
              Each issue features expert insights, property spotlights, and
              actionable strategies to help you make informed investment decisions
              from anywhere in the world.
            </p>

            {/* Magazine Stats */}
            <div className="mt-8 flex items-center gap-6">
              <div className="flex items-center gap-2">
                <BookOpen size={16} className="text-primary" />
                <span className="text-white font-bold">96</span>
                <span className="text-white/50 text-sm">Pages</span>
              </div>
              <div className="h-6 w-px bg-white/20" />
              <div className="flex items-center gap-2">
                <FileText size={16} className="text-primary" />
                <span className="text-white font-bold">18+</span>
                <span className="text-white/50 text-sm">Articles</span>
              </div>
              <div className="h-6 w-px bg-white/20" />
              <div className="flex items-center gap-2">
                <Calendar size={16} className="text-primary" />
                <span className="text-white font-bold">Quarterly</span>
              </div>
            </div>

            {/* CTA Buttons */}
            <div className="mt-8 flex flex-wrap gap-4">
              <Link
                href="/magazine"
                className="flex items-center gap-3 bg-primary text-obsidian-900 px-6 py-3 font-semibold hover:bg-primary/90 transition-colors"
              >
                <BookOpen size={18} />
                <span>Read Latest Issue</span>
              </Link>
              <Link
                href="/contact"
                className="flex items-center gap-3 bg-white/10 border border-white/20 px-6 py-3 hover:bg-white/20 transition-colors text-white"
              >
                <span>Subscribe to Magazine</span>
              </Link>
            </div>
          </motion.div>

          {/* Right - Magazine Mockup */}
          <motion.div
            initial={{ opacity: 0, x: 40 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="flex justify-center"
          >
            <div className="relative w-full h-[520px]">
              <img
                src="/diaspora-magazine.jpg"
                alt="Diaspora Property Magazine cover"
                className="h-full w-full object-contain rounded-lg shadow-2xl"
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}