"use client";

import { motion } from "framer-motion";
import { orgChart } from "@/constants";

interface TeamMemberProps {
  name: string;
  role: string;
  title?: string;
  email?: string;
  description?: string;
  isLeader?: boolean;
  delay?: number;
  centered?: boolean;
  scale?: number;
}

/**
 * TeamMember - Reusable component for displaying team members
 * Layout: Circular image on left, description on right
 * No borders, no background color
 */
function TeamMember({
  name,
  role,
  title,
  email,
  description,
  isLeader = false,
  delay = 0,
  centered = false,
  scale = 1,
}: TeamMemberProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30, scale }}
      whileInView={{ opacity: 1, y: 0, scale }}
      viewport={{ once: true }}
      transition={{ delay, duration: 0.6 }}
      style={{ originX: 0 }}
    >
      <motion.div
        className={`py-6 ${centered ? "mx-auto max-w-2xl text-center" : ""}`}
        whileHover={{ y: -4 }}
        transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
      >
      <div className={`flex gap-6 ${centered ? "flex-col items-center" : "items-start"}`}>
        {/* Circular image placeholder */}
        <div className={`flex-shrink-0 w-24 h-24 rounded-full bg-gradient-to-br from-navy-100 to-navy-50 flex items-center justify-center overflow-hidden border-2 ${isLeader ? "border-gold" : "border-gold/30"}`}>
          <svg
            viewBox="0 0 24 24"
            className={`w-12 h-12 ${isLeader ? "text-gold" : "text-navy-300"}`}
            fill="currentColor"
          >
            <circle cx="12" cy="8" r="4" />
            <path d="M4 20c0-4 4-6 8-6s8 2 8 6v2H4v-2z" />
          </svg>
        </div>

        {/* Description */}
        <div className={`${centered ? "text-center" : ""}`}>
          <h3 className={`text-xl font-bold ${isLeader ? "text-navy" : "text-navy"}`}>
            {name}
          </h3>
          <p className={`text-sm mt-1 ${isLeader ? "text-gold-600 font-semibold" : "text-gold-600 font-semibold"}`}>
            {role}
          </p>
          {description && (
            <p className="text-sm mt-3 leading-relaxed text-navy-600 max-w-md">
              {description}
            </p>
          )}
          {email && (
            <a
              href={`mailto:${email}`}
              className="inline-flex items-center gap-2 mt-3 text-sm font-semibold text-gold-600 hover:text-gold-700 transition-colors"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="5" width="18" height="14" rx="2" />
                <path d="m4 7 8 6 8-6" />
              </svg>
              {email}
            </a>
          )}
        </div>
      </div>
      </motion.div>
    </motion.div>
  );
}

export default function Organization() {
  const { head, divisions, shared } = orgChart;

  return (
    <section
      id="org"
      className="relative scroll-mt-24 py-24 sm:py-28"
      style={{
        backgroundImage:
          // Increased the alpha value from 0.14 to 0.40
          "radial-gradient(rgba(11, 31, 69, 0.40) 1.5px, transparent 1.5px)",
        backgroundSize: "28px 28px",
      }}
    >
      {/* Soft glow so content stays readable over the dot grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse 70% 60% at center, rgba(238, 242, 248, 0.9) 0%, rgba(238, 242, 248, 0.55) 55%, transparent 100%)",
        }}
      />
      <div className="container-x relative">
        {/* Header */}
        <motion.div
          className="max-w-2xl"
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <motion.p
            className="eyebrow"
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
          >
            Leadership &amp; structure
          </motion.p>
          <h2 className="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl">
            One company, engineered around the mission.
          </h2>
          <motion.div
            className="heading-rule"
            initial={{ scaleX: 0 }}
            whileInView={{ scaleX: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3, duration: 0.6 }}
          />
          <motion.p
            className="mt-6 text-lg leading-relaxed text-navy-600"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.4 }}
          >
            Oscar One unifies flight operations, autonomous systems, and
            education under a single accountable structure — with shared
            services keeping every division certified and audit-ready.
          </motion.p>
        </motion.div>

        {/* Organization Chart */}
        <motion.div
          className="mt-14 space-y-8"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.2 }}
        >
          {/* CEO/Leader - centered */}
          <div className="pb-8">
            <TeamMember
              name={head.name}
              role={head.role}
              description="Ex. Flight Ops Manager (MAB), Ex. Technical Manager (AACE)"
              isLeader={true}
              delay={0.3}
              centered={true}
            />
          </div>

          {/* Divisions - horizontal layout */}
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {divisions.map((division, index) => (
              <div key={division.name} className="flex flex-col">
                <TeamMember
                  name={division.name}
                  role={division.tag}
                  description={division.scope}
                  delay={0.4 + index * 0.1}
                />
                {/* Division members - listed under their head */}
                {division.members?.map((member, mIndex) => (
                  <TeamMember
                    key={member.name}
                    name={member.name}
                    role={member.role}
                    description={member.scope}
                    delay={0.5 + index * 0.1 + mIndex * 0.1}
                    scale={member.name === "Muhammad Husayn Irfan bin Mohammad Noor" ? 1.1 : 1}
                  />
                ))}
              </div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}