// sections.jsx — editorial chapters.
// Per-side color palette via CSS variables (--bg, --fg, --fg-22 ... --card).
// Body class side-a or side-b chooses the palette.

const PAPER = 'var(--bg)';
const INK   = 'var(--fg)';
const CARD  = 'var(--card)';
const FAINT = 'var(--fg-22)';
const SOFT  = 'var(--fg-33)';
const MID   = 'var(--fg-55)';
const MED   = 'var(--fg-66)';
const VERM  = '#FF3D14';

function ChapterHead({ num, kicker, title, right }) {
  return (
    <div style={{marginBottom:56}}>
      {kicker && <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'0.3em', textTransform:'uppercase', opacity:0.55, marginBottom:14}}>
        — {kicker}
      </div>}
      <h2 style={{
        margin:0, fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300,
        fontSize:'clamp(48px, 7vw, 108px)', lineHeight:0.9, letterSpacing:'-0.03em',
      }}>{title}</h2>
    </div>
  );
}

/* ── CH. 01 · THE SUBJECT ─────────────────────────────────────────────── */
function About() {
  return (
    <section id="chapter-01" style={{background:PAPER, color:INK, padding:'140px 48px 120px', position:'relative'}}>
      <div style={{maxWidth:1320, margin:'0 auto', position:'relative'}}>
        <ChapterHead num="01" kicker="" title={<>Jeff Ge, <span style={{color:VERM}}>in short.</span></>} right="read ▸ 02 min"/>

        <div style={{display:'flex', flexDirection:'column', gap:28, maxWidth:900}}>
          {YUQI.summary.en.slice(0, -1).map((para, i) => (
            <p key={i} style={{
              fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300,
              fontSize:'clamp(22px, 2.2vw, 32px)', lineHeight:1.35, margin:0,
            }}>{para}</p>
          ))}
          <p style={{
            fontFamily:'"JetBrains Mono", monospace', fontSize:13,
            letterSpacing:'0.05em', lineHeight:1.8, margin:'8px 0 0',
            opacity:0.7,
          }}>{YUQI.summary.en[YUQI.summary.en.length - 1]}</p>
        </div>

        {/* big pull quote */}
        <div style={{marginTop:120, borderTop:'1px solid '+INK, borderBottom:'1px solid '+INK, padding:'64px 0'}}>
          <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'0.3em', color:VERM, marginBottom:24}}>
            ❝  A NOTE
          </div>
          <div style={{
            fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300,
            fontSize:'clamp(40px, 6vw, 84px)', lineHeight:1, letterSpacing:'-0.025em', maxWidth:1040,
          }}>
            Numbers and songs aren't opposites. They're <span style={{color:VERM}}>both ways</span> of turning noise into signal.
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── CH. 02 · /NOW (dark interlude) ───────────────────────────────────── */
function Now() {
  return (
    <section id="chapter-02" style={{background:PAPER, color:INK, padding:'140px 48px', position:'relative', overflow:'hidden'}}>
      <Noise opacity={0.04}/>
      <div style={{position:'absolute', left:'-10%', top:'20%', width:520, height:520, borderRadius:'50%', background:'radial-gradient(circle, '+VERM+'18, transparent 70%)', filter:'blur(40px)'}}/>

      <div style={{maxWidth:1320, margin:'0 auto', position:'relative'}}>
        <ChapterHead num="02" kicker="" title={<>Currently, <span style={{color:VERM}}>2026.</span></>} right="updated 2026.04.21"/>

        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:2, border:'1px solid '+SOFT}}>
          {YUQI.now.map((n,i)=>(
            <div key={i} style={{
              padding:'28px 24px', borderRight: i<3 ? '1px solid '+FAINT : 'none',
              background: i%2 ? CARD : 'transparent',
              display:'flex', flexDirection:'column', justifyContent:'flex-start', gap:24, minHeight:220,
              position:'relative',
            }}>
              <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'0.2em', color:VERM}}>
                {String(i+1).padStart(2,'0')} · {n.label.toUpperCase()}
              </div>
              <div style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:18, lineHeight:1.35, marginTop:0}}>
                {n.text}
                {n.link && <div style={{marginTop:12, fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'0.05em'}}>
                  <a href={n.link} target="_blank" rel="noreferrer" style={{color:VERM, textDecoration:'none', borderBottom:'1px dotted '+VERM}}>→ {n.link.replace(/^https?:\/\//,'')}</a>
                </div>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CH. 03 · THE WORK ────────────────────────────────────────────────── */
function Experience() {
  const [open, setOpen] = React.useState(YUQI.exp[0].id);
  return (
    <section id="chapter-03" style={{background:PAPER, color:INK, padding:'140px 48px', position:'relative'}}>
      <div style={{maxWidth:1320, margin:'0 auto'}}>
        <ChapterHead num="03" kicker="" title="Professional Experiences." right={`${YUQI.exp.length} positions · 2021—2026`}/>

        <div style={{borderTop:'1px solid '+INK}}>
          {YUQI.exp.map((e, i) => {
            const isOpen = open === e.id;
            return (
              <div key={e.id}
                onClick={()=>setOpen(isOpen ? null : e.id)}
                style={{borderBottom:'1px solid '+INK, padding:'28px 0', cursor:'pointer', transition:'background 180ms'}}
                onMouseEnter={ev=>ev.currentTarget.style.background=CARD}
                onMouseLeave={ev=>ev.currentTarget.style.background='transparent'}>
                <div style={{display:'grid', gridTemplateColumns:'70px 1.5fr 1fr 180px 20px', gap:28, alignItems:'baseline', fontFamily:'"JetBrains Mono", monospace'}}>
                  <div style={{fontSize:11, color:VERM, fontVariantNumeric:'tabular-nums', letterSpacing:'0.15em'}}>№ {String(i+1).padStart(2,'0')}</div>
                  <div style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:34, lineHeight:1, letterSpacing:'-0.015em'}}>{e.co}</div>
                  <div style={{fontSize:13, opacity:0.75}}>{e.role}</div>
                  <div style={{fontSize:11, opacity:0.6, fontVariantNumeric:'tabular-nums', letterSpacing:'0.1em'}}>{e.period}</div>
                  <div style={{fontSize:18, transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', transition:'transform 240ms', color:VERM}}>+</div>
                </div>
                <div style={{
                  maxHeight: isOpen ? 600 : 0, overflow:'hidden',
                  transition:'max-height 360ms cubic-bezier(.4,0,.2,1), margin-top 320ms',
                  marginTop: isOpen ? 20 : 0,
                }}>
                  <div style={{paddingLeft:98, maxWidth:900}}>
                    <ul style={{margin:0, padding:0, listStyle:'none', fontFamily:'"JetBrains Mono", monospace', fontSize:13, lineHeight:1.75, opacity:0.85}}>
                      {e.bullets.map((b,j)=>(
                        <li key={j} style={{display:'grid', gridTemplateColumns:'28px 1fr', gap:8, padding:'3px 0'}}>
                          <span style={{color:VERM}}>—</span><span>{b}</span>
                        </li>
                      ))}
                    </ul>
                    {e.loc && <div style={{marginTop:14, fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'0.15em', opacity:0.5, paddingLeft:36}}>◉ {e.loc}</div>}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* skills inline */}
        <div style={{marginTop:80, display:'grid', gridTemplateColumns:'220px 1fr', gap:60, borderTop:'1px solid '+SOFT, paddingTop:40}}>
          <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'0.25em', color:VERM}}>TOOLKIT</div>
          <div>
            {Object.entries(YUQI.skills).map(([cat, items])=>(
              <div key={cat} style={{display:'grid', gridTemplateColumns:'140px 1fr', gap:20, padding:'12px 0', borderBottom:'1px dashed '+SOFT}}>
                <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'0.15em', textTransform:'uppercase', opacity:0.6}}>{cat}</div>
                <div style={{display:'flex', flexWrap:'wrap', gap:8}}>
                  {items.map(s=>(
                    <span key={s} style={{fontFamily:'"JetBrains Mono", monospace', fontSize:12, padding:'3px 10px', border:'1px solid '+INK, borderRadius:0}}>{s}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── CH. 04 · THE RECORD (music) ──────────────────────────────────────── */
function Music() {
  const [playing, setPlaying] = React.useState(null);
  return (
    <section id="chapter-04" style={{background:PAPER, color:INK, padding:'140px 48px 160px', position:'relative', overflow:'hidden'}}>
      <Noise opacity={0.05}/>
      {/* vermillion corner wedge */}
      <div style={{
        position:'absolute', right:0, top:0, width:'38%', height:'55%',
        background:'linear-gradient(220deg, '+VERM+', transparent 75%)', opacity:0.14, pointerEvents:'none',
      }}/>
      <Marquee speed={80} style={{position:'absolute', top:34, left:0, right:0, pointerEvents:'none'}}>
        <span style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:'clamp(80px, 11vw, 180px)', lineHeight:1, color:'transparent', WebkitTextStroke:'1px '+FAINT}}>
          JEdoubleF911 &nbsp;·&nbsp; the record &nbsp;·&nbsp; JEdoubleF911 &nbsp;·&nbsp; the record &nbsp;·&nbsp;
        </span>
      </Marquee>

      <div style={{maxWidth:1320, margin:'0 auto', position:'relative', paddingTop:100}}>
        <ChapterHead num="04" kicker="the record · as JEdoubleF911" title={<>Ten tracks across four <span style={{color:VERM}}>releases.</span> And counting...</>} right={<a href="https://unitedmasters.com/jedoublef911" target="_blank" rel="noreferrer" style={{color:INK, textDecoration:'none', borderBottom:'1px dotted '+MED}}>full catalog ↗</a>}/>

        <div style={{borderTop:'1px solid '+SOFT}}>
          {YUQI.tracks.map((t,i)=>{
            const isOn = playing === t.n;
            const href = `https://unitedmasters.com/m/${t.slug}`;
            return (
              <div key={t.n}
                onMouseEnter={()=>setPlaying(t.n)}
                onMouseLeave={()=>setPlaying(null)}
                style={{
                  display:'grid', gridTemplateColumns:'70px 1fr 100px 90px 120px', gap:28,
                  padding:'30px 0', borderBottom:'1px solid '+SOFT,
                  alignItems:'center',
                  transition:'padding 250ms, background 180ms, color 180ms',
                  fontFamily:'"JetBrains Mono", monospace',
                  background: isOn ? VERM : 'transparent',
                  color: INK,
                  paddingLeft: isOn ? 24 : 0, paddingRight: isOn ? 24 : 0,
                }}>
                <div style={{fontSize:11, letterSpacing:'0.15em', opacity: isOn ? 0.75 : 0.55}}>№ {t.n}</div>
                <div style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:'clamp(32px, 4.5vw, 64px)', lineHeight:1, letterSpacing:'-0.02em', display:'flex', alignItems:'center', gap:18}}>
                  {isOn && <span style={{display:'inline-flex', gap:3, alignItems:'flex-end', height:24}}>
                    {[0,1,2,3].map(k=>(<span key={k} style={{width:4, background:INK, animation:`eq 0.55s ease-in-out infinite ${k*0.11}s alternate`}}/>))}
                  </span>}
                  {t.title}
                </div>
                <div style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', opacity: isOn ? 0.85 : 0.6}}>{t.tag}</div>
                <div style={{fontSize:13, fontVariantNumeric:'tabular-nums', opacity: isOn ? 0.85 : 0.55}}>{t.year}</div>
                <a href={href} target="_blank" rel="noreferrer"
                  onClick={e=>e.stopPropagation()}
                  style={{
                    fontSize:11, letterSpacing:'0.18em', textDecoration:'none',
                    border:'1px solid '+(isOn?INK:MED), padding:'8px 14px',
                    color:'inherit', textAlign:'center', transition:'all 180ms',
                  }}>LISTEN ↗</a>
              </div>
            );
          })}
        </div>

        <div style={{marginTop:48, display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'end'}}>
          <div style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:'clamp(28px, 3.5vw, 52px)', lineHeight:1.15, maxWidth:520}}>
            Side B is my <span style={{color:VERM}}>music</span> — my biggest passion outside of work.
          </div>
          <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:12, opacity:0.65, lineHeight:1.8, maxWidth:420, justifySelf:'end'}}>
            Distributed everywhere via UnitedMasters — Spotify, Apple Music, Tidal,<br/>
            YouTube Music, Amazon Music. Next release: <span style={{color:VERM}}>TBA 2026</span>.
          </div>
        </div>
      </div>
      <style>{`@keyframes eq{from{height:4px}to{height:24px}}`}</style>
    </section>
  );
}

/* ── CH. 05 · MUSIC GALLERY (Side B only) ─────────────────────────────── */
function Gallery() {
  const tiles = [
    { src:'images/studio-01-booth.jpg',       tag:'the booth',     label:'between takes',     n:1, span:8, aspect:'3/2', pos:'50% 35%' },
    { src:'images/studio-03-mic.jpg',         tag:'detail',        label:'telefunken u47',    n:2, span:4, aspect:'3/4', pos:'70% 50%' },
    { src:'images/studio-02-protools.jpg',    tag:'the desk',      label:'pro tools / c24',   n:3, span:7, aspect:'3/2', pos:'50% 40%' },
    { src:'images/studio-04-redco.jpg',       tag:'cue mix',       label:'redco audio',       n:4, span:5, aspect:'1/1', pos:'50% 45%' },
    { src:'images/studio-05-controlroom.jpg', tag:'control room',  label:'monitors up',       n:5, span:5, aspect:'1/1', pos:'50% 60%' },
    { src:'images/studio-06-wide.jpg',        tag:'wide',          label:'room tone',         n:6, span:7, aspect:'3/2', pos:'50% 55%' },
  ];
  return (
    <section id="chapter-05" style={{background:PAPER, color:INK, padding:'140px 48px'}}>
      <div style={{maxWidth:1320, margin:'0 auto'}}>
        <ChapterHead num="05" kicker="" title={<>Where the <span style={{color:VERM}}>tracks</span> get made.</>} right="6 frames"/>

        <div style={{display:'grid', gridTemplateColumns:'repeat(12, 1fr)', gap:10}}>
          {tiles.map((t)=>(
            <div key={t.n} style={{
              gridColumn:`span ${t.span}`, aspectRatio:t.aspect,
              backgroundImage:`url("${t.src}")`,
              backgroundSize:'cover', backgroundPosition:t.pos,
              position:'relative', overflow:'hidden', cursor:'pointer',
              transition:'transform 380ms cubic-bezier(.2,.7,.3,1)',
            }}
            onMouseEnter={e=>e.currentTarget.style.transform='scale(1.006)'}
            onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}>
              {/* subtle bottom-gradient so caption stays legible */}
              <div style={{position:'absolute', inset:0, background:'linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%)', pointerEvents:'none'}}/>
              <div style={{position:'absolute', top:14, left:16, display:'flex', gap:10, alignItems:'center', color:'#EEE8DE', fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase'}}>
                <span style={{width:6, height:6, background:VERM, borderRadius:'50%'}}/>
                <span>{t.tag}</span>
              </div>
              <div style={{position:'absolute', bottom:14, left:16, right:16, display:'flex', justifyContent:'space-between', alignItems:'flex-end', color:'#EEE8DE', fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase'}}>
                <span style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:22, textTransform:'none', letterSpacing:'-0.01em'}}>{t.label}</span>
                <span>№ {String(t.n).padStart(2,'0')}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CH. 06 · CONTACT ─────────────────────────────────────────────────── */
function Contact({ sideBOpen = false }) {
  const blurb = sideBOpen
    ? <>Open to <span style={{color:VERM}}>collabs on music</span>.</>
    : <>Graduating <span style={{color:VERM}}>Dec 2026</span>. Open to <span style={{color:VERM}}>full time roles for 2027</span>, business projects, and anything about Data, AI, ML.</>;
  return (
    <section id="chapter-06" style={{background:PAPER, color:INK, padding:'140px 48px 60px', position:'relative', overflow:'hidden'}}>
      <Noise opacity={0.04}/>
      <div style={{maxWidth:1320, margin:'0 auto', position:'relative'}}>
        <ChapterHead num="06" kicker="say hi" title={<>Let's <span style={{color:VERM}}>make something.</span></>} right="reply window · 48h"/>

        <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:80, alignItems:'start'}}>
          <div style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:'clamp(26px, 3vw, 42px)', lineHeight:1.3, opacity:0.9, maxWidth:620}}>
            {blurb}
          </div>

          <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:13, lineHeight:2.1}}>
            {[
              ['email',    YUQI.email,    `mailto:${YUQI.email}`],
              !sideBOpen ? ['linkedin', YUQI.linkedin, `https://${YUQI.linkedin}`] : null,
              !sideBOpen ? ['github',   YUQI.github,   `https://${YUQI.github}`]   : null,
              sideBOpen  ? ['music',    'unitedmasters.com/jedoublef911', 'https://unitedmasters.com/jedoublef911'] : null,
              ['based',    YUQI.location, null],
            ].filter(Boolean).map(([k,v,href])=>(
              <div key={k} style={{display:'grid', gridTemplateColumns:'100px 1fr', gap:16, padding:'8px 0', borderBottom:'1px solid '+FAINT}}>
                <span style={{opacity:0.5, textTransform:'uppercase', fontSize:10, letterSpacing:'0.2em'}}>{k}</span>
                {href ? <a href={href} target="_blank" rel="noreferrer" style={{color:INK, textDecoration:'none', borderBottom:'1px dotted transparent', transition:'border-color 180ms, color 180ms'}}
                  onMouseEnter={e=>{e.currentTarget.style.borderBottomColor=VERM; e.currentTarget.style.color=VERM;}}
                  onMouseLeave={e=>{e.currentTarget.style.borderBottomColor='transparent'; e.currentTarget.style.color='';}}>{v} ↗</a> : <span>{v}</span>}
              </div>
            ))}
          </div>
        </div>

        {/* giant signoff */}
        <div style={{marginTop:140, borderTop:'1px solid '+FAINT, paddingTop:40}}>
          <div style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:'clamp(80px, 18vw, 280px)', lineHeight:0.85, letterSpacing:'-0.04em', color:'transparent', WebkitTextStroke:'1px '+MID}}>
            Jeff Ge<span style={{color:VERM, WebkitTextStroke:'0', fontStyle:'normal', fontFamily:'"JetBrains Mono", monospace', fontSize:'0.18em', verticalAlign:'super', letterSpacing:0, marginLeft:14}}>/END</span>
          </div>
        </div>

        <div style={{marginTop:40, display:'flex', justifyContent:'space-between', fontFamily:'"JetBrains Mono", monospace', fontSize:10, opacity:0.5, letterSpacing:'0.2em', textTransform:'uppercase'}}>
          <span>© Jeff Ge</span>
          <span>v 3.0.0</span>
        </div>
      </div>
    </section>
  );
}

// Keep these exported names so index.html still works.
function Education() {
  return (
    <section id="chapter-edu" style={{background:PAPER, color:INK, padding:'140px 48px'}}>
      <div style={{maxWidth:1320, margin:'0 auto'}}>
        <ChapterHead num="04" kicker="" title={<>Where I <span style={{color:VERM}}>studied.</span></>} right={`${YUQI.edu.length} schools`}/>

        <div style={{borderTop:'1px solid '+INK}}>
          {YUQI.edu.map((e, i)=>(
            <div key={i} style={{borderBottom:'1px solid '+INK, padding:'36px 0'}}>
              <div style={{display:'grid', gridTemplateColumns:'70px 1.4fr 1fr 200px', gap:28, alignItems:'baseline', fontFamily:'"JetBrains Mono", monospace'}}>
                <div style={{fontSize:11, color:VERM, fontVariantNumeric:'tabular-nums', letterSpacing:'0.15em'}}>№ {String(i+1).padStart(2,'0')}</div>
                <div style={{fontFamily:'"Inter", sans-serif', fontStyle:'normal', fontWeight:300, fontSize:32, lineHeight:1.05, letterSpacing:'-0.015em'}}>{e.school}</div>
                <div style={{fontSize:13, opacity:0.8, lineHeight:1.5}}>
                  {e.deg}
                  {e.sub && <div style={{opacity:0.55, marginTop:4}}>{e.sub}</div>}
                </div>
                <div style={{fontSize:11, opacity:0.6, fontVariantNumeric:'tabular-nums', letterSpacing:'0.1em', display:'flex', alignItems:'center', gap:10}}>
                  {e.cur && <span style={{width:7, height:7, borderRadius:'50%', background:VERM, boxShadow:'0 0 8px '+VERM}}/>}
                  {e.dates}
                </div>
              </div>
              {e.coursework && (
                <div style={{paddingLeft:98, marginTop:18, display:'grid', gridTemplateColumns:'180px 1fr', gap:28}}>
                  <div style={{fontFamily:'"JetBrains Mono", monospace', fontSize:10, letterSpacing:'0.25em', textTransform:'uppercase', opacity:0.5}}>Relevant Coursework</div>
                  <div style={{display:'flex', flexWrap:'wrap', gap:8}}>
                    {e.coursework.map(c=>(
                      <span key={c} style={{fontFamily:'"JetBrains Mono", monospace', fontSize:12, padding:'4px 11px', border:'1px solid '+INK, borderRadius:0}}>{c}</span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Now, Experience, Education, Music, Gallery, Contact, ChapterHead });