/* =========================================================
   ページ群 2  (members/pages_more.jsx)
   落札相場 / 通信簿 / シミュレーター / カレンダー / 設定 / ログイン
   ========================================================= */

/* =================== 落札相場・結果 =================== */
function Market({ go }){
  const m=DATA.market;
  const all=DATA.resultsAll||DATA.results||[];
  const period=m.period||{count:all.length,nendo:"",from:"",to:""};
  const winners=m.winners||[];
  const byG=m.byGyoshu||[];
  const byScale=m.byScale||[];
  const monthly=m.monthly||[];

  const avg=a=>a.length?+(a.reduce((s,x)=>s+x,0)/a.length).toFixed(1):0;
  const median=a=>{ if(!a.length)return 0; const s=[...a].sort((x,y)=>x-y); return s[Math.floor(s.length/2)]; };

  const [gf,setGf]=React.useState("すべて");
  const [orgF,setOrgF]=React.useState("すべて");
  const orgs=["すべて",...Array.from(new Set(all.map(r=>r.org)))];
  const base=all.filter(r=>orgF==="すべて"||r.org===orgF);
  const gtypes=["すべて",...Array.from(new Set(base.map(r=>r.gyoshu)))];
  const rows=base.filter(r=>gf==="すべて"||r.gyoshu===gf);
  const estN=all.filter(r=>r.est).length;
  const orgTone=t=>t==="県"?"green":t==="市"?"blue":t==="町"?"orange":"gray";

  const mineTone=v=>v==="落札"?"green":v==="失格"?"red":v==="辞退"?"orange":v==="応札"?"blue":"gray";

  return (
    <div className="page">
      <PageHead ey="Market data" title="落札相場・結果データ" desc={`壱岐エリア（市・県）の落札実績 ${period.count.toLocaleString()}件${period.nendo?`（${period.nendo}年度`:""}${period.from?` ${period.from.slice(5)}〜${period.to.slice(5)}）`:period.nendo?"）":""}を蓄積。誰が・いくらで・どの時期に落札しているかを分析できます`}>
      </PageHead>

      {/* サマリー */}
      <div className="grid cols-4 mb">
        <Tile tone="blue" icon="doc" label="蓄積した落札案件" value={period.count.toLocaleString()} unit="件" meta={period.from?`${period.from}〜${period.to}`:"壱岐市・全工種"}/>
        <Tile tone="green" icon="chart" label="平均落札率" value={avg(all.map(r=>r.rate))} unit="%" meta="予定価格に対する落札額"/>
        <Tile tone="orange" icon="yen" label="発注規模の中央値" value={Math.round(median(all.map(r=>r.amount))/10000).toLocaleString()} unit="万" meta="落札額のちょうど真ん中"/>
        <Tile tone="blue" icon="building" label="落札した会社数" value={winners.length} unit="社" meta="地域で競合する顔ぶれ"/>
      </div>

      {/* 発注の出方（月別） */}
      {monthly.length>0 &&
      <Card className="mb" icon="calendar" title="発注の出方（月別の落札件数）" sub="年間を通して、いつ・どれくらい案件が出ているか">
        <Histo items={monthly.map(mo=>({band:mo.label,wins:mo.count}))}/>
        <div className="legend mt-s"><span><i style={{background:"#1a6fd0"}}></i>その月に落札が出た件数</span></div>
        <div className="small mut mt-s">※ 入札の公告は落札の数週間前に出ます。件数が多い月の少し前から動きが活発になります。</div>
      </Card>}

      <div className="grid cols-2">
        {/* 工種別 */}
        <Card icon="award" title="工種別の落札集計" sub="どの工種が多く・どの率で決まっているか">
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><th>工種</th><th className="num">件数</th><th className="num">平均落札率</th><th className="num">規模(中央)</th></tr></thead>
              <tbody>
                {byG.map((g,i)=>(
                  <tr key={i}>
                    <td><b>{g.gyoshu}</b></td>
                    <td className="num">{g.count}</td>
                    <td className="num">{g.avgRate}%</td>
                    <td className="num">{g.med.toLocaleString()}万</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {estN>0 && <div className="small mut mt-s">※ 長崎県発注の{estN}件は工種欄が無いため、工事名から推定して分類しています。</div>}
        </Card>

        {/* 規模帯 */}
        <Card icon="chart" title="発注規模の分布" sub="落札額の規模帯ごとの件数">
          <BarsH items={byScale.map(s=>({label:s.band,value:s.count}))} unit="件" height={190}/>
        </Card>
      </div>

      {/* 落札社ランキング */}
      <Card className="mb mt" icon="building" title="落札社ランキング（地域シェア）" sub="この地域で、誰がよく落札しているか。御社の競合の実力が分かります">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th className="num">#</th><th>会社</th><th className="num">落札件数</th><th className="num">落札総額</th><th className="num">平均落札率</th></tr></thead>
            <tbody>
              {winners.slice(0,15).map((w,i)=>(
                <tr key={i} style={w.me?{background:"rgba(245,135,31,.10)"}:null}>
                  <td className="num mut">{w.rank}</td>
                  <td><b style={w.me?{color:"#d96f08"}:null}>{w.name}{w.me?"（御社）":""}</b></td>
                  <td className="num"><b>{w.wins}</b></td>
                  <td className="num">{w.total.toLocaleString()}万</td>
                  <td className="num">{w.avgRate}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {winners.length>15 && <div className="small mut mt-s">ほか {winners.length-15} 社が1〜数件ずつ落札しています。</div>}
      </Card>

      {/* 落札率の分布 + 御社の応札 */}
      <Card className="mb" icon="chart" title="落札率の分布と御社の応札" sub="土木の落札率（落札額/予定価格）帯ごとの「落札件数」と「御社の応札回数」">
        <Histo items={DATA.distribution}/>
        <div className="legend mt-s">
          <span><i style={{background:"#1a6fd0"}}></i>落札が出た件数（土木・実績）</span>
          <span><i style={{background:"#f5871f"}}></i>御社が応札した回数</span>
        </div>
        <div className="alert warn mt" style={{borderRadius:14}}>
          <div className="ai"><Icon name="alert"/></div>
          <div><div className="at">御社の応札は低めに寄り、失格が出ています</div>
          <div className="ab">落札は <b style={{background:"rgba(26,111,208,.13)",padding:"1px 5px",borderRadius:5}}>93〜100%</b> の帯で多く出ています。御社の失格{DATA.record.disq}回は、最低制限を下回る低い札が原因。落札ライン直上にどう寄せるかが鍵です。</div></div>
        </div>
      </Card>

      {/* 落札案件の一覧（全件・実データ） */}
      <Card icon="doc" title={`落札案件の一覧（全${all.length}件）`} sub="壱岐エリアの落札結果データ。発注者・工種で絞り込めます。御社が関わった案件は色付き">
        <div className="fbar mb-s">
          <span className="fbar-lab">発注者</span>
          {orgs.map(o=>(
            <button key={o} className={"chip"+(orgF===o?" on":"")} onClick={()=>{setOrgF(o);setGf("すべて");}}>
              {o}<span className="cnt">{o==="すべて"?all.length:all.filter(r=>r.org===o).length}</span>
            </button>
          ))}
        </div>
        <div className="fbar alt mb">
          <span className="fbar-lab">工種</span>
          {gtypes.map(g=>(
            <button key={g} className={"chip"+(gf===g?" on":"")} onClick={()=>setGf(g)}>
              {g}<span className="cnt">{g==="すべて"?base.length:base.filter(r=>r.gyoshu===g).length}</span>
            </button>
          ))}
        </div>
        <div className="tbl-wrap" style={{height:520,overflowY:"auto"}}>
          <table className="tbl zebra">
            <thead><tr><th>落札日</th><th>発注者</th><th>工種</th><th>工事名</th><th>落札社</th><th className="num">予定価格</th><th className="num">落札額</th><th className="num">落札率</th><th>御社</th></tr></thead>
            <tbody>
              {rows.map((r,i)=>(
                <tr key={i} style={r.mine!=="—"?{background:"rgba(26,111,208,.06)"}:null}>
                  <td className="small mut tnum">{r.date}</td>
                  <td><Badge tone={orgTone(r.orgType)}>{r.org}</Badge></td>
                  <td className="small">{r.gyoshu}{r.est&&<span className="mut" style={{fontSize:10}}>（推定）</span>}</td>
                  <td><b>{r.title}</b></td>
                  <td className="small">{r.winner}</td>
                  <td className="num mut">{r.yotei.toLocaleString()}円</td>
                  <td className="num"><b>{r.amount.toLocaleString()}円</b></td>
                  <td className="num">{r.rate}%</td>
                  <td>{r.mine==="—"?<span className="small mut">—</span>:<Badge tone={mineTone(r.mine)}>{r.mine}</Badge>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="small mut mt-s">{rows.length}件を表示中{gf!=="すべて"?`（${gf}）`:""} ｜ 金額は円単位（市の発表は千円単位）｜「（推定）」は県発注で工事名から工種を判定 ｜ 出典：壱岐市・長崎県 入札結果（公開情報）</div>
      </Card>
    </div>
  );
}

/* =================== 御社の通信簿（経審） =================== */
function Score({ go }){
  const c=DATA.company, kt=DATA.keishinTrend;
  return (
    <div className="page">
      <PageHead ey="Score report" title="御社の通信簿（経営事項審査）" desc="公表データに基づく御社の実力。推移と構成から強みを可視化します">
      </PageHead>

      <div className="grid cols-4 mb">
        <Tile tone="blue" icon="award" label="土木一式" value={`${c.keishin.doboku.grade}級`} meta={`${c.keishin.doboku.score}点`}/>
        <Tile tone="orange" icon="award" label="建築一式" value={`${c.keishin.kenchiku.grade}級`} meta={`${c.keishin.kenchiku.score}点`}/>
        <Tile tone="green" icon="yen" label="完成工事高" value={c.kankou.toLocaleString()} unit="万" meta="直近決算"/>
        <Tile tone="blue" icon="building" label="営業年数" value={c.years} unit="年" meta="地域での実績"/>
      </div>

      <div className="grid">
        <Card icon="chart" title="完工高の構成" sub="御社の事業ポートフォリオ（経審・公表データ）">
          <div className="flex jc"><Donut value={c.kenchikuRatio} label="建築の比率" color="#f5871f" unit="%"/></div>
          <div className="divider"></div>
          <div className="flex jb small"><span className="mut">建築の元請比率</span><b style={{color:"#157a51"}}>{c.motoukeRatio}%</b></div>
          <div className="bar-track mt-s"><div className="bar-fill" style={{width:c.motoukeRatio+"%",background:"#1f9d6b"}}></div></div>
          <div className="small mut mt">建築は完工高の{c.kenchikuRatio}%・うち{c.motoukeRatio}%が元請。御社は<b>「土木もできる建築会社」</b>という構成です。</div>
        </Card>
      </div>
    </div>
  );
}

/* =================== 価格戦略シミュレーター =================== */
function SimCurve({ pct }){
  const W=720,H=200,pad={l:38,r:14,t:14,b:30};
  const lo=-1.0,hi=2.5,N=70;
  const xs=Array.from({length:N+1},(_,i)=>lo+(hi-lo)*i/N);
  const X=p=>pad.l+((p-lo)/(hi-lo))*(W-pad.l-pad.r);
  const Y=v=>pad.t+(1-v/100)*(H-pad.t-pad.b);
  const pts=xs.map(p=>[X(p),Y(bidModel(p).win)]);
  const d=pts.map((q,i)=>`${i?"L":"M"}${q[0].toFixed(1)},${q[1].toFixed(1)}`).join(" ");
  const recX0=X(0.6),recX1=X(1.0);
  const mk=X(pct), mY=Y(bidModel(pct).win);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%">
      <rect x={recX0} y={pad.t} width={recX1-recX0} height={H-pad.t-pad.b} fill="#1f9d6b" opacity=".10"/>
      <text x={(recX0+recX1)/2} y={pad.t+12} textAnchor="middle" fontSize="10" fill="#157a51" fontWeight="700">推奨</text>
      {[0,25,50,75,100].map(v=><g key={v}><line x1={pad.l} x2={W-pad.r} y1={Y(v)} y2={Y(v)} stroke="#e8eef6"/><text x={pad.l-6} y={Y(v)+3} textAnchor="end" fontSize="9" fill="#9aa4b1">{v}</text></g>)}
      {[-1,0,1,2].map(p=><text key={p} x={X(p)} y={H-10} textAnchor="middle" fontSize="10" fill="#6c7886">{p>0?"+"+p:p}%</text>)}
      <path d={`${d} L${X(hi)},${H-pad.b} L${X(lo)},${H-pad.b} Z`} fill="#1a6fd0" opacity=".10"/>
      <path d={d} fill="none" stroke="#1a6fd0" strokeWidth="2.5"/>
      <line x1={mk} x2={mk} y1={pad.t} y2={H-pad.b} stroke="#f5871f" strokeWidth="2" strokeDasharray="4 3"/>
      <circle cx={mk} cy={mY} r="6" fill="#fff" stroke="#f5871f" strokeWidth="3"/>
    </svg>
  );
}
function Simulator({ go }){
  const [pct,setPct]=React.useState(0.8);
  const r=bidModel(pct);
  const forecast=Math.max(0,Math.round(DATA.record.entries*r.win/100*0.16));
  const fLo=Math.max(0,forecast-1), fHi=forecast+1;
  const toneCol={red:"#bd4321",orange:"#d96f08",green:"#157a51",blue:"#0f4f9e"}[r.tone];
  return (
    <div className="page">
      <PageHead ey="Price strategy" title="価格戦略シミュレーター" desc="入札額（基準額に対する%）を動かして、落札確率と失格リスクを確かめてください">
        <span className="demo-flag">壱岐市・土木一式C モデル</span>
      </PageHead>

      <Card className="pad">
        <div className="sim-stage">
          <div>
            <div className="flex jb ac">
              <div className="small mut">入札額（基準額に対して）</div>
              <div className="b tnum" style={{fontSize:30,color:toneCol}}>{pct>0?"+":""}{pct.toFixed(2)}<span style={{fontSize:15}}>%</span></div>
            </div>
            <input className="slider mt-s" type="range" min="-1" max="2.5" step="0.05" value={pct} onChange={e=>setPct(parseFloat(e.target.value))}/>
            <div className="flex jb small mut mt-s"><span>−1.0%（失格域）</span><span>+0.6〜1.0%（推奨）</span><span>+2.5%（高すぎ）</span></div>
            <div className="mt-l"><div className="small mut mb">落札確率カーブ（基準額比）</div><SimCurve pct={pct}/></div>
            <div className="flex gap wrap mt">
              {[["従来の入れ方",DATA.record.myAvg],["推奨の中央",0.8],["落札社の平均",DATA.record.winnerAvg]].map(([lab,v])=>(
                <button key={lab} className={"chip"+(Math.abs(pct-v)<0.001?" on":"")} onClick={()=>setPct(v)}>{lab}（{v>0?"+":""}{v}%）</button>
              ))}
            </div>
          </div>

          <div>
            <div className="flex jc"><Gauge value={r.win} color={toneCol} label={r.verdict} sub={`入札額 ${pct>0?"+":""}${pct.toFixed(2)}%`}/></div>
            <div className="grid cols-2 mt" style={{gap:12}}>
              <div className="tile red" style={{padding:"14px 16px"}}><div className="lab"><span className="ti"><Icon name="alert"/></span>失格リスク</div><div className="big tnum">{r.disq}<span className="u">%</span></div></div>
              <div className="tile green" style={{padding:"14px 16px"}}><div className="lab"><span className="ti"><Icon name="target"/></span>有効札になる確率</div><div className="big tnum">{r.valid}<span className="u">%</span></div></div>
            </div>
            <div className="alert fix mt" style={{borderRadius:14}}>
              <div className="ai"><Icon name="check"/></div>
              <div><div className="at">この入れ方の年間見込み</div>
              <div className="ab">同じ{DATA.record.entries}回の参加なら <b>年 {fLo}〜{fHi} 件</b> の落札が見込めます。{pct>=0.6&&pct<=1.0?"推奨レンジです。":pct<0.6?"もう少し上げると落札確率が伸びます。":"上げすぎると他社に最安を奪われます。"}</div></div>
            </div>
          </div>
        </div>
      </Card>

      <div className="small mut mt">※壱岐市の最低制限価格はランダム係数（1.000〜1.010）で変動します。本シミュレーターは御社の過去{DATA.record.entries}件の入札結果をモデル化した参考値です。</div>
    </div>
  );
}

/* =================== 入札カレンダー =================== */
function Calendar({ go }){
  const today=new Date();
  const y=today.getFullYear(), mo=today.getMonth();
  const first=new Date(y,mo,1), startDow=first.getDay();
  const dim=new Date(y,mo+1,0).getDate();
  const cases=DATA.allCases.map(c=>({...c, due:new Date(today.getFullYear(),today.getMonth(),today.getDate()+c.days)}));
  const byDay={}; cases.forEach(c=>{ if(c.due.getMonth()===mo){ (byDay[c.due.getDate()] ||= []).push(c);} });
  const cells=[]; for(let i=0;i<startDow;i++)cells.push(null); for(let d=1;d<=dim;d++)cells.push(d);
  const dows=["日","月","火","水","木","金","土"];
  return (
    <div className="page">
      <PageHead ey="Calendar" title="入札カレンダー" desc="申請締切を一覧で。締切の前日・当日にはLINEで再通知します">
      </PageHead>
      <div className="grid cols-3">
        <Card className="span-2 pad">
          <div className="card-h"><div className="ci"><Icon name="calendar"/></div><div className="ct">{y}年 {mo+1}月</div></div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",gap:6}}>
            {dows.map((d,i)=><div key={d} className="center small b" style={{color:i===0?"#e05a37":i===6?"#1a6fd0":"#6c7886",padding:"4px 0"}}>{d}</div>)}
            {cells.map((d,i)=>{
              const isToday=d===today.getDate();
              const items=d?byDay[d]:null;
              return <div key={i} style={{minHeight:74,borderRadius:10,border:"1px solid var(--line-soft)",background:isToday?"#eaf3fc":"#fff",padding:6,opacity:d?1:.3}}>
                {d&&<div className="small b" style={{color:isToday?"#0f4f9e":"#6c7886"}}>{d}{isToday&&<span className="badge solid-b" style={{marginLeft:5,fontSize:9,padding:"1px 6px"}}>今日</span>}</div>}
                {items&&items.map(c=>(
                  <div key={c.id} onClick={()=>go("case",c.id)} title={c.title}
                    style={{cursor:"pointer",marginTop:4,fontSize:10,fontWeight:700,color:"#fff",background:c.days<=3?"#e05a37":c.days<=6?"#f5871f":"#1a6fd0",borderRadius:6,padding:"3px 6px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>
                    締切 {c.cat}{c.grade!=="—"?c.grade:""}
                  </div>
                ))}
              </div>;
            })}
          </div>
        </Card>
        <Card icon="clock" title="締切が近い順">
          {cases.filter(c=>c.status==="参加可能").sort((a,b)=>a.days-b.days).slice(0,6).map(c=>(
            <div className="row-item clickable" key={c.id} style={{cursor:"pointer"}} onClick={()=>go("case",c.id)}>
              <div className="ri-ic" style={{background:c.days<=3?"#fdeee8":"#eaf3fc",color:c.days<=3?"#bd4321":"#1a6fd0"}}><Icon name="file"/></div>
              <div className="ri-main"><div className="ri-t" style={{fontSize:12.5}}>{c.title}</div><div className="ri-s">{c.cat}{c.grade!=="—"?c.grade:""}</div></div>
              <div className="ri-r"><Deadline days={c.days}/></div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

/* =================== 通知・配信設定 =================== */
function Toggle({ on, set }){
  return <button onClick={()=>set(!on)} style={{width:46,height:26,borderRadius:999,background:on?"#1a6fd0":"#cfd6e0",position:"relative",transition:"background .15s",flex:"none"}}>
    <span style={{position:"absolute",top:3,left:on?23:3,width:20,height:20,borderRadius:"50%",background:"#fff",transition:"left .15s",boxShadow:"0 1px 3px rgba(0,0,0,.25)"}}></span>
  </button>;
}
function Settings({ go }){
  const [feat,setFeat]=React.useState({morning:true,remind:true,page:true,weekly:true});
  const [grades,setGrades]=React.useState(["土木一式C","建築一式B"]);
  const [regions,setRegions]=React.useState(["郷ノ浦","勝本","芦辺","石田"]);
  const allG=["土木一式C","建築一式B","舗装","水道施設"]; const allR=["郷ノ浦","勝本","芦辺","石田"];
  const tog=(arr,set,v)=> set(arr.includes(v)?arr.filter(x=>x!==v):[...arr,v]);
  return (
    <div className="page">
      <PageHead ey="Settings" title="通知・配信設定" desc="届く公告の条件と、通知の受け取り方を設定できます"/>
      <div className="grid cols-3">
        <Card className="span-2" icon="bell" title="配信する内容">
          {DATA.features.map(f=>(
            <div className="row-item" key={f.key}>
              <div className="ri-ic"><Icon name={f.key==="remind"?"clock":f.key==="weekly"?"chart":f.key==="page"?"doc":"bell"}/></div>
              <div className="ri-main"><div className="ri-t">{f.t}</div><div className="ri-s">{f.d}</div></div>
              <Toggle on={feat[f.key]} set={v=>setFeat({...feat,[f.key]:v})}/>
            </div>
          ))}
        </Card>
        <Card icon="chat" title="LINE連携">
          <div className="flex ac gap" style={{background:"#e6f6ef",border:"1px solid #bfe6d4",borderRadius:12,padding:"12px 14px"}}>
            <div className="ri-ic" style={{background:"#1f9d6b",color:"#fff"}}><Icon name="check"/></div>
            <div><div className="b" style={{fontSize:13}}>連携済み</div><div className="small mut">毎朝7:00に配信中</div></div>
          </div>
          <div className="divider"></div>
          <div className="flex jb small mb"><span className="mut">配信時刻</span><b>毎朝 7:00</b></div>
          <div className="flex jb small"><span className="mut">締切リマインド</span><b>前日・当日</b></div>
          <div className="mt"><Btn kind="ghost" block icon="settings">配信時刻を変更</Btn></div>
        </Card>
      </div>

      <div className="grid cols-2 mt">
        <Card icon="award" title="対象の工種・等級" sub="御社が入札できる等級だけに絞れます">
          <div className="flex wrap gap-s">{allG.map(g=><button key={g} className={"chip"+(grades.includes(g)?" on":"")} onClick={()=>tog(grades,setGrades,g)}>{g}</button>)}</div>
        </Card>
        <Card icon="pin" title="対象エリア" sub="壱岐市内＋県発注">
          <div className="flex wrap gap-s">{allR.map(rg=><button key={rg} className={"chip"+(regions.includes(rg)?" on":"")} onClick={()=>tog(regions,setRegions,rg)}>{rg}</button>)}</div>
        </Card>
      </div>
      <div className="mt"><Btn kind="primary" icon="check">設定を保存</Btn></div>
    </div>
  );
}

/* =================== ログイン =================== */
function Login({ go }){
  const c=DATA.company;
  return (
    <div className="login">
      <div className="side">
        <div className="flex ac gap-s">
          <div className="brand" style={{padding:0,border:"none"}}>
            <div className="mark" style={{background:"#fff",color:"#1a6fd0"}}>入</div>
            <div className="name" style={{color:"#fff"}}>入札<span style={{color:"#f5b56b"}}>ウォッチ</span></div>
          </div>
        </div>
        <div style={{position:"relative",zIndex:1}}>
          <div style={{fontSize:13,letterSpacing:".1em",opacity:.85,marginBottom:8}}>建設業界専用・入札情報ライブラリ</div>
          <div style={{fontSize:30,fontWeight:900,lineHeight:1.4}}>入札できる公告だけを、<br/>毎朝あなたに。</div>
          <div style={{display:"flex",gap:26,marginTop:30}}>
            <div><div style={{fontSize:38,fontWeight:900}}>3<span style={{fontSize:16}}>件</span></div><div style={{fontSize:12,opacity:.85}}>今日入札できる公告</div></div>
            <div><div style={{fontSize:38,fontWeight:900}}>3<span style={{fontSize:16}}>位/5社</span></div><div style={{fontSize:12,opacity:.85}}>同ランク内の位置</div></div>
            <div><div style={{fontSize:38,fontWeight:900}}>+0.5<span style={{fontSize:16}}>%で勝機</span></div><div style={{fontSize:12,opacity:.85}}>値付けの調整で届きます</div></div>
          </div>
        </div>
        <div style={{fontSize:11,opacity:.7,position:"relative",zIndex:1}}>入札ウォッチ（壱岐・長崎）／ 本サービスは公開情報に基づく分析です</div>
      </div>
      <div className="form-wrap">
        <div style={{fontSize:22,fontWeight:900}}>会員ログイン</div>
        <div className="small mut" style={{marginTop:4,marginBottom:22}}>御社専用の入札分析ページにログインします</div>
        <div className="field"><label>会社名 / 会員ID</label><input defaultValue={c.short} /></div>
        <div className="field"><label>パスワード</label><input type="password" defaultValue="········" /></div>
        <div className="flex jb ac small mut mb"><label className="flex ac gap-s"><input type="checkbox" defaultChecked/> ログイン状態を保持</label><a style={{color:"#1a6fd0"}}>パスワードを忘れた方</a></div>
        <Btn kind="blue" block iconR="arrow" onClick={()=>go("dashboard")}>ログイン</Btn>
        <div className="divider"></div>
        <div className="center small mut">アカウントがない方は <a style={{color:"#d96f08",fontWeight:700}}>1ヶ月 無料お試し</a>（{DATA.plan.price}）</div>
      </div>
    </div>
  );
}

Object.assign(window, { Market, Score, Simulator, SimCurve, Calendar, Settings, Toggle, Login });

/* =================== お知らせ（更新履歴） =================== */
const CAT_META = {
  "新機能":      { tone:"green",  icon:"spark" },
  "改善":        { tone:"blue",   icon:"trend" },
  "仕様変更":    { tone:"orange", icon:"wrench" },
  "メンテナンス":{ tone:"gray",   icon:"settings" },
  "お知らせ":    { tone:"blue",   icon:"info" },
};
function News({ go }){
  const cats=["すべて","新機能","改善","仕様変更","メンテナンス","お知らせ"];
  const [cat,setCat]=React.useState("すべて");
  const all=DATA.updates;
  const pinned=all.find(u=>u.pinned)||all[0];
  const list=all.filter(u=>cat==="すべて"||u.cat===cat);
  const pm=CAT_META[pinned.cat]||CAT_META["お知らせ"];
  return (
    <div className="page">
      <PageHead ey="News & Updates" title="お知らせ" desc="アップデート・仕様変更・メンテナンスなど、サービスからのお知らせをお届けします">
        <Badge tone="orange" pulse>新着 {all.filter(u=>u.isNew).length}件</Badge>
      </PageHead>

      {(cat==="すべて") &&
      <div className="card pad mb" style={{background:"linear-gradient(135deg,#eaf3fc,#f4f9fe)",border:"1px solid var(--blue-line)"}}>
        <div className="flex ac gap-s mb"><Badge tone="solid-o">最新アップデート</Badge><span className="small mut tnum">{pinned.date}</span></div>
        <div className="flex gap" style={{alignItems:"flex-start"}}>
          <div className="ri-ic" style={{width:46,height:46,background:"#fff",color:"#157a51",flex:"none"}}><Icon name={pm.icon} style={{width:24,height:24}}/></div>
          <div>
            <div className="b" style={{fontSize:18}}>{pinned.title}</div>
            <div className="small" style={{color:"var(--ink2)",marginTop:6,lineHeight:1.7}}>{pinned.body}</div>
            <div className="mt-s"><Btn kind="blue" sm iconR="arrow" onClick={()=>go("simulator")}>使ってみる</Btn></div>
          </div>
        </div>
      </div>}

      <div className="flex ac wrap gap-s mb">
        {cats.map(x=>{ const n=x==="すべて"?all.length:all.filter(u=>u.cat===x).length;
          return <button key={x} className={"chip"+(cat===x?" on":"")} onClick={()=>setCat(x)}>{x}<span style={{opacity:.6,marginLeft:5}}>{n}</span></button>; })}
      </div>

      <div className="card pad">
        {list.map((u,i)=>{ const m=CAT_META[u.cat]||CAT_META["お知らせ"];
          const bg = m.tone==="gray"?"var(--bg)":`var(--${m.tone}-bg)`;
          const fg = m.tone==="gray"?"var(--sub)":`var(--${m.tone}-deep)`;
          return (
            <div className="row-item" key={i} style={{alignItems:"flex-start",paddingTop:i?18:4,paddingBottom:18}}>
              <div className="ri-ic" style={{background:bg,color:fg}}><Icon name={m.icon}/></div>
              <div className="ri-main">
                <div className="flex ac gap-s wrap" style={{marginBottom:4}}>
                  <Badge tone={m.tone}>{u.cat}</Badge>
                  <span className="small mut tnum">{u.date}</span>
                  {u.isNew && <Badge tone="orange">NEW</Badge>}
                  {u.important && <Badge tone="red">重要</Badge>}
                </div>
                <div className="ri-t" style={{fontSize:15}}>{u.title}</div>
                <div className="small" style={{color:"var(--ink2)",marginTop:5,lineHeight:1.7}}>{u.body}</div>
              </div>
            </div>
          );
        })}
        {list.length===0 && <div className="center mut" style={{padding:30}}>このカテゴリのお知らせはありません</div>}
      </div>

      <div className="small mut center mt">過去のお知らせはこれですべてです ｜ ご不明な点はLINE・お電話でお問い合わせください</div>
    </div>
  );
}

Object.assign(window, { News });

/* =================== フィードバック（バグ報告・機能要望） =================== */
const STATUS_META = { recv:{cls:"recv",label:"受付"}, prog:{cls:"prog",label:"対応中"}, done:{cls:"done",label:"対応済み"} };
function Feedback({ go }){
  const types=["バグ報告","機能のご要望","その他"];
  const [type,setType]=React.useState("機能のご要望");
  const [title,setTitle]=React.useState("");
  const [detail,setDetail]=React.useState("");
  const [contact,setContact]=React.useState("");
  const [sent,setSent]=React.useState(false);
  const [list,setList]=React.useState(DATA.feedback);

  const submit=()=>{
    if(!title.trim()||!detail.trim()) return;
    const now=new Date();
    const date=`${now.getFullYear()}.${String(now.getMonth()+1).padStart(2,"0")}.${String(now.getDate()).padStart(2,"0")}`;
    setList([{date,type,title:title.trim(),status:"recv"},...list]);
    setSent(true); setTitle(""); setDetail(""); setContact("");
    window.scrollTo({top:0,behavior:"smooth"});
    setTimeout(()=>setSent(false),5000);
  };
  const canSend=title.trim()&&detail.trim();

  return (
    <div className="page">
      <PageHead ey="Feedback" title="フィードバック" desc="バグの報告や、追加してほしい機能のご要望をお気軽にお寄せください。いただいた声は改善に活かします"/>

      {sent &&
      <div className="alert fix mb" style={{borderRadius:14}}>
        <div className="ai"><Icon name="check"/></div>
        <div><div className="at">送信しました。ありがとうございます！</div>
        <div className="ab">担当（松島）が内容を確認し、対応状況は下の一覧と「お知らせ」でお伝えします。お急ぎの場合はLINE・お電話でもご連絡いただけます。</div></div>
      </div>}

      <div className="grid cols-3">
        {/* 入力フォーム */}
        <Card className="span-2" icon="send" title="ご報告・ご要望フォーム" sub="2分で送れます。社名・連絡先は自動で添付されます">
          <div className="field">
            <label>種別</label>
            <div className="seg">
              {types.map(t=>(
                <button key={t} className={"chip"+(type===t?" on":"")} onClick={()=>setType(t)}>
                  {t==="バグ報告"&&"🐞 "}{t==="バグ報告"?"バグ報告":t}
                </button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>件名 <span style={{color:"var(--red)"}}>*</span></label>
            <input value={title} onChange={e=>setTitle(e.target.value)}
              placeholder={type==="バグ報告"?"例：カレンダーの締切が実際と1日ずれている":"例：気になる案件をお気に入り登録したい"}/>
          </div>
          <div className="field">
            <label>詳細 <span style={{color:"var(--red)"}}>*</span></label>
            <textarea value={detail} onChange={e=>setDetail(e.target.value)}
              placeholder={type==="バグ報告"?"・どの画面で起きたか\n・どんな操作をしたか\n・どうなってほしいか\nを書いていただけると助かります":"こんな機能があれば便利、という内容を自由にお書きください"}/>
          </div>
          <div className="field" style={{marginBottom:6}}>
            <label>折り返しのご連絡先（任意）</label>
            <input value={contact} onChange={e=>setContact(e.target.value)} placeholder="お電話番号・LINE名など（空欄でも送信できます）"/>
          </div>
          <div className="flex ac gap mt">
            <Btn kind="primary" icon="send" onClick={submit}>{canSend?"送信する":"件名と詳細を入力してください"}</Btn>
            <span className="small mut">送信元：{DATA.company.short} 様（{DATA.company.area}）</span>
          </div>
        </Card>

        {/* 別の連絡手段 */}
        <Card icon="chat" title="その他の連絡方法">
          <div className="row-item" style={{paddingTop:4}}>
            <div className="ri-ic" style={{background:"#e6f6ef",color:"#157a51"}}><Icon name="chat"/></div>
            <div className="ri-main"><div className="ri-t">LINEで送る</div><div className="ri-s">チャットでそのままご相談OK</div></div>
          </div>
          <div className="row-item">
            <div className="ri-ic" style={{background:"#eaf3fc",color:"#1a6fd0"}}><Icon name="clock"/></div>
            <div className="ri-main"><div className="ri-t">お電話</div><div className="ri-s">平日 9:00〜18:00</div></div>
          </div>
          <div className="divider"></div>
          <div className="small mut">いただいたご要望で実装した機能は、<a style={{color:"#1a6fd0",fontWeight:700,cursor:"pointer"}} onClick={()=>go("news")}>お知らせ</a>でご報告しています。</div>
        </Card>
      </div>

      {/* これまでの報告と対応状況 */}
      <Card className="mt" icon="list" title="これまでのご報告と対応状況" sub="御社からお寄せいただいた内容">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>受付日</th><th>種別</th><th>内容</th><th>状況</th></tr></thead>
            <tbody>
              {list.map((f,i)=>{ const s=STATUS_META[f.status]||STATUS_META.recv;
                return <tr key={i}>
                  <td className="small mut tnum">{f.date}</td>
                  <td><Badge tone={f.type==="バグ報告"?"red":f.type==="機能のご要望"?"blue":"gray"}>{f.type}</Badge></td>
                  <td><b>{f.title}</b></td>
                  <td><span className={"status "+s.cls}><span className="pulse" style={{width:6,height:6,borderRadius:"50%",background:"currentColor",display:"inline-block"}}></span>{s.label}</span></td>
                </tr>;
              })}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { Feedback });