import React, { useState, useEffect } from "react";
import { Property } from "../types";
import { PROPERTIES, WHY_LUNIAR_POINTS } from "../data";
import { Bookmark, MoveRight, ArrowRight, ArrowLeftRight, Navigation, Compass, Layers, Minimize2 } from "lucide-react";
import { formatIDR } from "../utils";
import { motion, AnimatePresence } from "motion/react";

import { translations } from "../translations";

interface HomeSectionProps {
  onNavigate: (path: string) => void;
  onSelectProperty: (property: Property) => void;
  savedIds: string[];
  onToggleSave: (propertyId: string) => void;
  compareIds: string[];
  onToggleCompare: (property: Property) => void;
  properties?: Property[];
  lang: "en" | "id";
}

export default function HomeSection({
  onNavigate,
  onSelectProperty,
  savedIds,
  onToggleSave,
  compareIds,
  onToggleCompare,
  properties,
  lang
}: HomeSectionProps) {
  const t = translations[lang];
  const isEn = lang === "en";
  const [circularRegistered, setCircularRegistered] = useState(false);
  const [emailInput, setEmailInput] = useState("");
  const [activeSlide, setActiveSlide] = useState(0);
  const [isHovered, setIsHovered] = useState(false);

  // Elite slides representing our top Indonesian masterpieces for the ultimate Hero Section
  const heroSlides = [
    {
      image: "https://lh3.googleusercontent.com/aida-public/AB6AXuBUh4ZZAkF4M6Gfn-xxdWXbiVbyIKCtwFgQ6-VoKB_lETepfmYnlyem_6gqLzCwIuLnjyeoAUzR6LcCCAK9-RGga_8Vl8qmPGvIfSKUVnYCzZNMn5TPBjfZdkpEXHvCkRRE4NkK6-H8nrc5ISuhPdd6unPMIXWBchaYlpgyE7899q7v-olV3FDrtuY70X7R2q-3dVORybtpdTH1n3MF8AvO6hfkmcpnGLuSBx9Jhe8lDlkOUrTve4ed6m_KS7Oa7IFh7s0GUbuzoKc",
      title: isEn ? "The Glass Pavilion" : "Paviliun Kaca",
      location: "Uluwatu, Bali",
      coords: "8.845° S / 115.125° E",
      altitude: isEn ? "142m above wave level" : "142m di atas rona ombak",
      material: isEn ? "Prestressed Basaltic Cast & Low-Iron Glass" : "Hollow Cor Basalt Pra-tegang & Kaca Rendah Besi",
      description: isEn
        ? "A breathtaking geometry suspended rawly over Uluwatu's limestone sea cliffs, mirroring the Indian Ocean currents."
        : "Geometri menakjubkan yang tergantung megah di atas tebing batu kapur Uluwatu, memantulkan dinamika arus Samudra Hindia.",
      path: "/luxury-villas-bali"
    },
    {
      image: "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80&w=1200",
      title: isEn ? "The SCBD Obsidian Loft" : "Obsidian SCBD Loft",
      location: "SCBD, South Jakarta",
      coords: "6.225° S / 106.811° E",
      altitude: isEn ? "48m urban elevation" : "48m elevasi urban kota",
      material: isEn ? "Graphite Anodized Steel & Acoustic Mineral Panels" : "Baja Anodisasi Grafit & Panel Akustik Mineral",
      description: isEn
        ? "An isolated quiet fortress of glass seated firmly above the financial center, shielding residents from industrial noise."
        : "Benteng kaca sunyi terisolasi di atas pusat keuangan, mengisolasi penghuni dari kebisingan kota metropolitan.",
      path: "/apartments-jakarta"
    },
    {
      image: "https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&q=80&w=1200",
      title: isEn ? "The Sayan Ridge Pavilion" : "Paviliun Sayan Ridge",
      location: "Sayan Ridge, Ubud, Bali",
      coords: "8.502° S / 115.241° E",
      altitude: isEn ? "280m tropical canopy ridge" : "280m tebing kanopi tropis",
      material: isEn ? "Exposed Board-formed Slag Concrete & Ironwood" : "Beton Kasar Ekspos & Kayu Ulin",
      description: isEn
        ? "Organic architecture projecting boldly over Ubud's sacred Ayung River canopy, offering 360-degree high-altitude views."
        : "Arsitektur organik yang menonjol gagah di atas kanopi Sungai Ayung yang suci di Ubud, menawarkan pemandangan 360 derajat.",
      path: "/luxury-villas-bali"
    },
    {
      image: "https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1200",
      title: isEn ? "Dago Peak Glass Atelier" : "Atelier Kaca Puncak Dago",
      location: "Dago Pakar, Bandung",
      coords: "6.852° S / 107.635° E",
      altitude: isEn ? "840m volcanic peak elevation" : "840m elevasi puncak gunung",
      material: isEn ? "White Slag Concrete & Tensioned Stainless Mesh" : "Beton Slag Putih & Jaring Baja Tegang",
      description: isEn
        ? "High-altitude creative corporate sanctuary overlooking the entire Bandung basin with passive climate-handling screens."
        : "Sanitari korporat kreatif dataran tinggi yang menghadap ke cekungan Bandung dengan kisi penolak iklim alami pasif.",
      path: "/commercial-property-bandung"
    }
  ];

  // Automated slider rotation (8 seconds)
  useEffect(() => {
    if (isHovered) return;
    const interval = setInterval(() => {
      setActiveSlide((prev) => (prev + 1) % heroSlides.length);
    }, 8000);
    return () => clearInterval(interval);
  }, [isHovered]);

  const activePropertiesState = properties || PROPERTIES;
  const featuredProperties = activePropertiesState.filter((p) => p.isFeatured).slice(0, 3);
  const recentlyAddedProperties = activePropertiesState.filter((p) => p.recentlyAdded).slice(0, 3);

  const categories = [
    {
      title: isEn ? "Bali Luxury Villas" : "Vila Mewah Bali",
      path: "/luxury-villas-bali",
      image: "https://lh3.googleusercontent.com/aida-public/AB6AXuBUh4ZZAkF4M6Gfn-xxdWXbiVbyIKCtwFgQ6-VoKB_lETepfmYnlyem_6gqLzCwIuLnjyeoAUzR6LcCCAK9-RGga_8Vl8qmPGvIfSKUVnYCzZNMn5TPBjfZdkpEXHvCkRRE4NkK6-H8nrc5ISuhPdd6unPMIXWBchaYlpgyE7899q7v-olV3FDrtuY70X7R2q-3dVORybtpdTH1n3MF8AvO6hfkmcpnGLuSBx9Jhe8lDlkOUrTve4ed6m_KS7Oa7IFh7s0GUbuzoKc",
      tagline: isEn ? "Villas (Bali)" : "Vila (Bali)"
    },
    {
      title: isEn ? "Jakarta Apartments" : "Apartemen Jakarta",
      path: "/apartments-jakarta",
      image: "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&q=80&w=600",
      tagline: isEn ? "Apartments (Jakarta)" : "Apartemen (Jakarta)"
    },
    {
      title: isEn ? "Surabaya Houses" : "Rumah Surabaya",
      path: "/houses-surabaya",
      image: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&q=80&w=600",
      tagline: isEn ? "Houses (Surabaya)" : "Rumah (Surabaya)"
    },
    {
      title: isEn ? "Bandung Commercial" : "Komersial Bandung",
      path: "/commercial-property-bandung",
      image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=600",
      tagline: isEn ? "Commercial (Bandung)" : "Komersial (Bandung)"
    }
  ];

  const locations = [
    { city: "Uluwatu, Bali", count: isEn ? "4 properties listed" : "4 properti terdaftar", path: "/luxury-villas-bali", desc: isEn ? "Cliffsides & oceanic vistas" : "Tebing tinggi & hamparan samudera" },
    { city: "Menteng, South Jakarta", count: isEn ? "4 properties listed" : "4 properti terdaftar", path: "/apartments-jakarta", desc: isEn ? "Sovereign noble neighborhoods" : "Kawasan elit & bersejarah" },
    { city: "Graha Famili, Surabaya", count: isEn ? "3 properties listed" : "3 properti terdaftar", path: "/houses-surabaya", desc: isEn ? "Safe modern gated havens" : "Kompleks elit modern yang aman" },
    { city: "Dago Hills, Bandung", count: isEn ? "3 properties listed" : "3 properti terdaftar", path: "/commercial-property-bandung", desc: isEn ? "Crisp mountain creative peak" : "Pegunungan segar & puncak kreatif" }
  ];

  const handleCircularSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (emailInput.trim()) {
      setCircularRegistered(true);
      setEmailInput("");
    }
  };

  return (
    <div className="space-y-28 md:space-y-36 pb-12" id="home-view-container">
      {/* 1. HERO SECTION (Custom Interactive Frame, Staggered, Auto-shifting) */}
      <section 
        className="relative w-full h-[95vh] min-h-[680px] overflow-hidden bg-black flex flex-col justify-end"
        id="hero-banner"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {/* Background Image Carousel with absolute cinematic cross-fade */}
        <div className="absolute inset-0 z-0">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeSlide}
              initial={{ opacity: 0, scale: 1.05 }}
              animate={{ opacity: 0.75, scale: 1.01 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 1.4, ease: [0.16, 1, 0.3, 1] }}
              className="absolute inset-0 w-full h-full"
            >
              <img
                src={heroSlides[activeSlide].image}
                alt={heroSlides[activeSlide].title}
                className="w-full h-full object-cover animate-kenburns"
              />
            </motion.div>
          </AnimatePresence>
          {/* Subtle gradient layers for legible text readings */}
          <div className="absolute inset-0 bg-gradient-to-t from-[#121212] via-black/35 to-black/35" />
          {/* Architectural Line Grids */}
          <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:80px_80px] opacity-60 pointer-events-none" />
        </div>

        {/* Spatial Information Side-Watermark / HUD Panel (Top-Right / Desktop) */}
        <div className="absolute top-28 right-5 md:right-[80px] z-20 text-right space-y-4 hidden md:block">
          <motion.div 
            key={`spatial-${activeSlide}`}
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
            className="space-y-1.5"
          >
            <span className="font-mono text-[9px] uppercase tracking-[0.25em] text-[#C5A572] font-semibold block">
              {isEn ? "INTELLIGENT GEOMETRY" : "GEOMETRI CERDAS"}
            </span>
            <div className="text-[10px] text-zinc-400 font-mono space-y-0.5">
              <p className="font-semibold text-zinc-300">{heroSlides[activeSlide].coords}</p>
              <p>{heroSlides[activeSlide].altitude}</p>
              <p className="text-[#C5A572] max-w-sm truncate text-[9px]">{heroSlides[activeSlide].material}</p>
            </div>
          </motion.div>
        </div>

        {/* Major Banner Titles and Interactive Narrative Panel */}
        <div className="relative z-10 w-full px-5 md:px-[80px] pb-12 md:pb-16 max-w-[1440px] mx-auto text-left flex flex-col justify-end">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-end">
            
            {/* Title / Action triggers (Col span 7) */}
            <div className="lg:col-span-7 space-y-4 md:space-y-6">
              <div className="overflow-hidden flex items-center gap-2">
                <span className="h-[1px] w-6 bg-[#C5A572]" />
                <motion.span 
                  key={`tagline-${activeSlide}`}
                  initial={{ opacity: 0, x: -15 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.5 }}
                  className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-[0.3em] text-[#C5A572]"
                >
                  {heroSlides[activeSlide].location}
                </motion.span>
              </div>

              <div className="overflow-hidden min-h-[140px] md:min-h-[180px]">
                <AnimatePresence mode="wait">
                  <motion.div
                    key={`title-${activeSlide}`}
                    initial={{ opacity: 0, y: 55 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -25 }}
                    transition={{ duration: 0.85, ease: [0.16, 1, 0.3, 1] }}
                  >
                    <h1 className="font-serif text-4xl md:text-6xl text-[#FDFCFB] font-light leading-[1.1] tracking-tight">
                      {heroSlides[activeSlide].title}. <br />
                      <span className="italic font-extralight text-zinc-400 font-serif text-3xl md:text-5xl">
                        {isEn ? "Uncompromising Space." : "Ruang Tanpa Kompromi."}
                      </span>
                    </h1>
                  </motion.div>
                </AnimatePresence>
              </div>

              <div className="min-h-[40px]">
                <AnimatePresence mode="wait">
                  <motion.p
                    key={`desc-${activeSlide}`}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.6 }}
                    className="font-serif text-xs md:text-base text-zinc-300 font-light max-w-md leading-relaxed"
                  >
                    {heroSlides[activeSlide].description}
                  </motion.p>
                </AnimatePresence>
              </div>

              <div className="pt-4 flex flex-wrap gap-4 items-center">
                <button
                  onClick={() => onNavigate(heroSlides[activeSlide].path)}
                  className="inline-flex items-center justify-center px-10 py-4 bg-[#FDFCFB] hover:bg-[#C5A572] border border-[#FDFCFB] hover:border-[#C5A572] text-[#1A1A1A] hover:text-[#FDFCFB] font-sans text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-500 cursor-pointer focus:outline-none opacity-95 hover:opacity-100"
                >
                  {isEn ? "Examine Directory" : "Periksa Direktori"}
                </button>
                <button
                  onClick={() => onNavigate("/about")}
                  className="inline-flex items-center justify-center px-9 py-4 border border-zinc-400/60 hover:border-[#C5A572] text-[#FDFCFB] hover:text-[#C5A572] font-sans text-[10px] font-bold uppercase tracking-[0.2em] hover:bg-white/5 transition-all duration-500 cursor-pointer focus:outline-none"
                >
                  {isEn ? "Curator Values" : "Nilai Kurator"}
                </button>
              </div>
            </div>

            {/* Slide Index Interactors Selector Column (Col span 5) */}
            <div className="lg:col-span-5 flex flex-col space-y-6 lg:items-end justify-center">
              {/* Elegant horizontal numbers selector */}
              <div className="flex gap-4 md:gap-7 items-center">
                {heroSlides.map((slide, i) => {
                  const isActive = activeSlide === i;
                  return (
                    <button
                      key={i}
                      onClick={() => setActiveSlide(i)}
                      className="group flex flex-col text-left py-2 focus:outline-none cursor-pointer"
                    >
                      <span className={`font-mono text-[10px] font-bold transition-colors duration-500 block ${isActive ? "text-[#C5A572]" : "text-zinc-500 group-hover:text-zinc-300"}`}>
                        0{i + 1}
                      </span>
                      <span className={`text-[9px] font-sans uppercase tracking-widest font-semibold transition-colors duration-500 block mt-0.5 ${isActive ? "text-zinc-200" : "text-zinc-600 group-hover:text-zinc-400"} hidden lg:inline`}>
                        {slide.title.split(" ").pop()}
                      </span>
                      {/* Active indicator bar container */}
                      <div className="w-10 md:w-16 h-[2px] bg-zinc-800 relative mt-2 overflow-hidden">
                        {isActive && (
                          <motion.div
                            layoutId="activeSlideProgress"
                            initial={{ x: "-100%" }}
                            animate={{ x: "0%" }}
                            transition={{ duration: 8.0, ease: "linear" }}
                            className="absolute inset-0 bg-[#C5A572]"
                          />
                        )}
                      </div>
                    </button>
                  );
                })}
              </div>

              {/* World-Class luxury indicator at footer */}
              <div className="flex items-center gap-3 opacity-60 self-start lg:self-end">
                <span className="font-mono text-[9px] text-[#FDFCFB] tracking-widest">
                  {isEn ? "TAP FOR COORDINATES" : "KETUK UNTUK KOORDINAT"}
                </span>
                <Compass className="w-3.5 h-3.5 text-[#C5A572] animate-spin" style={{ animationDuration: "12s" }} />
              </div>
            </div>

          </div>
        </div>

        {/* Fine vertical line scroll indicator at center-bottom */}
        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 flex flex-col items-center justify-center pointer-events-none select-none">
          <span className="font-mono text-[8px] text-zinc-500 tracking-[0.25em] mb-1.5 uppercase font-semibold">
            {isEn ? "SCROLL DOWN" : "GULIR KE BAWAH"}
          </span>
          <div className="w-[1.5px] h-10 bg-zinc-800 relative overflow-hidden">
            <span className="absolute left-0 right-0 top-0 h-4 bg-[#C5A572] animate-scroll-line"></span>
          </div>
        </div>
      </section>

      {/* 2. FEATURED PROPERTIES (Modern Editorial Layout - Bento & Grids) */}
      <section className="space-y-16 max-w-[1440px] mx-auto px-5 md:px-[80px]" id="featured-properties-panel">
        
        {/* Editorial Text Block */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-[#EEECE6]/70 pb-6">
          <div className="space-y-2 max-w-2xl">
            <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
              {isEn ? "EDITORIAL EXCLUSIVES" : "EKSKLUSIF EDITORIAL"}
            </span>
            <h2 className="font-serif text-3xl md:text-4xl text-[#1A1A1A] font-extralight leading-none">
              {t.featuredTitle}
            </h2>
            <p className="font-sans text-xs text-[#555555] max-w-lg leading-relaxed">
              {t.featuredSubtitle}
            </p>
          </div>
          <button
            onClick={() => onNavigate("/luxury-villas-bali")}
            className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] hover:text-[#1A1A1A] transition-colors flex items-center gap-2 cursor-pointer pb-1 md:pb-0 group"
          >
            <span>{isEn ? "DISCOVER FULL ROSTER" : "TEMUKAN SELURUH PORTOFOLIO"}</span>
            <MoveRight size={13} className="transition-transform duration-300 group-hover:translate-x-2 text-[#C5A572]" />
          </button>
        </div>

        {/* Premium Geometric Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-y-14 gap-x-[32px]">
          {featuredProperties.map((prop, idx) => {
            const isSaved = savedIds.includes(prop.id);
            const isCompared = compareIds.includes(prop.id);

            return (
              <motion.article 
                key={prop.id} 
                initial={{ opacity: 0, y: 40 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-100px" }}
                transition={{ duration: 0.8, delay: idx * 0.15, ease: [0.16, 1, 0.3, 1] }}
                className="group flex flex-col justify-between h-full bg-[#FDFCFB] border border-[#EEECE6]/60 rounded-none overflow-hidden transition-all duration-700 luxury-shadow relative" 
                id={`featured-card-${prop.id}`}
              >
                {/* Floating specifications snippet reveal */}
                <div className="aspect-[4/3] bg-[#F5F3EF] relative overflow-hidden" onClick={() => onSelectProperty(prop)}>
                  <img
                    src={prop.heroImage}
                    alt={prop.title}
                    className="w-full h-full object-cover group-hover:scale-[1.04] transition-all duration-[1.2s] ease-[0.16, 1, 0.3, 1]"
                  />
                  
                  {/* Glassmorphistic badges top overlay */}
                  <div className="absolute top-4 left-4 z-10 hidden group-hover:flex items-center bg-[#1A1A1A]/85 backdrop-blur-md text-white border border-[#C5A572]/20 px-2.5 py-1 text-[8px] font-mono uppercase tracking-widest font-semibold transition-all">
                    <span>ESTATE CRITERION 0{idx + 1}</span>
                  </div>

                  {/* Floating save & compare utilities panel */}
                  <div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onToggleSave(prop.id);
                      }}
                      className={`w-9 h-9 rounded-none flex items-center justify-center border transition-all duration-300 cursor-pointer ${
                        isSaved ? "bg-[#1A1A1A] border-[#1A1A1A] text-white" : "bg-white/95 text-[#1A1A1A] border-[#EEECE6] hover:bg-[#C5A572] hover:text-white"
                      }`}
                      title={isSaved ? (isEn ? "Remove from bookmarks" : "Hapus dari penanda") : (isEn ? "Save structure" : "Simpan struktur")}
                    >
                      <Bookmark className="w-3.5 h-3.5" />
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onToggleCompare(prop);
                      }}
                      className={`w-9 h-9 rounded-none flex items-center justify-center border transition-all duration-300 cursor-pointer ${
                        isCompared ? "bg-[#C5A572] border-[#C5A572] text-white" : "bg-white/95 text-[#1A1A1A] border-[#EEECE6] hover:bg-[#1A1A1A] hover:text-white"
                      }`}
                      title={isEn ? "Add to portfolio evaluation space" : "Tambah ke ruang evaluasi portofolio"}
                    >
                      <ArrowLeftRight className="w-3.5 h-3.5" />
                    </button>
                  </div>

                  {/* Quick structural tag overlay inside picture */}
                  <div className="absolute bottom-3 left-4 bg-white/90 backdrop-blur-sm px-2.5 py-[3px] border border-[#EEECE6] font-mono text-[8px] font-bold text-[#1A1A1A] uppercase tracking-widest">
                    {prop.category === "villas" ? t.villas : prop.category === "apartments" ? t.apartments : prop.category === "houses" ? t.houses : t.commercial}
                  </div>
                </div>

                <div className="p-7 flex-1 flex flex-col justify-between space-y-5">
                  <div className="space-y-2">
                    <div className="flex items-center gap-1.5">
                      <span className="w-1.5 h-1.5 bg-[#C5A572] rounded-full inline-block" />
                      <span className="font-sans text-[10px] uppercase tracking-[0.25em] text-[#C5A572] font-semibold">
                        {prop.location}
                      </span>
                    </div>

                    <h3 
                      onClick={() => onSelectProperty(prop)} 
                      className="font-serif text-xl font-normal text-[#1A1A1A] hover:text-[#C5A572] cursor-pointer transition-colors duration-300 leading-tight block"
                    >
                       {prop.title}
                    </h3>
                    
                    <div className="flex items-center gap-4 text-[#555555] font-mono text-[10px] uppercase tracking-[0.1em] border-t border-[#F5F3EF] pt-2 mt-1">
                      <div className="flex items-center gap-1">
                        <Layers className="w-3 h-3 text-[#C5A572]" />
                        <span>{prop.area.toLocaleString()} SQFT</span>
                      </div>
                      <span>•</span>
                      <span>{prop.beds} {t.beds}</span>
                      <span>•</span>
                      <span>{prop.baths} {t.baths}</span>
                    </div>
                  </div>

                  <div className="flex justify-between items-center border-t border-[#EEECE6]/60 pt-4 mt-2">
                    <span className="font-serif text-lg font-bold text-[#1A1A1A] font-light">
                      {formatIDR(prop.price)}
                    </span>
                    <button onClick={() => onSelectProperty(prop)} className="font-sans text-[9px] font-bold uppercase tracking-[0.25em] text-[#C5A572] hover:text-[#1A1A1A] transition-colors duration-300 cursor-pointer flex items-center gap-1.5 group/btn">
                      <span>{isEn ? "DOSSIER" : "DOSIR"}</span>
                      <span className="material-symbols-outlined text-[12px] transition-transform duration-300 group-hover/btn:translate-x-1">arrow_outward</span>
                    </button>
                  </div>
                </div>
              </motion.article>
            );
          })}
        </div>
      </section>

      {/* 3. PROPERTY CATEGORIES (Highly Minimalistic, Large Visual classification Cards) */}
      <section className="space-y-16 max-w-[1440px] mx-auto px-5 md:px-[80px]" id="categories-section">
        <div className="space-y-2 border-b border-[#EEECE6]/70 pb-6">
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
            {isEn ? "ESTATE CLASSIFICATIONS" : "KLASIFIKASI PROPERTI"}
          </span>
          <h2 className="font-serif text-3xl md:text-4xl text-[#1A1A1A] font-extralight leading-none">
            {isEn ? "Curated" : "Klasifikasi"} <span className="italic">{isEn ? "Classifications" : "Terpilih"}</span>
          </h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {categories.map((cat, i) => (
            <div
              key={i}
              onClick={() => onNavigate(cat.path)}
              className="group relative h-[420px] rounded-none overflow-hidden cursor-pointer shadow-sm border border-[#EEECE6]"
              id={`cat-card-${i}`}
            >
              <img
                src={cat.image}
                alt={cat.title}
                className="w-full h-full object-cover group-hover:scale-105 transition-all duration-[1.2s] ease-[0.16, 1, 0.3, 1]"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
              <div className="absolute bottom-6 left-6 right-6 text-left space-y-2 z-10">
                <span className="font-sans text-[8px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
                  {cat.tagline}
                </span>
                <h3 className="font-serif text-xl font-normal text-white leading-tight">
                  {cat.title}
                </h3>
                <span className="font-sans text-[9px] font-bold text-zinc-300 uppercase tracking-[0.25em] group-hover:text-[#C5A572] transition-colors duration-300 pt-1 flex items-center gap-1.5">
                  <span>{isEn ? "ENTER CABINET" : "MASUK UTAMA"}</span>
                  <ArrowRight size={11} className="text-[#C5A572] transition-transform duration-300 group-hover:translate-x-1" />
                </span>
              </div>
              
              {/* Thin interactive side-border on hover */}
              <div className="absolute bottom-0 left-0 w-[1.5px] h-0 bg-[#C5A572] transition-all duration-700 group-hover:h-full" />
            </div>
          ))}
        </div>
      </section>

      {/* 4. THE CURATORIAL standard (Sophisticated Editorial Manifesto, High Contrast) */}
      <section className="bg-[#1A1A1A]/95 text-[#FDFCFB] border-y border-[#EEECE6]/10 py-24 relative overflow-hidden" id="why-luniar-panel">
        <div className="absolute inset-0 blueprint-grid opacity-[0.03] pointer-events-none" />
        
        <div className="max-w-[1440px] mx-auto px-5 md:px-[80px] grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-[80px] items-start">
          
          <div className="lg:col-span-4 space-y-6">
            <span className="font-sans text-[10px] font-bold uppercase tracking-[0.3em] text-[#C5A572] block">
              {isEn ? "THE CURATORIAL MANIFESTO" : "MANIFESTO KURATORIAL"}
            </span>
            <h2 className="font-serif text-3xl md:text-4xl font-extralight tracking-tight leading-snug">
              {isEn ? "An Architectural Agency," : "Agensi Arsitektur,"} <br />
              <span className="italic font-normal text-[#C5A572]">{isEn ? "Not A Listing Engine." : "Bukan Mesin Iklan Properti."}</span>
            </h2>
            <p className="font-sans text-xs text-zinc-400 leading-relaxed font-light">
              {isEn
                ? "We operate exclusively in elite circles. Every micro-structure in our directories is evaluated by raw structural composition, environmental dialog, and visual coherence. We reject 95% of standard developments to present purely artistic sanctuaries."
                : "Kami beroperasi secara eksklusif dalam lingkaran elit. Setiap struktur mikro dalam indeks kami dievaluasi berdasarkan komposisi struktural mentah, dialog lingkungan, dan koherensi visual. Kami menolak 95% pembangunan standar demi menyajikan tempat perlindungan yang murni artistik."}
            </p>
            <div className="pt-2">
              <button 
                onClick={() => onNavigate("/about")}
                className="bg-transparent border border-zinc-700 text-zinc-300 hover:text-white hover:border-[#C5A572] px-6 py-3 font-sans text-[10px] uppercase font-bold tracking-widest transition-all duration-500 cursor-pointer"
              >
                {isEn ? "Examine Manifesto" : "Periksa Manifesto"}
              </button>
            </div>
          </div>

          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-3 gap-10">
            {WHY_LUNIAR_POINTS.map((pt, idx) => {
              const cardTitle = pt.title === "Curatorial Rigor" ? t.curatorialRigorTitle : pt.title === "Architectural Knowledge" ? t.architecturalKnowledgeTitle : t.quietAdvisoryTitle;
              const cardDesc = pt.title === "Curatorial Rigor" ? t.curatorialRigorDesc : pt.title === "Architectural Knowledge" ? t.architecturalKnowledgeDesc : t.quietAdvisoryDesc;
              return (
                <div key={idx} className="space-y-4 border-l border-zinc-800 hover:border-[#C5A572] pl-6 py-1 transition-all duration-500">
                  <span className="font-mono text-[9px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
                    {isEn ? `CRITERION 0${idx + 1}` : `KRITERIA 0${idx + 1}`}
                  </span>
                  <h4 className="font-serif text-lg font-normal text-white">{cardTitle}</h4>
                  <p className="font-sans text-zinc-400 text-xs leading-relaxed font-light">
                    {cardDesc}
                  </p>
                </div>
              );
            })}
          </div>

        </div>
      </section>

      {/* 5. MINIMAL MICRO-LOCATIONS (Terrain Focus Visual Grid) */}
      <section className="space-y-16 max-w-[1440px] mx-auto px-5 md:px-[80px]" id="featured-locations">
        <div className="space-y-2 border-b border-[#EEECE6]/70 pb-6">
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
            {isEn ? "TERRAIN FOCUS" : "FOKUS MEDAN WILAYAH"}
          </span>
          <h2 className="font-serif text-3xl md:text-4xl text-[#1A1A1A] font-extralight leading-none">
            {isEn ? "Featured" : "Lokasi-Mikro"} <span className="italic">{isEn ? "Micro-Locations" : "Terpilih"}</span>
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {locations.map((loc, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, scale: 0.98 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: i * 0.1 }}
              onClick={() => onNavigate(loc.path)}
              className="bg-[#FDFCFB]/90 backdrop-blur-sm border border-[#EEECE6]/70 rounded-none p-6 hover:border-[#C5A572] cursor-pointer transition-all duration-500 flex flex-col justify-between h-52 group hover:shadow-xl hover:-translate-y-1"
              id={`loc-card-${i}`}
            >
              <div className="space-y-4">
                <div className="w-8 h-8 rounded-none border border-[#EEECE6] group-hover:border-[#C5A572] flex items-center justify-center transition-all">
                  <span className="material-symbols-outlined text-[#C5A572] text-[18px]">explore</span>
                </div>
                <div>
                  <h4 className="font-serif text-lg font-normal text-[#1A1A1A]">{loc.city}</h4>
                  <p className="font-sans text-[10px] text-zinc-400 font-light mt-0.5">{loc.desc}</p>
                </div>
              </div>
              
              <div className="flex justify-between items-center pt-5 border-t border-[#F5F3EF] text-[9px] font-mono font-bold text-[#555555]">
                <span className="text-zinc-400 group-hover:text-[#1A1A1A] transition-colors">{loc.count.toUpperCase()}</span>
                <span className="text-[#C5A572] font-semibold flex items-center gap-1 group-hover:underline">
                  {isEn ? "EXAMINE" : "TINJAU"} 
                  <span className="material-symbols-outlined text-[10px]">arrow_forward</span>
                </span>
              </div>
            </motion.div>
          ))}
        </div>
      </section>

      {/* 6. RECENTLY ADDED (Minimal catalog rows) */}
      <section className="space-y-16 max-w-[1440px] mx-auto px-5 md:px-[80px]" id="recently-added">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-[#EEECE6]/70 pb-6">
          <div className="space-y-2">
            <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
              {isEn ? "LATEST ARCHIVES" : "ARSIP TERBARU"}
            </span>
            <h2 className="font-serif text-3xl md:text-3xl text-[#1A1A1A] font-extralight leading-none">
              {isEn ? "Recently" : "Struktur"} <span className="italic">{isEn ? "Secured Structures" : "Baru yang Diamankan"}</span>
            </h2>
          </div>
          <button
            onClick={() => onNavigate("/luxury-villas-bali")}
            className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] hover:text-[#1A1A1A] transition-colors flex items-center gap-2 cursor-pointer pb-1 md:pb-0 group"
          >
            <span>{isEn ? "SCAN ENTIRE CADASTRE" : "PINDAI SELURUH KADASTR"}</span>
            <MoveRight size={13} className="transition-transform duration-300 group-hover:translate-x-2 text-[#C5A572]" />
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-y-14 gap-x-[32px]">
          {recentlyAddedProperties.map((prop, idx) => {
            const isSaved = savedIds.includes(prop.id);
            const isCompared = compareIds.includes(prop.id);

            return (
              <motion.article 
                key={prop.id} 
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
                className="group flex flex-col justify-between h-full bg-[#FDFCFB] border border-[#EEECE6]/60 rounded-none overflow-hidden transition-all duration-700 luxury-shadow relative" 
                id={`recent-card-${prop.id}`}
              >
                <div className="aspect-[4/3] bg-[#F5F3EF] relative overflow-hidden" onClick={() => onSelectProperty(prop)}>
                  <img
                    src={prop.heroImage}
                    alt={prop.title}
                    className="w-full h-full object-cover group-hover:scale-[1.04] transition-all duration-[1.2s]"
                  />
                  <div className="absolute top-4 right-4 flex flex-col gap-2 z-10">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onToggleSave(prop.id);
                      }}
                      className={`w-9 h-9 rounded-none flex items-center justify-center border transition-all duration-300 cursor-pointer ${
                        isSaved ? "bg-[#1A1A1A] border-[#1A1A1A] text-white" : "bg-white/95 text-[#1A1A1A] border-[#EEECE6] hover:bg-[#C5A572] hover:text-white"
                      }`}
                      title={isSaved ? (isEn ? "Remove from bookmarks" : "Hapus dari penanda") : (isEn ? "Save structure" : "Simpan struktur")}
                    >
                      <Bookmark className="w-3.5 h-3.5" />
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onToggleCompare(prop);
                      }}
                      className={`w-9 h-9 rounded-none flex items-center justify-center border transition-all duration-300 cursor-pointer ${
                        isCompared ? "bg-[#C5A572] border-[#C5A572] text-white" : "bg-white/95 text-[#1A1A1A] border-[#EEECE6] hover:bg-[#1A1A1A] hover:text-white"
                      }`}
                      title={isEn ? "Add to portfolio evaluation space" : "Tambah ke ruang evaluasi portofolio"}
                    >
                      <ArrowLeftRight className="w-3.5 h-3.5" />
                    </button>
                  </div>
                  
                  <div className="absolute bottom-3 left-4 bg-white/90 backdrop-blur-sm px-2.5 py-[3px] border border-[#EEECE6] font-mono text-[8px] font-bold text-[#1A1A1A] uppercase tracking-widest animate-pulse">
                    {isEn ? "ARCHIVED" : "DIASIPKAN"}
                  </div>
                </div>

                <div className="p-7 flex-1 flex flex-col justify-between space-y-5">
                  <div className="space-y-2">
                    <div className="flex items-center gap-1.5">
                      <span className="w-1.5 h-1.5 bg-[#C5A572] rounded-full inline-block" />
                      <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-[#C5A572] font-semibold">
                        {prop.location}
                      </span>
                    </div>

                    <h3 
                      onClick={() => onSelectProperty(prop)} 
                      className="font-serif text-xl font-normal text-[#1A1A1A] hover:text-[#C5A572] cursor-pointer transition-colors duration-300 leading-tight block"
                    >
                      {prop.title}
                    </h3>
                    
                    <div className="flex items-center gap-4 text-[#555555] font-mono text-[10px] uppercase tracking-[0.1em] border-t border-[#F5F3EF] pt-2 mt-1">
                      <div className="flex items-center gap-1">
                        <Layers className="w-3 h-3 text-[#C5A572]" />
                        <span>{prop.area.toLocaleString()} SQFT</span>
                      </div>
                      <span>•</span>
                      <span>{prop.beds} {t.beds}</span>
                      <span>•</span>
                      <span>{prop.baths} {t.baths}</span>
                    </div>
                  </div>

                  <div className="flex justify-between items-center border-t border-[#EEECE6]/60 pt-4 mt-2">
                    <span className="font-serif text-lg font-bold text-[#1A1A1A] font-light">
                      {formatIDR(prop.price)}
                    </span>
                    <button onClick={() => onSelectProperty(prop)} className="font-sans text-[9px] font-bold uppercase tracking-[0.25em] text-[#C5A572] hover:text-[#1A1A1A] transition-colors duration-300 cursor-pointer flex items-center gap-1.5 group/btn">
                      <span>{isEn ? "DOSSIER" : "DOSIR"}</span>
                      <span className="material-symbols-outlined text-[12px] transition-transform duration-300 group-hover/btn:translate-x-1">arrow_outward</span>
                    </button>
                  </div>
                </div>
              </motion.article>
            );
          })}
        </div>
      </section>

      {/* 7. PRIVATE CALL TO ACTION (Aman-style high-society registry newsletter) */}
      <section className="bg-[#121212]/95 text-white py-20 px-6 md:py-28 rounded-none overflow-hidden relative border border-zinc-800" id="circular-cta">
        <div className="absolute inset-0 blueprint-grid opacity-[0.02] pointer-events-none" />
        
        {/* Subtle architectural circles vectors */}
        <div className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full border border-[#C5A572]/10 opacity-30 translate-x-48 -translate-y-48 pointer-events-none" />
        <div className="absolute bottom-0 left-0 w-[300px] h-[300px] rounded-full border border-neutral-800 opacity-20 -translate-x-12 translate-y-12 pointer-events-none" />
        
        <div className="max-w-3xl mx-auto text-center space-y-8 relative z-10">
          <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-[0.3em] text-[#C5A572] block">
            {isEn ? "PRIVATE COMMUNICATIONS CIRCULAR" : "EDARAN KOMUNIKASI PRIVAT"}
          </span>
          <h2 className="font-serif text-3xl md:text-5xl font-light tracking-tight max-w-2xl mx-auto leading-tight text-white">
            {isEn ? "Secure Access to" : "Akses Aman ke"} <br className="hidden md:inline" />
            <span className="italic text-[#C5A572] font-normal">{isEn ? "Off-Market Masterpieces." : "Mahakarya Tanpa Iklan Publik."}</span>
          </h2>
          <p className="font-sans text-xs md:text-sm text-zinc-400 max-w-lg mx-auto leading-relaxed font-light">
            {isEn 
              ? "We transmit a monthly private chronicle of structural analysis, raw concrete stress metrics, and off-market confidential listings in Indonesia before they appear in public indexes." 
              : "Kami mengirimkan catatan privat bulanan tentang analisis struktural, metrik tegangan beton mentah, dan listing rahasia non-pasar di Indonesia sebelum dipublikasikan ke indeks umum."}
          </p>

          {circularRegistered ? (
            <motion.div 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5 }}
              className="max-w-md mx-auto bg-zinc-900/60 border border-[#C5A572]/30 p-8 text-center space-y-3"
            >
              <div className="w-10 h-10 border border-[#C5A572] rounded-full flex items-center justify-center mx-auto mb-2 animate-bounce">
                <span className="material-symbols-outlined text-[#C5A572] text-[20px]">done</span>
              </div>
              <span className="font-sans text-[9px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
                {isEn ? "COMMITTED TO THE REGISTER" : "TERDAFTAR DALAM REGISTER PRIVAT"}
              </span>
              <h4 className="font-serif text-lg text-white font-light">
                {isEn ? "Dossier Access Verified" : "Akses Berkas Terverifikasi"}
              </h4>
              <p className="font-sans text-xs text-zinc-400 leading-relaxed font-light">
                {isEn 
                  ? "Your credentials are archived in Luniar Private System core. High-resolution spatial catalogs will be supplied periodically to your verified communications inbox."
                  : "Kredensial Anda diarsipkan dalam sistem utama Luniar Private. Katalog spasial resolusi tinggi akan dipasok secara berkala ke kotak masuk komunikasi Anda yang telah diverifikasi."}
              </p>
            </motion.div>
          ) : (
            <form onSubmit={handleCircularSubmit} className="max-w-md mx-auto flex flex-col sm:flex-row gap-3 pt-3">
              <input
                type="email"
                required
                value={emailInput}
                onChange={(e) => setEmailInput(e.target.value)}
                placeholder={isEn ? "Supply cryptographic secure email..." : "Masukkan alamat email aman terenkripsi..."}
                className="flex-1 bg-zinc-900/90 border border-zinc-800 px-5 py-4 text-xs text-white placeholder-zinc-500 rounded-none focus:outline-none focus:border-[#C5A572] font-sans font-light tracking-wider"
              />
              <button
                type="submit"
                className="px-8 py-4 bg-[#C5A572] text-white hover:bg-white hover:text-black font-sans text-[10px] font-bold uppercase tracking-[0.25em] rounded-none transition-all duration-500 cursor-pointer text-center focus:outline-none hover:shadow-2xl"
              >
                {isEn ? "Join Registry" : "Gabung Register"}
              </button>
            </form>
          )}
        </div>
      </section>
    </div>
  );
}