/* ───────── FAQ Section — accordion, AEO-friendly ───────── */

const FAQ_ITEMS = [
  {
    q: '정책자금이란 무엇인가요?',
    a: '정책자금은 정부와 공공기관(중소벤처기업부, 소상공인시장진흥공단, 신용보증기금, 기술보증기금 등)이 사업자에게 제공하는 저금리·장기상환 대출 제도입니다. 용도에 따라 운전자금·창업자금·시설자금 등으로 나뉘며, 일반 시중은행 대출보다 금리가 낮고 상환 기간이 길다는 것이 특징입니다.',
  },
  {
    q: '정책자금 신청 자격은 어떻게 되나요?',
    a: '기본 자격은 사업자등록 3개월 이상, 대표자 신용 6등급 이내, 연체·세금 체납 이력이 없는 사업자입니다. 창업자금은 창업 7년 이내 기업이, 시설자금은 매출이 발생 중인 사업자가 신청할 수 있고, 자금 종류별로 추가 요건이 붙습니다.',
  },
  {
    q: '정책자금과 일반 대출은 무엇이 다른가요?',
    a: '정책자금은 일반 시중은행 대출보다 금리가 낮고(평균 2~3% 수준), 상환 기간이 길며(최대 10년), 매출 규모가 아닌 사업의 미래 가치와 성장 가능성을 기준으로 심사합니다. 신용도가 다소 낮아도 사업 모델에 따라 승인이 가능합니다.',
  },
  {
    q: '산업기계 렌탈은 왜 하는 건가요?',
    a: '고가의 산업·의료 장비를 일시에 구매하면 초기 자본이 크게 소모됩니다. 렌탈로 도입하면 월 임대료를 비용으로 처리해 현금을 사업 운영에 쓸 수 있고, 부가세 환급·법인세 절세 효과까지 얻을 수 있습니다. 노후 장비를 새 장비로 빠르게 교체할 수 있다는 장점도 있습니다.',
  },
  {
    q: '어떤 장비를 렌탈할 수 있나요?',
    a: '도장부스, 샌딩룸, 검차기, 자동포장기, 전자동 평판기, 의료장비(암치료기·레이저치료기), 커피머신, 헬스기기, 세차장 설비, 무인편의점·카페 장비 등 산업·의료·서비스업 전반의 장비를 렌탈할 수 있습니다. 운림은 제조·중소기업·병원·창업자 대상 케이스를 다수 보유하고 있습니다.',
  },
  {
    q: '정부지원금(무상)은 무엇인가요?',
    a: '정부가 창업·기술개발·장비 도입·마케팅 등 특정 사업 목적에 갚지 않아도 되는 무상 자금을 지원하는 제도입니다. 운전자금이나 창업자금과 결합해 활용하면 자금 부담을 크게 줄일 수 있어, 운림은 정책자금과 무상지원을 묶어서 설계하는 것을 권장합니다.',
  },
  {
    q: '기업인증은 왜 필요한가요?',
    a: '벤처기업·이노비즈·메인비즈 등의 인증을 받으면 정책자금 심사 가산점, 법인세·취득세 감면, 정부 입찰 우대, 추가 자금 한도 확대 등 다양한 혜택이 따릅니다. 기술과 사업의 혁신성을 공식적으로 인정받는 절차이기도 합니다.',
  },
  {
    q: '신용등급이 낮아도 신청 가능한가요?',
    a: '대표자 신용 6등급 이내면 기본 신청이 가능합니다. 등급이 더 낮은 경우에도 사업 모델, 매출 구조, 보증서 활용 여부에 따라 가능한 경로가 있으니, 무료 상담을 통해 가능 여부와 우회 경로를 먼저 확인하시길 권장합니다.',
  },
  {
    q: '승인까지 얼마나 걸리나요?',
    a: '자금 종류와 기관에 따라 차이가 있지만 평균 4~8주 정도 소요됩니다. 운전자금은 비교적 빠른 편이며, 시설자금·창업자금은 사업계획서·견적서 등 서류 검토 시간이 필요해 다소 길어질 수 있습니다.',
  },
  {
    q: '상담 비용이 있나요?',
    a: '운림의 진단·상담은 무료입니다. 신청 즉시 영업일 기준 1일 이내에 담당자가 연락드리며, 자금 구조 진단까지는 비용이 발생하지 않습니다. 컨설팅 진행이 결정되면 그때 비용 구조를 함께 안내드립니다.',
  },
];

