/* ============ Shared components ============ */
const {useState,useEffect,useRef,useContext,createContext}=React;

/* ---- favorites store ---- */
const FavCtx=createContext(null);
function FavProvider({children}){
  const [favs,setFavs]=useState(()=>{
    try{return JSON.parse(localStorage.getItem("oyako_favs")||"[]")}catch(e){return[]}
  });
  const [toast,setToast]=useState(null);
  useEffect(()=>{localStorage.setItem("oyako_favs",JSON.stringify(favs))},[favs]);
  const toggle=(id,title)=>{
    setFavs(f=>{
      const on=f.includes(id);
      setToast(on?"お気に入りから削除しました":"お気に入りに保存しました ♥");
      return on?f.filter(x=>x!==id):[...f,id];
    });
  };
  useEffect(()=>{if(!toast)return;const t=setTimeout(()=>setToast(null),2200);return()=>clearTimeout(t)},[toast]);
  return (
    <FavCtx.Provider value={{favs,toggle}}>
      {children}
      <div className={"toast"+(toast?" show":"")}><Icon n="heart"/>{toast}</div>
    </FavCtx.Provider>
  );
}
const useFav=()=>useContext(FavCtx);

/* ---- Header ---- */
const NAV=[
  {k:"home",label:"ホーム",icon:"home",page:"home"},
  {k:"event",label:"イベント",icon:"calendar",page:"list",filter:{cat:"イベント"}},
  {k:"spot",label:"おでかけスポット",icon:"baby",page:"list",filter:{cat:"おでかけスポット"}},
  {k:"rain",label:"雨の日",icon:"rain",page:"list",filter:{cat:"雨の日"}},
  {k:"free",label:"無料スポット",icon:"yen",page:"list",filter:{cat:"無料スポット"}},
  {k:"feature",label:"特集",icon:"tag",page:"list",filter:{}},
  {k:"area",label:"エリア",icon:"pin",page:"list",filter:{}},
];

function Header({nav,active}){
  const [drawer,setDrawer]=useState(false);
  useEffect(()=>{document.body.style.overflow=drawer?"hidden":"";},[drawer]);
  return (
    <React.Fragment>
      <header className="hdr">
        <div className="wrap hdr-in">
          <div className="brand" onClick={()=>nav("home")}>
            <span className="brand-mark"><Icon n="logo"/></span>
            <span className="brand-txt">
              <span className="brand-name">TOYAMA<br/>WEEKEND</span>
              <span className="brand-sub">富山の親子おでかけメディア</span>
            </span>
          </div>
          <nav className="nav">
            {NAV.map(n=>(
              <button key={n.k} className={"nav-item"+(active===n.k?" active":"")}
                onClick={()=>nav(n.page,n.filter)}>
                <Icon n={n.icon}/>{n.label}
              </button>
            ))}
          </nav>
          <div className="hdr-tools">
            <button className="icon-btn" aria-label="検索" onClick={()=>nav("list",{})}><Icon n="search"/></button>
            <span className="hdr-divider"></span>
            <button className="icon-btn menu-btn" aria-label="メニュー" onClick={()=>setDrawer(true)}><Icon n="menu"/></button>
          </div>
        </div>
      </header>
      <div className={"drawer-back"+(drawer?" open":"")} onClick={()=>setDrawer(false)}></div>
      <aside className={"drawer"+(drawer?" open":"")}>
        <div className="drawer-head">
          <span className="brand-name" style={{fontSize:"16px"}}>MENU</span>
          <button className="icon-btn" onClick={()=>setDrawer(false)}><Icon n="close"/></button>
        </div>
        {NAV.map(n=>(
          <button key={n.k} className="dnav" onClick={()=>{nav(n.page,n.filter);setDrawer(false)}}>
            <Icon n={n.icon}/>{n.label}
          </button>
        ))}
      </aside>
    </React.Fragment>
  );
}

/* ---- Spot card (big) ---- */
function SpotCard({s,nav}){
  const {favs,toggle}=useFav();
  const on=favs.includes(s.id);
  return (
    <article className="scard" onClick={()=>nav("detail",{id:s.id})}>
      <div className="scard-img">
        <Placeholder kind={s.img} seed={s.id}/>
        <span className={"badge "+s.badge}>{s.type}</span>
      </div>
      <div className="scard-body">
        <h3 className="scard-title">{s.title}</h3>
        <div className="scard-meta">{s.date}</div>
        <div className="scard-loc">{s.loc}・{s.place}</div>
        <div className="scard-tags">{s.tags.map(t=><span key={t} className="tag">{t}</span>)}</div>
        <button className={"heart"+(on?" on":"")} aria-label="お気に入り"
          onClick={e=>{e.stopPropagation();toggle(s.id,s.title)}}>
          <Icon n={on?"heart":"heartline"}/>
        </button>
      </div>
    </article>
  );
}

/* ---- Today list item ---- */
function TodayItem({s,nav}){
  return (
    <div className="titem" onClick={()=>nav("detail",{id:s.id})}>
      <div className="titem-img"><Placeholder kind={s.img} seed={s.id}/></div>
      <div className="titem-body">
        {s.open && <span className="mini-badge">開催中</span>}
        <div className="titem-title">{s.title}</div>
        <div className="titem-meta">{s.date}｜{s.loc}</div>
        <div className="titem-tags">{s.tags.slice(0,3).map(t=><span key={t} className="tag">{t}</span>)}</div>
      </div>
    </div>
  );
}

