/* ============ Home page ============ */
function Hero({nav}){
  const [q,setQ]=useState("");
  const go=()=>nav("list",{q});
  return (
    <section className="hero">
      <div className="hero-bg"><Placeholder kind="hero" seed="hero-main"/></div>
      <div className="wrap hero-in">
        <div className="hero-copy">
          <h1 className="hero-h1">子どもと、<br/>いい週末を。</h1>
          <p className="hero-lead">富山県の親子向けおでかけ情報</p>
          <div className="hero-search">
            <input value={q} onChange={e=>setQ(e.target.value)}
              onKeyDown={e=>e.key==="Enter"&&go()}
              placeholder="キーワードで検索"/>
            <button className="search-go" aria-label="検索" onClick={go}><Icon n="search"/></button>
          </div>
        </div>
        <WeatherWidget nav={nav}/>
      </div>
    </section>
  );
}

function WeatherWidget({nav}){
  return (
    <div className="weather">
      <div className="weather-h">今週末の天気</div>
      <div className="weather-grid">
        <div className="wcol">
          <div className="wd">5/25 (土)</div>
          <div className="wi"><Icon n="sun"/></div>
          <div className="wt">22℃ / 13℃</div>
          <div className="wp">降水確率 10%</div>
        </div>
        <div className="weather-div"></div>
        <div className="wcol">
          <div className="wd">5/26 (日)</div>
          <div className="wi"><Icon n="raincloud"/></div>
          <div className="wt">18℃ / 12℃</div>
          <div className="wp">降水確率 60%</div>
        </div>
      </div>
      {/* §6: 天気から「決められる」提案。土＝晴れ→屋外／日＝雨→室内へワンタップ誘導 */}
      <div className="weather-advice">
        <button className="wadv wadv-sun" onClick={()=>nav("list",{cat:"おでかけスポット"})}>
          <span className="wadv-ic"><Icon n="sun"/></span>
          <span className="wadv-tx"><b>土曜はおでかけ日和</b>外あそびスポットへ</span>
          <span className="wadv-go"><Icon n="chevR"/></span>
        </button>
        <button className="wadv wadv-rain" onClick={()=>nav("list",{cat:"雨の日"})}>
          <span className="wadv-ic"><Icon n="umbrella"/></span>
          <span className="wadv-tx"><b>日曜は雨の予報</b>室内施設がおすすめ</span>
          <span className="wadv-go"><Icon n="chevR"/></span>
        </button>
      </div>
      <div className="weather-tip"><Icon n="shirt"/>おすすめの服装：薄手の長袖＋羽織り</div>
    </div>
  );
}

