// Site footer
function SiteFooter({ base = '' }) {
  const lp = (anchor) => base ? `${base}index.html${anchor}` : anchor;
  const sitemap = [
    [lp('#about'),     'About'],
    [`${base}concept/`, 'Concept'],
    [lp('#fields'),    'Fields'],
    [`${base}research/`, 'Research'],
    [lp('#profile'),   'Profile'],
    [lp('#works'),     'Works'],
    [lp('#contact'),   'Contact'],
  ];
  const connect = [
    ['#', 'Instagram'],
    ['#', 'Note'],
    ['#', 'X'],
    ['#', 'Email'],
  ];
  const info = [
    ['#', 'プライバシー'],
    ['#', '特定商取引法'],
    ['#', 'クレジット'],
  ];

  return (
    <footer className="site-ft">
      <div className="inner">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, alignItems: 'flex-start' }}>
          <div>
            <img src={`${base}assets/conen_logo.svg`} alt="CONEN" style={{ height: 28 }} />
            <div className="hd serif" style={{ marginTop: 32, fontSize: 22, lineHeight: 1.7, letterSpacing: '0.1em' }}>
              ひらく、つなぐ、<br />そなえる。
            </div>
          </div>
          {[
            ['SITEMAP', sitemap],
            ['CONNECT', connect],
            ['INFO', info],
          ].map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.16em' }}>{h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0' }}>
                {items.map(([href, t]) => (
                  <li key={t} style={{ padding: '8px 0', fontSize: 13 }}>
                    <a href={href} className="hot" style={{ color: 'var(--ink-soft)', textDecoration: 'none' }}>{t}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 80, paddingTop: 24, borderTop: '0.5px solid var(--rule-soft)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          <span>© 2026 CONEN — Ayane Nakahara</span>
          <span>Design for Relationships</span>
        </div>
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;