/* ---- CTA band ---- */
function CTABand(){
  return (
    <section className="cta">
      <div className="wrap cta-in">
        <div className="cta-phone"><PhoneMock/></div>
        <div className="cta-mid">
          <h3>いつでもどこでも<br/>おでかけ情報をチェック！</h3>
          <div className="cta-feats">
            <span className="cta-feat"><Icon n="heartline"/>お気に入り保存</span>
            <span className="cta-feat"><Icon n="bell"/>新着情報をお知らせ</span>
            <span className="cta-feat"><Icon n="pin"/>かんたんエリア検索</span>
          </div>
        </div>
        <div className="cta-btns">
          <a className="cta-btn cta-line"><span className="badge-ic"><Icon n="line"/></span>公式LINEで最新情報を受け取る<span className="chev"><Icon n="chevR"/></span></a>
          <a className="cta-btn cta-insta"><span className="badge-ic"><Icon n="insta"/></span>Instagramでも情報発信中！<span className="chev"><Icon n="chevR"/></span></a>
        </div>
      </div>
      <svg className="cta-waves" viewBox="0 0 1440 120" preserveAspectRatio="none">
        <path d="M0 70 Q 180 30 360 60 T 720 60 T 1080 55 T 1440 65 V120 H0Z" fill="#cfe2f3"/>
        <path d="M0 85 Q 200 55 400 78 T 800 78 T 1200 72 T 1440 82 V120 H0Z" fill="#b6d4ed"/>
        <g fill="#9cc1e3" opacity=".8">
          <path d="M120 95 l34-30 26 22 30-34 40 42z"/>
          <path d="M980 96 l40-34 30 26 26-30 44 46z"/>
          <path d="M1280 98 l30-26 24 20 22-26 34 38z"/>
        </g>
      </svg>
    </section>
  );
}
function PhoneMock(){
  return (
    <div style={{position:"relative",borderRadius:"26px",background:"#0f2c47",padding:"8px",
      boxShadow:"0 20px 40px rgba(16,42,69,.28)"}}>
      <div style={{borderRadius:"20px",overflow:"hidden",background:"#fff",aspectRatio:"9/19"}}>
        <div style={{height:"30%",background:"linear-gradient(120deg,#cfe6f7,#a9d0ee)",position:"relative"}}>
          <div style={{position:"absolute",top:8,left:10,fontSize:8,fontWeight:800,color:"#163a5f"}}>TOYAMA WEEKEND</div>
        </div>
        <div style={{padding:"8px"}}>
          <div style={{height:6,width:"60%",background:"#163a5f",borderRadius:4,marginBottom:8}}></div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:5}}>
            {["tulip","park","food"].map(k=><div key={k} style={{aspectRatio:"1",borderRadius:6,background:(PH[k]||PH.park).g}}></div>)}
          </div>
          <div style={{height:5,width:"80%",background:"#dbe6f0",borderRadius:3,margin:"8px 0 4px"}}></div>
          <div style={{height:5,width:"55%",background:"#dbe6f0",borderRadius:3}}></div>
        </div>
      </div>
      <div style={{position:"absolute",top:"14px",left:"50%",transform:"translateX(-50%)",
        width:"34px",height:"5px",borderRadius:"3px",background:"#0f2c47"}}></div>
    </div>
  );
}

/* ---- Footer ---- */
function Footer({nav}){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="brand" style={{cursor:"default"}}>
              <span className="brand-mark"><Icon n="logo"/></span>
              <span className="brand-txt">
                <span className="brand-name">TOYAMA<br/>WEEKEND</span>
                <span className="brand-sub">富山の親子おでかけメディア</span>
              </span>
            </div>
            <p>富山県内の親子で楽しめるおでかけスポットやイベント情報を、毎週末お届けします。</p>
          </div>
          <div className="foot-cols">
            <div className="foot-col">
              <h4>さがす</h4>
              <a onClick={()=>nav("list",{cat:"イベント"})}>イベント</a>
              <a onClick={()=>nav("list",{cat:"おでかけスポット"})}>おでかけスポット</a>
              <a onClick={()=>nav("list",{cat:"雨の日"})}>雨の日</a>
              <a onClick={()=>nav("list",{cat:"無料スポット"})}>無料スポット</a>
            </div>
            <div className="foot-col">
              <h4>エリア</h4>
              {DATA.AREAS.slice(0,5).map(a=><a key={a} onClick={()=>nav("list",{area:a})}>{a}</a>)}
            </div>
            <div className="foot-col">
              <h4>サイト情報</h4>
              <a>このサイトについて</a><a>運営会社</a><a>お問い合わせ</a><a>プライバシーポリシー</a>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2024 TOYAMA WEEKEND</span>
          <span>富山の親子のための、週末おでかけメディア</span>
          <span>※画像はイメージ図です。実際の写真は順次掲載します。</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window,{FavProvider,useFav,FavCtx,Header,SpotCard,TodayItem,CTABand,Footer,NAV});