// hero.jsx — split-screen hero. Left = cool tech porcelain, right = warm editorial clay.

// Color pairings — two warm/cool papers in conversation, not a black/white shout.
const HERO_PALETTES = {
  porcelain: {
    L_bg:'#E8EDEC', L_fg:'#1a2a2e', L_mute:'#5b6a6d', L_accent:'#1d4d4f', L_rule:'#c8d2d1',
    R_bg:'#E8DCCB', R_fg:'#221813', R_mute:'#6b574a', R_accent:'#B5391E', R_glow:'#D87A4A', R_glowDeep:'#7a2818',
  },
  duskclay: {
    L_bg:'#DDE3DE', L_fg:'#0f1f1c', L_mute:'#56635f', L_accent:'#0a3d36', L_rule:'#bfc9c3',
    R_bg:'#3a2520', R_fg:'#F2E2CC', R_mute:'#b89a82', R_accent:'#FF8A4A', R_glow:'#c25a2a', R_glowDeep:'#1a0c08',
  },
  paperclay: {
    L_bg:'#F1EEE8', L_fg:'#1a1816', L_mute:'#7a7568', L_accent:'#3a4a2a', L_rule:'#d8d3c8',
    R_bg:'#C7553D', R_fg:'#FBEFD8', R_mute:'#f3d9b6', R_accent:'#FBEFD8', R_glow:'#E07A50', R_glowDeep:'#7a2818',
  },
  inkmoss: {
    L_bg:'#EAE7DE', L_fg:'#1a1a18', L_mute:'#7a7568', L_accent:'#1a1a18', L_rule:'#d4cfc2',
    R_bg:'#2A3A2C', R_fg:'#E8DCC4', R_mute:'#a8b09a', R_accent:'#E8A04A', R_glow:'#5a7050', R_glowDeep:'#0e1a10',
  },
};

