import React, { useState, useEffect, useRef } from 'react';
import { 
  Users, 
  Heart, 
  Calendar, 
  Coins, 
  CheckCircle2, 
  ArrowRight, 
  Baby, 
  Home, 
  Clock, 
  ChevronDown,
  Star,
  ShieldCheck,
  Gift, 
  Plane,
  Scissors,
  MessageCircle,
  ChevronRight,
  TrendingUp,
  Infinity,
  Award,
  MapPin,
  Phone,
  ShieldAlert,
  Landmark,
  HeartHandshake,
  Timer,
  Sparkles,
  ChevronLeft,
  RefreshCw,
  Search,
  UserPlus,
  Send,
  Sparkle,
  ExternalLink
} from 'lucide-react';

// ----------------------------------------------------------------------
// データ定義
// ----------------------------------------------------------------------

const ALL_STORES = [
  { id: 1, name: "CIEL 姫路店", address: "兵庫県姫路市駅前町247 御幸苑ビル3F", tel: "079-284-1233", hours: "9:00〜21:00", region: "兵庫県" },
  { id: 2, name: "CIEL 岡山店", address: "岡山県岡山市北区本町1-3 VICビル3F", tel: "086-230-2210", hours: "9:00〜21:00", region: "岡山県" },
  { id: 3, name: "CIEL 福山店", address: "広島県福山市三之丸町2-7 神原ビル2F", tel: "084-959-5503", hours: "9:00〜21:00", region: "広島県" },
  { id: 4, name: "CIEL 高松店", address: "香川県高松市南新町12-2 萬谷ビル2F", tel: "087-802-1404", hours: "9:00〜21:00", region: "香川県" },
  { id: 5, name: "CIEL 松山店", address: "愛媛県松山市湊町4-10-8 BE-FLAT 1F", tel: "089-913-1088", hours: "9:00〜21:00", region: "愛媛県" },
  { id: 6, name: "CIEL 広島店", address: "広島県広島市中区本通7-29 アイビービル2F", tel: "082-246-8805", hours: "9:00〜21:00", region: "広島県" },
  { id: 7, name: "CIEL 難波店", address: "大阪府大阪市中央区難波3-5-11 アクセ広島ビル4F", tel: "06-6630-6685", hours: "9:00〜21:00", region: "大阪府" },
  { id: 8, name: "CIEL 天神店", address: "福岡県福岡市中央区天神2-3-20 天神パインクレスト2F", tel: "092-753-8122", hours: "9:00〜21:00", region: "福岡県" },
  { id: 9, name: "CIEL 千葉店", address: "千葉県千葉市（詳細はお問い合わせください）", tel: "000-000-0000", hours: "9:00〜21:00", region: "千葉県" },
  { id: 10, name: "CIEL 香椎店", address: "福岡県福岡市東区香椎駅前1-12-2 2F", tel: "092-410-1685", hours: "9:00〜21:00", region: "福岡県" },
];

const HIRING_STORES_DATA = {
  "東北": [{ name: "CIEL仙台店", image: "https://i.imgur.com/WYpgYWc.jpeg", region: "宮城県" }],
  "関東": [
    { name: "CIEL立川店", image: "https://i.imgur.com/37rh3Yw.jpeg", region: "東京都" },
    { name: "CIEL藤沢店", image: "https://i.imgur.com/iUgxtF1.jpeg", region: "神奈川県" },
    { name: "CIEL蒲田店", image: "https://i.imgur.com/z2uEmZ1.jpeg", region: "東京都" },
    { name: "CIEL Emerge松戸店", image: "https://i.imgur.com/Wywj0mC.jpeg", region: "千葉県" },
    { name: "CIEL千葉店", image: "https://i.imgur.com/MCYv14D.jpeg", region: "千葉県" }
  ],
  "中部": [
    { name: "CIEL浜松店", image: "https://i.imgur.com/lA2AkYW.jpeg", region: "静岡県" },
    { name: "CIEL栄店", image: "https://i.imgur.com/x6wWea3.jpeg", region: "愛知県" }
  ],
  "関西": [
    { name: "CIEL難波店", image: "https://i.imgur.com/tgt1zYa.png", region: "大阪府" },
    { name: "CIEL天六店", image: "https://i.imgur.com/4uE2OSJ.jpeg", region: "大阪府" },
    { name: "CIEL天神橋店", image: "https://i.imgur.com/IaKsLct.jpeg", region: "大阪府" },
    { name: "ACRO 梅田店", image: "https://i.imgur.com/xFCtjKF.jpeg", region: "大阪府" },
    { name: "ACRO あべの店", image: "https://i.imgur.com/vXnEow2.jpeg", region: "大阪府" },
    { name: "CIEL野江店", image: "https://i.imgur.com/j5S7Hqa.jpeg", region: "大阪府" },
    { name: "CIEL江坂店", image: "https://i.imgur.com/spc7IrU.png", region: "大阪府" },
    { name: "CIEL豊中岡町店", image: "https://i.imgur.com/fxm3HJ7.jpeg", region: "大阪府" },
    { name: "CIEL塚口店", image: "https://i.imgur.com/mcK6eWR.jpeg", region: "兵庫県" },
    { name: "CIEL甲東園店", image: "https://i.imgur.com/1GaiGSP.jpeg", region: "兵庫県" },
    { name: "CIEL姫路みゆき通り店", image: "https://i.imgur.com/W7mrANT.jpeg", region: "兵庫県" },
    { name: "CIEL新長田店", image: "https://i.imgur.com/Tx4pAzR.jpeg", region: "兵庫県" }
  ],
  "中国・四国": [
    { name: "CIEL福山駅前店", image: "https://i.imgur.com/bMxlry5.jpeg", region: "広島県" },
    { name: "CIEL紙屋町店", image: "https://i.imgur.com/6XCdvmi.jpeg", region: "広島県" },
    { name: "CIEL松山店", image: "https://i.imgur.com/WRCTF7e.jpeg", region: "愛媛県" },
    { name: "CIEL松山市駅前店", image: "https://i.imgur.com/QXgciMg.jpeg", region: "愛媛県" },
    { name: "CIEL岡山店", image: "https://i.imgur.com/8t2YvoZ.jpeg", region: "岡山県" }
  ],
  "九州・沖縄": [
    { name: "CIEL天神店", image: "https://i.imgur.com/ZNGkV5g.jpeg", region: "福岡県" },
    { name: "CIEL FUKUOKA店", image: "https://i.imgur.com/O1NoRhZ.jpeg", region: "福岡県" },
    { name: "CIEL香椎店", image: "https://i.imgur.com/iCjSUPF.jpeg", region: "福岡県" },
    { name: "CIEL大分店", image: "https://i.imgur.com/pb5VaaI.jpeg", region: "大分県" },
    { name: "CIEL大分中央町店", image: "https://i.imgur.com/zej6bEn.jpeg", region: "大分県" },
    { name: "CIEL別府店", image: "https://i.imgur.com/hHnF5kH.jpeg", region: "大分県" },
    { name: "CIEL那覇店", image: "https://i.imgur.com/VQKQtCD.jpeg", region: "沖縄県" }
  ]
};

