/* SolutionsPage.jsx */

function SolutionsPage({ navigate, subPage, setSubPage }) {
  const industries = [
    { id:'성형·비만클리닉',        en:'Hospital / Obesity Center' },
    { id:'한의원',                 en:'Oriental Medicine Clinic' },
    { id:'대학교 연구소·연구기관', en:'Research Institution' },
    { id:'의류업체',                en:'Apparel' },
    { id:'에스테틱·필라테스',      en:'Aesthetic / Fitness' },
  ];

  const [active, setActive] = React.useState(subPage || '성형·비만클리닉');
  React.useEffect(() => { if (subPage) setActive(subPage); }, [subPage]);
  const handleSelect = (id) => { setActive(id); setSubPage && setSubPage(id); window.scrollTo(0,0); };

  const content = {
    '성형·비만클리닉': {
      tagline:'Hospital / Obesity Center',
      headline:'바디라인 설계부터\n　　3D 정밀 분석까지',
      desc:'3D 스캔으로 생성되는 100여 개의 신체 데이터를 기반으로 현재 체형을 정밀하게 분석하고, 고객에게 적합한 바디라인 설계와 맞춤형 상담을 지원합니다. 고객의 신체 사이즈를 직접 측정하지 않고 3D 결과로 편리하게 상담이 가능합니다.',
      galleryImgs:['assets/대표사진/비만_1.png','assets/대표사진/비만_2.jpg','assets/대표사진/비만_33.png','assets/대표사진/비만_5.png','assets/대표사진/비만_6.jpg','assets/대표사진/비만_7.jpg','assets/대표사진/비만_8.jpg','assets/대표사진/비만_9.jpg','assets/대표사진/비만_1010.png'],
      fadeGallery: true,
      steps:[
        { num:'01', title:'3D 바디 측정', desc:'8초 이내 비접촉 전신 스캔 완료. 환자가 편하게 서 있기만 하면 됩니다.',          media:'assets/ui-before-after.jpg', video:'assets/1.비만.mp4' },
        { num:'02', title:'결과 분석',    desc:'100여개 신체지표 자동 산출. 전·후 3D 비교로 변화를 한눈에 파악합니다.',          media:'assets/ui-before-after2.png',video:null },
        { num:'03', title:'상담 활용',    desc:'실시간 3D 화면으로 환자 설명, 신뢰도 향상과 재방문 유도까지 자연스럽게.',        media:'assets/screen-ba.png',       video:null },
      ],
      provides:[
        { title:'인체 단면·둘레·각도 수치 한번에 확인', subTitle:'신체 데이터를 정밀하게 분석', desc:'3D 인체 스캔 데이터를 기반으로 둘레, 단면적, 각도 등 다양한 신체 치수를 자동 산출하여 복잡한 측정 과정을 줄이고 정확한 데이터를 제공합니다.', video:'assets/단면적,길이.mp4' },
        { title:'전·후 사이즈 비교 한눈에 파악', subTitle:'변화된 신체 상태를 직관적으로 확인', desc:'측정 전후 데이터를 시각적으로 비교하여 체형 변화와 개선 효과를 누구나 쉽게 확인할 수 있습니다.', video:'assets/전후최종.mp4'  },
        { title:'개인 맞춤 목표 체형 제안', subTitle:'개인 조건에 최적화된 분석', desc:'성별, 키, 체중, 나이 등 다양한 정보를 종합 분석하여 개인에게 적합한 신체 평가와 인사이트를 제공합니다.', video:'assets/ideall.mp4' },
        { title:'측정 일자별 각 부위 증감 진행도 표시', subTitle:'누적 데이터를 통한 변화 추적', desc:'날짜별 기록을 자동 저장하여 부위별 증감 추이와 관리 진행 상황을 한눈에 확인할 수 있습니다.', video:'assets/그래프.mp4' },
        { title:'체형 리포트 자동 생성', subTitle:'상담부터 사후관리까지', desc:'측정 결과를 자동으로 리포트화하여 출력 또는 이메일로 전달할 수 있으며, 상담과 사후관리에 효과적으로 활용할 수 있습니다.', video:'assets/비만_리포터.mp4' },
      ],
      product:'PFS-304 Series', productImg:'assets/product-304.png',
      products:[
        { label:'설치공간이 넓을 때?', name:'PFS-304', img:'assets/304규격1.png', structureImg:'assets/304규격마지막.png' },
        { label:'설치공간이 작을 때?', name:'PFS-N304', img:'assets/n304규격1.png', structureImg:'assets/N304규격마지막.png' },
      ],
      reviews:[
        { text:'부위별mm 단위3D 비교로 객관성 및 신뢰도 확보 가능해 진 후 치료 결과에 대한 고객들과 논쟁이 사라졌습니다. 3D Body Scanning Solution은 이미 없어서 안될 필수 시스템입니다.', name:'A 의원수석상담실장' },
        { text:'빠른 효과도 좋지만 균형있는 아름다운 체형을 만드는 것은 한 두달 치료로 제한적입니다. 3D 체형분석 솔루션 도입으로 관리하는 고객들의관리기간이 전체적으로 3개월 정도 길어지고 만족도도 훨씬 높아졌습니다. 바디 전체를 균형있고 아름답게 만드는 프로그램의 만족도가 높다는 것이 입증되었으니까요.', name:'W 의원원장' },
        { text:'저희 병원은 이미 전국지점망 기준누적10만건 DB 구축으로 방대한 측정 데이터로 고도화된 AI 체형관리 연구 적용하고 있습니다.', name:'S 의원K 대표원장' },
      ],
    },
    '한의원': {
      tagline:'Oriental Medicine Clinic',
      headline:'비만·자세 한 번에 측정,\n　　　직관적 상담 실현',
      desc:'전국 54개 한의원이 선택한 PMT 솔루션. 비만 관련 수치와 자세 분석을 동시에 제공하여 한 번의 스캔으로 다양한 상담이 가능합니다. 또한 치료 전후의 변화를 3D 모델과 객관적인 데이터로 비교하여 환자의 이해도와 상담의 신뢰도를 높여줍니다.',
      galleryImgs:[
        'assets/대표사진/한의원_1.jpg','assets/대표사진/한의원_2.png','assets/대표사진/한의원_3.jpg',
        'assets/대표사진/한의원_4.jpg','assets/대표사진/한의원_5.png','assets/대표사진/한의원_6.jpg',
        'assets/대표사진/한의원_7.png',
      ],
      steps:[
        { num:'01', title:'환자 측정',    desc:'8초 이내 비접촉 전신 스캔. 자세·비만 지표를 동시에 분석합니다.',              media:'assets/ui-posture.png',  video:'assets/2. 자세.mp4' },
        { num:'02', title:'결과 리포트',  desc:'어깨 경사도, 좌우 밸런스, 비만 수치 자동 산출. 리포트 즉시 출력 가능.',       media:'assets/screen-posture.png', video:null },
        { num:'03', title:'상담·재방문',  desc:'3D 비교 화면으로 치료 효과를 눈으로 입증. 재방문율을 자연스럽게 높입니다.', media:'assets/screen-posture2.png',video:null },
      ],
      provides:[
        { title:'비만·자세 동시 측정 가능', subTitle:'체형과 자세를 한 번에 분석', desc:'체지방 관리뿐 아니라 자세 균형까지 함께 평가하여 보다 종합적인 신체 상태를 확인할 수 있습니다.' ,video:'assets/비만자세.mp4'},
        { title:'어깨 경사도·좌우 밸런스 분석', subTitle:'불균형한 자세를 정밀 진단', desc:'어깨 높이 차이와 신체 좌우 균형을 분석하여 체형 불균형과 자세 문제를 객관적인 수치로 제공합니다.',video:'assets/전후비율.mp4' },
        { title:'회전각도·편차거리 정밀 측정', subTitle:'정확한 자세 데이터를 제공', desc:'척추 및 신체 축의 회전각도와 편차거리를 정량화하여 치료 전후 변화를 세밀하게 확인할 수 있습니다.' ,video:'assets/회전각도.mp4'},
        { title:'전·후 3D 비교로 치료 효과 입증', subTitle:'눈으로 확인하는 치료 변화', desc:'치료 전후의 3D 데이터를 비교하여 체형 개선 결과를 시각적으로 확인하고 환자의 신뢰도를 높입니다.',  video:'assets/전후최종.mp4'  },
        { title:'네트워크 기반 다중 전문가 상담', subTitle:'지점 간 데이터 공유 및 협진 지원', desc:'측정 데이터를 네트워크로 관리하여 여러 전문가가 함께 확인하고 상담할 수 있는 협진 환경을 제공합니다.' ,image:'assets/네트워크2.png' },
      ],
      product:'PFS-304 Series', productImg:'assets/product-304.png',
      products:[
        { label:'설치공간이 넓을 때?', name:'PFS-304', img:'assets/304규격1.png', structureImg:'assets/304규격마지막.png' },
        { label:'설치공간이 작을 때?', name:'PFS-N304', img:'assets/n304규격1.png', structureImg:'assets/N304규격마지막.png' },
      ],
      reviews:[
        { text:'스캐너 시스템 도입 후 이미 14,000회 이상 촬영하여 추나 치료전/후의 골격 변화를 입체적으로 비교 분석하여 환자들의 상담에 아주 유용하게 활용하고 있습니다. 환자 본인의 자세를 바로 시각적, 수치적으로 보여준다는 점이 환자들에게 깊은 신뢰를 심어줍니다.', name:'J 한의원 대표원장' },
        { text:'매년 약 4,000회 이상의 측정을 통해 나온 비만이나 자세 측정 결과지에 원장이 직접 코멘트를 작성하여 메일이나 메신저로 피드백 하고 있습니다. 객관적 리포트 전송이 환자들에게 전달되어 환자 스스로 본인의 자세나 체형 상태를 보는 것이 오히려 동기부여에 도움이 됩니다.', name:'K 한의원 대표원장' },
        { text:'자세와 비만을 한눈에 볼 수 있어 상담 시간이 확실히 줄었어요. 환자들도 눈으로 바로 확인하니까 더 신뢰하더라고요.', name:'D 한의원 원장' },
      ],
    },
    '의류업체': {
      tagline:'Apparel',
      headline:'의상 전용 3D 바디 스캔\n자동 정밀 측정',
      desc:'3D 스캔 결과를 기반으로 의류 제작에 필요한 29개의 주요 치수를 자동으로 분석합니다. 줄자 측정 없이도 작업자의 숙련도와 관계없이 일관된 치수 데이터를 제공하여 측정 시간을 단축하고 작업 효율을 높입니다.',
      galleryImgs:[
        'assets/대표사진/의류1.jpeg','assets/대표사진/의류2.jpeg','assets/대표사진/의류_3.png',
      ],
      steps:[
        { num:'01', title:'전신 스캔',   desc:'8초 이내 29개 치수 자동 측정. 줄자 없이 정밀하게.',                    media:'assets/ui-measurement.png',video:'assets/3.150개 찾음.mp4' },
        { num:'02', title:'치수 확인',   desc:'상의·하의 분리 치수, 맞춤 제작에 필요한 수치를 즉시 확인합니다.',      media:'assets/ui-circumference.png',video:null },
        { num:'03', title:'서버 전송',   desc:'치수 데이터 자동 저장 및 연동. 제작 시스템과 바로 연계됩니다.',        media:'assets/model-person.png',  video:null },
      ],
      provides:[
        { title:'전신 치수 자동 측정', subTitle:'줄자 없이 정확하게', desc:'3D 스캔 결과를 기반으로 목, 가슴, 허리, 엉덩이 등 주요 둘레와 높이 등 다양한 신체 치수를 자동으로 제공합니다.',video:'assets/단면적,길이.mp4' },
        { title:'의상 전용 치수 29개 자동 측정', subTitle:'의류 제작에 필요한 치수를 자동 산출', desc:'가슴둘레, 허리둘레, 엉덩이둘레, 총장 등 의상 제작에 활용되는 주요 치수를 자동으로 측정합니다.', image:'assets/둘레값.png', fit:'contain'},
        { title:'치수 길이 조정 및 저장 기능', subTitle:'브랜드 기준에 맞춘 치수 관리', desc:'측정 결과를 수정·보정하여 저장할 수 있어 브랜드별 패턴 기준과 작업 프로세스에 유연하게 대응할 수 있습니다.',video:'assets/측정점2.mp4' },
        { title:'숙련도 무관 일관성 있는 측정값', subTitle:'누가 측정해도 동일한 결과', desc:'작업자 숙련도에 따른 오차를 최소화하여 안정적이고 일관된 치수 데이터를 제공합니다.',video:'assets/그래프.mp4' },
      ],
      product:'PFS-304 Series', productImg:'assets/product-304.png',
      products:[
        { label:'설치공간이 넓을 때?', name:'PFS-304O', img:'assets/304규격1.png', structureImg:'assets/304규격마지막.png' },
        { label:'설치공간이 작을 때?', name:'PFS-N304O', img:'assets/n304규격1.png', structureImg:'assets/N304규격마지막.png' },
      ],
    },
    '에스테틱·필라테스': {
      tagline:'Aesthetic / Fitness',
      headline:'3D 바디 스캔과 \n　　체성분 분석을 한번에',
      desc:'3D 바디 스캔과 체성분 분석을 동시에 제공하여 고객의 신체 상태를 더욱 정확하게 파악합니다. 관리 전후의 바디라인 변화를 3D 모델과 수치로 비교하여 차별화된 상담과 지속적인 고객 관리를 지원합니다.',
      galleryImgs:[
        'assets/에스테틱.png',
      ],
      steps:[
        { num:'01', title:'체성분 + 바디스캔', desc:'8점식 BIA 체성분 + 3D 스캔 동시 진행. 8초면 충분합니다.',       media:'assets/model-shapecare.png',video:'assets/1.비만.mp4' },
        { num:'02', title:'분석 리포트',       desc:'체지방률, 근육량, 3D 바디이미지를 즉시 확인. 출력도 가능.',     media:'assets/ui-circumference.png',video:null },
        { num:'03', title:'케어 플랜 연계',    desc:'측정 결과 기반 맞춤 케어 플랜을 제안. 재등록율이 높아집니다.', media:'assets/ui-before-after.jpg',video:null },
      ],
      provides:[
        { title:'바디라인 변화 확인', subTitle:'눈으로 확인하는 관리 효과', desc:'관리 전후의 바디라인을 3D 모델과 수치로 비교하여 고객 만족도를 높입니다.' ,video:'assets/바디라인.mp4'},
        { title:'부분 체적, 둘레 분석', subTitle:'원하는 부위를 집중 관리', desc:'줄자 없이 복부, 허벅지, 팔 등 부위별 둘레와 체적을 자동으로 분석하여 관리 효과를 더욱 정밀하게 확인할 수 있습니다.',video:'assets/총총둘레.mp4' },
        { title:'3D 바디 + 체성분 동시 측정', subTitle:'체형과 체성분을 한 번에 분석', desc:'3D 체형 데이터와 체성분 정보를 함께 분석하여 보다 정확하고 종합적인 신체 분석 결과를 제공합니다.' ,video:'assets/총.mp4'},
        { title:'태블릿 상담 리포트 제공', subTitle:'한눈에 확인하는 디지털 상담', desc:'태블릿에서 고객 정보와 인체 데이터를 직관적으로 확인하며 시각적인 상담이 가능합니다. 측정 결과를 기반으로 개인 맞춤형 관리 프로그램을 제안하여 지속적인 관리와 재방문을 지원합니다.' ,video:'assets/태블릿2.mp4'},
        { title:'관리 이력 자동 저장', subTitle:'고객별 변화 데이터를 체계적으로 관리', desc:'고객의 측정 결과를 자동으로 저장하여 관리 이력을 비교하고 장기적인 바디케어 계획을 효율적으로 관리할 수 있습니다.',image:'assets/그래프.png' },
      ],
      product:'Shape Care', productImg:'assets/shapecare규격2.jpg',
    },
    '보건소': {
      tagline:'Public Health Center',
      headline:'대규모 지역민 체형 데이터\n효율적 수집·관리',
      desc:'보건소·건강검진센터에서 대규모 인원의 체형 데이터를 빠르고 정확하게 수집합니다. 측정 결과는 데이터베이스에 자동 저장되어 추이 분석과 보건 정책 수립에 활용할 수 있습니다.',
      galleryImgs:[
        'assets/보건소.png','assets/ui-overview.png',
        'assets/ui-measurement.png','assets/ui-before-after.jpg',
      ],
      steps:[
        { num:'01', title:'대규모 연속 측정',desc:'대기 없이 빠른 연속 측정, 8초/1인. 하루 수백 명도 무리 없습니다.', media:'assets/ui-measurement.png',video:'assets/3.150개 찾음.mp4' },
        { num:'02', title:'데이터 저장·분석',desc:'자동 데이터베이스 저장, 추이 분석·통계 리포트 제공.',             media:'assets/ui-overview.png',   video:null },
        { num:'03', title:'보건사업 활용',   desc:'분석 결과로 지역 보건 정책 수립 및 사업 운영에 직접 활용.',       media:'assets/ui-before-after.jpg',video:null },
      ],
      provides:[
        '대규모 인원 빠른 연속 측정',
        '자동 데이터베이스 저장',
        '추이 분석 및 통계 제공',
        '공공기관 특화 솔루션',
        '사이즈코리아 기반 표준 데이터',
      ],
      product:'PFS-304 Series', productImg:'assets/product-304.png',
      reviews:[
        { text:'수백 명 주민의 체형을 빠르게 측정하고 데이터화할 수 있어서 보건사업 운영에 큰 도움이 됩니다.', name:'경북 E보건소 담당자' },
        { text:'연간 건강검진 기간에도 대기가 거의 없어졌어요. 측정 속도가 탁월합니다.', name:'경기 F보건소 팀장' },
      ],
    },
    '대학교 연구소·연구기관': {
      tagline:'Research Institution',
      headline:'ISO 20685 국제 표준 기반\n인체 표준 데이터 구축',
      desc:'SHAPENIX는 적외선 라인스캔 방식으로 ISO 20685 국제 표준을 충족하는 고정밀 데이터를 제공합니다. 성별·연령별 국가 인체 표준 데이터 구축, 맞춤형 의복 연구 등에 최적화되어 있습니다.',
      galleryImgs:[
        'assets/대표사진/대학교_9.png','assets/대표사진/대학교_2.jpg','assets/대표사진/대학교_3.jpg',
        'assets/대표사진/대학교_4.jpg','assets/대표사진/대학교_5.jpg','assets/대표사진/대학교_6.jpg','assets/대표사진/대학교_8.jpg',
      ],
      steps:[
        { num:'01', title:'고정밀 스캔',    desc:'ISO 20685 준수, 1mm 이내 정밀 측정. 재현성이 탁월합니다.',      media:'assets/기술사진.png',   video:'assets/3.150개 찾음.mp4' },
        { num:'02', title:'150+ 항목 산출', desc:'국제 표준 150개 이상 항목 자동 추출. 수작업 오류를 없앱니다.',   media:'assets/ui-measurement.png',video:null },
        { num:'03', title:'연구 데이터 활용',desc:'논문·국가 표준화 사업·산업 연구에 바로 활용 가능한 포맷.',      media:'assets/ui-overview.png', video:null },
      ],
      provides:[
        { title:'ISO 20685 국제 표준 준수', subTitle:'국제 표준 기반 인체 측정', desc:'ISO 20685 기준에 부합하는 측정 체계를 적용하여 연구 결과의 신뢰성과 재현성을 확보합니다.' ,image:'assets/ISO.png'   },
        { title:'1mm 이내 고정밀 측정', subTitle:'연구에 적합한 정밀도 제공', desc:'고해상도 3D 인체 데이터를 기반으로 1mm 이내 수준의 정밀 측정을 지원하여 정확한 데이터 분석이 가능합니다.' ,video:'assets/2mm.mp4'},
        { title:'150+ 항목 자동 측정', subTitle:'대규모 데이터 분석 효율 향상', desc:'150개 이상의 인체 치수를 자동으로 산출하여 측정 시간과 인력 부담을 줄이고 연구 생산성을 높입니다.' ,video:'assets/150mm.mp4'},
        { title:'Size Korea 측정항목 지원', subTitle:'국가 인체치수 체계와 호환', desc:'Size Korea 기준 측정항목을 지원하여 기존 연구 데이터와의 연계 및 비교 분석이 용이합니다.',image:'assets/사이즈.png', fit:'contain' },
        { title:'학술 연구·국가 표준화 사업 적합', subTitle:'연구와 정책 사업을 위한 플랫폼', desc:'대학교 연구과제, 국가 인체 데이터 구축 사업, 표준화 연구 등 다양한 연구 환경에서 활용할 수 있습니다.',video:'assets/협회.mp4' },
      ],
      product:'SHAPENIX', productImg:'assets/product-shapenix.png',
      extraProducts:[
        { product:'PFS-304', productImg:'assets/304_last.png' },
      ],
    },
  };

  const cur = content[active] || content['성형·비만클리닉'];

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


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

      {/* ── 섹션 1: 현장 사진 자동 스크롤 갤러리 ── */}
      <SliderGallery key={active+'-gallery'} imgs={cur.galleryImgs} industry={active} headline={cur.headline} desc={cur.desc} tagline={cur.tagline} />

      {/* ── 섹션 2: 핵심 기능 (overflow:hidden 밖에서 sticky 동작) ── */}
      <ProvidesSection key={active+'-provides'} provides={cur.provides} />

      {/* ── 섹션 4: 최적화된 제품 ── */}
      <OptimizedProduct key={active+'-product'} product={cur.product} productImg={cur.productImg} products={cur.products} extraProducts={cur.extraProducts} navigate={navigate} setSubPage={setSubPage} />

      {/* ── 섹션 6: 현장의 목소리 ── */}
      {cur.reviews && <FieldVoices key={active+'-voices'} reviews={cur.reviews} />}

      {/* ── 섹션 7: 견적받기 CTA ── */}
      <QuoteCtaSection navigate={navigate} industry={active} />

    </div>
  );
}

