// site-message.jsx — Message from the representative

function Message() {
  return (
    <section id="message" style={{
      background: BRAND.beige, color: BRAND.ink,
      padding: '160px 80px', position: 'relative',
    }}>
      {/* Faint outsized serif watermark */}
      <div style={{
        position: 'absolute', top: 80, right: 80,
        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
        fontWeight: 300, fontSize: 220, lineHeight: 1,
        color: 'rgba(185,152,90,.10)', letterSpacing: '-.02em',
        pointerEvents: 'none', userSelect: 'none',
      }}>Message.</div>

      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '.85fr 1.15fr',
          gap: 80, alignItems: 'stretch',
        }}>
          {/* Portrait — slow Ken-Burns drift within the frame, bottom-aligned */}
          <div style={{
            position: 'relative', overflow: 'hidden', minHeight: 520,
            backgroundColor: '#1a1a1a',
          }}>
            <img src="assets/img/imai_prof.png" alt="今井 勇 — YuHouseアカデミー代表"
              style={{
                position: 'absolute', top: 0, left: 0,
                width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top',
                transformOrigin: 'center center',
                animation: 'founderDrift 24s ease-in-out infinite alternate',
                willChange: 'transform',
              }} />
            <div style={{
              position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 1,
              padding: '16px 18px',
              display: 'flex', justifyContent: 'space-between',
              background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%)',
              fontFamily: 'ui-monospace, monospace',
              fontSize: 10, letterSpacing: '.22em', color: 'rgba(255,255,255,.85)',
            }}>
              <span>YUHOUSE / FOUNDER</span>
              <span>PORTRAIT — 02</span>
            </div>
          </div>

          {/* Letter card */}
          <div style={{
            background: BRAND.white, padding: '64px 64px 56px',
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0,
              width: 56, height: 1, background: BRAND.gold,
            }} />
            <Eyebrow>Message — 03</Eyebrow>
            <div style={{ marginTop: 28 }}>
              <SectionTitle en="Founder's Note" jp="代表のご挨拶" />
            </div>

            <div style={{ marginTop: 48 }}>
              <p style={{
                fontFamily: '"Shippori Mincho", serif',
                fontSize: 18, lineHeight: 2.1, letterSpacing: '.06em',
                color: BRAND.ink, marginBottom: 28, textWrap: 'pretty',
              }}>
                美容師という仕事は、髪を整えるだけでなく、<br />
                その人の表現を形にする仕事です。
              </p>
              <p style={{
                fontFamily: '"Noto Sans JP", sans-serif',
                fontSize: 14, lineHeight: 2.1, letterSpacing: '.04em',
                color: BRAND.ink, marginBottom: 20, textWrap: 'pretty',
              }}>
                YuHouseアカデミーは、現場で本当に役立つ技術を、第一線の講師陣から直接学べる場所として開講しました。シールエクステからブラックヘアー、カラー、カットまで、確かな指導と実践を通して、受講生一人ひとりの「表現する力」を育てます。
              </p>
              <p style={{
                fontFamily: '"Noto Sans JP", sans-serif',
                fontSize: 14, lineHeight: 2.1, letterSpacing: '.04em',
                color: BRAND.ink, marginBottom: 20, textWrap: 'pretty',
              }}>
                ひとつの技術を深く掘り下げること。それを自分のサロンワークに翻訳すること。アカデミーで過ごした時間が、あなたのキャリアにとって確かな足場となるよう、講師一同、誠実に向き合います。
              </p>
            </div>

            <div style={{
              marginTop: 56, paddingTop: 28,
              borderTop: `1px solid ${BRAND.hair}`,
              display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-end',
            }}>
              <div style={{ textAlign: 'right' }}>
                <div style={{
                  fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                  fontSize: 13, letterSpacing: '.18em', color: BRAND.gold,
                }}>Founder & Principal</div>
                <div style={{
                  marginTop: 8,
                  display: 'flex', alignItems: 'baseline', justifyContent: 'flex-end', gap: 16,
                }}>
                  <span style={{
                    fontFamily: '"Shippori Mincho", serif',
                    fontSize: 26, letterSpacing: '.14em', color: BRAND.black,
                  }}>今井 勇</span>
                  <span style={{
                    fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                    fontSize: 14, letterSpacing: '.18em', color: BRAND.mute,
                  }}>Yu Imai</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Message = Message;