/* global React */
const { useState, useEffect, useRef } = React;

function Sidebar() {
  return (
    <aside className="sidebar">
      <div className="crest mincho">姉</div>
      <div className="vlabel">ハレの日姉さん</div>
      <div className="vmono">EST · 2019</div>
    </aside>
  );
}

function TopNav({ active, onNav }) {
  const items = [
    { id: 'home', label: 'TOP' },
    { id: 'about', label: 'ABOUT' },
    { id: 'services', label: 'SERVICE' },
    { id: 'gallery', label: 'GALLERY' },
    { id: 'blog', label: 'JOURNAL' },
    { id: 'contact', label: 'CONTACT' },
  ];
  return (
    <header className="topnav">
      <div className="brand">
        ハレの日姉さん
        <span className="small">HARE-NO-HI NEESAN</span>
      </div>
      <nav>
        {items.map(it => (
          <a
            key={it.id}
            href={`#${it.id}`}
            className={active === it.id ? 'active' : ''}
            onClick={e => { e.preventDefault(); onNav(it.id); }}
          >{it.label}</a>
        ))}
      </nav>
      <button className="cta" onClick={() => onNav('contact')}>ご予約 ／ RESERVE</button>
    </header>
  );
}

function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="inner">
        <div className="brand-block">
          <div className="logo">ハレの日姉さん</div>
          <p>着物って、もっと気軽でいい。<br/>ハレの日を、一緒に楽しむための着付けを。</p>
        </div>
        <div className="col">
          <h5>MENU</h5>
          <a href="#about" onClick={e => { e.preventDefault(); onNav('about'); }}>自己紹介</a>
          <a href="#services" onClick={e => { e.preventDefault(); onNav('services'); }}>サービス紹介</a>
          <a href="#gallery" onClick={e => { e.preventDefault(); onNav('gallery'); }}>ギャラリー</a>
          <a href="#blog" onClick={e => { e.preventDefault(); onNav('blog'); }}>ブログ</a>
        </div>
        <div className="col">
          <h5>SERVICE</h5>
          <a href="#services">結婚式の着付け</a>
          <a href="#services">七五三の着付け</a>
          <a href="#services">入学・卒業式</a>
          <a href="#services">小物相談</a>
        </div>
        <div className="col">
          <h5>CONTACT</h5>
          <a href="#contact" onClick={e => { e.preventDefault(); onNav('contact'); }}>ご予約・お問い合わせ</a>
          <a href="#">よくあるご質問</a>
          <a href="#">対応エリア</a>
          <a href="#" style={{opacity:0.5}}>オンラインショップ（準備中）</a>
        </div>
      </div>
      <div className="legal">
        <div>© 2026 HARE-NO-HI NEESAN. ALL RIGHTS RESERVED.</div>
        <div>SITE BY ／ KIMONO STUDIO</div>
      </div>
    </footer>
  );
}

window.Sidebar = Sidebar;
window.TopNav = TopNav;
window.Footer = Footer;