/* ───────────── About strip (intro) ───────────── */
function AboutStrip() {
  return (
    <section id="about" className="py-24 lg:py-32 border-b border-line">
      <div className="max-w-container mx-auto px-6 lg:px-8">
        <div className="grid lg:grid-cols-[0.4fr_0.6fr] gap-10 lg:gap-16">
          <div>
            <div className="text-[13px] font-bold text-brand tracking-[.18em] uppercase">About UNLIM</div>
            <h2 className="h-sec text-[32px] lg:text-[40px] text-ink mt-3">
              자금 확보의<br />모든 플랜을, 운림이<br />직접 책임집니다.
            </h2>
          </div>
          <div className="lg:pt-2 text-center">
            <p className="text-[19px] lg:text-[21px] text-ink body-lg font-medium">
              <span className="text-mute">소상공인부터 중견기업까지,</span><br />
              자금 확보의 <span className="text-ink font-bold">무상·유상·렌탈·인증</span> 플랜을<br />
              <span className="text-brand font-bold">신청부터 승인 후 관리까지</span> 운림이 직접 진행합니다.
            </p>
            <ol className="mt-8 flex flex-nowrap items-stretch justify-center gap-2 sm:gap-3 mx-auto">
              {['신청 컨설팅', '서류 · 평가', '승인 · 사후관리'].map((s, i) => (
                <React.Fragment key={s}>
                  <li className="bg-white border border-line rounded-[14px] px-3 py-3 sm:px-5 sm:py-4 flex items-center gap-2.5 whitespace-nowrap">
                    <span className="num inline-flex items-center justify-center w-7 h-7 rounded-full bg-tint text-brand text-[12.5px] font-extrabold flex-shrink-0">
                      {i + 1}
                    </span>
                    <span className="text-[13.5px] sm:text-[15px] font-bold text-ink leading-snug">
                      {s}
                    </span>
                  </li>
                  {i < 2 && (
                    <span aria-hidden="true" className="self-center text-mute text-[14px]">›</span>
                  )}
                </React.Fragment>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>);

}

/* ───────────── Services 4종 ───────────── */
function Services4() {
  return (
    <section id="services" className="py-24 lg:py-32 bg-soft">
      <div className="max-w-container mx-auto px-6 lg:px-8">
        <div className="max-w-[760px]">
          <div className="text-[13px] font-bold text-brand tracking-[.18em] uppercase">Services</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">
            정책자금 · 무상지원 · 기업인증 · 산업기계 렌탈 — 각각 따로 흩어진 자금 솔루션을
            운림은 하나의 플랜으로 묶어 설계합니다.
          </p>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 gap-5">
          {SERVICES_4.map((s, i) =>
          <div key={s.title} className="card-hover bg-white border border-line rounded-big p-7 lg:p-9 relative overflow-hidden">
              {/* big watermark numeral */}
              <div className="num absolute right-6 top-5 text-soft2 select-none pointer-events-none"
            style={{ fontWeight: 800, fontSize: 96, lineHeight: 1, letterSpacing: '-0.04em' }}>
                0{i + 1}
              </div>
              <div className="relative">
                <div className="flex items-center gap-2 text-[12px] font-bold tracking-[.18em] uppercase">
                  <span className="w-6 h-px bg-brand"></span>
                  <span className="text-brand">Service 0{i + 1}</span>
                </div>
                <h3 className="h-card text-[24px] lg:text-[26px] text-ink mt-5">{s.title}</h3>
                <p className="mt-3 text-[15px] text-body body-lg max-w-[420px]">{s.desc}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ───────────── Policy detail ───────────── */
function PolicyDetail() {
  const [tab, setTab] = useState(0);
  const k = POLICY_KINDS[tab];

  return (
    <section id="policy" className="py-24 lg:py-32">
      <div className="max-w-container mx-auto px-6 lg:px-8">
        {/* Intro */}
        <div className="bg-soft rounded-xl2 p-8 lg:p-12 grid lg:grid-cols-[0.55fr_0.45fr] gap-8 items-center">
          <div>
            <div className="inline-flex items-center gap-2 bg-white border border-line px-3 py-1.5 rounded-full">
              <span className="w-1.5 h-1.5 rounded-full bg-brand"></span>
              <span className="text-[13px] font-semibold text-ink">정책자금, 무엇인가요?</span>
            </div>
            <h2 className="h-sec text-[30px] lg:text-[38px] text-ink mt-5">
              정부가 기업의 성장과 안정을 돕는,<br />이른바 <span className="text-brand">착한 자금</span>.
            </h2>
            <p className="mt-5 text-[16px] text-body body-lg max-w-[520px]">시중 은행보다 훨씬 유리한 조건으로 자금을 융통할 수 있고, 조건에 따라
갚지 않아도 되는 지원금도 있습니다.

            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            {POLICY_ADVANTAGES.map((a) =>
            <div key={a.title} className="bg-white border border-line rounded-card p-4 lg:p-5">
                <div className="num text-[12px] text-mute font-bold">{a.num}</div>
                <div className="h-card text-[16px] lg:text-[18px] text-ink mt-1.5">{a.title}</div>
                <p className="mt-2 text-[12.5px] text-body leading-relaxed whitespace-pre-line">{a.desc}</p>
              </div>
            )}
          </div>
        </div>

        {/* Tabs */}
        <div className="mt-16">
          <div className="text-[13px] font-bold text-brand tracking-[.18em] uppercase">Policy Funds</div>
          <h3 className="h-sec text-[28px] lg:text-[34px] text-ink mt-3">
            세 가지 자금, 각자의 쓰임이 있습니다.
          </h3>

          <div className="mt-8 inline-flex p-1 bg-soft2 rounded-[12px]">
            {POLICY_KINDS.map((p, i) =>
            <button key={p.key} onClick={() => setTab(i)}
            className={`px-5 py-2.5 text-[14px] font-semibold rounded-[10px] transition-all ${
            tab === i ? 'bg-white text-ink ring-soft' : 'text-body hover:text-ink'}`
            }>
                {p.label}
              </button>
            )}
          </div>

          <div className="mt-7 grid lg:grid-cols-2 gap-6 lg:gap-8">
            <div className="bg-white border border-line rounded-big p-7 lg:p-9">
              <div className="flex items-center gap-2 text-[13px] font-semibold text-mute">
                <span className="w-2 h-2 rounded-full bg-brand"></span> {k.sub}
              </div>
              <h4 className="h-card text-[24px] lg:text-[28px] text-ink mt-3">{k.label}</h4>
              <p className="mt-4 text-[16px] text-body body-lg whitespace-pre-line">{k.desc}</p>

              <div className="mt-7">
                <div className="text-[13px] font-bold text-ink mb-3">주요 용도</div>
                <ul className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  {k.items.map((it) =>
                  <li key={it} className="bg-soft rounded-card px-4 py-3 text-[13.5px] font-semibold text-ink">
                      {it}
                    </li>
                  )}
                </ul>
              </div>

              <div className="mt-7 pt-6 border-t border-line">
                <div className="text-[13px] font-bold text-ink mb-3">이런 분께 권해드려요</div>
                <ul className="space-y-3">
                  {k.audience.map((a, i) =>
                  <li key={a} className="flex items-start gap-3 text-[14.5px] text-ink leading-relaxed">
                      <span className="mt-[7px] w-1.5 h-1.5 rounded-full bg-brand flex-shrink-0"></span>
                      <span>{a}</span>
                    </li>
                  )}
                </ul>
              </div>
            </div>

            {/* Eligibility / docs panel — no fake processing-time data */}
            <div className="bg-white border border-line rounded-big p-7 lg:p-9">
              <div className="text-[12px] font-bold tracking-[.18em] uppercase text-mute">
                Qualify · Docs
              </div>
              <h4 className="h-card text-[22px] lg:text-[26px] text-ink mt-2">
                이 자금, 받을 수 있나요?
              </h4>

              {/* Qualify */}
              <div className="mt-6">
                <div className="text-[13px] font-bold text-ink mb-3">신청 자격</div>
                <ul className="space-y-3">
                  {k.qualify.map((q, i) =>
                  <li key={q} className="flex items-start gap-3 text-[14.5px] text-ink">
                      <span className="num text-[12px] font-bold text-brand mt-[3px] flex-shrink-0 w-5">{String(i + 1).padStart(2, '0')}</span>
                      <span>{q}</span>
                    </li>
                  )}
                </ul>
              </div>

              {/* Docs */}
              <div className="mt-7 pt-6 border-t border-line">
                <div className="flex items-center justify-between mb-3">
                  <div className="text-[13px] font-bold text-ink">필요 서류</div>
                  <div className="num text-[12px] font-semibold text-mute">총 {k.docs.length}종</div>
                </div>
                <div className="flex flex-wrap gap-1.5">
                  {k.docs.map((d) =>
                  <span key={d} className="bg-soft2 text-body text-[12.5px] font-semibold px-2.5 py-1.5 rounded-[8px]">
                      {d}
                    </span>
                  )}
                </div>
                <div className="mt-5 text-[12px] text-mute">
                  * 업종·사업 형태에 따라 추가 서류가 요청될 수 있습니다. 정확한 안내는 상담 시 확인됩니다.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { AboutStrip, Services4, PolicyDetail });