"use client";

import { motion } from "framer-motion";
import { useInView } from "framer-motion";
import { useRef } from "react";

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 } : { opacity: 0, y: 40 }}
      transition={{ duration: 0.7, delay, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}

export function About() {
  return (
    <section className="py-24 lg:py-32 bg-white overflow-hidden">
      <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 - Images */}
          <AnimateOnScroll>
            <div 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="Modern property"
                  className="h-full w-full object-cover"
                />
              </div>
              {/* Floating card */}
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.3, duration: 0.6 }}
                className="absolute -bottom-8 -right-4 lg:-right-12 bg-primary p-6 sm:p-8 text-white shadow-elevated"
              >
                <p className="font-display text-4xl sm:text-5xl font-bold">10+</p>
                <p className="text-sm text-white/80 mt-1 uppercase tracking-wider">
                  Years of
                  <br />
                  Experience
                </p>
              </motion.div>
            </div>
          </AnimateOnScroll>

          {/* Right - Content */}
          <div>
            <AnimateOnScroll delay={0.1}>
              <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
                //DISCOVER OUR STORY
              </p>
            </AnimateOnScroll>

            <AnimateOnScroll delay={0.2}>
              <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-obsidian-700 leading-tight">
                UNVEILING DIASPORA PROPERTY&apos;S JOURNEY
              </h2>
            </AnimateOnScroll>

            <AnimateOnScroll delay={0.3}>
              <p className="mt-6 text-base text-obsidian-400 leading-relaxed">
                We bridge the gap between the Kenyan diaspora and property
                investment back home. Our platform connects you with vetted
                companies, verified listings, and expert insights — giving you
                the confidence to invest from anywhere in the world.
              </p>
            </AnimateOnScroll>

            {/* Value Points */}
            <div className="mt-10 space-y-8">
              <AnimateOnScroll delay={0.4}>
                <div className="flex gap-5">
                  <div className="flex-shrink-0 w-12 h-12 bg-obsidian-50 flex items-center justify-center">
                    <span className="font-display text-lg font-bold text-primary">01</span>
                  </div>
                  <div>
                    <h3 className="font-display text-lg font-bold text-obsidian-700 uppercase">
                      Diaspora-First Approach
                    </h3>
                    <p className="mt-2 text-sm text-obsidian-400 leading-relaxed">
                      Built specifically for Kenyans abroad who want to invest back
                      home with transparency and trust.
                    </p>
                  </div>
                </div>
              </AnimateOnScroll>

              <AnimateOnScroll delay={0.5}>
                <div className="flex gap-5">
                  <div className="flex-shrink-0 w-12 h-12 bg-obsidian-50 flex items-center justify-center">
                    <span className="font-display text-lg font-bold text-primary">02</span>
                  </div>
                  <div>
                    <h3 className="font-display text-lg font-bold text-obsidian-700 uppercase">
                      Integrity & Transparency
                    </h3>
                    <p className="mt-2 text-sm text-obsidian-400 leading-relaxed">
                      Every company and listing is vetted. We ensure you have
                      complete information before making investment decisions.
                    </p>
                  </div>
                </div>
              </AnimateOnScroll>
            </div>

            <AnimateOnScroll delay={0.6}>
              <a
                href="/about"
                className="inline-block mt-10 bg-obsidian-700 text-white px-8 py-4 text-sm font-semibold uppercase tracking-wider hover:bg-obsidian-900 transition-colors"
              >
                Read More
              </a>
            </AnimateOnScroll>
          </div>
        </div>
      </div>
    </section>
  );
}