/* ───────── Approval cases — image-bg variations, white text ───────── */

// User-supplied images, in order (index = position in *_CASES array).
const POLICY_CASE_IMGS = [
  'assets/cases/1.jpg',
  'assets/cases/2.jpg',
  'assets/cases/3.jpg',
  'assets/cases/4.jpg',
  'assets/cases/5.jpg',
  'assets/cases/6.png',
  'assets/cases/7.png',
  'assets/cases/8.jpg',
  'assets/cases/9.jpg',
  'assets/cases/10.jpg',
];
const RENTAL_CASE_IMGS = [
  'assets/cases/rental/1.png',
  'assets/cases/rental/2.jpg',
  'assets/cases/rental/3.jpg',
  'assets/cases/rental/4.jpg',
  'assets/cases/rental/5.jpg',
  'assets/cases/rental/6.jpg',
  'assets/cases/rental/7.jpg',
  'assets/cases/rental/8.jpg',
  'assets/cases/rental/9.jpg',
  'assets/cases/rental/10.jpg',
];

const imgFor = (industry, kind, idx, w = 800, h = 600) => {
  if (idx != null) {
    if (kind === 'policy' && POLICY_CASE_IMGS[idx]) return POLICY_CASE_IMGS[idx];
    if (kind === 'rental' && RENTAL_CASE_IMGS[idx]) return RENTAL_CASE_IMGS[idx];
  }
  return `https://picsum.photos/seed/${encodeURIComponent(industry + '-' + (kind || 'p'))}/${w}/${h}`;
};

const ChipApproved = ({ kind }) => (
  <div className="inline-flex items-center gap-1.5 bg-white/15 backdrop-blur-md text-white text-[11px] font-semibold px-2.5 py-1 rounded-full ring-1 ring-white/20">
    <span className="w-1.5 h-1.5 bg-brand rounded-full"></span>
    {kind === 'policy' ? '정책자금 승인' : '렌탈 승인'}
  </div>
);

