// PC Footer — wide, multi-column.

const FooterPC = () => (
  <footer style={{
    padding: '60px 0 40px',
    borderTop: '1px solid rgba(203, 168, 104, 0.2)',
    background: 'rgba(255, 255, 255, 0.4)',
  }}>
    <div className="container" style={{
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 60, alignItems: 'start',
    }}>
      {/* Brand */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
          <img src="assets/mirise-logo.png" alt="Mirise" style={{
            width: 48, height: 48, borderRadius: '50%',
            boxShadow: '0 6px 14px -8px rgba(150, 100, 130, 0.4)',
          }}/>
          <div>
            <div style={{
              fontFamily: 'var(--latin)', fontStyle: 'italic',
              fontSize: 22, color: 'var(--ink)',
              letterSpacing: '0.2em',
            }}>Mirise</div>
            <div style={{
              fontFamily: 'var(--title-font)',
              fontSize: 10, color: 'var(--ink-mute)',
              letterSpacing: '0.4em',
            }}>ミライズ</div>
          </div>
        </div>
        <p style={{
          fontSize: 12, color: 'var(--ink-soft)',
          letterSpacing: '0.06em', lineHeight: 2,
          maxWidth: 280, margin: 0,
        }}>
          占いで描く、あなたの未来図。<br/>
          毎日の迷いに、前向きなヒントを届ける占いアプリです。
        </p>
      </div>

      {/* Link columns */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, minmax(180px, 1fr))',
        gap: 32,
      }}>
        <FooterCol title="アプリ" links={[
          { label: 'できること', href: '#features' },
          { label: '3 STEPS', href: '#steps' },
          { label: '画面一覧', href: '#gallery' },
          { label: '占い師に相談', href: '#consult' },
        ]}/>
        <FooterCol title="法的事項" links={[
          { label: '利用規約', href: 'legal/terms.html' },
          { label: 'プライバシーポリシー', href: 'legal/privacy.html' },
          { label: '特定商取引法に基づく表記', href: 'legal/tokusho.html' },
        ]}/>
      </div>
    </div>

    <div className="container" style={{
      marginTop: 48, paddingTop: 24,
      borderTop: '1px solid rgba(203, 168, 104, 0.2)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontSize: 11, color: 'var(--ink-mute)',
      letterSpacing: '0.18em',
    }}>
      <div>© 2026 Mirise · All rights reserved.</div>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
        <Star4 size={8} color="var(--gold)"/>
        <span>Coming Soon</span>
        <Star4 size={8} color="var(--gold)"/>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, links }) => (
  <div>
    <div style={{
      fontFamily: 'var(--latin)',
      fontSize: 11, color: 'var(--gold)',
      letterSpacing: '0.32em', marginBottom: 14,
      textTransform: 'uppercase',
    }}>{title}</div>
    <ul style={{
      listStyle: 'none', padding: 0, margin: 0,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      {links.map((l) => {
        const item = typeof l === 'string' ? { label: l, href: '#' } : l;
        return (
          <li key={item.label}>
            <a href={item.href} style={{
              color: 'var(--ink-soft)',
              textDecoration: 'none',
              fontFamily: 'var(--title-font)',
              fontSize: 12.5, letterSpacing: '0.1em',
            }}>{item.label}</a>
          </li>
        );
      })}
    </ul>
  </div>
);

window.FooterPC = FooterPC;