// HeroMonitor — modern display frame wrapping the live, rebuilt dashboard.
// The dashboard is authored at its native 1500×844 px, then scaled via CSS
// transform to fit the monitor's fluid width.

const HeroMonitor = () => {
  const wrapRef = React.useRef(null);
  const [scale, setScale] = React.useState(0.5);

  React.useLayoutEffect(() => {
    const calc = () => {
      if (!wrapRef.current) return;
      const w = wrapRef.current.clientWidth;
      setScale(w / 1500);
    };
    calc();
    const ro = new ResizeObserver(calc);
    if (wrapRef.current) ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, []);

  return (
    <div style={{
      width:'100%',
      maxWidth:820,
      position:'relative',
      filter:'drop-shadow(0 40px 80px rgba(0,0,0,0.7)) drop-shadow(0 0 60px rgba(255,107,0,0.12))'
    }}>
      <div style={{
        background:'linear-gradient(180deg,#23222a 0%,#16151a 100%)',
        padding:12,
        borderRadius:16,
        border:'1px solid #2b2a31',
        boxShadow:'inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.5)'
      }}>
        <div ref={wrapRef} style={{
          aspectRatio:'1500 / 900',
          background:'#0a0a0c',
          borderRadius:6,
          overflow:'hidden',
          border:'1px solid #000',
          position:'relative'
        }}>
          <div style={{
            position:'absolute',
            top:0,left:0,
            width:1500, height:900,
            transformOrigin:'top left',
            transform:`scale(${scale})`
          }}>
            <LiveDashboard />
          </div>
          {/* Bottom fade — soft transition so content fades out instead of a hard cut */}
          <div aria-hidden style={{
            position:'absolute',left:0,right:0,bottom:0,height:'22%',
            background:'linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.7) 55%, rgba(10,10,12,1) 100%)',
            pointerEvents:'none',zIndex:2
          }} />
          {/* Subtle glare */}
          <div aria-hidden style={{
            position:'absolute',inset:0,pointerEvents:'none',
            background:'linear-gradient(125deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.03) 100%)',
            mixBlendMode:'overlay'
          }} />
        </div>
      </div>
    </div>
  );
};

const HeroPhone = () => (
  <div style={{
    width:260,
    position:'relative',
    filter:'drop-shadow(0 30px 70px rgba(0,0,0,0.7)) drop-shadow(0 0 50px rgba(93,230,255,0.18))'
  }}>
    <img src="assets/phone-mockup.webp" alt="ShopPanel mobil dashboard" style={{width:'100%',height:'auto',display:'block'}} />
  </div>
);

window.HeroMonitor = HeroMonitor;
window.HeroPhone = HeroPhone;