// Footer

function Footer({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <footer style={{
      padding: '60px 0 40px',
      borderTop: '1px solid var(--line)',
      background: '#020202',
    }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 0.8fr', gap: 40,
          paddingBottom: 48, borderBottom: '1px solid var(--line)',
        }} className="footer-grid">

          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <DigmeMark size={36} />
              <span style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 22, letterSpacing: '-0.03em' }}>DIGME</span>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.7, color: 'rgba(245,243,238,0.5)', maxWidth: 320 }}>
              プレイリストでつながる、音楽SNS。<br />
              聴くのは、いつもの Spotify / Apple Music。
            </p>
          </div>

          <FooterCol title="Product" items={[
            ['機能', '#features'],
            ['使い方', '#howto'],
            ['ユーザーの声', '#voices'],
            ['FAQ', '#faq'],
          ]} />
          <FooterCol title="Download" items={[
            ['App Store', APP_STORE_URL],
            ['Android (近日)', '#'],
            ['Web (近日)', '#'],
          ]} />
          <FooterCol title="Legal" items={[
            ['利用規約', '#'],
            ['プライバシーポリシー', '#'],
            ['特定商取引法に基づく表記', '#'],
            ['お問い合わせ', '#'],
          ]} />
          <FooterCol title="Company" items={[
            ['会社概要', 'https://www.karnelsclub.com/'],
          ]} />
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 32, gap: 16, flexWrap: 'wrap',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          color: 'rgba(245,243,238,0.4)', letterSpacing: '0.04em',
        }}>
          <div>© 2026 DIGME. ALL RIGHTS RESERVED.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span>v1.0.0</span>
            <span>BUILT IN TOKYO</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1ED760', boxShadow: '0 0 8px #1ED760' }}></span>
              ALL SYSTEMS OPERATIONAL
            </span>
          </div>
        </div>

        <style>{`
          @media (max-width: 1000px) {
            .footer-grid { grid-template-columns: 1.2fr 1fr 1fr !important; }
          }
          @media (max-width: 640px) {
            .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }
          }
          @media (max-width: 400px) {
            .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'rgba(245,243,238,0.5)', marginBottom: 16,
      }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(([label, href]) => (
          <li key={label}>
            <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noopener"
               style={{ fontSize: 14, color: 'rgba(245,243,238,0.85)', transition: 'color 0.2s' }}
               onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
               onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(245,243,238,0.85)'}
            >{label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;