// Shared navigation & footer
const { useState } = React;

const NAV_ITEMS = [
  { label: 'ホーム', href: 'index.html' },
  { label: 'プロフィール', href: 'about.html' },
  { label: 'サービス', href: 'services.html' },
  { label: 'まちの自然体験ラボ', href: 'community.html' },
  { label: '実績・活動', href: 'activities.html' },
  { label: 'ブログ', href: 'blog.html' },
  { label: 'ギャラリー', href: 'gallery.html' },
];

const Nav = ({ variant = 'notebook' }) => {
  const [open, setOpen] = useState(false);

  const isNotebook = variant === 'notebook';
  const isCanopy = variant === 'canopy';
  const isMeadow = variant === 'meadow';

  return (
    <header className={`nav nav-${variant}`}>
      <div className="nav-inner container">
        <a href="#home" className="nav-brand">
          <span className="nav-mark" aria-hidden>
            <LeafSprig size={32} style={{color: 'var(--forest-700)'}} />
          </span>
          <span className="nav-brand-text">
            <span className="nav-brand-sub serif">Urban Nature Lab</span>
            <span className="nav-brand-main">身近な自然体験ラボ</span>
          </span>
        </a>
        <nav className="nav-links" aria-label="primary">
          {NAV_ITEMS.map(i => (
            <a key={i.label} href={i.href} className="nav-link">{i.label}</a>
          ))}
        </nav>
        <a href="contact.html" className="btn btn-primary nav-cta">お問い合わせ</a>
        <button className="nav-burger" aria-label="menu" onClick={() => setOpen(!open)}>
          <span/><span/><span/>
        </button>
      </div>
      {open && (
        <div className="nav-mobile">
          {NAV_ITEMS.map(i => (
            <a key={i.label} href={i.href} onClick={() => setOpen(false)}>{i.label}</a>
          ))}
          <a href="contact.html" className="btn btn-primary" style={{marginTop:12}}>お問い合わせ</a>
        </div>
      )}
    </header>
  );
};

const Footer = ({ variant = 'notebook' }) => (
  <footer className={`site-foot foot-${variant}`}>
    <div className="container foot-grid">
      <div className="foot-brand">
        <div className="foot-brand-row">
          <LeafSprig size={40} style={{color: 'var(--forest-300)'}} />
          <div>
            <div className="serif foot-brand-sub">Urban Nature Lab</div>
            <div className="foot-brand-main">身近な自然体験ラボ</div>
          </div>
        </div>
        <p className="foot-tagline">
          まちなかの自然をフィールドに、<br/>
          生き物たちが教えてくれる驚きや感動を<br/>
          多くの人へ届けるプロジェクト。
        </p>
      </div>
      <div className="foot-col">
        <h4 className="foot-h">サービス</h4>
        <a href="services.html">イベント／ワークショップ</a>
        <a href="services.html">環境コンサルタント</a>
        <a href="services.html">講演・出張授業</a>
        <a href="services.html">昆虫標本</a>
      </div>
      <div className="foot-col">
        <h4 className="foot-h">活動</h4>
        <a href="community.html">まちの自然体験ラボ</a>
        <a href="activities.html">実績・活動</a>
        <a href="blog.html">ブログ</a>
        <a href="gallery.html">ギャラリー</a>
      </div>
      <div className="foot-col">
        <h4 className="foot-h">コンタクト</h4>
        <a href="contact.html">お問い合わせ</a>
        <a href="#">プライバシーポリシー</a>
        <a href="#">SNS</a>
      </div>
    </div>
    <div className="foot-bottom container">
      <DashedLeafDivider width={200} style={{color: 'var(--forest-300)'}} />
      <div className="foot-copy">© 2025 身近な自然体験ラボ</div>
    </div>
  </footer>
);

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