const CATEGORIES=[
  {label:"イベントから探す",icon:"calendar",f:{cat:"イベント"}},
  {label:"雨の日でも楽しめる",icon:"umbrella",f:{cat:"雨の日"}},
  {label:"無料スポット",icon:"yen",f:{cat:"無料スポット"}},
  {label:"0〜3歳向け",icon:"baby",f:{age:"0〜3歳向け"}},
  {label:"4〜6歳向け",icon:"child",f:{age:"4〜6歳向け"}},
  {label:"小学生向け",icon:"bag",f:{age:"小学生向け"}},
  {label:"エリアから探す",icon:"pin",f:{}},
];
function CategoryStrip({nav}){
  return (
    <div className="wrap catstrip">
      <div className="catcard">
        {/* §6: 天気・年齢・エリアの3軸から「決められる」導線であることを明示 */}
        <div className="catcard-head">
          <h2>天気・年齢・エリアで、サッと決める</h2>
          <p>気になる条件をえらぶと、ぴったりのスポット一覧へ。</p>
        </div>
        <div className="catgrid">
          {CATEGORIES.map(c=>(
            <button key={c.label} className="cat" onClick={()=>nav("list",c.f)}>
              <span className="cat-ic"><Icon n={c.icon}/></span>
              <span className="cat-lb">{c.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* §北極星: 一覧より「提案」を優先。週末天気をふまえた編集部のイチオシを最前面に出し、3秒で決められるようにする */
function WeekendPick({nav}){
  const {favs,toggle}=useFav();
  // 土曜が晴れ → 週末は「屋外で開催中／いつでも行ける」スポットを主役にする
  const pick=DATA.SPOTS.find(s=>s.open&&s.tags.includes("屋外"))||DATA.SPOTS[0];
  const on=favs.includes(pick.id);
  return (
    <div className="wrap" style={{marginTop:30}}>
      <div className="wpick" onClick={()=>nav("detail",{id:pick.id})}>
        <div className="wpick-img">
          <Placeholder kind={pick.img} seed={pick.id}/>
          <span className={"badge "+pick.badge}>{pick.type}</span>
        </div>
        <div className="wpick-body">
          <span className="wpick-eyebrow"><Icon n="star"/>今週末のイチオシ</span>
          <h2 className="wpick-title">{pick.title}</h2>
          <p className="wpick-note">編集部より：土曜はおでかけ日和の予報です。{pick.loc}の{pick.place}は、家族みんなで体を動かすのにぴったり。まずはここから決めてみませんか？</p>
          <div className="wpick-tags">{pick.tags.map(t=><span key={t} className="tag">{t}</span>)}</div>
          <div className="wpick-actions">
            <span className="btn-primary"><Icon n="pin"/>このスポットを見る</span>
            <button className={"btn-ghost"+(on?" on":"")} onClick={e=>{e.stopPropagation();toggle(pick.id,pick.title)}}>
              <Icon n={on?"heart":"heartline"}/>{on?"保存済み":"お気に入り"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function FeatureBanners({nav}){
  return (
    <div className="banners">
      <div className="banner banner-rain" onClick={()=>nav("list",{cat:"雨の日"})}>
        <div className="banner-txt">
          <h3>雨の日でも楽しめる<br/>親子スポット特集</h3>
          <span className="btn-soft">特集を見る <Icon n="chevR"/></span>
        </div>
        <div className="banner-img"><Placeholder kind="rainkid"/></div>
      </div>
      <div className="banner banner-free" onClick={()=>nav("list",{cat:"無料スポット"})}>
        <div className="banner-txt">
          <span className="banner-yen">¥0</span>
          <div>
            <div className="banner-eyebrow">お財布にやさしい！</div>
            <h3>無料スポット特集</h3>
            <span className="btn-soft">特集を見る <Icon n="chevR"/></span>
          </div>
        </div>
        <div className="banner-img"><Placeholder kind="beach"/></div>
      </div>
    </div>
  );
}

function AreaBox({nav}){
  return (
    <div className="areabox">
      <h3>エリアから探す</h3>
      <ToyamaMap/>
      <button className="area-all" onClick={()=>nav("list",{})}>すべてのエリアを見る <Icon n="chevR"/></button>
      <div className="area-btns">
        {DATA.AREAS.slice(0,6).map((a,i)=>(
          <button key={a} className="area-btn" onClick={()=>nav("list",{area:i===5?"":a})}>
            {i===5?"その他エリア":a}
          </button>
        ))}
      </div>
    </div>
  );
}

function PopularArticles({nav}){
  return (
    <div>
      <div className="sec-head" style={{marginBottom:18}}>
        <h2 className="sec-title" style={{fontSize:21}}>人気の記事</h2>
        <button className="sec-more" onClick={()=>nav("list",{})}>もっと見る <Icon n="chevR"/></button>
      </div>
      <div className="arts">
        {DATA.ARTICLES.map(a=>(
          <article key={a.id} className="acard" onClick={()=>nav("list",{})}>
            <div className="acard-img">
              <Placeholder kind={a.img} seed={a.id}/>
              <span className="acard-badge">{a.badge}</span>
            </div>
            <div className="acard-title">{a.title}</div>
            <div className="acard-date">{a.date}</div>
          </article>
        ))}
      </div>
    </div>
  );
}

function MonthlyFeature({nav}){
  const [i,setI]=useState(0);
  const n=DATA.MONTHLY.length;
  useEffect(()=>{const t=setInterval(()=>setI(x=>(x+1)%n),5000);return()=>clearInterval(t)},[n]);
  return (
    <div>
      <div className="sec-head" style={{marginBottom:18}}>
        <h2 className="sec-title" style={{fontSize:21}}>今月の特集</h2>
      </div>
      <div className="monthly" onClick={()=>nav("list",{})}>
        {DATA.MONTHLY.map((m,idx)=>(
          <div key={idx} className={"slide"+(idx===i?" on":"")}><Placeholder kind={m.img} seed={"m"+idx}/></div>
        ))}
        <div className="monthly-txt">{DATA.MONTHLY[i].title.split("\n").map((l,k)=><div key={k}>{l}</div>)}</div>
        <div className="monthly-dots">
          {DATA.MONTHLY.map((_,idx)=>(
            <span key={idx} className={"mdot"+(idx===i?" on":"")}
              onClick={e=>{e.stopPropagation();setI(idx)}}></span>
          ))}
        </div>
        <button className="monthly-arrow" aria-label="次へ"
          onClick={e=>{e.stopPropagation();setI((i+1)%n)}}><Icon n="chevR"/></button>
      </div>
    </div>
  );
}

function Home({nav}){
  const recommend=DATA.SPOTS.slice(0,3);
  const today=DATA.SPOTS.filter(s=>s.open).slice(0,3);
  return (
    <main className="page-fade">
      <Hero nav={nav}/>
      <CategoryStrip nav={nav}/>
      <WeekendPick nav={nav}/>

      <section className="section wrap">
        <div className="feature-cols">
          <div>
            <div className="sec-head">
              <span className="star"><Icon n="star"/></span>
              <h2 className="sec-title">編集部が選ぶ、今週末のおすすめ</h2>
              <button className="sec-more" onClick={()=>nav("list",{})}>もっと見る <Icon n="chevR"/></button>
            </div>
            <div className="cards3">
              {recommend.map(s=><SpotCard key={s.id} s={s} nav={nav}/>)}
            </div>
          </div>
          <div>
            <div className="sec-head">
              <h2 className="sec-title" style={{fontSize:21}}>今日行けるスポット</h2>
              <button className="sec-more" onClick={()=>nav("list",{})}>もっと見る <Icon n="chevR"/></button>
            </div>
            <div className="todaybox">
              <div className="tlist">
                {today.map(s=><TodayItem key={s.id} s={s} nav={nav}/>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="wrap" style={{paddingBottom:8}}>
        <FeatureBanners nav={nav}/>
      </section>

      <section className="section wrap">
        <div className="bottom-grid">
          <AreaBox nav={nav}/>
          <PopularArticles nav={nav}/>
          <MonthlyFeature nav={nav}/>
        </div>
      </section>

      <CTABand/>
    </main>
  );
}
window.Home=Home;