// Job detail, application form, company profile
const { useState: useStateD } = React;

function JobDetail({ job, onNav }) {
  const j = job || window.YNNY.jobs[0];
  const d = window.YNNY.jobDetail;
  return (
    <div style={{ background:"var(--white-plate)" }}>
      <section style={{ position:"relative" }}>
        <PhotoSlot src={j.thumb} label={`${j.store}`} h={360} round={0} tone={j.urgent?"red":"sauce"} />
        <div style={{ position:"absolute", inset:0, background:"linear-gradient(180deg,transparent 30%,rgba(21,21,21,.78) 100%)" }} />
        <div style={{ position:"absolute", left:0, right:0, bottom:0, padding:"0 24px 30px" }}>
          <div style={{ maxWidth:980, margin:"0 auto" }}>
            <div style={{ display:"flex", gap:10, marginBottom:14 }}>
              {j.urgent && <span style={{ fontFamily:"var(--font-accent)", fontWeight:700, background:"var(--primary)", color:"#fff", padding:"5px 18px", borderRadius:999, fontSize:16 }}>急募</span>}
              <span style={{ fontFamily:"var(--font-body)", fontWeight:700, background:"var(--festival-yellow)", color:"var(--sauce-brown)", padding:"5px 16px", borderRadius:999, fontSize:13 }}>{j.type}</span>
            </div>
            <h1 style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".05em", fontSize:"clamp(24px,3.6vw,40px)", color:"#FFF3DF", margin:0, lineHeight:1.35, textShadow:"0 2px 12px rgba(0,0,0,.5)" }}>{j.title}</h1>
          </div>
        </div>
      </section>

      <div style={{ maxWidth:980, margin:"0 auto", padding:"40px 24px 72px", display:"grid", gridTemplateColumns:"1fr 320px", gap:40 }}>
        <main>
          <a onClick={()=>onNav("jobs")} style={{ display:"inline-flex", alignItems:"center", gap:6, color:"var(--primary)", fontWeight:700, fontSize:13, cursor:"pointer", marginBottom:24 }}><Icon name="arrL" size={16} />求人一覧へ戻る</a>
          <p style={{ fontFamily:"var(--font-body)", fontSize:16, lineHeight:1.95, color:"var(--ink-800)", marginTop:0 }}>{d.intro}</p>
          {d.sections.map((s,i)=>(
            <div key={i} style={{ marginTop:32 }}>
              <h2 style={{ fontFamily:"var(--font-body)", fontWeight:700, fontSize:19, color:"var(--fg1)", display:"flex", alignItems:"center", gap:9, margin:"0 0 14px" }}>
                <span style={{ color:"var(--festival-yellow)" }}><Icon name="star" size={20} fill="currentColor" stroke="0" /></span>{s.h}</h2>
              <ul style={{ margin:0, padding:0, listStyle:"none", display:"flex", flexDirection:"column", gap:10 }}>
                {s.lines.map((l,k)=>(
                  <li key={k} style={{ display:"flex", gap:10, fontFamily:"var(--font-body)", fontSize:15, lineHeight:1.7, color:"var(--ink-800)" }}>
                    <span style={{ color:"var(--primary)", flexShrink:0, marginTop:3 }}><Icon name="check" size={17} /></span>{l}</li>
                ))}
              </ul>
            </div>
          ))}
        </main>

        <aside>
          <div style={{ position:"sticky", top:90, background:"var(--surface)", borderRadius:18, boxShadow:"var(--shadow-card)", padding:24 }}>
            <Row label="給与" value={j.pay} latin />
            <Row label="勤務地" value={j.loc} />
            <Row label="店舗" value={j.store} />
            <Row label="雇用形態" value={j.type} />
            <div style={{ margin:"18px 0", borderTop:"1px solid var(--line-200)" }} />
            <div style={{ fontFamily:"var(--font-body)", fontWeight:700, fontSize:13, color:"var(--fg1)", marginBottom:10 }}>待遇・福利厚生</div>
            <div style={{ display:"flex", flexWrap:"wrap", gap:6, marginBottom:22 }}>
              {window.YNNY.jobDetail.benefits.map(b=>(
                <span key={b} style={{ fontSize:11, fontWeight:700, color:"var(--ink-500)", background:"var(--cream-300)", padding:"5px 10px", borderRadius:999 }}>{b}</span>
              ))}
            </div>
            <Btn variant="primary" full onClick={()=>onNav("apply",j)}><Icon name="flame" size={18} fill="currentColor" stroke="0" />簡単！30秒応募</Btn>
            <div style={{ textAlign:"center", marginTop:12, fontSize:12, color:"var(--fg3)" }}>または <a href="tel:052-228-3369" style={{ color:"var(--primary)", fontWeight:700 }}>052-228-3369</a></div>
          </div>
        </aside>
      </div>
    </div>
  );
}
function Row({ label, value, latin }) {
  return (
    <div style={{ marginBottom:14 }}>
      <div style={{ fontSize:11, fontWeight:700, color:"var(--fg3)", letterSpacing:".04em", marginBottom:3 }}>{label}</div>
      <div style={{ fontFamily: latin?"var(--font-latin)":"var(--font-body)", fontWeight: latin?800:700,
        fontSize: latin?17:14, color: latin?"var(--sauce-brown)":"var(--fg1)", lineHeight:1.5 }}>{value}</div>
    </div>
  );
}

