// Section 12 — Footer (refresh / light variant)
// Off-white field, sky bloom decoration, navy text. Mega type kept but as
// pale-ink wash. The light footer pairs with the now-light Contact above.
const FooterSection = () => {
  const linkGroups = [
  {
    title: 'APPROACH',
    jp: 'アプローチ',
    items: [
    { label: '業務可視化・AX/DX基盤構築', href: 'pages/approach.html#consulting' },
    { label: '生成AIによる業務効率化支援', href: 'pages/approach.html#custom' }]

  },
  {
    title: 'COMPANY',
    jp: '会社情報',
    items: [
    { label: 'ミッション', href: 'pages/company.html#mission' },
    { label: '会社概要', href: 'pages/company.html#profile' },
    { label: 'メンバー', href: 'pages/company.html#team' }]

  },
  {
    title: 'CONTACT',
    jp: 'お問い合わせ',
    items: [
    { label: 'お問い合わせ', href: 'pages/contact.html' }]

  }];


  return (
    <footer
      className="ej-root hero-fullbleed"
      style={{
        width: '100vw',
        padding: '120px 64px 40px',
        background: 'var(--sky-soft)',
        color: 'var(--ink)',
        position: 'relative',
        overflow: 'hidden'
      }}>
      
      {/* sky bloom */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background:
          'radial-gradient(ellipse 50% 60% at 95% 0%, rgba(186,230,253,0.7), transparent 60%),' +
          ' radial-gradient(ellipse 40% 40% at 5% 100%, rgba(125,211,252,0.18), transparent 60%)',
          pointerEvents: 'none'
        }}>
      </div>

      <div style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', width: '100%' }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
            gap: 56,
            paddingBottom: 80,
            borderBottom: '1px solid var(--rule)'
          }}>
          
          {/* Logo */}
          <div>
            <img
              src="assets/exer-logo.png"
              alt="Exer Japan"
              style={{ height: 80, width: 'auto', display: 'block' }} />
            

            <p className="ej-jp" style={{
              marginTop: 28, fontSize: 14, lineHeight: 1.95, color: 'var(--ink)', maxWidth: 360
            }}>
              人手不足で業務が回らない時代に、生成AIで業務効率化をまるごと支援する。
            </p>

            <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 36, letterSpacing: '0.12em' }}>
              ／ TOKYO · FOUNDED 2025
            </div>
          </div>

          {linkGroups.map((g, i) =>
          <div key={i}>
              <div className="ej-mono" style={{ fontSize: 12, color: 'var(--teal)', marginBottom: 18, letterSpacing: '0.15em' }}>
                {g.title}
              </div>
              <div className="ej-jp" style={{ fontSize: 11, color: 'var(--ink-60)', marginBottom: 14, letterSpacing: '0.06em' }}>
                {g.jp}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
                {g.items.map((it, ii) =>
              <li key={ii}>
                    <a
                  href={it.href}
                  className="ej-jp"
                  style={{
                    fontSize: 13,
                    color: 'var(--navy)',
                    textDecoration: 'none',
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 8
                  }}>
                  
                      {it.label}
                      <span style={{ color: 'var(--ink-40)', fontSize: 11 }}>→</span>
                    </a>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>

        {/* mega type — pale ink wash */}
        <div
          aria-hidden
          className="ej-en"
          style={{
            fontSize: 220,
            fontWeight: 400,
            color: 'rgba(11, 62, 111, 0.07)',
            letterSpacing: '-0.045em',
            lineHeight: 0.85,
            margin: '60px 0 40px',
            whiteSpace: 'nowrap',
            textTransform: 'uppercase'
          }}>
          
          EXER · JAPAN
        </div>

        {/* legal row */}
        <div
          style={{
            paddingTop: 28,
            borderTop: '1px solid var(--rule)',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
          
          <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', letterSpacing: '0.1em' }}>
            © 2026 EXER JAPAN, INC. · ALL RIGHTS RESERVED.
          </div>
          <div style={{ display: 'flex', gap: 28 }}>
            {['プライバシーポリシー', '利用規約', 'Sitemap'].map((l, i) =>
            <a
              key={i}
              href="#"
              className="ej-mono"
              style={{ fontSize: 12, color: 'var(--ink-60)', textDecoration: 'none', letterSpacing: '0.1em' }}>
              
                {l}
              </a>
            )}
          </div>
        </div>
      </div>
    </footer>);

};

window.FooterSection = FooterSection;