const Eyebrow = ({ children }) => (
  <div className="eyebrow"><span className="line"/><span className="dot"/><span>{children}</span></div>
);

const Nav = () => (
  <div className="nav">
    <div className="wrap nav-inner">
      <a href="/" className="brand" aria-label="AI RPOパートナー">
        <img src="/assets/logo.png" alt="AI RPOパートナー｜TechSuite株式会社" className="brand-logo brand-logo-full"/>
        <img src="/assets/logo-mark.png" alt="AI RPOパートナー" className="brand-logo brand-logo-mark"/>
      </a>
      <div className="nav-links">
        <a href="/#problems">Why Now</a>
        <a href="/#about">About</a>
        <a href="/#scope">Scope</a>
        <a href="/#why">Why Us</a>
        <a href="/#cases">Cases</a>
        <a href="/#faq">FAQ</a>
      </div>
      <div className="nav-cta">
        <a href="/contact/" className="btn btn-ghost btn-sm">資料ダウンロード</a>
        <a href="/meeting/" className="btn btn-primary btn-sm">無料相談 <Ic.arrow/></a>
      </div>
    </div>
  </div>
);

const Footer = () => (
  <footer>
    <div className="wrap foot-inner">
      <div>© 2026 TechSuite株式会社 — AI RPOパートナー</div>
      <div className="foot-links">
        <a href="https://techsuite.co.jp/privacy-policy" target="_blank" rel="noopener">プライバシーポリシー</a>
        <a href="https://techsuite.co.jp/" target="_blank" rel="noopener">運営企業</a>
      </div>
    </div>
  </footer>
);

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