/* 사이트 공통 — 헤더, 푸터, 공유 SVG 아이콘 */

const NAV_ITEMS = [
  {label: '핵심 기능', href: '#features'},
  {label: '도입 근거', href: '#operations'},
  {label: '주요 화면', href: '#gallery'},
  {label: '비교', href: '#compare'},
  {label: '요금제', href: '#pricing'},
  {label: 'FAQ', href: '#faq'},
];

const BrandMark = ({size = 32}) => (
  <div className="brand-mark" style={{
    width: size, height: size,
    background: 'transparent',
    backgroundImage: 'url(assets/app-icon.png)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  }} aria-hidden="true" />
);

const SiteHeader = ({onContactClick}) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, {passive: true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="shell site-header-inner">
        <a href="#top" className="brand" aria-label="셔틀아이디 홈으로">
          <BrandMark />
          <span>셔틀아이디</span>
        </a>
        <nav className="nav" aria-label="주요 메뉴">
          {NAV_ITEMS.map(it => <a key={it.href} href={it.href}>{it.label}</a>)}
        </nav>
        <div className="header-cta">
          <a href="https://docs.shuttle.id" target="_blank" rel="noreferrer" className="btn btn-ghost btn-sm header-cta-guide">이용 가이드</a>
          <button type="button" className="btn btn-primary btn-sm" onClick={onContactClick}>
            무료 상담
          </button>
          <button type="button" className="nav-toggle" aria-label="메뉴 열기" aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {menuOpen
                ? <><line x1="6" y1="6" x2="18" y2="18" /><line x1="6" y1="18" x2="18" y2="6" /></>
                : <><line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="20" y2="17" /></>}
            </svg>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="mobile-nav">
          <div className="shell" style={{padding: '8px 20px 20px'}}>
            {NAV_ITEMS.map(it => (
              <a key={it.href} href={it.href} onClick={() => setMenuOpen(false)}
                style={{
                  display: 'block', padding: '14px 4px',
                  fontSize: 16, fontWeight: 600, color: 'var(--sid-ink)',
                  borderBottom: '1px solid var(--sid-line-soft)',
                }}>{it.label}</a>
            ))}
            <a href="https://docs.shuttle.id" target="_blank" rel="noreferrer" onClick={() => setMenuOpen(false)}
              style={{
                display: 'block', padding: '14px 4px',
                fontSize: 14, fontWeight: 600, color: 'var(--sid-fg-mid)',
              }}>이용 가이드 ↗</a>
          </div>
        </div>
      )}
    </header>
  );
};

