const { useState, useEffect } = React;
const { motion, AnimatePresence } = window.Motion || window.framerMotion || window.FramerMotion || { motion: { div: 'div', h1: 'h1', p: 'p', span: 'span', section: 'section', button: 'button', a: 'a' }, AnimatePresence: ({children}) => children };

const TRANSLATIONS = {
    en: {
        nav: ['Home', 'Company', 'Vision', 'Certifications', 'Products', 'Specs', 'Process', 'Market', 'Contact'],
        hero: {
            title: "Premium Katsuobushi Export From Indonesia",
            sub: "Delivering high quality smoke-dried fish products with international food safety standards and trusted export processing.",
            btn1: "Explore Company",
            btn2: "Product Specification"
        },
        company: {
            title: "COMPANY INTRODUCTION",
            name: "PT. ANUGRAH SEJATI BERSAMA",
            founded: "Founded: January 10th, 2024",
            loc: "Location: Bitung City, North Sulawesi",
            focus: "Focus: Katsuobushi & Fishmeal",
            market: "Export Market: Japan, Korea, China, USA",
            tags: ["Established", "HQ & Factory", "Business Focus", "Markets"],
            awardTitle: "Export Class",
            awardSub: "International Quality & Food Safety Guaranteed"
        },
        vision_mission: {
            v_title: "Vision",
            v_desc: "To be the best producer and exporter of processed seafood products in Indonesia, globally recognized for quality, integrity, and sustainability.",
            m_title: "Mission",
            m_1: "Implementing strict international food safety standards.",
            m_2: "Innovating smoking & drying for perfect yield.",
            m_3: "Supporting the local Bitung fishing community sustainably."
        },
        org: {
            title: "Executive Structure",
            roles: ["Chief Commissioner", "Chief Director", "Commissioner", "Director", "General Manager"]
        },
        certs: {
            subtitle: "QUALITY POLICY",
            title: "International Certifications",
            desc: "Meeting the highest global food safety standards.",
            items: [
                { title: "HACCP", desc: "Hazard Analysis Critical Control Point" },
                { title: "GMP", desc: "Good Manufacturing Practice" },
                { title: "SSOP", desc: "Sanitation Standard Operating Procedure" },
                { title: "Food Safety", desc: "International Food Safety Standards" },
                { title: "QA", desc: "Export Quality Assurance" }
            ]
        },
        products_suppliers: {
            subtitle: "CATALOG", title: "Products & Suppliers", prodTitle: "MAIN PRODUCTS",
            katsuobushi: { title: "KATSUOBUSHI", desc1: "Premium dried smoked fish block", desc2: "Export quality seafood product" },
            hanakatsuo: { title: "HANA KATSUO", desc1: "Thin Slice & Thick Slice", desc2: "Custom specification based on buyer request" },
            supTitle: "SUPPLIER NETWORK",
            supRaw: "Raw Materials", supRawDesc: "Skipjack, Tuna, Bonito, Mackerel",
            supPack: "Packaging", supPackDesc: "Plastic Vacuum (PE), Master Carton",
            supChem: "Chemicals", supChemDesc: "Alcohol 70%, Chlorine",
            lists: {
                raw: ["PT. Bintang Mandiri Bersaudara", "PT. Multipar Sapta Tama", "UD. Gracia", "PT. Sari Usaha Mandiri", "PT. Mitra Jaya Samudera"],
                pack: ["PT. Indoceria Plastic and Printing", "PT. Intan Ustrix"],
                chem: ["CV. TAMARU INDONESIA"]
            }
        },
        specs: {
            title: "Raw Material & Product",
            rawTitle: "Raw Material Spec",
            rawSub: "Premium Ocean Catch",
            fishTypes: ["Fresh Skipjack", "Tuna", "Tongkol", "Layang"],
            micro: "Microbiology Stds",
            chem: "Chemical & Physical",
            storeRaw: "Storage Condition",
            passed: "Passed",
            prodTitle: "Product Spec",
            prodSub: "Katsuobushi Export",
            pack: "Packaging",
            packVal: "Vacuum Sealed",
            grade: "Export Grade",
            shelf: "Shelf Life",
            shelfVal: "24 Months",
            allergen: "Allergen Info",
            allergenVal: "Fish",
            shipping: "Shipping",
            shippingVal: "Reefer Container"
        },
        process: {
            title: "Cinematic Production Process",
            steps: ["Receiving", "Grading", "Weighing", "Rinsing", "Cutting", "Boiling", "Cooling", "Bone Removal", "Smoking", "Packing", "Vacuuming", "Storage", "Stuffing"]
        },
        excellence: {
            title: "Facilities Showcase",
            facilities: ["Receiving Area", "Cutting & Boiling", "Smoking Area", "Packing Area", "Cold Storage", "Fishmeal Area"],
            grade: "Industrial Grade",
            clickHint: "Click to enlarge"
        },
        market: {
            title: "International Export Market",
            countries: ["Japan", "South Korea", "China", "USA", "Southeast Asia"]
        },
        contact: {
            title: "CONTACT US",
            addressLabel: "Factory Address",
            address: "Lingkungan 2, Kel. Sagerat, Kec. Maturai, Kota Bitung – Sulawesi Utara",
            phoneLabel: "Direct Line",
            phone: "+(62) 853-4006-9944",
            emailLabel: "Email Inquiry",
            email: "anugrahsejatibersama.go.id@gmail.com"
        }
    },
    id: {
        nav: ['Beranda', 'Perusahaan', 'Visi', 'Sertifikasi', 'Produk', 'Spesifikasi', 'Proses', 'Pasar', 'Kontak'],
        hero: {
            title: "Ekspor Katsuobushi Premium Dari Indonesia",
            sub: "Menghadirkan produk ikan asap kering berkualitas tinggi dengan standar keamanan pangan internasional dan proses ekspor terpercaya.",
            btn1: "Jelajahi Perusahaan",
            btn2: "Spesifikasi Produk"
        },
        company: {
            title: "TENTANG PERUSAHAAN",
            name: "PT. ANUGRAH SEJATI BERSAMA",
            founded: "Didirikan: 10 Jan 2024",
            loc: "Lokasi: Kota Bitung, Sulut",
            focus: "Fokus: Katsuobushi & Tepung Ikan",
            market: "Pasar Ekspor: Jepang, Korea, China, USA",
            tags: ["Didirikan", "Pusat & Pabrik", "Fokus Bisnis", "Pasar Ekspor"],
            awardTitle: "Kelas Ekspor",
            awardSub: "Kualitas Internasional & Keamanan Pangan Terjamin"
        },
        vision_mission: {
            v_title: "Visi",
            v_desc: "Menjadi produsen dan eksportir produk hasil laut olahan terbaik di Indonesia yang diakui secara global karena kualitas, integritas, dan keberlanjutannya.",
            m_title: "Misi",
            m_1: "Menerapkan standar kontrol kualitas dan keamanan pangan internasional yang ketat.",
            m_2: "Berinovasi dalam proses pengasapan dan pengeringan untuk hasil katsuobushi yang sempurna.",
            m_3: "Mendukung komunitas nelayan lokal di Bitung secara berkelanjutan."
        },
        org: {
            title: "Struktur Eksekutif",
            roles: ["Komisaris Utama", "Direktur Utama", "Komisaris", "Direktur", "General Manager"]
        },
        certs: {
            subtitle: "KEBIJAKAN MUTU",
            title: "Sertifikasi Internasional",
            desc: "Memenuhi standar keamanan pangan global tertinggi.",
            items: [
                { title: "HACCP", desc: "Hazard Analysis Critical Control Point" },
                { title: "GMP", desc: "Good Manufacturing Practice" },
                { title: "SSOP", desc: "Sanitation Standard Operating Procedure" },
                { title: "Food Safety", desc: "International Food Safety Standards" },
                { title: "QA", desc: "Export Quality Assurance" }
            ]
        },
        products_suppliers: {
            subtitle: "KATALOG", title: "Produk & Pemasok", prodTitle: "PRODUK UTAMA",
            katsuobushi: { title: "KATSUOBUSHI", desc1: "Blok ikan asap kering premium", desc2: "Produk hasil laut kualitas ekspor" },
            hanakatsuo: { title: "HANA KATSUO", desc1: "Irisan Tipis & Tebal", desc2: "Spesifikasi khusus sesuai permintaan pembeli" },
            supTitle: "JARINGAN PEMASOK",
            supRaw: "Bahan Baku", supRawDesc: "Cakalang, Tuna, Tongkol, Layang",
            supPack: "Kemasan", supPackDesc: "Plastik Vakum (PE), Master Carton",
            supChem: "Bahan Kimia", supChemDesc: "Alkohol 70%, Klorin",
            lists: {
                raw: ["PT. Bintang Mandiri Bersaudara", "PT. Multipar Sapta Tama", "UD. Gracia", "PT. Sari Usaha Mandiri", "PT. Mitra Jaya Samudera"],
                pack: ["PT. Indoceria Plastic and Printing", "PT. Intan Ustrix"],
                chem: ["CV. TAMARU INDONESIA"]
            }
        },
        specs: {
            title: "Bahan Baku & Produk",
            rawTitle: "Spesifikasi Bahan Baku",
            rawSub: "Tangkapan Laut Premium",
            fishTypes: ["Cakalang Segar", "Tuna", "Tongkol", "Layang"],
            micro: "Standar Mikrobiologi",
            chem: "Kimia & Fisik",
            storeRaw: "Kondisi Penyimpanan",
            passed: "Lolos Uji",
            prodTitle: "Spesifikasi Produk",
            prodSub: "Ekspor Katsuobushi",
            pack: "Kemasan",
            packVal: "Vakum",
            grade: "Kualitas Ekspor",
            shelf: "Umur Simpan",
            shelfVal: "24 Bulan",
            allergen: "Info Alergen",
            allergenVal: "Ikan",
            shipping: "Pengiriman",
            shippingVal: "Kontainer Pendingin"
        },
        process: {
            title: "Proses Produksi Sinematik",
            steps: ["Penerimaan", "Grading", "Penimbangan", "Pencucian", "Pemotongan", "Perebusan", "Pendinginan", "Cabut Tulang", "Pengasapan", "Pengepakan", "Vakum", "Penyimpanan", "Stuffing"]
        },
        excellence: {
            title: "Fasilitas Perusahaan",
            facilities: ["Area Penerimaan", "Pemotongan & Perebusan", "Area Pengasapan", "Area Pengepakan", "Cold Storage", "Area Tepung Ikan"],
            grade: "Standar Industri",
            clickHint: "Klik untuk memperbesar"
        },
        market: {
            title: "Pasar Ekspor Internasional",
            countries: ["Jepang", "Korea Selatan", "China", "Amerika Serikat", "Asia Tenggara"]
        },
        contact: {
            title: "HUBUNGI KAMI",
            addressLabel: "Alamat Pabrik",
            address: "Lingkungan 2, Kel. Sagerat, Kec. Maturai, Kota Bitung – Sulawesi Utara",
            phoneLabel: "Telepon Langsung",
            phone: "+(62) 853-4006-9944",
            emailLabel: "Email Pertanyaan",
            email: "anugrahsejatibersama.go.id@gmail.com"
        }
    },
    ja: {
        nav: ['ホーム', '会社概要', 'ビジョン', '認証', '製品', '仕様', 'プロセス', '市場', '連絡先'],
        hero: {
            title: "インドネシア発 プレミアムかつお節輸出",
            sub: "国際的な食品安全基準と信頼できる輸出プロセスを備えた高品質の乾燥燻製魚製品をお届けします。",
            btn1: "会社を探求",
            btn2: "製品仕様"
        },
        company: {
            title: "会社概要",
            name: "PT. ANUGRAH SEJATI BERSAMA",
            founded: "設立: 2024年1月10日",
            loc: "場所: 北スラウェシ州 ビトゥン市",
            focus: "事業内容: かつお節・魚粉加工",
            market: "輸出市場: 日本、韓国、中国、米国",
            tags: ["設立", "本社・工場", "事業内容", "輸出市場"],
            awardTitle: "輸出クラス",
            awardSub: "国際的な品質と食品安全性を保証"
        },
        vision_mission: {
            v_title: "ビジョン",
            v_desc: "品質、誠実さ、持続可能性において世界的に認められる、インドネシアで最高の手の込んだ水産物生産者および輸出業者になること。",
            m_title: "ミッション",
            m_1: "厳格な国際的食品安全および品質管理基準を実施する。",
            m_2: "完璧なかつお節の収量のために燻製と乾燥プロセスを革新する。",
            m_3: "ビトゥンの地元漁業コミュニティを持続的に支援する。"
        },
        org: {
            title: "役員体制",
            roles: ["最高顧問", "代表取締役", "取締役", "ディレクター", "ゼネラルマネージャー"]
        },
        certs: {
            subtitle: "品質方針",
            title: "国際認証",
            desc: "世界最高水準の食品安全基準を満たしています。",
            items: [
                { title: "HACCP", desc: "Hazard Analysis Critical Control Point" },
                { title: "GMP", desc: "Good Manufacturing Practice" },
                { title: "SSOP", desc: "Sanitation Standard Operating Procedure" },
                { title: "Food Safety", desc: "International Food Safety Standards" },
                { title: "QA", desc: "Export Quality Assurance" }
            ]
        },
        products_suppliers: {
            subtitle: "カタログ", title: "製品とサプライヤー", prodTitle: "主力製品",
            katsuobushi: { title: "かつお節", desc1: "最高級乾燥燻製魚ブロック", desc2: "輸出品質の水産物" },
            hanakatsuo: { title: "花かつお", desc1: "薄削り・厚削り", desc2: "購入者の要望に応じたカスタム仕様" },
            supTitle: "サプライヤーネットワーク",
            supRaw: "原材料", supRawDesc: "カツオ、マグロ、スマ、ムロアジ",
            supPack: "包装材", supPackDesc: "真空プラスチック（PE）、マスターカートン",
            supChem: "化学薬品", supChemDesc: "アルコール70%、塩素",
            lists: {
                raw: ["PT. Bintang Mandiri Bersaudara", "PT. Multipar Sapta Tama", "UD. Gracia", "PT. Sari Usaha Mandiri", "PT. Mitra Jaya Samudera"],
                pack: ["PT. Indoceria Plastic and Printing", "PT. Intan Ustrix"],
                chem: ["CV. TAMARU INDONESIA"]
            }
        },
        specs: {
            title: "原材料と製品",
            rawTitle: "原材料仕様",
            rawSub: "プレミアムな海の恵み",
            fishTypes: ["新鮮なカツオ", "マグロ", "スマ", "ムロアジ"],
            micro: "微生物基準",
            chem: "化学的・物理的",
            storeRaw: "保存条件",
            passed: "合格",
            prodTitle: "製品仕様",
            prodSub: "かつお節輸出",
            pack: "包装",
            packVal: "真空パック",
            grade: "輸出グレード",
            shelf: "賞味期限",
            shelfVal: "24ヶ月",
            allergen: "アレルゲン情報",
            allergenVal: "魚",
            shipping: "配送",
            shippingVal: "リーファーコンテナ"
        },
        process: {
            title: "生産プロセス",
            steps: ["受け入れ", "選別", "計量", "洗浄", "切断", "煮熟", "冷却", "骨抜き", "焙乾", "梱包", "真空", "保管", "バンニング"]
        },
        excellence: {
            title: "施設と認証",
            facilities: ["受け入れエリア", "切断・煮熟", "焙乾エリア", "梱包エリア", "冷蔵保管庫", "魚粉エリア"],
            grade: "工業用グレード",
            clickHint: "クリックで拡大"
        },
        market: {
            title: "国際輸出市場",
            countries: ["日本", "韓国", "中国", "アメリカ", "東南アジア"]
        },
        contact: {
            title: "お問い合わせ",
            addressLabel: "工場住所",
            address: "インドネシア 北スラウェシ ビトゥン市",
            phoneLabel: "直通電話",
            phone: "+(62) 853-4006-9944",
            emailLabel: "メールでお問い合わせ",
            email: "anugrahsejatibersama.go.id@gmail.com"
        }
    },
    ko: {
        nav: ['홈', '회사 소개', '비전', '인증', '제품', '사양', '공정', '시장', '연락처'],
        hero: {
            title: "인도네시아산 프리미엄 가쓰오부시 수출",
            sub: "국제 식품 안전 기준과 신뢰할 수 있는 수출 공정을 갖춘 고품질 훈제 건어물 제품을 제공합니다.",
            btn1: "회사 살펴보기",
            btn2: "제품 사양"
        },
        company: {
            title: "회사 소개",
            name: "PT. ANUGRAH SEJATI BERSAMA",
            founded: "설립일: 2024년 1월 10일",
            loc: "위치: 북술라웨시 비퉁시",
            focus: "비즈니스 초점: 가쓰오부시 및 어분",
            market: "수출 시장: 일본, 한국, 중국, 미국",
            tags: ["설립", "본사 및 공장", "비즈니스 초점", "수출 시장"],
            awardTitle: "수출 클래스",
            awardSub: "국제적 품질 및 식품 안전 보장"
        },
        vision_mission: {
            v_title: "비전",
            v_desc: "품질, 무결성 및 지속 가능성 측면에서 세계적으로 인정받는 인도네시아 최고의 수산물 가공 제품 생산 및 수출업체가 되는 것입니다.",
            m_title: "미션",
            m_1: "엄격한 국제 식품 안전 및 품질 관리 기준을 시행합니다.",
            m_2: "완벽한 가쓰오부시 생산을 위해 훈제 및 건조 공정을 혁신합니다.",
            m_3: "비퉁의 지역 어업 공동체를 지속 가능하게 지원합니다."
        },
        org: {
            title: "임원 구조",
            roles: ["최고위원", "대표이사", "위원", "이사", "총괄 매니저"]
        },
        certs: {
            subtitle: "품질 방침",
            title: "국제 인증",
            desc: "세계 최고 수준의 식품 안전 기준을 충족합니다.",
            items: [
                { title: "HACCP", desc: "Hazard Analysis Critical Control Point" },
                { title: "GMP", desc: "Good Manufacturing Practice" },
                { title: "SSOP", desc: "Sanitation Standard Operating Procedure" },
                { title: "Food Safety", desc: "International Food Safety Standards" },
                { title: "QA", desc: "Export Quality Assurance" }
            ]
        },
        products_suppliers: {
            subtitle: "목록", title: "제품 및 공급업체", prodTitle: "주요 제품",
            katsuobushi: { title: "가쓰오부시", desc1: "프리미엄 훈제 건조 어류 블록", desc2: "수출 품질의 해산물 제품" },
            hanakatsuo: { title: "하나 가쓰오", desc1: "얇은 조각 및 두꺼운 조각", desc2: "구매자 요청에 따른 맞춤형 사양" },
            supTitle: "공급업체 네트워크",
            supRaw: "원자재", supRawDesc: "가다랑어, 참치, 점다랑어, 가라지",
            supPack: "포장재", supPackDesc: "진공 플라스틱(PE), 마스터 카톤",
            supChem: "화학물질", supChemDesc: "알코올 70%, 염소",
            lists: {
                raw: ["PT. Bintang Mandiri Bersaudara", "PT. Multipar Sapta Tama", "UD. Gracia", "PT. Sari Usaha Mandiri", "PT. Mitra Jaya Samudera"],
                pack: ["PT. Indoceria Plastic and Printing", "PT. Intan Ustrix"],
                chem: ["CV. TAMARU INDONESIA"]
            }
        },
        specs: {
            title: "원자재 및 제품",
            rawTitle: "원자재 사양",
            rawSub: "프리미엄 해양 어획",
            fishTypes: ["신선한 가다랑어", "참치", "점다랑어", "가라지"],
            micro: "미생물 기준",
            chem: "화학적 및 물리적",
            storeRaw: "보관 조건",
            passed: "합격",
            prodTitle: "제품 사양",
            prodSub: "가쓰오부시 수출",
            pack: "포장",
            packVal: "진공 포장",
            grade: "수출 등급",
            shelf: "유통 기한",
            shelfVal: "24개월",
            allergen: "알레르기 정보",
            allergenVal: "생선",
            shipping: "배송",
            shippingVal: "냉장 컨테이너"
        },
        process: {
            title: "생산 공정",
            steps: ["입고", "분류", "계량", "세척", "절단", "자숙", "냉각", "뼈 제거", "훈연", "포장", "진공", "보관", "상차"]
        },
        excellence: {
            title: "시설 및 인증",
            facilities: ["입고 구역", "절단 및 자숙", "훈연 구역", "포장 구역", "냉동 창고", "어분 구역"],
            grade: "산업용 등급",
            clickHint: "클릭하여 확대"
        },
        market: {
            title: "국제 수출 시장",
            countries: ["일본", "한국", "중국", "미국", "동남아시아"]
        },
        contact: {
            title: "문의하기",
            addressLabel: "공장 주소",
            address: "인도네시아 북술라웨시 비퉁시",
            phoneLabel: "직통 전화",
            phone: "+(62) 853-4006-9944",
            emailLabel: "이메일 문의",
            email: "anugrahsejatibersama.go.id@gmail.com"
        }
    },
    zh: {
        nav: ['首页', '公司简介', '愿景', '认证', '产品', '规格', '流程', '市场', '联系我们'],
        hero: {
            title: "印尼优质鲣鱼干出口",
            sub: "提供符合国际食品安全标准的高品质烟熏干鱼产品，以及可靠的出口流程。",
            btn1: "探索公司",
            btn2: "产品规格"
        },
        company: {
            title: "公司简介",
            name: "PT. ANUGRAH SEJATI BERSAMA",
            founded: "成立时间：2024年1月10日",
            loc: "地点：北苏拉威西省 比通市",
            focus: "业务：鲣鱼干与鱼粉",
            market: "出口：日本、韩国、中国、美国",
            tags: ["成立", "总部与工厂", "业务重点", "出口市场"],
            awardTitle: "出口级",
            awardSub: "国际质量与食品安全保证"
        },
        vision_mission: {
            v_title: "愿景",
            v_desc: "成为印度尼西亚最好的海鲜加工产品生产商和出口商，以其质量、诚信和可持续性获得全球认可。",
            m_title: "使命",
            m_1: "执行严格的国际食品安全和质量控制标准。",
            m_2: "创新烟熏和干燥工艺，以获得完美的鲣鱼干产量。",
            m_3: "以可持续的方式支持比通当地渔民社区。"
        },
        org: {
            title: "高管架构",
            roles: ["首席专员", "总裁", "专员", "总监", "总经理"]
        },
        certs: {
            subtitle: "质量方针",
            title: "国际认证",
            desc: "符合全球最高食品安全标准。",
            items: [
                { title: "HACCP", desc: "Hazard Analysis Critical Control Point" },
                { title: "GMP", desc: "Good Manufacturing Practice" },
                { title: "SSOP", desc: "Sanitation Standard Operating Procedure" },
                { title: "Food Safety", desc: "International Food Safety Standards" },
                { title: "QA", desc: "Export Quality Assurance" }
            ]
        },
        products_suppliers: {
            subtitle: "目录", title: "产品与供应商", prodTitle: "主要产品",
            katsuobushi: { title: "鲣鱼干", desc1: "高级烟熏干鱼块", desc2: "出口级海鲜产品" },
            hanakatsuo: { title: "木鱼花", desc1: "薄片与厚片", desc2: "根据买家要求定制规格" },
            supTitle: "供应商网络",
            supRaw: "原材料", supRawDesc: "鲣鱼、金枪鱼、巴鲣、蓝圆鲹",
            supPack: "包装材料", supPackDesc: "真空塑料（PE）、外包装箱",
            supChem: "化学品", supChemDesc: "70%酒精、氯",
            lists: {
                raw: ["PT. Bintang Mandiri Bersaudara", "PT. Multipar Sapta Tama", "UD. Gracia", "PT. Sari Usaha Mandiri", "PT. Mitra Jaya Samudera"],
                pack: ["PT. Indoceria Plastic and Printing", "PT. Intan Ustrix"],
                chem: ["CV. TAMARU INDONESIA"]
            }
        },
        specs: {
            title: "原料与产品",
            rawTitle: "原料规格",
            rawSub: "优质海洋捕捞",
            fishTypes: ["新鲜鲣鱼", "金枪鱼", "巴鲣", "蓝圆鲹"],
            micro: "微生物标准",
            chem: "理化指标",
            storeRaw: "储存条件",
            passed: "合格",
            prodTitle: "产品规格",
            prodSub: "鲣鱼干出口",
            pack: "包装",
            packVal: "真空包装",
            grade: "出口级",
            shelf: "保质期",
            shelfVal: "24个月",
            allergen: "过敏原信息",
            allergenVal: "鱼类",
            shipping: "运输",
            shippingVal: "冷藏集装箱"
        },
        process: {
            title: "生产流程",
            steps: ["接收", "分级", "称重", "清洗", "切割", "煮熟", "冷却", "去骨", "烟熏", "包装", "真空", "储存", "装箱"]
        },
        excellence: {
            title: "设施",
            facilities: ["接收区", "切割与煮熟", "烟熏区", "包装区", "冷库", "鱼粉区"],
            grade: "工业级",
            clickHint: "点击放大"
        },
        market: {
            title: "国际出口市场",
            countries: ["日本", "韩国", "中国", "美国", "东南亚"]
        },
        contact: {
            title: "联系我们",
            addressLabel: "工厂地址",
            address: "印尼北苏拉威西省比通市",
            phoneLabel: "直线电话",
            phone: "+(62) 853-4006-9944",
            emailLabel: "邮件咨询",
            email: "anugrahsejatibersama.go.id@gmail.com"
        }
    }
};

