// Hero — chrome stage with rotating orb + huge UPGRADE wordmark
const Ic = window.Ic;
function Hero({ onShop }) {
  return (
    <section style={heroStyles.wrap}>
      <div style={heroStyles.metaRow}>
        <span style={heroStyles.meta}>/ DROP 09 · ULAANBAATAR · MMXXVI /</span>
        <span style={heroStyles.meta}>SCROLL ↓</span>
      </div>
      <div style={heroStyles.headline}>
        <div style={heroStyles.line} className="hero-line">UPGRADE</div>
        <div style={heroStyles.line} className="hero-line">YOUR</div>
        <div style={{...heroStyles.line, ...heroStyles.lineChrome}} className="hero-line">LIFE<span style={heroStyles.script} className="hero-script">style</span><span style={heroStyles.dot}>.</span></div>
      </div>
      <div style={heroStyles.stage} className="hero-stage">
        <img src="assets/chrome-orb.svg" style={heroStyles.orb}/>
        <div style={heroStyles.tagWrap}>
          <span style={heroStyles.tagYel}>13 ҮЛДЛЭЭЭ</span>
          <span style={heroStyles.tagPnk}>NOT FOR EVERYONE</span>
        </div>
      </div>
      <div style={heroStyles.cta}>
        <button onClick={onShop} style={heroStyles.btn}>
          Shop the drop <Ic.Arrow size={14}/>
        </button>
        <a style={heroStyles.ghost} href="https://www.instagram.com/p/DYTnbkTzQ0V/" target="_blank" rel="noopener noreferrer">Watch the reel <Ic.Play size={12}/></a>
      </div>
    </section>
  );
}

const heroStyles = {
  wrap: { maxWidth:1280, margin:"0 auto", padding:"40px 24px 60px", position:"relative" },
  metaRow: { display:"flex", justifyContent:"space-between", marginBottom:24 },
  meta: { fontFamily:"JetBrains Mono, monospace", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"#0E0D11" },
  headline: { fontFamily:"Inter, sans-serif", fontWeight:900, lineHeight:0.88, letterSpacing:"-0.045em", textTransform:"uppercase", color:"#0E0D11" },
  line: { fontSize:200, margin:"0 -6px" },
  lineChrome: {
    background: "linear-gradient(180deg,#FFFFFF 0%,#EAE9ED 30%,#6E6D74 65%,#FFFFFF 95%)",
    WebkitBackgroundClip:"text", backgroundClip:"text", color:"transparent",
    filter:"drop-shadow(0 4px 1px rgba(0,0,0,0.25))",
    display:"flex", alignItems:"baseline", gap:0,
  },
  script: { fontFamily:"Caveat, cursive", fontWeight:700, fontSize:160, lineHeight:1, color:"#FF3B6F", WebkitTextFillColor:"#FF3B6F", marginLeft:8 },
  dot: { color:"#0E0D11", WebkitTextFillColor:"#0E0D11" },
  stage: {
    position:"absolute", right:64, top:120,
    width:380, height:380,
    display:"flex", alignItems:"center", justifyContent:"center",
    pointerEvents:"none",
  },
  orb: { width:340, animation:"floatOrb 9s ease-in-out infinite" },
  tagWrap: { position:"absolute", inset:0, pointerEvents:"none" },
  tagYel: { position:"absolute", top:18, right:18, background:"#FFEC42", color:"#0E0D11", padding:"6px 10px", borderRadius:999, fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.15em", fontWeight:700, transform:"rotate(8deg)" },
  tagPnk: { position:"absolute", bottom:36, left:-12, background:"#FF3B6F", color:"#fff", padding:"6px 10px", borderRadius:999, fontFamily:"JetBrains Mono, monospace", fontSize:10, letterSpacing:"0.15em", fontWeight:700, transform:"rotate(-6deg)" },
  cta: { display:"flex", gap:14, alignItems:"center", marginTop:28 },
  btn: { background:"#1F1D23", color:"#fff", border:"none", padding:"16px 24px", borderRadius:14, fontFamily:"Inter, sans-serif", fontWeight:600, fontSize:15, display:"inline-flex", alignItems:"center", gap:10, cursor:"pointer" },
  ghost: { color:"#0E0D11", fontFamily:"Inter, sans-serif", fontWeight:500, fontSize:14, textDecoration:"underline", textUnderlineOffset:4, cursor:"pointer", display:"inline-flex", alignItems:"center", gap:6 },
  foot: { marginTop:36, paddingTop:24, borderTop:"1px solid #E8E7E9", display:"flex", justifyContent:"space-between", alignItems:"baseline" },
  foot1: { fontFamily:"Inter, sans-serif", fontSize:18, color:"#0E0D11", fontWeight:500 },
};

window.Hero = Hero;