/* ProductsPage.jsx */

function ProductsPage({ navigate, subPage, setSubPage }) {
  const [active, setActive] = React.useState(subPage || 'SHAPENIX');
  const w = useWindowWidth();
  const isMobile = w < 900;

  React.useEffect(() => {
    if (subPage && subPage !== active) setActive(subPage);
  }, [subPage]);

  const products = {
    'PFS-304': {
      tag: 'Full Body Scanner',
      tagline: '한의원·병원·비만센터 최적',
      headline: '정밀 3D 전신 스캐너\nPFS-304',
      desc: '건강검진센터, 비만관리 전문 병원, 한의원 등 정밀 3D 측정이 필요한 곳에 최적인 Full Body Scanner. 버튼 하나로 10초 이내 전신 스캔이 완료됩니다. 설치 공간이 충분한 환경에 권장됩니다.',
      img: 'assets/304_last.png',
      bg: '#f5f5f5',
      specs: [
        { label: '스캔 방식', value: '회전형 카메라 부스' },
        { label: '스캔 시간', value: '10초 이내' },
        { label: '측정 항목', value: '60개 이상' },
        { label: '측정 정밀도', value: '2mm 이내 오차' },
        { label: '광원', value: '인체 무해 광원' },
        { label: '제공 품목', value: '기계 · 전용PC · 모니터 · NAS · 컨트롤박스 · 캐비넷 · 커튼 · 전용카펫' },
      ],
      features: ['가슴·허리·엉덩이·허벅지 등 60여개의 인체 측정항목 자동 측정',' ±2mm의 정밀 스캔',' 정밀 서보 모터와 360도 회전방식 적용','의복 재질·색상 무관 손실 없는 3D 데이터','설치 공간이 넉넉한 환경에 최적화된 스탠다드 모델'],
      software: ['Obesity Management', 'Posture Management'],
      target: ['비만관리 전문 병원','대형병원 건강검진센터','비만·추나 전문 한의원','대학교 스포츠과학 연구소','보건소 및 공공기관'],
      optionItems: ['햇빛 차단을 위한 탈부착형 커튼 및 전용 캐비닛', '전용 카펫 및 자동 LED 조명', 'NAS 및 유저 프로그램'],
      galleryImages: ['assets/304/2.3042.JPG','assets/304/4.환경.png','assets/304/3.기계.png','assets/304/복부1.png','assets/304/1.설계도.png','assets/304/복부단면도_1.png','assets/304/체형 측정결과.png','assets/304/자세.png','assets/304/그래프.png','assets/304/그래프2.png','assets/304/그래프추이.png','assets/304/report.png'],
      video: 'https://www.youtube.com/embed/VhAdf7OLGts',
      sizeImg: 'assets/304규격총.png',
    },
    'PFS-N304': {
      tag: 'Compact Full Body Scanner',
      tagline: '협소공간 최적',
      headline: '컴팩트 3D 전신 스캐너\nPFS-N304',
      desc: '설치 공간이 협소한 환경을 위한 컴팩트 버전. PFS-304와 동일한 측정 성능을 더 작은 사이즈로 제공합니다. 한의원, 의류업체, 소형 클리닉 등 공간 제약이 있는 곳에 최적입니다.',
      img: 'assets/n304.png',
      bg: '#f5f5f5',
      specs: [
        { label: '스캔 방식', value: '회전형 카메라 부스' },
        { label: '스캔 시간', value: '10초 이내' },
        { label: '측정 항목', value: '60개 이상' },
        { label: '측정 정밀도', value: '2mm 이내 오차' },
        { label: '광원', value: '인체 무해 광원' },
        { label: '제공 품목', value: '기계 · 전용PC · 모니터 · NAS · 컨트롤박스 · 캐비넷 · 커튼 · 전용카펫' },
      ],
      features: ['PFS-304와 동일한 측정 성능','컴팩트 사이즈로 협소 공간 설치 가능','가슴·허리·엉덩이·허벅지 등 60여개의 인체 측정항목 자동 측정','의복 재질·색상 무관 손실 없는 3D 데이터'],
      software: ['Obesity Management', 'Posture Management'],
      target: ['공간이 협소한 한의원·클리닉','의류 업체·패션 브랜드','소형 피트니스 센터'],
      optionItems: ['햇빛 차단을 위한 탈부착형 커튼 및 전용 캐비닛', '전용 카펫 및 자동 LED 조명', 'NAS 및 유저 프로그램'],
      galleryImages: [],
      sizeImg: 'assets/N304규격총.png',
    },
    'Shape Care': {
      tag: 'Turntable Scanner + BIA',
      tagline: '에스테틱·피트니스 최적',
      headline: '체성분 + 3D 바디\nShape Care',
      desc: '체성분 측정 기능을 탑재한 피트니스·에스테틱 전용 신규 턴테이블형 Scanner. 8점식 BIA 방식으로 체성분 분석과 3D 바디 스캔을 동시에 제공합니다.',
      img: 'assets/shapecare_product.png',
      bg: '#f5ece4',
      specs: [
        { label: '스캔 방식', value: '턴테이블 360도 회전' },
        { label: '스캔 시간', value: '10초 이내' },
        { label: '3D 측정 항목', value: '30개 이상 항목' },
        { label: '체성분 방식', value: '8점식 BIA' },
        { label: '제공 품목', value: '기계 · 전용PC · 모니터 · NAS · 캐비넷' },
      ],
      features: ['3D 바디 스캔 + 체성분 측정 동시 진행','가슴·허리·엉덩이·허벅지 30여개의 인체 측정항목 자동 측정','체지방률·근육량·골격근량 측정','피트니스·필라테스·에스테틱 샵 최적화'],
      software: ['Obesity Management'],
      softwareExtraItems: { 'Obesity Management': ['회전각도, 중심과의 거리 제공'] },
      target: ['에스테틱 샵','피트니스·헬스장','필라테스 센터','체형 관리 전문 센터'],
      optionItems: ['햇빛차단을 위한 탈부착형 커튼 및 전용 캐비닛', '전용 카펫 및 자동 LED 조명', 'NAS 및 유저 프로그램'],
      galleryImages: ['assets/shapecare/1.기계.jpg','assets/shapecare/Body_Scanner.png','assets/shapecare/전후2.png','assets/shapecare/01_인체 치수 측정W.jpg','assets/shapecare/전후.png','assets/shapecare/06_회전각도.jpg','assets/shapecare/체성분 분석_05.jpg','assets/shapecare/리포트.jpg','assets/shapecare/Email.jpg'],
      video: 'https://www.youtube.com/embed/ewKnA24BvPQ',
      sizeImg: 'assets/shapecare규격all.png',
    },
    'SHAPENIX': {
      tag: 'High Precision Scanner', 
      tagline: '연구기관·대학교 최적',
      headline: '국내 독자 기술\n고정밀 스캐너 SHAPENIX',
      desc: '(주)피엠티이노베이션이 독자 기술로 개발한 고정밀 3D 인체 스캐너. 적외선 라인스캔 방식을 사용하여 ISO 20685 국제 표준을 충족하는 고정밀 데이터를 제공합니다.',
      img: 'assets/404 Scanner.png',
      bg: '#1a1a1a',
      specs: [
        { label: '스캔 방식', value: '적외선 라인스캔' },
        { label: '스캔 시간', value: '10초 이내' },
        { label: '측정 항목', value: '150개 이상' },
        { label: '측정 정밀도', value: '1mm 이내 오차' },
        { label: '국제 표준', value: 'ISO 20685 준수' },
        { label: '제공 품목', value: '기계 ·전용 PC · 모니터 · NAS · 컨트롤박스 · 캐비넷 · 커튼 · 전용카펫 · 자동 LED조명' },
      ],
      features: ['적외선 라인스캔 방식 고정밀 3D 데이터','ISO 20685 국제 인체 측정 표준 준수','150여개 항목 자동 측정, 1mm 이내 오차','Size Korea 측정항목 완벽 지원','탈부착형 햇빛 차단 커튼 및 자동 LED 조명 포함'],
      software: ['Anthropometry', 'Measurement for Apparel'],
      target: ['성별·연령별 국가 인체 표준 데이터 구축','맞춤형 의복 제작 및 의상 연구','비만·자세 분석 인체 측정','대학교·연구기관·국책기관'],
      optionItems: ['햇빛 차단을 위한 탈부착형 커튼 및 전용 캐비닛', '전용 카펫 및 자동 LED 조명', 'NAS 및 유저 프로그램'],
      galleryImages: ['assets/shapenix/0.SHAPENIX 세팅.jpg','assets/shapenix/1.기계.png','assets/shapenix/2.발판.jpg','assets/shapenix/그림1.png','assets/shapenix/4P_각도.jpg','assets/shapenix/5.사람.png','assets/shapenix/6.사람후2.png','assets/shapenix/7.합치기.png','assets/shapenix/8.사람.png','assets/shapenix/등.png','assets/shapenix/팔올.png','assets/shapenix/자세히.png','assets/shapenix/9.등고선.png','assets/shapenix/11.ui2.JPG'],
      video: 'https://www.youtube.com/embed/JblOGNGdSqM',
      sizeImg: 'assets/SHAPENIX규격완성.png',
    },
  };

  const productOrder = ['SHAPENIX', 'PFS-304', 'PFS-N304', 'Shape Care'];
  const cur = products[active];
  const softwareInfo = {
    'Anthropometry': {
      label: '인체측정 프로그램',
      purpose: '연구 및 통계',
      items: [
        'ISO-20685 기준의 150여개의 측정항목 자동측정',
        'Size Korea 지원',
        'EXCEL 저장기능: 전체측정결과저장',
        'Symmetry Line 자동생성',
        '수동 직선길이 측정, 각도측정',
      ],
    },
    'Measurement for Apparel': {
      label: '의류용 측정 프로그램',
      purpose: '연구 및 맞춤의류 매장용',
      items: [
        '사용 목적에 따라 다른 측정프로그램 제공',
        '범용 치수 측정 프로그램',
        '남성 수트용 측정 프로그램',
        '여성 내의용 측정 프로그램',
        '둘레, 길이, 높이, 너비 등 치수 측정',
      ],
    },
    'Obesity Management': {
      label: '체형 비만관리 프로그램',
      purpose: '체형, 비만 측정 및 상담',
      items: [
        '전후 비교',
        '둘레, 단면적, 부위별 체적',
        '부위별 Ideal Value 제공',
        '체형지표 — WHR, WHtR, THR',
      ],
      outputItems: [
        '부위별 변화 차트',
        '겹쳐보기(Overlay)',
        'EXCEL 저장기능(Option)',
        'Color Image (Option)',
      ],
    },
    'Posture Management': {
      label: '자세 측정 프로그램',
      purpose: '자세측정 및 전후 비교',
      items: [
        '전후 비교',
        '둘레, 단면적, 부위별 체적',
        '부위별 Ideal Value 제공',
        '체형지표 — WHR, WHtR, THR',
        '좌우비대칭',
        '어깨높낮이 · 높이차와 각도',
        '좌우 밸런스',
      ],
      outputItems: [
        '부위별 변화 차트',
        '겹쳐보기(Overlay)',
        'EXCEL 저장기능(Option)',
        'Color Image (Option)',
      ],
    },
  };

  const ROW = { display:'flex', borderBottom:'1px solid #ebebeb', minHeight:52 };
  const LABEL_COL = { width:220, flexShrink:0, display:'flex', alignItems:'center',
    fontSize:15, fontWeight:700, color:'#C8271D', padding:'14px 0 14px 0', letterSpacing:'-0.01em' };
  const CONTENT_COL = { flex:1, display:'flex', alignItems:'center', padding:'14px 0', fontSize:15, color:'#333', lineHeight:1.7 };

  return (
    <div style={{ paddingTop: NAV_HEIGHT, background:'#fff', minHeight:'100vh' }}>

      {/* ── 제품 탭 ── */}
      <div style={{ borderBottom:'1px solid #e8e8e8', background:'#fff', position:'sticky', top:NAV_HEIGHT, zIndex:100 }}>
        <div className="pmt-pad-lg" style={{ maxWidth:960, margin:'0 auto', padding:'0 48px', display:'flex', gap:0, overflowX:'auto' }}>
          {productOrder.map(id => (
            <button key={id} onClick={() => { setActive(id); window.scrollTo({top:0,behavior:'instant'}); }}
              style={{ background:'none', border:'none', cursor:'pointer', padding:'18px 20px', fontSize:14, fontWeight:700,
                color:active===id?'#C8271D':'#888', borderBottom:active===id?'2px solid #C8271D':'2px solid transparent',
                fontFamily:'inherit', whiteSpace:'nowrap', transition:'color 200ms', letterSpacing:'-0.01em' }}>{id}</button>
          ))}
        </div>
      </div>

      {/* ── 히어로: 참고 스타일 배경 ── */}
      <div className="pmt-pad-lg" style={{
        minHeight: isMobile ? 'auto' : `calc(100vh - ${NAV_HEIGHT}px)`,
        padding: isMobile ? '64px 48px' : '0 48px',
        display:'flex', alignItems:'center',
        background:`
          radial-gradient(ellipse 80% 60% at 50% 50%, #4a4a4a 0%, #2a2a2a 35%, #111 65%, #060606 100%),
          linear-gradient(to bottom, #050505 0%, transparent 25%, transparent 75%, #050505 100%),
          linear-gradient(to right, #050505 0%, transparent 20%, transparent 80%, #050505 100%)
        `,
        position:'relative', overflow:'hidden',
      }}>
        {/* 제품 뒤 스포트라이트 */}
        <div style={{
          position:'absolute', right:'8%', top:'50%', transform:'translateY(-50%)',
          width:480, height:480, borderRadius:'50%',
          background:'radial-gradient(circle, rgba(80,80,80,0.22) 0%, transparent 70%)',
          pointerEvents:'none',
        }} />

        <div className="rgrid-2" style={{ maxWidth:960, margin:'0 auto', width:'100%', display:'grid', gridTemplateColumns: active==='PFS-304' ? '1fr 1.4fr' : '1fr 1fr', gap:64, alignItems:'center', position:'relative', zIndex:1 }}>
          {/* 텍스트 */}
          <div>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase',
              color:'rgba(255,255,255,0.35)', marginBottom:20 }}>{cur.tag}</div>
            <h1 style={{ fontSize:'clamp(36px,4vw,64px)', fontWeight:800, color:'#fff',
              letterSpacing:'-0.04em', lineHeight:1.08, marginBottom:20 }}>{active}</h1>
            <p style={{ fontSize:17, color:'rgba(255,255,255,0.5)', fontWeight:400, lineHeight:1.75,
              marginBottom:40, maxWidth:420 }}>{cur.tagline}</p>
            <button onClick={()=>navigate('contact')}
              style={{ background:'transparent', color:'rgba(255,255,255,0.85)', border:'1.5px solid rgba(255,255,255,0.35)',
                borderRadius:99, padding:'13px 30px', fontSize:14, fontWeight:600,
                cursor:'pointer', fontFamily:'inherit', transition:'all 200ms', letterSpacing:'0.01em' }}
              onMouseEnter={e=>{ e.currentTarget.style.background='#C8271D'; e.currentTarget.style.borderColor='#C8271D'; e.currentTarget.style.color='#fff'; }}
              onMouseLeave={e=>{ e.currentTarget.style.background='transparent'; e.currentTarget.style.borderColor='rgba(255,255,255,0.35)'; e.currentTarget.style.color='rgba(255,255,255,0.85)'; }}
            >문의하기</button>
          </div>
          {/* 제품 이미지 */}
          <div style={{ display:'flex', alignItems:'center', justifyContent:'center' }}>
            <img src={cur.img} alt={active}
              style={{ maxHeight: isMobile ? '46vh' : active==='PFS-304' ? '115vh' : active==='Shape Care' ? '62vh' : '75vh', maxWidth:'100%', objectFit:'contain',
                filter:'drop-shadow(0 24px 64px rgba(0,0,0,0.55))', display:'block', width:'100%' }} />
          </div>
        </div>
      </div>

      {/* ── 콘텐츠 본문 ── */}

      {/* Features */}
      <section style={{ borderBottom:'1px solid #ebebeb' }}>
        <div className="side-flex pmt-pad-lg" style={{ maxWidth:1280, margin:'0 auto', padding:'80px 72px', display:'flex', gap:100, alignItems:'flex-start' }}>
          <div className="side-col" style={{ width:240, flexShrink:0, position:'sticky', top:NAV_HEIGHT+60, alignSelf:'flex-start' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>특징</div>
            <h2 style={{ fontSize:'clamp(18px,1.6vw,24px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>Features</h2>
          </div>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:16, paddingTop:4 }}>
            {cur.features.map((f,i) => (
              <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:14, fontSize:16, color:'#333', lineHeight:1.75 }}>
                <span style={{ color:'#C8271D', fontWeight:700, flexShrink:0, marginTop:2 }}>•</span>
                <span>{f}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Applications */}
      <section style={{ borderBottom:'1px solid #ebebeb' }}>
        <div className="side-flex pmt-pad-lg" style={{ maxWidth:1280, margin:'0 auto', padding:'80px 72px', display:'flex', gap:100, alignItems:'flex-start' }}>
          <div className="side-col" style={{ width:240, flexShrink:0, position:'sticky', top:NAV_HEIGHT+60, alignSelf:'flex-start' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>사용처</div>
            <h2 style={{ fontSize:'clamp(18px,1.6vw,24px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>Applications</h2>
          </div>
          <div style={{ flex:1, display:'flex', flexWrap:'wrap', gap:12, paddingTop:4 }}>
            {cur.target.map((t,i) => (
              <span key={i} style={{ background:'#f5f5f5', border:'1px solid #e0e0e0', borderRadius:8,
                padding:'12px 22px', fontSize:15, fontWeight:600, color:'#333' }}>{t}</span>
            ))}
          </div>
        </div>
      </section>

      {/* Software */}
      <section style={{ borderBottom:'1px solid #ebebeb' }}>
        <div className="side-flex pmt-pad-lg" style={{ maxWidth:1280, margin:'0 auto', padding:'80px 72px', display:'flex', gap:100, alignItems:'flex-start' }}>
          <div className="side-col" style={{ width:240, flexShrink:0, position:'sticky', top:NAV_HEIGHT+60, alignSelf:'flex-start' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>소프트웨어</div>
            <h2 style={{ fontSize:'clamp(18px,1.6vw,24px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>Software</h2>
          </div>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:28, paddingTop:4 }}>
            {cur.software.map((sw,i) => {
              const info = softwareInfo[sw];
              const items = [...(info?.items || []), ...((cur.softwareExtraItems && cur.softwareExtraItems[sw]) || [])];
              return (
                <div key={i} style={{ border:'1px solid #ebebeb', borderRadius:14, padding:'28px 32px' }}>
                  <div style={{ fontSize:18, fontWeight:800, color:'#111', letterSpacing:'-0.02em', marginBottom:6 }}>
                    {sw} {info?.label && <span style={{ fontWeight:600, color:'#777' }}>— {info.label}</span>}
                  </div>
                  {info?.purpose && (
                    <div style={{ fontSize:14, fontWeight:700, color:'#C8271D', marginBottom:18 }}>용도: {info.purpose}</div>
                  )}
                  {items.length > 0 && (
                    <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                      {items.map((item,j) => (
                        <div key={j} style={{ display:'flex', alignItems:'flex-start', gap:10, fontSize:15, color:'#333', lineHeight:1.7 }}>
                          <span style={{ color:'#C8271D', flexShrink:0, marginTop:1 }}>·</span>
                          <span>{item}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  {info?.outputItems && (
                    <>
                      <div style={{ fontSize:12, fontWeight:700, color:'#999', letterSpacing:'0.08em', textTransform:'uppercase', margin:'20px 0 8px' }}>출력지</div>
                      <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                        {info.outputItems.map((item,j) => (
                          <div key={j} style={{ display:'flex', alignItems:'flex-start', gap:10, fontSize:15, color:'#333', lineHeight:1.7 }}>
                            <span style={{ color:'#C8271D', flexShrink:0, marginTop:1 }}>·</span>
                            <span>{item}</span>
                          </div>
                        ))}
                      </div>
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Specification */}
      <section style={{ borderBottom:'1px solid #ebebeb' }}>
        <div className="side-flex pmt-pad-lg" style={{ maxWidth:1280, margin:'0 auto', padding:'80px 72px', display:'flex', gap:100, alignItems:'flex-start' }}>
          <div className="side-col" style={{ width:240, flexShrink:0, position:'sticky', top:NAV_HEIGHT+60, alignSelf:'flex-start' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>사양</div>
            <h2 style={{ fontSize:'clamp(18px,1.6vw,24px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>Specification</h2>
          </div>
          <div style={{ flex:1 }}>
            {cur.specs.map((s,i) => (
              <div key={i} className="rgrid-2" style={{ display:'grid', gridTemplateColumns:'220px 1fr', gap:4,
                borderBottom: i < cur.specs.length-1 ? '1px solid #f0f0f0' : 'none',
                padding:'18px 0' }}>
                <div style={{ fontSize:15, color:'#888', fontWeight:500 }}>{s.label}</div>
                <div style={{ fontSize:15, color:'#222', fontWeight:600 }}>{s.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Dimensions */}
      <section style={{ borderBottom:'1px solid #ebebeb' }}>
        <div className="side-flex pmt-pad-lg" style={{ maxWidth:1280, margin:'0 auto', padding:'80px 72px', display:'flex', gap:100, alignItems:'flex-start' }}>
          <div className="side-col" style={{ width:240, flexShrink:0, position:'sticky', top:NAV_HEIGHT+60, alignSelf:'flex-start' }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>크기 및 규격</div>
            <h2 style={{ fontSize:'clamp(18px,1.6vw,24px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>Dimensions</h2>
          </div>
          <div style={{ flex:1 }}>
            <img src={cur.sizeImg} alt="제품 규격" style={{ width:'100%', maxWidth: (active==='PFS-304' || active==='PFS-N304') ? 920 : 720, display:'block', borderRadius:12, border:'1px solid #ebebeb' }} />
          </div>
        </div>
      </section>

      {/* 제품 영상 */}
      {cur.video && (
        <section style={{ borderBottom:'1px solid #ebebeb' }}>
          <div className="side-flex pmt-pad-lg" style={{ maxWidth:1280, margin:'0 auto', padding:'80px 72px', display:'flex', gap:100, alignItems:'flex-start' }}>
            <div className="side-col" style={{ width:240, flexShrink:0, position:'sticky', top:NAV_HEIGHT+60, alignSelf:'flex-start' }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>영상</div>
              <h2 style={{ fontSize:'clamp(18px,1.6vw,24px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>Video</h2>
            </div>
            <div style={{ flex:1 }}>
              <div style={{ borderRadius:16, overflow:'hidden', boxShadow:'0 4px 24px rgba(0,0,0,0.10)', aspectRatio:'16/9' }}>
                <iframe src={cur.video} title="제품 영상"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen style={{ width:'100%', height:'100%', border:'none', display:'block' }} />
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Gallery */}
      {cur.galleryImages && cur.galleryImages.length > 0 && (
        <section style={{ borderBottom:'1px solid #ebebeb', background:'#fff', padding:'80px 0' }}>
          <style>{`
            @keyframes gallery-scroll {
              0% { transform: translateX(0); }
              100% { transform: translateX(-50%); }
            }
            .gallery-track {
              display: flex;
              gap: 16px;
              animation: gallery-scroll 30s linear infinite;
              width: max-content;
            }
            .gallery-track:hover {
              animation-play-state: paused;
            }
          `}</style>
          <div className="side-flex pmt-pad-lg" style={{ maxWidth:1280, margin:'0 auto', padding:'0 72px', display:'flex', gap:100, alignItems:'flex-start', marginBottom:40 }}>
            <div className="side-col" style={{ width:240, flexShrink:0 }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>갤러리</div>
              <h2 style={{ fontSize:'clamp(18px,1.6vw,24px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>Gallery</h2>
            </div>
          </div>
          <div className="gallery-outer" style={{ overflow:'hidden' }}>
            <div className="gallery-track">
              {[...cur.galleryImages, ...cur.galleryImages].map((src, i) => (
                <img key={i} src={src} alt="" className="gallery-img"
                  style={{ height:300, width:300, borderRadius:10, objectFit:'cover', flexShrink:0,
                    boxShadow:'0 4px 16px rgba(0,0,0,0.08)', border:'1px solid #ebebeb' }} />
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 하단 버튼 */}
      <div className="pmt-pad-lg" style={{ display:'flex', justifyContent:'center', gap:12, padding:'56px 48px', flexWrap:'wrap' }}>
        <button onClick={()=>navigate('products')}
          style={{ background:'#fff', color:'#555', border:'1.5px solid #ddd', borderRadius:6,
            padding:'14px 36px', fontSize:15, fontWeight:600, cursor:'pointer', fontFamily:'inherit', transition:'all 200ms' }}
          onMouseEnter={e=>{ e.currentTarget.style.borderColor='#aaa'; e.currentTarget.style.color='#111'; }}
          onMouseLeave={e=>{ e.currentTarget.style.borderColor='#ddd'; e.currentTarget.style.color='#555'; }}
        >목록으로</button>
        <button onClick={()=>navigate('contact')}
          style={{ background:'#C8271D', color:'#fff', border:'none', borderRadius:6,
            padding:'14px 36px', fontSize:15, fontWeight:700, cursor:'pointer', fontFamily:'inherit',
            boxShadow:'0 4px 16px rgba(200,39,29,0.25)', transition:'all 200ms' }}
          onMouseEnter={e=>{ e.currentTarget.style.background='#a81f17'; }}
          onMouseLeave={e=>{ e.currentTarget.style.background='#C8271D'; }}
        >문의하기 →</button>
      </div>
    </div>
  );
}

Object.assign(window, { ProductsPage });