import React, { useState } from "react";
import { Property, Agent } from "../types";
import { AGENTS } from "../data";
import { Bookmark, ArrowRightLeft, ArrowLeft, Mail, Phone, ChevronRight } from "lucide-react";
import MortgageCalculator from "./MortgageCalculator";
import { formatIDR } from "../utils";
import { motion, AnimatePresence } from "motion/react";
import { translations } from "../translations";

interface PropertyDetailProps {
  lang: "en" | "id";
  property: Property;
  onBackToCatalog: () => void;
  isSaved: boolean;
  onToggleSave: () => void;
  isCompared: boolean;
  onToggleCompare: () => void;
  onInitiateInquiry: (agentName: string, propertyTitle: string) => void;
}

export default function PropertyDetail({
  lang,
  property,
  onBackToCatalog,
  isSaved,
  onToggleSave,
  isCompared,
  onToggleCompare,
  onInitiateInquiry
}: PropertyDetailProps) {
  const [activeImageIdx, setActiveImageIdx] = useState(0);

  const isEn = lang === "en";
  const t = translations[lang];

  // Dynamically derive the localized version of the current property if the lang is "id"
  const localProp = React.useMemo(() => {
    if (isEn) return property;

    const translateMap: Record<string, Partial<Property>> = {
      "prop-glass-pavilion": {
        title: "Paviliun Kaca (The Glass Pavilion)",
        narrativeTitle: "Narasi Arsitektur",
        narrativeDescription: "Diciptakan sebagai sebuah dialog antara bentuk dan lanskap, Paviliun Kaca (The Glass Pavilion) berdiri sebagai bukti pembatasan desain minimalis. Sang arsitek, dengan memanfaatkan topografi alami yang ada, menciptakan struktur yang tampak mengapung di atas lembah. Setiap garis pandang direncanakan secara cermat untuk menarik lingkungan luar ke dalam, memaburkan batas antara tempat perlindungan dan alam bebas.\n\nPalet material sengaja dibuat tenang — beton cetak, baja sikat, dan bidang kaca lebar rendah zat besi — memungkinkan perubahan cahaya siang hari menjadi elemen dekoratif utama. Ini adalah latihan dalam kemewahan yang tenang, dirancang bukan untuk berteriak, melainkan untuk beresonansi secara mendalam dengan mereka yang menghargai kemurnian spasial.",
        specifications: [
          "Meja dapur monolitik batu gelap yang diasah",
          "Fasad kaca struktural rendah zat besi yang luas",
          "Elemen kamar mandi marmer Italia premium yang diimpor",
          "Sistem aliran udara iklim pintar yang terintegrasi",
          "Kolam renang air asin infinity outdoor berpemanas 18 meter",
          "Dapur koki kelas profesional"
        ],
        location: "Uluwatu, Bali"
      },
      "prop-cliff-retreat": {
        title: "Monolit Uluwatu (The Uluwatu Monolith)",
        narrativeTitle: "Dialog antara Batu dan Laut",
        narrativeDescription: "Menghadap ke kedalaman biru Samudra Hindia, vila ini mewakili komitmen mutlak terhadap keanggunan brutal klasik. Volume geometris raksasa dari batu vulkanik potongan tangan lokal kontras dengan bingkai kayu ringan yang halus.",
        specifications: [
          "Dinding utama batu vulkanik utuh",
          "Garis pandangan laut 180° tanpa terputus",
          "Gudang anggur batu kapur bawah tanah",
          "Akses lift tebing pribadi",
          "Akustik suara luar ruangan Bose terintegrasi khusus"
        ],
        location: "Pecatu Cliffside, Bali"
      },
      "prop-canggu-bamboo": {
        title: "Sanctum Bambu Canggu (Canggu Bamboo Sanctum)",
        narrativeTitle: "Simfoni Eko-Minimalisme",
        narrativeDescription: "Dipahat seluruhnya dari bambu hitam pilihan dan kayu jati ringan yang berkelanjutan, Canggu Bamboo Sanctum berfungsi sebagai organisme yang hidup dan bernapas. Kurva struktural yang mengalir dan paviliun umum yang terbuka memanfaatkan ventilasi silang alami, benar-benar meminimalkan tata letak energi.\n\nKolam teratai pribadi memantulkan keindahan arsitektur di bawah cahaya alami, sementara kamar suite individu dilengkapi dengan kolam beton tersembunyi yang tenang dan kamar mandi basal pahatan tangan.",
        specifications: [
          "Superstruktur bambu hitam Petung berkelanjutan yang diproses khusus",
          "Integrasi kolam renang alami tepi sungai pribadi",
          "Plafon anyaman buluh struktural buatan tangan",
          "Jaringan penyimpanan listrik bertenaga surya penuh",
          "Perlengkapan mandi utama beraksen tembaga berkualitas tinggi"
        ],
        location: "Canggu, Bali"
      },
      "prop-sayan-ridge": {
        title: "Paviliun Sayan Ridge (The Sayan Ridge Pavilion)",
        narrativeTitle: "Geometri Hutan Gantung",
        narrativeDescription: "Terletak di punggungan lembah paling premium di Ubud, mahakarya ini menampilkan kantilever beton mentah dramatis yang menjorok dengan berani di atas kanopi Sungai Ayung yang suci. Desain ini memanfaatkan ketinggian fisik, membingkai panorama hutan zamrud dari lantai hingga langit-langit yang tanpa cela.\n\nDari pintu masuk, sebuah jembatan batu gantung menarik para tamu melintasi aliran filtrasi air hujan yang tenang ke dalam atrium visual pusat yang menjulang tinggi.",
        specifications: [
          "Kolam renang hitam basalt gantung sepanjang 25 meter",
          "Studio kesehatan termal bawah tanah vulkanik",
          "Perapian batu vulkanik pahatan khusus yang kokoh",
          "Integrasi pendingin dalam ruangan tanpa suara Daikin VRV",
          "Sistem perlindungan ruang darurat multi-tingkat terintegrasi"
        ],
        location: "Sayan Ridge, Ubud, Bali"
      },
      "prop-jakarta-residence": {
        title: "Penthouse Menteng (The Menteng Penthouse)",
        narrativeTitle: "Kedaulatan di Atas Langit",
        narrativeDescription: "Menjulang tinggi di atas kawasan Menteng yang rindang dan bersejarah di Jakarta Pusat, penthouse dupleks eksklusif ini dirancang bagi individu cerdas yang menghargai privasi perkotaan maksimal. Langit-langit tinggi dan baja struktural khusus membingkai pemandangan kota panorama yang menakjubkan.",
        specifications: [
          "Lift pribadi bertenaga kartu akses berkecepatan tinggi",
          "Ruang tamu formal mewah dengan langit-langit setinggi dua lantai",
          "Meja marmer emas Calacatta yang diasah halus",
          "Sistem masuk keamanan canggih kelas satu",
          "Layanan concierge residen khusus 24 jam"
        ],
        location: "Menteng, Jakarta Selatan"
      },
      "prop-senopati-tower": {
        title: "Loft Minimalis Tinggi Senopati (Minimalist High-Rise Loft)",
        narrativeTitle: "Kemurnian Arsitektur Industrial",
        narrativeDescription: "Kolom beton struktural terekspos berpadu dengan lantai kayu walnut halus di penthouse studio lantai tinggi ini. Jendela komersial yang besar membanjiri ruang tamu dengan cahaya orientasi utara alami yang lembut.",
        specifications: [
          "Fasad kaca panorama dari lantai ke langit-langit",
          "Lantai kayu keras kokoh ek ek berkabut",
          "Tata letak dapur kustom minimalis Denmark",
          "Kontrol iklim ruangan pintar oleh Daikin"
        ],
        location: "Senopati, Jakarta"
      },
      "prop-jakarta-scbd-obsidian": {
        title: "Loft SCBD Obsidian (The SCBD Obsidian Loft)",
        narrativeTitle: "Minimalisme Urban yang Megah",
        narrativeDescription: "Terletak di pusat mutlak kluster finansial utama Jakarta. Loft Obsidian menggunakan panel kaca tebal kedap suara tiga lapis berwarna gelap dan rangka baja hitam matte struktural demi mengisolasi penghuni dari kebisingan industri kota.\n\nPenthouse ini mencakup meja komando yang sepenuhnya otomatis, akses parkir lift mekanis kartu akses yang aman, dan ruang tamu luar ruangan di atas langit yang dinamis.",
        specifications: [
          "Sistem keamanan sidik jari terintegrasi oleh Assa Abloy",
          "Ruang langit pribadi dengan perapian dan kolam renang berpemanas",
          "Ruang kerja kayu walnut yang diredam suara khusus",
          "Gudang lift mekanis bawah tanah berkapasitas 2 mobil",
          "Peralatan dapur struktural high-end Jerman oleh Gaggenau"
        ],
        location: "SCBD, Jakarta"
      },
      "prop-jakarta-kemang-canopy": {
        title: "Vila Kanopi Kemang (The Kemang Canopy Villa)",
        narrativeTitle: "Kanopi Urban Tropis",
        narrativeDescription: "Sebuah real estat mewah menawan yang memperkenalkan elemen hutan hujan mentah ke pinggiran kota Jakarta Selatan. Berpusat di sekitar pohon Bodhi besar yang dilindungi, struktur ini dibagi menjadi paviliun-paviliun terpisah yang dihubungkan oleh jembatan kayu layang.\n\nSetiap kamar tidur memiliki slot orientasi taman pribadi, sementara ruang tamu utama menampilkan beton cetak setinggi langit-langit ganda dan kolam air batu monolitik.",
        specifications: [
          "Jembatan kayu kayu ulin hutan layang",
          "Kolam renang halaman batu sabak yang diolah dengan garam murni",
          "Bioskop pribadi bawah tanah kedap suara penuh",
          "Sistem kontrol iklim dan pemurnian udara terintegrasi khusus",
          "Pos penjaga keamanan concierge klien 24/7 khusus"
        ],
        location: "Kemang Selatan, Jakarta"
      },
      "prop-surabaya-famili": {
        title: "Graha Famili Sanctuary (The Graha Sanctuary)",
        narrativeTitle: "Oasis Kontemporer di Jawa Timur",
        narrativeDescription: "Terletak di jalan berpintu gerbang paling bergengsi di Graha Famili, rumah mewah beton struktural khusus ini mengintegrasikan halaman dalam ruangan dan kolam Koi dengan area dinamis keluarga yang luas.",
        specifications: [
          "Tiga tata letak halaman internal yang saling terhubung",
          "Dapur basah dan kering komersial bersuhu ganda",
          "Jalan setapak internal batu basal khusus",
          "Sistem penyiram bawah tanah otomatis",
          "Galeri bawah tanah pribadi untuk beberapa mobil"
        ],
        location: "Graha Famili, Surabaya"
      },
      "prop-citraland-villa": {
        title: "Paviliun Putih Citraland (The White Pavilion)",
        narrativeTitle: "Proporsi Arsitektur Klasik",
        narrativeDescription: "Sebuah studi menawan tentang bayangan alami, garis klasik, dan pasangan bata putih bersih. Pilar vertikal sempurna membingkai jendela kaca tinggi yang menghadap ke taman bergaya Eropa formal yang terawat.",
        specifications: [
          "Atrium masuk formal setinggi tiga lantai",
          "Pintu dan perlengkapan jati solid premium yang diproses khusus",
          "Lantai batu Travertine Italia di seluruh ruangan",
          "Ruang perlindungan darurat dan suite keamanan yang dipesan khusus"
        ],
        location: "Citraland, Surabaya"
      },
      "prop-surabaya-dharmahusada": {
        title: "Monolit Dharmahusada (Dharmahusada Monolith)",
        narrativeTitle: "Suaka Urban Brutalis",
        narrativeDescription: "Dibuat sebagai perisai geometris kokoh terhadap panas Surabaya, suaka Dharmahusada ini memadukan lempengan batu vulkanik monolitik dan beton cetak papan struktural mentah. Rumah ini berpusat di sekitar kolam halaman pendingin yang tenang dan saluran air alami yang mengalir terus-menerus.\n\nSemua fasad kaca ditempatkan jauh ke dalam dari sudut sinar matahari untuk mengontrol dampak iklim tanpa mengorbankan pemandangan organik.",
        specifications: [
          "Saluran air internal batu basal kustom",
          "Layar geser kayu mentah besar setinggi dua lantai ganda",
          "Kaca transparan tebal terisolasi panas yang tersembunyi jauh",
          "Galeri bawah tanah untuk 6 kendaraan kurasi",
          "Dapur dapur koki profesional berbahan baja tahan karat"
        ],
        location: "Dharmahusada, Surabaya"
      },
      "prop-bandung-dago": {
        title: "Paviliun Kreatif Dago (The Dago Creative Pavilion)",
        narrativeTitle: "Monumen Pinus dan Beton",
        narrativeDescription: "Keajaiban arsitektur di bukit Dago yang sejuk ini berfungsi sebagai studio desain utama atau markas besar komersial kelas atas. Dibuat dari beton mentah, dan kisi-kisi pinus struktural lokal yang menyaring sinar matahari alami.",
        specifications: [
          "Rangkaian ventilasi pasif pemenang penghargaan",
          "Studio gantung terbuka yang menjulang tinggi",
          "Louvre eksternal pinus pengarah cahaya matahari siang",
          "Rangkaian koneksi serat optik berkapasitas tinggi",
          "Area parkir aman berkapasitas 40 kendaraan"
        ],
        location: "Bukit Dago, Bandung"
      },
      "prop-bandung-braga": {
        title: "Studio Warisan Braga (Braga Heritage Studio)",
        narrativeTitle: "Kebangkitan Minimalis Hindia-Belanda",
        narrativeDescription: "Awalnya dibangun pada tahun 1930, permata Braga ini diperbarui dengan penuh cinta pada tahun 2024 oleh arsitek lokal pemenang penghargaan. Pelestarian struktural yang sempurna dipadukan dengan semen halus hiper-modern dan bingkai logam hitam.",
        specifications: [
          "Pelestarian ketat fasad struktural tahun 1930",
          "Infrastruktur jaringan energi tegangan tinggi modern",
          "Halaman taman Zen internal yang tenang",
          "Penghalang kaca struktural berisolator ganda"
        ],
        location: "Braga, Bandung Tengah"
      },
      "prop-bandung-dago-peak": {
        title: "Dago Peak Glass Atelier",
        narrativeTitle: "Atelier Kreatif Ketinggian Tinggi",
        narrativeDescription: "Terletak di puncak tertinggi Dago Pakar, atelier ini memiliki pilar baja vertikal yang menjulang tinggi dan dinding kaca struktural rendah zat besi yang terus-menerus menghadap ke seluruh lembah pegunungan Bandung.\n\nDirancang terutama untuk konsultasi kelas atas, galeri, atau tata letak ruang kerja kreatif, ini memberikan kemampuan perlindungan pribadi mutlak yang seimbang dengan ruang resepsi panorama yang dramatis.",
        specifications: [
          "Pemandangan garis punggungan ketinggian tinggi 360 derajat yang terus-menerus",
          "Pemanasan iklim matahari pasif dan ventilasi kayu alami",
          "Paviliun perapian kustom yang menampung hingga 24 tamu",
          "Pipa integrasi data serat terenkripsi yang aman",
          "Cetak biru akses helipad khusus"
        ],
        location: "Dago Pakar, Bandung"
      }
    };

    const targetTrans = translateMap[property.id];
    if (targetTrans) {
      return {
        ...property,
        ...targetTrans
      };
    }
    return property;
  }, [property, isEn]);

  const agentAssigned = React.useMemo(() => {
    const rawAgent = AGENTS.find((a) => a.id === localProp.agentId) || AGENTS[0];
    if (isEn) return rawAgent;

    // Localized agent bios for Indonesian
    if (rawAgent.id === "agent-alistair") {
      return {
        ...rawAgent,
        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 (rawAgent.id === "agent-clara") {
      return {
        ...rawAgent,
        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 (rawAgent.id === "agent-hiroshi") {
      return {
        ...rawAgent,
        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 rawAgent;
  }, [localProp.agentId, isEn]);

  return (
    <div className="space-y-16 animate-fade-in" id={`property-detail-page-${localProp.id}`}>
      {/* Return to Portfolio Nav rail */}
      <div className="max-w-[1440px] mx-auto text-left">
        <button
          onClick={onBackToCatalog}
          className="inline-flex items-center gap-3.5 text-[10px] font-sans font-bold uppercase tracking-[0.25em] text-zinc-400 hover:text-[#1A1A1A] transition-colors duration-500 cursor-pointer focus:outline-none group/back"
        >
          <ArrowLeft size={13} className="text-[#C5A572] transition-transform duration-300 group-hover/back:-translate-x-2" />
          <span>{t.backToCatalog.toUpperCase()}</span>
        </button>
      </div>

      {/* Hero Gallery Section */}
      <section className="w-full h-[65vh] md:h-[80vh] relative overflow-hidden bg-black group border-b border-[#EEECE6]/40 select-none">
        
        {/* Animated image gallery with smooth transitions */}
        <AnimatePresence mode="wait">
          <motion.img
            key={activeImageIdx}
            src={localProp.images[activeImageIdx]}
            alt={`${localProp.title} detailed visual view ${activeImageIdx + 1}`}
            initial={{ opacity: 0, scale: 1.02 }}
            animate={{ opacity: 0.95, scale: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
            className="w-full h-full object-cover"
          />
        </AnimatePresence>

        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-black/30 pointer-events-none" />

        {/* Gallery Thumbnails Overlay */}
        {localProp.images.length > 1 && (
          <div className="absolute bottom-6 left-5 md:left-[80px] z-20 flex gap-2.5">
            {localProp.images.map((imgUrl, idx) => (
              <button
                key={idx}
                type="button"
                onClick={() => setActiveImageIdx(idx)}
                className={`w-20 h-14 md:w-28 md:h-16 rounded-none overflow-hidden border-2 transition-all duration-300 cursor-pointer ${
                  activeImageIdx === idx ? "border-[#C5A572] scale-102" : "border-white/40 hover:border-white"
                }`}
              >
                <img src={imgUrl} alt="Thumbnail view" className="w-full h-full object-cover" />
              </button>
            ))}
          </div>
        )}

        {/* Details Overlay Badges */}
        <div className="absolute top-6 left-5 md:left-[80px] z-20 flex gap-2">
          {localProp.isFeatured && (
            <span className="bg-[#1A1A1A] text-white border border-[#C5A572]/20 font-sans text-[8px] font-bold uppercase tracking-[0.25em] px-3.5 py-1.5 shadow-xl">
              {isEn ? "EXCLUSIVE HARMONY" : "HARMONI EKSKLUSIF"}
            </span>
          )}
          {localProp.recentlyAdded && (
            <span className="bg-[#C5A572] text-white font-sans text-[8px] font-bold uppercase tracking-[0.25em] px-3.5 py-1.5 shadow-xl">
              {isEn ? "RECENT ASSESSMENT" : "PENILAIAN TERBARU"}
            </span>
          )}
        </div>

        {/* Bookmark & Comparison Buttons */}
        <div className="absolute top-6 right-5 md:right-[80px] z-20 flex gap-2">
          <button
            onClick={onToggleSave}
            className={`w-11 h-11 rounded-none flex items-center justify-center border transition-all duration-500 cursor-pointer ${
              isSaved
                ? "bg-[#C5A572] text-white border-[#C5A572]"
                : "bg-white/95 hover:bg-white text-[#1A1A1A] border-[#EEECE6] hover:shadow-lg"
            }`}
            title={isSaved ? "Saved" : "Save Property"}
          >
            <Bookmark className="w-4 h-4" />
          </button>
          
          <button
            onClick={onToggleCompare}
            className={`w-11 h-11 rounded-none flex items-center justify-center border transition-all duration-500 cursor-pointer ${
              isCompared
                ? "bg-[#1A1A1A] text-white border-[#1A1A1A]"
                : "bg-white/95 hover:bg-white text-[#1A1A1A] border-[#EEECE6] hover:shadow-lg"
            }`}
            title={isCompared ? "Remove from Compare" : "Compare"}
          >
            <ArrowRightLeft className="w-4 h-4" />
          </button>
        </div>
      </section>

      {/* Main Content Area */}
      <section className="max-w-[1440px] mx-auto text-left">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-[64px]">
          
          {/* LEFT COLUMN: Narrative & Details (Spans 7 cols) */}
          <div className="lg:col-span-7 space-y-16 lg:space-y-24">
            
            {/* The Architectural Narrative */}
            <div className="space-y-6">
              <span className="font-sans text-[9px] font-bold uppercase tracking-[0.3em] text-[#C5A572] block">
                {t.architecturalNarrative.toUpperCase()}
              </span>
              <h2 className="font-serif text-3xl md:text-4xl font-extralight tracking-tight text-[#1A1A1A] leading-snug">
                {localProp.narrativeTitle}
              </h2>
              <div className="font-sans text-xs md:text-sm text-[#555555] space-y-5 leading-loose font-light whitespace-pre-line" id="narrative-body">
                {localProp.narrativeDescription}
              </div>
            </div>

            {/* Content Segment: Spec Layout Details */}
            <div className="border-t border-[#EEECE6] pt-12 space-y-6">
              <h3 className="font-serif text-xl tracking-tight text-[#1A1A1A] font-normal">
                {t.specifications}
              </h3>
              <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-sans text-zinc-500">
                {localProp.specifications.map((spec, i) => (
                  <li key={i} className="flex items-start gap-2.5 pl-1">
                    <ChevronRight className="w-3.5 h-3.5 text-[#C5A572] shrink-0 mt-0.5" />
                    <span className="font-light leading-relaxed">{spec}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Dual high-aspect interior details masonry as design reference */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-6">
              <div className="space-y-3 text-center">
                <div className="aspect-[4/5] bg-[#F5F3EF] overflow-hidden rounded-none border border-[#EEECE6]/60">
                  <img
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuAp0_bmJs46Mo6zUkP3isAv1doUwFMDxgXcGDBqzxnAMZkKmgpTE1oIuWnVDexpIzNd2BjtKgB1p__mEDWWEUg-0OUuWPms3MJAVo4KnmshPKezNPDjDUqI2SSmnGYOetZPPRkUf-Mx4Oa3BJE6Xsb4AjIcVFKvL6y0C83h1NFZcknPaTfLyyZfkhRPZtnnvr0nTnoMX7RpC218wKfwKotDtMeqhK7l_elA9ADbt1w3V7dS16qK5milEXo4MvvM1lNH0xJogpg7qpQ"
                    alt="Interior detailed fireplace view"
                    className="w-full h-full object-cover hover:scale-[1.02] transition-transform duration-[1.2s] ease-[0.16, 1, 0.3, 1]"
                  />
                </div>
                <span className="block font-sans text-[10px] text-zinc-400 italic font-mono tracking-wider">
                  {isEn ? "Fig 1. Monolithic raw basalt heat chambers" : "Gbr 1. Ruang pemanas basalt mentah monolitik"}
                </span>
              </div>

              <div className="space-y-3 text-center">
                <div className="aspect-[4/5] bg-[#F5F3EF] overflow-hidden rounded-none border border-[#EEECE6]/60">
                  <img
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPAsZyETQCpXbNrQJ0FJFiiG63C1m0jR6NXy9Q30udJDt17msB-mUZgSBgSPejTfnTt1UvGCsMN6F9CV5YPo_bHO65jomcPeWqSKCPflvkVajHv1XVZP1R3dkpZEV6SuxA5PxR0zTBAwRAkJ83_R5HEGOL62TjUB2d7jrfc4liBKXCWKV2vADqCoLDsHAMEH1_aKGmFYbGUUWA75k5RpP1cGfJ6OU4KF6prdK_EcK8bzls1PVgP8V8jKIcXCdl6jxeTIcOCmOgXZ0"
                    alt="Kitchen architectural detail mockup"
                    className="w-full h-full object-cover hover:scale-[1.02] transition-transform duration-[1.2s] ease-[0.16, 1, 0.3, 1]"
                  />
                </div>
                <span className="block font-sans text-[10px] text-zinc-400 italic font-mono tracking-wider">
                  {isEn ? "Fig 2. Seamless dark stone kitchen island structure" : "Gbr 2. Struktur meja dapur monolit batu gelap tanpa sambungan"}
                </span>
              </div>
            </div>

            {/* Custom BlockQuote */}
            <blockquote className="border-t border-[#EEECE6] pt-12">
              <p className="font-serif text-2xl italic tracking-tight text-[#1A1A1A] leading-relaxed font-light">
                {isEn 
                  ? `"A masterclass in spatial restraint, where silence is the loudest design element."`
                  : `"Pelajaran berharga mengenai pembatasan spasial, di mana keheningan adalah elemen desain yang paling lantang."`}
              </p>
              <footer className="mt-3 text-[10px] font-sans font-bold uppercase tracking-[0.25em] text-[#C5A572]">
                {isEn ? "— LUNIAR CURATORIAL BOARD, EDITORIAL ASSESSMENT" : "— DEWAN KURATOR LUNIAR, PENILAIAN EDITORIAL"}
              </footer>
            </blockquote>

            {/* Location Section */}
            <div className="border-t border-[#EEECE6] pt-12 space-y-6" id="location-view">
              <div className="flex justify-between items-center flex-wrap gap-2">
                <h3 className="font-serif text-xl tracking-tight text-[#1A1A1A] font-normal">
                  {isEn ? "Geographic Anchor" : "Jangkar Geografis"}
                </h3>
                <span className="font-mono text-[10px] uppercase font-bold tracking-widest text-[#C5A572] bg-[#F5F3EF] border border-[#EEECE6] px-3 py-1">
                  LAT: {localProp.coordinates.lat}° / LNG: {localProp.coordinates.lng}°
                </span>
              </div>
              
              {/* Immersive Geographic Mock Maps Grid */}
              <div className="h-72 bg-[#F5F3EF]/60 border border-[#EEECE6] rounded-none relative overflow-hidden flex items-center justify-center">
                {/* Visual grid layout */}
                <div className="absolute inset-0 grid grid-cols-12 grid-rows-6 opacity-[0.03] pointer-events-none">
                  {Array.from({ length: 72 }).map((_, i) => (
                    <div key={i} className="border border-[#1A1A1A]" />
                  ))}
                </div>

                {/* Satellite Vector markings */}
                <svg className="absolute inset-0 w-full h-full opacity-10" viewBox="0 0 100 100" preserveAspectRatio="none">
                  <circle cx="50" cy="50" r="45" fill="none" stroke="#1A1A1A" strokeWidth="0.5" strokeDasharray="1 3" />
                  <circle cx="50" cy="50" r="30" fill="none" stroke="#1A1A1A" strokeWidth="0.5" />
                  <line x1="50" y1="0" x2="50" y2="100" stroke="#1A1A1A" strokeWidth="0.5" />
                  <line x1="0" y1="50" x2="100" y2="50" stroke="#1A1A1A" strokeWidth="0.5" />
                </svg>

                {/* Compass visual mapping markup */}
                <div className="text-center space-y-3 z-10 p-6 md:p-8 bg-white/95 backdrop-blur-md border border-[#EEECE6] rounded-none max-w-sm shadow-xl">
                  <div className="w-10 h-10 border border-[#C5A572] flex items-center justify-center rounded-full mx-auto animate-bounce">
                    <span className="material-symbols-outlined text-[18px] text-[#C5A572]">location_on</span>
                  </div>
                  <h4 className="font-serif text-base font-normal tracking-tight text-[#1A1A1A]">
                    {isEn ? "Coordinates Safely Mapped" : "Koordinat Berhasil Dipetakan"}
                  </h4>
                  <p className="font-sans text-[11px] text-zinc-500 leading-relaxed font-light">
                    {localProp.location} <br />
                    {isEn 
                      ? "Secure boundary surveys and neighborhood dossiers are supplied upon request."
                      : "Survei batas lingkungan yang aman dan berkas lingkungan lengkap akan diberikan atas permintaan."}
                  </p>
                </div>
              </div>
            </div>

            {/* Financial amortization mapping component */}
            <div className="pt-10 border-t border-[#EEECE6]">
              <MortgageCalculator initialPrice={localProp.price} lang={lang} />
            </div>
          </div>

          {/* RIGHT COLUMN: Sticky Information Details Panel (Spans 4 cols, offset by 1) */}
          <div className="lg:col-span-4 lg:col-start-9 relative">
            <div className="sticky top-28 space-y-8">
              
              {/* Asset title information block */}
              <div className="space-y-3 pb-6 border-b border-[#EEECE6] text-left">
                <span className="font-sans text-[10px] font-bold uppercase tracking-[0.2em] text-[#C5A572] block">
                  {localProp.location.toUpperCase()}
                </span>
                <h1 className="font-serif text-3xl md:text-[36px] font-light tracking-tight text-[#1A1A1A] leading-tight" id="detail-title">
                  {localProp.title}
                </h1>
                <p className="font-serif text-2xl font-bold text-[#C5A572] pt-1 flex items-baseline gap-1">
                  <span className="font-serif text-2xl font-light">{formatIDR(localProp.price)}</span>
                </p>
                <div className="text-[9px] uppercase font-sans text-zinc-500 font-bold bg-[#F5F3EF] inline-block border border-[#EEECE6] px-3 py-1 mt-1">
                  {isEn ? "PORTFOLIO SECTION:" : "BAGIAN PORTOFOLIO:"} {localProp.category.toUpperCase()}
                </div>
              </div>

              {/* Main parameters metrics list */}
              <div className="space-y-4 pb-6 border-b border-[#EEECE6] font-sans text-xs text-left select-none">
                <div className="flex justify-between items-center py-0.5">
                  <span className="text-zinc-400 uppercase font-bold tracking-[0.16em] text-[10px]">{isEn ? "Bedrooms" : "Kamar Tidur"}</span>
                  <strong className="text-[#1A1A1A] font-mono text-sm font-semibold">{localProp.beds}</strong>
                </div>
                <div className="flex justify-between items-center py-0.5">
                  <span className="text-zinc-400 uppercase font-bold tracking-[0.16em] text-[10px]">{isEn ? "Bathrooms" : "Kamar Mandi"}</span>
                  <strong className="text-[#1A1A1A] font-mono text-sm font-semibold">{localProp.baths}</strong>
                </div>
                <div className="flex justify-between items-center py-0.5">
                  <span className="text-zinc-400 uppercase font-bold tracking-[0.16em] text-[10px]">{isEn ? "Interior area" : "Luas Interior"}</span>
                  <strong className="text-[#1A1A1A] font-mono text-sm font-semibold">
                    {localProp.area.toLocaleString()} {isEn ? "Sq Ft" : "Kaki Persegi"}
                  </strong>
                </div>
                {localProp.lotSize && (
                  <div className="flex justify-between items-center py-0.5">
                    <span className="text-zinc-400 uppercase font-bold tracking-[0.16em] text-[10px]">{isEn ? "Lot Allocation" : "Alokasi Lahan"}</span>
                    <strong className="text-[#1A1A1A] font-mono text-sm font-semibold">
                      {localProp.lotSize.replace("Acres", isEn ? "Acres" : "Ekar")}
                    </strong>
                  </div>
                )}
                <div className="flex justify-between items-center py-0.5">
                  <span className="text-zinc-400 uppercase font-bold tracking-[0.16em] text-[10px]">{isEn ? "Year Constructed" : "Tahun Konstruksi"}</span>
                  <strong className="text-[#1A1A1A] font-mono text-sm font-semibold">{localProp.yearBuilt}</strong>
                </div>
                <div className="flex justify-between items-center py-0.5">
                  <span className="text-zinc-400 uppercase font-bold tracking-[0.16em] text-[10px]">{isEn ? "Registry Code" : "Kode Pendaftaran"}</span>
                  <strong className="text-[#1A1A1A] font-mono text-[11px] text-[#C5A572] font-semibold">LUN-{localProp.id.split("-").pop()?.toUpperCase()}</strong>
                </div>
              </div>

              {/* Agent assignment review */}
              <div className="p-6 border border-[#EEECE6] bg-[#FDFCFB]/90 backdrop-blur-sm rounded-none space-y-4 text-left">
                <span className="block font-sans text-[9px] font-bold uppercase tracking-[0.25em] text-[#C5A572] border-b border-[#EEECE6] pb-2">
                  {isEn ? "ASSIGNED REPRESENTATIVE" : "PERWAKILAN YANG DITUNJUK"}
                </span>
                
                <div className="flex gap-4 items-center">
                  <img
                    src={agentAssigned.image}
                    alt={agentAssigned.name}
                    className="w-12 h-12 object-cover rounded-full border border-[#EEECE6]"
                  />
                  <div>
                    <h5 className="font-serif text-sm font-semibold text-[#1A1A1A]">{agentAssigned.name}</h5>
                    <span className="font-sans text-[9px] text-[#C5A572] uppercase font-bold tracking-[0.2em] block">
                      {agentAssigned.role}
                    </span>
                  </div>
                </div>

                <p className="font-sans text-[11px] text-zinc-500 leading-relaxed font-light">
                  {agentAssigned.bio}
                </p>

                <div className="space-y-1.5 text-[11px] font-mono border-t border-[#EEECE6] pt-4 text-[#555555]">
                  <a href={`mailto:${agentAssigned.email}`} className="flex items-center gap-2 hover:text-[#C5A572] transition-colors">
                    <Mail size={12} className="text-[#C5A572]" />
                    <span className="font-light">{agentAssigned.email}</span>
                  </a>
                  <a href={`tel:${agentAssigned.phone}`} className="flex items-center gap-2 hover:text-[#C5A572] transition-colors pt-1">
                    <Phone size={12} className="text-[#C5A572]" />
                    <span className="font-light">{agentAssigned.phone}</span>
                  </a>
                </div>
              </div>

              {/* Primary call to action trigger */}
              <div className="pt-2">
                <button
                  onClick={() => onInitiateInquiry(agentAssigned.name, localProp.title)}
                  className="w-full bg-[#1A1A1A] hover:bg-[#C5A572] border border-[#1A1A1A] hover:border-[#C5A572] text-[#FDFCFB] font-sans text-[10px] font-bold uppercase tracking-[0.25em] py-4 rounded-none transition-all duration-500 shadow-md cursor-pointer hover:shadow-xl focus:outline-none"
                  id="btn-inquire-direct"
                >
                  {t.initiateAcquisition}
                </button>
              </div>

            </div>
          </div>

        </div>
      </section>
    </div>
  );
}