// v5 — 자주 묻는 질문 / 주문 절차(현재 비활성)
//
// ※ 주문 절차(Process5)는 독립 섹션으로 두면 '약속'으로 읽힐 수 있어
//    자주 묻는 질문의 첫 항목으로 옮겼습니다. 아래 Process5 코드는 남겨둔 것이며,
//    다시 섹션으로 내세우려면
//      1) v5-app.jsx 의 <Faq5/> 앞에 <Process5/> 추가
//      2) v5-sections.jsx 의 nav items 에 { ko:'주문 절차', en:'Process', id:'process' } 추가
//    두 줄만 되돌리면 됩니다.

// ╔══════════════════════════════════════════════════════════════════════╗
// ║  주문 절차 (비활성) — 같은 내용이 V5_FAQ 첫 항목에 글로 들어가 있습니다. ║
// ║  ⚠ 문구를 고칠 때 '재제작', '전수검사', '무상' 같은 보증성 표현을       ║
// ║    넣지 마세요. 계약 문구로 해석되어 분쟁의 근거가 됩니다.             ║
// ╚══════════════════════════════════════════════════════════════════════╝
const V5_PROCESS = [
  {
    ko: '문의 · 도면 검토', en: 'Inquiry & Review',
    ko2: '도면을 보내주시면 제작 가능 여부부터 확인해 드립니다. 도면 준비가 어려우시면 먼저 문의 주세요.',
    en2: 'Send the drawing and we confirm feasibility first. If preparing one is difficult, contact us and we will work it out.',
  },
  {
    ko: '견적 · 납기 협의', en: 'Quote & Schedule',
    ko2: '수량과 사양에 따른 단가, 그리고 현실적인 납기를 함께 안내합니다. 무리한 일정은 미리 말씀드립니다.',
    en2: 'Unit price by volume and spec, with a realistic delivery date. We flag tight schedules upfront.',
  },
  {
    ko: '시제작 · 승인', en: 'Sample & Approval',
    ko2: '규격이 까다롭거나 초도 발주인 경우 샘플을 먼저 제작해 확인받은 뒤 양산에 들어갑니다.',
    en2: 'For tight tolerances or first orders, we make a sample for your approval before production.',
  },
  {
    ko: '양산 · 가공', en: 'Production',
    ko2: 'CNC선반, 프레스, 용접 설비를 자체 보유하고 있습니다.',
    en2: 'CNC turning, press and welding equipment in-house.',
  },
  {
    ko: '검사 · 납품', en: 'Inspection & Delivery',
    ko2: '초물·중간·종물 검사와 수량 확인을 거쳐 출하합니다.',
    en2: 'First-article, in-process and final checks, then quantity verification before shipping.',
  },
];

function Process5() {
  const t = useV4(); const ko = t.lang !== 'en';
  const [act, setAct] = useState(0);

  return (
    <Sec5 id="process" bg={D.base2}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 'clamp(30px,4vh,48px)' }}>
        <Rise>
          <Tag5>Process</Tag5>
          <H5 style={{ marginTop: 14, maxWidth: 720 }}>
            {ko ? <>문의부터 납품까지<br/>다섯 단계로 끝납니다.</> : <>Five steps from<br/>inquiry to delivery.</>}
          </H5>
        </Rise>
        <Rise delay={.1}>
          <p style={{ maxWidth: 480, fontSize: 14.5, lineHeight: 1.72, color: D.bone45 }}>
            {ko
              ? '주문 제작이 처음이셔도 괜찮습니다. 어느 단계에서든 전화 한 통이면 담당자가 상황을 설명해 드립니다.'
              : 'First time ordering custom parts? One call at any stage and we walk you through it.'}
          </p>
        </Rise>
      </div>

      <Rise delay={.14}>
        <div className="g5-proc">
          {V5_PROCESS.map((p, i) => {
            const on = act === i;
            return (
              <div key={p.ko}
                onMouseEnter={() => setAct(i)} onFocus={() => setAct(i)} tabIndex={0}
                style={{
                  position: 'relative', padding: 'clamp(20px,2.4vh,28px) clamp(16px,1.6vw,22px) clamp(22px,2.6vh,30px)',
                  borderTop: `1px solid ${on ? D.steel : D.line2}`,
                  background: on ? 'rgba(237,235,231,.03)' : 'transparent',
                  transition: 'background .45s ease, border-color .45s ease',
                  outline: 'none', cursor: 'default', minWidth: 0,
                }}>
                <span className="mono" style={{
                  fontSize: 11, fontWeight: 500, letterSpacing: '0.14em',
                  color: on ? D.steel : D.bone28, transition: 'color .45s',
                }}>{String(i + 1).padStart(2, '0')}</span>
                <h3 style={{
                  marginTop: 12, fontSize: 'clamp(15px,1.4vw,17.5px)', fontWeight: 700,
                  letterSpacing: '-0.032em', lineHeight: 1.3,
                  color: on ? D.bone : D.bone70, transition: 'color .45s',
                }}>{ko ? p.ko : p.en}</h3>
                <p style={{
                  marginTop: 10, fontSize: 13.5, lineHeight: 1.72,
                  color: on ? D.bone70 : D.bone45, transition: 'color .45s',
                }}>{ko ? p.ko2 : p.en2}</p>
              </div>
            );
          })}
        </div>
      </Rise>
    </Sec5>
  );
}

