function HomeScreen({ onNav }) {
  const { Button, Card, Badge } = window.LienDesignSystem_caf7e1;
  const steps = [
    ['01','ご相談', 'まずは経営課題やご希望のご縁について、代表がじっくりお伺いします。'],
    ['02','ご紹介', '蓄積したネットワークの中から、本当に意味のある出会いだけを厳選してご紹介します。'],
    ['03','継続サポート', 'ご紹介後の関係構築も、必要に応じてサポートいたします。'],
  ];
  return React.createElement('div', {},
    React.createElement('section', { style:{ padding:'96px 48px 80px', textAlign:'center', background:'var(--surface-page)' } },
      React.createElement(Badge, { tone:'terracotta' }, '経営者向け紹介サービス'),
      React.createElement('h1', { className:'hero-title', style:{ fontFamily:'var(--font-serif)', fontSize:'var(--text-display)', color:'var(--text-heading)', lineHeight:'var(--leading-display)', margin:'24px auto 16px', maxWidth:720, letterSpacing:'var(--tracking-heading)' } }, '縁をつなぐ、経営の力に。'),
      React.createElement('p', { style:{ fontFamily:'var(--font-sans)', fontSize:'var(--text-body-lg)', color:'var(--text-body)', maxWidth:560, margin:'0 auto 32px', lineHeight:'var(--leading-body)' } }, '「Lien」は、経営者同士を紹介・マッチングする紹介サービスです。誠実な紹介を通じて、事業に本当に必要なご縁をおつなぎします。'),
      React.createElement('div', { style:{ display:'flex', gap:16, justifyContent:'center' } },
        React.createElement(Button, { variant:'primary', size:'lg', onClick:()=>onNav('service') }, 'Lienについて詳しく')
      )
    ),
    React.createElement('section', { style:{ padding:'80px 48px', background:'var(--surface-page-alt)' } },
      React.createElement('h2', { style:{ fontFamily:'var(--font-serif)', fontSize:'var(--text-h2)', color:'var(--text-heading)', textAlign:'center', marginBottom:48 } }, 'ご利用の流れ'),
      React.createElement('div', { className:'flow-steps', style:{ display:'flex', gap:32, maxWidth:1120, margin:'0 auto' } },
        steps.map(([n,t,d]) => React.createElement(Card, { key:n, elevated:true, style:{ flex:1 } },
          React.createElement('div', { style:{ fontFamily:'var(--font-serif)', fontSize:'1.5rem', color:'var(--color-blue-600)', marginBottom:8 } }, n),
          React.createElement('div', { style:{ fontFamily:'var(--font-sans)', fontWeight:'var(--weight-medium)', color:'var(--text-heading)', marginBottom:8, fontSize:'1.0625rem' } }, t),
          React.createElement('div', { style:{ fontSize:'0.9375rem' } }, d)
        ))
      )
    ),
    React.createElement('section', { style:{ padding:'64px 48px', background:'var(--color-blue-100)', textAlign:'center' } },
      React.createElement('h2', { style:{ fontFamily:'var(--font-serif)', fontSize:'var(--text-h3)', color:'var(--text-heading)', marginBottom:16 } }, '面談のご相談・日程調整はこちら'),
      React.createElement('p', { style:{ fontFamily:'var(--font-sans)', color:'var(--text-body)', maxWidth:480, margin:'0 auto 24px', fontSize:'0.9375rem', lineHeight:'var(--leading-body)', whiteSpace:'normal' } }, 'まずはつながれる業種を相談したいだけでも構いません。'),
      React.createElement(Button, { variant:'primary', size:'lg', onClick:()=>window.open('https://timerex.net/s/mirarch.hayashida_9d6c/dba6187b','_blank') }, '日程調整はこちら')
    )
  );
}
window.HomeScreen = HomeScreen;