// IdeaStory.jsx — 001 BEAM 아이디어 스토리 페이지
// 브랜드 철학, 영감의 원천, 디자인 언어를 에디토리얼 레이아웃 + 인터랙티브 배경으로 소개

// ── HeroViewer3D — IdeaStory 히어로 전용 3D 뷰어 ────────────────────────────
const HeroViewer3D = ({ isMobile, variant }) => {
  const mountRef = React.useRef(null);
  React.useEffect(() => {
    const container = mountRef.current;
    if (!container || !window.THREE) return;
    const T = window.THREE;
    const isHorizontal = variant === "180";
    const glbPath = isHorizontal ? "assets/models/beam_horizontal.glb" : "assets/models/beam_vertical.glb";
    const w = container.clientWidth || 600;
    const h = container.clientHeight || 800;

    const renderer = new T.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(isMobile ? 1 : Math.min(window.devicePixelRatio, 2));
    renderer.setSize(w, h);
    renderer.setClearColor(0x000000, 0);
    renderer.outputEncoding = T.sRGBEncoding;
    renderer.toneMapping = T.ReinhardToneMapping;
    renderer.toneMappingExposure = 1.1;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = T.PCFSoftShadowMap;
    renderer.domElement.style.pointerEvents = "none";
    renderer.domElement.style.touchAction = "pan-y";
    renderer.domElement.style.width = "100%";
    renderer.domElement.style.height = "100%";
    container.appendChild(renderer.domElement);

    const scene = new T.Scene();
    const camera = new T.PerspectiveCamera(45, w / h, 0.001, 1000);

    // ── Lighting ──
    scene.add(new T.AmbientLight(0xffffff, 0.04));
    if (T.RectAreaLightUniformsLib) T.RectAreaLightUniformsLib.init();
    const keyRect = new T.RectAreaLight(0xfff8f0, 4.5, 3.0, 1.2);
    keyRect.position.set(-0.8, 3.8, 2.2); keyRect.lookAt(0, 0, 0);
    scene.add(keyRect);
    const fillRect = new T.RectAreaLight(0xc8d4ff, 1.2, 1.5, 3.5);
    fillRect.position.set(-3.0, 0.8, 0.5); fillRect.lookAt(0, 0, 0);
    scene.add(fillRect);
    const rimLight = new T.DirectionalLight(0xffffff, 0.6);
    rimLight.position.set(3, 3, -4); scene.add(rimLight);
    const cameraLight = new T.PointLight(0xffffff, 1.2, 20, 2);
    scene.add(cameraLight);

    // ── EnvMap ──
    let envMap = null;
    try {
      const pmrem = new T.PMREMGenerator(renderer);
      const envScene = new T.Scene();
      envScene.add(Object.assign(new T.Mesh(new T.SphereGeometry(50,16,8), new T.MeshBasicMaterial({color:0x1a1a1a,side:T.BackSide}))));
      const top = new T.Mesh(new T.PlaneGeometry(10,40), new T.MeshBasicMaterial({color:0xffffff}));
      top.position.set(0,14,0); top.rotation.x = Math.PI/2; envScene.add(top);
      const front = new T.Mesh(new T.PlaneGeometry(16,20), new T.MeshBasicMaterial({color:0xe8e8e8}));
      front.position.set(9,1,12); front.lookAt(0,0,0); envScene.add(front);
      envMap = pmrem.fromScene(envScene).texture;
      scene.environment = envMap;
      pmrem.dispose();
    } catch(e) {}

    // ── 수동 카메라 회전 (OrbitControls 완전 제거 — iOS touch 이벤트 간섭 없음) ──
    let rotRadius = 0, rotY = 0, rotAngle = 0;

    let model = null;
    let animId;

    if (T.GLTFLoader) {
      const loader = new T.GLTFLoader();
      loader.load(glbPath, (gltf) => {
        model = gltf.scene;
        model.traverse((node) => {
          if (!node.isMesh) return;
          node.castShadow = true; node.receiveShadow = true;
          const mats = Array.isArray(node.material) ? node.material : [node.material];
          mats.forEach((mat) => {
            if (!mat || !mat.isMeshStandardMaterial) return;
            const n = mat.name || '', mesh = node.name || '';
            if (mesh === '로고파트') { mat.metalness=0.85; mat.roughness=0.30; mat.color.setHex(0xb0b0b0); }
            else if (n === 'Satin_Acrylic') {
              mat.metalness=0; mat.roughness=0.45; mat.transparent=true; mat.opacity=0.88;
              mat.depthWrite=false; mat.side=T.DoubleSide;
              mat.color.setHex(0xfffaf4); mat.emissive.setHex(0xfff2d8); mat.emissiveIntensity=13.0;
            } else {
              if (envMap) { mat.envMap=envMap; mat.envMapIntensity=1.0; }
              if (mat.metalness >= 0.9) {
                if ((n||'').indexOf('Smooth')!==-1) { mat.metalness=0.90; mat.roughness=0.12; mat.color.setHex(0xb8b8b8); mat.envMapIntensity=1.2; }
                else if ((n||'').indexOf('Brushed Chrome')!==-1) { mat.metalness=0.80; mat.roughness=0.62; mat.color.setHex(0x888888); mat.envMapIntensity=0.5; }
                else { mat.metalness=0.78; mat.roughness=0.55; mat.color.setHex(0x909090); mat.envMapIntensity=0.6; }
              }
            }
            mat.needsUpdate = true;
          });
        });
        // LED glow
        const parSpot = new T.SpotLight(0xffeedd, 300, 16, Math.PI/5, 0.4, 1.1);
        parSpot.position.set(0,-0.75,0.15); parSpot.target.position.set(0,3.0,0.15);
        model.add(parSpot); model.add(parSpot.target);
        const bulbGlow = new T.PointLight(0xfff0d8, 60, 4.0, 1.2);
        bulbGlow.position.set(0,-0.7,0.15); model.add(bulbGlow);

        // fitCamera
        let box = new T.Box3().setFromObject(model);
        const size = box.getSize(new T.Vector3());
        const maxDim = Math.max(size.x, size.y, size.z);
        const scaleFactor = isMobile ? 1.4 : (isHorizontal ? 2.0 : 2.2);
        if (maxDim > 0) model.scale.setScalar(scaleFactor / maxDim);
        box = new T.Box3().setFromObject(model);
        const center = box.getCenter(new T.Vector3());
        model.position.sub(center);
        box = new T.Box3().setFromObject(model);
        const sz = box.getSize(new T.Vector3());
        const md = Math.max(sz.x, sz.y, sz.z);
        const fovRad = (camera.fov * Math.PI) / 180;
        // 세로 뷰포트에서 가로 모델이 잘리지 않도록 aspect 반영
        const aspect = Math.max((container.clientWidth || 1) / (container.clientHeight || 1), 0.1);
        const baseDist = md / (1.4 * Math.tan(fovRad / 2));
        const distMult = isHorizontal
          ? (isMobile ? Math.max(1.1, 0.5 / aspect) : Math.max(1.0, 0.55 / aspect))
          : 1.0;
        const dist = baseDist * distMult;
        if (isHorizontal) {
          // 모바일: 85% 컨테이너가 중앙에 위치하므로 카메라도 정면에서 봄
          // model.position.x 시프트 없음 → 회전 중심점이 모델 중앙으로 정확함
          camera.position.set(dist*0.3, dist*0.28, dist*0.90);
        } else {
          camera.position.set(isMobile ? dist*0.4 : dist*0.65, dist*0.08, dist*0.85);
        }
        // 수동 회전 파라미터 저장
        rotRadius = Math.sqrt(camera.position.x**2 + camera.position.z**2);
        rotY      = camera.position.y;
        rotAngle  = Math.atan2(camera.position.x, camera.position.z);
        camera.lookAt(0, 0, 0);
        scene.add(model);
      }, undefined, (err) => console.warn('[HeroViewer3D]', err));
    }

    const animate = () => {
      animId = requestAnimationFrame(animate);
      if (rotRadius > 0) {
        rotAngle -= 0.004;
        camera.position.x = rotRadius * Math.sin(rotAngle);
        camera.position.z = rotRadius * Math.cos(rotAngle);
        camera.position.y = rotY;
        camera.lookAt(0, 0, 0);
      }
      cameraLight.position.copy(camera.position);
      renderer.render(scene, camera);
    };
    animate();

    const onResize = () => {
      const nw = container.clientWidth, nh = container.clientHeight;
      if (!nh) return;
      camera.aspect = nw / nh; camera.updateProjectionMatrix();
      renderer.setSize(nw, nh);
    };
    window.addEventListener("resize", onResize);
    return () => {
      cancelAnimationFrame(animId);
      window.removeEventListener("resize", onResize);
      renderer.dispose();
      if (container.contains(renderer.domElement)) container.removeChild(renderer.domElement);
    };
  }, [variant]);

  const isHorizMobile = isMobile && variant === "180";
  return (
    <div ref={mountRef} style={{
      position: "absolute",
      left:      isHorizMobile ? "50%" : "auto",
      right:     isHorizMobile ? "auto" : 0,
      transform: isHorizMobile ? "translateX(-50%)" : "none",
      top: isMobile ? "12%" : 0,
      zIndex: 3,
      width:  isHorizMobile ? "85%" : (isMobile ? "52%" : "58%"),
      height: isMobile ? "75%" : "100%",
      touchAction: "pan-y",
    }}/>
  );
};

