// app/overview/page.tsx
"use client";

import React, { useState } from "react";
import Breadcrumb from "../../components/Breadcrumb";
import OurBrands from "@/components/OurBrands";

import {
  Share2,
  Pin,
  Instagram,
  Twitter,
  Facebook,
  Heart,
  Mail,
  Briefcase,
  Linkedin,
  Code,
} from "lucide-react";

/* -------------------------------------------
   Types & Data
------------------------------------------- */
interface TeamMember {
  name: string;
  title: string;
  imageUrl: string;
  profileLink: string;
  shareLinks?: {
    pinterest?: string;
    instagram?: string;
    twitter?: string;
    facebook?: string;
  };
}

const teamMembers: TeamMember[] = [
  {
    name: "Khitikrishna Dev",
    title: "Worker",
    imageUrl: "/img/team-2/31321.png",
    profileLink: "/team-detals",
    shareLinks: { pinterest: "#", twitter: "#", instagram: "#", facebook: "#" },
  },
  {
    name: "Jyotiarjun Dev",
    title: "Worker",
    imageUrl:
      "/img/team-2/team-2.png",
    profileLink: "/team/profile/dawon-crisen",
    shareLinks: { pinterest: "#", twitter: "#", instagram: "#", facebook: "#" },
  },
  {
    name: "David Suarez",
    title: "Worker",
    imageUrl:
      "https://images.unsplash.com/photo-1547425260-76bc049514d9?q=80&w=1974&auto=format&fit=crop",
    profileLink: "/team/profile/david-suarez",
    shareLinks: { pinterest: "#", twitter: "#", instagram: "#", facebook: "#" },
  },
];

/* -------------------------------------------
   BrightTeamCard Component
------------------------------------------- */
const BrightTeamCard = ({ member }: { member: TeamMember }) => {
  const [isSocialOpen, setIsSocialOpen] = useState(false);
  const accentColor = "#E83E8C";

  const socialIcons = [
    { icon: Pin, key: "pinterest", href: member.shareLinks?.pinterest },
    { icon: Instagram, key: "instagram", href: member.shareLinks?.instagram },
    { icon: Twitter, key: "twitter", href: member.shareLinks?.twitter },
    { icon: Facebook, key: "facebook", href: member.shareLinks?.facebook },
  ];

  return (
    <div
      className="w-full bg-white shadow-xl rounded-xl overflow-hidden relative transition-all duration-300"
      style={{
        border: "1px solid #f0f0f0",
        maxWidth: "350px",
        margin: "0 auto",
        height: "450px",
      }}
    >
      {/* Image */}
      <div className="relative w-full h-[380px] overflow-hidden">
        <img
          src={member.imageUrl || "/img/default.jpg"}
          alt={member.name}
          className="w-full h-580px object-cover"
        />
      </div>

      {/* Name & Title */}
      <div className="absolute left-0 right-0 bottom-0 bg-white pt-8 pb-4 text-center rounded-t-lg">
        <a
          href={member.profileLink}
          className="text-xl font-bold text-gray-800 hover:text-indigo-600"
        >
          {member.name}
        </a>
        <p className="text-gray-500 text-sm">{member.title}</p>
      </div>

      {/* Share Button */}
      <div
        className="absolute top-0 right-0 m-4"
        onMouseEnter={() => setIsSocialOpen(true)}
        onMouseLeave={() => setIsSocialOpen(false)}
      >
        <button
          className="w-10 h-10 flex items-center justify-center rounded-md text-white shadow-lg"
          style={{ backgroundColor: accentColor }}
        >
          <Share2 size={18} />
        </button>

        <div
          className={`absolute top-12 right-0 flex flex-col items-center space-y-2 pt-2 transition-opacity duration-300 ${isSocialOpen ? "opacity-100" : "opacity-0"
            }`}
        >
          {socialIcons.map((item) => {
            const Icon = item.icon;
            return (
              <a
                key={item.key}
                href={item.href || "#"}
                className="w-10 h-10 flex items-center justify-center rounded-full text-white shadow-md hover:scale-110"
                style={{ backgroundColor: accentColor }}
              >
                <Icon size={16} />
              </a>
            );
          })}
        </div>
      </div>
    </div>
  );
};

/* -------------------------------------------
   MAIN PAGE — Only ONE export default
------------------------------------------- */
export default function OurExperts() {
  const breadcrumbData = [
    { name: "Home", href: "/" },
    { name: "Our Experts", href: "our-experts" },
  ];

  return (
    <main className="min-h-screen bg-gray-50">
      <Breadcrumb
        breadcrumbs={breadcrumbData}
        pageTitle="Our Experts"
        description="Meet the minds powering Wimraw’s global innovation."
      />

      {/* TEAM GRID */}
      <section className="py-20 bg-gray-50">
        <div className="mx-auto max-w-7xl px-4">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-extrabold text-gray-900">
              Our Team Members
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {teamMembers.map((member, i) => (
              <BrightTeamCard key={i} member={member} />
            ))}
          </div>
        </div>
      </section>

      <OurBrands />
    </main>
  );
}