const Footer = () => (
  <footer style={{
    padding: '40px 28px 60px',
    textAlign: 'center',
    borderTop: '1px solid rgba(203, 168, 104, 0.2)',
    background: 'rgba(255, 255, 255, 0.35)',
  }}>
    <img src="assets/mirise-logo.png" alt="Mirise" style={{
      width: 56, height: 56, borderRadius: '50%', display: 'block',
      margin: '0 auto 14px',
      boxShadow: '0 6px 14px -8px rgba(150, 100, 130, 0.4)',
    }}/>
    <div style={{
      fontFamily: 'var(--latin)', fontStyle: 'italic',
      fontSize: 22, color: 'var(--ink)',
      letterSpacing: '0.2em', marginBottom: 4,
    }}>Mirise</div>
    <div style={{
      fontFamily: 'var(--title-font)',
      fontSize: 10, color: 'var(--ink-mute)',
      letterSpacing: '0.5em', paddingLeft: '0.5em',
    }}>ミライズ</div>

    <div className="divider-gold" style={{ marginTop: 24, marginBottom: 24 }}>
      <Star4 size={8} color="var(--gold)"/>
    </div>

    <div style={{
      display: 'flex', justifyContent: 'center', gap: 22,
      fontSize: 11, color: 'var(--ink-soft)',
      letterSpacing: '0.16em', marginBottom: 18,
      flexWrap: 'wrap',
    }}>
      <a href="legal/terms.html" style={linkStyle}>利用規約</a>
      <a href="legal/privacy.html" style={linkStyle}>プライバシーポリシー</a>
      <a href="legal/tokusho.html" style={linkStyle}>特定商取引法に基づく表記</a>
    </div>

    <div style={{
      fontSize: 10, color: 'var(--ink-mute)',
      letterSpacing: '0.16em',
    }}>© 2026 Mirise</div>
  </footer>
);

const linkStyle = {
  color: 'var(--ink-soft)',
  textDecoration: 'none',
  fontFamily: 'var(--title-font)',
};

window.Footer = Footer;