import React from "react";
import { AGENTS, WHY_LUNIAR_POINTS } from "../data";
import { Mail, Phone } from "lucide-react";
import { motion } from "motion/react";
import { translations } from "../translations";

interface AboutSectionProps {
  lang: "en" | "id";
  onContactAgent: (agentName: string) => void;
}

export default function AboutSection({ lang, onContactAgent }: AboutSectionProps) {
  const isEn = lang === "en";
  const t = translations[lang];

  // Dynamic board points mapped from keys within translation files for maximum synchronization
  const mainPoints = [
    { title: t.curatorialRigorTitle, description: t.curatorialRigorDesc },
    { title: t.architecturalKnowledgeTitle, description: t.architecturalKnowledgeDesc },
    { title: t.quietAdvisoryTitle, description: t.quietAdvisoryDesc }
  ];

  // Translation helper for dynamic agent details
  const getLocalizedAgent = (agent: typeof AGENTS[0]) => {
    if (isEn) return agent;
    
    // Exact Indonesia Translation Map for high-society feel
    if (agent.id === "agent-alistair") {
      return {
        ...agent,
        role: "Penasihat Arsitektur Global",
        bio: "Dengan lebih dari lima belas tahun pengalaman di pasar arsitektur mewah, Alistair berspesialisasi dalam aset premium langka yang menunjukkan integritas struktural luar biasa dan kemurnian spasial."
      };
    } else if (agent.id === "agent-clara") {
      return {
        ...agent,
        role: "Direktur Kurasi",
        bio: "Clara memiliki mata yang tanpa kompromi untuk estetika minimalis. Dia bekerja erat dengan kolektor internasional untuk mengkurasi rumah yang berfungsi sebagai patung hidup."
      };
    } else if (agent.id === "agent-hiroshi") {
      return {
        ...agent,
        role: "Akun Komersial & Privat",
        bio: "Spesialis dalam apartemen premium berkepadatan tinggi dan arsitektur komersial skulptural, Hiroshi menjembatani visi pembangunan dengan modal privat yang canggih."
      };
    }
    return agent;
  };

  return (
    <div className="space-y-24 md:space-y-32 py-6 text-left" id="about-section">
      {/* Editorial Core Philosophy */}
      <section className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-[64px] items-start">
        <div className="lg:col-span-5 space-y-4">
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
            {isEn ? "GENESIS & SOVEREIGN PHILOSOPHY" : "GENESIS & FILOSOFI BERDAULAT"}
          </span>
          <h2 className="font-serif text-3xl md:text-5xl font-light tracking-tight text-[#1A1A1A] leading-tight">
            {isEn ? (
              <>Curating Livable <span className="italic font-normal">Masterpieces</span> for Elite Global Collectors.</>
            ) : (
              <>Mengkurasi <span className="italic font-normal">Mahakarya</span> Hunian untuk Kolektor Elit Global.</>
            )}
          </h2>
        </div>
        <div className="lg:col-span-7 space-y-6 lg:pt-2">
          <p className="font-sans text-xs md:text-sm text-[#1A1A1A] leading-relaxed font-semibold">
            {isEn ? (
              "Founded in 1998, Luniar Estate stands as a premier advisory and historical archiving house, representation of high-end architectural assets. We reject the transactional nature of generic real estate platforms. Instead, we formulate real essays for every structure—examining concrete, wood, spatial geometry, and geographic light currents."
            ) : (
              "Didirikan pada tahun 1998, Luniar Estate berdiri sebagai penasihat terkemuka dan rumah pengarsipan bersejarah, representasi aset arsitektural kelas atas. Kami menolak sifat transaksional dari platform real estat generik. Sebaliknya, kami merumuskan esai nyata untuk setiap struktur — memeriksa beton, kayu, geometri spasial, dan arus cahaya geografis."
            )}
          </p>
          <p className="font-sans text-xs md:text-sm text-[#555555] leading-relaxed font-light">
            {isEn ? (
              "Our exclusive clients are institutional collectors, architectural enthusiasts, and individuals for whom a home represents a highly sensitive emotional and visual extension of self. Led by master curator Clara Moreau, Luniar operates quietly behind closed doors, protecting capital layouts and ensuring absolute privacy."
            ) : (
              "Klien eksklusif kami adalah kolektor institusional, penggemar arsitektur, dan individu di mana bagi mereka rumah melambangkan perpanjangan emosional dan visual diri yang sangat sensitif. Dipimpin oleh kurator utama Clara Moreau, Luniar beroperasi secara senyap di balik pintu tertutup, melindungi tata letak modal dan memastikan privasi mutlak."
            )}
          </p>
          <div className="grid grid-cols-3 gap-4 pt-4 border-t border-[#EEECE6]/70">
            <div>
              <span className="font-serif text-2xl md:text-3xl text-[#1A1A1A] font-light">25+</span>
              <span className="block font-sans text-[8px] uppercase tracking-widest text-zinc-400 font-semibold mt-1">
                {isEn ? "Years archived" : "Tahun diarsipkan"}
              </span>
            </div>
            <div>
              <span className="font-serif text-2xl md:text-3xl text-[#C5A572] font-light">120M+</span>
              <span className="block font-sans text-[8px] uppercase tracking-widest text-zinc-400 font-semibold mt-1">
                {isEn ? "Capital Curated" : "Modal Terkurasi"}
              </span>
            </div>
            <div>
              <span className="font-serif text-2xl md:text-3xl text-[#1A1A1A] font-light">100%</span>
              <span className="block font-sans text-[8px] uppercase tracking-widest text-zinc-400 font-semibold mt-1">
                {isEn ? "Discretion secured" : "Kerahasiaan Terjamin"}
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* Why Luniar Editorial Board */}
      <section className="border-t border-[#EEECE6] pt-20 space-y-16">
        <div className="text-center max-w-xl mx-auto space-y-3">
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
            {isEn ? "THE ACCREDITED PARADIGM" : "PARADIGMA TERAKREDITASI"}
          </span>
          <h3 className="font-serif text-3xl font-light tracking-tight text-[#1A1A1A]">
            {isEn ? "Our Governing Parameters" : "Parameter Tata Kelola Kami"}
          </h3>
          <p className="font-sans text-xs text-[#555555] leading-relaxed font-light">
            {isEn ? (
              "How we translate spatial authenticity into secure, timeless, high-fidelity portfolios that transcend common luxury templates."
            ) : (
              "Bagaimana kami menerjemahkan keaslian spasial menjadi portofolio yang aman, abadi, dan berakurasi tinggi yang melampaui templat kemewahan biasa."
            )}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 pt-4">
          {mainPoints.map((item, i) => (
            <div key={i} className="space-y-4 border-l border-zinc-200 hover:border-[#C5A572] pl-6 py-2 transition-all duration-500">
              <span className="font-mono text-[9px] font-bold uppercase tracking-widest text-[#C5A572] block font-semibold">
                {isEn ? `PARADIGM ASPECT 0${i + 1}` : `ASPEK PARADIGMA 0${i + 1}`}
              </span>
              <h4 className="font-serif text-xl font-normal text-[#1A1A1A] leading-tight">{item.title}</h4>
              <p className="font-sans text-xs text-[#555555] leading-relaxed font-light">
                {item.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Agent Profiles Section */}
      <section className="border-t border-[#EEECE6] pt-20 space-y-16" id="agents-grid">
        <div className="space-y-3 max-w-2xl">
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
            {isEn ? "PRINCIPAL REPRESENTATIVES" : "PERWAKILAN UTAMA"}
          </span>
          <h3 className="font-serif text-3xl md:text-4xl font-light tracking-tight text-[#1A1A1A]">
            {isEn ? "The Curatorial Board" : "Dewan Kurator Utama"}
          </h3>
          <p className="font-sans text-xs text-[#555555] font-light leading-relaxed">
            {isEn ? (
              "Meet our esteemed spatial investigators and strategic capital advisors, dedicated to absolute aesthetic alignment and confidential acquisition."
            ) : (
              "Temui penyelidik spasial kami yang terhormat dan penasihat modal strategis kami, yang didedikasikan untuk keselarasan estetika mutlak dan akuisisi konfidensial."
            )}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-[32px]">
          {AGENTS.map((rawAgent, index) => {
            const agent = getLocalizedAgent(rawAgent);
            return (
              <motion.div
                key={agent.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
                className="bg-[#FDFCFB] border border-[#EEECE6]/70 rounded-none overflow-hidden group hover:shadow-xl transition-all duration-500 flex flex-col justify-between luxury-shadow"
                id={`agent-profile-${agent.id}`}
              >
                {/* Photo */}
                <div className="aspect-[4/5] overflow-hidden bg-gray-100 relative">
                  <img
                    src={agent.image}
                    alt={agent.name}
                    className="w-full h-full object-cover group-hover:scale-102 transition-transform duration-[1.2s] ease-[0.16, 1, 0.3, 1]"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
                  
                  {/* Embedded Floating Role */}
                  <div className="absolute bottom-4 left-4 right-4 bg-[#FDFCFB]/95 backdrop-blur-md px-4 py-3 rounded-none border border-[#EEECE6] shadow-sm transform translate-y-2 group-hover:translate-y-0 transition-all duration-500">
                    <span className="font-sans text-[9px] font-bold uppercase tracking-[0.2em] text-[#C5A572] block leading-none">
                      {agent.role}
                    </span>
                    <span className="font-sans text-[10px] text-zinc-500 block font-mono mt-1 leading-none">
                      {agent.propertiesCount} {isEn ? "Master structures" : "Struktur utama"}
                    </span>
                  </div>
                </div>

                {/* Bio Details */}
                <div className="p-7 space-y-4 flex-1 flex flex-col justify-between">
                  <div className="space-y-3">
                    <h4 className="font-serif text-xl font-normal text-[#1A1A1A] leading-tight">{agent.name}</h4>
                    <p className="font-sans text-xs text-[#555555] leading-relaxed font-light">
                      {agent.bio}
                    </p>
                  </div>

                  {/* Secure Contact Details */}
                  <div className="space-y-2.5 pt-4 border-t border-[#EEECE6]/60 text-xs font-mono">
                    <a
                      href={`mailto:${agent.email}`}
                      className="flex items-center gap-2.5 text-zinc-500 hover:text-[#C5A572] transition-colors font-light"
                    >
                      <Mail size={12} className="text-[#C5A572]" />
                      <span>{agent.email}</span>
                    </a>
                    <a
                      href={`tel:${agent.phone}`}
                      className="flex items-center gap-2.5 text-zinc-500 hover:text-[#C5A572] transition-colors font-light"
                    >
                      <Phone size={12} className="text-[#C5A572]" />
                      <span>{agent.phone}</span>
                    </a>
                  </div>

                  <div className="pt-2">
                    <button
                      onClick={() => onContactAgent(agent.name)}
                      className="w-full bg-[#1A1A1A] hover:bg-[#C5A572] text-[#FDFCFB] border border-[#1A1A1A] hover:border-[#C5A572] py-3.5 rounded-none font-sans text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-500 cursor-pointer focus:outline-none"
                    >
                      {isEn ? "DIRECT ENQUIRY" : "PERTANYAAN LANGSUNG"}
                    </button>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </div>
      </section>
    </div>
  );
}