"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Mail, Phone, MapPin } from "lucide-react";

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

  return (
    <section className="py-24 lg:py-32 bg-white" ref={ref}>
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 lg:gap-24">
          {/* Left - Info */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.7 }}
          >
            <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
              //CONTACT WITH US
            </p>
            <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-obsidian-700 leading-tight">
              REACH OUT TO US VIA{" "}
              <span className="text-primary">CONTACT DETAILS</span>
            </h2>
            <p className="mt-6 text-base text-obsidian-400 leading-relaxed">
              Have questions about investing in Kenyan property from abroad? Our
              team is here to guide you every step of the way.
            </p>

            <div className="mt-10 space-y-8">
              <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 Support
                  </h3>
                  <p className="mt-2 text-sm text-obsidian-400 leading-relaxed">
                    We understand the unique challenges of investing from abroad
                    and provide dedicated support for diaspora investors.
                  </p>
                </div>
              </div>

              <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">
                    Verified Partners
                  </h3>
                  <p className="mt-2 text-sm text-obsidian-400 leading-relaxed">
                    Every company and listing on our platform undergoes rigorous
                    vetting to protect your investment.
                  </p>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Right - Contact Cards */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="space-y-6"
          >
            <div className="bg-obsidian-50 p-8 flex items-start gap-5 group hover:bg-obsidian-700 transition-colors duration-500">
              <div className="w-12 h-12 bg-primary flex items-center justify-center flex-shrink-0">
                <MapPin size={20} className="text-white" />
              </div>
              <div>
                <h3 className="font-display text-sm font-bold text-obsidian-700 group-hover:text-white uppercase tracking-wider transition-colors">
                  Office Address
                </h3>
                <p className="mt-2 text-sm text-obsidian-400 group-hover:text-white/60 transition-colors">
                  Westlands Commercial Centre
                  <br />
                  Nairobi, Kenya
                </p>
              </div>
            </div>

            <div className="bg-obsidian-50 p-8 flex items-start gap-5 group hover:bg-obsidian-700 transition-colors duration-500">
              <div className="w-12 h-12 bg-primary flex items-center justify-center flex-shrink-0">
                <Phone size={20} className="text-white" />
              </div>
              <div>
                <h3 className="font-display text-sm font-bold text-obsidian-700 group-hover:text-white uppercase tracking-wider transition-colors">
                  Phone Number
                </h3>
                <p className="mt-2 text-sm text-obsidian-400 group-hover:text-white/60 transition-colors">
                  +254 700 000 000
                  <br />
                  +44 20 7946 0958
                </p>
              </div>
            </div>

            <div className="bg-obsidian-50 p-8 flex items-start gap-5 group hover:bg-obsidian-700 transition-colors duration-500">
              <div className="w-12 h-12 bg-primary flex items-center justify-center flex-shrink-0">
                <Mail size={20} className="text-white" />
              </div>
              <div>
                <h3 className="font-display text-sm font-bold text-obsidian-700 group-hover:text-white uppercase tracking-wider transition-colors">
                  Email Address
                </h3>
                <p className="mt-2 text-sm text-obsidian-400 group-hover:text-white/60 transition-colors">
                  invest@diasporaproperty.com
                  <br />
                  support@diasporaproperty.com
                </p>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