// ╔══════════════════════════════════════════════════════════════════════╗
// ║  자주 묻는 질문                                                        ║
// ║                                                                      ║
// ║  ⚠ 아래 답변은 모두 초안입니다. 회사 확인을 거쳐 실제 내용으로         ║
// ║    교체하세요. 확인 전까지는 a: '' 로 비워두면 화면에                  ║
// ║    "답변 준비 중"으로 표시되어 잘못된 정보가 나가지 않습니다.          ║
// ║                                                                      ║
// ║  질문을 추가하려면 배열에 { q, qEn, a, aEn } 한 줄만 넣으면 됩니다.     ║
// ╚══════════════════════════════════════════════════════════════════════╝
const V5_FAQ = [
  {
    q: '주문은 어떻게 진행되나요?',
    qEn: 'How does an order proceed?',
    a: '① 문의 · 도면 검토 — 치수가 확정된 도면을 받아 제작 가능 여부를 확인해 드립니다. 도면 준비가 어려우시면 상담 단계에서 함께 정리합니다.\n② 견적 · 납기 협의 — 수량과 사양에 따른 단가와 일정을 함께 안내합니다.\n③ 시제작 · 승인 — 규격이 까다롭거나 초도 발주인 경우 샘플을 먼저 확인받습니다.\n④ 양산 · 가공 — CNC선반, 프레스, 용접 설비를 자체 보유하고 있습니다.\n⑤ 검사 · 납품 — 초물·중간·종물 검사와 수량 확인을 거쳐 출하합니다.',
    aEn: '① Inquiry & review — we work from a dimensioned drawing to confirm feasibility. If one is hard to prepare, we sort it out together at the consultation stage.\n② Quote & schedule — unit price by volume and spec, with a delivery date.\n③ Sample & approval — for tight tolerances or first orders.\n④ Production — CNC turning, press and welding equipment in-house.\n⑤ Inspection & delivery — first-article, in-process and final checks, then quantity verification.',
  },
  {
    q: '최소 주문 수량이 있나요?',
    qEn: 'Is there a minimum order quantity?',
    a: '품목에 따라 다릅니다. 문의 주시면 해당 품목 기준으로 안내드립니다.',
    aEn: 'It varies by item. Contact us and we will advise the minimum for the item you need.',
  },
  {
    q: '도면 없이 주문할 수 있나요?',
    qEn: 'Can we order without a drawing?',
    a: '도면을 받고 있습니다. 구두나 메일 설명만으로 진행하면 세부 치수에 대한 이해가 서로 달라 완성 후에 문제가 생기는 경우가 있습니다. 치수가 확정된 도면을 주시면 그 기준으로 제작합니다.\n도면 작성이 어려우시면 먼저 문의 주세요. 실물이나 사진을 보고 상담은 가능하며, 제작 전에는 확정 도면으로 서로 확인하는 절차를 거칩니다.',
    aEn: 'We ask for a drawing. Verbal or email descriptions alone often lead to different understandings of the exact dimensions, which surfaces only after the parts are made. With a dimensioned drawing we build to that reference.\nIf preparing one is difficult, contact us first — we can discuss from a sample or photos, and confirm a final drawing together before production.',
  },
  {
    q: '납기는 보통 얼마나 걸리나요?',
    qEn: 'What is the typical lead time?',
    a: '제품에 따라 다릅니다. 규격품은 재고가 있으면 당일 출고하며, 주문 제작건은 수량과 사양을 확인한 뒤 일정을 조율해 출고합니다.',
    aEn: 'It depends on the item. Catalogue items ship the same day when in stock; custom orders ship on a schedule agreed after we confirm volume and spec.',
  },
  {
    q: '견적은 얼마나 걸리나요?',
    qEn: 'How long does a quote take?',
    a: '제품에 따라 다릅니다. 도면이나 사양이 확인되면 영업일 기준 1~2일 내 회신드리며, 복잡한 구조물은 검토에 시간이 더 걸릴 수 있습니다. 그 경우 예상 소요일을 먼저 알려드립니다.',
    aEn: 'It varies by item. Within one to two business days once we have the drawing or spec; complex assemblies may take longer, in which case we tell you the expected date first.',
  },
  {
    q: '도면 파일은 어떤 형식으로 보내면 되나요?',
    qEn: 'What drawing formats do you accept?',
    a: 'DWG, DXF, PDF 모두 가능합니다. 손으로 그린 스케치를 촬영한 사진도 괜찮습니다. 메일, 팩스, 문자, 카카오톡 어느 쪽으로 보내주셔도 확인 후 회신드립니다.',
    aEn: 'DWG, DXF and PDF all work. A photo of a hand sketch is fine too. Send it by email, fax, SMS or KakaoTalk and we will reply after review.',
  },
  {
    q: '배송은 어떻게 되나요?',
    qEn: 'How is delivery handled?',
    a: '경동택배로 발송하며 물류비는 별도로 발생합니다. 수량과 지역에 따라 화물로 보내드리는 경우도 있습니다. 직접 수령도 가능하며 사전에 연락 부탁드립니다.',
    aEn: 'We ship via Kyungdong Parcel; freight is charged separately. Larger volumes may go by cargo depending on quantity and region. Pickup is also possible — please call ahead.',
  },
];

