function ServiceScreen({ onNav }) {
  const { Card, Tabs, Badge } = window.LienDesignSystem_caf7e1;
  const [tab, setTab] = React.useState('overview');
  return React.createElement('div', {},
    React.createElement('section', { style:{ padding:'72px 48px 40px', background:'var(--surface-page)', textAlign:'center' } },
      React.createElement(Badge, { tone:'primary' }, 'Service'),
      React.createElement('h1', { style:{ fontFamily:'var(--font-serif)', fontSize:'var(--text-h1)', color:'var(--text-heading)', margin:'20px 0 12px' } }, 'Lienとは'),
      React.createElement('p', { style:{ fontFamily:'var(--font-sans)', color:'var(--text-body)', maxWidth:560, margin:'0 auto', lineHeight:'var(--leading-body)', whiteSpace:'normal' } }, '経営者同士の「本当に意味のある出会い」だけを、誠実に取り次ぐ紹介サービスです。')
    ),
    React.createElement('section', { style:{ padding:'0 48px', maxWidth:1120, margin:'0 auto' } },
      React.createElement(Tabs, { tabs:[{key:'overview',label:'サービス概要'},{key:'faq',label:'よくあるご質問'}], activeKey:tab, onChange:setTab })
    ),
    tab==='overview' && React.createElement('section', { style:{ padding:'48px', maxWidth:900, margin:'0 auto', fontFamily:'var(--font-sans)', color:'var(--text-body)', lineHeight:'var(--leading-body)' } },
      React.createElement('p', {}, 'Lienは、案件の受発注・事業提携・業務委託・資本提携など、経営者同士のあらゆる「ご縁」を対象にした紹介サービスです。単なるマッチングサービスではなく、専任の担当者が一社ずつ丁寧にヒアリングを行い、双方にとって意味のある紹介だけを行います。'),
      React.createElement('p', {}, '売り込みのための紹介ではなく、長期的な信頼関係を前提としたご紹介を大切にしています。'),
      React.createElement('div', { style:{ fontFamily:'var(--font-serif)', fontSize:'var(--text-h4)', color:'var(--text-heading)', marginTop:32, marginBottom:12 } }, 'こんなお悩みはありませんか？'),
      React.createElement('p', {}, 'つながりたい経営者様がいるのに、なかなか接点をつくれない。交流会や異業種交流の場に参加しても、時間ばかりかかって本当に意味のある出会いにつながらない。そうした経営者様のお役に立てるのがLienです。限られた時間の中で、本当に必要なご縁だけに出会っていただけるよう、専任の担当者が一社ずつ丁寧にご紹介します。')
    ),
    tab==='faq' && React.createElement('section', { style:{ padding:'48px', maxWidth:900, margin:'0 auto', display:'flex', flexDirection:'column', gap:20 } },
      [
        ['どんな企業が対象ですか？','法人の決裁者につながりたいBtoB事業者様との相性が良いサービスです。事前に事業内容やエリア、企業様が抱える課題を把握したうえでアポイントを設定したいという企業様を対象としています。'],
        ['紹介料はかかりますか？','プランに応じた月額のご利用料をいただいております。詳細はお問い合わせください。'],
      ].map(([q,a]) => React.createElement(Card, { key:q },
        React.createElement('div', { style:{ fontWeight:'var(--weight-medium)', color:'var(--text-heading)', marginBottom:6 } }, 'Q. '+q),
        React.createElement('div', { style:{ fontSize:'0.9375rem' } }, 'A. '+a)
      ))
    )
  );
}
window.ServiceScreen = ServiceScreen;