// Hero.jsx — NEWS section (최신 릴리즈 / 제품 소식)
// 원본: Claude Design "Light as Structure" 슬라이더 → NEWS 페이지로 재구성

const NEWS_SLIDES = [
  { src: "assets/images/001 BEAM 90 PERSPECTIVE VIEW.png",  label: "NEW RELEASE · 001 BEAM" },
  { src: "assets/images/001 BEAM 180 PERSPECTIVE VIEW.png", label: "001 BEAM · 180° HORIZONTAL" },
  { src: "assets/images/001 BEAM 90 SIDE VIEW.png",         label: "001 BEAM · SIDE PROFILE" },
  { src: "assets/images/001 BEAM 180 SIDE VIEW.png",        label: "001 BEAM · HORIZONTAL SIDE" },
  { src: "assets/images/001 BEAM 90 FRONT VIEW.png",        label: "001 BEAM · FRONT VIEW" },
];

/* Chrome WebGL background (Hero 전용 — IdeaSection과 다른 셰이더) */
const VERT_HERO = `attribute vec2 a_pos; void main(){ gl_Position=vec4(a_pos,0.0,1.0); }`;
const FRAG_HERO = `
  precision highp float;
  uniform vec2 u_res, u_mouse; uniform float u_time;
  #define TAU 6.28318530718
  float hash(vec2 p){ return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }
  float noise(vec2 p){
    vec2 i=floor(p),f=fract(p); f=f*f*(3.0-2.0*f);
    return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);
  }
  float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.1+vec2(1.3,2.7);a*=0.5;} return v; }
  vec3 chrome(float t){
    return clamp(vec3(0.12,0.13,0.16)+vec3(0.08,0.08,0.09)*cos(TAU*(vec3(0.9,0.92,0.98)*t+vec3(0.05,0.07,0.1))),0.0,1.0);
  }
  void main(){
    vec2 uv=gl_FragCoord.xy/u_res; float ar=u_res.x/u_res.y;
    vec2 st=uv*vec2(ar,1.0), ms=(u_mouse/u_res)*vec2(ar,1.0);
    float md=length(st-ms);
    float spot=exp(-md*md*3.8)*0.28;
    float mwave=sin(md*22.0-u_time*2.2)*0.05/(md*6.0+0.8);
    vec2 q=st+vec2(u_time*0.04,u_time*0.03);
    float f=fbm(q+mwave);
    vec2 r=vec2(fbm(q+f+vec2(1.7,9.2)+u_time*0.05),fbm(q+f+vec2(8.3,2.8)-u_time*0.04));
    float base=fbm(st+1.6*r+mwave*0.6);
    vec3 col=chrome(base*1.1+u_time*0.025);
    col+=spot*vec3(0.35,0.36,0.40);
    float vig=1.0-smoothstep(0.2,1.2,length(uv-0.5)*1.6);
    col=mix(col*0.5,col,vig);
    gl_FragColor=vec4(col,1.0);
  }
`;

const HeroChromeBg = () => {
  const ref = React.useRef(null);
  const S   = React.useRef({ mouse:[0,0], animId:null, start:0 });
  React.useEffect(()=>{
    const canvas=ref.current;
    const gl=canvas.getContext("webgl");
    if(!gl) return;
    const mk=(type,src)=>{ const sh=gl.createShader(type); gl.shaderSource(sh,src); gl.compileShader(sh); return sh; };
    const prog=gl.createProgram();
    gl.attachShader(prog,mk(gl.VERTEX_SHADER,VERT_HERO));
    gl.attachShader(prog,mk(gl.FRAGMENT_SHADER,FRAG_HERO));
    gl.linkProgram(prog); gl.useProgram(prog);
    const buf=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,buf);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
    const ap=gl.getAttribLocation(prog,"a_pos");
    gl.enableVertexAttribArray(ap); gl.vertexAttribPointer(ap,2,gl.FLOAT,false,0,0);
    const U={
      res:  gl.getUniformLocation(prog,"u_res"),
      mouse:gl.getUniformLocation(prog,"u_mouse"),
      time: gl.getUniformLocation(prog,"u_time"),
    };
    S.current.start=performance.now();
    const resize=()=>{
      const p=canvas.parentElement;
      canvas.width=p.offsetWidth; canvas.height=p.offsetHeight;
      gl.viewport(0,0,canvas.width,canvas.height);
    };
    resize(); window.addEventListener("resize",resize);
    const frame=()=>{
      const t=(performance.now()-S.current.start)/1000, s=S.current;
      gl.useProgram(prog);
      gl.uniform2f(U.res,canvas.width,canvas.height);
      gl.uniform2f(U.mouse,s.mouse[0],canvas.height-s.mouse[1]);
      gl.uniform1f(U.time,t);
      gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
      s.animId=requestAnimationFrame(frame);
    };
    frame();
    return()=>{ window.removeEventListener("resize",resize); cancelAnimationFrame(S.current.animId); };
  },[]);
  const onMove=(e)=>{
    const r=ref.current.getBoundingClientRect();
    S.current.mouse=[e.clientX-r.left,e.clientY-r.top];
  };
  return (
    <canvas ref={ref} onMouseMove={onMove}
      style={{ position:"absolute",inset:0,width:"100%",height:"100%",display:"block",cursor:"crosshair" }}/>
  );
};

