// DANOVI — 내비 · 히어로 · 푸터 (카피 전면 새로 작성)
const { useState, useEffect, useRef } = React;

const ASSET = p => { try { return new URL(p, document.baseURI).href; } catch (e) { return p; } };

/* 등장 모션 — 기본 상태가 "보이는" 상태입니다. 애니메이션은 덧붙는 것일 뿐,
   실행되지 않거나 멈춰도 콘텐츠가 사라지지 않습니다. */
function Reveal({ children, className = '', as: Tag = 'div', delay = 0, ...rest }) {
  const ref = useRef(null);
  const [state, setState] = useState('rest');
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let t = 0;
    const show = () => setState('in');
    try {
      if (typeof IntersectionObserver === 'undefined') return;
      if (el.getBoundingClientRect().top <= innerHeight * 0.9) return;
      setState('pre');
      const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { show(); io.disconnect(); } }), { threshold: .1 });
      io.observe(el);
      t = setTimeout(show, 1200);
      return () => { io.disconnect(); clearTimeout(t); };
    } catch (e) { setState('rest'); }
  }, []);
  const cls = 'dn-reveal' + (state === 'pre' ? ' dn-pre' : '') + (state === 'in' ? ' in' : '') + (className ? ' ' + className : '');
  return <Tag ref={ref} className={cls} style={{ transitionDelay: delay + 'ms' }} {...rest}>{children}</Tag>;
}

function DnSecHead({ title, tags, moreLabel, moreHref }) {
  return (
    <div className="dn-sec-head">
      <div>
        <h2>{title}</h2>
        {tags && <div className="dn-sec-tags">{tags}</div>}
      </div>
      {moreLabel && <a href={moreHref || '#'} className="dn-more">{moreLabel} <span className="arw">→</span></a>}
    </div>
  );
}

const KAKAO = 'https://pf.kakao.com/_kSurX/chat';

function KakaoIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 3C6.48 3 2 6.48 2 10.8c0 2.82 1.86 5.28 4.67 6.66-.2.77-.73 2.78-.83 3.22-.13.53.19.53.4.39.17-.11 2.67-1.81 3.74-2.54.66.09 1.34.15 2.02.15 5.52 0 10-3.48 10-7.88C22 6.48 17.52 3 12 3z"/>
    </svg>
  );
}

/* 카카오톡 문의 — 헤더 · 홈 · 소개 · 전자책에서 같은 버튼을 씁니다. */
function KakaoButton({ children = '카카오톡으로 문의', className = '', sm }) {
  return (
    <a className={'dn-kao' + (sm ? ' sm' : '') + (className ? ' ' + className : '')}
       href={KAKAO} target="_blank" rel="noreferrer">
      <KakaoIcon />{children}
    </a>
  );
}

function DnButton({ variant = 'solid', arrow, children, onClick, href }) {
  const ext = href && /^https?:/.test(href);
  return (
    <a
      href={href || '#'}
      target={ext ? '_blank' : undefined}
      rel={ext ? 'noreferrer' : undefined}
      className={'dn-btn ' + variant}
      onClick={e => { if (!href) e.preventDefault(); onClick && onClick(); }}
    >
      {children}{arrow && <span className="arw">→</span>}
    </a>
  );
}

function DnHeader() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const barRef = useRef(null);
  useEffect(() => {
    const f = () => {
      setScrolled(window.scrollY > 8);
      const max = document.documentElement.scrollHeight - innerHeight;
      if (barRef.current) barRef.current.style.transform = 'scaleX(' + (max > 0 ? Math.min(1, scrollY / max) : 0) + ')';
    };
    f();
    addEventListener('scroll', f, { passive: true });
    addEventListener('resize', f);
    return () => { removeEventListener('scroll', f); removeEventListener('resize', f); };
  }, []);

  // 작업 = 갤러리(works.html) · 전자책 = ebook.html · 소개 = 홈 #about
  const items = [['work', '작업'], ['ebook', '전자책'], ['about', '소개']];
  const page = /works\.html/.test(location.pathname) ? 'work'
             : /ebook\.html/.test(location.pathname) ? 'ebook'
             : /about\.html/.test(location.pathname) ? 'about' : '';
  const here = page || (/index\.html$|\/$/.test(location.pathname) ? '' : '');
  const go = k => {
    setOpen(false);
    if (k === 'work')  { location.href = './works.html'; return; }
    if (k === 'ebook') { location.href = './ebook.html'; return; }
    if (k === 'about') { location.href = './about.html'; return; }
    const el = document.getElementById(k);
    if (!el) { location.href = './index.html#' + k; return; }
    window.scrollTo(0, el.offsetTop - 64);
  };

  return (
    <header className={'dn-header' + (scrolled ? ' scrolled' : '')}>
      <div className="dn-wrap dn-nav">
        <a href="./index.html" className="dn-logo" onClick={e => { if (document.getElementById('work')) { e.preventDefault(); setOpen(false); window.scrollTo(0, 0); } }}>
          <img src={ASSET('assets/danovi-logo.png')} alt="" />
          <span>DANOVI</span>
        </a>
        <nav className={'dn-menu' + (open ? ' open' : '')}>
          {items.map(([k, l]) => (
            <a key={k} href={'#' + k} className={here === k ? 'on' : undefined} onClick={e => { e.preventDefault(); go(k); }}>{l}</a>
          ))}
        </nav>
        <a className="dn-nav-cta" href={KAKAO} target="_blank" rel="noreferrer"><KakaoIcon />문의</a>
        <button className="dn-burger" aria-label="메뉴" onClick={() => setOpen(!open)}><span /><span /><span /></button>
      </div>
      <div className="dn-progress" ref={barRef} />
    </header>
  );
}



function DnFooter() {
  return (
    <footer className="dn-footer">
      <div className="dn-wrap dn-foot">
        <div className="dn-foot-main">
          <span className="dn-foot-brand">DANOVI</span>
          <span>대표 최다은 · 사업자등록번호 464-27-01966</span>
        </div>
        <div className="dn-foot-sub">
          <span>danovi.co.kr</span>
          <span>© 2026</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { DnButton, DnHeader, DnFooter, Reveal, DnSecHead, ASSET, KakaoButton, KakaoIcon, KAKAO });