// 공용 Nav/Footer — 모든 페이지 공유
// React + I(icons) 전역 필요
const { useState: chromeUseS, useEffect: chromeUseE } = React;

function Nav({ accent, current }) {
  // current: 'landing' | 'download' | 'pricing' | 'tour' | 'blog' | 'help' | 'magazine' | 'changelog' | ...
  const [scrolled, setScrolled] = chromeUseS(false);
  const [open, setOpen] = chromeUseS(false);
  chromeUseE(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { href:'pricing.html',  key:'pricing',   label:'가격' },
    { href:'#',             key:'community', label:'커뮤니티' },
  ];
  // 랜딩에서 가격은 pricing.html로 직결 (내부 섹션이 아닌 full 페이지로)
  const resolveHref = (l) => l.href;

  return (
    <>
      <nav className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled?'bg-[#0a0a0f]/85 backdrop-blur-md border-b border-white/5':'bg-transparent'}`}>
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <a href="index.html" className="flex items-center gap-2.5">
            <img src="assets/logo.png?v=2" alt="상태창" className="w-7 h-7" draggable="false"/>
            <span className="text-[17px] font-bold text-white tracking-[-0.02em]" style={{fontFamily:'Pretendard, serif'}}>상태창</span>
          </a>
          <div className="hidden md:flex items-center gap-8">
            {links.map(l => (
              <a key={l.key} href={resolveHref(l)}
                 className={`text-sm transition ${current===l.key ? 'text-white' : 'text-neutral-300 hover:text-white'}`}>
                {l.label}
              </a>
            ))}
            <a href="download.html" className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-black text-sm font-semibold transition hover:brightness-110 ml-2"
              style={{background: accent}}>
              <I.Download size={14}/> 다운로드
            </a>
          </div>
          <button className="md:hidden text-white p-1" onClick={()=>setOpen(!open)} aria-label="메뉴">
            {open ? <I.X size={20}/> : <I.Menu size={20}/>}
          </button>
        </div>
        {open && (
          <div className="md:hidden bg-[#0a0a0f]/95 backdrop-blur-md border-t border-white/5">
            <div className="px-6 py-6 flex flex-col gap-4">
              {links.map(l => <a key={l.key} href={resolveHref(l)} className="text-sm text-neutral-300" onClick={()=>setOpen(false)}>{l.label}</a>)}
              <a href="download.html" className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-black text-sm font-semibold w-fit" style={{background: accent}}>
                <I.Download size={14}/> 다운로드
              </a>
            </div>
          </div>
        )}
      </nav>
      <div className="h-16"/>
    </>
  );
}

function Footer({ accent }) {
  // 세 번째 요소: 새 탭에서 열지 여부 (외부 링크는 새 탭 권장)
  const cols = [
    { title:'제품', links:[['가격','pricing.html'],['다운로드','download.html']] },
    { title:'회사', links:[['품스토리','https://poomstory.com', true],['블로그','https://blog.naver.com/writerstatus', true]] },
    { title:'커뮤니티', links:[['커뮤니티','#', true],['업데이트 노트','changelog.html']] },
    { title:'법적', links:[['이용약관','terms.html'],['개인정보 처리방침','privacy.html']] },
  ];
  return (
    <footer className="border-t border-white/5 bg-black">
      <div className="max-w-6xl mx-auto px-6 py-16">
        <div className="grid md:grid-cols-[1.2fr_1fr_1fr_1fr_1fr] gap-8 mb-12">
          <div>
            <div className="flex items-center gap-2.5 mb-4">
              <img src="assets/logo.png?v=2" alt="상태창" className="w-7 h-7 rounded-md" draggable="false"/>
              <span className="text-[17px] font-bold text-white tracking-[-0.02em]">상태창</span>
            </div>
            <p className="text-xs text-neutral-500 leading-relaxed max-w-[220px]">
              웹소설 작가를 위한 AI 창작 워크스페이스.
            </p>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <h4 className="text-xs uppercase tracking-wider text-neutral-500 mb-4">{col.title}</h4>
              <ul className="space-y-2">
                {col.links.map(([label, href, external]) => (
                  <li key={label}>
                    <a
                      href={href}
                      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                      className="text-sm text-neutral-400 hover:text-white transition"
                    >
                      {label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-8 border-t border-white/5 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div className="text-xs text-neutral-600 leading-relaxed">
            © 2026 Poomstory International Publishing Corp.<br/>
            Director: Kang, Donghyuk · Business No. 762687226 · Corp. Access No. 2026292462<br/>
            147 Rocky Vista Terr NW, Calgary AB T3G 5G7, Canada
          </div>
        </div>
      </div>
    </footer>
  );
}

// Reveal helper (공유)
function Reveal({ children, delay = 0, className = '' }) {
  const ref = React.useRef(null);
  chromeUseE(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className={`reveal ${className}`} style={{transitionDelay: `${delay}ms`}}>{children}</div>;
}

Object.assign(window, { Nav, Footer, Reveal });