/* ══════════════════════════════════════
   섹션 1 — 헤드라인 + BUSINESS OVERVIEW 사진 그리드
══════════════════════════════════════ */
function SliderGallery({ imgs, industry, headline, desc, tagline }) {
  const [ref, visible] = useScrollReveal(0.06);
  const [textRef, textVisible] = useScrollReveal(0.12);
  const [imgIdx, setImgIdx] = React.useState(0);
  const prev = () => setImgIdx(i => (i - 1 + imgs.length) % imgs.length);
  const next = () => setImgIdx(i => (i + 1) % imgs.length);

  React.useEffect(() => {
    const timer = setInterval(() => setImgIdx(i => (i + 1) % imgs.length), 3000);
    return () => clearInterval(timer);
  }, [imgs.length]);

  return (
    <section style={{ background:'#fff', overflow:'hidden' }}>

      {/* ── A: 헤드라인 + 설명 텍스트 ── */}
      <div ref={textRef} className="rgrid-2 pmt-pad-lg hero-pad" style={{
        maxWidth:1280, margin:'0 auto',
        padding:'200px 48px 300px',
        display:'grid', gridTemplateColumns:'1fr 1fr', gap:80,
        alignItems:'center',
      }}>
        <div>
          {/* 태그라인 */}
          <div style={{
            fontSize:10, fontWeight:800, letterSpacing:'0.2em',
            textTransform:'uppercase', color:'#C8271D', marginBottom:20,
            opacity: textVisible ? 1 : 0,
            transform: textVisible ? 'translateY(0)' : 'translateY(16px)',
            transition: 'opacity 600ms 0ms, transform 600ms 0ms cubic-bezier(0.16,1,0.3,1)',
          }}>{tagline}</div>

          {/* 헤드라인 — 글자 단위 애니메이션 */}
          <h2 style={{
            fontSize:'clamp(28px,3vw,48px)', fontWeight:800, color:'#111',
            letterSpacing:'-0.04em', lineHeight:1.45,
            margin:0, whiteSpace:'pre-line', textAlign:'left',
          }}>
            {headline.split('\n').map((line, li) => {
              const prevLen = headline.split('\n').slice(0, li).reduce((s, l) => s + l.length, 0);
              return (
                <span key={li} style={{ display:'block' }}>
                  {line.split('').map((ch, ci) => (
                    ch === ' ' || ch === '　'
                      ? <span key={ci} style={{ display:'inline', whiteSpace:'pre' }}>{ch}</span>
                      : <span key={ci} style={{
                          display:'inline-block',
                          opacity: textVisible ? 1 : 0,
                          transform: textVisible ? 'translateY(0)' : 'translateY(20px)',
                          transition: `opacity 400ms ${120 + (prevLen + ci) * 30}ms, transform 500ms ${120 + (prevLen + ci) * 30}ms cubic-bezier(0.16,1,0.3,1)`,
                        }}>{ch}</span>
                  ))}
                </span>
              );
            })}
          </h2>

          {/* 헤드라인 아래 강조선 */}
          <div style={{
            width: textVisible ? 48 : 0, height: 3,
            background: '#C8271D', borderRadius: 2,
            marginTop: 24,
            transition: 'width 600ms 500ms cubic-bezier(0.16,1,0.3,1)',
          }} />
        </div>

        {/* 설명 텍스트 — 단어 단위 순차 등장 */}
        <p style={{ fontSize:16, color:'#555', lineHeight:1.85, fontWeight:400, margin:0, maxWidth:480 }}>
          {desc.split(' ').map((word, wi) => (
            <span key={wi} style={{
              display:'inline-block',
              marginRight:'0.28em',
              opacity: textVisible ? 1 : 0,
              transform: textVisible ? 'translateY(0) scale(1)' : 'translateY(12px) scale(0.96)',
              filter: textVisible ? 'blur(0px)' : 'blur(3px)',
              transition: `opacity 450ms ${400 + wi * 28}ms, transform 500ms ${400 + wi * 28}ms cubic-bezier(0.16,1,0.3,1), filter 400ms ${400 + wi * 28}ms ease`,
            }}>{word}</span>
          ))}
        </p>
      </div>

      {/* ── B: BUSINESS OVERVIEW + 사진 캐러셀 ── */}
      <div style={{ maxWidth:1280, margin:'0 auto', padding:'0 48px 40px' }}>
        <h3 style={{
          fontSize:'clamp(28px,3.2vw,52px)', fontWeight:600, color:'#111',
          letterSpacing:'-0.02em', marginBottom:40,
          lineHeight:1.1, textAlign:'left',
        }}>BUSINESS OVERVIEW</h3>
      </div>

      {/* 전체 너비 이미지 캐러셀 */}
      <div ref={ref} style={{
        position:'relative', width:'100%',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(28px)',
        transition:'opacity 0.6s ease, transform 0.6s ease',
        marginBottom:48,
      }}>
        {/* 모든 이미지를 겹쳐두고 opacity 크로스페이드 */}
        <div style={{ position:'relative', width:'100%', aspectRatio:'16/5', overflow:'hidden' }}>
          {imgs.map((src, i) => (
            <img
              key={src}
              src={src}
              alt=""
              style={{
                position: i === 0 ? 'relative' : 'absolute',
                top:0, left:0,
                width:'100%', height:'100%', objectFit:'cover', display:'block',
                opacity: i === imgIdx ? 1 : 0,
                transition:'opacity 0.8s ease',
                zIndex: i === imgIdx ? 1 : 0,
              }}
            />
          ))}
        </div>

        {/* 이전 버튼 */}
        <button onClick={prev} style={{
          position:'absolute', left:24, top:'50%', transform:'translateY(-50%)',
          width:48, height:48, borderRadius:'50%',
          background:'rgba(255,255,255,0.85)', border:'none', cursor:'pointer',
          fontSize:22, display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:'0 2px 12px rgba(0,0,0,0.18)',
          color:'#111', zIndex:2,
        }}>‹</button>

        {/* 다음 버튼 */}
        <button onClick={next} style={{
          position:'absolute', right:24, top:'50%', transform:'translateY(-50%)',
          width:48, height:48, borderRadius:'50%',
          background:'rgba(255,255,255,0.85)', border:'none', cursor:'pointer',
          fontSize:22, display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:'0 2px 12px rgba(0,0,0,0.18)',
          color:'#111', zIndex:2,
        }}>›</button>

        {/* 하단 점 인디케이터 */}
        <div style={{
          position:'absolute', bottom:16, left:'50%', transform:'translateX(-50%)',
          display:'flex', gap:8, zIndex:2,
        }}>
          {imgs.map((_, i) => (
            <button key={i} onClick={() => setImgIdx(i)} style={{
              width: i===imgIdx ? 24 : 8, height:8,
              borderRadius:4, border:'none', cursor:'pointer',
              background: i===imgIdx ? '#fff' : 'rgba(255,255,255,0.5)',
              transition:'all 0.3s ease', padding:0,
            }} />
          ))}
        </div>
      </div>

    </section>
  );
}

