// Home page sections + job card/list
const { useState: useStateH } = React;

function Hero({ onNav, lang = "ja", tw = {} }) {
  const en = lang === "en";
  const style = tw.heroStyle || "split";
  const dim = tw.photoDim != null ? tw.photoDim : 32;          // overlay darkness %
  const shift = tw.textShift != null ? tw.textShift : 0;       // px text nudge
  const hl = tw.accent || "#F7B731";                            // highlight color
  const motion = tw.motion !== false;

  const Kick = (
    <div className="rise" style={{ fontFamily:"var(--font-accent)", fontWeight:700, color:"var(--festival-yellow)", fontSize:20, marginBottom:16 }}>{en ? "RECRUIT 2026 · Join the cast" : "採用サイト · RECRUIT 2026"}</div>
  );
  const Title = (lt) => (
    <h1 className="rise d1" style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".06em",
      fontSize: style==="split" ? "clamp(34px,4.4vw,60px)" : style==="half" ? "clamp(34px,4.8vw,64px)" : "clamp(40px,6.2vw,76px)", lineHeight:1.16,
      color: lt ? "var(--ink-900)" : "#FFF8EC", margin:0, textShadow: lt ? "none" : "0 4px 24px rgba(0,0,0,.5)" }}>
      {en
        ? <>Life can be a lot <span style={{ color:hl }}>hotter</span>.<br/>Here, you are the main character.</>
        : <>人生は、もっと<span style={{ color:hl }}>熱くて</span>いい。<br/>ここは、君が主役になれる場所。</>}
    </h1>
  );
  const Sub = (lt) => (
    <p className="rise d2" style={{ fontFamily:"var(--font-body)", fontWeight:500, color: lt ? "var(--ink-700)" : "#F0E2D2", fontSize:17, marginTop:20, maxWidth:520, lineHeight:1.8 }}>
      {en ? "A drama that began at a tiny Nagoya takoyaki izakaya. Deliver the five-sense “live experience” — with your own hands."
          : "名古屋のたこ焼き居酒屋から始まったドラマ。五感を揺さぶる「ライブ体験」を、君の手で。"}
    </p>
  );
  const Buttons = (
    <div className="rise d3" style={{ display:"flex", gap:14, marginTop:30, flexWrap:"wrap" }}>
      <Btn variant="primary" onClick={()=>onNav("apply")}><Icon name="flame" size={18} fill="currentColor" stroke="0" />{en ? "Apply in 30 sec" : "簡単！30秒応募"}</Btn>
      <Btn variant="gold" onClick={()=>onNav("jobs")}>{en ? "See jobs" : "求人を見る"}<Icon name="arrR" size={18} /></Btn>
    </div>
  );

  // ---- SPLIT: emphasize the team photo (no dark overlay); text in its own panel ----
  if (style === "split") {
    return (
      <section className="hero-split" style={{ position:"relative", minHeight:"84vh", display:"grid", gridTemplateColumns:"1.02fr 1fr", background:"var(--white-plate)", overflow:"hidden" }}>
        <div style={{ display:"flex", flexDirection:"column", justifyContent:"center", position:"relative", zIndex:2,
          padding:"60px clamp(28px,5vw,72px)", paddingLeft:`calc(clamp(28px,5vw,72px) + ${shift}px)` }}>
          {Kick}{Title(true)}{Sub(true)}{Buttons}
        </div>
        <div className="ph-zoom hero-photo" style={{ position:"relative", overflow:"hidden", minHeight:"42vh" }}>
          <img src={window.YNNY.img.hero} alt={en?"Our team":"スタッフの仲間たち"} referrerPolicy="no-referrer"
            className={motion?"kenburns":""} style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
          <div style={{ position:"absolute", inset:0, background:"linear-gradient(90deg,var(--white-plate) 0%,rgba(255,255,255,0) 16%)" }} className="hero-photo-fade" />
          <span style={{ position:"absolute", left:16, bottom:16, fontFamily:"var(--font-body)", fontWeight:700, fontSize:12, color:"#fff", background:"rgba(0,0,0,.4)", padding:"5px 13px", borderRadius:999, backdropFilter:"blur(2px)" }}>{en ? "Our team" : "たこスタの仲間たち"}</span>
        </div>
      </section>
    );
  }

  // ---- HALF: text over a darkened left half, photo emphasized on the right ----
  if (style === "half") {
    const ah = 0.2 + (dim/100) * 0.72;
    return (
      <section style={{ position:"relative", minHeight:"88vh", display:"flex", alignItems:"center", background:"#1a1714", overflow:"hidden" }}>
        <img src={window.YNNY.img.hero} alt={en?"Our team":"スタッフの仲間たち"} referrerPolicy="no-referrer" className={motion?"kenburns":""}
          style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }} />
        <div className="hero-half-ov" style={{ position:"absolute", inset:0, background:`linear-gradient(90deg, rgba(21,18,16,${Math.min(ah+0.12,0.96)}) 0%, rgba(40,24,18,${ah*0.92}) 36%, rgba(21,18,16,${ah*0.5}) 52%, rgba(21,18,16,0) 68%)` }} />
        <div className="hero-half-ov2" style={{ position:"absolute", inset:0, opacity:.09,
          backgroundImage:"radial-gradient(circle at 16% 30%,#fff 14px,transparent 15px),radial-gradient(circle at 30% 80%,#fff 10px,transparent 11px)" }} />
        <div style={{ position:"relative", maxWidth:1180, margin:"0 auto", padding:"60px 24px", width:"100%" }}>
          <div className="hero-half-text" style={{ maxWidth:"clamp(320px,47%,560px)", paddingLeft: shift }}>
            {Kick}{Title(false)}{Sub(false)}{Buttons}
          </div>
        </div>
      </section>
    );
  }

  // ---- OVERLAY: text over photo (dimmable) ----
  const a = 0.18 + (dim/100) * 0.78;
  return (
    <section style={{ position:"relative", minHeight:"88vh", display:"flex", alignItems:"center", background:"#1a1714", overflow:"hidden" }}>
      <img src={window.YNNY.img.hero} alt="" referrerPolicy="no-referrer" className={motion?"kenburns":""}
        style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }} />
      <div style={{ position:"absolute", inset:0, background:`linear-gradient(120deg,rgba(28,24,21,${Math.min(a+0.12,0.96)}) 0%,rgba(90,43,24,${a*0.78}) 52%,rgba(229,35,31,${a*0.5}) 130%)` }} />
      <div style={{ position:"absolute", inset:0, opacity:.1,
        backgroundImage:"radial-gradient(circle at 18% 28%,#fff 16px,transparent 17px),radial-gradient(circle at 78% 64%,#fff 24px,transparent 25px),radial-gradient(circle at 50% 88%,#fff 12px,transparent 13px),radial-gradient(circle at 90% 20%,#fff 9px,transparent 10px)" }} />
      <div style={{ position:"relative", maxWidth:1180, margin:"0 auto", padding:"60px 24px", width:"100%" }}>
        <div style={{ paddingLeft: shift }}>
          {Kick}{Title(false)}{Sub(false)}{Buttons}
        </div>
      </div>
    </section>
  );
}