const LANGUAGES = [
    { code: 'id', label: 'ID - Indonesia' },
    { code: 'en', label: 'EN - English' },
    { code: 'ja', label: 'JA - 日本語 (Jepang)' },
    { code: 'ko', label: 'KO - 한국어 (Korea)' },
    { code: 'zh', label: 'ZH - 中文 (Cina)' }
];

// Upload foto .jpg ke assets/img/facilities/ dengan nama file yang sama
const FACILITY_IMAGES = [
    { jpg: 'assets/img/facilities/01-receiving-area.jpg', fallback: 'assets/img/facilities/01-receiving-area.svg' },
    { jpg: 'assets/img/facilities/02-cutting-boiling.jpg', fallback: 'assets/img/facilities/02-cutting-boiling.svg' },
    { jpg: 'assets/img/facilities/03-smoking-area.jpg', fallback: 'assets/img/facilities/03-smoking-area.svg' },
    { jpg: 'assets/img/facilities/04-packing-area.jpg', fallback: 'assets/img/facilities/04-packing-area.svg' },
    { jpg: 'assets/img/facilities/05-cold-storage.jpg', fallback: 'assets/img/facilities/05-cold-storage.svg' },
    { jpg: 'assets/img/facilities/06-fishmeal-area.jpg', fallback: 'assets/img/facilities/06-fishmeal-area.svg' },
];