function ApplicationForm({ job, onNav }) {
  const [done, setDone] = useStateD(false);
  const [agree, setAgree] = useStateD(false);
  const j = job || window.YNNY.jobs[0];
  if (done) return (
    <section style={{ background:"#FAF7F1", minHeight:520, display:"flex", alignItems:"center", justifyContent:"center", padding:"60px 24px" }}>
      <div style={{ textAlign:"center", maxWidth:480 }}>
        <div style={{ width:84, height:84, borderRadius:"50%", background:"var(--primary)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", margin:"0 auto 24px", boxShadow:"var(--shadow-pop)" }}><Icon name="check" size={42} /></div>
        <h1 style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:30, color:"var(--fg1)", margin:"0 0 14px" }}>応募ありがとう！</h1>
        <p style={{ fontFamily:"var(--font-body)", fontSize:15, lineHeight:1.8, color:"var(--ink-800)" }}>君の人生というドラマの、新しい章がここから始まります。担当より2営業日以内にご連絡します。</p>
        <div style={{ marginTop:26 }}><Btn variant="ghost" onClick={()=>onNav("home")}>ホームへ戻る</Btn></div>
      </div>
    </section>
  );
  return (
    <section style={{ background:"#FAF7F1", padding:"56px 24px 80px" }}>
      <div style={{ maxWidth:600, margin:"0 auto" }}>
        <div style={{ textAlign:"center", marginBottom:28 }}>
          <div style={{ fontFamily:"var(--font-accent)", fontWeight:700, color:"var(--primary)", fontSize:22 }}>30秒簡単応募</div>
          <h1 style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".05em", fontSize:34, color:"var(--fg1)", margin:"6px 0 0" }}>応募フォーム</h1>
        </div>
        <div style={{ background:"var(--surface)", borderRadius:18, boxShadow:"var(--shadow-card)", padding:"28px 30px" }}>
          <div style={{ background:"var(--cream-300)", borderRadius:12, padding:"12px 16px", marginBottom:22, fontSize:13, color:"var(--ink-700)" }}>
            応募職種：<b>{j.title}</b><br/>{j.store}</div>
          <Field label="お名前" req><input style={fStyle} placeholder="名古屋 太郎" /></Field>
          <Field label="生年月日" req>
            <div style={{ display:"flex", gap:8 }}>
              <select style={fStyle}><option>2000</option><option>2001</option><option>2002</option></select>
              <select style={fStyle}><option>1</option><option>2</option></select>
              <select style={fStyle}><option>1</option><option>2</option></select>
            </div>
          </Field>
          <Field label="メールアドレス" req><input style={fStyle} placeholder="taro@example.com" /></Field>
          <Field label="電話番号" req><input style={fStyle} placeholder="090-1234-5678" /></Field>
          <label style={{ display:"flex", gap:10, alignItems:"flex-start", margin:"4px 0 22px", cursor:"pointer" }}>
            <input type="checkbox" checked={agree} onChange={e=>setAgree(e.target.checked)} style={{ width:20, height:20, marginTop:1, accentColor:"var(--primary)" }} />
            <span style={{ fontSize:13, color:"var(--ink-700)", lineHeight:1.6 }}><b>個人情報の取り扱い</b>に同意する（必須）</span>
          </label>
          <Btn variant="primary" full onClick={()=> agree && setDone(true)}><Icon name="flame" size={18} fill="currentColor" stroke="0" />この内容で応募する</Btn>
        </div>
      </div>
    </section>
  );
}
const fStyle = { width:"100%", boxSizing:"border-box", fontFamily:"var(--font-body)", fontSize:15,
  padding:"12px 15px", border:"1.5px solid var(--line-300)", borderRadius:12, background:"var(--bg-alt)", color:"var(--fg1)" };
