"use client";
import { motion } from "framer-motion";
import { Users, Target, Lightbulb, ShieldCheck, Linkedin } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

const leaders = [
  {
    name: "Amit Sharma",
    role: "Founder & CEO",
    image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
    linkedin: "#",
  },
  {
    name: "Neha Verma",
    role: "Head of Product",
    image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
    linkedin: "#",
  },
  {
    name: "Rahul Mehta",
    role: "CTO",
    image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
    linkedin: "#",
  },
];


export default function AboutUs() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">

      {/* HERO */}
      <section className="py-28 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          className="text-5xl font-bold mb-6"
        >
          Empowering Businesses with Smart CRM Innovation
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          className="text-xl max-w-3xl mx-auto"
        >
          We help companies build stronger customer relationships through intelligent automation and seamless workflows.
        </motion.p>
      </section>

      {/* OUR MISSION / VISION */}
      <section className="py-20 max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          className="bg-white p-10 rounded-3xl shadow-xl border"
        >
          <Target className="w-12 h-12 text-blue-600 mb-4" />
          <h3 className="text-3xl font-semibold mb-3">Our Mission</h3>
          <p className="text-gray-600 text-lg leading-relaxed">
            To simplify customer management through powerful yet user-friendly CRM tools,
            enabling businesses of every size to scale faster and smarter.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          className="bg-white p-10 rounded-3xl shadow-xl border"
        >
          <Lightbulb className="w-12 h-12 text-purple-600 mb-4" />
          <h3 className="text-3xl font-semibold mb-3">Our Vision</h3>
          <p className="text-gray-600 text-lg leading-relaxed">
            To be a global leader in CRM innovation — transforming how teams connect,
            collaborate and grow with their customers.
          </p>
        </motion.div>
      </section>

      {/* COMPANY STORY TIMELINE */}
      <section className="py-24 bg-white">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-gray-900 mb-4">Our Journey</h2>
          <p className="text-gray-600 text-lg max-w-3xl mx-auto">
            From a small team with a big dream to a growing global technology partner.
          </p>
        </div>

        <div className="relative max-w-5xl mx-auto px-6">
          <div className="absolute left-1/2 -ml-0.5 h-full border-l-2 border-blue-300"></div>

          {[
            { year: "2021", text: "Founded with a mission to reinvent CRM efficiency." },
            { year: "2022", text: "Launched our first CRM suite for SMEs." },
            { year: "2023", text: "Expanded to enterprise CRM solutions across industries." },
            { year: "2024", text: "Serving customers globally with AI-powered CRM intelligence." },
          ].map((item, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              className={`mb-16 flex items-center gap-8 ${
                i % 2 === 0 ? "flex-row" : "flex-row-reverse"
              }`}
            >
              <div className="bg-blue-600 text-white rounded-full w-16 h-16 flex items-center justify-center font-semibold text-xl shadow-2xl">
                {item.year}
              </div>
              <p className="bg-gray-100 rounded-2xl p-6 shadow-md text-lg text-gray-700 max-w-md">
                {item.text}
              </p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* LEADERSHIP SECTION */}
      <section className="py-24 max-w-7xl mx-auto px-6">
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold mb-3">Leadership Team</h2>
          <p className="text-gray-600 text-lg">
            Guiding our mission with innovation and excellence.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-12">
          {leaders.map((leader, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              className="text-center bg-white p-6 rounded-2xl shadow-lg"
            >
              <Image
                src={leader.image}
                width={200}
                height={200}
                alt={leader.name}
                className="rounded-full mx-auto mb-4 object-cover"
              />
              <h3 className="text-xl font-semibold">{leader.name}</h3>
              <p className="text-gray-500 mb-3">{leader.role}</p>
              <Link
                href={leader.linkedin}
                className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800"
              >
                <Linkedin size={18} /> Connect
              </Link>
            </motion.div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 bg-gradient-to-r from-purple-600 to-blue-600 text-center text-white">
        <h2 className="text-4xl font-bold mb-4">We Grow Together</h2>
        <p className="text-lg max-w-2xl mx-auto mb-8">
          Become part of a story that’s transforming the future of CRM.
        </p>
        <Link
          href="/careers"
          className="bg-white text-blue-700 px-8 py-3 rounded-full text-lg font-semibold hover:shadow-xl transition"
        >
          Explore Careers
        </Link>
      </section>

    </div>
  );
}