const SectionTitle = ({ title, subtitle }) => (
    <div className="text-center mb-10 sm:mb-12 lg:mb-16 relative z-10 px-1">
        <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-gold uppercase tracking-[2px] sm:tracking-[4px] text-xs sm:text-sm font-semibold mb-3 sm:mb-4"
        >
            {subtitle}
        </motion.p>
        <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="font-serif text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-white font-medium tracking-wide leading-tight break-words"
        >
            {title}
        </motion.h2>
        <div className="w-16 sm:w-24 h-1 bg-gold mx-auto mt-4 sm:mt-6 rounded-full opacity-50 shadow-[0_0_15px_rgba(239,198,104,0.5)]"></div>
    </div>
);

const OrgCard = ({ name, role, icon, delay }) => (
    <motion.div 
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay, type: "spring", stiffness: 60 }}
        whileHover={{ y: -10, boxShadow: "0 20px 40px rgba(239, 198, 104, 0.15)" }}
        className="w-full max-w-[280px] mx-auto min-h-[220px] sm:min-h-[260px] sm:h-[260px] md:h-[280px] flex flex-col justify-center bg-[#0a0f1a]/90 backdrop-blur-xl border border-white/10 hover:border-gold/40 rounded-2xl sm:rounded-3xl p-6 sm:p-8 text-center transition-all duration-300 relative group overflow-hidden shadow-2xl"
    >
        <div className="absolute inset-0 bg-gradient-to-b from-gold/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div className="w-20 h-20 mx-auto rounded-full bg-[#161a25] border border-gold/20 flex items-center justify-center mb-6 group-hover:bg-gold/10 group-hover:scale-110 transition-all duration-300 relative z-10 shadow-[0_0_20px_rgba(239,198,104,0.1)]">
            <i className={`bx ${icon} text-3xl text-gold group-hover:drop-shadow-[0_0_15px_rgba(239,198,104,0.8)] transition-all duration-300`}></i>
        </div>
        <h3 className="font-serif text-base sm:text-[19px] text-white mb-2 sm:mb-3 relative z-10 font-medium tracking-wide leading-snug">{name}</h3>
        <p className="text-[11px] text-gold uppercase tracking-[0.2em] font-bold relative z-10">{role}</p>
    </motion.div>
);

// Framer Motion Variants for Staggered Animations
const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: { staggerChildren: 0.15 }
    }
};

const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: { 
        opacity: 1, 
        y: 0, 
        transition: { type: "spring", stiffness: 60, damping: 15 } 
    }
};

