/**
 * AIRSTAR Hotel App - Complete Fixed Version
 * Path: /wp-content/themes/airstar-theme/js/app.js
 */

(function() { 

    // --- エラーハンドリング ---
    function forceRemoveLoader() {
        const loader = document.getElementById('initial-loader');
        if (loader) {
            loader.style.opacity = '0';
            setTimeout(function() { 
                if(loader.parentNode) loader.parentNode.removeChild(loader); 
            }, 500);
        }
    }
    setTimeout(forceRemoveLoader, 4000);

    try {
        const { useState, useEffect, useRef, useMemo } = React;
        const { createRoot } = ReactDOM;

        // --- 1. 環境設定 ---
        const wpData = window.airstarData || {};
        const themePath = wpData.themePath || '';
        const imgBase = themePath ? themePath.replace(/\/$/, '') + '/images/' : 'images/';
        const logoFileName = 'AIRSTAR_ロゴのみ透過.png'; 

        const dynamicNews = wpData.news || [];
        const dynamicExperiences = wpData.experiences || [];
        const dynamicProperties = wpData.properties || [];
        const dynamicFaqs = wpData.faqs || [];

        // --- 2. アイコン ---
        const Icons = {
            ChevronLeft: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>,
            ChevronRight: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>,
            ChevronDown: () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>,
            X: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>,
            Check: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
            MapPin: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>,
            ArrowRight: () => <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>,
            Calendar: () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>,
            Zoom: () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>,
            // カテゴリアイコン
            Kitchen: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>,
            Tv: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="15" x="2" y="7" rx="2" ry="2"/><polyline points="17 2 12 7 7 2"/></svg>,
            Family: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12h.01"/><path d="M15 12h.01"/><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/></svg>,
            Bath: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6 6.5 3.5a1.5 1.5 0 0 0-1-1h-5a.5.5 0 0 0-.5.5v13h6v-5"/><line x1="6" x2="6" y1="12" y2="19"/><path d="M10 19h12v-2a3 3 0 0 0-3-3H9"/></svg>,
            Laundry: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><circle cx="12" cy="13" r="5"/><path d="M12 18a2.5 2.5 0 0 0 0-5"/><path d="M8 6h.01"/></svg>,
            Safety: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>,
            Car: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect width="16" height="10" x="4" y="9" rx="2"/><path d="M9 9V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1-1v5"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>,
            Wind: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"/><path d="M9.6 4.6A2 2 0 1 1 11 8H2"/><path d="M12.6 19.4A2 2 0 1 0 14 16H2"/></svg>,
            Utensils: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>,
            Coffee: () => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line x1="6" x2="6.01" y1="2" y2="2"/><line x1="10" x2="10.01" y1="2" y2="2"/><line x1="14" x2="14.01" y1="2" y2="2"/></svg>,
            User: () => <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
            Home: () => <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
            Bed: () => <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 4v16"/><path d="M2 8h18a2 2 0 0 1 2 2v10"/><path d="M2 17h20"/><path d="M6 8v9"/></svg>,
            Tag: () => <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg>,
        };

        // --- 3. データセット (完全版) ---
        const manualProperties = [
            // ==========================================
            // 1件目：Second
            // ==========================================
            { 
                id: 'second', 
                type: 'special',
                region: 'FUKUOKA', 
                name: 'AIRSTAR HOTEL Second', 
                subtitle: '最大25名宿泊OK。福岡の中心に佇む177㎡・3階建て大型貸切邸宅', 
                description: '「みんなで集まれる場所が欲しかった」というゲストの願いを叶えるために生まれた宿。博多・天神が徒歩圏内という圧倒的な利便性を持ちながら、一体感と安心感を両立。ReFaの最新美容家電や計4ヶ所のトイレなど、大人数の滞在でもストレスのない空間を提供します。',
                images: [
                    imgBase + "hero-1.avif", 
                    imgBase + "hero-2.avif", 
                    imgBase + "hero-3.jpeg", 
                    imgBase + "hero-4.jpeg"
                ], 
                stats: { sqm: '177㎡', layout: '7LDK', beds: '15台', capacity: '25名' },
                beds24_url: 'https://beds24.com/booking2.php?propid=271480', 
                sidebarImg: imgBase + "detail-sidebar.avif", 
                feature: {
                    title: '極上の休息をお約束する、上質な寝室空間', 
                    description: '最大25名様でご宿泊いただける大型邸宅でありながら、お一人おひとりの「くつろぎ」を大切にした空間設計。\n落ち着いたトーンで統一されたメインベッドルームをはじめ、ゆとりある上質なベッドが旅の疲れを優しく包み込みます。大人数でのご滞在でも、ワンランク上の安らぎをお楽しみください。', 
                    image: imgBase + "mainbed.jpg" 
                },
                access: {
                    address: '〒810-0003 福岡県福岡市中央区春吉1丁目15-1',
                    mapLink: 'https://www.google.com/maps/search/?api=1&query=AIRSTAR+HOTEL+Second+〒810-0003+福岡県福岡市中央区春吉1丁目15-1',
                    transport: ['福岡市地下鉄七隈線「渡辺通駅」2番出口から徒歩約4分', '西鉄バス「柳橋」バス停から徒歩約1分']
                },
                rooms: [
                    { title: 'LIVING & DINING', area: '1F Common Space', bedInfo: '65型TV / ソファ / ダイニング', gallery: [imgBase + "living.avif", imgBase + "living-2.avif", imgBase + "living-3.avif", imgBase + "living-4.avif"] },
                    { title: 'VENUS (金星)', area: "1F Kids Room", bedInfo: 'ソファベッド/布団 (プレイルーム)', gallery: [imgBase + "room-venus.avif", imgBase + "room-venus-2.avif", imgBase + "room-venus-3.avif"] },
                    { title: 'EARTH (地球)', area: '1F Bedroom', bedInfo: 'ダブルベッド×1 (定員2名)', gallery: [imgBase + "room-earth.jpeg", imgBase + "room-earth-3.jpeg", imgBase + "room-earth-2.avif"] },
                    { title: 'MERCURY (水星)', area: '2F Bedroom', bedInfo: 'ダブルベッド×1 (定員2名)', gallery: [imgBase + "room-mercury.avif", imgBase + "room-mercury-2.jpeg", imgBase + "room-mercury-4.jpeg", imgBase + "room-mercury-3.avif"] },
                    { title: 'JUPITER (木星)', area: '2F Large Room', bedInfo: 'ダブル×4 + ベビー (定員8名+幼児)', gallery: [imgBase + "room-jupiter.jpeg", imgBase + "room-jupiter-2.jpeg", imgBase + "room-jupiter-5.jpeg", imgBase + "room-jupiter-3.jpeg", imgBase + "room-jupiter-4.jpeg"] },
                    { title: 'SATURN (土星)', area: '2F Bedroom', bedInfo: 'シングル×5 (定員5名)', gallery: [imgBase + "room-saturn.avif", imgBase + "room-saturn-2.jpeg"] },
                    { title: 'MARS (火星)', area: '3F Bedroom', bedInfo: 'ダブル×3 (定員6名)', gallery: [imgBase + "room-mars.avif", imgBase + "room-mars-2.jpeg", imgBase + "room-mars-3.jpeg", imgBase + "room-mars-4.jpeg"] },
                    { title: 'NEPTUNE (海王星)', area: '3F Bedroom', bedInfo: 'ダブル×1 (定員2名)', gallery: [imgBase + "room-neptune.jpeg", imgBase + "room-neptune-3.jpeg", imgBase + "room-neptune-2.avif"] },
                    {
                        title: 'KITCHEN', area: 'Kitchen', bedInfo: '充実設備のフルキッチン',
                        gallery: [imgBase + "second-kitchen-1.avif", imgBase + "second-kitchen-2.avif", imgBase + "second-kitchen-3.avif", imgBase + "second-kitchen-4.avif", imgBase + "second-kitchen-5.avif", imgBase + "second-kitchen-6.avif"]
                    },
                    {
                        title: 'BATH & BEAUTY', area: 'Bath Room', bedInfo: 'ReFa製品完備で癒しの時間を',
                        gallery: [imgBase + "second-bath-1.avif", imgBase + "second-bath-2.avif", imgBase + "second-bath-3.avif", imgBase + "second-bath-4.avif", imgBase + "second-bath-5.avif", imgBase + "second-bath-6.avif", imgBase + "second-bath-7.avif", imgBase + "second-bath-8.avif"]
                    },
                    {
                        title: 'EXTERIOR', area: 'Exterior', bedInfo: '無料駐車場2台完備',
                        gallery: [imgBase + "second-exterior-1.jpg", imgBase + "second-exterior-2.jpg"]
                    }
                ],
                amenitiesList: [
                    { id: 'kitchen', image: imgBase + 'second-amenity-kitchen.avif', title: 'Kitchen & Dining', subtitle: 'キッチンとダイニング', icon: 'Kitchen', desc: 'ゲストが料理できる充実のスペース', details: ['フルキッチン', 'IHコンロ', '冷蔵庫', '冷凍庫', '電子レンジ', '電気ポット', '炊飯器', '基本的な調理器具 (鍋・フライパン)', '油・塩・こしょう', '食器＆カトラリー (ボウル、箸、皿、カップなど)', 'ワイングラス'] },
                    { id: 'entertainment', image: imgBase + 'second-amenity-ent.avif', title: 'Entertainment', subtitle: 'エンタメ・通信', icon: 'Tv', desc: '65型TVと高速ネット環境', details: ['65型ハイビジョンテレビ', 'Nintendo Switch', 'Netflix', 'Amazon Prime Video', '標準ケーブルテレビ', 'Wi-Fi (高速光回線)'] },
                    { id: 'family', image: imgBase + 'second-amenity-family.avif', title: 'For Family', subtitle: 'ファミリー向け', icon: 'Family', desc: 'お子様連れでも安心の設備', details: ['ベビーベッド', 'ベビーチェア', 'ベビーバス', '子ども用食器', '子供用プレイルーム (屋内)', '子ども向けの本・おもちゃ'] },
                    { id: 'bath', image: imgBase + 'second-amenity-bath.jpeg', title: 'Bath & Toiletary', subtitle: 'バスルーム', icon: 'Bath', desc: 'ReFa製品で癒やしの時間を', details: ['バスタブ (2箇所)', 'ReFa シャワーヘッド', 'ReFa ヘアドライヤー (3台)', 'ReFa ヘアアイロン (2台)', 'ウォシュレット (トイレ4箇所)', 'シャンプー', 'コンディショナー', 'ボディソープ', 'シャワージェル', '給湯システム', '清掃用品'] },
                    { id: 'laundry', image: imgBase + 'second-amenity-laundry.avif', title: 'Bedroom & Laundry', subtitle: '寝室とランドリー', icon: 'Laundry', desc: '長期滞在も快適な設備', details: ['洗濯機', '無料乾燥機 (室内)', '衣類収納スペース', 'ハンガー', 'シーツ類', '遮光カーテン'] },
                    { id: 'comfort', image: imgBase + 'second-amenity-comfort.avif', title: 'Comfort', subtitle: '冷暖房', icon: 'Wind', desc: '一年中快適な室温管理', details: ['エアコン', '暖房 (ダクトレス式個別空調)'] },
                    { id: 'safety', image: imgBase + 'second-amenity-safety.avif', title: 'Home Safety', subtitle: 'ホームセーフティ', icon: 'Safety', desc: '安心・安全のセキュリティ', details: ['防犯・監視カメラ (屋外・共用部)', 'スマートロック', '一酸化炭素検知器', '火災報知器', '消火器'] },
                    { id: 'parking', image: imgBase + 'second-amenity-parking.avif', title: 'Parking', subtitle: '駐車場', icon: 'Car', desc: '敷地内無料駐車場', details: ['敷地内住宅用無料駐車場 : 2台分'] },
                ],
                floor_plans: [
                    { level: '1F', img: imgBase + "floor-1f.avif" },
                    { level: '2F', img: imgBase + "floor-2f.avif" },
                    { level: '3F', img: imgBase + "floor-3f.avif" }
                ]
            },
            // ==========================================
            // 2件目：別府本邸
            // ==========================================
            {
                id: 'beppu-hontei',
                type: 'special',
                region: 'OITA',
                name: 'AIRSTAR 別府本邸',
                subtitle: '非日常と遊び心を融合した、遊べる宿泊体験。',
                description: '「遊べる宿泊体験」をコンセプトに、大人も子供も胸が高鳴る空間をデザインしました。\n秘密の扉の先に広がる滑り台付きのキッズスペースや、プロジェクターで映画やライブ映像を楽しめる屋根裏の秘密基地シアター、そして別府の街並みを望みながらチルな時間を過ごせる開放的なルーフトップテラス。\nホテルでは味わえない、一棟まるごとがエンターテインメントになる特別な滞在を提供します。',
                images: [
                    imgBase + "beppu/hero-1.jpg",
                    imgBase + "beppu/hero-3.jpg",
                    imgBase + "beppu/dining-1.jpg",
                    imgBase + "beppu/exterior-1.jpg" 
                ],
                stats: { sqm: '120㎡', layout: '3LDK+', beds: '5台', capacity: '13名', price: '¥45,000〜' },
                beds24_url: 'https://beds24.com/booking.php?propid=311853&type=0', 
                sidebarImg: imgBase + "beppu/sidebar.jpg",
                feature: {
                    title: '一棟まるごとが遊び場に。非日常のエンタメ空間', 
                    description: '隠し扉の先に広がる滑り台付きのキッズルームや、大画面で映画を楽しめる屋根裏の秘密基地シアター。\nそして別府の空を感じるルーフトップテラスなど、大人も子供も夢中になれる「遊べる宿泊体験」をデザインしました。',
                    image: imgBase + "beppu/hero-3.jpg" 
                },
                access: {
                    address: '〒874-0938 大分県別府市末広町9-4', 
                    mapLink: 'https://www.google.com/maps/search/?api=1&query=大分県別府市末広町9-4',
                    transport: ['JR日豊本線「別府駅」から徒歩圏内', '東九州自動車道「別府IC」より車で約15分']
                },
                rooms: [
                    {
                        title: 'SECRET THEATER', area: 'Loft Space', bedInfo: 'Ankerプロジェクター完備の秘密基地',
                        gallery: [
                            imgBase + "beppu/loft-1.jpg", 
                            imgBase + "beppu/loft-2.jpg", 
                            imgBase + "beppu/loft-3.jpg"
                        ]
                    },
                    {
                        title: 'KIDS PARADICE', area: 'Hidden Room', bedInfo: '隠し扉 / 滑り台 / こたつ完備',
                        gallery: [
                            imgBase + "beppu/kids-1.jpg", 
                            imgBase + "beppu/kids-2.jpg", 
                            imgBase + "beppu/kids-3.jpg", 
                            imgBase + "beppu/kids-4.jpg", 
                            imgBase + "beppu/kids-5.jpg"
                        ]
                    },
                    {
                        title: 'ROOFTOP TERRACE', area: 'Roof Top', bedInfo: 'chillな時間を過ごす開放的な屋上空間',
                        gallery: [
                            imgBase + "beppu/roof-1.jpg",
                            imgBase + "beppu/roof-2.jpg",
                            imgBase + "beppu/roof-3.jpg",
                            imgBase + "beppu/roof-4.jpg",
                            imgBase + "beppu/roof-5.jpg",
                            imgBase + "beppu/roof-6.jpg"
                        ]
                    },
                    {
                        title: 'MAIN BEDROOMS', area: '1F-2F Bedrooms', bedInfo: 'ダブルベッド計5台＋シングル1台',
                        gallery: [
                            imgBase + "beppu/room-1.jpg", 
                            imgBase + "beppu/room-2.jpg", 
                            imgBase + "beppu/room-3.jpg"
                        ]
                    },
                    {
                        title: 'BATH & BEAUTY', area: 'Bath Room', bedInfo: 'ReFa製品完備で癒しの時間を',
                        gallery: [
                            imgBase + "beppu/bath-1.jpg",
                            imgBase + "beppu/bath-2.jpg",
                            imgBase + "beppu/bath-3.jpg",
                            imgBase + "beppu/bath-4.jpg",
                            imgBase + "beppu/bath-5.jpg",
                            imgBase + "beppu/bath-6.jpg"
                        ]
                    },
                    {
                        title: 'KITCHEN', area: 'Kitchen', bedInfo: 'BALMUDA製家電で揃えたフルキッチン',
                        gallery: [
                            imgBase + "beppu/kitchen-1.jpg",
                            imgBase + "beppu/kitchen-2.jpg",
                            imgBase + "beppu/kitchen-3.jpg",
                            imgBase + "beppu/kitchen-4.jpg",
                            imgBase + "beppu/kitchen-5.jpg",
                            imgBase + "beppu/kitchen-6.jpg",
                            imgBase + "beppu/kitchen-7.jpg",
                            imgBase + "beppu/kitchen-8.jpg",
                            imgBase + "beppu/kitchen-9.jpg",
                            imgBase + "beppu/kitchen-10.jpg"
                        ]
                    },
                    {
                        title: 'DINING & LIVING', area: 'Dining', bedInfo: '大人数で囲める広々としたダイニング',
                        gallery: [
                            imgBase + "beppu/dining-1.jpg",
                            imgBase + "beppu/dining-2.jpg",
                            imgBase + "beppu/dining-3.jpg",
                            imgBase + "beppu/dining-4.jpg",
                            imgBase + "beppu/dining-5.jpg",
                            imgBase + "beppu/dining-6.jpg"
                        ]
                    },
                    {
                        title: 'EXTERIOR', area: 'Exterior', bedInfo: '無料駐車場3台完備',
                        gallery: [
                            imgBase + "beppu/exterior-1.jpg",
                            imgBase + "beppu/exterior-2.jpg",
                            imgBase + "beppu/exterior-3.jpg"
                        ]
                    }
                ],
                amenitiesList: [
                    {
                        id: 'entertainment', image: imgBase + "beppu/amenity-tv.avif", title: 'Entertainment', subtitle: 'エンタメ設備', icon: 'Tv', desc: '屋根裏シアターと高速Wi-Fi',
                        details: ['Ankerプロジェクター', '100インチ級スクリーン体験', '高速Wi-Fi', 'Netflix/YouTube対応']
                    },
                    {
                        id: 'family', image: imgBase + "beppu/amenity-family.avif", title: 'For Family', subtitle: 'キッズ＆ファミリー', icon: 'Family', desc: '隠し扉と滑り台のある遊び場',
                        details: ['造作滑り台', '隠し扉仕掛け', 'キッズスペース', 'こたつ（冬季）', '子供用食器']
                    },
                    {
                        id: 'bath', image: imgBase + "beppu/amenity-bath.avif", title: 'Bath & Beauty', subtitle: '美容とバスタイム', icon: 'Bath', desc: 'ReFa製品を完備した贅沢な時間',
                        details: ['ReFa シャワーヘッド', 'ReFa ドライヤー', 'ReFa ヘアアイロン', 'バスルーム×2', 'トイレ×2']
                    },
                    {
                        id: 'kitchen', image: imgBase + "beppu/amenity-kitchen.avif", title: 'Kitchen', subtitle: 'キッチン家電', icon: 'Kitchen', desc: 'BALMUDA製家電で揃えたキッチン',
                        details: ['BALMUDA 電子レンジ', 'BALMUDA ケトル', 'フルキッチン', '大型冷蔵庫', '調理器具一式']
                    },
                    {
                        id: 'exterior', image: imgBase + "beppu/amenity-exterior.avif", title: 'Exterior', subtitle: '駐車場', icon: 'Car', desc: '敷地内無料駐車場を完備',
                        details: ['無料駐車場2台完備']
                    },
                    {
                        id: 'plumbing', image: imgBase + "beppu/amenity-plumbing.avif", title: 'Plumbing', subtitle: '水回り設備', icon: 'Bath', desc: '清潔で使いやすいサニタリー',
                        details: ['お風呂', 'トイレ', '洗面台']
                    }
                ],
                floor_plans: [
                    { level: '全体', img: imgBase + "beppu/floor.avif" }
                ]
            },
            // ==========================================
            // 新規追加1：HOTEL STAR RESIDENCE（福岡・上呉服町）
            // ==========================================
            {
                id: 'star-residence-1',
                type: 'special',
                region: 'FUKUOKA',
                name: 'HOTEL STAR RESIDENCE', 
                subtitle: '福岡の歴史と利便性を兼ね備えた上呉服町での快適な滞在。', 
                description: 'ツインルームから最大6名様まで宿泊可能な広々としたお部屋まで、多様なニーズにお応えします。博多駅や繁華街へのアクセスも抜群で、ビジネスにも観光にも最適なロケーションです。', 
                images: [
                    imgBase + "star1/hero-1.avif", 
                    imgBase + "star1/hero-2.jpg",
                    imgBase + "star1/hero-3.avif",
                    imgBase + "star1/hero-4.avif" 
                ],
                stats: { sqm: '25〜40㎡', layout: '1R / 1LDK', beds: '2〜4台', capacity: '2〜6名', price: 'Check' }, 
                beds24_url: 'https://beds24.com/booking.php?propid=230547&type=0&referer=BookingButton', 
                sidebarImg: imgBase + "star1/hero-1.avif",
                feature: {
                    title: '少人数からグループまで対応可能な多様なお部屋', 
                    description: 'コンパクトで使い勝手の良いツインルームから、ご家族やご友人とゆったり過ごせる最大6名様用の広々としたお部屋まで、滞在スタイルに合わせてお選びいただけます。', 
                    image: imgBase + "star1/feature.avif"
                },
                access: {
                    address: '〒812-0036 福岡県福岡市博多区上呉服町9-6', 
                    mapLink: 'https://www.google.com/maps/search/?api=1&query=〒812-0036+福岡県福岡市博多区上呉服町9-6', 
                    transport: ['地下鉄箱崎線「呉服町駅」徒歩圏内'] 
                },
                rooms: [
                    {
                        title: 'FULL KITCHEN', area: '客室', bedInfo: 'フルキッチン', 
                        gallery: [imgBase + "star1/room-kitchen-1.avif", imgBase + "star1/room-kitchen-2.avif"]
                    },
                    {
                        title: 'DINING', area: '客室', bedInfo: 'ダイニング', 
                        gallery: [imgBase + "star1/room-dining-1.avif"]
                    },
                    {
                        title: 'TWIN BEDROOM', area: '客室', bedInfo: '使い勝手の良いツインルーム', 
                        gallery: [imgBase + "star1/room-bed-twin-1.avif", imgBase + "star1/room-bed-twin-2.avif"]
                    },
                    {
                        title: 'FULL BATHROOM', area: '客室', bedInfo: 'フルバスルーム', 
                        gallery: [imgBase + "star1/room-bath-1.avif"] 
                    },
                    {
                        title: 'LAUNDRY', area: '客室', bedInfo: 'ランドリーエリア', 
                        gallery: [imgBase + "star1/room-laundry-1.avif"] 
                    },
                    {
                        title: 'EXTERIOR', area: '客室', bedInfo: 'エクステリア・その他', 
                        gallery: [imgBase + "star1/room-exterior-1.avif", imgBase + "star1/room-exterior-2.avif", imgBase + "star1/room-exterior-3.avif"] 
                    }
                ],
                amenitiesList: [
                    {
                        id: 'kitchen', image: imgBase + "star1/amenity-kitchen.avif", title: 'Kitchen & Dining', subtitle: 'キッチンとダイニング', icon: 'Kitchen', desc: '自炊に便利なフルキッチン完備', 
                        details: ['フルキッチン', '冷蔵庫', '電子レンジ', 'ガスコンロ', 'ケトル', '炊飯器', 'コーヒー', '基本的な調理器具 (鍋・フライパンなど)', '食器・カトラリー'] 
                    },
                    {
                        id: 'bath', image: imgBase + "star1/amenity-bath.avif", title: 'Bath Room', subtitle: 'バスルーム', icon: 'Bath', desc: 'ゆったりくつろげるバスルーム', 
                        details: ['バスタブ', 'ヘアドライヤー', 'シャンプー・コンディショナー', 'ボディソープ', 'ウォシュレット', '給湯システム', '清掃用品'] 
                    },
                    {
                        id: 'laundry', image: imgBase + "star1/amenity-laundry.avif", title: 'Bedroom & Laundry', subtitle: '寝室とランドリー', icon: 'Laundry', desc: '長期滞在でも快適な設備', 
                        details: ['洗濯機', '無料乾燥機 (室内)', 'タオル・シーツ類・石鹸', 'ハンガー・衣類用乾燥ラック', 'アイロン', '衣類収納 (クローゼット)', '遮光カバー'] 
                    },
                    {
                        id: 'comfort', image: imgBase + "star1/amenity-comfort.avif", title: 'Comfort & Ent.', subtitle: '快適な滞在・エンタメ', icon: 'Tv', desc: '充実の室内設備とネット環境', 
                        details: ['エアコン・暖房', 'テレビ', '無料Wi-Fi', '仕事専用スペース'] 
                    },
                    {
                        id: 'facilities', image: imgBase + "star1/amenity-exterior.avif", title: 'Facilities & Services', subtitle: '施設・サービス', icon: 'Safety', desc: '安心のセキュリティとサービス', 
                        details: ['スマートロック (セルフチェックイン)', 'エレベーター完備', '荷物預かりOK', '長期滞在OK (28泊以上)', 'ベビーバス (リクエスト制)', '防犯カメラ・火災報知器・消火器'] 
                    }
                ],
                floor_plans: [
                    // ※まだ間取り図画像がないため、一旦空にしてあります。
                    // 必要な場合は後日追加してください。
                ]
            },
            // ==========================================
            // 新規追加2：STAR RESIDENCE Ⅱ（福岡・春吉）
            // ==========================================
            {
                id: 'star-residence-2',
                type: 'special',
                region: 'FUKUOKA',
                name: 'STAR RESIDENCE Ⅱ', 
                subtitle: '天神・博多へのアクセス抜群。春吉エリアのマンション型ホテル。', 
                description: '【当ホテルについて】\nこちらはマンションの1フロアをホテルとして運営しており、同じフロアに全部で6部屋ございます。\n※部屋によって家具や間取りが多少異なります。掲載写真は各部屋タイプの一例となり、基本お部屋の指定はできませんのでご了承ください。\n客室内は丸ごと貸切となり、自由にご利用いただけます。\n\n【注意事項・ルール】\n・パジャマや浴衣のご用意はございません。ご持参をお願いいたします。\n・18歳以下の未成年のみでのご宿泊はご遠慮いただいております。\n・室内および施設周辺は全面禁煙です。\n・滞在中の途中清掃サービスはございません。洗濯機をご活用ください。\n・専用駐車場はございませんので、近隣のコインパーキングをご利用ください。', 
                images: [
                    imgBase + "star2/hero-1.avif",
                    imgBase + "star2/hero-2.avif",
                    imgBase + "star2/hero-3.avif",
                    imgBase + "star2/hero-4.avif" 
                ],
                stats: { sqm: '約30㎡', layout: '1LDK', beds: '2〜3台', capacity: '4名', price: 'Check' }, 
                beds24_url: 'https://beds24.com/booking.php?propid=276257&type=0&referer=BookingButton', 
                sidebarImg: imgBase + "star2/hero-1.avif", 
                feature: {
                    title: '抜群の立地と快適な空間', 
                    description: '① 博多駅・天神駅までタクシーで5分、徒歩20分の中心地！中洲エリアや空港へのアクセスも良好です。\n② 落ち着いたインテリアと清潔感ある空間。高速Wi-Fiやデスク、キッチン・洗濯機も完備し長期滞在にも対応。\n③ 周辺に市場、コンビニ、飲食店が充実。川沿いの散歩も楽しめます。', 
                    image: imgBase + "star2/hero-2.avif" 
                },
                access: {
                    address: '〒810-0003 福岡県福岡市中央区春吉1-5-1', 
                    mapLink: 'https://www.google.com/maps/search/?api=1&query=〒810-0003+福岡県福岡市中央区春吉1-5-1', 
                    transport: ['地下鉄七隈線「渡辺通駅」徒歩圏内'] 
                },
                rooms: [
                    {
                        title: 'GUEST ROOMS', area: '客室一例', bedInfo: '家具や間取りは部屋により異なります', 
                        gallery: [
                            imgBase + "star2/room-1.avif", imgBase + "star2/room-2.avif", imgBase + "star2/room-3.avif", imgBase + "star2/room-4.avif", imgBase + "star2/room-5.avif",
                            imgBase + "star2/room-6.avif", imgBase + "star2/room-7.avif", imgBase + "star2/room-8.avif", imgBase + "star2/room-9.avif", imgBase + "star2/room-10.avif"
                        ] 
                    },
                    {
                        title: 'BATH ROOM', area: 'バスルーム', bedInfo: '清潔なバスルーム', 
                        gallery: [
                            imgBase + "star2/room-bath-1.avif", imgBase + "star2/room-bath-2.avif", imgBase + "star2/room-bath-3.avif", imgBase + "star2/room-bath-4.avif", imgBase + "star2/room-bath-5.avif",
                            imgBase + "star2/room-bath-6.avif", imgBase + "star2/room-bath-7.avif", imgBase + "star2/room-bath-8.avif", imgBase + "star2/room-bath-9.avif", imgBase + "star2/room-bath-10.avif", imgBase + "star2/room-bath-11.avif"
                        ] 
                    },
                    {
                        title: 'KITCHEN', area: 'キッチン', bedInfo: '自炊可能なキッチン', 
                        gallery: [
                            imgBase + "star2/room-kitchen-1.avif", imgBase + "star2/room-kitchen-2.avif", imgBase + "star2/room-kitchen-3.avif", imgBase + "star2/room-kitchen-4.avif", imgBase + "star2/room-kitchen-5.avif",
                            imgBase + "star2/room-kitchen-6.avif", imgBase + "star2/room-kitchen-7.avif", imgBase + "star2/room-kitchen-8.avif", imgBase + "star2/room-kitchen-9.avif", imgBase + "star2/room-kitchen-10.avif"
                        ] 
                    },
                    {
                        title: 'LAUNDRY', area: 'ランドリー', bedInfo: '洗濯機完備', 
                        gallery: [
                            imgBase + "star2/room-laundry-1.avif", imgBase + "star2/room-laundry-2.avif"
                        ] 
                    },
                    {
                        title: 'EXTERIOR', area: '外観', bedInfo: '施設の外観', 
                        gallery: [
                            imgBase + "star2/room-exterior-1.avif"
                        ] 
                    }
                ],
                amenitiesList: [
                    {
                        id: 'kitchen', image: imgBase + "star2/room-kitchen-1.avif", title: 'Kitchen & Dining', subtitle: 'キッチンとダイニング', icon: 'Kitchen', desc: '自炊に便利な設備が揃ったキッチン', 
                        details: ['キッチン', '冷蔵庫', '電子レンジ', 'コンロ', '電気ポット', 'キッチン用品'] 
                    },
                    {
                        id: 'bath', image: imgBase + "star2/room-bath-1.avif", title: 'Bath Room', subtitle: 'バスルーム', icon: 'Bath', desc: '清潔でリラックスできる専用バスルーム', 
                        details: ['専用バスルーム', 'バスタブ', 'シャワー', 'トイレ (ビデ付き)', 'ヘアドライヤー', '無料バスアメニティ', 'タオル・トイレットペーパー', 'スリッパ'] 
                    },
                    {
                        id: 'laundry', image: imgBase + "star2/room-laundry-1.avif", title: 'Bedroom & Laundry', subtitle: '寝室とランドリー', icon: 'Laundry', desc: '快適な睡眠と長期滞在をサポート', 
                        details: ['洗濯機', 'リネン類'] 
                    },
                    {
                        id: 'comfort', image: imgBase + "star2/room-1.avif", title: 'Comfort & Ent.', subtitle: '快適な滞在・エンタメ', icon: 'Tv', desc: '充実の室内設備とネット環境', 
                        details: ['エアコン・暖房', '無料Wi-Fi (全域)', '薄型テレビ', '全館禁煙・禁煙ルーム'] 
                    },
                    {
                        id: 'facilities', image: imgBase + "star2/room-exterior-1.avif", title: 'Facilities & Security', subtitle: '施設・セキュリティ', icon: 'Safety', desc: '安心のセキュリティと館内設備', 
                        details: ['鍵で入室', 'エレベーター利用可', 'バルコニー・テラス', '消火器・火災警報器', '領収書発行可能', 'スタッフ対応 (英語/日本語)', '※駐車場なし'] 
                    }
                ],
                floor_plans: [
                    // ※まだ間取り図画像がないため、一旦空にしてあります。
                    // 必要な場合は後日追加してください。
                ]
            },
            // ==========================================
            // 新規追加3：Hotel Star Residence Ⅲ WEST（福岡・今宿）
            // ==========================================
            {
                id: 'star-residence-3-west',
                type: 'special',
                region: 'FUKUOKA',
                name: 'Hotel Star Residence Ⅲ WEST', 
                subtitle: '海風を感じる今宿。ペットと一緒に過ごせるシアタールーム完備の宿。', 
                description: '【当ホテルについて】\n大切な家族であるペットと一緒に宿泊可能なレジデンス型ホテルです。海まで歩いてすぐの好立地で、糸島エリアへの観光拠点としても最適です。\n\n【お部屋の特長】\nお部屋には大型プロジェクターを完備しており、プライベートシアターとして映画鑑賞などを大画面でお楽しみいただけます。自炊可能なキッチンや洗濯機も備え、まるで暮らすようにくつろげる空間です。', 
                images: [
                    imgBase + "star3/hero-1.jpg", 
                    imgBase + "star3/hero-2.jpg",
                    imgBase + "star3/hero-3.jpg",
                    imgBase + "star3/hero-4.jpg" 
                ],
                stats: { sqm: '約30〜40㎡', layout: '1LDK', beds: '2〜3台', capacity: '5名', price: 'Check' }, 
                beds24_url: 'https://beds24.com/booking.php?propid=294197&type=0&referer=BookingButton', 
                sidebarImg: imgBase + "star3/hero-1.jpg",
                feature: {
                    title: '愛犬との旅行や、シアター体験を', 
                    description: 'ペットと一緒にリラックスできる専用空間をご用意。夜はプロジェクターの大画面で、ご家族や友人と特別な映画鑑賞のひとときをお楽しみください。充実した設備で長期滞在にも適しています。', 
                    image: imgBase + "star3/hero-2.jpg"
                },
                access: {
                    address: '〒819-0161 福岡県福岡市西区今宿東2-30-15 グランピア今宿2', 
                    mapLink: 'https://www.google.com/maps/search/?api=1&query=〒819-0161+福岡県福岡市西区今宿東2-30-15+グランピア今宿2', 
                    transport: ['JR筑肥線「今宿駅」から徒歩圏内'] 
                },
                rooms: [
                    {
                        title: 'THEATER LIVING', area: '客室', bedInfo: 'プロジェクター完備', 
                        gallery: [imgBase + "star3/room-living-1.jpg", imgBase + "star3/room-living-2.jpg", imgBase + "star3/room-living-3.jpg"] 
                    },
                    {
                        title: 'BEDROOM', area: '客室', bedInfo: 'ゆったり休めるベッドルーム', 
                        gallery: [imgBase + "star3/room-bed-1.jpg", imgBase + "star3/room-bed-2.jpg", imgBase + "star3/room-bed-3.jpg", imgBase + "star3/room-bed-4.jpg", imgBase + "star3/room-bed-5.jpg", imgBase + "star3/room-bed-6.jpg"] 
                    },
                    {
                        title: 'KITCHEN', area: 'キッチン', bedInfo: '自炊可能なキッチン', 
                        gallery: [imgBase + "star3/room-kitchen-1.jpg", imgBase + "star3/room-kitchen-2.jpg", imgBase + "star3/room-kitchen-3.jpg", imgBase + "star3/room-kitchen-4.jpg", imgBase + "star3/room-kitchen-5.jpg", imgBase + "star3/room-kitchen-6.jpg", imgBase + "star3/room-kitchen-7.jpg", imgBase + "star3/room-kitchen-8.jpg", imgBase + "star3/room-kitchen-9.jpg", imgBase + "star3/room-kitchen-10.jpg"] 
                    },
                    {
                        title: 'BATH ROOM', area: 'バスルーム', bedInfo: '清潔なバスルーム', 
                        gallery: [imgBase + "star3/room-bath-1.jpg", imgBase + "star3/room-bath-2.jpg", imgBase + "star3/room-bath-3.jpg", imgBase + "star3/room-bath-4.jpg", imgBase + "star3/room-bath-5.jpg"] 
                    },
                    {
                        title: 'PET FRIENDLY', area: 'ペット対応', bedInfo: 'ペット同伴可', 
                        gallery: [imgBase + "star3/room-pet-1.jpg", imgBase + "star3/room-pet-2.jpg", imgBase + "star3/room-pet-3.jpg", imgBase + "star3/room-pet-4.jpg", imgBase + "star3/room-pet-5.jpg", imgBase + "star3/room-pet-6.jpg", imgBase + "star3/room-pet-7.jpg", imgBase + "star3/room-pet-8.jpg", imgBase + "star3/room-pet-9.jpg", imgBase + "star3/room-pet-10.jpg"] 
                    }
                ],
                amenitiesList: [
                    {
                        id: 'entertainment', image: imgBase + "star3/room-living-1.jpg", title: 'Entertainment', subtitle: 'エンタメ・快適設備', icon: 'Tv', desc: '充実のネット環境と快適な室内', 
                        details: ['プロジェクター', '動画配信サービス（Netflixなど）', '無料Wi-Fi', 'エアコン・暖房', 'ベッド近くにコンセント', '衣類用ラック'] 
                    },
                    {
                        id: 'family_pet', image: imgBase + "star3/room-pet-1.jpg", title: 'Family & Pet', subtitle: 'ファミリー・ペット', icon: 'Family', desc: '大切な家族と一緒に過ごせる空間', 
                        details: ['ペット宿泊可（追加料金あり）', 'ファミリールーム'] 
                    },
                    {
                        id: 'kitchen', image: imgBase + "star3/room-kitchen-1.jpg", title: 'Kitchen & Dining', subtitle: 'キッチン・ダイニング', icon: 'Kitchen', desc: '自炊に必要な設備が充実', 
                        details: ['キッチン・コンロ', '冷蔵庫', '電子レンジ', '電気ポット', 'キッチン用品・食器類', 'ダイニングテーブル', '清掃用品'] 
                    },
                    {
                        id: 'bath_laundry', image: imgBase + "star3/room-bath-1.jpg", title: 'Bath & Laundry', subtitle: 'バス・ランドリー', icon: 'Bath', desc: '清潔で快適な水回り設備', 
                        details: ['専用バスルーム (バスタブ・シャワー)', 'ウォシュレット (ビデ)', '無料バスアメニティ・タオル・スリッパ', 'ヘアドライヤー', '洗濯機'] 
                    },
                    {
                        id: 'facilities', image: imgBase + "star3/hero-3.jpg", title: 'Facilities & Security', subtitle: '施設・セキュリティ', icon: 'Safety', desc: '安心のセキュリティと周辺設備', 
                        details: ['周辺エリア専用パーキング (要事前予約: ￥2,000/日)', 'バルコニー', '専用チェックイン / チェックアウト (鍵で入室)', '屋外に監視カメラ・火災警報器', '全館禁煙ルーム'] 
                    }
                ],
                floor_plans: [
                    { level: '1F', img: imgBase + "star3/floor.jpg" },
                    { level: '2F', img: imgBase + "star3/floor-2.jpg" }
                ]
            }
        ];

        const allProperties = [...manualProperties, ...dynamicProperties];

        const wpNews = dynamicNews.length > 0 ? dynamicNews : [ { id: 'd1', date: '2026.03.04', category: 'INFO', title: 'AIRSTAR 別府本邸がオープンしました', content: '別府に新しい体験型ヴィラが誕生しました。', link: '#' } ];
        const experienceData = dynamicExperiences.length > 0 ? dynamicExperiences : [ { id: 'd_exp', title: '観光案内なし', img: imgBase + "hero-1.avif", tags: [], size: 'normal' } ];
        const wpFaqs = dynamicFaqs.length > 0 ? dynamicFaqs : [ { q: "FAQなし", a: "" } ];
        const regionData = [ { name: 'FUKUOKA', label: '福岡' }, { name: 'KUMAMOTO', label: '熊本' }, { name: 'NAGASAKI', label: '長崎' }, { name: 'OITA', label: '大分' }, { name: 'SAGA', label: '佐賀' }, { name: 'KYOTO', label: '京都' } ];

        // --- 4. コンポーネント ---
        const FaqItem = ({ faq }) => {
          const [isOpen, setIsOpen] = useState(false);
          return (
            <div className="border-b border-slate-100">
              <button onClick={() => setIsOpen(!isOpen)} className="w-full py-6 flex items-center justify-between text-left group">
                <span className="text-base md:text-lg font-bold text-slate-800 group-hover:text-[#C5A059] transition-colors pr-8">Q. {faq.q}</span>
                <span className={`transform transition-transform duration-300 text-slate-300 ${isOpen ? 'rotate-180' : ''}`}><Icons.ChevronDown /></span>
              </button>
              <div className={`overflow-hidden transition-all duration-500 ease-in-out ${isOpen ? 'max-h-[500px] pb-8 opacity-100' : 'max-h-0 opacity-0'}`}>
                <div className="text-slate-500 leading-relaxed prose prose-slate max-w-none" dangerouslySetInnerHTML={{ __html: faq.a }} />
              </div>
            </div>
          );
        };

        const Navigation = ({ scrolled, onNavigate }) => {
          const [adminBarOffset, setAdminBarOffset] = useState(0);
          useEffect(() => { if (document.body.classList.contains('admin-bar')) setAdminBarOffset(32); }, []);
          const bgColor = scrolled ? 'bg-white/95 backdrop-blur-md shadow-sm border-b' : 'bg-transparent';
          return (
            <nav className={`fixed left-0 right-0 z-[100] transition-all duration-500 py-4 md:py-6 ${bgColor}`} style={{ top: `${adminBarOffset}px` }}>
              <div className="max-w-[1400px] mx-auto px-6 flex items-center justify-between">
                <div className="cursor-pointer font-serif text-xl font-bold tracking-widest text-[#1e3a8a]" onClick={() => onNavigate('home')}>
                     <img src={imgBase + logoFileName} alt="AIRSTAR" className={`h-10 md:h-12 w-auto transition-all ${scrolled ? 'brightness-100' : 'brightness-0 invert'}`} />
                </div>
                <div className="hidden lg:flex items-center gap-10">
                  {['concept', 'special', 'facilities', 'experience', 'news'].map(id => (
                    <button key={id} onClick={() => onNavigate(id)} className={`text-[10px] uppercase tracking-widest font-bold ${scrolled ? 'text-slate-900' : 'text-white'} opacity-70 hover:opacity-100`}>{id}</button>
                  ))}
                </div>
                <button className="bg-[#C5A059] text-white text-[10px] px-6 py-3 rounded-full font-bold uppercase shadow-lg transform hover:-translate-y-0.5 transition-all flex items-center gap-2"><Icons.Calendar /><span>Reservation</span></button>
              </div>
            </nav>
          );
        };

        // Bento Grid Gallery (部屋詳細)
        const GalleryModal = ({ data, onClose }) => {
          if (!data) return null;
          return (
            <div className="fixed inset-0 z-[1000] bg-white overflow-y-auto animate-in duration-300">
              <div className="sticky top-0 z-10 bg-white/95 backdrop-blur-md px-6 py-4 md:py-6 flex items-center justify-between border-b shadow-sm">
                <div className="flex-1">
                  <p className="text-[10px] tracking-widest text-[#C5A059] uppercase font-bold mb-1">{data.area || 'Gallery'}</p>
                  <div className="flex flex-col md:flex-row md:items-center gap-3">
                    <h4 className="text-xl md:text-2xl font-serif text-[#1e3a8a] uppercase font-bold leading-none">{data.title}</h4>
                    {data.bedInfo && (
                      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-[#C5A059]/40 bg-[#C5A059]/5 text-[#1e3a8a] text-xs md:text-sm font-bold tracking-wider">
                        <Icons.Bed /> {data.bedInfo}
                      </span>
                    )}
                  </div>
                </div>
                <button onClick={onClose} className="p-2 ml-4 text-slate-900 bg-slate-100 rounded-full hover:bg-slate-200 transition-colors">
                    <Icons.X />
                </button>
              </div>
              
              <div className="max-w-[1200px] mx-auto p-4 md:p-8 pb-20">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 auto-rows-[180px] md:auto-rows-[280px]">
                    {(data.gallery || []).map((img, i) => {
                        let spanClass = "col-span-1 md:col-span-1"; 
                        if (i === 0) spanClass = "col-span-2 row-span-2 md:col-span-2 md:row-span-2"; 
                        else if (i === 3) spanClass = "col-span-2 md:col-span-2"; 

                        return (
                            <div key={i} className={`relative rounded-xl overflow-hidden bg-slate-100 shadow-sm hover:shadow-lg transition-all duration-500 ${spanClass} group`}>
                                <img src={img} className="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-110" alt="" />
                                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
                                <div className="absolute bottom-3 right-3 bg-white/90 p-2 rounded-full opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 shadow-sm text-[#1e3a8a]">
                                    <Icons.Zoom />
                                </div>
                            </div>
                        );
                    })}
                </div>
                <div className="mt-12 text-center text-slate-400 text-xs tracking-widest">— END OF GALLERY —</div>
              </div>
            </div>
          );
        };

        // 詳細モーダル (アメニティ用・画像表示機能付き)
        const DetailModal = ({ data, onClose }) => {
            if (!data) return null;
            const Icon = Icons[data.icon] || Icons.Check;

            return (
                <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4 animate-in duration-300">
                    <div className="absolute inset-0 bg-[#0f172a]/80 backdrop-blur-sm transition-opacity" onClick={onClose}></div>
                    <div className="bg-white w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden relative z-10 flex flex-col max-h-[85vh]">
                        <div className="bg-[#1e3a8a] text-white p-8 pb-10 relative overflow-hidden shrink-0 text-center">
                            <div className="absolute -right-6 -bottom-6 text-white/10 transform rotate-12 scale-150 pointer-events-none"><svg width="200" height="200" viewBox="0 0 24 24" fill="currentColor"><Icon /></svg></div>
                            <button onClick={onClose} className="absolute top-4 right-4 text-white/70 hover:text-white bg-white/10 hover:bg-white/20 rounded-full p-2"><Icons.X /></button>
                            <div className="relative z-10 flex flex-col items-center">
                                <div className="w-16 h-16 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center mb-4 border border-white/20 shadow-lg"><Icon /></div>
                                <p className="text-[#C5A059] text-xs font-bold tracking-[0.2em] uppercase mb-2">{data.title}</p>
                                <h3 className="text-2xl font-serif font-bold tracking-wider">{data.subtitle}</h3>
                            </div>
                        </div>
                        
                        <div className="overflow-y-auto bg-slate-50 flex-1">
                            {data.image && (
                                <div className="w-full aspect-[16/9] bg-slate-100 relative shrink-0">
                                    <img src={data.image} className="w-full h-full object-cover" alt={data.subtitle} />
                                </div>
                            )}
                            
                            <div className="p-8">
                                <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
                                    <h4 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6 border-b border-slate-100 pb-2">Amenities List</h4>
                                    <ul className="grid grid-cols-1 gap-4">
                                        {data.details.map((item, i) => (
                                            <li key={i} className="flex items-start gap-3 text-slate-700 font-medium text-sm leading-relaxed">
                                                <span className="text-[#C5A059] mt-0.5 shrink-0"><Icons.Check /></span><span>{item}</span>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                                <div className="mt-8 text-center"><button onClick={onClose} className="text-xs font-bold text-slate-400 uppercase tracking-widest hover:text-[#1e3a8a] border-b border-transparent hover:border-[#1e3a8a]">Close Details</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };

       const RegionListView = ({ region, items, onBack, onSelect }) => (
         <div className="bg-slate-50 min-h-screen pt-40 pb-32 px-6 text-left">
           <div className="max-w-[1400px] mx-auto">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 border-b border-slate-200 pb-8 text-left text-slate-900">
               <div><p className="text-[10px] tracking-[0.2em] mb-2 text-slate-500 uppercase font-bold">Explore Area</p><h2 className="text-4xl md:text-6xl font-serif tracking-tight uppercase text-[#1e3a8a] font-bold leading-none">STAYS IN {region}</h2></div>
               <button onClick={onBack} className="mt-6 text-[10px] border-b border-slate-900 pb-1 uppercase tracking-widest font-bold hover:text-[#C5A059] transition-colors">Back to Home</button>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
               {items.length === 0 ? <p>No properties found in this region.</p> : items.map((item) => {
                 if (!item) return null; 
                 const safeStats = item.stats || {}; 
                 const safeImages = Array.isArray(item.images) ? item.images : [];
                 const mainImage = (safeImages.length > 0 && safeImages[0]) ? safeImages[0] : imgBase + "hero-1.avif"; 
                 const propName = item.name || 'No Name';

                 return (
                   <div key={item.id} onClick={() => onSelect(item)} className="group cursor-pointer bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden text-left flex flex-col">
                     <div className="aspect-[3/2] overflow-hidden relative">
                        <img 
                           src={mainImage} 
                           className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" 
                           alt={propName}
                           onError={(e) => {
                               e.target.onerror = null; 
                               e.target.src = imgBase + "hero-1.avif"; 
                           }}
                        />
                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 opacity-0 group-hover:opacity-100 transition-opacity flex justify-end items-end"><span className="text-white text-[10px] font-bold tracking-widest uppercase border-b border-white/80">View Details</span></div>
                     </div>
                     <div className="p-6 flex-1 flex flex-col">
                       <h3 className="text-lg font-bold mb-3 text-slate-800 line-clamp-1 uppercase">{propName}</h3>
                       <div className="grid grid-cols-2 gap-y-2 gap-x-4 mb-4 text-[11px] text-slate-600 font-medium">
                           {safeStats.capacity && <div className="flex items-center gap-1.5"><Icons.User />{safeStats.capacity}</div>}
                           {safeStats.layout && <div className="flex items-center gap-1.5"><Icons.Home />{safeStats.layout}</div>}
                           {safeStats.check_in && <div className="flex items-center gap-1.5 col-span-2"><Icons.Clock />{safeStats.check_in}</div>}
                       </div>
                       <div className="mt-auto pt-4 border-t border-slate-100 flex justify-between items-end"><span className="text-[10px] text-slate-400 font-bold uppercase text-left">Price / Night</span><span className="text-lg font-bold text-[#C5A059] truncate ml-2">{safeStats.price || 'Check'}</span></div>
                     </div>
                   </div>
                 );
               })}
             </div>
           </div>
         </div>
       );

        const NewsDetailView = ({ news, onBack }) => {
          useEffect(() => { window.scrollTo(0, 0); }, []);
          if (!news) return null;
          return (
            <div className="bg-white min-h-screen text-slate-900 pb-32">
              <div className="fixed top-0 left-0 right-0 z-50 p-6 flex justify-between bg-white/95 border-b shadow-sm"><button onClick={onBack} className="text-xs font-bold flex items-center gap-2 uppercase tracking-widest text-slate-600 hover:text-[#1e3a8a] transition-colors"><Icons.ChevronLeft /> Back to Home</button><span className="text-[10px] font-bold text-[#C5A059] uppercase tracking-[0.2em]">Latest Updates</span></div>
              <div className="pt-40 px-6 max-w-[800px] mx-auto text-left text-slate-900">
                <div className="flex items-center gap-4 mb-8"><span className="text-xs font-mono text-slate-400">{news.date}</span><span className="text-[9px] font-bold bg-[#1e3a8a] text-white px-3 py-1 rounded-full tracking-widest uppercase">{news.category}</span></div>
                <h1 className="text-3xl md:text-5xl font-serif font-bold text-[#1e3a8a] mb-12 leading-tight uppercase">{news.title}</h1>
                <div className="prose prose-slate max-w-none prose-lg leading-relaxed text-slate-600" dangerouslySetInnerHTML={{ __html: news.content }} />
                <div className="mt-20 pt-10 border-t border-slate-100 text-center"><button onClick={onBack} className="text-xs font-bold border-b border-slate-900 pb-1 uppercase tracking-widest hover:text-[#C5A059]">Back to Home</button></div>
              </div>
            </div>
          );
        };

        const StandardDetailView = ({ item, onBack }) => {
            useEffect(() => { window.scrollTo(0, 0); }, []);
            if (!item) return null;
            return (
                <div className="bg-white min-h-screen text-slate-900 pb-20">
                    <div className="fixed top-0 left-0 right-0 z-50 p-6 flex justify-between bg-white/95 border-b shadow-sm"><button onClick={onBack} className="text-xs font-bold flex items-center gap-2 uppercase text-slate-600 hover:text-[#1e3a8a]"><Icons.ChevronLeft /> Back</button><span className="text-[10px] font-bold text-[#C5A059] uppercase tracking-widest">AIRSTAR STAY</span></div>
                    <div className="pt-32 pb-20 px-6 max-w-[1000px] mx-auto text-left">
                    <img src={item.images?.[0] || imgBase + "hero-1.avif"} className="rounded-2xl shadow-lg mb-12 w-full aspect-[16/9] object-cover" />
                    <div className="mb-16 border-b pb-10 text-left"><h1 className="text-3xl md:text-5xl font-serif font-bold text-[#1e3a8a] mb-6 uppercase tracking-tight">{item.name}</h1><p className="text-base text-slate-500 leading-relaxed font-medium">{item.subtitle}</p></div>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16 bg-slate-50 p-8 rounded-xl border border-slate-100">
                        <div className="text-center md:text-left"><p className="text-[10px] text-slate-400 font-bold uppercase mb-1 tracking-widest">Capacity</p><p className="text-lg font-bold text-slate-800 flex items-center justify-center md:justify-start gap-2"><Icons.User />{item.stats?.capacity || '-'}</p></div>
                        <div className="text-center md:text-left"><p className="text-[10px] text-slate-400 font-bold uppercase mb-1 tracking-widest">Size</p><p className="text-lg font-bold text-slate-800 flex items-center justify-center md:justify-start gap-2"><Icons.Home />{item.stats?.sqm || '-'}</p></div>
                        <div className="text-center md:text-left"><p className="text-[10px] text-slate-400 font-bold uppercase mb-1 tracking-widest">Beds</p><p className="text-lg font-bold text-slate-800 flex items-center justify-center md:justify-start gap-2"><Icons.Bed />{item.stats?.beds || '-'}</p></div>
                        <div className="text-center md:text-left"><p className="text-[10px] text-slate-400 font-bold uppercase mb-1 tracking-widest">Check In / Out</p><p className="text-lg font-bold text-slate-800 flex items-center justify-center md:justify-start gap-2"><Icons.Clock />{item.stats?.check_in || '-'}</p></div>
                    </div>
                    <div className="mb-20 text-left text-slate-900"><h3 className="text-sm font-bold text-[#1e3a8a] border-b border-slate-200 pb-2 mb-6 uppercase tracking-widest">About this space</h3><p className="text-slate-600 leading-relaxed whitespace-pre-wrap text-left text-lg">{item.description}</p></div>
                    <div className="sticky bottom-6 bg-white p-6 rounded-xl shadow-[0_0_50px_rgba(0,0,0,0.1)] border border-slate-100 flex flex-col md:flex-row justify-between items-center gap-6">
                        <div className="text-center md:text-left text-slate-900"><p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Official Best Rate</p><p className="text-2xl font-bold text-[#1e3a8a]">{item.stats?.price || 'Check Availability'}</p></div>
                        <a href={item.beds24_url} target="_blank" className="bg-[#C5A059] text-white px-10 py-4 rounded-full font-bold shadow-lg uppercase text-xs tracking-widest transition-all hover:bg-[#1e3a8a]">予約状況を確認する</a>
                    </div>
                    </div>
                </div>
            );
        };

        const SpecialDetailView = ({ item, onBack }) => {
          const [activeFloor, setActiveFloor] = useState('1F');
          const [selectedGallery, setSelectedGallery] = useState(null);
          const [selectedAmenity, setSelectedAmenity] = useState(null);
          const [isBtnVisible, setIsBtnVisible] = useState(false);
          const scrollRef = useRef(null);
          
          // 初期化時に最初のフロアを選択状態にする
          useEffect(() => {
              if (item.floor_plans && item.floor_plans.length > 0) {
                  setActiveFloor(item.floor_plans[0].level);
              }
          }, [item]);

          // ★追加：モーダルが開いている時は背景のスクロールを無効化する
          useEffect(() => {
              if (selectedGallery || selectedAmenity) {
                  document.body.style.overflow = 'hidden';
              } else {
                  document.body.style.overflow = '';
              }
              return () => {
                  document.body.style.overflow = '';
              };
          }, [selectedGallery, selectedAmenity]);
          
          useEffect(() => {
            const handleScroll = () => setIsBtnVisible(window.scrollY > 300);
            window.addEventListener('scroll', handleScroll);
            window.scrollTo(0, 0);
            return () => window.removeEventListener('scroll', handleScroll);
          }, []);
          
          const slide = (dir) => { if (scrollRef.current) { const { scrollLeft, clientWidth } = scrollRef.current; scrollRef.current.scrollTo({ left: dir === 'L' ? scrollLeft - clientWidth : scrollLeft + clientWidth, behavior: 'smooth' }); } };
          
          if (!item) return null;
          
          return (
            <div className="bg-white text-slate-900 min-h-screen selection:bg-[#C5A059] selection:text-white pb-20 overflow-x-hidden text-center">
              {selectedGallery && <GalleryModal data={selectedGallery} onClose={() => setSelectedGallery(null)} />}
              {selectedAmenity && <DetailModal data={selectedAmenity} onClose={() => setSelectedAmenity(null)} />}
              
              <div className={`fixed bottom-0 left-0 right-0 z-[100] transition-all duration-700 transform ${isBtnVisible ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'}`}>
                <div className="bg-white/95 backdrop-blur-xl border-t border-slate-100 p-4 md:p-6 shadow-[0_-10px_40px_rgba(0,0,0,0.1)]">
                   <div className="max-w-[1400px] mx-auto flex items-center justify-between gap-6 text-center text-slate-900">
                     <div className="hidden md:block text-left text-left"><p className="text-[10px] text-[#C5A059] font-bold uppercase tracking-widest mb-1">Official Best Rate</p><h4 className="text-sm font-bold uppercase tracking-tight text-[#1e3a8a]">{item.name}</h4></div>
                     <a href={item.beds24_url} target="_blank" rel="noreferrer" className="flex-1 md:flex-none md:w-[400px] bg-[#C5A059] text-white py-4 rounded font-bold uppercase tracking-[0.2em] text-[12px] shadow-lg hover:bg-[#1e3a8a] transition-all active:scale-95 text-center">ベストレートで予約する</a>
                   </div>
                </div>
              </div>
              
              <section className="relative h-[85vh] flex items-center justify-center overflow-hidden bg-slate-900"><img src={item.images[0]} className="absolute inset-0 w-full h-full object-cover opacity-50 scale-105" /><div className="relative z-10 text-white px-6 max-w-[1200px] text-center"><h1 className="text-5xl md:text-[8rem] font-serif mb-10 uppercase tracking-tighter leading-none font-bold text-center">{item.name}</h1></div></section>
              
              <div className="max-w-[1400px] mx-auto px-6 -mt-16 relative z-20">
                <div className="bg-[#1e3a8a] p-10 md:p-14 rounded shadow-2xl grid grid-cols-2 md:grid-cols-4 gap-8 text-white divide-x divide-white/10 text-center">
                  {Object.entries({ 'Floor Area': item.stats?.sqm, 'Layout': item.stats?.layout, 'Beds': item.stats?.beds, 'Capacity': item.stats?.capacity }).map(([key, val]) => (
                    <div key={key} className="text-center"><span className="block text-3xl md:text-4xl font-serif text-[#C5A059] mb-1 font-bold text-center">{val || '-'}</span><span className="text-[10px] uppercase font-bold tracking-widest text-center">{key}</span></div>
                  ))}
                </div>
              </div>
              
              <div className="max-w-[1400px] mx-auto px-6 py-32 space-y-48">
                <section className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left text-slate-900"><div className="text-left"><h2 className="text-[10px] tracking-[0.4em] mb-6 uppercase text-slate-400 font-bold text-left">Concept</h2><h3 className="text-3xl md:text-6xl font-serif mb-10 font-bold leading-[1.2] text-[#1e3a8a] text-left uppercase tracking-tight">{item.subtitle}</h3><p className="text-xl text-slate-500 leading-relaxed font-light mb-8 text-left whitespace-pre-wrap">{item.description}</p></div><div className="relative aspect-[4/5] w-full rounded-xl shadow-2xl overflow-hidden border-8 border-white text-left"><img src={item.sidebarImg} className="w-full h-full object-cover" /></div></section>
                
                {/* ★追加：強み訴求セクション (PCでは左画像・右テキスト) */}
                {item.feature && (
                  <section className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left text-slate-900">
                    <div className="relative aspect-[4/5] w-full rounded-xl shadow-2xl overflow-hidden border-8 border-white text-left">
                      <img src={item.feature.image} className="w-full h-full object-cover" />
                    </div>
                    <div className="text-left">
                      <h2 className="text-[10px] tracking-[0.4em] mb-6 uppercase text-[#C5A059] font-bold text-left">Feature</h2>
                      <h3 className="text-3xl md:text-5xl font-serif mb-10 font-bold leading-[1.2] text-[#1e3a8a] text-left uppercase tracking-tight">{item.feature.title}</h3>
                      <p className="text-xl text-slate-500 leading-relaxed font-light mb-8 text-left whitespace-pre-wrap">{item.feature.description}</p>
                    </div>
                  </section>
                )}

                {item.floor_plans && item.floor_plans.length > 0 && (
                  <section className="flex flex-col items-center">
                      <h2 className="text-[10px] tracking-[0.4em] uppercase text-slate-400 mb-6 font-bold text-center text-center">Floor Plan</h2>
                      <h3 className="text-2xl md:text-4xl font-serif mb-6 font-bold text-[#1e3a8a] text-center text-center uppercase tracking-widest">フロアプラン</h3>
                      
                      <p className="text-sm md:text-base font-bold text-slate-600 mb-10 text-center px-4 leading-relaxed">
                          {item.id === 'second' 
                              ? '【福岡最大級の一棟貸切戸建。最大２５名まで宿泊可能な唯一無二の空間】' 
                              : '【一棟まるごとが遊び場に。多彩な滞在体験を集約したヴィラ】'}
                      </p>

                      <div className="flex gap-4 mb-16 text-center">
                          {item.floor_plans.map(p => (
                              <button 
                                  key={p.level} 
                                  onClick={() => setActiveFloor(p.level)} 
                                  className={`px-8 md:px-12 py-3 rounded-full text-[11px] font-bold tracking-widest transition-all ${activeFloor === p.level ? 'bg-[#1e3a8a] text-white shadow-xl' : 'bg-slate-50 text-slate-400 border border-slate-100 hover:border-slate-300'}`}
                              >
                                  {p.level}
                              </button>
                          ))}
                      </div>
                      <div className="w-full bg-slate-50 p-8 md:p-24 rounded-2xl border border-slate-100 flex justify-center shadow-inner overflow-hidden text-center">
                          <img 
                              src={item.floor_plans.find(f => f.level === activeFloor)?.img} 
                              className="max-w-[1000px] w-full h-auto rounded-lg shadow-2xl mix-blend-multiply transition-opacity duration-500" 
                              alt="Floor Plan" 
                          />
                      </div>
                  </section>
                )}
                
                {item.rooms && (<section className="w-full text-left"><div className="flex items-end justify-between mb-16 px-4 text-left"><div className="text-left"><h2 className="text-[10px] tracking-[0.4em] uppercase text-slate-400 font-bold text-left">Rooms & Space</h2><h3 className="text-2xl md:text-4xl font-serif font-bold text-[#1e3a8a] text-left uppercase tracking-widest">客室と空間</h3></div><div className="flex gap-4 text-left"><button onClick={() => slide('L')} className="w-14 h-14 rounded-full border border-slate-200 flex items-center justify-center hover:bg-[#1e3a8a] hover:text-white transition-all shadow-sm"><Icons.ChevronLeft /></button><button onClick={() => slide('R')} className="w-14 h-14 rounded-full border border-slate-200 flex items-center justify-center hover:bg-[#1e3a8a] hover:text-white transition-all shadow-sm"><Icons.ChevronRight /></button></div></div><div ref={scrollRef} className="flex overflow-x-auto gap-8 no-scrollbar snap-x snap-mandatory pb-10 px-4 text-left text-left">{item.rooms.map(room => (<div key={room.title} onClick={() => setSelectedGallery(room)} className="flex-none w-[85vw] md:w-[calc(25%-24px)] group cursor-pointer bg-white rounded-xl shadow-md overflow-hidden hover:shadow-2xl transition-all duration-500 snap-start border border-slate-100 text-left text-left"><div className="aspect-[4/5] overflow-hidden relative text-left text-left"><img src={room.gallery[0]} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt="" /><div className="absolute top-4 left-4 bg-[#1e3a8a]/90 text-white text-[10px] px-4 py-1.5 font-bold uppercase tracking-widest rounded-sm">{room.area}</div></div><div className="p-8 text-left text-left"><h4 className="font-serif text-xl font-bold uppercase group-hover:text-[#C5A059] transition-colors whitespace-nowrap overflow-hidden text-ellipsis">{room.title}</h4><p className="text-xs text-slate-500 mt-2 font-bold flex items-center gap-1.5"><span className="w-1.5 h-1.5 bg-[#C5A059] rounded-full"></span>{room.bedInfo}</p></div></div>))}</div></section>)}

                <section className="text-center text-center">
                  <h2 className="text-[10px] tracking-[0.4em] mb-6 uppercase text-slate-400 font-bold text-center text-slate-900">Amenities & Hospitality</h2>
                  <h3 className="text-3xl md:text-5xl font-serif mb-16 font-bold text-[#1e3a8a] leading-tight max-w-4xl mx-auto text-center uppercase tracking-widest">
                      {item.id === 'second' 
                          ? <React.Fragment>大人数でも、手ぶらでも。<br />快適さを極めた充実の設備。</React.Fragment>
                          : <React.Fragment>日常を忘れさせる、<br />ワンランク上のこだわり設備。</React.Fragment>}
                  </h3>
                  
                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
                      {item.amenitiesList?.map((a, i) => {
                          const Icon = Icons[a.icon] || Icons.Check;
                          return (
                              <div key={i} onClick={() => setSelectedAmenity(a)} className="bg-white text-slate-900 rounded-xl p-6 shadow-lg border border-slate-100 cursor-pointer hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group flex flex-col items-center text-center h-full">
                                  <div className="w-14 h-14 rounded-full bg-slate-50 text-[#1e3a8a] flex items-center justify-center mb-4 group-hover:bg-[#1e3a8a] group-hover:text-white transition-colors duration-300 shadow-sm border border-slate-100">
                                      <Icon />
                                  </div>
                                  <h3 className="font-bold text-slate-800 text-sm mb-2 group-hover:text-[#C5A059] transition-colors">{a.subtitle}</h3>
                                  <p className="text-[10px] text-slate-400 leading-tight mb-4 line-clamp-2">{a.desc}</p>
                                  <span className="mt-auto text-[10px] font-bold text-[#C5A059] uppercase tracking-widest opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all">View Details</span>
                              </div>
                          );
                      })}
                  </div>
                </section>

                {/* FAQの出し分け処理（プランB用） */}
                {(() => {
                    // 現在開いている物件(item.id)のチェックが入っているか、'common'が入っているFAQだけを残す
                    const currentFaqs = wpFaqs.filter(faq => {
                        if (!faq.categories) return false;
                        return faq.categories.includes(item.id) || faq.categories.includes('common');
                    });

                    if (currentFaqs.length === 0) return null;

                    return (
                      <section className="py-24 border-t border-slate-100 text-left">
                        <div className="max-w-[800px] mx-auto">
                          <h2 className="text-[10px] tracking-[0.4em] mb-4 uppercase text-slate-400 font-bold">FAQ</h2>
                          <h3 className="text-3xl font-serif mb-12 font-bold text-[#1e3a8a] uppercase tracking-widest">よくある質問</h3>
                          <div className="divide-y divide-slate-100">
                            {currentFaqs.map((faq, i) => <FaqItem key={i} faq={faq} />)}
                          </div>
                        </div>
                      </section>
                    );
                })()}

                <section className="py-24 border-t border-slate-100 text-center"><h2 className="text-[10px] tracking-[0.4em] mb-6 uppercase text-slate-400 font-bold text-center text-slate-900">Access</h2><h3 className="text-3xl md:text-4xl font-serif mb-12 font-bold text-[#1e3a8a] text-center uppercase tracking-widest">アクセス</h3><div className="max-w-2xl mx-auto bg-slate-50 p-10 rounded-xl border border-slate-100 text-center text-slate-900 text-center"><div className="flex flex-col items-center gap-6"><div className="w-16 h-16 rounded-full bg-white flex items-center justify-center text-[#1e3a8a] shadow-sm"><Icons.MapPin /></div><div className="text-center text-center text-center"><p className="text-lg font-bold text-slate-800 mb-2">{item.access.address}</p><div className="space-y-1 text-sm text-slate-500">{item.access.transport.map((line, i) => (<p key={i}>{line}</p>))}</div></div><a href={item.access.mapLink} target="_blank" rel="noreferrer" className="mt-4 px-8 py-3 bg-[#1e3a8a] text-white rounded-full text-xs font-bold uppercase tracking-widest hover:bg-[#C5A059] transition-colors shadow-lg">Google Mapで開く</a></div></div></section>
                <div className="pt-24 text-center text-center"><button onClick={onBack} className="flex items-center gap-4 mx-auto text-xs font-bold uppercase tracking-[0.3em] text-[#1e3a8a] hover:text-[#C5A059] transition-all border-b border-[#1e3a8a]/10 pb-2"><Icons.ChevronLeft /> Back to Home</button></div>
              </div>
              <footer className="bg-[#0c0c0c] text-white py-32 px-6 border-t border-white/5 text-center text-center"><div className="flex justify-center mb-8 text-center text-center"><img src={imgBase + logoFileName} className="h-10 opacity-40 invert brightness-0" alt="AIRSTAR" /></div><p className="text-[10px] tracking-[0.2em] uppercase opacity-40 mt-8 text-center text-white text-center text-center">© 2026 AIRSTAR HOTEL. All rights reserved.</p></footer>
            </div>
          );
        };

        // --- 5. アプリ本体 ---
        const App = () => {
          const { useState, useEffect, useMemo } = React;
          const [view, setView] = useState('home');
          const [selectedProperty, setSelectedProperty] = useState(null);
          const [selectedNews, setSelectedNews] = useState(null);
          const [selectedRegion, setSelectedRegion] = useState(null);
          const [scrolled, setScrolled] = useState(false);
          const [heroIdx, setHeroIdx] = useState(0);

          // ブラウザバック（戻るボタン）対応
          useEffect(() => {
            const handlePopState = (event) => {
              const state = event.state;
              if (state) {
                setView(state.view);
                if (state.view === 'detail') setSelectedProperty(allProperties.find(p => p.id === state.id));
                else if (state.view === 'news-detail') setSelectedNews(wpNews.find(n => n.id === state.id));
                else if (state.view === 'region-list') setSelectedRegion(state.region);
              } else {
                setView('home');
              }
            };
            window.addEventListener('popstate', handlePopState);
            window.history.replaceState({ view: 'home' }, '', '');
            return () => window.removeEventListener('popstate', handlePopState);
          }, []);
          
          const heroImgs = useMemo(() => [
            imgBase + "hero-1.avif",
            imgBase + "hero-2.avif",
            imgBase + "hero-3.jpeg",
            imgBase + "hero-4.jpeg"
          ], []);

          // 【重要】Reactからのローディング解除（成功時）
          useEffect(() => {
            const loader = document.getElementById('initial-loader');
            if (loader) {
                setTimeout(() => {
                    loader.style.opacity = '0';
                    setTimeout(() => loader.remove(), 500);
                }, 1000); 
            }
          }, []);

          useEffect(() => {
            const handleScroll = () => setScrolled(window.scrollY > 50);
            window.addEventListener('scroll', handleScroll);
            const t = setInterval(() => setHeroIdx(p => (p + 1) % 4), 5000);
            return () => { window.removeEventListener('scroll', handleScroll); clearInterval(t); };
          }, []);

          const onNavigate = (targetIdOrType) => {
            if (['concept', 'special', 'facilities', 'experience', 'news', 'home'].includes(targetIdOrType)) {
              if (view !== 'home') {
                setView('home');
                window.history.pushState({ view: 'home' }, '', ''); // 履歴に追加
                setTimeout(() => {
                  if (targetIdOrType === 'home') window.scrollTo({top: 0, behavior: 'smooth'});
                  else {
                    const el = document.getElementById(targetIdOrType);
                    if (el) el.scrollIntoView({ behavior: 'smooth' });
                  }
                }, 100);
              } else {
                 if (targetIdOrType === 'home') window.scrollTo({top: 0, behavior: 'smooth'});
                 else {
                   const el = document.getElementById(targetIdOrType);
                   if (el) el.scrollIntoView({ behavior: 'smooth' });
                 }
              }
            }
          };

          const goToDetail = (item) => { setSelectedProperty(item); setView('detail'); window.history.pushState({ view: 'detail', id: item.id }, '', ''); window.scrollTo(0, 0); };
          const goToNews = (newsItem) => { setSelectedNews(newsItem); setView('news-detail'); window.history.pushState({ view: 'news-detail', id: newsItem.id }, '', ''); window.scrollTo(0, 0); };
          const goToRegion = (regionName) => { setSelectedRegion(regionName); setView('region-list'); window.history.pushState({ view: 'region-list', region: regionName }, '', ''); window.scrollTo(0, 0); };
          const goBackHome = () => { setView('home'); window.history.pushState({ view: 'home' }, '', ''); window.scrollTo(0, 0); };

          if (view === 'news-detail') return <NewsDetailView news={selectedNews} onBack={goBackHome} />;
          if (view === 'detail' && selectedProperty) {
              return selectedProperty.type === 'special' ? <SpecialDetailView item={selectedProperty} onBack={goBackHome} /> : <StandardDetailView item={selectedProperty} onBack={goBackHome} />;
          }
          if (view === 'region-list') {
            const items = (allProperties || []).filter(p => {
                if (!p.region) return false;
                // ★追加：特別物件（AIRSTAR SECONDや別府本邸、その他の特別施設）は地域別一覧には表示しない
                if (p.type === 'special') return false; 
                
                const r = String(p.region).toUpperCase().trim(); 
                const s = String(selectedRegion).toUpperCase();
                
                const match = r === s;
                const matchJP = (s === 'FUKUOKA' && r === '福岡') || 
                                (s === 'KUMAMOTO' && r === '熊本') ||
                                (s === 'NAGASAKI' && r === '長崎') ||
                                (s === 'OITA' && r === '大分') ||
                                (s === 'SAGA' && r === '佐賀') ||
                                (s === 'KYOTO' && r === '京都');
                                
                return match || matchJP;
            });
            
            return (<div className="font-sans text-slate-900"><Navigation scrolled={true} onNavigate={onNavigate} /><RegionListView region={selectedRegion} items={items} onBack={goBackHome} onSelect={(item) => goToDetail(item)} /></div>);
          }

          return (
            <div className="bg-white min-h-screen text-slate-900 font-sans text-center selection:bg-[#C5A059]">
              <Navigation scrolled={scrolled} onNavigate={onNavigate} />
              <section id="home" className="relative h-screen bg-slate-900 overflow-hidden"><div className="absolute inset-0 transition-opacity duration-[2000ms]"><img src={heroImgs[heroIdx]} className="w-full h-full object-cover scale-105" /></div><div className="relative z-20 h-full flex flex-col items-center justify-center text-white px-6"><p className="text-[11px] tracking-[0.5em] mb-8 uppercase font-bold opacity-60 text-center">The Art of Hospitality</p><h1 className="text-6xl md:text-[9rem] font-serif leading-none mb-14 tracking-tighter uppercase font-bold drop-shadow-2xl text-center">Breath in<br/>the Moment.</h1><div className="flex gap-4 text-center">{heroImgs.map((_, i) => (<button key={i} onClick={() => setHeroIdx(i)} className={`h-1 transition-all rounded-full ${heroIdx === i ? 'w-16 bg-white' : 'w-6 bg-white/30'}`} />))}</div></div></section>
              <section id="concept" className="py-48 px-6 border-b text-slate-900 text-center"><div className="max-w-[1400px] mx-auto"><p className="text-[10px] text-[#C5A059] font-bold uppercase mb-10 text-center">Our Philosophy</p><h2 className="text-4xl lg:text-7xl font-serif text-[#1e3a8a] mb-12 font-bold leading-tight uppercase text-center">「みんなで集まれる場所が欲しかった」を、叶える。</h2><p className="text-xl text-slate-500 font-light max-w-2xl mx-auto mb-16 leading-relaxed text-center">思い出を刻むための拠点を創造しています。ただ泊まるだけではない、一体感と安心感を両立させた特別な空間。</p><div className="aspect-[16/10] max-w-5xl mx-auto border-[12px] border-white shadow-2xl rounded-xl overflow-hidden text-center"><img src={imgBase + "concept-main.avif"} className="w-full h-full object-cover" /></div></div></section>
              <section id="special" className="py-40 bg-slate-900 text-white px-6"><div className="max-w-[1400px] mx-auto text-center"><p className="text-[10px] text-[#C5A059] font-bold mb-4 uppercase tracking-widest text-center">Signature Stays</p><h2 className="text-5xl md:text-[6rem] font-serif font-bold mb-24 uppercase tracking-tighter text-center">The Collection</h2><div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 text-center">{manualProperties.map(item => (<div key={item.id} onClick={() => goToDetail(item)} className="group cursor-pointer text-center"><div className="relative aspect-[3/4] overflow-hidden rounded-xl shadow-lg mb-8 text-center"><img src={item.images[0]} className="w-full h-full object-cover transition duration-1000 group-hover:scale-110" /><div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-60 text-center" /><div className="absolute bottom-8 left-8 text-left text-left"><p className="text-[10px] text-[#C5A059] font-bold mb-2">{item.region}</p><h3 className="text-2xl font-bold uppercase tracking-tight text-left">{item.name}</h3></div></div><div className="flex items-center text-[10px] font-bold tracking-widest uppercase border-b border-white/20 w-fit pb-1 group-hover:border-[#C5A059] transition-all text-center">View Experience <Icons.ArrowRight /></div></div>))}</div></div></section>
              <section id="facilities" className="py-48 bg-slate-50 px-6 text-center text-slate-900"><div className="max-w-[1400px] mx-auto text-center text-center"><p className="text-[10px] text-[#C5A059] font-bold mb-4 uppercase tracking-widest text-center"><Icons.MapPin /> Explore Destinations</p><h2 className="text-4xl md:text-8xl font-serif text-[#1e3a8a] font-bold mb-24 uppercase tracking-tighter text-center">Destinations</h2><div className="grid grid-cols-2 lg:grid-cols-3 gap-8 text-center">{regionData.map(r => (<div key={r.name} onClick={() => goToRegion(r.name)} className="group relative aspect-[16/10] rounded-xl overflow-hidden cursor-pointer shadow-md text-center" style={{ background: 'linear-gradient(135deg, #1e3a8a 0%, #0c1a40 100%)' }}><div className="absolute inset-0 flex flex-col items-center justify-center p-6 bg-black/10 group-hover:bg-transparent transition duration-500 text-center"><h3 className="text-xl md:text-3xl font-serif text-white font-bold uppercase tracking-widest text-center">{r.name}</h3><span className="text-[10px] text-white/50 font-bold mt-3 uppercase tracking-[0.4em] text-center">{r.label}</span></div></div>))}</div></div></section>
              <section id="experience" className="py-40 bg-white px-6 text-left"><div className="max-w-[1400px] mx-auto text-left text-left text-left"><div className="flex flex-col md:flex-row justify-between items-end mb-24 gap-8 text-slate-900 text-left text-left"><div className="text-left text-left"><p className="text-[10px] text-[#C5A059] font-bold mb-4 uppercase tracking-widest text-left">Local Discoveries</p><h2 className="text-5xl md:text-8xl font-serif text-[#1e3a8a] font-bold uppercase tracking-tighter text-left">Experience</h2></div><p className="max-w-md text-slate-500 text-left font-light leading-relaxed text-left">地域の魅力を再発見する旅。伝統、食、そして自然を深く味わうひととき。</p></div><div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 text-left">{experienceData.map(exp => (<div key={exp.id} className={`group cursor-pointer flex flex-col ${exp.size === 'wide' ? 'lg:col-span-2' : ''} text-left`}><div className={`relative overflow-hidden mb-8 rounded-xl shadow-lg ${exp.size === 'tall' ? 'aspect-[3/4]' : 'aspect-video'} text-left`}><img src={exp.img} className="w-full h-full object-cover group-hover:scale-110 transition duration-[1.5s]" /><div className="absolute top-4 left-4 flex gap-2 text-left">{exp.tags?.map(t => (<span key={t} className="bg-slate-900/90 text-white px-3 py-1 text-[8px] font-bold uppercase flex items-center gap-1 text-left"><Icons.Tag />{t}</span>))}</div></div><h4 className="text-2xl font-serif font-bold text-slate-800 group-hover:text-[#C5A059] uppercase transition-colors text-left text-left">{exp.title}</h4></div>))}</div></div></section>
              <section id="news" className="py-40 px-6 max-w-[1000px] mx-auto border-t text-slate-900 text-left text-left"><h2 className="text-[10px] text-slate-400 font-bold mb-16 uppercase tracking-widest text-center text-center">Latest Updates</h2><div className="space-y-0 divide-y text-left">{wpNews.map((news, i) => (<a key={i} onClick={() => goToNews(news)} className="group cursor-pointer flex flex-col md:flex-row md:items-center py-10 gap-6 md:gap-12 hover:bg-slate-50 px-6 transition-colors text-left"><span className="text-xs font-mono text-slate-400 w-24 text-left">{news.date}</span><span className="text-[9px] font-bold bg-[#1e3a8a] text-white px-3 py-1 rounded-full w-fit tracking-widest uppercase text-left">{news.category}</span><span className="text-lg font-bold group-hover:text-[#C5A059] flex-1 text-left">{news.title}</span><Icons.ArrowRight /></a>))}</div></section>
              <footer className="bg-[#0c0c0c] text-white py-32 px-6 border-t border-white/5 text-center text-center"><div className="flex justify-center mb-8 text-center text-center"><img src={imgBase + logoFileName} className="h-10 opacity-40 invert brightness-0" alt="AIRSTAR" /></div><p className="text-[10px] tracking-[0.2em] uppercase opacity-40 mt-8 text-center text-white text-center text-center">© 2026 AIRSTAR HOTEL. All rights reserved.</p></footer>
            </div>
          );
        };

        const rootEl = document.getElementById('root');
        if (rootEl) {
            const root = createRoot(rootEl);
            root.render(<App />);
        } else {
            throw new Error('Root element not found');
        }

    } catch (e) {
        console.error("AIRSTAR App Error:", e);
        // エラー発生時もローディング解除
        const loader = document.getElementById('initial-loader');
        if (loader) loader.style.display = 'none';
    }

})();