// ----------------------------------------------------------------------
// メインコンポーネント
// ----------------------------------------------------------------------

const App = () => {
  const [scrolled, setScrolled] = useState(false);
  const [currentPage, setCurrentPage] = useState('home'); 
  const [activeRegion, setActiveRegion] = useState("東北");
  const hStoresScrollRef = useRef(null);
  const lineUrl = "https://lin.ee/wBD19aU";

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 30);
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navigateTo = (page) => {
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const scrollHStores = (direction) => {
    if (hStoresScrollRef.current) {
      const { scrollLeft, clientWidth } = hStoresScrollRef.current;
      const scrollTo = direction === 'left' ? scrollLeft - clientWidth : scrollLeft + clientWidth;
      hStoresScrollRef.current.scrollTo({ left: scrollTo, behavior: 'smooth' });
    }
  };

  const styles = `
    @keyframes pulse-line {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.4); }
      70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(6, 199, 85, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); }
    }
    @keyframes kenburns {
      0% { transform: scale(1); }
      100% { transform: scale(1.1); }
    }
    @keyframes fadeUp {
      0% { opacity: 0; transform: translateY(15px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes shine {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    .animate-pulse-line { animation: pulse-line 2s infinite; }
    .animate-kenburns { animation: kenburns 25s ease-out infinite alternate; }
    .animate-fade-up { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    
    .text-gradient-shine {
      background: linear-gradient(90deg, #fff, #97d1e8, #fff);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shine 6s linear infinite;
    }
    .bg-gradient-ciel { background: linear-gradient(135deg, #623e8e, #97d1e8); }
    .glass-effect {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .flip-card { perspective: 1000px; -webkit-perspective: 1000px; }
    .flip-card-inner { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
    .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
    .flip-card-front, .flip-card-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .flip-card-back { transform: rotateY(180deg); }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* モバイルブラウザでのタップ時のハイライトを無効化 */
    * { -webkit-tap-highlight-color: transparent; }

    /* ダイナミックビューポート対応（ブラウザ高さの最適化） */
    .h-screen-dynamic { height: 100vh; height: 100dvh; }
  `;

  // --- Components ---

  const Navbar = () => (
    <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${scrolled || currentPage !== 'home' ? 'bg-white/95 backdrop-blur-md shadow-sm py-2' : 'bg-transparent py-4'}`}>
      <div className="container mx-auto px-4 md:px-6 flex justify-between items-center">
        <div className="flex items-center gap-3 cursor-pointer" onClick={() => navigateTo('home')}>
          <div className="flex flex-col text-left leading-none">
            <span className={`font-bold text-lg md:text-2xl tracking-tighter font-serif uppercase ${scrolled || currentPage !== 'home' ? 'text-slate-800' : 'text-white'}`}>CIEL</span>
            <span className={`text-[7px] md:text-[9px] font-bold tracking-widest uppercase ${scrolled || currentPage !== 'home' ? 'text-slate-400' : 'text-white/60'}`}>OXY Inc.</span>
          </div>
        </div>
        
        {/* Desktop Menu */}
        <div className="hidden lg:flex items-center space-x-8 text-[10px] font-black tracking-[0.2em]">
          {['BENEFITS', 'SALARY', 'HOLIDAY'].map((item) => (
            <a key={item} href={`#${item.toLowerCase()}`} onClick={(e) => {
              if(currentPage !== 'home') {
                e.preventDefault();
                navigateTo('home');
                setTimeout(() => {
                    const el = document.getElementById(item.toLowerCase());
                    if (el) el.scrollIntoView({ behavior: 'smooth' });
                }, 300);
              }
            }} className={`hover:opacity-60 transition ${scrolled || currentPage !== 'home' ? 'text-slate-500' : 'text-white'}`}>{item}</a>
          ))}
          <button onClick={() => navigateTo('stores')} className={`hover:opacity-60 transition ${scrolled || currentPage !== 'home' ? 'text-slate-500' : 'text-white'}`}>STORES</button>
          
          <button 
            onClick={() => navigateTo('contact')} 
            className={`px-6 py-2 rounded-full border-2 transition-all flex items-center gap-2 font-black shadow-lg hover:scale-105 active:scale-95 ${
              scrolled || currentPage !== 'home' 
              ? 'border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white' 
              : 'border-white text-white hover:bg-white hover:text-slate-900'
            }`}
          >
            <MessageCircle size={16} className="fill-current" />
            LINEで無料相談
          </button>
        </div>

        {/* Mobile Navbar Right */}
        <div className="flex items-center gap-2">
          <button 
            onClick={() => navigateTo('contact')} 
            className={`lg:hidden px-4 py-1.5 rounded-full border-2 text-[10px] font-black transition-all active:scale-95 ${
              scrolled || currentPage !== 'home' 
              ? 'border-[#06C755] text-[#06C755]' 
              : 'border-white/50 text-white'
            }`}
          >
            LINE相談
          </button>
          <a href={lineUrl} target="_blank" rel="noopener noreferrer" className="bg-slate-900 text-white px-5 md:px-8 py-2 md:py-2.5 rounded-full text-[10px] md:text-xs font-bold hover:bg-gradient-ciel transition-all shadow-lg active:scale-95">
            ENTRY
          </a>
        </div>
      </div>
    </nav>
  );

  const FlipCard = ({ person }) => {
    const [isFlipped, setIsFlipped] = useState(false);
    return (
      <div 
        className={`flip-card w-full h-[480px] md:h-[500px] cursor-pointer ${isFlipped ? 'flipped' : ''}`}
        onClick={() => setIsFlipped(!isFlipped)}
      >
        <div className="flip-card-inner relative w-full h-full">
          <div className="flip-card-front bg-white rounded-[2rem] md:rounded-[2.5rem] p-6 md:p-8 shadow-md border border-slate-100 flex flex-col items-center">
            <div className="w-full aspect-[4/5] bg-slate-100 rounded-2xl mb-6 overflow-hidden relative shadow-inner">
               <img 
                 src={person.image} 
                 alt={person.name} 
                 className={`w-full h-full object-cover brightness-[1.02] ${person.position || 'object-top'}`} 
                 loading="lazy" 
               />
               <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            </div>
            <h3 className="text-base md:text-lg font-bold text-slate-800 mb-2 leading-tight text-center">{person.area}<br/>{person.name} ({person.age})</h3>
            <div className="text-[12px] md:text-[13px] text-slate-500 space-y-1 mb-4 text-center">
              <p className="font-bold text-blue-600">{person.type}</p>
              <p className="font-medium">{person.career}</p>
            </div>
            <div className="mt-auto px-6 py-2.5 bg-blue-50 text-blue-600 rounded-full text-[10px] font-black tracking-widest animate-pulse border border-blue-100 flex items-center gap-1">
              実績・本音を見る <ChevronRight size={14} />
            </div>
          </div>
          <div className="flip-card-back bg-gradient-ciel rounded-[2rem] md:rounded-[2.5rem] p-6 md:p-8 shadow-xl text-white flex flex-col items-center justify-center text-center">
            <div className="mb-4">
              <span className="text-[10px] font-black bg-white/20 px-3 py-1 rounded-full tracking-widest uppercase mb-2 inline-block">Performance</span>
              <h4 className="text-lg font-bold">月間の実績</h4>
            </div>
            <div className="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center mb-6 shadow-lg">
              <Coins size={28} />
            </div>
            <div className="space-y-4 w-full">
              <div className="p-4 bg-white/10 rounded-2xl border border-white/10">
                <p className="text-[10px] font-bold opacity-70 uppercase tracking-widest mb-1 text-white/70">Monthly Sales</p>
                <p className="text-lg md:text-xl font-bold">売上：約 {person.sales}</p>
              </div>
              <div className="p-5 bg-white/20 rounded-2xl border border-white/20 shadow-inner relative">
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-white text-blue-600 text-[10px] font-black px-4 py-0.5 rounded-full shadow-md leading-none">月給報酬</div>
                <p className="text-[10px] font-bold opacity-80 uppercase tracking-widest mb-1 mt-1 text-white/80">Monthly Reward</p>
                <p className="text-3xl md:text-4xl font-black italic">約 {person.reward}</p>
              </div>
              <p className="text-[11px] opacity-95 leading-relaxed font-medium bg-black/10 p-4 rounded-xl mt-4 whitespace-pre-wrap text-center">
                {person.message}
              </p>
            </div>
            <div className="mt-8 text-[10px] font-bold opacity-50 uppercase tracking-widest">Tap to back</div>
          </div>
        </div>
      </div>
    );
  };

  const HiringStoresSection = () => (
    <section id="hiring-stores" className="py-20 md:py-28 bg-white overflow-hidden">
      <div className="container mx-auto px-4 md:px-6 text-center">
        <div className="mb-12 md:mb-16">
          <span className="text-[10px] md:text-xs font-black tracking-[0.4em] text-slate-300 uppercase mb-4 block text-center">Store Recruitment</span>
          <h2 className="text-2xl md:text-5xl font-black text-slate-800 tracking-tight text-center leading-tight">募集中の店舗一覧</h2>
          <div className="w-12 md:w-20 h-1 bg-gradient-ciel mx-auto mt-6 rounded-full mb-8"></div>
          <p className="max-w-xl mx-auto text-slate-500 font-medium leading-relaxed text-sm md:text-base text-center">
            全国で現在募集している店舗一覧です。<br />
            気になるエリアから探せます。
          </p>
        </div>

        <div className="max-w-5xl mx-auto mb-8 md:mb-12 overflow-hidden">
          <div className="flex overflow-x-auto gap-2 md:justify-center pb-4 hide-scrollbar snap-x px-4">
            {Object.keys(HIRING_STORES_DATA).map((region) => {
              const count = HIRING_STORES_DATA[region].length;
              const isActive = activeRegion === region;
              return (
                <button
                  key={region}
                  onClick={() => setActiveRegion(region)}
                  className={`px-5 py-2.5 rounded-full text-[12px] md:text-sm font-bold whitespace-nowrap transition-all snap-center active:scale-95 ${
                    isActive ? 'bg-slate-900 text-white shadow-lg' : 'bg-slate-100 text-slate-400'
                  }`}
                >
                  {region}({count})
                </button>
              );
            })}
          </div>
        </div>

        <div className="relative group max-w-7xl mx-auto px-4 md:px-0">
          <button onClick={() => scrollHStores('left')} className="hidden lg:flex absolute left-0 top-1/2 -translate-y-1/2 -translate-x-6 z-10 w-12 h-12 bg-white rounded-full shadow-xl items-center justify-center text-slate-400 hover:text-slate-800 transition-all active:scale-90">
            <ChevronLeft size={24} />
          </button>
          <button onClick={() => scrollHStores('right')} className="hidden lg:flex absolute right-0 top-1/2 -translate-y-1/2 translate-x-6 z-10 w-12 h-12 bg-white rounded-full shadow-xl items-center justify-center text-slate-400 hover:text-slate-800 transition-all active:scale-90">
            <ChevronRight size={24} />
          </button>

          <div ref={hStoresScrollRef} className="flex gap-4 md:gap-6 overflow-x-auto snap-x snap-mandatory hide-scrollbar pb-8">
            {HIRING_STORES_DATA[activeRegion].map((store, idx) => (
              <div key={idx} className="min-w-[85%] md:min-w-[45%] lg:min-w-[31%] snap-center bg-white rounded-[2rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-lg transition-all text-left">
                <div className="relative h-[180px] md:h-[220px] bg-slate-100 overflow-hidden">
                  <img src={store.image} alt={store.name} loading="lazy" className="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
                  <div className="absolute top-4 right-4 bg-[#06C755] text-white text-[9px] font-black px-3 py-1 rounded-full shadow-lg tracking-widest uppercase">Now Hiring</div>
                </div>
                <div className="p-6 md:p-8">
                  <div className="flex items-center gap-2 mb-2">
                    <MapPin size={12} className="text-blue-500" />
                    <span className="text-[10px] font-bold text-slate-400 tracking-wider uppercase">{store.region}</span>
                  </div>
                  <h3 className="text-lg font-bold text-slate-800 mb-6 leading-tight h-14 md:h-auto overflow-hidden line-clamp-2">{store.name}</h3>
                  <button onClick={() => navigateTo('contact')} className="inline-flex items-center gap-2 text-[11px] font-black text-blue-600 hover:opacity-70 transition-opacity active:opacity-50">
                    店舗詳細・相談はこちら <ArrowRight size={14} />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );

  const HomePage = () => (
    <div className="animate-fade-up">
      {/* Hero Section */}
      <section className="relative h-screen-dynamic flex flex-col items-center justify-center text-white text-center overflow-hidden">
        <div className="absolute inset-0 overflow-hidden">
          <div className="w-full h-full animate-kenburns bg-[url('https://i.imgur.com/An7uT2v.png')] bg-cover bg-center"></div>
          <div className="absolute inset-0 bg-black/35 backdrop-blur-[0.5px]"></div>
        </div>

        <div className="container mx-auto px-5 md:px-6 relative z-10 text-center">
          <div className="animate-fade-up inline-block px-4 py-1.5 glass-effect rounded-full text-[10px] md:text-sm font-bold tracking-widest mb-6 border border-white/20 shadow-xl">
            <ShieldCheck className="inline-block w-4 h-4 mr-2 -mt-1 text-blue-300" />
            30代・40代が “自分らしく働ける” サロン
          </div>

          <h1 className="animate-fade-up text-3xl md:text-7xl font-black mb-8 leading-[1.25] md:leading-[1.2] tracking-tight drop-shadow-2xl">
            <span className="text-gradient-shine">美容師を楽しめる場所へ。</span><br />
            <span className="text-lg md:text-5xl mt-2 block font-medium opacity-95">安心して続けられる働き方を。</span>
          </h1>

          <div className="animate-fade-up flex flex-wrap justify-center gap-2 md:gap-3 mb-10 max-w-2xl mx-auto">
            {['平均月収47万円', '顧客ゼロでも即入客', '有給消化率100%', '新規月300名以上'].map((tag, i) => (
              <div key={i} className="px-3 py-1.5 md:px-4 md:py-2 bg-white/15 backdrop-blur-md rounded-full border border-white/20 text-[9px] md:text-sm font-black shadow-lg uppercase">{tag}</div>
            ))}
          </div>

          <div className="animate-fade-up flex flex-col items-center gap-4">
            <button onClick={() => navigateTo('contact')} className="animate-pulse-line bg-[#06C755] text-white px-8 md:px-12 py-4 md:py-5 rounded-full text-base md:text-xl font-black flex items-center justify-center gap-3 shadow-2xl active:scale-95 transition-all">
              <MessageCircle className="fill-current w-6 h-6 md:w-7 md:h-7" /> LINEで働き方を相談する
            </button>
            <p className="text-[10px] md:text-sm font-bold text-white/90 flex flex-col gap-1 items-center bg-black/30 px-6 py-2.5 rounded-2xl backdrop-blur-md">
              <span>転職時期が未定の方も、お気軽にどうぞ.</span>
              <span className="opacity-70 text-[9px] md:text-[10px]">※サロン見学のみもOKです</span>
            </p>
          </div>
        </div>

        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce opacity-40 flex flex-col items-center gap-1 z-20">
           <span className="text-[7px] font-black tracking-widest uppercase mb-1">Scroll</span>
           <ChevronDown size={18} />
        </div>
      </section>

      {/* Safety Section */}
      <section id="safety" className="py-24 md:py-32 bg-white text-slate-800 text-center relative overflow-hidden">
        <div className="container mx-auto px-5 md:px-6">
          <div className="max-w-4xl mx-auto">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-red-50 text-red-600 rounded-full text-[10px] md:text-xs font-black uppercase tracking-widest mb-6">
              <ShieldAlert size={14} /> For Stylist's Lifestyle
            </div>
            <h2 className="text-3xl md:text-6xl font-black mb-8 leading-[1.3] text-slate-900 tracking-tight">
              <span className="text-blue-600 block md:inline">「休みを増やしたい。</span><br className="md:hidden" />
              <span className="text-blue-600">でも収入は下げたくない。」</span>
            </h2>
            <p className="text-slate-500 font-bold text-sm md:text-lg mb-16 leading-relaxed max-w-2xl mx-auto text-center">
              30代・40代の美容師さんが抱える「将来への不安」。<br className="hidden md:block" />
              実績に基づいた“リアルな安心”をお約束します。
            </p>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-8 mt-12">
              {[
                { title: "収入が安定する理由", img: "https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=800", icon: <Landmark size={20} />, text: "固定給保証があるから、体調不良や閑散期でも安心。その上で高還元率の歩合が加わるため、業務委託以上の「高収入」と「安定」が両立します。", color: "text-blue-600" },
                { title: "心が楽になる理由", img: "https://i.imgur.com/if3Tlwm.jpeg", icon: <Home size={20} />, text: "上下関係がなく、互いを尊重する「大人な環境」。土日休みも相談しやすく、無理な残業もありません。人間関係のストレスから解放されます。", color: "text-green-600" },
                { title: "続けられる理由", img: "https://i.imgur.com/eZ1tpoU.png", icon: <HeartHandshake size={20} />, text: "産休・育休の100%取得はもちろん、復帰後の時短勤務も当たり前。年齢を重ねても「自分に合うペース」で長く働き続けられる制度があります。", color: "text-purple-600" }
              ].map((card, i) => (
                <div key={i} className="group bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col text-left">
                  <div className="relative h-60 md:h-64 overflow-hidden">
                    <img src={card.img} alt={card.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" loading="lazy" />
                    <div className="absolute top-5 left-5 w-10 h-10 bg-white/95 backdrop-blur rounded-xl shadow-lg flex items-center justify-center font-bold">
                      {React.cloneElement(card.icon, { className: card.color })}
                    </div>
                  </div>
                  <div className="p-8 flex flex-col flex-grow">
                    <h3 className="font-black text-xl mb-4 text-slate-900 leading-tight">{card.title}</h3>
                    <p className="text-[13px] md:text-sm text-slate-600 leading-relaxed font-medium">{card.text}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Salary Section */}
      <section id="salary" className="py-20 md:py-32 bg-slate-900 text-white overflow-hidden relative">
        <div className="container mx-auto px-5 md:px-6">
          <div className="text-center mb-12 md:mb-20">
            <span className="text-[10px] md:text-xs font-black tracking-[0.4em] text-blue-400 uppercase mb-4 block text-center">Real Salary Story</span>
            <h2 className="text-2xl md:text-5xl font-black tracking-tight text-center leading-tight">収入の不安を、ちゃんと<br className="md:hidden" />解消できる働き方があります</h2>
            <div className="w-16 md:w-20 h-1 bg-gradient-ciel mx-auto mt-6 rounded-full mb-8"></div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 max-w-6xl mx-auto">
            <div className="group bg-white/5 backdrop-blur-md rounded-[3rem] overflow-hidden border border-white/10 p-8 md:p-12 text-left">
              <div className="mb-8">
                <p className="text-blue-300 text-[10px] font-black uppercase tracking-[0.3em] mb-4">Salary Step Up</p>
                <div className="space-y-5 mb-8">
                  <div className="flex items-center gap-4">
                    <span className="text-[10px] md:text-[11px] font-bold opacity-40 w-16">前職</span>
                    <span className="text-xl font-medium opacity-60 text-slate-300 underline decoration-red-500/50 decoration-2">28万円</span>
                  </div>
                  <div className="flex items-center gap-4 border-l-2 border-blue-500/30 ml-8 pl-4 py-1">
                    <span className="text-[10px] md:text-[11px] font-bold text-blue-400 w-16">入社1ヶ月</span>
                    <span className="text-2xl font-bold text-blue-300">32万円</span>
                  </div>
                  <div className="flex items-center gap-4">
                    <span className="text-[10px] md:text-[11px] font-black text-blue-400 w-16 uppercase">Current</span>
                    <div className="flex items-end gap-1 leading-none">
                      <span className="text-5xl md:text-7xl font-black text-white italic">47</span>
                      <span className="text-lg md:text-xl font-bold mb-1">万円以上</span>
                    </div>
                  </div>
                </div>
                <p className="text-[13px] md:text-sm text-slate-300 font-medium leading-relaxed bg-white/5 p-5 rounded-2xl border border-white/5">
                  「顧客がいないから不安...」という方も大丈夫。CIELでは毎月300名以上の新規客をご案内しているため、入社初月から即戦力として活躍できます。
                </p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-white/5 p-5 rounded-2xl border border-white/5 flex flex-col justify-center">
                  <span className="text-[10px] font-black text-slate-400 block mb-1">フリー客還元</span>
                  <span className="text-lg md:text-xl font-bold text-white leading-none">40%</span>
                </div>
                <div className="bg-gradient-ciel p-5 rounded-2xl shadow-xl flex flex-col justify-center">
                  <span className="text-[10px] font-black text-white/70 block mb-1 text-left uppercase">Nomination</span>
                  <span className="text-lg md:text-xl font-bold text-white text-left leading-none">45%</span>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-[3rem] p-8 md:p-12 shadow-2xl text-slate-900 relative flex flex-col justify-center text-left">
               <div className="flex items-center gap-3 mb-8">
                 <div className="w-1.5 h-6 bg-gradient-ciel rounded-full"></div> 
                 <h3 className="text-xl font-black leading-tight">初月から約束される<br className="md:hidden" />安心の報酬額</h3>
               </div>
               <div className="space-y-4">
                 {[
                   { label: "月給保証", value: "320,000円", note: "どんなに売上が少なくても、この金額は必ず支給" },
                   { label: "月給内訳", value: "27万円＋歩合＋祝金＋手当", note: "安定感抜群のベースに、頑張った分が上乗せ" },
                   { label: "入社お祝い金", value: "40,000円", note: "半年間毎月支給。新しい生活を応援します" },
                   { label: "交通費", value: "10,000円", note: "各種手当も充実。詳細はお問い合わせを" }
                 ].map((row, i) => (
                   <div key={i} className="group border-b border-slate-50 pb-3">
                     <div className="flex justify-between items-center mb-1">
                       <span className={`text-sm md:text-base font-bold ${i === 0 ? 'text-blue-600' : 'text-slate-500'}`}>{row.label}</span>
                       <span className={`text-base md:text-xl font-black ${i === 0 ? 'text-blue-600' : 'text-slate-800'}`}>{row.value}</span>
                     </div>
                     <p className="text-[11px] text-slate-400 font-bold">{row.note}</p>
                   </div>
                 ))}
                 <div className="pt-6 text-right">
                   <p className="text-[10px] text-slate-400 font-black mb-1 opacity-70 uppercase tracking-widest">Guaranteed Minimum</p>
                   <div className="text-4xl md:text-6xl font-black text-gradient-ciel font-serif italic leading-none">
                     ¥320,000〜
                   </div>
                 </div>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* Selector Style section */}
      <section id="work-style-selector" className="py-20 md:py-32 bg-slate-50 overflow-hidden">
        <div className="container mx-auto px-5 md:px-6 text-center">
          <div className="text-center mb-16 md:mb-24">
            <span className="text-[10px] md:text-xs font-black tracking-[0.4em] text-blue-500 uppercase mb-4 block text-center">Life Style Design</span>
            <h2 className="text-3xl md:text-5xl font-black text-slate-900 tracking-tight text-center leading-tight">ガッツリ稼ぐか、<br className="md:hidden" />無理せず続けるか。</h2>
            <div className="w-16 md:w-20 h-1 bg-gradient-ciel mx-auto mt-6 rounded-full mb-8"></div>
            <p className="max-w-xl mx-auto text-slate-500 font-bold text-sm md:text-base px-4 text-center leading-relaxed">
              体力や生活環境に合わせて選べる2つのコース。<br className="hidden md:block" />
              ライフステージが変わっても、ずっと正社員でいられるための選択肢です.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 max-w-7xl mx-auto text-left">
            {[
              { 
                id: "01",
                title: "通常正社員：収入もキャリアも大切にしたい方へ", 
                target: "平均月収 47万円以上",
                base: "32万円＋歩合",
                img: "https://i.imgur.com/KPx1oc6.png",
                color: "slate-900",
                features: ["月給27万円＋歩合＋祝金", "フリー40% / 指名45% 還元", "マネジメント・独立支援あり"],
                desc: "集客力抜群の環境で、しっかり稼ぎたい方向け。指名45%・フリー40%の業界最高クラスの歩合で、入社初年度からゆとりある生活を。"
              },
              { 
                id: "02",
                title: "時短正社員スタイル：私生活を絶対に犠牲にしない", 
                target: "6h / 7h 選べる時短形態",
                base: "15.0万円〜 + 歩合",
                img: "https://i.imgur.com/3Z79Qgm.png",
                color: "blue-500",
                features: ["6時間：15.0万円〜保証", "7時間：17.0万円〜保証", "コースはいつでも変更可能"],
                desc: "夕方には帰りたい、土日休みを増やしたい方向け。正社員の安定した保障（社保・有給）はそのままに、無理のない時間で活躍できます。"
              }
            ].map((style, i) => (
              <div key={i} className="flex flex-col">
                <div className="mb-6 flex items-center gap-3">
                  <div className={`w-10 h-10 bg-${style.color} text-white rounded-full flex items-center justify-center font-black text-lg shrink-0`}>{style.id}</div>
                  <h3 className="text-xl md:text-2xl font-black text-slate-900 leading-tight">{style.title}</h3>
                </div>
                <div className={`group bg-white rounded-[3rem] overflow-hidden shadow-sm border border-slate-100 flex flex-col transition-all hover:shadow-2xl border-t-4 border-t-${style.color}`}>
                  <div className="relative h-64 md:h-72 overflow-hidden">
                    <img src={style.img} alt={style.title} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" loading="lazy" />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div className="absolute bottom-6 left-6 text-white text-left">
                      <p className="text-[10px] font-black uppercase tracking-widest opacity-80 mb-1">Target Reward</p>
                      <div className="flex items-end gap-1 leading-none">
                        <span className="text-2xl md:text-3xl font-black italic">{style.target}</span>
                      </div>
                    </div>
                  </div>
                  <div className="p-8 md:p-10 flex flex-col flex-grow">
                    <div className="mb-8">
                      <p className="text-slate-500 text-[13px] md:text-sm leading-relaxed mb-6 font-medium">{style.desc}</p>
                      <div className={`bg-${i === 0 ? 'slate-50' : 'blue-50/30'} rounded-2xl p-6 border border-slate-100/50`}>
                        <div className="text-2xl font-black text-slate-900 leading-none">
                          {style.base}
                        </div>
                      </div>
                    </div>
                    <ul className="space-y-4 mb-auto">
                      {style.features.map((f, j) => (
                        <li key={j} className="flex items-center gap-3 text-slate-700 font-bold text-[13px] md:text-sm">
                          <CheckCircle2 size={16} className="text-[#06C755] shrink-0" /> {f}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-16 max-w-4xl mx-auto px-2">
             <div className="bg-white rounded-[2.5rem] p-7 md:p-10 border border-slate-100 flex flex-col md:flex-row items-center gap-6 md:gap-10 shadow-sm text-left">
                <div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 shrink-0">
                   <RefreshCw size={32} />
                </div>
                <div>
                   <h5 className="font-black text-slate-900 text-lg mb-2">コース変更はいつでも自由です</h5>
                   <p className="text-slate-500 text-sm leading-relaxed font-medium">
                     「子供が小さいから今は時短で」「手が離れたらフルタイムで稼ぎたい」。CIELではライフステージに合わせ、途中で働き方を変えるのが当たり前。あなたの人生にサロンが合わせます。
                   </p>
                </div>
             </div>
          </div>
        </div>
      </section>

      {/* 5 Reasons section */}
      <section id="benefits" className="py-20 md:py-32 bg-white overflow-hidden">
        <div className="container mx-auto px-5 md:px-6 text-center">
          <div className="mb-16 md:mb-20">
            <span className="text-[10px] md:text-xs font-black tracking-[0.4em] text-slate-300 uppercase mb-4 block text-center">Why Ciel</span>
            <h2 className="text-2xl md:text-5xl font-black text-slate-800 tracking-tight text-center leading-tight">ここなら「自分らしく」<br className="md:hidden" />いられる5つの理由</h2>
            <div className="w-12 md:w-20 h-1 bg-gradient-ciel mx-auto mt-6 rounded-full"></div>
          </div>
          <div className="max-w-4xl mx-auto space-y-6 md:space-y-8">
            {[
              { title: "集客は会社がやります。<br />新規月300名以上のチャンス", desc: "ビラ配りやモデル探し、SNSの義務化など、美容師以外の仕事に疲れていませんか？集客はすべて本部にお任せください。あなたは目の前のお客様に集中するだけです。", icon: <Users className="text-blue-500" /> },
              { title: "「今すぐ」給与アップ。<br />月給27万円〜＋高歩合", desc: "現在の働き方に合わせて、収入の目安をお伝えできます。入社したその月から生活を保障し、さらに頑張りはそのまま給与へ反映されます。", icon: <Coins className="text-amber-500" /> },
              { title: "自分の時間を大切に。<br />完全週休2日・土日も相談可", desc: "「休めないのが当たり前」という時代は終わりました。家族とのイベントや趣味の時間、有給休暇を使って海外旅行に行くスタッフもたくさんいます。", icon: <Calendar className="text-green-500" /> },
              { title: "戻れる場所がある。<br />産休・育休からの復帰 100％", desc: "結婚や出産をキャリアの終わりだと思わないでください。時短正社員として戻ってくるスタッフは非常に多く、ママさん美容師も多数活躍中です。", icon: <Baby className="text-pink-500" /> },
              { title: "心穏やかな人間関係。<br />派閥も、強制も、なし。", desc: "美容室特有の「派閥」や「居残り練習の強要」などはありません。30代以上の落ち着いた大人が揃っているからこそ、ドライでいて温かい、居心地の良い関係です。", icon: <Heart className="text-red-500" /> }
            ].map((benefit, idx) => (
              <div key={idx} className="flex flex-col md:flex-row items-start gap-5 md:gap-6 bg-slate-50 p-7 md:p-8 rounded-[2rem] border border-slate-100 transition-all hover:bg-white hover:shadow-xl group text-left">
                <div className="shrink-0 w-14 h-14 rounded-2xl bg-white shadow-sm flex items-center justify-center text-slate-400 group-hover:text-blue-500 transition-colors">
                  {benefit.icon}
                </div>
                <div>
                  <h3 className="text-lg md:text-xl font-black mb-3 text-slate-800 leading-tight flex items-start gap-2">
                    <span className="text-[10px] md:text-sm font-black text-slate-300 mt-1 uppercase">0{idx + 1}</span>
                    <span dangerouslySetInnerHTML={{ __html: benefit.title }}></span>
                  </h3>
                  <p className="text-slate-600 leading-relaxed font-medium text-[13px] md:text-base">{benefit.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Work Balance Section */}
      <section id="balance" className="py-20 md:py-32 bg-slate-50 overflow-hidden">
        <div className="container mx-auto px-5 md:px-6">
          <div className="flex flex-col md:flex-row items-end gap-2 mb-12">
             <h2 className="text-3xl md:text-6xl font-black text-slate-200 tracking-tighter uppercase leading-none">WORK BALANCE</h2>
             <span className="text-slate-400 font-bold text-lg md:text-2xl leading-none italic">/ The Reality</span>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <FlipCard person={{ 
              area: "九州エリア", name: "Rさん", age: "27歳", type: "週休2日　社歴3ヶ月", career: "フリー入客中心", sales: "900,000円", reward: "37万円", 
              image: "https://i.imgur.com/E600wi5.png",
              message: "Before：業務委託で休みなしで働いて手取り30万円。\nAfter：CIELに入って休みも増え、手取り37万円にアップ！"
            }} />
            <FlipCard person={{ 
              area: "関西エリア", name: "Uさん", age: "32歳", type: "週休2日 時短7時間勤務", career: "社歴 5ヶ月目", sales: "1,000,000円", reward: "40万円", 
              image: "https://i.imgur.com/tYEka6w.png",
              message: "Before：出産後、パートで細々と。将来が不安でした。\nAfter：時短正社員として復職. 社会保険も完備で安心です。"
            }} />
            <FlipCard person={{ 
              area: "関西エリア", name: "Oさん", age: "39歳", type: "週休2日 フルタイム", career: "社歴 7ヶ月目", sales: "1,200,000円", reward: "50万円", 
              image: "https://i.imgur.com/54P4nVX.jpeg",
              position: "object-top",
              message: "Before：前職は指名数に振り回されて疲弊していました。\nAfter：フリー客が多いので、指名に固執せず安定して稼げています。"
            }} />
          </div>
        </div>
      </section>

      <HiringStoresSection />

      {/* Holiday Section */}
      <section id="holiday" className="py-20 md:py-32 bg-white text-center">
        <div className="container mx-auto px-5 md:px-6">
          <h2 className="text-2xl md:text-4xl font-black mb-14 md:mb-16 tracking-widest text-slate-800 uppercase italic">プライベートも、全力。</h2>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-16 md:mb-20 max-w-5xl mx-auto text-center">
            {[
              { name: "推し活休暇", icon: <Heart size={28} />, color: "bg-pink-50 text-pink-600 border-pink-100" },
              { name: "誕生日休暇", icon: <Gift size={28} />, color: "bg-orange-50 text-orange-600 border-orange-100" },
              { name: "旅行休暇", icon: <Plane size={28} />, color: "bg-blue-50 text-blue-600 border-blue-100" },
              { name: "自分磨き休暇", icon: <Scissors size={28} />, color: "bg-purple-50 text-purple-600 border-purple-100" }
            ].map((item, i) => (
              <div key={i} className={`${item.color} p-8 md:p-10 rounded-[2.5rem] border transition-all shadow-sm hover:shadow-lg active:scale-95 group flex flex-col items-center justify-center`}>
                <div className="mb-4 group-hover:scale-110 transition-transform">{item.icon}</div>
                <div className="font-black text-[12px] md:text-sm tracking-tight">{item.name}</div>
              </div>
            ))}
          </div>
          <div className="max-w-4xl mx-auto flex justify-around items-center text-slate-400 border-t border-slate-50 pt-12">
             <div className="text-center">
                <p className="text-3xl md:text-6xl font-black text-slate-800 leading-none">100%</p>
                <p className="text-[10px] md:text-xs font-black mt-3 uppercase tracking-widest text-slate-400">産休育休取得率</p>
             </div>
             <div className="w-px h-12 bg-slate-100"></div>
             <div className="text-center">
                <p className="text-3xl md:text-6xl font-black text-slate-800 leading-none uppercase">OK</p>
                <p className="text-[10px] md:text-xs font-black mt-3 uppercase tracking-widest text-slate-400">土日祝休み相談</p>
             </div>
          </div>
        </div>
      </section>

      {/* Global CTA Section */}
      {currentPage !== 'contact' && (
        <section className="py-24 md:py-32 bg-gradient-ciel text-white text-center relative overflow-hidden">
          <div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
          <div className="container mx-auto px-5 relative z-10">
            <h2 className="text-3xl md:text-6xl font-black mb-8 leading-tight">
              あなたの「理想の働き方」、<br />一緒に考えませんか？
            </h2>
            <p className="text-white/80 font-bold mb-14 max-w-2xl mx-auto text-sm md:text-xl leading-relaxed">
              現在のサロンでの悩みや、将来への不安。CIELの担当者が1対1で親身にお答えします。まずは気軽な「LINE相談」から始めましょう。
            </p>
            <button 
              onClick={() => navigateTo('contact')}
              className="inline-flex items-center gap-4 bg-white text-slate-900 px-10 py-6 rounded-full text-xl md:text-2xl font-black shadow-2xl hover:scale-105 active:scale-95 transition-all"
            >
              <MessageCircle className="text-[#06C755] fill-current w-8 h-8" />
              公式LINEで無料相談する
            </button>
          </div>
        </section>
      )}
    </div>
  );

  const StoresPage = () => {
    const [searchQuery, setSearchQuery] = useState("");
    const filteredStores = ALL_STORES.filter(s => 
      s.name.includes(searchQuery) || s.address.includes(searchQuery) || s.region.includes(searchQuery)
    );

    return (
      <div className="animate-fade-up pt-24 pb-20 bg-white min-h-screen">
        <section className="container mx-auto px-5 md:px-6 mb-12">
          <div className="text-center mb-12">
            <h1 className="text-3xl md:text-6xl font-black text-slate-900 mb-4 tracking-tight uppercase">STORES</h1>
            <p className="text-slate-500 font-bold text-sm md:text-base">全国のCIEL店舗一覧です。お近くの店舗をお探しください。</p>
          </div>
          
          <div className="max-w-xl mx-auto mb-16 relative">
            <div className="absolute inset-y-0 left-5 flex items-center text-slate-400">
              <Search size={22} />
            </div>
            <input 
              type="text" 
              placeholder="エリア名・店舗名で検索..." 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-slate-100 border-none rounded-full py-5 pl-14 pr-6 text-sm font-bold focus:ring-2 focus:ring-blue-500 transition-all outline-none shadow-inner"
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
            {filteredStores.map(store => (
              <div key={store.id} className="bg-white rounded-[2.5rem] p-7 md:p-10 border border-slate-100 shadow-sm hover:shadow-xl transition-all group text-left">
                <div className="flex items-center gap-2 mb-5">
                  <span className="px-3 py-1 bg-blue-50 text-blue-600 text-[10px] font-black rounded-full uppercase tracking-widest">{store.region}</span>
                </div>
                <h3 className="text-xl md:text-2xl font-black text-slate-900 mb-8 group-hover:text-blue-600 transition-colors leading-tight">{store.name}</h3>
                <div className="space-y-4 text-[13px] md:text-sm text-slate-500 mb-10 font-medium">
                  <div className="flex gap-4">
                    <MapPin size={18} className="shrink-0 text-slate-300" />
                    <span>{store.address}</span>
                  </div>
                  <div className="flex gap-4">
                    <Phone size={18} className="shrink-0 text-slate-300" />
                    <span className="font-black">{store.tel}</span>
                  </div>
                  <div className="flex gap-4">
                    <Clock size={18} className="shrink-0 text-slate-300" />
                    <span>{store.hours}</span>
                  </div>
                </div>
                
                <button 
                  onClick={() => navigateTo('contact')} 
                  className="w-full py-4 bg-slate-900 text-white rounded-[1.25rem] text-[13px] font-black flex items-center justify-center gap-2 hover:bg-[#06C755] active:scale-95 transition-all shadow-lg"
                >
                  <MessageCircle size={18} className="fill-current" />
                  この店舗についてLINEで聞く
                </button>
              </div>
            ))}
          </div>
          
          {filteredStores.length === 0 && (
            <div className="py-24 text-center">
              <p className="text-slate-400 font-black text-lg">該当する店舗が見つかりませんでした。</p>
            </div>
          )}
        </section>
      </div>
    );
  };

  const ContactPage = () => (
    <div className="animate-fade-up pt-28 pb-20 bg-slate-50 min-h-screen-dynamic">
      <div className="container mx-auto px-5 md:px-6">
        <div className="max-w-4xl mx-auto text-center mb-16 md:mb-20">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-[#06C755]/10 text-[#06C755] rounded-full text-[10px] md:text-xs font-black uppercase tracking-widest mb-6">
            <MessageCircle size={14} className="fill-current" /> Official Recruit LINE
          </div>
          <h1 className="text-3xl md:text-7xl font-black text-slate-900 mb-8 leading-tight tracking-tight">
            まずは相談・見学だけ。<br className="md:hidden" />
            あなたの「今」を教えてください。
          </h1>
          <p className="text-slate-500 font-bold text-sm md:text-xl leading-relaxed max-w-2xl mx-auto">
            正式な応募ではなく、まずは働き方の相談やサロンの見学からスタートできます。<br className="hidden md:block" />
            担当者が個別にお答えしますので、安心してメッセージをお送りください。
          </p>
        </div>

        {/* 3 Step Process */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mb-20">
          {[
            { step: "01", icon: <UserPlus className="text-blue-500" />, title: "友だち追加", desc: "下のボタンから公式LINEを友だち追加してください。" },
            { step: "02", icon: <Send className="text-[#06C755]" />, title: "メッセージ送信", desc: "「見学希望」や「給与の相談」など、気軽にお送りください。" },
            { step: "03", icon: <Sparkle className="text-amber-500" />, title: "個別相談・見学", desc: "担当者から返信いたします。日程などを調整しましょう。" }
          ].map((item, i) => (
            <div key={i} className="bg-white rounded-[2.5rem] p-8 md:p-10 border border-slate-100 shadow-sm relative overflow-hidden group">
              <span className="absolute -top-3 -right-3 text-8xl font-black text-slate-100 opacity-20 group-hover:opacity-30 transition-opacity leading-none tracking-tighter">{item.step}</span>
              <div className="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-8 text-slate-400 group-hover:scale-110 group-hover:bg-white transition-all shadow-inner">
                {React.cloneElement(item.icon, { size: 28 })}
              </div>
              <h3 className="text-xl font-black text-slate-900 mb-4">{item.title}</h3>
              <p className="text-sm text-slate-500 leading-relaxed font-bold">{item.desc}</p>
            </div>
          ))}
        </div>

        {/* Support Section */}
        <div className="bg-white rounded-[3rem] p-8 md:p-20 border border-slate-100 shadow-2xl mb-12 overflow-hidden relative">
          <div className="absolute top-0 right-0 w-80 h-80 bg-gradient-ciel opacity-10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
          
          <div className="flex flex-col lg:flex-row items-center gap-14 relative z-10">
            <div className="lg:w-1/2 text-left">
              <h2 className="text-3xl md:text-5xl font-black text-slate-900 mb-8 leading-tight">
                こんな相談を<br className="hidden md:block" />いただいています
              </h2>
              <ul className="space-y-4">
                {[
                  "今のサロンより手取り報酬を増やしたい",
                  "時短で正社員として働ける店舗を知りたい",
                  "ブランクがあるけど、研修制度はある？",
                  "人間関係が良い店舗の見学がしたい！"
                ].map((q, i) => (
                  <li key={i} className="flex items-center gap-4 text-slate-600 font-bold bg-slate-50 p-5 rounded-2xl border border-slate-100/50">
                    <div className="w-6 h-6 bg-[#06C755] text-white rounded-full flex items-center justify-center shrink-0">
                      <ChevronRight size={14} />
                    </div>
                    <span className="text-[13px] md:text-base leading-snug">{q}</span>
                  </li>
                ))}
              </ul>
            </div>
            
            <div className="lg:w-1/2 w-full flex flex-col items-center">
              <div className="bg-[#06C755]/5 p-8 md:p-12 rounded-[2.5rem] border border-[#06C755]/10 w-full text-center">
                <p className="text-[#06C755] font-black text-xs md:text-sm mb-6 tracking-[0.3em] uppercase italic">Tap to start conversation</p>
                <a href={lineUrl} target="_blank" rel="noopener noreferrer" className="animate-pulse-line bg-[#06C755] text-white px-10 py-6 md:py-7 rounded-full text-xl md:text-3xl font-black flex items-center justify-center gap-4 shadow-2xl active:scale-95 transition-all mb-8">
                  <MessageCircle className="fill-current w-8 h-8 md:w-10 md:h-10" /> LINEで相談をはじめる
                </a>
                <div className="space-y-2 text-slate-400 text-[11px] md:text-xs font-bold leading-relaxed">
                  <p>※友だち追加後に自動メッセージが届きます。</p>
                  <p>※専任担当者が誠実に対応させていただきます。</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 24h Support Card */}
        <div className="max-w-lg mx-auto">
          <div className="flex items-center gap-6 p-8 md:p-10 bg-white rounded-[2.5rem] border border-slate-100 shadow-xl text-left">
            <div className="w-16 h-16 bg-amber-50 text-amber-500 rounded-2xl flex items-center justify-center shrink-0 shadow-inner">
              <Timer size={32} />
            </div>
            <div>
              <h4 className="font-black text-slate-900 text-lg mb-2">24h受付中</h4>
              <p className="text-[12px] md:text-sm text-slate-500 font-bold leading-relaxed">メッセージはいつでも送信OK。担当者が確認次第、24時間以内に迅速にご返答させていただきます。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="bg-white min-h-screen font-sans selection:bg-blue-100 selection:text-blue-900">
      <style>{styles}</style>
      <Navbar />
      
      <main className="overflow-x-hidden">
        {currentPage === 'home' && <HomePage />}
        {currentPage === 'stores' && <StoresPage />}
        {currentPage === 'contact' && <ContactPage />}
      </main>

      {/* Footer */}
      <footer className="bg-black py-20 pb-28 md:pb-20">
        <div className="container mx-auto px-5 md:px-6 text-center">
          <div className="flex flex-col items-center gap-4 mb-14">
            <span className="text-4xl md:text-5xl font-black tracking-tighter text-white font-serif italic uppercase cursor-pointer" onClick={() => navigateTo('home')}>CIEL</span>
            <p className="text-[10px] text-white/30 font-black tracking-[0.6em] uppercase">OXY Corporation / Japan</p>
          </div>
          
          <div className="flex flex-wrap justify-center gap-x-10 gap-y-6 mb-14 text-[10px] md:text-[11px] font-black text-white/50 tracking-[0.2em] uppercase">
            <button onClick={() => navigateTo('home')} className="hover:text-white transition-colors">Concept</button>
            <button onClick={() => navigateTo('stores')} className="hover:text-white transition-colors">Stores</button>
            <button onClick={() => navigateTo('contact')} className="hover:text-[#06C755] transition-colors border-b-2 border-[#06C755] pb-1">Recruit LINE</button>
          </div>

          <div className="max-w-2xl mx-auto mb-14">
            <p className="text-[11px] md:text-[12px] text-white/25 leading-relaxed font-medium">
              CIELは「美容師が一生輝ける場所」を目指しています。集客・教育・福利厚生のすべてにおいて、現場で働くスタッフの声を反映させた環境づくりを徹底しています。転職のご相談やサロン見学は公式LINEより随任受け付けております。
            </p>
          </div>
          
          <p className="text-[9px] md:text-[10px] text-white/10 font-bold tracking-widest">&copy; 2024 CIEL / OXY Inc. All Rights Reserved.</p>
        </div>
      </footer>

      {/* Floating Action Button for Mobile - Optimized position */}
      <div className="fixed bottom-6 right-6 z-40 lg:hidden">
        <button 
          onClick={() => navigateTo('contact')} 
          className="w-16 h-16 bg-[#06C755] text-white rounded-full flex items-center justify-center shadow-2xl animate-pulse-line border-4 border-white active:scale-90 transition-transform"
          aria-label="LINE相談"
        >
          <MessageCircle size={30} className="fill-current" />
        </button>
      </div>
    </div>
  );
};

export default App;