// ── HeroSection (NEWS) ──────────────────────────────────────────────────────
const HeroSection = ({ onEnter, onReadIdea, t }) => {
  const _t = t || ((k)=>k);
  const [idx,   setIdx]   = React.useState(0);
  const [prev,  setPrev]  = React.useState(null);
  const [phase, setPhase] = React.useState("idle");
  const [w,     setW]     = React.useState(window.innerWidth);
  const touchStartX = React.useRef(null);
  const DURATION = 520;

  React.useEffect(() => {
    const handler = () => setW(window.innerWidth);
    window.addEventListener("resize", handler, { passive: true });
    return () => window.removeEventListener("resize", handler);
  }, []);
  const isMobile = w < 768;

  // 모든 슬라이드 이미지 마운트 즉시 preload
  React.useEffect(() => {
    NEWS_SLIDES.forEach(s => {
      const img = new window.Image();
      img.src = s.src;
    });
  }, []);

  const goTo = React.useCallback((next) => {
    if(phase==="sliding") return;
    setPrev(idx); setIdx(next); setPhase("sliding");
    setTimeout(()=>{ setPrev(null); setPhase("idle"); }, DURATION);
  },[idx,phase]);

  // 터치 스와이프 핸들러
  const onTouchStart = (e) => {
    touchStartX.current = e.touches[0].clientX;
  };
  const onTouchEnd = (e) => {
    if (touchStartX.current === null) return;
    const dx = e.changedTouches[0].clientX - touchStartX.current;
    touchStartX.current = null;
    if (Math.abs(dx) < 40) return; // 미세 터치 무시
    if (dx < 0) {
      goTo((idx + 1) % NEWS_SLIDES.length); // 왼쪽 스와이프 → 다음
    } else {
      goTo((idx - 1 + NEWS_SLIDES.length) % NEWS_SLIDES.length); // 오른쪽 스와이프 → 이전
    }
  };

  React.useEffect(()=>{
    const iv = setInterval(()=>goTo((idx+1)%NEWS_SLIDES.length), 3800);
    return()=>clearInterval(iv);
  },[idx,goTo]);

  const slide = NEWS_SLIDES[idx];
  const prevSlide = prev!==null ? NEWS_SLIDES[prev] : null;

  const imgStyle=(role)=>{
    // 데스크탑: cover로 좌우 검은 여백 제거 / 모바일: contain으로 제품 전체 표시
    const base={ position:"absolute",inset:0,width:"100%",height:"100%",
      objectFit: isMobile ? "contain" : "cover", objectPosition:"center center" };
    if(role==="current") return {
      ...base,
      animation: phase==="sliding" ? `heroSlideIn ${DURATION}ms cubic-bezier(0.77,0,0.175,1) forwards` : "none",
      zIndex:2,
    };
    if(role==="prev") return {
      ...base,
      animation: phase==="sliding" ? `heroSlideOut ${DURATION}ms cubic-bezier(0.77,0,0.175,1) forwards` : "none",
      zIndex:1,
    };
    return base;
  };

  const labelPos=(pos,opts={})=>{
    const base={ position:"absolute",fontSize:10,letterSpacing:"0.2em",textTransform:"uppercase",
      fontWeight:500,zIndex:5,fontFamily:"'Inter',-apple-system,sans-serif",
      color:opts.muted?"rgba(255,255,255,0.55)":"rgba(255,255,255,0.9)" };
    const e=24;
    if(pos==="tl") return {...base,top:e,left:e};
    if(pos==="tr") return {...base,top:e,right:e};
    if(pos==="bl") return {...base,bottom:e,left:e};
    return {...base,bottom:e,right:e};
  };

  const btnS=(kind)=>{
    const base={ fontFamily:"'Inter',-apple-system,sans-serif",fontSize:12,textTransform:"uppercase",
      letterSpacing:"0.12em",fontWeight:500,padding:"12px 24px",borderRadius:0,cursor:"pointer",
      transition:"background 300ms,color 300ms", border:"none" };
    if(kind==="primary") return {...base,background:"#FFFFFF",color:"#000",border:"1px solid #FFFFFF"};
    if(kind==="ghost")   return {...base,background:"transparent",color:"#FFFFFF",border:"1px solid rgba(255,255,255,0.5)"};
    return base;
  };

  return (
    <section id="news" style={{
      background:"#0A0B0D", position:"relative",
      height: isMobile ? "min(70vh,600px)" : "min(82vh,820px)",
      minHeight: isMobile ? 480 : 620,
      overflow:"hidden", color:"#FFFFFF",
    }}
    onTouchStart={onTouchStart}
    onTouchEnd={onTouchEnd}
    >
      <style>{`
        @keyframes heroSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
        @keyframes heroSlideOut{from{transform:translateX(0)}to{transform:translateX(-100%)}}
      `}</style>

      {/* 코너 레이블 */}
      <span style={labelPos("tl")}>NEWS · LATEST RELEASE</span>
      <span style={labelPos("tr",{muted:true})}>{slide.label}</span>
      <span style={labelPos("bl",{muted:true})}>SEOUL · KR · 2026</span>
      <span style={labelPos("br",{muted:true})}>SCROLL ↓</span>

      {/* 슬라이드 이미지 — backgroundColor로 로딩 중 검정 유지 */}
      {prevSlide && (
        <img key={`prev-${prev}`} src={prevSlide.src} alt={prevSlide.label} decoding="async" style={{...imgStyle("prev"), backgroundColor:"#0A0B0D"}}/>
      )}
      <img
        key={`curr-${idx}`}
        src={slide.src}
        alt={slide.label}
        decoding="async"
        fetchPriority={idx === 0 ? "high" : "auto"}
        loading="eager"
        onClick={()=>goTo((idx+1)%NEWS_SLIDES.length)}
        style={{...imgStyle("current"), cursor:"pointer", backgroundColor:"#0A0B0D"}}
      />

      {/* 하단 텍스트 + CTA */}
      <div style={{ position:"absolute", left: isMobile ? 20 : 40, bottom: isMobile ? 80 : 100, maxWidth: isMobile ? "90%" : 620, zIndex:5 }}>
        <div style={{ fontSize:10,letterSpacing:"0.2em",textTransform:"uppercase",
          fontWeight:500,color:"rgba(255,255,255,0.6)",marginBottom:16,
          fontFamily:"'Inter',-apple-system,sans-serif",
        }}>
          {_t("productLabel") || "001 BEAM · NOW AVAILABLE"}
        </div>
        <h2 style={{ fontFamily:"'Inter',-apple-system,sans-serif",fontWeight:300,
          fontSize:"clamp(56px,7.2vw,96px)",lineHeight:1.02,letterSpacing:"-0.03em",
          margin:0,color:"#FFFFFF",
        }}>
          {_t("productHeading1") || "Light as"}<br/>{_t("productHeading2") || "structure."}
        </h2>
        <p style={{ fontFamily:"Georgia,serif",fontSize:18,lineHeight:1.6,
          color:"rgba(255,255,255,0.75)",marginTop:24,maxWidth:460,
        }}>
          {_t("productDesc") || "Modular architectural lighting. SUS304 hairline stainless, CR steel, M5 bolts only. Zero adhesive."}
        </p>
        <div style={{ display:"flex", gap:12, marginTop:32, flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "center" }}>
          <button onClick={onEnter} style={btnS("primary")}>
            {_t("productCta") || "VIEW 001 BEAM"}
          </button>
          <button style={btnS("ghost")}
            onClick={()=>{ if(typeof onReadIdea==="function") onReadIdea(); else { const el=document.getElementById("idea"); if(el) el.scrollIntoView({behavior:"smooth"}); } }}>
            {_t("productIdea") || "READ THE IDEA"}
          </button>
        </div>
      </div>

      {/* 슬라이드 도트 네비게이션 */}
      <div style={{ position:"absolute",bottom:28,left:"50%",transform:"translateX(-50%)",
        display:"flex",gap:8,zIndex:5,
      }}>
        {NEWS_SLIDES.map((_,i)=>(
          <button key={i} onClick={()=>goTo(i)} style={{
            width:i===idx?22:6, height:6, border:0, borderRadius:0, padding:0,
            cursor:"pointer",
            background:i===idx?"#FFFFFF":"rgba(255,255,255,0.3)",
            transition:"width 300ms cubic-bezier(0.4,0,0.2,1),background 300ms",
          }}/>
        ))}
      </div>
    </section>
  );
};

window.HeroSection = HeroSection;