function Hero({ palette='porcelain', sideBOpen=false }) {
  const P = HERO_PALETTES[palette] || HERO_PALETTES.porcelain;
  // sideBOpen=false → Engineer fills 100%; true → Artist fills 100%
  const leftW = sideBOpen ? 0 : 100;

  return (
    <section style={{
      height:'100vh', minHeight:640, width:'100%',
      position:'relative', overflow:'hidden',
      background: sideBOpen ? P.R_bg : P.L_bg,
      transition:'background 500ms ease-out',
    }}>
      {/* LEFT — Tech / cool porcelain */}
      <div
        style={{
          position:'absolute', inset:0,
          background:P.L_bg, color:P.L_fg,
          padding:'40px 56px',
          display:'grid', gridTemplateRows:'40px 1fr 80px', rowGap:0,
          fontFamily:'"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif',
          opacity: sideBOpen ? 0 : 1,
          transition:'opacity 500ms ease-out',
          pointerEvents: sideBOpen ? 'none' : 'auto',
          overflow:'hidden',
        }}>
        <div style={{display:'flex', justifyContent:'flex-start', alignItems:'center', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:P.L_mute, fontWeight:500}}>
          <span>The Engineer</span>
        </div>

        <div style={{display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <h1 style={{
            margin:0, fontFamily:'"Inter", -apple-system, sans-serif', fontWeight:320,
            fontSize:'clamp(64px, 8.4vw, 132px)', lineHeight:0.95, letterSpacing:'-0.05em',
            color:P.L_fg, whiteSpace:'nowrap',
          }}>
            Jeff Ge
          </h1>
          <div style={{marginTop:22, fontSize:14, color:P.L_mute, fontWeight:400, letterSpacing:'-0.01em', whiteSpace:'nowrap'}}>
            Data Science &nbsp;·&nbsp; Machine Learning &nbsp;·&nbsp; Spatial Analysis &nbsp;·&nbsp; AI Agent
          </div>
        </div>

        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:18}}>
          <a href="#chapter-02" aria-label="Jump to Currently, 2026"
            style={{display:'block', cursor:'pointer', transition:'opacity 200ms', textDecoration:'none'}}
            onMouseEnter={e=>e.currentTarget.style.opacity='0.7'}
            onMouseLeave={e=>e.currentTarget.style.opacity='1'}>
            <Scatter w={300} h={150} color={P.L_accent}/>
          </a>
          <a href="#chapter-01"
            style={{
              color:P.L_bg, background:P.L_fg, fontSize:11, textDecoration:'none',
              letterSpacing:'0.18em', textTransform:'uppercase', fontWeight:600,
              padding:'10px 16px', borderRadius:100, fontFamily:'"Inter", sans-serif',
              display:'inline-flex', alignItems:'center', gap:8,
            }}>
            <span style={{width:8, height:8, borderRadius:'50%', background:P.L_accent, animation:'pulse 1.6s ease-in-out infinite'}}/>
            Explore <span style={{fontSize:14}}>↓</span>
          </a>
        </div>
      </div>

      {/* RIGHT — Artist / warm clay */}
      <div
        style={{
          position:'absolute', inset:0,
          background:P.R_bg, color:P.R_fg,
          padding:'40px 48px',
          display:'grid', gridTemplateRows:'40px 1fr 80px', rowGap:0,
          overflow:'hidden',
          opacity: sideBOpen ? 1 : 0,
          transition:'opacity 500ms ease-out',
          pointerEvents: sideBOpen ? 'auto' : 'none',
        }}>
        <div style={{position:'absolute', right:-160, top:-160, width:520, height:520, borderRadius:'50%',
          background:`radial-gradient(circle, ${P.R_glow} 0%, ${P.R_glowDeep} 45%, transparent 70%)`, filter:'blur(20px)', opacity:0.55, pointerEvents:'none'}}/>
        <Noise opacity={0.10}/>

        <div style={{display:'flex', justifyContent:'flex-start', alignItems:'center', position:'relative', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', fontFamily:'"Geist Mono", monospace'}}>
          <span style={{color:P.R_accent}}>The Artist</span>
        </div>

        <div style={{position:'relative', display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <div style={{display:'flex', alignItems:'baseline', gap:'0.04em', flexWrap:'nowrap', lineHeight:0.88, whiteSpace:'nowrap'}}>
            <span style={{
              fontFamily:'"DM Serif Display", "Fraunces", serif', fontStyle:'italic', fontWeight:400,
              fontSize:'clamp(56px, 7.6vw, 128px)', letterSpacing:'-0.04em', color:P.R_fg,
            }}>JE</span>
            <span style={{
              fontFamily:'"Bricolage Grotesque", sans-serif', fontWeight:800,
              fontSize:'clamp(50px, 6.9vw, 116px)', letterSpacing:'-0.05em', color:P.R_fg,
              textTransform:'lowercase',
            }}>double</span>
            <span style={{
              fontFamily:'"DM Serif Display", "Fraunces", serif', fontStyle:'italic', fontWeight:400,
              fontSize:'clamp(56px, 7.6vw, 128px)', letterSpacing:'-0.04em', color:P.R_fg,
              position:'relative', display:'inline-flex', alignItems:'flex-start',
            }}>
              F
              <a href="https://unitedmasters.com/jedoublef911" target="_blank" rel="noreferrer" style={{
                fontFamily:'"Geist Mono", monospace', fontWeight:500,
                fontSize:'clamp(12px, 1.3vw, 18px)', color:P.R_accent,
                marginLeft:'0.05em', marginTop:'0.25em',
                letterSpacing:'0.02em', fontStyle:'normal',
                textDecoration:'none', cursor:'pointer',
                borderBottom:'1px dotted transparent', transition:'border-color 180ms',
              }}
              onMouseEnter={e=>e.currentTarget.style.borderBottomColor=P.R_accent}
              onMouseLeave={e=>e.currentTarget.style.borderBottomColor='transparent'}>911</a>
            </span>
          </div>
          <div style={{marginTop:22, fontSize:14, color:P.R_mute, fontWeight:400, letterSpacing:'-0.01em', fontFamily:'"Inter", sans-serif', maxWidth:380}}>
            R&amp;B &nbsp;·&nbsp; Hip‑Hop &nbsp;·&nbsp; Soul
          </div>
        </div>

        <div style={{position:'relative', display:'flex', justifyContent:'flex-end', alignItems:'flex-end', gap:18}}>
          <a href="https://unitedmasters.com/jedoublef911" target="_blank" rel="noreferrer"
            style={{
              color:P.R_bg, background:P.R_fg, fontSize:11, textDecoration:'none',
              letterSpacing:'0.18em', textTransform:'uppercase', fontWeight:600,
              padding:'10px 16px', borderRadius:100, fontFamily:'"Inter", sans-serif',
              display:'inline-flex', alignItems:'center', gap:8,
            }}>
            <span style={{width:8, height:8, borderRadius:'50%', background:P.R_accent, animation:'pulse 1.6s ease-in-out infinite'}}/>
            Listen <span style={{fontSize:14}}>↗</span>
          </a>
        </div>
        <style>{`@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.55}}`}</style>
      </div>

    </section>
  );
}

Object.assign(window, { Hero });