const App = () => {
    const [lang, setLang] = useState('en');
    const [scrolled, setScrolled] = useState(false);
    const [langMenuOpen, setLangMenuOpen] = useState(false);
    const [selectedImg, setSelectedImg] = useState(null);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    useEffect(() => {
        const savedLang = localStorage.getItem('asb_lang');
        if (savedLang && TRANSLATIONS[savedLang]) setLang(savedLang);

        const handleScroll = () => setScrolled(window.scrollY > 50);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    useEffect(() => {
        const lockScroll = selectedImg || mobileMenuOpen;
        if (!lockScroll) return;
        const onKeyDown = (e) => {
            if (e.key !== 'Escape') return;
            if (selectedImg) setSelectedImg(null);
            if (mobileMenuOpen) setMobileMenuOpen(false);
        };
        document.body.style.overflow = 'hidden';
        window.addEventListener('keydown', onKeyDown);
        return () => {
            document.body.style.overflow = '';
            window.removeEventListener('keydown', onKeyDown);
        };
    }, [selectedImg, mobileMenuOpen]);

    const getLightboxData = (selected) => {
        if (!selected) return null;
        if (typeof selected === 'string') return { src: selected, fallback: null, title: null };
        return selected;
    };

    const lightboxData = getLightboxData(selectedImg);

    const handleFacilityImgError = (e) => {
        const fallback = e.target.dataset.fallback;
        if (fallback && !e.target.src.includes(fallback)) {
            e.target.src = fallback;
        }
    };

    const openFacilityLightbox = (index, title) => {
        const img = FACILITY_IMAGES[index];
        if (!img) return;
        setSelectedImg({ src: img.jpg, fallback: img.fallback, title });
    };

    const changeLang = (code) => {
        setLang(code);
        localStorage.setItem('asb_lang', code);
        setLangMenuOpen(false);
    };

    const t = TRANSLATIONS[lang];

    return (
        <div className="font-sans text-white bg-[#05070a] min-h-screen selection:bg-gold selection:text-navy-900 overflow-x-hidden">
            <div className="particles-bg"></div>

            {/* NAVBAR */}
            <nav className={`fixed w-full z-50 transition-all duration-500 ${scrolled ? 'bg-[#05070a]/80 backdrop-blur-xl border-b border-white/5 py-3 sm:py-4 shadow-2xl' : 'py-4 sm:py-6'}`}>
                <div className="container mx-auto px-4 sm:px-6 flex justify-between items-center gap-2 sm:gap-3">
                    <div className="flex items-center gap-2 sm:gap-4 cursor-pointer min-w-0 flex-1" onClick={() => window.scrollTo(0,0)}>
                        <img src="assets/img/logo_perusahaan.jpg" alt="ASB Logo" className="w-10 sm:w-14 h-auto rounded-md drop-shadow-[0_0_15px_rgba(239,198,104,0.3)] transition-transform duration-500 hover:scale-110 shrink-0" onError={(e) => { e.target.style.display='none'; e.target.nextSibling.style.display='flex' }} />
                        <div className="hidden w-12 h-12 rounded-full border border-gold/30 items-center justify-center font-serif text-gold font-bold text-2xl bg-white/5 shadow-[0_0_15px_rgba(239,198,104,0.2)]">
                            A
                        </div>
                        <div className="hidden md:block min-w-0">
                            <h1 className="text-gold font-bold text-xs sm:text-sm tracking-[0.15em] sm:tracking-[0.2em] truncate">ANUGRAH SEJATI BERSAMA</h1>
                            <p className="text-[10px] sm:text-xs text-gray-400 tracking-wider uppercase mt-0.5 sm:mt-1 truncate">Premium Seafood Export</p>
                        </div>
                    </div>

                    <div className="hidden xl:flex items-center gap-6 text-[13px] font-medium tracking-wide uppercase">
                        {t.nav.map((item, i) => (
                            <a key={i} href={`#section-${i}`} className="text-gray-300 hover:text-gold transition-colors">{item}</a>
                        ))}
                    </div>

                    <div className="flex items-center gap-2 sm:gap-3 shrink-0">
                        <button type="button" onClick={() => { setMobileMenuOpen(!mobileMenuOpen); setLangMenuOpen(false); }} className="xl:hidden w-10 h-10 sm:w-11 sm:h-11 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-gold hover:border-gold/50 transition-all" aria-label="Menu">
                            <i className={`bx ${mobileMenuOpen ? 'bx-x' : 'bx-menu'} text-2xl`}></i>
                        </button>
                    <div className="relative">
                        <button 
                            onClick={() => { setLangMenuOpen(!langMenuOpen); setMobileMenuOpen(false); }}
                            className="flex items-center gap-1.5 sm:gap-2 bg-white/5 border border-white/10 px-3 sm:px-5 py-2 sm:py-2.5 rounded-full hover:bg-white/10 hover:border-gold/50 transition-all text-xs sm:text-sm uppercase tracking-wide shadow-lg"
                        >
                            <i className='bx bx-globe text-gold'></i> {lang} <i className='bx bx-chevron-down hidden sm:inline'></i>
                        </button>
                        
                        <AnimatePresence>
                            {langMenuOpen && (
                                <motion.div 
                                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
                                    animate={{ opacity: 1, y: 0, scale: 1 }}
                                    exit={{ opacity: 0, y: 10, scale: 0.95 }}
                                    className="absolute right-0 mt-3 w-44 sm:w-48 bg-[#0a0f1a]/95 backdrop-blur-2xl rounded-xl overflow-hidden shadow-[0_20px_40px_rgba(0,0,0,0.8)] border border-white/10 z-[60]"
                                >
                                    {LANGUAGES.map((l) => (
                                        <button 
                                            key={l.code}
                                            onClick={() => changeLang(l.code)}
                                            className={`w-full text-left px-5 py-3 text-sm transition-colors ${lang === l.code ? 'text-gold bg-gold/5 border-l-2 border-gold' : 'text-gray-300 hover:bg-white/5 hover:text-white'}`}
                                        >
                                            {l.label}
                                        </button>
                                    ))}
                                </motion.div>
                            )}
                        </AnimatePresence>
                    </div>
                    </div>
                </div>
            </nav>

            <AnimatePresence>
                {mobileMenuOpen && (
                    <>
                        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-40 bg-black/70 backdrop-blur-sm xl:hidden" onClick={() => setMobileMenuOpen(false)} />
                        <motion.div initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }} transition={{ type: 'spring', stiffness: 320, damping: 32 }} className="fixed top-0 right-0 z-50 h-full w-[min(100vw,320px)] bg-[#0a0f1a]/98 backdrop-blur-xl border-l border-white/10 shadow-2xl xl:hidden flex flex-col pt-24 pb-8 px-5 overflow-y-auto">
                            <p className="text-gold text-xs uppercase tracking-[0.25em] font-semibold mb-4">Menu</p>
                            <nav className="flex flex-col gap-1">
                                {t.nav.map((item, i) => (
                                    <a key={i} href={`#section-${i}`} onClick={() => setMobileMenuOpen(false)} className="px-4 py-3.5 rounded-xl text-gray-200 hover:text-gold hover:bg-white/5 transition-colors text-sm font-medium uppercase tracking-wide">{item}</a>
                                ))}
                            </nav>
                        </motion.div>
                    </>
                )}
            </AnimatePresence>

            {/* HERO SECTION */}
            <section id="section-0" className="relative min-h-screen flex items-center pt-20 sm:pt-24 pb-12">
                <div className="absolute inset-0 z-0 overflow-hidden">
                    {/* Layer 1: High-End Custom Generated Image */}
                    <div className="absolute inset-0 scale-110">
                        <img 
                            src="assets/img/hero_bg_luxury.png" 
                            className="w-full h-full object-cover opacity-60" 
                            style={{ animation: 'slowZoom 40s infinite alternate ease-in-out' }} 
                        />
                    </div>
                    
                    {/* Layer 2: Moving Light Rays (Cinematic Flare) */}
                    <motion.div 
                        animate={{ 
                            x: [-100, 100, -100],
                            opacity: [0.2, 0.5, 0.2]
                        }}
                        transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
                        className="absolute inset-0 bg-gradient-to-r from-transparent via-gold/10 to-transparent skew-x-12 scale-150 pointer-events-none"
                    ></motion.div>

                    {/* Layer 3: Glassmorphism Grid Pattern */}
                    <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-[0.03] mix-blend-overlay"></div>
                    
                    {/* Layer 4: Dynamic Spotlights */}
                    <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-gold/5 via-transparent to-navy-900/40"></div>
                    <div className="absolute inset-0 bg-gradient-to-r from-[#05070a] via-[#05070a]/40 to-transparent"></div>
                    <div className="absolute inset-0 bg-gradient-to-t from-[#05070a] via-transparent to-transparent"></div>
                </div>

                <div className="container mx-auto px-4 sm:px-6 relative z-10">
                    <div className="max-w-4xl w-full">
                        <motion.div 
                            initial={{ opacity: 0, x: -30 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ duration: 1 }}
                            className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-[#0a0f1a]/60 backdrop-blur-md border border-gold/30 text-xs font-semibold tracking-[0.2em] text-gold mb-8 shadow-[0_0_20px_rgba(239,198,104,0.15)]"
                        >
                            <i className='bx bx-anchor text-lg'></i> BITUNG • INDONESIA
                        </motion.div>

                        <motion.h1 
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 1, delay: 0.2 }}
                            className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-serif leading-[1.15] mb-6 sm:mb-8 text-glow font-medium break-words"
                        >
                            {t.hero.title}
                        </motion.h1>

                        <motion.p 
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 1, delay: 0.4 }}
                            className="text-base sm:text-lg md:text-xl text-gray-300 mb-8 sm:mb-12 leading-relaxed max-w-2xl font-light"
                        >
                            {t.hero.sub}
                        </motion.p>

                        <motion.div 
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 1, delay: 0.6 }}
                            className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-5"
                        >
                            <a href="#section-1" className="bg-gold text-navy-900 px-8 sm:px-10 py-3.5 sm:py-4 rounded-full font-semibold hover:bg-gold-hover hover:-translate-y-1 transition-all shadow-[0_10px_30px_rgba(239,198,104,0.3)] text-sm tracking-wider uppercase text-center">
                                {t.hero.btn1}
                            </a>
                            <a href="#section-4" className="bg-[#0a0f1a]/60 backdrop-blur-md border border-white/20 px-8 sm:px-10 py-3.5 sm:py-4 rounded-full font-semibold hover:bg-white/10 hover:border-gold/50 transition-all text-sm tracking-wider uppercase text-center">
                                {t.hero.btn2}
                            </a>
                        </motion.div>
                    </div>
                </div>

                {/* Floating Badge Stats */}
                <motion.div 
                    initial={{ opacity: 0, x: 50 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 1, duration: 1 }}
                    className="absolute right-10 top-1/2 -translate-y-1/2 hidden xl:flex flex-col gap-8"
                >
                    {[
                        { label: "Premium Quality", val: "A+", icon: "bx-diamond" },
                        { label: "Global Export", val: "25+", icon: "bx-globe" },
                        { label: "Eco Friendly", val: "100%", icon: "bx-leaf" }
                    ].map((stat, i) => (
                        <div key={i} className="flex items-center gap-5 group">
                            <div className="text-right">
                                <p className="text-[10px] text-gray-500 uppercase tracking-widest mb-1">{stat.label}</p>
                                <p className="text-2xl font-serif text-gold font-bold">{stat.val}</p>
                            </div>
                            <div className="w-14 h-14 rounded-2xl bg-[#0a0f1a]/80 backdrop-blur-xl border border-white/10 flex items-center justify-center group-hover:border-gold/50 transition-all duration-500 shadow-xl">
                                <i className={`bx ${stat.icon} text-2xl text-gold`}></i>
                            </div>
                        </div>
                    ))}
                </motion.div>
            </section>

            {/* COMPANY INFO */}
            <section id="section-1" className="py-14 md:py-20 lg:py-24 relative z-10">
                <div className="container mx-auto px-4 sm:px-6">
                    <SectionTitle subtitle="01 // CORPORATE" title={t.company.title} />
                    
                    <div className="grid lg:grid-cols-12 gap-8">
                        <motion.div 
                            initial={{ opacity: 0, y: 40 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            className="lg:col-span-8 bg-[#0a0f1a]/80 backdrop-blur-xl p-6 sm:p-8 md:p-10 rounded-2xl sm:rounded-3xl border border-white/5 relative overflow-hidden group hover:border-gold/20 transition-all shadow-2xl"
                        >
                            <div className="absolute top-0 right-0 w-64 h-64 bg-gold/5 rounded-full blur-3xl group-hover:bg-gold/10 transition-colors"></div>
                            <h3 className="text-3xl font-serif text-gold mb-8">{t.company.name}</h3>
                            
                            <div className="grid md:grid-cols-2 gap-8">
                                <div className="space-y-6">
                                    <div className="flex items-start gap-4">
                                        <div className="p-3 rounded-xl bg-gold/10 text-gold"><i className='bx bx-calendar text-2xl'></i></div>
                                        <div><h5 className="text-sm text-gray-400 uppercase tracking-wider mb-1">{t.company.tags[0]}</h5><p className="font-medium text-lg">{t.company.founded.split(': ')[1]}</p></div>
                                    </div>
                                    <div className="flex items-start gap-4">
                                        <div className="p-3 rounded-xl bg-gold/10 text-gold"><i className='bx bx-map text-2xl'></i></div>
                                        <div><h5 className="text-sm text-gray-400 uppercase tracking-wider mb-1">{t.company.tags[1]}</h5><p className="font-medium text-lg">{t.company.loc.split(': ')[1]}</p></div>
                                    </div>
                                </div>
                                <div className="space-y-6">
                                    <div className="flex items-start gap-4">
                                        <div className="p-3 rounded-xl bg-gold/10 text-gold"><i className='bx bx-target-lock text-2xl'></i></div>
                                        <div><h5 className="text-sm text-gray-400 uppercase tracking-wider mb-1">{t.company.tags[2]}</h5><p className="font-medium text-lg">{t.company.focus.split(': ')[1]}</p></div>
                                    </div>
                                    <div className="flex items-start gap-4">
                                        <div className="p-3 rounded-xl bg-gold/10 text-gold"><i className='bx bx-globe text-2xl'></i></div>
                                        <div><h5 className="text-sm text-gray-400 uppercase tracking-wider mb-1">{t.company.tags[3]}</h5><p className="font-medium text-lg">{t.company.market.split(': ')[1]}</p></div>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                        
                        <motion.div 
                            initial={{ opacity: 0, y: 40 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: 0.2 }}
                            className="lg:col-span-4 bg-gradient-to-br from-gold/20 to-[#0a0f1a] p-6 sm:p-8 md:p-10 rounded-2xl sm:rounded-3xl border border-gold/30 flex flex-col justify-center items-center text-center relative overflow-hidden md:float-anim shadow-[0_0_30px_rgba(239,198,104,0.1)]"
                        >
                            <i className='bx bx-award text-7xl text-gold mb-6 drop-shadow-[0_0_15px_rgba(239,198,104,0.5)]'></i>
                            <h3 className="text-3xl font-serif text-white mb-3">{t.company.awardTitle}</h3>
                            <p className="text-gray-300 leading-relaxed">{t.company.awardSub}</p>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* VISION & MISSION & ORG */}
            <section id="section-2" className="py-14 md:py-20 lg:py-24 bg-[#0a0d14] border-y border-white/5 relative z-10">
                <div className="container mx-auto px-4 sm:px-6">
                    <SectionTitle subtitle="02 // LEADERSHIP" title="Vision & Mission" />
                    
                    <motion.div 
                        variants={containerVariants}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true, margin: "-100px" }}
                        className="grid lg:grid-cols-12 gap-6 md:gap-8 mb-16 md:mb-24 lg:mb-32"
                    >
                        {/* VISION - Balanced Centered Card */}
                        <motion.div variants={itemVariants} className="lg:col-span-5 relative group rounded-[2.5rem] overflow-hidden bg-[#0a0f1a]/80 backdrop-blur-xl border border-white/10 hover:border-gold/30 shadow-2xl flex flex-col justify-center transition-all duration-500 hover:-translate-y-2">
                            <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1518342416041-5a230554ee5b?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center opacity-5 group-hover:opacity-10 group-hover:scale-110 transition-all duration-1000"></div>
                            
                            <div className="p-10 relative z-10 text-center flex flex-col items-center">
                                <div className="w-20 h-20 rounded-full bg-gold/10 flex items-center justify-center mb-6 border border-gold/30 group-hover:bg-gold transition-colors duration-500 shadow-[0_0_20px_rgba(239,198,104,0.2)]">
                                    <i className='bx bx-bullseye text-4xl text-gold group-hover:text-[#05070a] transition-colors'></i>
                                </div>
                                <h3 className="text-2xl sm:text-3xl md:text-4xl font-serif text-white mb-4 sm:mb-6 tracking-wide">{t.vision_mission.v_title}</h3>
                                <div className="w-16 h-1 bg-gold mb-6 mx-auto rounded-full"></div>
                                <p className="text-gray-300 leading-relaxed text-lg font-light italic px-4">"{t.vision_mission.v_desc}"</p>
                            </div>
                        </motion.div>

                        {/* MISSION - Compact Floating Cards */}
                        <div className="lg:col-span-7 flex flex-col justify-center gap-5">
                            <motion.div variants={itemVariants} className="flex items-center gap-5 mb-2 ml-2">
                                <div className="w-14 h-14 rounded-full bg-gold/10 flex items-center justify-center border border-gold/30">
                                    <i className='bx bx-rocket text-2xl text-gold'></i>
                                </div>
                                <h3 className="text-2xl sm:text-3xl md:text-4xl font-serif text-white tracking-wide">{t.vision_mission.m_title}</h3>
                            </motion.div>

                            <motion.div variants={itemVariants} className="bg-[#0a0f1a]/60 backdrop-blur-xl p-6 rounded-2xl border border-white/5 hover:border-gold/40 hover:bg-[#1a202c]/80 md:hover:translate-x-4 transition-all duration-500 group flex gap-4 sm:gap-5 items-start sm:items-center shadow-xl cursor-default">
                                <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center shrink-0 border border-white/10 group-hover:border-gold/50 group-hover:bg-gold/10 transition-colors">
                                    <span className="text-gold font-serif text-xl">01</span>
                                </div>
                                <p className="text-gray-300 text-base leading-relaxed group-hover:text-white transition-colors">{t.vision_mission.m_1}</p>
                            </motion.div>

                            <motion.div variants={itemVariants} className="bg-[#0a0f1a]/60 backdrop-blur-xl p-6 rounded-2xl border border-white/5 hover:border-gold/40 hover:bg-[#1a202c]/80 md:hover:translate-x-4 transition-all duration-500 group flex gap-4 sm:gap-5 items-start sm:items-center shadow-xl cursor-default">
                                <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center shrink-0 border border-white/10 group-hover:border-gold/50 group-hover:bg-gold/10 transition-colors">
                                    <span className="text-gold font-serif text-xl">02</span>
                                </div>
                                <p className="text-gray-300 text-base leading-relaxed group-hover:text-white transition-colors">{t.vision_mission.m_2}</p>
                            </motion.div>

                            <motion.div variants={itemVariants} className="bg-[#0a0f1a]/60 backdrop-blur-xl p-6 rounded-2xl border border-white/5 hover:border-gold/40 hover:bg-[#1a202c]/80 md:hover:translate-x-4 transition-all duration-500 group flex gap-4 sm:gap-5 items-start sm:items-center shadow-xl cursor-default">
                                <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center shrink-0 border border-white/10 group-hover:border-gold/50 group-hover:bg-gold/10 transition-colors">
                                    <span className="text-gold font-serif text-xl">03</span>
                                </div>
                                <p className="text-gray-300 text-base leading-relaxed group-hover:text-white transition-colors">{t.vision_mission.m_3}</p>
                            </motion.div>
                        </div>
                    </motion.div>

                    <div className="mt-16 sm:mt-24 md:mt-32 lg:mt-40 relative">
                        {/* Title using SectionTitle style since it's a major subsection */}
                        <div className="text-center mb-12 sm:mb-16 md:mb-24 relative z-10">
                            <motion.h2 
                                initial={{ opacity: 0, y: 20 }}
                                whileInView={{ opacity: 1, y: 0 }}
                                viewport={{ once: true }}
                                className="font-serif text-2xl sm:text-3xl md:text-4xl text-white font-medium tracking-wide mb-4 sm:mb-6 px-2"
                            >
                                {t.org.title}
                            </motion.h2>
                            <div className="w-20 h-1 bg-gold mx-auto rounded-full opacity-50 shadow-[0_0_15px_rgba(239,198,104,0.5)]"></div>
                        </div>

                        <div className="relative max-w-4xl mx-auto pb-12 px-2 sm:px-0">
                            {/* Vertical Glowing Trunk Line */}
                            <div className="absolute top-10 bottom-20 left-1/2 w-px bg-gradient-to-b from-transparent via-gold/30 to-transparent -translate-x-1/2 hidden lg:block z-0"></div>

                            {/* BOARD OF COMMISSIONERS */}
                            <div className="relative z-10 text-center mb-16">
                                <div className="inline-block bg-[#05070a]/80 backdrop-blur-md px-8 py-2.5 border border-gold/30 rounded-full mb-12 shadow-[0_0_20px_rgba(239,198,104,0.1)] relative z-20">
                                    <span className="text-gold uppercase tracking-[0.3em] text-[11px] font-bold">Board of Commissioners</span>
                                </div>
                                
                                <div className="flex flex-col lg:flex-row justify-center gap-8 items-center relative">
                                    {/* Horizontal Connection line for Commissioners */}
                                    <div className="absolute top-1/2 left-1/2 w-[312px] h-px bg-gold/30 -translate-x-1/2 -translate-y-1/2 hidden lg:block z-0"></div>
                                    
                                    <div className="relative z-10 bg-[#0a0d14] p-1.5 rounded-[2rem]">
                                        <OrgCard name="Ika Putri Windyastuti" role={t.org.roles[0]} icon="bx-crown" delay={0.1} />
                                    </div>
                                    <div className="relative z-10 bg-[#0a0d14] p-1.5 rounded-[2rem]">
                                        <OrgCard name="Dewi Effendy" role={t.org.roles[2]} icon="bx-user-pin" delay={0.2} />
                                    </div>
                                </div>
                            </div>

                            {/* EXECUTIVE MANAGEMENT */}
                            <div className="relative z-10 text-center">
                                <div className="inline-block bg-[#05070a]/80 backdrop-blur-md px-8 py-2.5 border border-gold/30 rounded-full mb-12 shadow-[0_0_20px_rgba(239,198,104,0.1)] relative z-20">
                                    <span className="text-gold uppercase tracking-[0.3em] text-[11px] font-bold">Executive Management</span>
                                </div>
                                
                                <div className="flex justify-center mb-12 relative z-10">
                                    <div className="relative z-10 bg-[#0a0d14] p-1.5 rounded-[2rem]">
                                        <OrgCard name="Christy Duakaju" role={t.org.roles[1]} icon="bx-briefcase" delay={0.3} />
                                    </div>
                                </div>

                                <div className="flex flex-col lg:flex-row justify-center gap-8 items-center relative z-10">
                                    {/* Horizontal/Vertical Connectors for Directors */}
                                    <div className="absolute -top-[3rem] h-[3rem] border-t border-l border-r border-gold/30 rounded-t-xl hidden lg:block z-0" style={{ left: 'calc(50% - 156px)', right: 'calc(50% - 156px)' }}></div>
                                    
                                    <div className="relative z-10 bg-[#0a0d14] p-1.5 rounded-[2rem]">
                                        <OrgCard name="Rahmat Kurniadi" role={t.org.roles[3]} icon="bx-user" delay={0.4} />
                                    </div>
                                    <div className="relative z-10 bg-[#0a0d14] p-1.5 rounded-[2rem]">
                                        <OrgCard name="Agustina Christiani Wowor" role={t.org.roles[4]} icon="bx-building" delay={0.5} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* CERTIFICATIONS (RE-DESIGNED) */}
            <section id="section-3" className="py-14 md:py-20 lg:py-24 relative z-10 overflow-hidden">
                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1505672678657-cc70370d5e60?q=80&w=2000&auto=format&fit=crop')] bg-cover opacity-10"></div>
                <div className="absolute inset-0 bg-gradient-to-b from-[#05070a] via-transparent to-[#05070a]"></div>
                
                <div className="container mx-auto px-4 sm:px-6 relative z-10">
                    <div className="text-center mb-20">
                        <motion.div 
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            className="flex items-center justify-center gap-4 mb-6"
                        >
                            <div className="w-12 h-[1px] bg-gold"></div>
                            <p className="text-gold uppercase tracking-[2px] sm:tracking-[4px] md:tracking-[5px] text-xs sm:text-sm font-semibold">{t.certs.subtitle}</p>
                            <div className="w-12 h-[1px] bg-gold"></div>
                        </motion.div>
                        <motion.h2 
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: 0.1 }}
                            className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-gold mb-4 sm:mb-6 drop-shadow-[0_0_15px_rgba(239,198,104,0.3)] px-2"
                        >
                            {t.certs.title}
                        </motion.h2>
                        <motion.p 
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: 0.2 }}
                            className="text-gray-300 text-lg md:text-xl font-light"
                        >
                            {t.certs.desc}
                        </motion.p>
                    </div>

                    <motion.div 
                        variants={containerVariants}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true, margin: "-100px" }}
                        className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 max-w-7xl mx-auto"
                    >
                        {t.certs.items.map((cert, i) => (
                            <motion.div 
                                key={i}
                                variants={itemVariants}
                                whileHover={{ y: -10, boxShadow: "0 15px 40px rgba(239, 198, 104, 0.15)" }}
                                className="bg-[#0a0f1a]/80 backdrop-blur-xl border border-white/5 hover:border-gold/30 rounded-3xl p-8 flex flex-col items-center text-center transition-all duration-300 relative overflow-hidden group shadow-xl"
                            >
                                <div className="absolute inset-0 bg-gradient-to-b from-gold/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                <div className="w-16 h-16 rounded-full bg-[#161a25] border border-white/10 flex items-center justify-center mb-6 group-hover:border-gold/30 group-hover:bg-gold/5 transition-all">
                                    <i className='bx bx-medal text-3xl text-gold group-hover:scale-110 group-hover:drop-shadow-[0_0_10px_rgba(239,198,104,0.8)] transition-all duration-300'></i>
                                </div>
                                <h3 className="text-2xl font-serif text-gold mb-4 tracking-wide">{cert.title}</h3>
                                <p className="text-[13px] text-[#7B92B3] leading-relaxed max-w-[150px] font-medium">{cert.desc}</p>
                            </motion.div>
                        ))}
                    </motion.div>
                </div>
            </section>


            {/* PRODUCTS & SUPPLIERS */}
            <section id="section-4" className="py-14 md:py-20 lg:py-24 relative z-10 border-t border-white/5 overflow-hidden">
                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1551244072-5dd924d8ddb3?q=80&w=2000&auto=format&fit=crop')] bg-cover opacity-5"></div>
                <div className="absolute inset-0 bg-gradient-to-b from-[#05070a] via-transparent to-[#0a0d14]"></div>
                
                <div className="container mx-auto px-4 sm:px-6 relative z-10">
                    <SectionTitle subtitle={t.products_suppliers.subtitle} title={t.products_suppliers.title} />

                    {/* MAIN PRODUCTS */}
                    <div className="mb-24">
                        <div className="flex items-center gap-6 mb-12">
                            <h3 className="text-2xl font-serif text-gold tracking-widest">{t.products_suppliers.prodTitle}</h3>
                            <div className="flex-1 h-px bg-gradient-to-r from-gold/50 to-transparent"></div>
                        </div>

                        <motion.div 
                            variants={containerVariants}
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true }}
                            className="grid lg:grid-cols-2 gap-6 md:gap-8 lg:gap-12"
                        >
                            {/* Katsuobushi */}
                            <motion.div variants={itemVariants} className="group relative rounded-[2.5rem] overflow-hidden bg-[#0a0f1a]/80 border border-white/10 hover:border-gold/50 transition-all duration-500 shadow-2xl flex flex-col">
                                <div className="h-56 sm:h-64 md:h-80 relative flex flex-col sm:flex-row shrink-0">
                                    <div className="w-full sm:w-1/2 h-1/2 sm:h-full border-b sm:border-b-0 sm:border-r border-white/10 overflow-hidden cursor-zoom-in" onClick={() => setSelectedImg('assets/img/Produk_1_katshuoibushi_2.png')}>
                                        <img src="assets/img/Produk_1_katshuoibushi_2.png" alt="Katsuobushi Part 1" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                                    </div>
                                    <div className="w-full sm:w-1/2 h-1/2 sm:h-full overflow-hidden cursor-zoom-in" onClick={() => setSelectedImg('assets/img/Produk_1_katshuoibushi_3.png')}>
                                        <img src="assets/img/Produk_1_katshuoibushi_3.png" alt="Katsuobushi Part 2" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                                    </div>
                                    <div className="absolute inset-0 shadow-[inset_0_-20px_30px_rgba(10,15,26,0.5)] pointer-events-none"></div>
                                </div>
                                <div className="p-6 sm:p-8 md:p-10 pt-4 relative z-30 bg-[#0a0f1a] flex-1">
                                    <div className="absolute -top-8 left-10 w-16 h-16 rounded-2xl bg-gradient-to-br from-gold to-yellow-600 flex items-center justify-center shadow-[0_10px_20px_rgba(239,198,104,0.3)] mb-6 transform group-hover:-translate-y-2 transition-transform duration-500 border border-gold/50">
                                        <i className='bx bx-diamond text-3xl text-[#05070a]'></i>
                                    </div>
                                    <div className="mt-8">
                                        <h4 className="text-3xl font-serif text-white mb-3 group-hover:text-gold transition-colors">{t.products_suppliers.katsuobushi.title}</h4>
                                        <p className="text-gray-300 text-sm mb-2 font-medium">{t.products_suppliers.katsuobushi.desc1}</p>
                                        <p className="text-gold/70 text-xs uppercase tracking-widest">{t.products_suppliers.katsuobushi.desc2}</p>
                                    </div>
                                </div>
                            </motion.div>

                            {/* Hana Katsuo */}
                            <motion.div variants={itemVariants} className="group relative rounded-[2.5rem] overflow-hidden bg-[#0a0f1a]/80 border border-white/10 hover:border-gold/50 transition-all duration-500 shadow-2xl flex flex-col">
                                <div className="h-80 overflow-hidden relative shrink-0 cursor-zoom-in" onClick={() => setSelectedImg('assets/img/Produk_2_Hana%20Katsuo.png')}>
                                    <img src="assets/img/Produk_2_Hana%20Katsuo.png" alt="Hana Katsuo" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                                    <div className="absolute inset-0 shadow-[inset_0_-20px_30px_rgba(10,15,26,0.5)] pointer-events-none"></div>
                                </div>
                                <div className="p-6 sm:p-8 md:p-10 pt-4 relative z-30 bg-[#0a0f1a] flex-1">
                                    <div className="absolute -top-8 left-10 w-16 h-16 rounded-2xl bg-gradient-to-br from-gold to-yellow-600 flex items-center justify-center shadow-[0_10px_20px_rgba(239,198,104,0.3)] mb-6 transform group-hover:-translate-y-2 transition-transform duration-500 border border-gold/50">
                                        <i className='bx bx-bowl-hot text-3xl text-[#05070a]'></i>
                                    </div>
                                    <div className="mt-8">
                                        <h4 className="text-3xl font-serif text-white mb-3 group-hover:text-gold transition-colors">{t.products_suppliers.hanakatsuo.title}</h4>
                                        <p className="text-gray-300 text-sm mb-2 font-medium">{t.products_suppliers.hanakatsuo.desc1}</p>
                                        <p className="text-gold/70 text-xs uppercase tracking-widest">{t.products_suppliers.hanakatsuo.desc2}</p>
                                    </div>
                                </div>
                            </motion.div>
                        </motion.div>
                    </div>

                    {/* SUPPLIER LIST */}
                    <div className="mt-16 sm:mt-24 md:mt-32 lg:mt-40">
                        <div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 mb-12 sm:mb-16 md:mb-24 sm:flex-row-reverse relative z-10">
                            <h3 className="text-xl sm:text-2xl md:text-3xl font-serif text-gold tracking-widest text-left sm:text-right shrink-0">{t.products_suppliers.supTitle}</h3>
                            <div className="flex-1 h-px bg-gradient-to-l from-gold/50 to-transparent"></div>
                        </div>

                        <motion.div 
                            variants={containerVariants}
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true }}
                            className="flex flex-col gap-12 max-w-5xl mx-auto relative"
                        >
                            {/* Vertical Glowing Connector Line */}
                            <div className="absolute top-14 bottom-14 left-[3.5rem] w-px bg-gradient-to-b from-gold/50 via-gold/10 to-transparent hidden md:block z-0"></div>

                            {/* Raw Materials */}
                            <motion.div variants={itemVariants} className="relative flex flex-col md:flex-row gap-8 items-start group">
                                <div className="w-28 h-28 shrink-0 bg-[#0a0f1a] border border-gold/40 rounded-full flex items-center justify-center relative z-10 shadow-[0_0_30px_rgba(239,198,104,0.15)] group-hover:scale-110 transition-transform duration-700 overflow-hidden">
                                    <div className="absolute inset-0 bg-gold/5 group-hover:bg-gold/20 transition-colors duration-500"></div>
                                    <i className='bx bx-anchor text-4xl text-gold relative z-10 group-hover:drop-shadow-[0_0_10px_rgba(239,198,104,0.8)] transition-all'></i>
                                </div>
                                <div className="flex-1 bg-[#161a25]/60 backdrop-blur-xl border border-white/5 group-hover:border-gold/30 p-10 rounded-[2.5rem] transition-all duration-500 shadow-2xl group-hover:shadow-[0_20px_50px_rgba(0,0,0,0.6)] relative overflow-hidden">
                                    <div className="absolute top-0 right-0 w-64 h-64 bg-gold/5 rounded-full blur-3xl group-hover:bg-gold/10 pointer-events-none transition-colors duration-700 -translate-y-1/2 translate-x-1/4"></div>
                                    <h4 className="text-3xl font-serif text-white mb-2 relative z-10">{t.products_suppliers.supRaw}</h4>
                                    <p className="text-sm text-gold mb-8 uppercase tracking-[0.2em] font-bold relative z-10">{t.products_suppliers.supRawDesc}</p>
                                    <div className="flex flex-wrap gap-4 relative z-10">
                                        {t.products_suppliers.lists.raw.map((sup, i) => (
                                            <span key={i} className="px-6 py-3 bg-[#0a0f1a]/80 backdrop-blur-md border border-white/10 rounded-full text-sm text-gray-300 group-hover:border-gold/30 hover:!border-gold hover:text-white hover:shadow-[0_0_15px_rgba(239,198,104,0.3)] transition-all duration-300 cursor-default">
                                                {sup}
                                            </span>
                                        ))}
                                    </div>
                                </div>
                            </motion.div>

                            {/* Packaging */}
                            <motion.div variants={itemVariants} className="relative flex flex-col md:flex-row gap-8 items-start group">
                                <div className="w-28 h-28 shrink-0 bg-[#0a0f1a] border border-gold/40 rounded-full flex items-center justify-center relative z-10 shadow-[0_0_30px_rgba(239,198,104,0.15)] group-hover:scale-110 transition-transform duration-700 overflow-hidden">
                                    <div className="absolute inset-0 bg-gold/5 group-hover:bg-gold/20 transition-colors duration-500"></div>
                                    <i className='bx bx-cube-alt text-4xl text-gold relative z-10 group-hover:drop-shadow-[0_0_10px_rgba(239,198,104,0.8)] transition-all'></i>
                                </div>
                                <div className="flex-1 bg-[#161a25]/60 backdrop-blur-xl border border-white/5 group-hover:border-gold/30 p-10 rounded-[2.5rem] transition-all duration-500 shadow-2xl group-hover:shadow-[0_20px_50px_rgba(0,0,0,0.6)] relative overflow-hidden">
                                    <div className="absolute top-0 right-0 w-64 h-64 bg-gold/5 rounded-full blur-3xl group-hover:bg-gold/10 pointer-events-none transition-colors duration-700 -translate-y-1/2 translate-x-1/4"></div>
                                    <h4 className="text-3xl font-serif text-white mb-2 relative z-10">{t.products_suppliers.supPack}</h4>
                                    <p className="text-sm text-gold mb-8 uppercase tracking-[0.2em] font-bold relative z-10">{t.products_suppliers.supPackDesc}</p>
                                    <div className="flex flex-wrap gap-4 relative z-10">
                                        {t.products_suppliers.lists.pack.map((sup, i) => (
                                            <span key={i} className="px-6 py-3 bg-[#0a0f1a]/80 backdrop-blur-md border border-white/10 rounded-full text-sm text-gray-300 group-hover:border-gold/30 hover:!border-gold hover:text-white hover:shadow-[0_0_15px_rgba(239,198,104,0.3)] transition-all duration-300 cursor-default">
                                                {sup}
                                            </span>
                                        ))}
                                    </div>
                                </div>
                            </motion.div>

                            {/* Chemicals */}
                            <motion.div variants={itemVariants} className="relative flex flex-col md:flex-row gap-8 items-start group">
                                <div className="w-28 h-28 shrink-0 bg-[#0a0f1a] border border-gold/40 rounded-full flex items-center justify-center relative z-10 shadow-[0_0_30px_rgba(239,198,104,0.15)] group-hover:scale-110 transition-transform duration-700 overflow-hidden">
                                    <div className="absolute inset-0 bg-gold/5 group-hover:bg-gold/20 transition-colors duration-500"></div>
                                    <i className='bx bx-test-tube text-4xl text-gold relative z-10 group-hover:drop-shadow-[0_0_10px_rgba(239,198,104,0.8)] transition-all'></i>
                                </div>
                                <div className="flex-1 bg-[#161a25]/60 backdrop-blur-xl border border-white/5 group-hover:border-gold/30 p-10 rounded-[2.5rem] transition-all duration-500 shadow-2xl group-hover:shadow-[0_20px_50px_rgba(0,0,0,0.6)] relative overflow-hidden">
                                    <div className="absolute top-0 right-0 w-64 h-64 bg-gold/5 rounded-full blur-3xl group-hover:bg-gold/10 pointer-events-none transition-colors duration-700 -translate-y-1/2 translate-x-1/4"></div>
                                    <h4 className="text-3xl font-serif text-white mb-2 relative z-10">{t.products_suppliers.supChem}</h4>
                                    <p className="text-sm text-gold mb-8 uppercase tracking-[0.2em] font-bold relative z-10">{t.products_suppliers.supChemDesc}</p>
                                    <div className="flex flex-wrap gap-4 relative z-10">
                                        {t.products_suppliers.lists.chem.map((sup, i) => (
                                            <span key={i} className="px-6 py-3 bg-[#0a0f1a]/80 backdrop-blur-md border border-white/10 rounded-full text-sm text-gray-300 group-hover:border-gold/30 hover:!border-gold hover:text-white hover:shadow-[0_0_15px_rgba(239,198,104,0.3)] transition-all duration-300 cursor-default">
                                                {sup}
                                            </span>
                                        ))}
                                    </div>
                                </div>
                            </motion.div>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* RAW MATERIAL & PRODUCT SPECIFICATION */}
            <section id="section-5" className="py-14 md:py-20 lg:py-24 bg-[#0a0d14] border-t border-white/5 relative z-10">
                <div className="container mx-auto px-4 sm:px-6">
                    <SectionTitle subtitle="04 // SPECIFICATIONS" title={t.specs.title} />
                    
                    <motion.div 
                        variants={containerVariants}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true }}
                        className="grid lg:grid-cols-2 gap-12"
                    >
                        {/* Raw Material */}
                        <motion.div variants={itemVariants} className="bg-[#0a0f1a] rounded-3xl p-10 border border-white/5 hover:border-gold/20 transition-colors shadow-2xl">
                            <div className="flex items-center gap-5 mb-10">
                                <div className="p-4 rounded-2xl bg-gold text-navy-900 shadow-[0_0_20px_rgba(239,198,104,0.3)]"><i className='bx bx-anchor text-4xl'></i></div>
                                <div>
                                    <h3 className="text-3xl font-serif text-white mb-1">{t.specs.rawTitle}</h3>
                                    <p className="text-gold text-xs tracking-[0.2em] uppercase">{t.specs.rawSub}</p>
                                </div>
                            </div>
                            
                            <div className="flex gap-3 mb-10 flex-wrap">
                                {t.specs.fishTypes.map(fish => (
                                    <span key={fish} className="px-5 py-2 rounded-full bg-white/5 border border-white/10 text-sm text-gray-300 hover:bg-gold hover:text-navy-900 hover:border-gold transition-colors">{fish}</span>
                                ))}
                            </div>

                            <div className="space-y-4">
                                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 p-4 sm:p-5 rounded-2xl bg-[#161a25]/50 border border-white/5 hover:border-gold/20 transition-colors">
                                    <span className="text-gray-300">{t.specs.micro}</span>
                                    <span className="text-gold font-medium flex items-center gap-2"><i className='bx bx-check-shield text-xl'></i> {t.specs.passed}</span>
                                </div>
                                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 p-4 sm:p-5 rounded-2xl bg-[#161a25]/50 border border-white/5 hover:border-gold/20 transition-colors">
                                    <span className="text-gray-300">{t.specs.chem}</span>
                                    <span className="text-gold font-medium flex items-center gap-2"><i className='bx bx-check-shield text-xl'></i> {t.specs.passed}</span>
                                </div>
                                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 p-4 sm:p-5 rounded-2xl bg-[#161a25]/50 border border-white/5 hover:border-gold/20 transition-colors">
                                    <span className="text-gray-300">{t.specs.storeRaw}</span>
                                    <span className="text-white font-semibold text-lg">-18°C</span>
                                </div>
                            </div>
                        </motion.div>

                        {/* Product Spec */}
                        <motion.div variants={itemVariants} className="bg-gradient-to-b from-[#161a25] to-[#0a0f1a] rounded-3xl p-10 border border-gold/30 relative overflow-hidden shadow-[0_20px_50px_rgba(239,198,104,0.1)]">
                            <div className="absolute -right-10 -bottom-10 text-gold/5 text-[200px] pointer-events-none"><i className='bx bx-box'></i></div>
                            
                            <div className="flex items-center gap-5 mb-10 relative z-10">
                                <div className="p-4 rounded-2xl bg-[#0a0f1a] text-gold border border-gold/30 shadow-[0_0_20px_rgba(239,198,104,0.15)]"><i className='bx bx-package text-4xl'></i></div>
                                <div>
                                    <h3 className="text-3xl font-serif text-white mb-1">{t.specs.prodTitle}</h3>
                                    <p className="text-gold text-xs tracking-[0.2em] uppercase">{t.specs.prodSub}</p>
                                </div>
                            </div>

                            <div className="space-y-6 relative z-10 bg-[#05070a]/50 p-8 rounded-2xl border border-white/5">
                                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 border-b border-white/10 pb-4 sm:pb-5">
                                    <span className="text-gray-400">{t.specs.pack}</span>
                                    <span className="text-white font-medium text-right text-lg">{t.specs.packVal} <br/><span className="text-xs tracking-wider text-gold uppercase">{t.specs.grade}</span></span>
                                </div>
                                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 border-b border-white/10 pb-4 sm:pb-5">
                                    <span className="text-gray-400">{t.specs.shelf}</span>
                                    <span className="text-white font-semibold text-lg">{t.specs.shelfVal}</span>
                                </div>
                                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 border-b border-white/10 pb-4 sm:pb-5">
                                    <span className="text-gray-400">{t.specs.allergen}</span>
                                    <span className="text-white font-medium bg-red-500/20 text-red-300 px-4 py-1 rounded-full text-sm">{t.specs.allergenVal}</span>
                                </div>
                                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                                    <span className="text-gray-400">{t.specs.shipping}</span>
                                    <span className="text-white font-medium flex items-center gap-2"><i className='bx bx-ship text-gold'></i> {t.specs.shippingVal}</span>
                                </div>
                            </div>
                        </motion.div>
                    </motion.div>
                </div>
            </section>

            {/* PRODUCTION PROCESS */}
            <section id="section-6" className="py-14 md:py-20 lg:py-24 relative z-10">
                <div className="container mx-auto px-4 sm:px-6">
                    <SectionTitle subtitle="05 // OPERATIONS" title={t.process.title} />
                    
                    <div className="relative max-w-6xl mx-auto mt-10 sm:mt-14 md:mt-20 px-1 sm:px-4">
                        <div className="absolute top-1/2 left-4 right-4 h-[2px] bg-gradient-to-r from-transparent via-gold/30 to-transparent -translate-y-1/2 hidden md:block"></div>
                        
                    <motion.div 
                        variants={containerVariants}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true }}
                        className="flex flex-wrap justify-center gap-2 sm:gap-3 md:gap-4 relative z-10"
                    >
                            {t.process.steps.map((step, i) => (
                                <motion.div 
                                    key={i}
                                    variants={itemVariants}
                                    className="px-3 py-2 sm:px-5 sm:py-3 md:px-6 md:py-4 bg-[#0a0f1a] border border-white/10 rounded-full text-[10px] sm:text-xs md:text-sm font-semibold uppercase tracking-wide sm:tracking-widest text-gray-300 hover:bg-gold hover:text-navy-900 hover:border-gold md:hover:scale-110 transition-all cursor-default shadow-lg hover:shadow-[0_0_20px_rgba(239,198,104,0.4)]"
                                >
                                    {step}
                                </motion.div>
                            ))}
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* FACILITIES */}
            <section className="py-14 md:py-20 lg:py-24 bg-[#0a0d14] border-t border-white/5 relative z-10">
                <div className="container mx-auto px-4 sm:px-6">
                    <SectionTitle subtitle="06 // INFRASTRUCTURE" title={t.excellence.title} />
                    
                    <motion.div 
                        variants={containerVariants}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true }}
                        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8"
                    >
                        {t.excellence.facilities.map((facility, i) => (
                            <motion.div 
                                key={i}
                                variants={itemVariants}
                                role="button"
                                tabIndex={0}
                                onClick={() => openFacilityLightbox(i, facility)}
                                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFacilityLightbox(i, facility); } }}
                                className="relative h-56 sm:h-64 md:h-72 lg:h-80 rounded-2xl sm:rounded-3xl overflow-hidden group border border-white/10 hover:border-gold/40 transition-colors shadow-2xl cursor-zoom-in focus:outline-none focus-visible:ring-2 focus-visible:ring-gold/60"
                            >
                                <img
                                    src={FACILITY_IMAGES[i]?.jpg}
                                    data-fallback={FACILITY_IMAGES[i]?.fallback}
                                    alt={facility}
                                    onError={handleFacilityImgError}
                                    className="w-full h-full object-cover filter brightness-[0.55] group-hover:brightness-95 group-hover:scale-110 transition-all duration-700 ease-out"
                                />
                                <motion.div className="absolute inset-0 bg-gradient-to-t from-[#05070a] via-[#05070a]/40 to-transparent opacity-90 group-hover:opacity-60 transition-opacity pointer-events-none"></motion.div>
                                <motion.div className="absolute top-4 right-4 w-10 h-10 rounded-full bg-black/50 border border-white/20 flex items-center justify-center text-gold opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                                    <i className='bx bx-expand-alt text-xl'></i>
                                </motion.div>
                                <div className="absolute bottom-4 sm:bottom-6 lg:bottom-8 left-4 sm:left-6 lg:left-8 right-4 sm:right-6 lg:right-8 pointer-events-none">
                                    <div className="w-10 h-1 bg-gold mb-3 sm:mb-4 group-hover:w-full transition-all duration-500 ease-out rounded-full opacity-50 group-hover:opacity-100"></div>
                                    <h4 className="font-serif text-lg sm:text-xl lg:text-2xl font-medium text-white mb-1 sm:mb-2 leading-snug">{facility}</h4>
                                    <p className="text-[10px] sm:text-[11px] text-gold uppercase tracking-[0.2em] sm:tracking-[0.3em] font-semibold mb-1">{t.excellence.grade}</p>
                                    <p className="text-[10px] text-gray-400 tracking-wider opacity-80 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">{t.excellence.clickHint}</p>
                                </div>
                            </motion.div>
                        ))}
                    </motion.div>
                </div>
            </section>

            {/* EXPORT MARKET MAP */}
            <section id="section-7" className="py-14 md:py-20 lg:py-24 relative z-10 border-t border-white/5 overflow-hidden">
                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2000&auto=format&fit=crop')] bg-cover opacity-5"></div>
                <div className="absolute inset-0 bg-gradient-to-t from-[#05070a] via-transparent to-[#0a0d14]"></div>
                
                <div className="container mx-auto px-4 sm:px-6 text-center relative z-10">
                    <SectionTitle subtitle="07 // GLOBAL REACH" title={t.market.title} />
                    
                    <motion.div 
                        initial={{ opacity: 0, scale: 0.95 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.8 }}
                        className="max-w-5xl mx-auto p-6 sm:p-10 md:p-16 lg:p-20 rounded-2xl sm:rounded-[2rem] lg:rounded-[3rem] bg-[#0a0f1a]/80 border border-gold/20 backdrop-blur-xl relative overflow-hidden shadow-[0_20px_50px_rgba(239,198,104,0.05)]"
                    >
                        <i className='bx bx-world text-[120px] sm:text-[200px] lg:text-[300px] text-white/5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none'></i>
                        
                        <motion.div 
                            variants={containerVariants}
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true }}
                            className="flex flex-wrap justify-center gap-4 relative z-10"
                        >
                            {t.market.countries.map((country, i) => (
                                <motion.div 
                                    key={i} 
                                    variants={itemVariants}
                                    whileHover={{ scale: 1.1, backgroundColor: "#EFC668", color: "#0a0f1a" }}
                                    className="flex items-center gap-2 sm:gap-3 bg-[#161a25]/80 border border-gold/30 px-4 py-2.5 sm:px-6 sm:py-3 md:px-8 md:py-4 rounded-full transition-all duration-300 shadow-xl cursor-default"
                                >
                                    <div className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-gold shadow-[0_0_10px_#EFC668] animate-pulse shrink-0"></div>
                                    <span className="font-bold tracking-wide sm:tracking-widest uppercase text-xs sm:text-sm">{country}</span>
                                </motion.div>
                            ))}
                        </motion.div>
                    </motion.div>
                </div>
            </section>

            {/* CONTACT */}
            <section id="section-8" className="py-14 md:py-20 lg:py-24 relative z-10 border-t border-white/5">
                <div className="container mx-auto px-4 sm:px-6">
                    <SectionTitle subtitle="07 // CONNECT" title={t.contact.title} />
                    
                    <div className="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
                        <motion.div 
                            initial={{ opacity: 0, x: -30 }}
                            whileInView={{ opacity: 1, x: 0 }}
                            viewport={{ once: true }}
                            className="bg-[#0a0f1a]/80 backdrop-blur-xl p-6 sm:p-8 md:p-12 rounded-2xl sm:rounded-3xl border border-white/10 shadow-2xl"
                        >
                            <h3 className="text-xl sm:text-2xl md:text-3xl font-serif mb-6 sm:mb-10 text-gold">PT. ANUGRAH SEJATI BERSAMA</h3>
                            
                            <div className="space-y-8">
                                <div className="flex items-center gap-6 group">
                                    <div className="w-16 h-16 rounded-2xl bg-[#161a25] border border-white/10 flex items-center justify-center text-gold shrink-0 group-hover:bg-gold group-hover:text-navy-900 group-hover:border-gold transition-all duration-300 shadow-lg">
                                        <i className='bx bx-map text-2xl'></i>
                                    </div>
                                    <div>
                                        <h5 className="text-xs uppercase tracking-[0.2em] text-gray-500 mb-2">{t.contact.addressLabel}</h5>
                                        <p className="text-lg text-gray-200 font-medium leading-relaxed">{t.contact.address}</p>
                                    </div>
                                </div>
                                
                                <div className="flex items-center gap-6 group">
                                    <div className="w-16 h-16 rounded-2xl bg-[#161a25] border border-white/10 flex items-center justify-center text-gold shrink-0 group-hover:bg-gold group-hover:text-navy-900 group-hover:border-gold transition-all duration-300 shadow-lg">
                                        <i className='bx bx-phone text-2xl'></i>
                                    </div>
                                    <div>
                                        <h5 className="text-xs uppercase tracking-[0.2em] text-gray-500 mb-2">{t.contact.phoneLabel}</h5>
                                        <p className="text-lg sm:text-xl md:text-2xl text-white font-serif break-all">{t.contact.phone}</p>
                                    </div>
                                </div>
                                
                                <div className="flex items-center gap-6 group">
                                    <div className="w-16 h-16 rounded-2xl bg-[#161a25] border border-white/10 flex items-center justify-center text-gold shrink-0 group-hover:bg-gold group-hover:text-navy-900 group-hover:border-gold transition-all duration-300 shadow-lg">
                                        <i className='bx bx-envelope text-2xl'></i>
                                    </div>
                                    <div>
                                        <h5 className="text-xs uppercase tracking-[0.2em] text-gray-500 mb-2">{t.contact.emailLabel}</h5>
                                        <p className="text-sm sm:text-base md:text-lg text-gold font-medium break-all">{t.contact.email}</p>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                        
                        <motion.div 
                            initial={{ opacity: 0, x: 30 }}
                            whileInView={{ opacity: 1, x: 0 }}
                            viewport={{ once: true }}
                            className="h-[280px] sm:h-[350px] md:h-full min-h-[280px] md:min-h-[400px] rounded-2xl sm:rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl relative bg-white"
                        >
                            <a href="https://maps.app.goo.gl/3Q8p3v5Xj8s2y9a87" target="_blank" rel="noreferrer" className="absolute top-4 left-4 z-20 bg-white text-[#1a73e8] font-medium px-4 py-2.5 rounded shadow-[0_2px_6px_rgba(0,0,0,0.3)] flex items-center gap-2 hover:bg-gray-50 transition-colors text-sm">
                                Open in Maps <i className='bx bx-link-external text-lg'></i>
                            </a>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d255282.22153839213!2d125.04415814141673!3d1.472714400494451!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x328700d238b982bf%3A0x1d5f2f534346eb41!2sBitung%20City%2C%20North%20Sulawesi!5e0!3m2!1sen!2sid!4v1715243886561!5m2!1sen!2sid" width="100%" height="100%" style={{border:0}} allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade" className="relative z-10"></iframe>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* Facility Lightbox */}
            <AnimatePresence>
                {lightboxData && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        transition={{ duration: 0.25 }}
                        className="fixed inset-0 z-[100] flex items-center justify-center p-3 sm:p-4 md:p-10 pt-16 sm:pt-10 bg-black/92 backdrop-blur-md"
                        onClick={() => setSelectedImg(null)}
                    >
                        <button
                            type="button"
                            onClick={() => setSelectedImg(null)}
                            className="absolute top-3 right-3 sm:top-5 sm:right-5 md:top-8 md:right-8 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 border border-white/20 text-white hover:bg-gold hover:text-navy-900 hover:border-gold transition-all z-10 flex items-center justify-center"
                            aria-label="Close"
                        >
                            <i className='bx bx-x text-2xl'></i>
                        </button>
                        <motion.div
                            initial={{ opacity: 0, scale: 0.9 }}
                            animate={{ opacity: 1, scale: 1 }}
                            exit={{ opacity: 0, scale: 0.9 }}
                            transition={{ type: 'spring', stiffness: 260, damping: 24 }}
                            className="relative max-w-6xl w-full max-h-[85vh] sm:max-h-[90vh] flex flex-col items-center px-2"
                            onClick={(e) => e.stopPropagation()}
                        >
                            <img
                                src={lightboxData.src}
                                data-fallback={lightboxData.fallback || ''}
                                alt={lightboxData.title || 'Preview'}
                                onError={handleFacilityImgError}
                                className="max-w-full max-h-[70vh] sm:max-h-[80vh] w-auto h-auto object-contain rounded-xl sm:rounded-2xl shadow-[0_25px_80px_rgba(0,0,0,0.6)] border border-gold/20"
                            />
                            {lightboxData.title && (
                                <p className="mt-4 sm:mt-6 font-serif text-base sm:text-xl md:text-2xl text-white text-center px-2">{lightboxData.title}</p>
                            )}
                        </motion.div>
                    </motion.div>
                )}
            </AnimatePresence>

            {/* FOOTER */}
            <footer className="bg-[#020305] border-t border-white/5 pt-20 pb-10 relative z-10 text-center">
                <img src="assets/img/logo_perusahaan.jpg" alt="ASB Logo" className="w-32 h-auto mx-auto rounded-2xl mb-8 drop-shadow-[0_0_20px_rgba(239,198,104,0.5)] hover:scale-110 transition-transform duration-700" onError={(e) => { e.target.style.display='none'; e.target.nextSibling.style.display='flex' }} />
                <div className="hidden w-20 h-20 mx-auto rounded-full border border-gold/20 items-center justify-center font-serif text-gold font-bold text-4xl mb-8 bg-[#05070a] shadow-[0_0_30px_rgba(239,198,104,0.1)]">
                    A
                </div>
                <h2 className="text-gold tracking-[0.4em] text-sm font-bold mb-8">PT. ANUGRAH SEJATI BERSAMA</h2>
                <div className="flex justify-center gap-6 mb-12">
                    {[
                          {
                            name: 'facebook',
                            href: '#'
                          },
                          {
                            name: 'instagram',
                            href: 'https://www.instagram.com/anugrahsejati_bersama?igsh=MXN3ZnBqMHAzaXdkOQ%3D%3D&utm_source=qr'
                          },
                          {
                            name: 'linkedin',
                            href: '#'
                          }
                        ].map((social) => (
                          <a
                            key={social.name}
                            href={social.href}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-gray-400 hover:bg-gold hover:text-navy-900 hover:border-gold transition-all duration-300"
                          >
                            <i className={`bx bxl-${social.name} text-xl`}></i>
                          </a>
                        ))}
                </div>
                <p className="text-gray-600 text-xs tracking-[0.1em] uppercase">&copy; {new Date().getFullYear()} Premium Seafood Export. All Rights Reserved.</p>
            </footer>

            {/* Floating WA Button */}
            <a href="https://wa.me/6285340069944" target="_blank" rel="noreferrer" className="fixed bottom-5 right-4 sm:bottom-8 sm:right-8 w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-tr from-[#128C7E] to-[#25D366] text-white rounded-full flex items-center justify-center text-2xl sm:text-3xl shadow-[0_10px_30px_rgba(37,211,102,0.4)] hover:scale-110 hover:shadow-[0_15px_40px_rgba(37,211,102,0.6)] transition-all z-50 float-anim border border-white/20">
                <i className='bx bxl-whatsapp'></i>
            </a>
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);