// HeroReference — макет из референса пользователя:
// фото справа с bleed, текст слева, тег "< Start coding />", 2 кнопки, Ctrl+→

function HeroReference(){
  return (
    <section style={{
      position:'relative',
      padding:'0',
      minHeight:720,
      overflow:'hidden',
      background:'#0a0a0b',
    }}>
      {/* ========== ATMOSPHERIC BG (behind photo) ========== */}
      {/* Deep blue wash left/center */}
      <div style={{
        position:'absolute', top:'-20%', left:'25%',
        width:1100, height:1100,
        background:'radial-gradient(circle, rgba(56,120,255,0.32) 0%, rgba(40,80,200,0.14) 28%, transparent 58%)',
        pointerEvents:'none',
        filter:'blur(30px)',
      }}/>
      {/* Yellow glow right — behind subject */}
      <div style={{
        position:'absolute', top:'10%', right:'-8%',
        width:1000, height:1000,
        background:'radial-gradient(circle, rgba(255,200,30,0.45) 0%, rgba(255,150,0,0.18) 30%, transparent 60%)',
        pointerEvents:'none',
        filter:'blur(20px)',
      }}/>
      {/* Warm edge rim */}
      <div style={{
        position:'absolute', top:0, right:0, bottom:0,
        width:'25%',
        background:'linear-gradient(270deg, rgba(255,180,40,0.22) 0%, transparent 100%)',
        pointerEvents:'none',
      }}/>

      {/* ========== PHOTO — feathered edges, no frame ========== */}
      <div className="hero-ref-photo" style={{
        position:'absolute', top:0, right:0, bottom:0,
        width:'62%',
        backgroundImage:`url(${window.__IMG['expert.png']})`,
        backgroundSize:'cover',
        backgroundPosition:'left center',
        backgroundRepeat:'no-repeat',
        maskImage:'radial-gradient(ellipse 65% 85% at 70% 50%, #000 30%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.35) 72%, transparent 90%)',
        WebkitMaskImage:'radial-gradient(ellipse 65% 85% at 70% 50%, #000 30%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.35) 72%, transparent 90%)',
        filter:'contrast(1.03) saturate(1.08)',
      }}/>

      {/* Warm color-grade overlay over photo right side */}
      <div style={{
        position:'absolute', top:'5%', right:'0%',
        width:'50%', height:'80%',
        background:'radial-gradient(ellipse at 60% 50%, rgba(255,200,50,0.15) 0%, transparent 60%)',
        mixBlendMode:'overlay',
        pointerEvents:'none',
      }}/>

      {/* Left vignette for text legibility */}
      <div style={{
        position:'absolute',inset:0,
        background:'linear-gradient(90deg, #0a0a0b 0%, rgba(10,10,11,0.92) 22%, rgba(10,10,11,0.45) 42%, transparent 60%)',
        pointerEvents:'none',
      }}/>
      {/* Bottom fade */}
      <div style={{
        position:'absolute',inset:0,
        background:'linear-gradient(180deg, transparent 55%, rgba(10,10,11,0.75) 100%)',
        pointerEvents:'none',
      }}/>
      {/* Faint code characters floating in bg */}
      <div aria-hidden className="hero-ref-code" style={{
        position:'absolute', inset:0, pointerEvents:'none',
        fontFamily:'Manrope,sans-serif',
        fontSize:11, color:'rgba(255, 214, 10,0.08)',
        whiteSpace:'pre', lineHeight:1.9, padding:'80px 40px',
        opacity:.7,
      }}>
{`  function vibe() {
    const agent = new Agent()
    await agent.connect()
    return agent.ship('automation')
  }
  > npm run money
  ✓ compiled in 1.2s
  ✓ deployed
  + $1000/mo incoming...`}
      </div>

      {/* Subtle grid */}
      <div className="grid-bg" style={{position:'absolute',inset:0,opacity:.4,pointerEvents:'none'}}/>

      {/* CONTENT */}
      <div style={{
        position:'relative',
        maxWidth:1440, margin:'0 auto',
        padding:'60px 48px 80px',
        display:'grid',
        gridTemplateColumns:'minmax(0, 620px) 1fr',
        gap:40,
        minHeight:640,
        alignItems:'center',
      }} className="hero-ref-grid">
        {/* LEFT column */}
        <div style={{position:'relative', zIndex:2}}>
          {/* Tag */}
          <div className="hero-ref-tag" style={{
            display:'inline-flex',alignItems:'center',gap:8,
            fontFamily:'Manrope,sans-serif',fontSize:16,fontWeight:500,
            color:'var(--yellow)',
            marginBottom:28,
          }}>
            <span>&lt;</span>
            <span>Start</span>
            <span style={{color:'var(--fg-dim)'}}>coding</span>
            <span>/&gt;</span>
          </div>

          {/* Heading */}
          <h1 className="display hero-ref-h1" style={{
            fontSize:'clamp(64px, 8.4vw, 132px)',
            lineHeight:0.95,
            margin:'0 0 28px',
            fontWeight:700,
            letterSpacing:'-0.035em',
            color:'var(--fg)',
          }}>
            Стань<br/>
            <span style={{color:'var(--yellow)'}}>AI&#8209;разрабом</span>
          </h1>

          {/* Subtitle */}
          <p className="hero-ref-sub" style={{
            fontSize:'clamp(17px, 1.3vw, 20px)',
            lineHeight:1.5,
            color:'var(--fg-dim)',
            margin:'0 0 32px',
            maxWidth:560,
            textWrap:'pretty',
          }}>
            Собирай <span style={{color:'var(--fg)',fontWeight:500}}>сайты, приложения и AI&#8209;агентов</span> через диалог с моделью. Закрывай клиентов на <span style={{color:'var(--yellow)',fontWeight:600,whiteSpace:'nowrap'}}>$500–2000</span> за проект.
          </p>

          {/* Feature chips */}
          <div className="hero-ref-chips" style={{
            display:'flex',gap:12,flexWrap:'wrap',
            marginBottom:40,
            maxWidth:720,
          }}>
            {[
              ['без знаний кода','01'],
              ['за 4 месяца','02'],
              ['с первым клиентом под кураторством','03'],
            ].map(([label,n])=>(
              <span key={n} style={{
                display:'inline-flex',alignItems:'center',gap:14,
                padding:'14px 22px',
                background:'rgba(255,255,255,0.06)',
                border:'1px solid rgba(255,255,255,0.14)',
                backdropFilter:'blur(8px)',
                WebkitBackdropFilter:'blur(8px)',
                borderRadius:999,
                fontFamily:'Manrope,sans-serif',fontSize:17,fontWeight:600,
                color:'var(--fg)',
                letterSpacing:'-0.01em',
                lineHeight:1.2,
              }}>
                <span style={{
                  fontFamily:'JetBrains Mono, ui-monospace, monospace',
                  fontSize:12,
                  color:'var(--yellow)',
                  letterSpacing:'.08em',
                  fontWeight:700,
                }}>{n}</span>
                <span style={{
                  width:1, height:18,
                  background:'rgba(255,255,255,0.18)',
                }}/>
                {label}
              </span>
            ))}
          </div>

          {/* Buttons row */}
          <div className="hero-ref-buttons" style={{display:'flex',gap:14,alignItems:'center',flexWrap:'wrap',marginBottom:40}}>
            <window.CTAButton tone="yellow" size="xl">Записаться на курс</window.CTAButton>
            <a href="#modules" style={{
              display:'inline-flex',alignItems:'center',justifyContent:'center',
              height:60, padding:'0 30px',
              background:'transparent',
              color:'var(--fg)',
              border:'1px solid var(--line-2)',
              borderRadius:30,
              fontFamily:'Manrope,sans-serif',fontWeight:600,fontSize:16,
              cursor:'pointer',textDecoration:'none',
              transition:'all .15s',
            }}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--yellow)';e.currentTarget.style.color='var(--yellow)';e.currentTarget.style.transform='translateY(1px)'}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--line-2)';e.currentTarget.style.color='var(--fg)';e.currentTarget.style.transform='none'}}
            onMouseDown={e=>e.currentTarget.style.transform='translateY(2px)'}
            onMouseUp={e=>e.currentTarget.style.transform='translateY(1px)'}
            >
              Подробнее
            </a>
          </div>

          {/* Keyboard hint */}
          <div className="hero-ref-kbd" style={{display:'flex',alignItems:'center',gap:10}}>
            <div style={{
              display:'inline-flex',alignItems:'center',justifyContent:'center',
              height:48, minWidth:62, padding:'0 14px',
              background:'var(--bg-2)',
              border:'1px solid var(--line-2)',
              borderRadius:10,
              fontFamily:'Manrope,sans-serif',fontWeight:600,fontSize:15,
              color:'var(--fg-dim)',
              boxShadow:'inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 0 #050507',
            }}>Ctrl</div>
            <div style={{
              display:'inline-flex',alignItems:'center',justifyContent:'center',
              width:48,height:48,
              background:'var(--bg-2)',
              border:'1px solid var(--line-2)',
              borderRadius:10,
              color:'var(--yellow)',fontSize:18,
              boxShadow:'inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 0 #050507',
            }}>→</div>
          </div>
        </div>

        {/* RIGHT column — decorative widget top-right */}
        <div className="hero-ref-right" style={{position:'relative', zIndex:2, height:'100%', pointerEvents:'none'}}>
          <div style={{
            position:'absolute', top:0, right:0,
            display:'inline-flex',alignItems:'center',gap:10,
            padding:'10px 16px',
            background:'rgba(16,16,20,0.6)',
            border:'1px solid var(--line-2)',
            borderRadius:14,
            backdropFilter:'blur(10px)',
            pointerEvents:'auto',
          }}>
            <span style={{
              fontFamily:'Manrope,sans-serif',fontSize:15,
              color:'var(--fg-dim)',
            }}>&lt;/&gt;</span>
            <span style={{
              width:26,height:26,borderRadius:'50%',
              background:'linear-gradient(180deg, var(--yellow) 0%, #e0ba00 100%)',
              display:'inline-flex',alignItems:'center',justifyContent:'center',
              fontSize:14,
            }}>✦</span>
          </div>

          {/* status line bottom */}
          <div style={{
            position:'absolute', bottom:-10, right:0,
            display:'flex',alignItems:'center',gap:10,
            padding:'8px 14px',
            background:'rgba(16,16,20,0.75)',
            border:'1px solid var(--line)',
            borderRadius:10,
            backdropFilter:'blur(10px)',
            fontFamily:'Manrope,sans-serif',fontSize:12,
            color:'var(--fg-dim)',
            pointerEvents:'auto',
          }}>
            <span style={{
              width:8,height:8,borderRadius:'50%',background:'var(--green)',
              boxShadow:'0 0 8px var(--green)',
            }}/>
            <span>Алексей · online</span>
            <span style={{color:'var(--fg-mute)'}}>·</span>
            <span style={{color:'var(--yellow)'}}>поток #2</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HeroReference = HeroReference;