function Faq5() {
  const t = useV4(); const ko = t.lang !== 'en';
  const [open, setOpen] = useState(0);

  return (
    <Sec5 id="faq" bg={D.base2}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 'clamp(26px,3.4vh,42px)' }}>
        <Rise>
          <Tag5>FAQ</Tag5>
          <H5 style={{ marginTop: 14, maxWidth: 700 }}>
            {ko ? <>자주 묻는 질문.</> : <>Common questions.</>}
          </H5>
        </Rise>
        <Rise delay={.1}>
          <p style={{ maxWidth: 480, fontSize: 14.5, lineHeight: 1.72, color: D.bone45 }}>
            {ko
              ? '더 궁금하신 점은 유선 문의 시 담당자가 빠르게 답변드립니다.'
              : 'For anything not covered here, a phone inquiry is answered directly by the person in charge.'}
          </p>
        </Rise>
      </div>

      <Rise delay={.14}>
        <div style={{ borderTop: `1px solid ${D.line}`, maxWidth: 900 }}>
          {V5_FAQ.map((item, i) => {
            const on = open === i;
            const ans = ko ? item.a : (item.aEn || item.a);
            return (
              <div key={item.q} style={{ borderBottom: `1px solid ${D.line2}` }}>
                <button
                  onClick={() => setOpen(on ? null : i)}
                  aria-expanded={on}
                  style={{
                    display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 24px', gap: 20,
                    alignItems: 'center', width: '100%', minHeight: 64,
                    padding: '18px 0', textAlign: 'left', cursor: 'pointer',
                    background: 'transparent', border: 'none', fontFamily: 'inherit',
                  }}>
                  <span style={{
                    fontSize: 'clamp(15px,1.5vw,17px)', fontWeight: 600, letterSpacing: '-0.03em',
                    lineHeight: 1.45, color: on ? D.bone : D.bone70, transition: 'color .3s',
                  }}>{ko ? item.q : item.qEn}</span>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: on ? D.steel : D.bone28, transition: 'color .3s, transform .35s cubic-bezier(.2,.7,.3,1)',
                    transform: on ? 'rotate(45deg)' : 'none',
                  }}>
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
                      <path d="M12 5v14M5 12h14"/>
                    </svg>
                  </span>
                </button>
                <div style={{
                  display: 'grid',
                  gridTemplateRows: on ? '1fr' : '0fr',
                  transition: 'grid-template-rows .4s cubic-bezier(.2,.7,.3,1)',
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <p style={{
                      paddingBottom: 22, maxWidth: 820,
                      fontSize: 14.5, lineHeight: 1.8, whiteSpace: 'pre-line',
                      color: ans ? D.bone70 : D.bone45,
                      fontStyle: ans ? 'normal' : 'italic',
                    }}>
                      {ans || (ko ? '답변 준비 중입니다. 전화로 문의해 주세요.' : 'Answer coming soon — please call us.')}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </Rise>

      {/* 남은 질문은 전화로 */}
      <Rise delay={.2}>
        <div style={{
          marginTop: 'clamp(24px,3vh,36px)', maxWidth: 900,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 20, flexWrap: 'wrap',
          padding: '20px 22px', background: D.base2, border: `1px solid ${D.line2}`,
        }}>
          <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.028em', color: D.bone70 }}>
            {ko ? '찾으시는 답변이 없으신가요?' : 'Still have a question?'}
          </span>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <B5 href="tel:0319623951" tone="solid">{ko ? '전화 문의' : 'Call us'}</B5>
            <B5 href="#contact" tone="line">{ko ? '견적 요청' : 'Get a quote'}</B5>
          </div>
        </div>
      </Rise>
    </Sec5>
  );
}

Object.assign(window, { V5_PROCESS, V5_FAQ, Process5, Faq5 });