// site-access-cta-footer.jsx — Access map, final CTA strip, footer

function Access() {
  return (
    <section id="access" style={{
      background: BRAND.white, color: BRAND.ink, padding: '160px 80px',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '.85fr 1.15fr', gap: 64,
          alignItems: 'stretch',
        }}>
          {/* Info column */}
          <div style={{
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            paddingRight: 16,
          }}>
            <div>
              <Eyebrow>Access — 08</Eyebrow>
              <div style={{ marginTop: 28 }}>
                <SectionTitle en="Access." jp="所在地・アクセス" />
              </div>

              <dl style={{
                margin: '56px 0 0', display: 'grid',
                gridTemplateColumns: '100px 1fr', rowGap: 24, columnGap: 20,
                fontFamily: '"Noto Sans JP", sans-serif',
              }}>
                {[
                  ['Address', '住所', '東京都渋谷区神宮前◯-◯-◯\nYuHouse Building 3F'],
                  ['Station', '最寄駅', '東京メトロ「明治神宮前」駅 / 5番出口より徒歩4分'],
                  ['Hours',   '営業時間', '平日 10:00 – 19:00  /  土日祝 11:00 – 18:00'],
                  ['Closed',  '定休日',   '不定休 (講習スケジュールに準ずる)'],
                ].map(([en, jp, body]) => (
                  <React.Fragment key={en}>
                    <dt>
                      <div style={{
                        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                        fontSize: 13, letterSpacing: '.2em', color: BRAND.gold,
                      }}>{en}</div>
                      <div style={{
                        marginTop: 4, fontSize: 11, letterSpacing: '.18em',
                        color: BRAND.mute, fontFamily: '"Shippori Mincho", serif',
                      }}>{jp}</div>
                    </dt>
                    <dd style={{
                      margin: 0, fontSize: 14, lineHeight: 1.9, letterSpacing: '.04em',
                      color: BRAND.ink, whiteSpace: 'pre-line',
                    }}>{body}</dd>
                  </React.Fragment>
                ))}
              </dl>
            </div>

            <div style={{ marginTop: 56, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Btn href="#cta">お問い合わせ</Btn>
              <Btn href="#" variant="secondary" onLight={true}>Google Mapで開く</Btn>
            </div>
          </div>

          {/* Map placeholder */}
          <div style={{ position: 'relative', minHeight: 540, background: BRAND.beigeDeep }}>
            <svg viewBox="0 0 600 540" preserveAspectRatio="xMidYMid slice"
                 style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <pattern id="mapgrid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M40 0H0V40" fill="none" stroke="rgba(17,17,17,.06)" strokeWidth="1" />
                </pattern>
              </defs>
              <rect width="600" height="540" fill={BRAND.beigeDeep} />
              <rect width="600" height="540" fill="url(#mapgrid)" />
              {/* "roads" */}
              <path d="M-20 320 L620 220" stroke="rgba(17,17,17,.18)" strokeWidth="14" fill="none" />
              <path d="M120 -20 L380 580" stroke="rgba(17,17,17,.14)" strokeWidth="10" fill="none" />
              <path d="M-20 100 L640 480" stroke="rgba(17,17,17,.10)" strokeWidth="6" fill="none" />
              {/* blocks */}
              {[[80, 80, 120, 90], [240, 60, 130, 70], [430, 380, 140, 100], [70, 410, 100, 110]].map(([x, y, w, h], i) => (
                <rect key={i} x={x} y={y} width={w} height={h} fill="rgba(17,17,17,.05)" />
              ))}
              {/* pin */}
              <g transform="translate(330,280)">
                <circle r="56" fill="rgba(185,152,90,.18)" />
                <circle r="28" fill="rgba(185,152,90,.32)" />
                <circle r="9" fill={BRAND.gold} />
              </g>
            </svg>

            <div style={{
              position: 'absolute', top: 24, left: 24,
              padding: '8px 14px', background: BRAND.white,
              fontFamily: 'ui-monospace, monospace', fontSize: 10,
              letterSpacing: '.22em', color: BRAND.ink,
            }}>GOOGLE MAP — EMBED HERE</div>

            <div style={{
              position: 'absolute', bottom: 24, right: 24,
              padding: '14px 18px', background: BRAND.white,
              color: BRAND.ink, border: `1px solid ${BRAND.hair}`,
              maxWidth: 280,
            }}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                fontSize: 12, letterSpacing: '.22em', color: BRAND.pink,
              }}>YuHouse Academy</div>
              <div style={{
                marginTop: 6, fontFamily: '"Shippori Mincho", serif',
                fontSize: 13, letterSpacing: '.1em', lineHeight: 1.6,
              }}>渋谷区神宮前 ◯-◯-◯</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="cta" style={{
      position: 'relative', overflow: 'hidden', color: BRAND.ink,
      // Soft pink-gold gradient wash on cream — feels celebratory, not heavy.
      background: `
        radial-gradient(70% 60% at 0% 50%, ${BRAND.pinkSoft} 0%, transparent 65%),
        radial-gradient(60% 60% at 100% 100%, #F8EAD4 0%, transparent 60%),
        ${BRAND.cream}
      `,
      padding: '180px 80px',
    }}>
      {/* Decorative outsized italic word */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: '-3vw', top: 80,
        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
        fontWeight: 300, fontSize: 'clamp(160px, 22vw, 360px)',
        lineHeight: .9, letterSpacing: '-.03em', color: BRAND.pink,
        opacity: .12, pointerEvents: 'none', userSelect: 'none',
      }}>apply.</div>

      {/* Hairline frame */}
      <div style={{
        position: 'absolute', top: 64, left: 64, right: 64, bottom: 64,
        border: `1px solid ${BRAND.hair}`, pointerEvents: 'none',
      }} />

      {/* Corner accents */}
      <div style={{ position: 'absolute', top: 80, left: 80, width: 72, height: 1, background: BRAND.pink }} />
      <div style={{ position: 'absolute', top: 80, left: 80, width: 1, height: 72, background: BRAND.pink }} />
      <div style={{ position: 'absolute', bottom: 80, right: 80, width: 72, height: 1, background: BRAND.gold }} />
      <div style={{ position: 'absolute', bottom: 80, right: 80, width: 1, height: 72, background: BRAND.gold }} />

      <div style={{
        position: 'relative', maxWidth: 1100, margin: '0 auto', textAlign: 'center',
      }}>
        <Eyebrow color={BRAND.pink}>Apply — 09</Eyebrow>
        <h2 style={{
          margin: '40px 0 0',
          fontFamily: '"Cormorant Garamond", serif',
          fontWeight: 300, fontSize: 'clamp(56px, 7vw, 108px)', lineHeight: 1.0,
          color: BRAND.ink, letterSpacing: '-.01em',
        }}>
          For the next stage<br />
          of your <span style={{ fontStyle: 'italic', color: BRAND.pink }}>craft</span>
          <span style={{ color: BRAND.gold }}>.</span>
        </h2>
        <p style={{
          marginTop: 36,
          fontFamily: '"Shippori Mincho", serif',
          fontSize: 18, lineHeight: 2, letterSpacing: '.12em',
          color: BRAND.ink,
        }}>
          あなたの技術を、次のステージへ。<br />
          YuHouseアカデミーで、現場に活きる技術と表現力を。
        </p>
        <div style={{
          marginTop: 56, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap',
        }}>
          <Btn href="#courses">講習を見る</Btn>
          <Btn href="#" variant="secondary" onLight={true}>お問い合わせする</Btn>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const navCols = [
    ['Site', [
      ['TOP', '#top'],
      ['代表のご挨拶', '#message'],
      ['講師紹介', '#lecturers'],
      ['講習', '#courses'],
    ]],
    ['More', [
      ['Q&A', '#faq'],
      ['アクセス', '#access'],
      ['お問い合わせ', '#cta'],
      ['プライバシー', '#'],
    ]],
    ['Social', [
      ['Instagram', '#'],
      ['TikTok', '#'],
      ['YouTube', '#'],
      ['X', '#'],
    ]],
  ];
  return (
    <footer style={{
      background: '#fff', color: BRAND.ink,
      padding: '120px 80px 40px', position: 'relative', overflow: 'hidden',
    }}>
      {/* Decorative giant wordmark in the corner */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: -40, bottom: -80,
        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
        fontWeight: 300, fontSize: 'clamp(160px, 22vw, 360px)',
        lineHeight: .9, letterSpacing: '-.04em',
        color: BRAND.pinkSoft, opacity: .55,
        pointerEvents: 'none', userSelect: 'none',
      }}>YH.</div>

      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48,
          paddingBottom: 80, borderBottom: `1px solid ${BRAND.hair}`,
        }}>
          {/* Brand block */}
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif',
                fontWeight: 400, fontSize: 40, letterSpacing: '.06em',
                color: BRAND.ink,
              }}>YuHouse</div>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                fontSize: 20, letterSpacing: '.18em', color: BRAND.pink,
              }}>Academy</div>
            </div>
            <p style={{
              marginTop: 28, maxWidth: 320,
              fontFamily: '"Shippori Mincho", serif',
              fontSize: 14, lineHeight: 2.1, letterSpacing: '.08em',
              color: BRAND.ink,
            }}>
              技術で、表現の幅を広げる。<br />
              美容師のための、実践型ヘアアカデミー。
            </p>
            <div style={{
              marginTop: 32, paddingTop: 24,
              borderTop: `1px solid ${BRAND.hair}`,
              fontFamily: 'ui-monospace, monospace',
              fontSize: 11, letterSpacing: '.18em', color: BRAND.gold,
            }}>EST. TOKYO · MMXXVI</div>
          </div>

          {navCols.map(([title, items]) => (
            <div key={title}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                fontSize: 13, letterSpacing: '.26em',
                color: BRAND.pink, marginBottom: 22,
              }}>{title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0,
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                {items.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} style={{
                      fontFamily: '"Noto Sans JP", sans-serif',
                      fontSize: 13, letterSpacing: '.08em', color: BRAND.ink,
                      textDecoration: 'none', opacity: .85,
                    }}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 32, display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', flexWrap: 'wrap', gap: 16,
          fontFamily: 'ui-monospace, monospace', fontSize: 11,
          letterSpacing: '.18em', color: BRAND.mute,
        }}>
          <div>© 2026 YuHouse Academy. All rights reserved.</div>
          <div>Designed with care · 神宮前, Tokyo</div>
        </div>
      </div>
    </footer>
  );
}

window.Access = Access;
window.CTA = CTA;
window.Footer = Footer;