function Field({ label, req, children }) {
  return (
    <div style={{ marginBottom:16 }}>
      <label style={{ display:"flex", alignItems:"center", gap:8, fontSize:13, fontWeight:700, color:"var(--fg1)", marginBottom:7 }}>
        {label}{req && <span style={{ fontFamily:"var(--font-body)", fontSize:10, background:"var(--primary)", color:"#fff", padding:"2px 9px", borderRadius:999 }}>必須</span>}
      </label>{children}
    </div>
  );
}

function Profile({ onNav }) {
  const c = window.YNNY.company;
  const rows = [["会社名",c.name],["所在地",c.hq],["代表者名",c.rep],["設立",c.founded],["事業内容",c.biz],["電話番号",c.tel]];
  return (
    <div style={{ background:"var(--white-plate)" }}>
      <section style={{ position:"relative" }}>
        <PhotoSlot src={window.YNNY.img.profile} label="店内の様子" h={320} round={0} tone="char" />
        <div style={{ position:"absolute", inset:0, background:"linear-gradient(180deg,rgba(21,21,21,.3),rgba(21,21,21,.75))", display:"flex", alignItems:"center", justifyContent:"center", flexDirection:"column" }}>
          <div style={{ fontFamily:"var(--font-latin)", fontWeight:700, color:"var(--festival-yellow)", letterSpacing:".2em", fontSize:14 }}>COMPANY OVERVIEW</div>
          <h1 style={{ fontFamily:"var(--font-display)", fontWeight:700, color:"#FFF3DF", fontSize:"clamp(30px,5vw,52px)", margin:"8px 0 0" }}>会社概要</h1>
        </div>
      </section>
      <section style={{ maxWidth:820, margin:"0 auto", padding:"60px 24px 80px" }}>
        <div style={{ background:"var(--surface)", borderRadius:18, boxShadow:"var(--shadow-card)", overflow:"hidden" }}>
          {rows.map(([k,v],i)=>(
            <div key={k} style={{ display:"grid", gridTemplateColumns:"160px 1fr", borderBottom: i<rows.length-1?"1px solid var(--line-200)":"none" }}>
              <div style={{ background:"var(--cream-300)", padding:"18px 20px", fontWeight:700, fontSize:14, color:"var(--sauce-brown)" }}>{k}</div>
              <div style={{ padding:"18px 22px", fontSize:15, color:"var(--ink-800)" }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ textAlign:"center", marginTop:40 }}>
          <Btn variant="primary" onClick={()=>onNav("jobs")}>求人一覧を見る<Icon name="arrR" size={18} /></Btn>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { JobDetail, ApplicationForm, Profile });