"use client";

import { motion, useInView } from "framer-motion";
import { useRef, useState } from "react";
import { Navbar } from "@/components/home/Navbar";
import { Footer } from "@/components/home/Footer";
import { Team } from "@/components/home/Team";
import { Testimonials } from "@/components/home/Testimonials";
import { PageHeader } from "@/components/shared/PageHeader";
import { CheckCircle, Play, ArrowRight } from "lucide-react";

const tabs = ["Mission", "Vision", "Goal"] as const;
const tabContent = {
  Mission: {
    title: "Our Mission",
    text: "To empower the Kenyan diaspora with trusted, transparent access to property investment opportunities back home. We bridge the distance between ambition and ownership, ensuring every investor can build wealth with confidence.",
    points: [
      "Connect diaspora investors with vetted property companies",
      "Provide transparent, verified property listings and market data",
    ],
  },
  Vision: {
    title: "Our Vision",
    text: "To become the leading platform for diaspora property investment in Africa, setting the standard for trust, transparency, and investor protection in cross-border real estate transactions.",
    points: [
      "Expand across all African diaspora communities globally",
      "Create an ecosystem of trust in cross-border property investment",
    ],
  },
  Goal: {
    title: "Our Goal",
    text: "To facilitate over KES 10 billion in diaspora property investment by 2030, while maintaining zero fraud cases through our rigorous vetting process and ongoing company monitoring.",
    points: [
      "KES 10B+ facilitated investments by 2030",
      "Zero fraud through rigorous vetting and monitoring",
    ],
  },
};

const services = [
  {
    title: "PROPERTY LISTINGS",
    description:
      "Browse verified land, homes, and commercial properties across Kenya. Every listing is vetted for authenticity and legal compliance.",
    icon: "🏠",
  },
  {
    title: "COMPANY DIRECTORY",
    description:
      "Access our curated directory of vetted real estate companies. Each company undergoes thorough background checks and ongoing monitoring.",
    icon: "🏢",
  },
  {
    title: "INVESTMENT GUIDANCE",
    description:
      "Expert articles, market analysis, and step-by-step investment guides tailored specifically for diaspora investors.",
    icon: "📊",
  },
];

function AnimateOnScroll({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 40 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.7, delay, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}

export default function AboutPage() {
  const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>("Mission");
  const storyRef = useRef(null);
  const storyInView = useInView(storyRef, { once: true, margin: "-100px" });
  const servicesRef = useRef(null);
  const servicesInView = useInView(servicesRef, { once: true, margin: "-100px" });

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

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

      {/* Our Story Section */}
      <section className="py-24 lg:py-32 bg-white" ref={storyRef}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
            {/* Left - Image with Video Play */}
            <motion.div
              initial={{ opacity: 0, x: -40 }}
              animate={storyInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.7 }}
              className="relative"
            >
              <div className="relative aspect-[4/5] overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?q=80&w=2070&auto=format&fit=crop"
                  alt="Our Story"
                  className="h-full w-full object-cover"
                />
                {/* Play Button */}
                <button className="absolute inset-0 flex items-center justify-center">
                  <div className="w-20 h-20 bg-primary flex items-center justify-center hover:bg-orange-600 transition-colors">
                    <Play size={28} className="text-white ml-1" fill="white" />
                  </div>
                </button>
              </div>
              {/* Floating Badge */}
              <div className="absolute -top-4 -right-4 lg:top-8 lg:-right-8 bg-obsidian-700 text-white p-5 text-center">
                <p className="font-display text-xs uppercase tracking-wider text-white/60">
                  Client Centric
                </p>
                <p className="font-display text-sm font-bold mt-1 uppercase tracking-wider">
                  Approach
                </p>
              </div>
            </motion.div>

            {/* Right - Content with Tabs */}
            <motion.div
              initial={{ opacity: 0, x: 40 }}
              animate={storyInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.7, delay: 0.2 }}
            >
              <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
                //DISCOVER OUR STORY
              </p>
              <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-obsidian-700 leading-tight">
                UNVEILING DIASPORA PROPERTY&apos;S{" "}
                <span className="text-primary">JOURNEY</span>
              </h2>

              {/* Tabs */}
              <div className="mt-8 flex gap-0">
                {tabs.map((tab) => (
                  <button
                    key={tab}
                    onClick={() => setActiveTab(tab)}
                    className={`px-6 py-3 text-sm font-semibold uppercase tracking-wider transition-all border-b-2 ${
                      activeTab === tab
                        ? "border-primary text-primary"
                        : "border-transparent text-obsidian-400 hover:text-obsidian-700"
                    }`}
                  >
                    {tab}
                  </button>
                ))}
              </div>

              {/* Tab Content */}
              <div className="mt-6">
                <p className="text-base text-obsidian-400 leading-relaxed">
                  {tabContent[activeTab].text}
                </p>
                <ul className="mt-5 space-y-3">
                  {tabContent[activeTab].points.map((point) => (
                    <li key={point} className="flex items-start gap-3">
                      <CheckCircle size={18} className="text-primary mt-0.5 flex-shrink-0" />
                      <span className="text-sm text-obsidian-500">{point}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-24 lg:py-32 bg-obsidian-50" ref={servicesRef}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={servicesInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7 }}
            className="text-center mb-16"
          >
            <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
              //OUR SERVICES
            </p>
            <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-obsidian-700 leading-tight">
              WHAT WE <span className="text-primary">OFFER</span>
            </h2>
          </motion.div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, i) => (
              <motion.div
                key={service.title}
                initial={{ opacity: 0, y: 40 }}
                animate={servicesInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.6, delay: i * 0.1 }}
                className="group bg-white p-8 border border-obsidian-100 hover:border-primary/30 transition-all hover:shadow-card"
              >
                <div className="text-4xl mb-5">{service.icon}</div>
                <h3 className="font-display text-lg font-bold text-obsidian-700 uppercase tracking-wide">
                  {service.title}
                </h3>
                <p className="mt-3 text-sm text-obsidian-400 leading-relaxed">
                  {service.description}
                </p>
                <a
                  href="#"
                  className="inline-flex items-center gap-2 mt-5 text-xs font-semibold text-primary uppercase tracking-wider group-hover:gap-3 transition-all"
                >
                  Read More <ArrowRight size={12} />
                </a>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <Team />

      {/* Testimonials */}
      <Testimonials />

      {/* Footer */}
      <Footer />
    </div>
  );
}