const IdeaStory = ({ onViewProduct, t, lang }) => {
  const _t = t || ((k) => k);
  const { useEffect, useRef, useState } = React;
  const [w, setW] = useState(window.innerWidth);
  const [heroVariant, setHeroVariant] = useState("90");
  const heroRef = useRef(null);
  const ch3Ref  = useRef(null);

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

  const isMobile = w < 768;

  // ── Scroll reveal hook ──────────────────────────────
  const useReveal = (threshold = 0.04) => {
    const ref  = useRef(null);
    const [visible, setVisible] = useState(false);
    useEffect(() => {
      const obs = new IntersectionObserver(
        ([entry]) => { if (entry.isIntersecting) setVisible(true); },
        { threshold }
      );
      if (ref.current) obs.observe(ref.current);
      return () => obs.disconnect();
    }, []);
    return [ref, visible];
  };

  const [introRef,  introV]  = useReveal();
  const [ch1Ref,    ch1V]    = useReveal();
  const [ch2Ref,    ch2V]    = useReveal();
  const [ch3RevRef, ch3V]    = useReveal();
  const [ch4Ref,    ch4V]    = useReveal();
  const [ctaRef,    ctaV]    = useReveal();

  const rev = (v, delay = 0) => ({
    opacity: v ? 1 : 0,
    transform: v ? "translateY(0)" : "translateY(20px)",
    transition: `opacity 0.7s ease ${delay}s, transform 0.7s ease ${delay}s`,
  });

  const isKo = lang === "ko";

  // ── Shared styles ───────────────────────────────────
  const labelS = {
    fontFamily: "'Inter',-apple-system,sans-serif",
    fontSize: 10, letterSpacing: "0.25em",
    textTransform: "uppercase", fontWeight: 500,
  };
  const chNumS = (dark) => ({
    position: "absolute",
    fontSize: isMobile ? 96 : 160, fontWeight: 800,
    color: dark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)",
    fontFamily: "'Inter',sans-serif", lineHeight: 1,
    letterSpacing: "-0.05em", pointerEvents: "none",
    top: isMobile ? 40 : 64, right: isMobile ? 16 : 40,
    userSelect: "none",
  });

  return (
    <div style={{ background: "#FFF", color: "#1A1A1A", overflowX: "hidden", touchAction: "pan-y" }}>

      <style>{`
        @keyframes ideaScrollBounce {
          0%,100% { opacity:.3; transform:translateY(0); }
          50%      { opacity:.9; transform:translateY(8px); }
        }
        #idea-story-hero * { touch-action: pan-y !important; }
        .idea-story-btn {
          background:#FFF; color:#000; border:1px solid #FFF;
          padding:16px 48px; font-size:12px; letter-spacing:.15em;
          text-transform:uppercase; font-weight:500;
          cursor:pointer; font-family:'Inter',sans-serif;
          transition:background .3s,color .3s,border-color .3s;
        }
        .idea-story-btn:hover { background:transparent; color:#FFF; border-color:rgba(255,255,255,.5); }
        @media(max-width:768px){
          .idea-ch-grid { grid-template-columns:1fr !important; }
          .idea-ch-img  { min-height:300px !important; }
        }
      `}</style>

      {/* ════════════════════════════════════════
          HERO — ChromeCanvas + 3D Viewer
          ════════════════════════════════════════ */}
      <div ref={heroRef} id="idea-story-hero" style={{
        position: "relative", minHeight: isMobile ? "85vh" : "100vh",
        background: "#0A0B0D",
        display: "flex", flexDirection: "column",
        justifyContent: "flex-end", cursor: "crosshair",
        touchAction: "pan-y",
        willChange: "transform",
        transform: "translateZ(0)",
      }}>
        {window.ChromeCanvas && <window.ChromeCanvas sectionRef={heroRef} />}

        {/* 3D Viewer — ChromeCanvas 위, gradient 아래 */}
        <HeroViewer3D isMobile={isMobile} variant={heroVariant} />

        {/* Gradient fade — pointerEvents none으로 3D 뷰어 인터랙션 방해 안 함 */}
        <div style={{
          position: "absolute", inset: 0, zIndex: 4,
          background: "linear-gradient(to top, rgba(10,11,13,.97) 0%, rgba(10,11,13,.4) 50%, transparent 100%)",
          pointerEvents: "none",
        }}/>
        <div style={{
          position: "absolute", inset: 0, zIndex: 4,
          background: "linear-gradient(to right, rgba(10,11,13,.75) 0%, transparent 55%)",
          pointerEvents: "none",
        }}/>

        {/* Corner labels — top:80으로 nav 겹침 방지 */}
        <span style={{ ...labelS, position:"absolute", top:80, left:isMobile?24:48, zIndex:6, color:"rgba(255,255,255,.4)" }}>
          IDEA · 001 BEAM
        </span>
        <span style={{ ...labelS, position:"absolute", top:80, right:isMobile?24:48, zIndex:6, color:"rgba(255,255,255,.25)" }}>
          SEOUL · KR · 2026
        </span>

        {/* 90° / 180° 토글 버튼 */}
        <div style={{
          position: "absolute",
          bottom: isMobile ? 80 : 88,
          right: isMobile ? 24 : 48,
          zIndex: 6,
          display: "flex",
          border: "1px solid rgba(255,255,255,0.2)",
          borderRadius: 2,
        }}>
          {[["90","VERTICAL"],["180","HORIZONTAL"]].map(([v, label]) => (
            <button key={v}
              onClick={(e) => { e.stopPropagation(); setHeroVariant(v); }}
              style={{
                width: isMobile ? 44 : 130,
                background: heroVariant === v ? "rgba(255,255,255,0.15)" : "transparent",
                color: "rgba(255,255,255,0.75)",
                border: 0, padding: isMobile ? "8px 0" : "9px 0",
                fontSize: isMobile ? 9 : 10, letterSpacing: "0.12em",
                textTransform: "uppercase", fontWeight: 500,
                cursor: "pointer", fontFamily: "'Inter',sans-serif",
                transition: "background 0.2s", textAlign: "center",
                whiteSpace: "nowrap", overflow: "hidden",
              }}>
              {isMobile ? `${v}°` : `${label} · ${v}°`}
            </button>
          ))}
        </div>

        {/* Hero text */}
        <div style={{ position:"relative", zIndex:5, padding: isMobile ? "0 24px 64px" : "0 48px 96px", maxWidth:900 }}>
          <div style={{ ...labelS, color:"rgba(255,255,255,.4)", marginBottom:28 }}>
            {isKo ? "아이디어 스토리" : "THE IDEA STORY"}
          </div>
          <h1 style={{
            fontFamily:"'Inter',-apple-system,sans-serif",
            fontSize:`clamp(${isMobile?"42px":"72px"},9.5vw,120px)`,
            fontWeight:200, letterSpacing:"-0.04em",
            lineHeight:.95, color:"#FFF", margin:"0 0 40px",
          }}>
            {isKo ? <>빛을<br/>구조로.</> : <>Light<br/>as structure.</>}
          </h1>
          <p style={{
            fontFamily:"Georgia,serif",
            fontSize:isMobile?15:18, lineHeight:1.8,
            color:"rgba(255,255,255,.6)", maxWidth:540, margin:0,
          }}>
            {isKo
              ? "오랜 시간 탐구해온 철학과 건축적 구조, 그리고 미래적이고 미니멀한 미학을 담은 조명 오브제."
              : "A meditation on light, architecture, and the structural logic of objects — distilled into a single modular form."}
          </p>
          <div style={{
            marginTop:52, display:"flex", alignItems:"center", gap:10,
            ...labelS, color:"rgba(255,255,255,.28)",
            animation:"ideaScrollBounce 2.2s ease-in-out infinite",
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
              <path d="M12 5v14M5 12l7 7 7-7"/>
            </svg>
            SCROLL
          </div>
        </div>
      </div>

      {/* ════════════════════════════════════════
          MANIFESTO
          ════════════════════════════════════════ */}
      <div ref={introRef} id="idea-story-manifesto" style={{
        padding: isMobile?"80px 24px":"128px 64px",
        background:"#0A0A0A",
        ...rev(introV),
      }}>
        <div style={{ maxWidth:1000, margin:"0 auto" }}>
          <div style={{ ...labelS, color:"rgba(255,255,255,.2)", marginBottom:56 }}>MANIFESTO</div>
          <p style={{
            fontFamily:"Georgia,serif",
            fontSize:isMobile?20:30, lineHeight:1.65,
            letterSpacing:"-0.01em", color:"rgba(255,255,255,.88)",
            fontStyle:"italic", margin:"0 0 64px",
          }}>
            {isKo
              ? "\"BEAM이라는 이름은 빛의 투사와 확산을 나타내는 동시에, 건축물의 핵심 요소인 보(beam)를 상징합니다. 두 가지 의미는 모든 구성에 동시에 존재합니다.\""
              : "\"BEAM holds two truths simultaneously — the projection of light, and the beam that bears weight in architecture. Both meanings are present in every configuration.\""}
          </p>
          <div style={{
            display:"grid",
            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr",
            gap: isMobile ? 32 : 2,
            borderTop:"1px solid rgba(255,255,255,.07)",
            paddingTop:56,
          }}>
            {[
              { label:"DESIGN LANGUAGE", en:"Light, as structure.", ko:"빛을, 구조로." },
              { label:"INTERACTION",     en:"Analog dimming, modular system.", ko:"아날로그 디밍, 모듈러 시스템." },
              { label:"FORM",            en:"From headlight to monument.", ko:"헤드라이트에서 모뉴먼트까지." },
            ].map(({ label, en, ko }) => (
              <div key={label} style={{ padding: isMobile ? "0" : "0 48px 0 0", borderRight: isMobile ? "none" : "1px solid rgba(255,255,255,.07)" }}>
                <div style={{ ...labelS, color:"rgba(255,255,255,.28)", marginBottom:14 }}>{label}</div>
                <div style={{ fontFamily:"Georgia,serif", fontSize:16, lineHeight:1.55, color:"rgba(255,255,255,.7)", fontStyle:"italic" }}>
                  {isKo ? ko : en}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ════════════════════════════════════════
          CHAPTER 01 — LIGHT
          ════════════════════════════════════════ */}
      <section ref={ch1Ref} style={{ borderBottom:"1px solid rgba(0,0,0,.08)", ...rev(ch1V) }}>
        <div className="idea-ch-grid" style={{
          display:"grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          maxWidth:1400, margin:"0 auto",
        }}>
          {/* Text */}
          <div style={{ padding:isMobile?"64px 24px":"96px 64px", position:"relative" }}>
            <div style={{ ...chNumS(false) }}>01</div>
            <div style={{ ...labelS, color:"rgba(0,0,0,.32)", marginBottom:32 }}>
              {isKo ? "01 — 빛" : "01 — LIGHT"}
            </div>
            <h2 style={{
              fontFamily:"'Inter',-apple-system,sans-serif",
              fontSize:isMobile?34:50, fontWeight:300,
              letterSpacing:"-0.025em", lineHeight:1.1,
              margin:"0 0 36px", color:"#0A0A0A",
            }}>
              {isKo ? "빛은 모든 것의 시작이다." : <>Light is where<br/>everything begins.</>}
            </h2>
            <div style={{ fontFamily:"Georgia,serif", fontSize:15, lineHeight:1.95, color:"#3A3A3A" }}>
              {isKo ? <>
                <p>라이프스타일 브랜드의 첫 제품으로 조명을 선택한 것은 필연적이었습니다. 빛은 생명의 시작이자 첫 창조의 순간을 의미하기 때문입니다. 모든 생명 활동을 가능하게 하는 가장 기본적이고 필수적인 요소이기도 합니다.</p>
                <p>처음으로 음악이 아닌 눈에 보이는 무언가를 만들게 되었을 때, 가장 먼저 '무언가를 볼 수 있게 만들어주는 빛 그 자체'를 만들고 싶었습니다.</p>
                <p style={{ fontStyle:"italic", color:"#737373" }}>창세기에서 신이 세상을 창조할 때 가장 먼저 빛을 만들었던 것처럼 — 브랜드 세계를 구축하는 첫 단계로 빛을 선택하는 것이 철학적으로나 상징적으로나 가장 자연스러운 순서였습니다.</p>
              </> : <>
                <p>Choosing light as the first product of this lifestyle brand was inevitable. Light is where life begins — the first act of creation, the prerequisite of everything that follows.</p>
                <p>When I first made something visible rather than audible, the instinct was immediate: make the thing that makes everything else visible.</p>
                <p style={{ fontStyle:"italic", color:"#737373" }}>Just as the first act in Genesis was the creation of light — building this brand's world, it was the philosophically and symbolically natural starting point.</p>
              </>}
            </div>
            <div style={{
              marginTop:48, paddingLeft:20,
              borderLeft:"2px solid #0A0A0A",
              fontFamily:"Georgia,serif", fontSize:isMobile?18:22,
              fontStyle:"italic", color:"#0A0A0A", lineHeight:1.5,
            }}>
              "let there be light"
            </div>
          </div>
          {/* Image */}
          <div className="idea-ch-img" style={{
            background:"radial-gradient(ellipse at center,#2A2A2A 0%,#111 60%,#0A0A0A 100%)",
            minHeight:isMobile?360:"auto",
            position:"relative", overflow:"hidden",
          }}>
            <img
              src="assets/images/001 BEAM 90 FRONT VIEW.png"
              alt="001 BEAM"
              style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }}
            />
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════
          CHAPTER 02 — ARCHITECTURE
          ════════════════════════════════════════ */}
      <section ref={ch2Ref} style={{
        borderBottom:"1px solid rgba(255,255,255,.05)",
        background:"#0A0A0A", color:"#FFF",
        ...rev(ch2V),
      }}>
        <div className="idea-ch-grid" style={{
          display:"grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          maxWidth:1400, margin:"0 auto",
        }}>
          {/* Image */}
          <div className="idea-ch-img" style={{
            minHeight:isMobile?300:600,
            position:"relative", overflow:"hidden",
            background:"#111", order: isMobile ? 2 : 1,
          }}>
            <img
              src="assets/images/001 BEAM 180 PERSPECTIVE VIEW.png"
              alt="001 BEAM 180"
              style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", opacity:.8 }}
            />
          </div>
          {/* Text */}
          <div style={{ padding:isMobile?"64px 24px":"96px 64px", position:"relative", order: isMobile ? 1 : 2 }}>
            <div style={{ ...chNumS(true) }}>02</div>
            <div style={{ ...labelS, color:"rgba(255,255,255,.3)", marginBottom:32 }}>
              {isKo ? "02 — 건축" : "02 — ARCHITECTURE"}
            </div>
            <h2 style={{
              fontFamily:"'Inter',-apple-system,sans-serif",
              fontSize:isMobile?34:50, fontWeight:300,
              letterSpacing:"-0.025em", lineHeight:1.1,
              margin:"0 0 36px", color:"#FFF",
            }}>
              {isKo ? <>기념비에서<br/>레이저 빔까지.</> : <>From monument<br/>to laser beam.</>}
            </h2>
            <div style={{ fontFamily:"Georgia,serif", fontSize:15, lineHeight:1.95, color:"rgba(255,255,255,.62)" }}>
              {isKo ? <>
                <p>건축은 역학과 과학, 물리법칙에 대해 생각하게 합니다. 중력을 이겨내려는 인간의 건축사는 인간찬가처럼 느껴집니다.</p>
                <p>전자음악도 비슷한 이유로 매료시켰습니다 — 미래적이고 진보적인 동시에 체계적이고 논리적인 방식으로 사운드를 층층이 쌓아올려 완결된 구조물을 완성한다는 점에서 건축과 매우 유사했습니다. apachi라는 이름으로 처음 발표한 음악의 제목도 건축사에서 상징적인 'Parthenon'이었습니다.</p>
                <p style={{ fontStyle:"italic", color:"rgba(255,255,255,.38)" }}>그래서 무언가를 디자인할 때 건축적인 요소가 자연스럽게 제품에 녹아들었고, 역학을 고려한 설계를 하게 되었습니다.</p>
              </> : <>
                <p>Architecture makes me think about mechanics, science, and physical law. Humanity's history of defying gravity reads like a hymn to human ambition.</p>
                <p>Electronic music drew me in for similar reasons — layering sounds in a systematic, logical way to build a complete, unified structure is deeply architectural. My first release as apachi was named 'Parthenon'.</p>
                <p style={{ fontStyle:"italic", color:"rgba(255,255,255,.38)" }}>So when designing objects, architectural elements naturally found their way into the product's logic.</p>
              </>}
            </div>
            {/* Config cards */}
            <div style={{ marginTop:48, display:"grid", gridTemplateColumns:"1fr 1fr", gap:2 }}>
              {[
                { label:"VERTICAL · 90°", en:"Column — monumental presence. The structural beam as a standing object.", ko:"기둥처럼 수직적. 건물의 구조재를 연상시키는 모뉴먼트성." },
                { label:"HORIZONTAL · 180°", en:"Light bar — the intensity of a headlight. Horizontal laser precision.", ko:"라이트 바처럼 수평적. 자동차 헤드라이트의 강렬함을 담음." },
              ].map(({ label, en, ko }) => (
                <div key={label} style={{ padding:"24px 20px", border:"1px solid rgba(255,255,255,.07)" }}>
                  <div style={{ ...labelS, color:"rgba(255,255,255,.28)", marginBottom:12, fontSize:9 }}>{label}</div>
                  <div style={{ fontFamily:"Georgia,serif", fontSize:13, lineHeight:1.65, color:"rgba(255,255,255,.55)", fontStyle:"italic" }}>
                    {isKo ? ko : en}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════
          CHAPTER 03 — MATERIAL (ChromeCanvas bg)
          ════════════════════════════════════════ */}
      <section
        ref={(node) => { ch3Ref.current = node; ch3RevRef.current = node; }}
        style={{ position:"relative", background:"#C8CACC", cursor:"crosshair", overflow:"hidden", ...rev(ch3V) }}
      >
        {window.ChromeCanvas && <window.ChromeCanvas sectionRef={ch3Ref} />}
        <div style={{ position:"relative", zIndex:2 }}>
          <div style={{ padding:isMobile?"64px 24px 0":"96px 64px 0", maxWidth:1400, margin:"0 auto" }}>
            <div className="idea-ch-grid" style={{
              display:"grid",
              gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
              gap:isMobile?48:96, alignItems:"start",
            }}>
              {/* Text */}
              <div>
                <div style={{ position:"relative" }}>
                  <div style={{ ...chNumS(false), top:0, right:"auto", left:-20, fontSize:isMobile?80:120 }}>03</div>
                </div>
                <div style={{ ...labelS, color:"rgba(0,0,0,.38)", marginBottom:32 }}>
                  {isKo ? "03 — 소재" : "03 — MATERIAL"}
                </div>
                <h2 style={{
                  fontFamily:"'Inter',-apple-system,sans-serif",
                  fontSize:isMobile?34:50, fontWeight:300,
                  letterSpacing:"-0.025em", lineHeight:1.1,
                  margin:"0 0 36px", color:"#0A0A0A",
                }}>
                  {isKo ? <>모듈 금속.<br/>아날로그 빛.</> : <>Modular metal.<br/>Analog light.</>}
                </h2>
                <div style={{ fontFamily:"Georgia,serif", fontSize:15, lineHeight:1.95, color:"#3A3A3A" }}>
                  {isKo ? <>
                    <p>헤드 파트의 8개 스테인리스 모듈 판은 하나의 봉으로 연결되어 있습니다. 각 판은 독립적이면서도 전체로서 하나의 구조를 이루는 모듈 시스템입니다.</p>
                    <p>철로 이루어진 테일 파트에는 디밍용 아크릴이 설치되어 있어, 자석형 푸시버튼으로 빛의 밝기를 직관적으로 조절할 수 있습니다.</p>
                  </> : <>
                    <p>Eight stainless steel module slices, each independent yet united by a single central rod — a modular body where every component is both part and whole.</p>
                    <p>The steel tail houses a PMMA acrylic diffuser, controlled by a magnetic push-button that delivers analog dimming with the tactility of physical manipulation.</p>
                  </>}
                </div>
              </div>
              {/* Spec table */}
              <div style={{ paddingTop: isMobile ? 0 : 48 }}>
                {[
                  ["SUS304", isKo?"헤어라인 스테인리스 · 모듈 판 8개":"Hairline stainless · 8 modular slices"],
                  ["CR STEEL",isKo?"파우더 코팅 실버 · 테일 바디":"Powder coat silver · tail body"],
                  ["PMMA ACRYLIC",isKo?"광학 디퓨저 · 아날로그 디밍":"Optical diffuser · analog dimming"],
                  ["M5 BOLTS ONLY",isKo?"체결 유일 수단 · 접착제 없음":"Sole fastener · zero adhesive"],
                  ["GU10 LED",isKo?"7–10W 권장 · AC 220V":"7–10W recommended · AC 220V"],
                ].map(([k,v]) => (
                  <div key={k} style={{
                    display:"flex", justifyContent:"space-between",
                    alignItems:"baseline", padding:"16px 0",
                    borderBottom:"1px solid rgba(0,0,0,.12)",
                  }}>
                    <span style={{ ...labelS, color:"#1A1A1A", fontSize:9, fontWeight:600 }}>{k}</span>
                    <span style={{ fontFamily:"Georgia,serif", color:"rgba(0,0,0,.5)", fontSize:13, textAlign:"right", maxWidth:"58%" }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          {/* Detail image strip */}
          <div style={{ display:"grid", gridTemplateColumns: isMobile?"1fr 1fr":"1fr 1fr 1fr 1fr", gap:2, marginTop:64 }}>
            {[
              "assets/images/001 BEAM DETAIL 1 VIEW.png",
              "assets/images/001 BEAM DETAIL 2 VIEW.png",
              "assets/images/001 BEAM 90 SIDE VIEW.png",
              "assets/images/001 BEAM 180 SIDE VIEW.png",
            ].map((src,i) => (
              <div key={i} style={{ aspectRatio:"1/1", background:"#1A1A1A", position:"relative", overflow:"hidden" }}>
                <img src={src} alt="" style={{ width:"100%", height:"100%", objectFit:"cover" }}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════
          CHAPTER 04 — MODULE
          ════════════════════════════════════════ */}
      <section ref={ch4Ref} style={{ background:"#F5F4F2", ...rev(ch4V) }}>
        <div style={{ maxWidth:1400, margin:"0 auto", padding:isMobile?"64px 24px":"96px 64px" }}>
          <div className="idea-ch-grid" style={{
            display:"grid",
            gridTemplateColumns: isMobile ? "1fr" : "460px 1fr",
            gap:isMobile?48:80, alignItems:"start",
          }}>
            {/* Text */}
            <div>
              <div style={{ ...labelS, color:"rgba(0,0,0,.32)", marginBottom:32 }}>
                {isKo ? "04 — 모듈" : "04 — MODULE"}
              </div>
              <h2 style={{
                fontFamily:"'Inter',-apple-system,sans-serif",
                fontSize:isMobile?34:50, fontWeight:300,
                letterSpacing:"-0.025em", lineHeight:1.1,
                margin:"0 0 36px", color:"#0A0A0A",
              }}>
                {isKo ? <>소유하는 조명이 아닌,<br/>운용하는 시스템.</> : <>Not a fixture you own.<br/>A system you operate.</>}
              </h2>
              <div style={{ fontFamily:"Georgia,serif", fontSize:15, lineHeight:1.95, color:"#3A3A3A" }}>
                {isKo ? <>
                  <p>001 BEAM은 완전 모듈형 시스템입니다. 접착제 한 방울 없이 M5 볼팅만으로 분해·재조립됩니다. 모든 부품은 교체 가능합니다.</p>
                  <p>수직과 수평은 두 개의 제품이 아니라 하나의 두 가지 구성입니다. 당신이 원하는 대로 자유롭게 설치하고 배치하세요.</p>
                  <p>BEAM은 오브제이자 실용적인 무드등이며, 당신의 공간을 특별하게 만들어줄 아트피스입니다.</p>
                </> : <>
                  <p>001 BEAM is a fully modular system. Disassembled and reassembled with M5 bolts alone — zero adhesive, zero welding. Every component is replaceable.</p>
                  <p>Vertical and horizontal are not two products; they are two configurations of one object. Install, reconfigure, operate.</p>
                  <p>An object. A mood light. An art piece that gives new meaning to the space around it.</p>
                </>}
              </div>
              {/* Edition note */}
              <div style={{
                marginTop:48, padding:"24px",
                border:"1px solid rgba(0,0,0,.1)",
                background:"rgba(255,255,255,.6)",
              }}>
                <div style={{ ...labelS, color:"rgba(0,0,0,.35)", marginBottom:10 }}>FIRST EDITION</div>
                <div style={{ fontFamily:"Georgia,serif", fontSize:14, color:"#3A3A3A", lineHeight:1.7 }}>
                  {isKo
                    ? "첫 로트 10대 한정. 시리얼 넘버 및 인증 카드 동봉. ₩990,000"
                    : "First lot limited to 10 units. Serial number + certificate enclosed. ₩990,000"}
                </div>
              </div>
            </div>
            {/* Image grid */}
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gridTemplateRows:"auto auto", gap:2 }}>
              <div style={{ aspectRatio:"2/3", background:"#0A0A0A", position:"relative", overflow:"hidden" }}>
                <img src="assets/images/001 BEAM 90 PERSPECTIVE VIEW.png" alt="" style={{ width:"100%", height:"100%", objectFit:"cover", opacity:.9 }}/>
                <div style={{ position:"absolute", bottom:12, left:14, ...labelS, color:"rgba(255,255,255,.35)", fontSize:8 }}>VERTICAL · 90°</div>
              </div>
              <div style={{ aspectRatio:"2/3", background:"#111", position:"relative", overflow:"hidden" }}>
                <img src="assets/images/001 BEAM 180 PERSPECTIVE VIEW.png" alt="" style={{ width:"100%", height:"100%", objectFit:"cover", opacity:.85 }}/>
                <div style={{ position:"absolute", bottom:12, left:14, ...labelS, color:"rgba(255,255,255,.35)", fontSize:8 }}>HORIZONTAL · 180°</div>
              </div>
              <div style={{ gridColumn:"1 / 3", aspectRatio:"16/7", background:"#1A1A1A", position:"relative", overflow:"hidden" }}>
                <img src="assets/images/001 BEAM Module Stand Ver.png" alt="" style={{ width:"100%", height:"100%", objectFit:"cover", opacity:.85 }}/>
                <div style={{ position:"absolute", bottom:12, left:14, ...labelS, color:"rgba(255,255,255,.35)", fontSize:8 }}>MODULE STAND — COMING SOON</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════
          CTA — dark full width
          ════════════════════════════════════════ */}
      <div ref={ctaRef} id="idea-story-cta" style={{
        padding:isMobile?"80px 24px":"128px 64px",
        background:"#0A0A0A", color:"#FFF",
        ...rev(ctaV),
      }}>
        <div style={{ maxWidth:1400, margin:"0 auto" }}>
          <div className="idea-ch-grid" style={{
            display:"grid",
            gridTemplateColumns: isMobile ? "1fr" : "1fr auto",
            alignItems:"center", gap:48,
          }}>
            <div>
              <div style={{ ...labelS, color:"rgba(255,255,255,.28)", marginBottom:24 }}>
                001 · SHIPPING NOW · ₩990,000
              </div>
              <h2 style={{
                fontFamily:"'Inter',-apple-system,sans-serif",
                fontSize:isMobile?44:72,
                fontWeight:200, letterSpacing:"-0.04em",
                lineHeight:1.0, color:"#FFF", margin:"0 0 20px",
              }}>
                001 BEAM
              </h2>
              <p style={{
                fontFamily:"Georgia,serif",
                fontSize:16, lineHeight:1.75,
                color:"rgba(255,255,255,.48)",
                margin:0, maxWidth:480,
              }}>
                {isKo
                  ? "SUS304 헤어라인 스테인리스, CR 스틸, M5 볼트만. 접착제 없음. 완전 가역. 첫 에디션 — 한정 10개."
                  : "SUS304 hairline stainless, CR steel, M5 bolts only. Zero adhesive. Fully reversible. First edition — 10 units."}
              </p>
            </div>
            <div style={{ display:"flex", flexDirection:"column", gap:12, alignItems: isMobile ? "flex-start" : "flex-end" }}>
              <button className="idea-story-btn" onClick={onViewProduct}>
                {isKo ? "001 BEAM 보기 →" : "VIEW 001 BEAM →"}
              </button>
              <div style={{ ...labelS, color:"rgba(255,255,255,.2)", fontSize:9 }}>
                {isKo ? "한국 배송 · 약 14일 내 출고" : "SHIPS WITHIN 14 DAYS"}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  );
};

window.IdeaStory = IdeaStory;
