/* Hero — pop desk, readable chaos */
const Hero = () => {
  const [entered, setEntered] = React.useState(false);
  const [todoChecked, setTodoChecked] = React.useState([true, true, true, true]);
  React.useEffect(()=>{setTimeout(()=>setEntered(true),160)},[]);

  const checks = ['辺りは暗闇、岩槻', 'ズッコケ三人組', '接客業には不向き', 'たまゆら爆弾💣'];

  return (
    <section style={{
      position:'relative',overflow:'visible',
      padding:'96px var(--page-px) 10px',
      minHeight:'620px',
    }}>
      <div aria-hidden="true" style={{position:'absolute',left:'5vw',top:134,color:'var(--blue)',fontSize:52,fontWeight:900,transform:'rotate(-18deg)'}}>☆</div>
      <div aria-hidden="true" style={{position:'absolute',left:'42vw',top:250,color:'var(--yellow)',fontSize:60,fontWeight:900,transform:'rotate(12deg)'}}>✸</div>

      <div style={{
        display:'grid',gridTemplateColumns:'minmax(0,1.05fr) minmax(330px,.95fr)',
        gap:'clamp(24px,4vw,58px)',alignItems:'start',maxWidth:1240,margin:'0 auto',
      }}>
        <div style={{
          opacity:entered?1:0,transform:entered?'none':'translateY(18px)',
          transition:'all .65s var(--transition)',position:'relative',zIndex:1,
        }}>
          <img src="logo-tetsutalk-transparent.png" alt="" className="logo-watermark" style={{left:-120,top:-80,transform:'rotate(-8deg)'}} />
          <div style={{display:'flex',gap:10,alignItems:'center',flexWrap:'wrap'}}>
            <div className="sticker red">BE POP☆</div>
          </div>
          <div className="hero-heading-pop" style={{marginTop:22,maxWidth:760}}>
            <img
              src="tetsu_midashi_cropped.PNG"
              alt="友達をいじって、曲にしてます。"
              style={{display:'block',width:'100%',height:'auto'}}
            />
          </div>
          <p style={{marginTop:26,fontSize:'clamp(16px,2vw,20px)',fontWeight:800,lineHeight:1.75,maxWidth:560}}>
            頼まれてないけど、勝手に昇華させます。<br/>
            それが哲学トークの真骨頂!!
          </p>
          <div style={{marginTop:30,display:'flex',gap:14,flexWrap:'wrap'}}>
            <a href="music.html" className="press-btn press-btn-accent"><span>▶ 曲を聴く</span></a>
            <a href="concept.html" className="press-btn"><span>哲学トークとは？</span></a>
          </div>
        </div>

        <div style={{position:'relative',minHeight:430,opacity:entered?1:0,transition:'opacity .7s .15s'}}>
          <div aria-hidden="true" style={{position:'absolute',right:'16px',top:'62px',width:138,height:150,zIndex:3,transform:'scale(.72) rotate(5deg)',transformOrigin:'top right'}}>
            <div style={{position:'absolute',left:22,top:24,width:86,height:96,border:'3px solid var(--ink)',borderRadius:'50%',background:'#fff'}} />
            <div style={{position:'absolute',left:48,top:62,width:7,height:7,background:'var(--ink)',borderRadius:'50%'}} />
            <div style={{position:'absolute',left:82,top:62,width:7,height:7,background:'var(--ink)',borderRadius:'50%'}} />
            <div style={{position:'absolute',left:61,top:91,width:28,height:3,background:'var(--ink)'}} />
          </div>
          <div className="memo" style={{
            position:'absolute',right:0,top:30,width:'min(330px, 52vw)',paddingTop:34,
            transform:'rotate(7deg)',background:'#bfe9ff',
          }}>
            <div className="tape" style={{top:-12,left:'42%',transform:'rotate(7deg)'}} />
            <div className="accent-hand" style={{fontSize:22,fontWeight:400,borderBottom:'3px solid var(--ink)',display:'inline-block',marginBottom:12}}>TO DO LIST</div>
            {checks.map((c,i)=>(
              <label key={c} style={{display:'flex',gap:10,alignItems:'center',fontSize:14,margin:'9px 0',cursor:'pointer'}}>
                <input
                  type="checkbox"
                  className="todo-check"
                  checked={todoChecked[i]}
                  onChange={()=>setTodoChecked(prev=>prev.map((v,idx)=>idx===i?!v:v))}
                />
                <span>{c}</span>
              </label>
            ))}
            <div className="stamp" style={{marginTop:10,marginLeft:'auto',display:'flex',width:'fit-content'}}>2017/10/24-2017/10/28</div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px){
          section > div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
          section div[style*="min-height: 430px"]{min-height:500px!important}
        }
        @media (max-width: 520px){
          section{padding-top:86px!important}
          section div[style*="min-height: 430px"]{min-height:500px!important}
        }
      `}</style>
    </section>
  );
};
window.Hero = Hero;