import React, { useState } from 'react'; const IconChevronLeft = ({ className }) => ; const IconChevronRight = ({ className }) => ; const IconCrown = ({ className, fill="none" }) => ; const IconClock = ({ className }) => ; const IconChevronRightSmall = ({ className }) => ; const FallbackCuteFox = () => ( ); const ranks = [ { id: 'bronze', name: 'BRONZE', title: 'ブロンズ会員', bgClass: 'bg-gradient-to-br from-[#C49B75] via-[#DEBEA2] to-[#A37B57]', textClass: 'text-amber-50 drop-shadow-sm', isDark: false }, { id: 'silver', name: 'SILVER', title: 'シルバー会員', bgClass: 'bg-gradient-to-br from-[#CBD5E1] via-[#F1F5F9] to-[#94A3B8]', textClass: 'text-slate-800', isDark: true }, { id: 'gold', name: 'GOLD', title: 'ゴールド会員', bgClass: 'bg-gradient-to-br from-[#F5D76E] via-[#FFF2A8] to-[#D4AF37]', textClass: 'text-yellow-900 font-bold', isDark: true }, { id: 'platinum', name: 'PLATINUM', title: 'プラチナ会員', bgClass: 'bg-gradient-to-br from-[#E2E8F0] via-[#FFFFFF] to-[#CBD5E1] shimmer', textClass: 'text-slate-800 font-bold', isDark: true }, { id: 'black', name: 'BLACK', title: 'ブラック会員', bgClass: 'bg-gradient-to-br from-[#222] via-[#111] to-[#000] shimmer-dark', textClass: 'text-gray-100 font-bold', isDark: false }, { id: 'royal', name: 'ROYAL', title: 'ロイヤル会員', bgClass: 'rainbow-bg', textClass: 'text-white font-black drop-shadow-[0_0_12px_rgba(255,255,255,1)]', isDark: false } ]; export default function App() { const [activeIndex, setActiveIndex] = useState(0); const [stays, setStays] = useState(3); // デモ用の宿泊数（0〜5） const [imgError, setImgError] = useState(false); // 新しいデザイン名を 'stylish' に設定 const [designPattern, setDesignPattern] = useState('glass'); const handlePrev = () => { setActiveIndex((prev) => (prev === 0 ? ranks.length - 1 : prev - 1)); setImgError(false); }; const handleNext = () => { setActiveIndex((prev) => (prev === ranks.length - 1 ? 0 : prev + 1)); setImgError(false); }; // ゲージ/ポイントクリックでスタンプが貯まるデモ const handleGaugeClick = () => setStays((prev) => (prev + 1) % 6); const currentRank = ranks[activeIndex]; const isMaxRank = activeIndex === ranks.length - 1; const imagePath = "https://chusho-uand3.com/onsen.png"; const renderImage = (className) => ( imgError ? : キャラクター setImgError(true)} /> ); return (
{/* タブ切り替え */}

Nasu Royal Passport

{/* 以前お気に入りいただいた、透かし王冠のある綺麗なグラスデザイン。 */} {designPattern === 'glass' && (

{currentRank.name}

NASU ROYAL PASSPORT

{renderImage("h-[75%] sm:h-[85%] max-w-full object-contain drop-shadow-[0_10px_15px_rgba(0,0,0,0.3)] transition-transform duration-300 hover:scale-105")}
{/* ★王冠は「現在のランク」に連動！(0=ブロンズ〜5=ロイヤル) */}
{[0, 1, 2, 3, 4, 5].map(i => ( ))}

STAYS

{isMaxRank ? 'MAX' : `${stays} / 5`}

{/* 5泊で次のランクへ行くゲージ */}
{isMaxRank ? (

最高ランク到達

) : (

次のランクまで あと {5 - stays} 泊

)}
MEMBER ID 01234728704
{/* 強調された旅の履歴ボタン */}
旅の履歴
)} {/* ========================================= 完全新規：スタイリッシュグラス (Stylish Glass) グラスベースでより洗練され、5つのポイントが貯まるデザイン ========================================= */} {designPattern === 'stylish' && (
{/* 白濁りをなくし、背景色を100%活かしつつガラスの質感だけ出す */}
{/* 右下のうっすらした巨大王冠 */}
{/* 上部: タイトル（洗練された細身のフォントと余白） */}

Nasu Royal Passport

{currentRank.name}

ID: 0123472
{/* 中央: キャラクターと5つのポイント */}
{/* キャラクターの後ろにふんわり光るエフェクト */}
{renderImage("w-full h-auto max-h-[80%] sm:max-h-[100%] object-contain drop-shadow-2xl relative z-10 transform hover:scale-105 transition-transform duration-500")}

{isMaxRank ? 'Max Status' : 'Next Stage'}

{isMaxRank ? 'MAX' : `${stays} / 5`}

{/* ★バーではなく、5個のポイント（スタンプ風）で表現 */}
{[1, 2, 3, 4, 5].map((point) => (
))}
{isMaxRank ? (

ロイヤルステータス到達

) : (

次のランクまで あと {5 - stays} 泊

)}
{/* 下部: 洗練された履歴ボタン */}
旅の履歴
)} {/* 以前お気に入りいただいたPOPデザインをそのまま復元 */} {designPattern === 'pop' && (

Nasu Royal Passport

{renderImage("w-[85%] h-[85%] object-contain drop-shadow-md")}
✨

{currentRank.name}

STAYS {isMaxRank ? 'MAX' : `${stays}/5`} {!isMaxRank && あと {5 - stays} 回}
ID: 888-001
{/* 強調された旅の履歴ボタン */}
旅の履歴
)}
); }