"use client";

import { Navbar } from "@/components/home/Navbar";
import { Footer } from "@/components/home/Footer";
import { PageHeader } from "@/components/shared/PageHeader";
import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Briefcase, Heart, Zap, Globe, TrendingUp, Users, Clock } from "lucide-react";

const benefits = [
  { icon: <Globe size={24} />, title: "Remote-First", description: "Work from anywhere in the world with flexible hours." },
  { icon: <TrendingUp size={24} />, title: "Growth", description: "Career development opportunities and learning budgets." },
  { icon: <Heart size={24} />, title: "Health & Wellness", description: "Comprehensive health insurance and wellness programs." },
  { icon: <Users size={24} />, title: "Team Culture", description: "Collaborative, diverse team passionate about impact." },
  { icon: <Zap size={24} />, title: "Impact", description: "Help diaspora communities invest confidently back home." },
  { icon: <Clock size={24} />, title: "Time Off", description: "Generous leave policy including parental leave." },
];

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 CareersPage() {
  return (
    <div className="flex flex-1 flex-col">
      <Navbar />

      <PageHeader
        title="Careers"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Careers" },
        ]}
        backgroundImage="https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop"
      />

      {/* Why Join Us */}
      <section className="py-20 lg:py-24 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <AnimateOnScroll>
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="font-display text-3xl sm:text-4xl font-bold text-obsidian-900 uppercase tracking-tight">
                Why Join Diaspora Property?
              </h2>
              <p className="mt-4 text-lg text-obsidian-600">
                We&apos;re on a mission to transform how the Kenyan diaspora invests in property back home.
                Join us and make a real difference.
              </p>
            </div>
          </AnimateOnScroll>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {benefits.map((benefit, i) => (
              <AnimateOnScroll key={benefit.title} delay={i * 0.1}>
                <div className="p-6 rounded-xl border border-obsidian-100 hover:border-primary/30 hover:shadow-lg transition-all">
                  <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-4">
                    {benefit.icon}
                  </div>
                  <h3 className="font-display text-lg font-semibold text-obsidian-900">{benefit.title}</h3>
                  <p className="mt-2 text-sm text-obsidian-600">{benefit.description}</p>
                </div>
              </AnimateOnScroll>
            ))}
          </div>
        </div>
      </section>

      {/* Open Positions */}
      <section className="py-20 lg:py-24 bg-obsidian-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <AnimateOnScroll>
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="font-display text-3xl sm:text-4xl font-bold text-obsidian-900 uppercase tracking-tight">
                Open Positions
              </h2>
              <p className="mt-4 text-lg text-obsidian-600">
                Find your next opportunity with us. We&apos;re always looking for talented people.
              </p>
            </div>
          </AnimateOnScroll>

          <AnimateOnScroll>
            <div className="text-center p-12 rounded-xl bg-white border border-obsidian-100">
              <Briefcase size={48} className="mx-auto text-obsidian-300 mb-4" />
              <h3 className="font-display text-xl font-semibold text-obsidian-900">No open positions right now</h3>
              <p className="mt-2 text-obsidian-600 max-w-md mx-auto">
                We don&apos;t have any openings at the moment, but we&apos;re always interested in hearing from talented people.
                Send us your CV and we&apos;ll keep you in mind.
              </p>
              <a
                href="mailto:careers@diasporaproperty.com"
                className="mt-6 inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-medium text-white hover:bg-primary/90 transition-colors"
              >
                Send Open Application
              </a>
            </div>
          </AnimateOnScroll>
        </div>
      </section>

      <Footer />
    </div>
  );
}