/* Style 1 — Poster (full bleed) */
function CasePoster({ c, kind, idx }) {
  return (
    <div className="group relative rounded-big overflow-hidden card-hover h-[300px] bg-ink">
      <img src={imgFor(c.industry, kind, idx)} alt=""
           className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.04]" />
      <div className="absolute inset-0"
           style={{background:'linear-gradient(180deg, rgba(11,31,58,0.05) 0%, rgba(11,31,58,0.35) 45%, rgba(11,31,58,0.92) 100%)'}} />
      <div className="relative h-full p-5 flex flex-col">
        <div className="flex items-center justify-between">
          <ChipApproved kind={kind} />
          <div className="text-[11px] text-white/70 font-semibold">운림 매니저</div>
        </div>
        <div className="mt-auto">
          <div className="text-[16px] font-bold text-white">{c.industry}</div>
          <div className="text-[12px] text-white/75 mt-0.5">{c.info}</div>
          <div className="mt-3 flex items-baseline gap-2">
            <span className="num text-white" style={{fontWeight:800, fontSize:34, letterSpacing:'-0.035em', lineHeight:1}}>
              {c.amount}
            </span>
            <span className="text-[13px] font-semibold text-white/95">{c.kind} 승인</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Style 2 — Split (image top, dark card bottom) */
function CaseSplit({ c, kind, idx }) {
  return (
    <div className="rounded-big overflow-hidden card-hover bg-ink">
      <div className="relative h-[170px] overflow-hidden">
        <img src={imgFor(c.industry, kind, idx, 800, 500)} alt=""
             className="w-full h-full object-cover" />
        <div className="absolute inset-0"
             style={{background:'linear-gradient(180deg, rgba(11,31,58,0.0) 40%, rgba(11,31,58,0.55) 100%)'}} />
        <div className="absolute top-3 left-3"><ChipApproved kind={kind} /></div>
        <div className="absolute bottom-3 left-4 right-4 flex items-end justify-between">
          <div className="text-white">
            <div className="text-[15px] font-bold drop-shadow">{c.industry}</div>
          </div>
          <div className="text-[11px] text-white/85 font-semibold">운림 매니저</div>
        </div>
      </div>
      <div className="p-5 text-white">
        <div className="text-[12px] text-white/65">{c.info}</div>
        <div className="mt-2 flex items-baseline gap-2">
          <span className="num text-white" style={{fontWeight:800, fontSize:30, letterSpacing:'-0.035em', lineHeight:1}}>
            {c.amount}
          </span>
          <span className="text-[13px] font-semibold text-white/90">{c.kind}</span>
        </div>
        <div className="mt-3 pt-3 border-t border-white/10 flex items-center justify-between text-[11px] text-white/55 font-medium">
          <span>승인 완료</span>
          <span className="num">No. {String(Math.abs(c.industry.length*31 + c.amount.length*7) % 9000 + 1000)}</span>
        </div>
      </div>
    </div>
  );
}

/* Style 3 — Side (image left, dark right) */
function CaseSide({ c, kind, idx }) {
  return (
    <div className="rounded-big overflow-hidden card-hover bg-ink grid grid-cols-[40%_60%] h-[180px]">
      <div className="relative">
        <img src={imgFor(c.industry, kind, idx, 500, 700)} alt=""
             className="w-full h-full object-cover" />
        <div className="absolute inset-0"
             style={{background:'linear-gradient(90deg, rgba(11,31,58,0.0) 50%, rgba(11,31,58,0.6) 100%)'}} />
      </div>
      <div className="p-5 text-white flex flex-col">
        <div className="flex items-center justify-between">
          <ChipApproved kind={kind} />
        </div>
        <div className="mt-auto">
          <div className="text-[14px] font-bold text-white">{c.industry}</div>
          <div className="text-[11px] text-white/65 mt-0.5 truncate">{c.info}</div>
          <div className="mt-1.5 flex items-baseline gap-1.5">
            <span className="num text-white" style={{fontWeight:800, fontSize:28, letterSpacing:'-0.035em', lineHeight:1}}>
              {c.amount}
            </span>
            <span className="text-[12px] font-semibold text-white/90">{c.kind}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function CaseGrid({ cases, style, kind }) {
  const [more, setMore] = useState(false);
  const visible = more ? cases : cases.slice(0, 6);
  const Card = style === 'split' ? CaseSplit : style === 'side' ? CaseSide : CasePoster;
  return (
    <>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5">
        {visible.map((c, i) => <Card key={c.industry + i} c={c} kind={kind} idx={i} />)}
      </div>
      {cases.length > 6 && (
        <div className="mt-8 flex justify-center">
          <button onClick={() => setMore(!more)}
            className="btn-ghost px-5 py-3 rounded-[12px] text-[14px] font-semibold">
            {more ? '접기' : `승인사례 ${cases.length - 6}건 더보기`}
          </button>
        </div>
      )}
    </>
  );
}

function CasesSection({ caseStyle }) {
  const [type, setType] = useState('policy');
  const cases = type === 'policy' ? POLICY_CASES : RENTAL_CASES;

  return (
    <section id="cases" className="py-24 lg:py-32 bg-soft">
      <div className="max-w-container mx-auto px-6 lg:px-8">
        <div className="flex items-end justify-between flex-wrap gap-6">
          <div>
            <div className="text-[13px] font-bold text-brand tracking-[.18em] uppercase">Approved Cases</div>
            <h2 className="h-sec text-[32px] lg:text-[40px] text-ink mt-3">
              실제로 승인된, 실제 숫자입니다.
            </h2>
            <p className="mt-4 text-[16px] text-body body-lg max-w-[560px]">
              운림이 직접 매니징한 정책자금·렌탈 승인 건의 일부입니다.
              업종과 매출 구조가 달라도 길은 있습니다.
            </p>
          </div>
          <div className="inline-flex p-1 bg-white border border-line rounded-[12px]">
            {[['policy','정책자금 승인'],['rental','렌탈 승인']].map(([v,l]) => (
              <button key={v} onClick={()=>setType(v)}
                className={`px-4 py-2.5 text-[13.5px] font-semibold rounded-[10px] transition-all ${
                  type===v ? 'bg-ink text-white' : 'text-body hover:text-ink'
                }`}>{l}</button>
            ))}
          </div>
        </div>

        <div className="mt-10">
          <CaseGrid key={type+caseStyle} cases={cases} style={caseStyle} kind={type} />
        </div>

        <p className="mt-8 text-[12.5px] text-mute text-center">
          * 표기 이미지는 업종별 자료 사진이며, 실제 승인 건의 비식별 표현입니다.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { CasesSection });