// SiteFooter — ページ最下部。Heroの内側ではなく、全体の締め。

function SiteFooter() {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const rootStyle = isMobile ? { ...siteFooterStyles.root, padding: '32px 20px 36px' } : siteFooterStyles.root;
  const innerStyle = isMobile
    ? { ...siteFooterStyles.inner, gridTemplateColumns: '1fr', gap: 20, justifyItems: 'center', textAlign: 'center' }
    : siteFooterStyles.inner;
  const navStyle = isMobile ? { ...siteFooterStyles.nav, gap: 20, flexWrap: 'wrap', justifyContent: 'center' } : siteFooterStyles.nav;
  const copyStyle = isMobile ? { ...siteFooterStyles.copy, textAlign: 'center' } : siteFooterStyles.copy;

  return (
    <footer style={rootStyle}>
      <div style={innerStyle}>
        <div style={siteFooterStyles.left}>
          <div style={siteFooterStyles.wordmark}>Proteinus</div>
        </div>

        <nav style={navStyle}>
          <a href="#work"    style={siteFooterStyles.link}>開発実績</a>
          <a href="#about"   style={siteFooterStyles.link}>会社概要</a>
          <a href="https://docs.google.com/forms/d/e/1FAIpQLSf6gk0eGogJyG035JNeN9zrht2BWoiQmVfvmZCT6yr3meWJnw/viewform" target="_blank" rel="noopener" style={siteFooterStyles.link}>お問い合わせ</a>
        </nav>

        <div style={copyStyle}>© 2026 Proteinus</div>
      </div>
    </footer>
  );
}

const siteFooterStyles = {
  root: {
    background: 'var(--paper)',
    padding: '44px 44px 48px',
    fontFamily: 'var(--sans)',
    color: 'var(--ink-70)',
  },
  inner: {
    maxWidth: 1100, margin: '0 auto',
    display: 'grid',
    gridTemplateColumns: '1fr auto 1fr',
    alignItems: 'center',
    gap: 40,
  },
  left: { display: 'flex', flexDirection: 'column', gap: 6 },
  wordmark: {
    fontFamily: '"Newsreader", serif',
    fontSize: 20,
    fontWeight: 500,
    color: 'var(--ink)',
    letterSpacing: 0.2,
  },
  legal: {
    fontSize: 12,
    color: 'var(--ink-55)',
    fontFamily: 'var(--serif-jp)',
  },
  nav: { display: 'flex', gap: 28 },
  link: {
    color: 'var(--ink-75)',
    textDecoration: 'none',
    fontSize: 13,
    letterSpacing: 0.3,
    fontFamily: 'var(--serif-jp)',
  },
  copy: {
    textAlign: 'right',
    fontSize: 11,
    color: 'var(--ink-45)',
    letterSpacing: 0.6,
    fontFamily: 'var(--mono)',
  },
};

window.SiteFooter = SiteFooter;