function FAQSection() {
  const [open, setOpen] = useState(0); // first item open by default

  return (
    <section id="faq" className="py-24 lg:py-32 bg-white border-t border-line">
      <div className="max-w-container mx-auto px-6 lg:px-8">
        <div className="grid lg:grid-cols-[0.45fr_0.55fr] gap-10 lg:gap-16">
          {/* Left header */}
          <div>
            <div className="text-[13px] font-bold text-brand tracking-[.18em] uppercase">FAQ</div>
            <h2 className="h-sec text-[32px] lg:text-[40px] text-ink mt-3">
              사장님들이 가장 많이<br/>묻는 질문들입니다.
            </h2>
            <p className="mt-5 text-[16px] lg:text-[17px] text-body body-lg max-w-[420px]">
              정책자금·렌탈·무상지원·인증에 대해 처음 들으시는 분들도
              한눈에 이해할 수 있도록 정리했습니다.
            </p>
            <a href="#contact" className="hidden lg:inline-flex mt-8 btn-brand px-5 py-3 rounded-[12px] text-[14px] font-semibold">
              더 궁금한 점이 있다면, 무료 상담 →
            </a>
          </div>

          {/* Right accordion */}
          <div className="rounded-big border border-line bg-white overflow-hidden">
            <ul className="divide-y divide-line">
              {FAQ_ITEMS.map((item, i) => {
                const on = open === i;
                return (
                  <li key={i} itemScope itemProp="mainEntity" itemType="https://schema.org/Question">
                    <button type="button"
                      onClick={() => setOpen(on ? -1 : i)}
                      aria-expanded={on}
                      className="w-full text-left px-5 py-5 lg:px-7 lg:py-6 flex items-start gap-4 group">
                      <span className={`num flex-shrink-0 w-7 h-7 lg:w-8 lg:h-8 rounded-full flex items-center justify-center text-[12px] lg:text-[13px] font-bold transition-colors mt-0.5 ${
                        on ? 'bg-brand text-white' : 'bg-soft text-mute group-hover:text-ink'
                      }`}>
                        {String(i+1).padStart(2,'0')}
                      </span>
                      <span itemProp="name"
                            className={`flex-1 min-w-0 text-[15.5px] lg:text-[17px] font-bold leading-snug transition-colors ${
                              on ? 'text-ink' : 'text-ink/85 group-hover:text-ink'
                            }`}>
                        {item.q}
                      </span>
                      <span className={`flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center transition-all ${
                        on ? 'bg-brand text-white rotate-45' : 'bg-soft text-mute group-hover:bg-soft2'
                      }`}>
                        <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
                          <path d="M5.5 1V10M1 5.5H10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                        </svg>
                      </span>
                    </button>

                    <div className={`grid transition-all duration-300 ease-out ${
                      on ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
                    }`}>
                      <div className="overflow-hidden">
                        <div itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer">
                          <p itemProp="text"
                             className="px-5 pb-6 pl-[60px] lg:px-7 lg:pb-7 lg:pl-[76px] text-[14.5px] lg:text-[15.5px] text-body body-lg">
                            {item.a}
                          </p>
                        </div>
                      </div>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Mobile CTA */}
          <a href="#contact"
             className="lg:hidden inline-flex justify-center btn-brand py-3.5 rounded-[12px] text-[14.5px] font-semibold">
            더 궁금한 점이 있다면, 무료 상담 →
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQSection, FAQ_ITEMS });