/* shared bottom CTA strip just above footer */
const BottomCta = ({onContactClick}) => (
  <section style={{padding: '120px 0', background: '#0B1326', color: '#fff', textAlign: 'center'}} aria-label="도입 상담 시작">
    <div className="shell">
      <div className="eyebrow" style={{color: '#9DB6E8', marginBottom: 18}}>
        <span className="dot" style={{background: '#FFD300'}} />GET STARTED
      </div>
      <h2 style={{
        fontSize: 56, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.04em',
        margin: '0 0 18px', color: '#fff', textWrap: 'balance',
      }}>
        임직원 통근버스 자동화,<br />
        <span style={{color: '#FFD300'}}>스마트폰 한 대로 시작합니다.</span>
      </h2>
      <p style={{color: 'rgba(255,255,255,0.7)', fontSize: 18, margin: '0 auto 36px', maxWidth: 620, lineHeight: 1.6}}>
        1계정 200명 영구 무료. 별도 단말기·설치공사 없이 30분 안에 운영 시작.
      </p>
      <div className="row" style={{justifyContent: 'center', gap: 12}}>
        <button type="button" className="btn btn-lg btn-yellow" onClick={onContactClick}>
          무료 도입 상담 →
        </button>
        <a className="btn btn-lg btn-outline" style={{background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.3)'}}
           href="https://play.google.com/store/apps/details?id=com.schoolbus.shuttle.id" target="_blank" rel="noreferrer">
          Google Play
        </a>
        <a className="btn btn-lg btn-outline" style={{background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.3)'}}
           href="https://apps.apple.com/kr/app/id6758934194" target="_blank" rel="noreferrer">
          App Store
        </a>
      </div>
    </div>
  </section>
);

const SiteFooter = () => (
  <footer style={{padding: '64px 0 48px', background: '#fff', borderTop: '1px solid var(--sid-line)'}}>
    <div className="shell">
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 32,
        marginBottom: 48,
      }} className="footer-grid">
        <div>
          <div className="brand" style={{marginBottom: 14}}>
            <BrandMark size={28} />
            <span style={{fontSize: 16}}>셔틀아이디</span>
          </div>
          <div style={{fontSize: 13, color: 'var(--sid-fg-mid)', lineHeight: 1.7}}>
            (주)스쿨버스<br/>
            서울 강서구 공항대로 194 8층<br/>
            (마곡동, 퀸즈파크 12차)<br/>
            <a href="mailto:hi@ride.bz" style={{color: 'var(--sid-blue-link)'}}>hi@ride.bz</a>
          </div>
        </div>
        <FooterCol title="서비스" items={[
          {label: '셔틀아이디 (성인 통근)', href: 'https://shuttle.id'},
          {label: '라이드 RIDE (어린이 통학)', href: 'https://ride.bz'},
          {label: '스쿨버스 (안전 통학)', href: 'https://safeschoolbus.net'},
        ]} />
        <FooterCol title="이용 안내" items={[
          {label: '이용 가이드', href: 'https://docs.shuttle.id'},
          {label: '무료 도입 상담', href: 'https://schoolbus.channel.io/home'},
          {label: '공식 블로그', href: 'https://blog.naver.com/safeschoolbus'},
        ]} />
        <FooterCol title="앱 다운로드" items={[
          {label: 'Google Play', href: 'https://play.google.com/store/apps/details?id=com.schoolbus.shuttle.id'},
          {label: 'App Store', href: 'https://apps.apple.com/kr/app/id6758934194'},
        ]} />
        <FooterCol title="약관 · 정책" items={[
          {label: '서비스 이용약관', href: '/terms'},
          {label: '개인정보 처리방침', href: '/privacy', strong: true},
          {label: '위치기반서비스 이용약관', href: '/location-terms'},
          {label: '얼굴인식정보 처리방침', href: '/face-policy'},
        ]} />
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 24, borderTop: '1px solid var(--sid-line-soft)',
        fontSize: 12, color: 'var(--sid-fg-light)', flexWrap: 'wrap', gap: 12,
      }}>
        <div>© 2018–2026 (주)스쿨버스. All rights reserved.</div>
        <div style={{display: 'flex', gap: 16}}>
          <span>특허 7건 등록</span>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 1024px) {
        .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; }
      }
      @media (max-width: 720px) {
        .footer-grid { grid-template-columns: 1fr 1fr !important; }
      }
    `}</style>
  </footer>
);

const FooterCol = ({title, items}) => (
  <div>
    <div style={{fontSize: 13, fontWeight: 700, color: 'var(--sid-ink)', marginBottom: 14}}>{title}</div>
    <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
      {items.map(it => {
        const isExternal = it.href.startsWith('http') || it.href.startsWith('mailto');
        const baseColor = it.strong ? 'var(--sid-ink)' : 'var(--sid-fg-mid)';
        return (
          <a key={it.label} href={it.href}
             target={isExternal ? '_blank' : undefined}
             rel={isExternal ? 'noreferrer' : undefined}
             style={{fontSize: 13, color: baseColor, fontWeight: it.strong ? 700 : 400}}
             onMouseOver={e => e.currentTarget.style.color = 'var(--sid-blue-link)'}
             onMouseOut={e => e.currentTarget.style.color = baseColor}
          >{it.label}</a>
        );
      })}
    </div>
  </div>
);

/* Contact modal — minimal, shared */
const ContactModal = ({open, onClose}) => {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(11,19,38,0.55)',
      backdropFilter: 'blur(6px)', display: 'grid', placeItems: 'center',
      zIndex: 100, padding: 20,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: '#fff', borderRadius: 24, maxWidth: 480, width: '100%',
        padding: 36, boxShadow: 'var(--site-shadow-lifted)',
      }}>
        <div className="eyebrow" style={{marginBottom: 12}}><span className="dot"/>FREE CONSULTATION</div>
        <h3 style={{fontSize: 24, fontWeight: 800, color: 'var(--sid-ink)', margin: '0 0 8px', letterSpacing: '-0.03em'}}>무료 도입 상담</h3>
        <p style={{fontSize: 14, color: 'var(--sid-fg-mid)', margin: '0 0 24px', lineHeight: 1.6}}>
          운영 규모에 맞춘 맞춤 자료를 보내드립니다. 영업일 기준 24시간 내 회신.
        </p>
        <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
          <a className="btn btn-primary btn-lg" style={{width: '100%'}} href="https://schoolbus.channel.io/home" target="_blank" rel="noreferrer">
            상담 신청하기 (채널톡)
          </a>
          <a className="btn btn-outline btn-lg" style={{width: '100%'}} href="mailto:hi@ride.bz">
            이메일로 문의: hi@ride.bz
          </a>
        </div>
        <button onClick={onClose} style={{
          position: 'absolute', top: 18, right: 22, background: 'transparent', border: 'none',
          cursor: 'pointer', color: 'var(--sid-fg-light)', fontSize: 22,
        }} aria-label="닫기">×</button>
      </div>
    </div>
  );
};

Object.assign(window, {SiteHeader, SiteFooter, BottomCta, ContactModal, BrandMark, FooterCol});