// ============ 규칙 페이지 ============
const RULE_SECTIONS = [
  { id: 'common', title: '공용 규칙', meta: '위반 시 재경기 진행' },
  { id: 'exception', title: '예외적 규칙', meta: '튕김 / 타임아웃 처리' },
  { id: 'char-ban', title: '캐릭터 금지 리스트', meta: 'Banned Characters' },
  { id: 'acc-ban', title: '악세사리 금지 리스트', meta: 'Banned Accessories' },
  { id: 'circle', title: '원형 경기장 규칙', meta: '경고 2회 누적 시 -1점' },
  { id: 'maze', title: '망자의 미궁 규칙', meta: '경고 2회 누적 시 팀 -1점' },
  { id: 'map', title: '대맵 규칙', meta: '경고 2회 누적 시 해당 팀 -1점' },
];

const RuleItem = ({ title, tag, tagLabel, children }) => (
  <div className="rule-item">
    <div className="rule-title">
      {tag && <span className={`rule-tag ${tag}`}>{tagLabel}</span>}
      <span>{title}</span>
    </div>
    <div className="rule-text">{children}</div>
  </div>
);

const RulesPage = () => {
  const [active, setActive] = React.useState('common');

  React.useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const visible = entries.filter(e => e.isIntersecting)
        .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      if (visible[0]) setActive(visible[0].target.id);
    }, { rootMargin: '-80px 0px -60% 0px', threshold: 0 });

    RULE_SECTIONS.forEach(s => {
      const el = document.getElementById(s.id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  return (
    <div className="container">
      <div className="page-header">
        <div className="accent-line"/>
        <h1>내전 규칙</h1>
        <p className="sub">모든 참가자가 반드시 숙지해야 하는 공식 규정입니다.</p>
      </div>

      <div className="rules-layout">
        <nav className="rules-nav">
          {RULE_SECTIONS.map(s => (
            <a key={s.id}
               className={active === s.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); scrollTo(s.id); }}
               href={`#${s.id}`}>
              {s.title}
            </a>
          ))}
        </nav>

        <div>
          {/* 공용 규칙 */}
          <section id="common" className="rule-section">
            <h2>1. 공용 규칙</h2>
            <div className="rule-meta">위반 시 재경기 진행</div>
            <RuleItem title="강화 및 코디 악세사리 금지" tag="deny" tagLabel="금지">
              커스텀 강화를 비롯한 모든 강화 금지, 코디 악세사리 금지.
            </RuleItem>
            <RuleItem title="스킨 제약 조건" tag="deny" tagLabel="금지">
              이동 모션이 바뀌는 스킨 금지, 캐릭터 크기(팔/다리) 변화가 생기는 스킨 금지.
            </RuleItem>
            <RuleItem title="일반 화질 스킨" tag="info" tagLabel="권고">
              일반 화질 스킨 착용 권고 (위반 사항에 해당하지 않으면 일반 화질 착용 의무 아님).
            </RuleItem>
            <RuleItem title="같은 팀 악세사리 중복 불가" tag="deny" tagLabel="금지">
              같은 팀 악세사리 중복 불가 (캐릭터는 중복 가능).
            </RuleItem>
            <RuleItem title="상점 악세사리만 착용 가능" tag="allow" tagLabel="허용">
              <ul>
                <li>상점에서 판매 종료된 악세사리, 팔레트 스왑(색칠놀이) 악세사리 가능</li>
                <li>단, 한정 판매 악세사리는 불가능 (ex. 산타 시리즈)</li>
              </ul>
            </RuleItem>
            <RuleItem title="기능 제한 악세사리" tag="deny" tagLabel="금지">
              <ul>
                <li>변신 기능이 있는 악세사리 금지</li>
                <li>설치형 기술이 있는 악세사리 금지 (화끈화끈 발사기 제외)</li>
              </ul>
            </RuleItem>
            <RuleItem title="특수 스킬 금지" tag="deny" tagLabel="금지">
              빽실드, 낙법, 8각 가드, 부활, 은신, 탱크, 소환, 무한콤보 금지 (단, 합콤은 무한콤보 범주에 속하지 않음).
            </RuleItem>
            <RuleItem title="연속 어퍼 제한" tag="deny" tagLabel="금지">
              3연속 어퍼까지만 허용, 4연속 어퍼부터 금지.
            </RuleItem>
          </section>

          {/* 예외적 규칙 */}
          <section id="exception" className="rule-section">
            <h2>2. 예외적 규칙</h2>
            <div className="rule-meta">튕김 / 타임아웃 처리</div>
            <RuleItem title="플레이어 튕김 현상" tag="warn" tagLabel="예외">
              빠른 재경기 진행을 위해 모든 인원 자살 (재경기 시작 전 캐릭터 및 악세사리 교체 불가).
              <div style={{marginTop: 10, padding: 12, background: 'var(--bg-elev)', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13, color: 'var(--text-mute)'}}>
                <span style={{color: 'var(--accent)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em'}}>재경기 예시</span>
                <div style={{marginTop: 6}}>2라운드에서 팅겼을 시 모든 인원 자살 → 재시작 후 1라운드 모든 인원 자살 → 2라운드 경기 진행</div>
              </div>
            </RuleItem>
            <RuleItem title="타임 아웃 (라운드 0초 도달 시)" tag="warn" tagLabel="예외">
              <ul>
                <li>생존 인원이 더 많은 팀 승리</li>
                <li>양팀 생존 인원이 같을 시 체력이 더 많은 팀 승리 (포토샵 픽셀 단위 검증 가능)</li>
              </ul>
            </RuleItem>
          </section>

          {/* 캐릭터 금지 */}
          <section id="char-ban" className="rule-section">
            <h2>3. 캐릭터 금지 리스트</h2>
            <div className="rule-meta">Banned Characters</div>
            <div className="card">
              <div style={{display: 'flex', flexWrap: 'wrap', gap: 8}}>
                {['심판자', '수인', '야수', '다크엘프', '수왕', '시크릿가드', '버서커'].map(c => (
                  <span key={c} className="pill" style={{background: 'rgba(255,84,112,0.12)', color: 'var(--danger)', border: '1px solid rgba(255,84,112,0.3)', padding: '6px 14px', fontWeight: 600}}>{c}</span>
                ))}
              </div>
              <div className="divider"/>
              <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
                <span className="rule-tag warn">조건부 금지</span>
                <span style={{fontSize: 14, color: 'var(--text-dim)'}}>트윈스(알파)는 <b style={{color: 'var(--text)'}}>망자의 미궁</b>에서만 금지</span>
              </div>
            </div>
          </section>

          {/* 악세사리 금지 */}
          <section id="acc-ban" className="rule-section">
            <h2>4. 악세사리 금지 리스트</h2>
            <div className="rule-meta">Banned Accessories</div>
            <RuleItem title="전면 금지" tag="deny" tagLabel="금지">
              <ul>
                <li>레어 악세사리 (색칠놀이 악세사리 제외)</li>
                <li>변신 악세, 배틀 로드, 스타 세이버, 강태공의 낚싯대, 스파클 브로우스렛, 아쿠아 기어, 구미호의 꼬리</li>
              </ul>
            </RuleItem>
            <RuleItem title="망자의 미궁 한정 금지" tag="warn" tagLabel="조건부">
              벨제부브, 아크로니카 소드
            </RuleItem>
          </section>

          {/* 원형 경기장 */}
          <section id="circle" className="rule-section">
            <h2>5. 원형 경기장 규칙</h2>
            <div className="rule-meta">경고 2회 누적 시 -1점</div>
            <RuleItem title="허용되는 규칙" tag="allow" tagLabel="허용">
              <ul>
                <li>상대가 밖으로 나가기 전 MP 소모 시 입막 가능</li>
                <li>100초에 ㅏㅓ 구역 무너질 시 입막 가능</li>
              </ul>
            </RuleItem>
            <RuleItem title="경고 적용 규칙" tag="warn" tagLabel="경고">
              <ul>
                <li>출구를 막는 모든 행위 (세미 입막 불가), 입막 시 자살 (상대가 죽지 않았더라도)</li>
                <li>각 팀 1명이 남은 상태에서 입막 행위로 상대팀이 패배할 경우 경고 2회 적용</li>
                <li>가운데 구역에서 고의적 이탈 금지 (ㅏㅓ구역 진입 금지)</li>
                <li>ㅏㅓ구역에서 기방하는 행위 금지</li>
              </ul>
            </RuleItem>
          </section>

          {/* 망자의 미궁 */}
          <section id="maze" className="rule-section">
            <h2>6. 망자의 미궁 규칙</h2>
            <div className="rule-meta">경고 2회 누적 시 팀 -1점</div>
            <RuleItem title="DEF 제한" tag="deny" tagLabel="금지">
              DEF 8칸까지만 허용 (DEF 9칸 이상 금지).
            </RuleItem>
            <RuleItem title='시작 신호 "ㄱㄱ"' tag="info" tagLabel="절차">
              서로 "ㄱㄱ" 채팅 후 2~3초 뒤 진행.
              <ul>
                <li>한쪽에서 ㄱㄱ를 쳤음에도 상대방이 불응할 시 이의 제기 가능 (상대 과실 인정 시 상대팀 경고 1회)</li>
                <li>무작정 혼자서 ㄱㄱ 치고 바로 선빵 시 경고 2회 적용</li>
              </ul>
            </RuleItem>
            <RuleItem title="이탈 및 방해 행위 금지" tag="warn" tagLabel="경고">
              <ul>
                <li>전장 이탈 금지, 전투 도중 비석 위로 올라가는 행위 금지</li>
                <li>대기 인원을 무작정 공격하는 행위 금지 (대기 인원은 전투 중인 플레이어에게 조준(Z) 금지)</li>
              </ul>
            </RuleItem>
          </section>

          {/* 대맵 */}
          <section id="map" className="rule-section">
            <h2>7. 대맵 규칙</h2>
            <div className="rule-meta">경고 2회 누적 시 해당 팀 -1점</div>
            <RuleItem title="NPC 및 진행 순서" tag="info" tagLabel="필수">
              <ul>
                <li>NPC 기능 켜진 상태로 진행</li>
                <li>맵 진행 순서: 고산대불 → 스카이 쉽 → 씨티</li>
              </ul>
            </RuleItem>
            <RuleItem title="탱크 탑승 금지" tag="deny" tagLabel="금지">
              탱크 탑승 금지.
            </RuleItem>
            <RuleItem title="지형지물 관통 금지" tag="warn" tagLabel="경고 2회">
              지형지물 내부를 뚫고 진입하는 행위는 반칙 (경고 2회 적용, ex. 스카이 쉽 은미 에라 감옥).
            </RuleItem>
          </section>
        </div>
      </div>
    </div>
  );
};

window.RulesPage = RulesPage;