/* ============ Detail page ============ */
function DetailPage({nav,id}){
  const {favs,toggle}=useFav();
  const s=DATA.SPOTS.find(x=>x.id===id)||DATA.SPOTS[0];
  const on=favs.includes(s.id);
  const related=DATA.SPOTS.filter(x=>x.id!==s.id && x.area===s.area).slice(0,3);
  const fallback=DATA.SPOTS.filter(x=>x.id!==s.id).slice(0,3);
  const rel=related.length>=3?related:[...related,...fallback].filter((v,i,a)=>a.indexOf(v)===i).slice(0,3);

  useEffect(()=>{window.scrollTo(0,0)},[id]);

  const badgeColor=s.badge==="event"?"var(--orange)":s.badge==="outing"?"var(--green)":"var(--blue)";

  return (
    <main className="page-fade">
      <div className="detail-hero"><Placeholder kind={s.img} seed={s.id}/></div>
      <div className="detail-wrap">
        <div className="detail-card">
          <div className="crumb" style={{padding:"0 0 12px"}}>
            <a onClick={()=>nav("home")}>ホーム</a><Icon n="chevR"/>
            <a onClick={()=>nav("list",{cat:s.cats[0]})}>{s.cats[0]}</a><Icon n="chevR"/>
            <span>{s.title}</span>
          </div>
          <div className="detail-badges">
            <span className="d-badge" style={{background:badgeColor}}>{s.type}</span>
            {s.open && <span className="d-badge" style={{background:"var(--blue)"}}>開催中</span>}
            <span className="d-badge" style={{background:s.fee==="無料"?"var(--green)":"var(--muted)"}}>{s.fee}</span>
            {/* §5/§9: PR・提供品は必ず明示（該当時のみ表示） */}
            {s.pr && <span className="d-badge" style={{background:"#c77b8b"}}>PR</span>}
          </div>
          <h1>{s.title}</h1>
          <p className="detail-sub">{s.lead}</p>
          <div className="detail-tags">{s.tags.map(t=><span key={t} className="tag">{t}</span>)}</div>
          <div className="detail-actions">
            <button className="btn-primary"><Icon n="pin"/>地図・アクセスを見る</button>
            <button className={"btn-ghost"+(on?" on":"")} onClick={()=>toggle(s.id,s.title)}>
              <Icon n={on?"heart":"heartline"}/>{on?"保存済み":"お気に入り"}
            </button>
          </div>
        </div>
      </div>

      <div className="detail-body">
        <div className="prose">
          <h2>このスポットについて</h2>
          {s.desc.map((p,i)=><p key={i}>{p}</p>)}
          <div className="gallery">
            <Placeholder kind={s.img} seed={s.id+"-g1"}/>
            <Placeholder kind={s.cats.includes("グルメ")?"food":"park"} seed={s.id+"-g2"}/>
          </div>
          <h2>親子で行くときのポイント</h2>
          <div className="editor-note">
            <span className="en-label"><Icon n="heartline"/>編集部メモ</span>
            <p>{s.tags.includes("ベビーカーOK")||s.tags.includes("0歳からOK")
              ?"ベビーカーでの移動や授乳・おむつ替えにも配慮されており、小さなお子さま連れでも安心して過ごせます。":
              s.rainy?"屋内中心のスポットなので、雨の日の急なおでかけ先としても重宝します。":
              "自然の中でのびのび体を動かせるので、お弁当やレジャーシートを持って行くのがおすすめです。"}
              {s.ages.includes("0〜3歳向け")?"小さなお子さま連れでも、無理なく楽しめます。":"年齢に合わせて、のびのび過ごせます。"}</p>
          </div>
          <p className="source-note">
            ※掲載内容は2024年4月時点の情報です。最新の開催日・営業時間・料金は、公式サイト等で必ずご確認ください。
            （情報に誤りを見つけられた場合は、編集部までお知らせください。）
          </p>
        </div>
        <aside>
          <div className="info-card">
            <h3>基本情報</h3>
            <div className="info-row"><span className="ik">エリア</span><span className="iv"><Icon n="pin"/>{s.loc}</span></div>
            <div className="info-row"><span className="ik">場所</span><span className="iv">{s.place}</span></div>
            <div className="info-row"><span className="ik">開催日</span><span className="iv">{s.date}</span></div>
            <div className="info-row"><span className="ik">時間</span><span className="iv"><Icon n="clock"/>{s.hours}</span></div>
            <div className="info-row"><span className="ik">料金</span><span className="iv"><Icon n="ticket"/>{s.fee}</span></div>
            <div className="info-row"><span className="ik">対象</span><span className="iv">{s.ages.join("・")}</span></div>
            <div className="info-row"><span className="ik">確認日</span><span className="iv">2024.04.20</span></div>
          </div>
        </aside>
      </div>

      <section className="related">
        <div className="wrap">
          <div className="sec-head">
            <span className="star"><Icon n="star"/></span>
            <h2 className="sec-title">同じエリアのおすすめ</h2>
            <button className="sec-more" onClick={()=>nav("list",{area:s.area})}>もっと見る <Icon n="chevR"/></button>
          </div>
          <div className="cards3">
            {rel.map(r=><SpotCard key={r.id} s={r} nav={nav}/>)}
          </div>
        </div>
      </section>

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