import { motion } from "framer-motion";
import { Reveal } from "@/components/Reveal";
import { TopoTexture } from "@/components/TopoTexture";
import wolfgang from "@/assets/agent-wolfgang-new.avif.asset.json";
import annamaria from "@/assets/agent-annamaria.jpg";
import behramPhoto from "@/assets/agent-behram-new.jpg.asset.json";
import karlPhoto from "@/assets/agent-karl.jpg.asset.json";
import joachimPhoto from "@/assets/agent-joachim.avif.asset.json";

const agents = [
  {
    name: "Wolfgang Herz",
    title: "President · Fortune International Realty, Commercial Division",
    phone: "+1 786 282 2763",
    email: "wh@fir.com",
    photo: wolfgang.url,
    bio: "Recognized as one of the top restaurant, hotel, retail, and industrial brokers nationally and internationally, representing groups including Zuma, Sexy Fish, Do&CO and Heineman. Over twenty years of experience, with a background in civil engineering and hospitality, advising developers, investors and hospitality clients across major US and international markets. Founder of HerzDupondGroup.",
  },
  {
    name: "Anna Maria Lipsig",
    title: "The Wealth Group · Fortune International Realty",
    phone: "+1 914 439 7453",
    email: "amlipsig@fir.com",
    photo: annamaria,
    bio: "A multilingual New Yorker (Greek and German) whose international career began in Europe with Triumph, following work with IBM, Texaco and Zeiss, and continued into Global Relationship Banking at Citibank managing their largest client, Merrill Lynch. Now focused on the international South Florida market. Wellness coach, photographer, and active in the Miami art scene including Art Basel and the Perez Museum.",
  },
  {
    name: "Joachim Hinder",
    title: "Strategic Advisor · Project & Sales Leadership",
    phone: "+1 786 718 0281",
    email: "jh@fir.com",
    photo: joachimPhoto.url,
    bio: "A versatile executive with a dynamic career across project management, sales coordination, and leadership roles in international markets. Extensive experience in Agile environments enables him to adapt to evolving project demands and collaborate effectively with diverse, cross border teams. Has held senior positions at leading organizations, consistently driving results and implementing innovative solutions across highly competitive luxury and lifestyle sectors.",
  },
  {
    name: "Behram Tavadia",
    title: "Global Sales Director · Ulyssia Residences at Sea",
    phone: "+1 954 663 6983",
    email: "btavadia@fir.com",
    photo: behramPhoto.url,
    bio: "Strategic sales leader with a global focus on ultra-high-net-worth clientele. Currently oversees commercial strategy for Ulyssia Residences at Sea, an elite residential yacht development. Four decades across travel, hospitality, cruise lines and luxury hotels including Royal Caribbean, Sheraton, HelmsBriscoe and InteleTravel, with a network spanning Miami and key international markets.",
  },
  {
    name: "Karl Muhlberger",
    title: "Global Real Estate & Hospitality Executive",
    phone: "+1 305 790 6859",
    email: "km@fir.com",
    photo: karlPhoto.url,
    bio: "Global real estate and hospitality executive with expertise in luxury residential operations, ultra-high-net-worth owner communities, and hospitality-driven real estate across North America, Europe and Asia. Most recently Chief Operations Officer of The World – Residences at Sea, the largest privately owned residential yacht, overseeing apartment sales, owner relations, capital improvements and a $100M annual operating budget.",
  },
];

export function Team() {
  return (
    <section id="team" className="relative isolate overflow-hidden bg-ink text-paper py-32 md:py-44">
      <TopoTexture opacity={0.1} />
      <div className="relative z-10 mx-auto max-w-[1440px] px-6 md:px-12">
        <Reveal>
          <div className="flex items-center gap-6 mb-20 md:mb-28">
            <span className="label text-gold">08</span>
            <span className="rule flex-1 text-paper" />
            <span className="label text-paper/60">Represented By</span>
          </div>
        </Reveal>

        <Reveal>
          <h2 className="display text-paper text-[42px] sm:text-[60px] md:text-[80px]">
            A strategic advisory team.
          </h2>
        </Reveal>

        <div className="mt-20 md:mt-28 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-line-dark">
          {agents.map((a, i) => (
            <Reveal key={a.name} delay={i * 0.1} className="bg-ink">
              <motion.div
                whileHover={{ y: -4 }}
                transition={{ type: "spring", stiffness: 280, damping: 22 }}
                className="group h-full p-8 md:p-10 border border-line-dark flex flex-col gap-8 transition-colors duration-500 hover:bg-[#101010]"
              >
                <div className="overflow-hidden">
                  <motion.img
                    src={a.photo}
                    alt={a.name}
                    width={800}
                    height={1000}
                    loading="lazy"
                    className="w-full aspect-[4/5] object-cover grayscale-[15%] transition-all duration-700 group-hover:grayscale-0"
                    whileHover={{ scale: 1.02 }}
                    transition={{ type: "spring", stiffness: 200, damping: 25 }}
                  />
                </div>

                <div className="flex flex-col gap-3 min-h-[7rem]">
                  <h3 className="display text-paper text-3xl relative inline-block w-fit">
                    {a.name}
                    <span className="absolute -bottom-1 left-0 h-px w-0 bg-gold transition-all duration-500 group-hover:w-full" />
                  </h3>
                  <span className="label text-paper/55 leading-relaxed">{a.title}</span>
                </div>

                <p className="text-stone-300 leading-relaxed text-[14px] text-justify hyphens-auto flex-1">{a.bio}</p>

                {(a.phone || a.email) && (
                  <div className="mt-auto pt-6 border-t border-line-dark flex flex-col gap-2 text-stone-300 text-[14px]">
                    {a.phone && (
                      <a
                        href={`tel:${a.phone.replace(/\s/g, "")}`}
                        className="transition-colors duration-300 hover:text-gold"
                      >
                        {a.phone}
                      </a>
                    )}
                    {a.email && (
                      <a
                        href={`mailto:${a.email}`}
                        className="transition-colors duration-300 hover:text-gold break-all"
                      >
                        {a.email}
                      </a>
                    )}
                  </div>
                )}
              </motion.div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