function Story() {
  return (
    <section style={{ background:"var(--white-plate)", padding:"92px 24px" }}>
      <div style={{ maxWidth:1080, margin:"0 auto" }}>
        <Reveal><Kicker en="Our Story" jp="たこスタから始まった、私たちのドラマ" /></Reveal>
        <div style={{ display:"flex", flexDirection:"column", gap:54, marginTop:34 }}>
          {window.YNNY.story.map((s, i) => {
            const left = i % 2 === 0;
            return (
              <Reveal key={i}>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:44,
                alignItems:"center", direction: left ? "ltr" : "rtl" }} className="story-row">
                <div style={{ direction:"ltr" }}><PhotoSlot src={window.YNNY.img.story[i]} zoom label={`Story ${i+1}`} h={300} round={18} /></div>
                <div style={{ direction:"ltr" }}>
                  <h3 style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".05em", fontSize:24, color:"var(--primary)", margin:"0 0 16px", lineHeight:1.4 }}>{s.copy}</h3>
                  <p style={{ fontFamily:"var(--font-body)", fontSize:15, lineHeight:1.95, color:"var(--ink-800)", whiteSpace:"pre-line", margin:0 }}>{s.body}</p>
                </div>
              </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function JobCard({ job, onNav }) {
  const [h, setH] = useStateH(false);
  return (
    <div onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
      style={{ background:"var(--surface)", borderRadius:16, overflow:"hidden", cursor:"pointer",
        boxShadow: h ? "var(--shadow-hover)" : "var(--shadow-card)", transform: h?"translateY(-3px)":"none",
        transition:"all .2s ease", display:"flex", flexDirection:"column" }} onClick={()=>onNav("detail", job)}>
      <div style={{ position:"relative", overflow:"hidden" }}>
        <PhotoSlot src={job.thumb} label={job.store} h={170} round={0} tone={job.urgent?"red":"gold"}
          style={{ transform: h?"scale(1.05)":"none", transition:"transform .4s ease" }} />
        {job.urgent && <span style={{ position:"absolute", top:12, left:12, fontFamily:"var(--font-accent)", fontWeight:700,
          background:"#fff", color:"var(--primary)", padding:"4px 16px", borderRadius:999, fontSize:15,
          boxShadow:"0 3px 10px rgba(0,0,0,.2)" }}>急募</span>}
        <span style={{ position:"absolute", top:12, right:12, fontFamily:"var(--font-body)", fontWeight:700,
          background:"rgba(21,21,21,.7)", color:"#fff", padding:"4px 12px", borderRadius:999, fontSize:12 }}>{job.type}</span>
      </div>
      <div style={{ padding:"16px 18px 18px", display:"flex", flexDirection:"column", flex:1 }}>
        <h3 style={{ fontFamily:"var(--font-body)", fontWeight:700, fontSize:16, color:"var(--fg1)", margin:"0 0 12px", lineHeight:1.45 }}>{job.title}</h3>
        <div style={{ display:"flex", alignItems:"flex-start", gap:6, color:"var(--fg2)", fontSize:12.5, marginBottom:6 }}>
          <span style={{ color:"var(--primary)", flexShrink:0, marginTop:1 }}><Icon name="pin" size={15} /></span>{job.loc}</div>
        <div style={{ fontFamily:"var(--font-latin)", fontWeight:700, fontSize:17, color:"var(--sauce-brown)", letterSpacing:".01em", margin:"4px 0 14px" }}>{job.pay}</div>
        <div style={{ display:"flex", gap:6, flexWrap:"wrap", marginBottom:16 }}>
          {job.tags.slice(0,3).map(t=>(
            <span key={t} style={{ fontSize:11, fontWeight:700, color:"var(--ink-500)", background:"var(--cream-300)", padding:"5px 11px", borderRadius:999 }}>{t}</span>
          ))}
        </div>
        <div style={{ display:"flex", gap:8, marginTop:"auto" }}>
          <Btn variant="ghost" small onClick={(e)=>{e.stopPropagation();onNav("detail",job);}}>詳しく見る</Btn>
          <Btn variant="primary" small onClick={(e)=>{e.stopPropagation();onNav("apply",job);}}>30秒応募</Btn>
        </div>
      </div>
    </div>
  );
}

function JobSearch() {
  return (
    <section style={{ background:"var(--charcoal-black)", padding:"56px 24px" }}>
      <div style={{ maxWidth:1080, margin:"0 auto" }}>
        <Kicker en="Careers" jp="株式会社Y.N.N.Y の求人をさがす" light />
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr auto", gap:14, alignItems:"flex-end", marginTop:20 }}>
          <div>
            <label style={{ display:"block", color:"var(--fg-on-dark-2)", fontSize:13, fontWeight:700, marginBottom:7 }}>職種からさがす</label>
            <input placeholder="営業・店舗スタッフ…" style={inStyle} />
          </div>
          <div>
            <label style={{ display:"block", color:"var(--fg-on-dark-2)", fontSize:13, fontWeight:700, marginBottom:7 }}>勤務地からさがす</label>
            <input placeholder="名古屋市中区" style={inStyle} />
          </div>
          <Btn variant="primary"><Icon name="search" size={18} />この条件で検索</Btn>
        </div>
      </div>
    </section>
  );
}
const inStyle = { width:"100%", boxSizing:"border-box", fontFamily:"var(--font-body)", fontSize:15,
  padding:"13px 16px", border:"1.5px solid #3a332f", borderRadius:12, background:"#211c19", color:"#FBEFE2" };

function JobList({ onNav, limit }) {
  const jobs = limit ? window.YNNY.jobs.slice(0,limit) : window.YNNY.jobs;
  return (
    <section style={{ background:"var(--white-plate)", padding:"80px 24px" }} id="jobs">
      <div style={{ maxWidth:1080, margin:"0 auto" }}>
        <Reveal><Kicker en="Job Listings" jp="求人一覧" /></Reveal>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:24 }} className="jobs-grid">
          {jobs.map((j,i) => <Reveal key={j.id} delay={(i%3)*80}><JobCard job={j} onNav={onNav} /></Reveal>)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Story, JobSearch, JobList, JobCard });