/* ══════════════════════════════════════
   섹션 3 — 제공하는 것들
══════════════════════════════════════ */
const FEATURE_IMGS = [
  'assets/ui-before-after.jpg',
  'assets/ui-overview.png',
  'assets/screen-ba.png',
  'assets/ui-posture.png',
  'assets/ui-circumference.png',
  'assets/screen-posture.png',
];

function ProvidesSection({ provides }) {
  return (
    <section className="pmt-pad-lg" style={{ background:'#fff', padding:'80px 48px 100px' }}>
      <div className="side-flex" style={{ maxWidth:1280, margin:'0 auto', display:'flex', gap:100, alignItems:'flex-start' }}>

        {/* 왼쪽 sticky 타이틀 — position:sticky가 동작하려면 부모에 overflow:hidden이 없어야 함 */}
        <div className="side-col" style={{ width:240, flexShrink:0, position:'sticky', top:150, alignSelf:'flex-start' }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:18 }}>주요 특징</div>
          <h2 style={{ fontSize:'clamp(26px,2.8vw,40px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:0 }}>
            제공하는<br />핵심 기능
          </h2>
        </div>

        {/* 오른쪽 스크롤 아이템 */}
        <div style={{ flex:1 }}>
          {provides.map((item, i) => (
            <FeatureItem key={i} item={item} idx={i} />
          ))}
        </div>

      </div>
    </section>
  );
}

function FeatureItem({ item, idx }) {
  const [ref, visible] = useScrollReveal(0.15);
  return (
    <div ref={ref} className="rgrid-2" style={{
      display:'grid', gridTemplateColumns:'1fr 1fr', gap:64,
      alignItems:'center',
      padding:'96px 0',
      borderBottom:'1px solid #ececec',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(36px)',
      transition:'opacity 0.65s ease, transform 0.65s ease',
    }}>
      {/* 텍스트 */}
      <div>
        <div style={{ fontSize:13, fontWeight:700, color:'#C8271D', letterSpacing:'0.12em', marginBottom:20 }}>
          {String(idx + 1).padStart(2, '0')}
        </div>
        <h3 style={{
          fontSize:'clamp(18px,2vw,28px)', fontWeight:700, color:'#111',
          letterSpacing:'-0.02em', lineHeight:1.35, margin:'0 0 16px',
        }}>{typeof item === 'object' ? item.title : item}</h3>
        {typeof item === 'object' && item.subTitle && (
          <p style={{ fontSize:15, fontWeight:700, color:'#333', margin:'0 0 10px', lineHeight:1.5 }}>{item.subTitle}</p>
        )}
        {typeof item === 'object' && item.desc && (
          <p style={{ fontSize:14, color:'#666', lineHeight:1.8, margin:0 }}>{item.desc}</p>
        )}
      </div>
      {/* 이미지 / 영상 */}
      <div style={{ borderRadius:18, overflow:'hidden', aspectRatio:'4/3' }}>
        {typeof item === 'object' && item.video ? (
          <video
            src={item.video}
            autoPlay muted loop playsInline
            style={{ width:'100%', height:'100%', objectFit:'cover', display:'block',
              transform: item.video.includes('태블릿2') ? 'scale(1.08)' : undefined }}
          />
        ) : (
          <img
            src={typeof item === 'object' && item.image ? item.image : FEATURE_IMGS[idx % FEATURE_IMGS.length]}
            alt=""
            style={{ width:'100%', height:'100%', objectFit: typeof item === 'object' && item.fit === 'contain' ? 'contain' : 'cover', display:'block' }}
          />
        )}
      </div>
    </div>
  );
}

/* ══════════════════════════════════════
   섹션 4 — 최적화된 제품
══════════════════════════════════════ */
/* 솔루션 페이지의 제품명 표기를 ProductsPage의 실제 제품 키로 매핑 */
const SOLUTION_PRODUCT_KEY_MAP = {
  'PFS-304 Series': 'PFS-304',
  'PFS-304O': 'PFS-304',
  'PFS-N304O': 'PFS-N304',
  'Shape Care': 'Shape Care',
  'SHAPENIX': 'SHAPENIX',
};
const toProductKey = (name) => SOLUTION_PRODUCT_KEY_MAP[name] || name;

function SingleProductCard({ product, productImg, goToProduct, navigate, style }) {
  return (
    <div className="rgrid-2 pmt-pad-lg" style={{ borderRadius:24, padding:'64px 72px', display:'grid', gridTemplateColumns:'1fr 1.8fr', gap:72, alignItems:'center', border:'1px solid #ebebeb', ...style }}>
      <div style={{ textAlign:'center' }}>
        <img src={productImg} alt={product} style={{ maxHeight:260, maxWidth:'100%', objectFit:'contain', filter:'drop-shadow(0 20px 48px rgba(0,0,0,0.15))' }} />
      </div>
      <div>
        <div style={{ display:'inline-block', background:'rgba(200,39,29,0.08)', border:'1px solid rgba(200,39,29,0.3)', borderRadius:99, padding:'5px 16px', fontSize:12, fontWeight:700, color:'#C8271D', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:22 }}>
          최적화된 제품
        </div>
        <h3 style={{ fontSize:'clamp(28px,3vw,46px)', fontWeight:900, color:'#111', marginBottom:16, letterSpacing:'-0.04em', lineHeight:1.1 }}>{product}</h3>
        <p style={{ fontSize:16, color:'#666', lineHeight:1.85, fontWeight:400, marginBottom:36 }}>
          이 업종에 가장 최적화된 PMT 제품입니다.<br />
          업종별 특화 소프트웨어와 함께 제공되며, 설치부터 AS까지 전담 엔지니어가 지원합니다.
        </p>
        <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}>
          <button onClick={() => goToProduct(product)}
            style={{ background:'#C8271D', color:'#fff', border:'none', borderRadius:99, padding:'15px 34px', fontSize:15, fontWeight:700, cursor:'pointer', fontFamily:'inherit', boxShadow:'0 4px 24px rgba(200,39,29,0.28)', transition:'all 200ms' }}
            onMouseEnter={e=>{ e.currentTarget.style.background='#a81f17'; e.currentTarget.style.transform='translateY(-1px)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.background='#C8271D'; e.currentTarget.style.transform=''; }}
          >제품 자세히 보기 →</button>
          <button onClick={() => navigate('contact')}
            style={{ background:'transparent', color:'#555', border:'1.5px solid #ddd', borderRadius:99, padding:'15px 34px', 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>
        </div>
      </div>
    </div>
  );
}

function OptimizedProduct({ product, productImg, products, extraProducts, navigate, setSubPage }) {
  const goToProduct = (name) => { setSubPage && setSubPage(toProductKey(name)); navigate('products'); };
  return (
    <section className="pmt-pad-lg" style={{ padding:'32px 48px 48px', background:'#fff' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>

        {/* 타이틀 + 세로 작대기 */}
        <div style={{ textAlign:'center', marginBottom:48 }}>
          <h2 style={{ fontSize:'clamp(26px,2.8vw,40px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', lineHeight:1.4, margin:'0 0 28px' }}>RECOMMENDED SYSTEMS</h2>
          <div style={{ width:1, height:60, background:'#aaa', margin:'0 auto' }} />
        </div>

        {products ? (
          /* ── 두 컬럼 레이아웃 (성형·한의원·의류) ── */
          <div className="rgrid-2" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24 }}>
            {products.map((p, i) => (
              <div key={i} style={{ border:'1px solid #ebebeb', borderRadius:20, padding:'40px 36px', display:'flex', flexDirection:'column', gap:20 }}>
                {/* 라벨 */}
                <div style={{ fontSize:20, fontWeight:700, color:'#888', letterSpacing:'0.04em' }}>{p.label}</div>
                {/* 제품명 */}
                <h3 style={{ fontSize:'clamp(22px,2.2vw,34px)', fontWeight:900, color:'#111', letterSpacing:'-0.04em', lineHeight:1.1, margin:0 }}>{p.name}</h3>
                {/* 기계 사진 */}
                <div style={{ borderRadius:14, overflow:'hidden', background:'#fff', display:'flex', alignItems:'flex-start', justifyContent:'center', padding:'0px 14px 14px', marginTop:-16 }}>
                  <img src={p.img} alt={p.name} style={{ maxHeight:200, maxWidth:'100%', objectFit:'contain', filter:'drop-shadow(0 12px 32px rgba(0,0,0,0.13))' }} />
                </div>
                {/* 구조 사진 */}
                <div style={{ borderRadius:14, overflow:'hidden', background:'#fafafa', height:230, display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <img src={p.structureImg} alt="구조도" style={{ maxWidth:'100%', maxHeight:210, objectFit:'contain', display:'block' }} />
                </div>
                {/* 버튼 */}
                <div style={{ display:'flex', gap:10, marginTop:4 }}>
                  <button onClick={() => goToProduct(p.name)}
                    style={{ flex:1, background:'#C8271D', color:'#fff', border:'none', borderRadius:99, padding:'13px 0', fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'inherit', transition:'all 200ms' }}
                    onMouseEnter={e=>{ e.currentTarget.style.background='#a81f17'; }}
                    onMouseLeave={e=>{ e.currentTarget.style.background='#C8271D'; }}
                  >제품 보기 →</button>
                  <button onClick={() => navigate('contact')}
                    style={{ flex:1, background:'transparent', color:'#555', border:'1.5px solid #ddd', borderRadius:99, padding:'13px 0', fontSize:14, 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>
                </div>
              </div>
            ))}
          </div>
        ) : (
          /* ── 단일 카드 레이아웃 (에스테틱 등) ── */
          <>
            <SingleProductCard product={product} productImg={productImg} goToProduct={goToProduct} navigate={navigate} />
            {extraProducts && extraProducts.map((ep, i) => (
              <SingleProductCard key={i} product={ep.product} productImg={ep.productImg} goToProduct={goToProduct} navigate={navigate} style={{ marginTop:24 }} />
            ))}
          </>
        )}

      </div>
    </section>
  );
}

/* ══════════════════════════════════════
   섹션 6 — 현장의 목소리
══════════════════════════════════════ */
function FieldVoices({ reviews }) {
  const [ref, visible] = useScrollReveal(0.15);
  const cols = Math.min(reviews.length, 3);
  return (
    <section ref={ref} className="pmt-pad-lg" style={{ padding:'96px 48px', background:'#fafafa' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'#C8271D', marginBottom:14 }}>현장의 목소리</div>
        <h2 style={{ fontSize:'clamp(26px,2.8vw,40px)', fontWeight:700, color:'#1a1a1a', letterSpacing:'-0.03em', marginBottom:56, lineHeight:1.4 }}>
          실제 도입 기관의<br />생생한 후기
        </h2>
        <div className="rgrid-3" style={{ display:'grid', gridTemplateColumns:`repeat(${cols}, 1fr)`, gap:24 }}>
          {reviews.map((r, i) => (
            <div key={i} style={{
              background:'#fff', borderRadius:22, padding:'44px 36px',
              border:'1px solid #ebebeb', position:'relative',
              boxShadow:'0 2px 16px rgba(0,0,0,0.05)',
              opacity: visible ? 1 : 0,
              transform: visible ? 'translateY(0)' : 'translateY(24px)',
              transition: `opacity 0.55s ease ${i*110}ms, transform 0.55s ease ${i*110}ms`,
            }}>
              <div style={{ fontSize:64, color:'#C8271D', fontWeight:900, lineHeight:0.75, marginBottom:28, opacity:0.18, userSelect:'none' }}>"</div>
              <p style={{ fontSize:16, color:'#333', lineHeight:1.85, fontWeight:500, marginBottom:32, letterSpacing:'-0.01em' }}>{r.text}</p>
              <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                <div style={{ width:44, height:44, borderRadius:'50%', background:'linear-gradient(135deg,#C8271D,#ff6b5b)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:17, color:'#fff', fontWeight:900, flexShrink:0 }}>
                  {r.name.charAt(0)}
                </div>
                <div>
                  <p style={{ fontSize:14, fontWeight:700, color:'#1a1a1a', margin:0, letterSpacing:'-0.01em' }}>{r.name}</p>
                  <p style={{ fontSize:12, color:'#aaa', margin:'2px 0 0', fontWeight:500 }}>PMT 솔루션 도입 기관</p>
                </div>
              </div>
              {/* 5-star */}
              <div style={{ position:'absolute', top:36, right:36, display:'flex', gap:3 }}>
                {[0,1,2,3,4].map(s => <span key={s} style={{ color:'#C8271D', fontSize:13 }}>★</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════
   섹션 7 — 견적받기 CTA
══════════════════════════════════════ */
function QuoteCtaSection({ navigate, industry }) {
  return (
    <section className="pmt-pad-lg" style={{ background:'#0f0f0f', padding:'100px 48px' }}>
      <div style={{ maxWidth:800, margin:'0 auto', textAlign:'center' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'rgba(255,255,255,0.28)', marginBottom:22 }}>Get Started</div>
        <h2 style={{ fontSize:'clamp(32px,3.8vw,56px)', fontWeight:900, color:'#fff', letterSpacing:'-0.04em', lineHeight:1.1, marginBottom:22 }}>
          시스템 도입 문의
        </h2>
        <p style={{ fontSize:17, color:'rgba(255,255,255,0.45)', lineHeight:1.75, marginBottom:48, fontWeight:400 }}>
          PMT Innovation 전문 컨설턴트가 귀사에 맞는<br />
          최적의 솔루션과 견적을 안내해 드립니다.
        </p>

        <div style={{ display:'flex', gap:16, justifyContent:'center', flexWrap:'wrap' }}>
          <button
            onClick={() => navigate('contact')}
            style={{ background:'linear-gradient(135deg,#C8271D,#e03525)', color:'#fff', border:'none', borderRadius:99, padding:'18px 56px', fontSize:17, fontWeight:800, cursor:'pointer', fontFamily:'inherit', boxShadow:'0 8px 40px rgba(200,39,29,0.48)', letterSpacing:'-0.01em', transition:'all 240ms' }}
            onMouseEnter={e=>{ e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='0 14px 56px rgba(200,39,29,0.65)'; }}
            onMouseLeave={e=>{ e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow='0 8px 40px rgba(200,39,29,0.48)'; }}
          >
            무료 견적 받기 →
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SolutionsPage });