// 약관/처리방침 공용 렌더러
// sections: [ [title, body], ... ]
// body 타입:
//   string                                 → 단일 문단
//   string[]                               → 번호 리스트 (각 항목은 string 또는 [text, subList[]] 튜플)
//   [text, subList[]]                      → 문단 + 하위 리스트
//   { pre?, list, ordered? }               → 도입문 + (기본 번호) 리스트. ordered:false 면 불릿.
//   { blocks: [...] }                      → 문단·리스트가 번갈아 나오는 절. 블록이 string 이면 문단,
//                                            { list, ordered? } 이면 리스트. 적힌 순서대로 렌더.

// "일반 **강조** 텍스트" → [텍스트, <strong>…</strong>, …]
function inline(text) {
  if (typeof text !== 'string') return text;
  const parts = text.split(/(\*\*[^*]+\*\*)/g);
  return parts.map((p, i) => {
    if (p.startsWith('**') && p.endsWith('**')) {
      return <strong key={i} className="text-white font-semibold">{p.slice(2, -2)}</strong>;
    }
    return p;
  });
}

function renderList(items, ordered = true) {
  const Tag = ordered ? 'ol' : 'ul';
  const listClass = ordered
    ? 'list-decimal pl-5 space-y-1.5 marker:text-neutral-600'
    : 'list-disc pl-5 space-y-1 marker:text-neutral-600';
  return (
    <Tag className={listClass}>
      {items.map((it, i) => {
        if (Array.isArray(it)) {
          const [text, sub] = it;
          return (
            <li key={i} className="leading-[1.85]">
              {inline(text)}
              <ul className="list-disc pl-5 mt-1.5 space-y-1 marker:text-neutral-600 text-neutral-400">
                {sub.map((s, j) => <li key={j}>{inline(s)}</li>)}
              </ul>
            </li>
          );
        }
        return <li key={i} className="leading-[1.85]">{inline(it)}</li>;
      })}
    </Tag>
  );
}

function renderBody(body) {
  if (typeof body === 'string') {
    return <p className="text-neutral-400 leading-[1.85]" style={{textWrap:'pretty'}}>{inline(body)}</p>;
  }
  if (Array.isArray(body)) {
    return <div className="text-neutral-400">{renderList(body, true)}</div>;
  }
  if (body && typeof body === 'object' && Array.isArray(body.blocks)) {
    return (
      <div className="text-neutral-400 space-y-3">
        {body.blocks.map((b, i) => (
          typeof b === 'string'
            ? <p key={i} className="leading-[1.85]" style={{textWrap:'pretty'}}>{inline(b)}</p>
            : <div key={i}>{renderList(b.list, b.ordered !== false)}</div>
        ))}
      </div>
    );
  }
  if (body && typeof body === 'object') {
    const { pre, list, ordered = true } = body;
    return (
      <div className="text-neutral-400 space-y-3">
        {pre && <p className="leading-[1.85]" style={{textWrap:'pretty'}}>{inline(pre)}</p>}
        {list && renderList(list, ordered)}
      </div>
    );
  }
  return null;
}

function LegalDoc({ eyebrow, title, effective, sections, footer }) {
  return (
    <article className="max-w-3xl mx-auto px-6 py-16 md:py-24">
      <div className="mb-12">
        {eyebrow && <div className="text-[11px] uppercase tracking-widest text-neutral-500 mb-3">{eyebrow}</div>}
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">{title}</h1>
        {effective && <div className="text-sm text-neutral-500">{effective}</div>}
      </div>
      <div className="space-y-10 text-[15px]">
        {sections.map(([t, body], i) => (
          <section key={i}>
            <h2 className="text-lg font-bold text-white mb-3">{t}</h2>
            {renderBody(body)}
          </section>
        ))}
      </div>
      {footer && (
        <div className="mt-16 pt-8 border-t border-white/10 text-sm text-neutral-500">
          {footer}
        </div>
      )}
    </article>
  );
}