/* Section 4 — Service Digest (軽量版：4サービスをカードでダイジェスト) */

const DIGEST = [
  {
    num: '01',
    role: 'CORE · 月次顧問',
    name: 'オマカセロウムくん',
    sub: '対応範囲の広さが強み',
    one: '給与計算・手続き・社員対応・freee運用・就業規則の小改訂まで、日常の労務をまるごと引き受ける月次顧問。',
    price: '月額 5万円〜',
    href: 'service-roumu.html'
  },
  {
    num: '02',
    role: 'SPOT · 助成金特化',
    name: 'オマカセ助成金申請',
    sub: '累計6億円+の申請実績',
    one: '「取れる助成金を、取れるタイミングで」。社長の代わりに申請を設計・代行する、成功報酬型の特化サービス。',
    price: '成功報酬型',
    href: 'joseikin.html'
  },
  {
    num: '03',
    role: 'IMPLEMENTATION · 労務DX',
    name: 'オマカセfreee導入',
    sub: 'freee認定アドバイザー',
    one: '「freeeを入れたが使えていない」を解決する、約4ヶ月の伴走型導入・運用支援。',
    price: '導入伴走 要相談',
    href: 'freee.html'
  },
  {
    num: '04',
    role: 'RULE DESIGN · 就業規則',
    name: 'オマカセできない就業規則',
    sub: '社長と一緒につくる',
    one: '雛形のコピペでは守れない会社を、使える規則で守る。社長自身が理解して使いこなせる規程づくり。',
    price: '作成 要相談',
    href: 'rules.html'
  }
];

const Services = () => (
  <section className="services" id="services" data-screen-label="04 Services" style={{padding:'96px 0', background:'var(--paper)'}}>
    <div className="container">
      <div className="section-head" style={{marginBottom:48}}>
        <Eyebrow>FOUR SERVICES · 4つのサービス</Eyebrow>
        <h2>社長のストレスに、<br/>4つの角度から向き合います。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'60ch'}}>
          日常の労務、資金（助成金）、システム、会社の憲法（就業規則）。
          全部を一社で抱えるから、連絡経路が一本で済みます。
        </p>
      </div>

      <div className="services__intro">
        <div className="services__intro-text">
          <Eyebrow>SERVICE INTRO</Eyebrow>
          <h3 className="services__intro-h">1分で分かる、<br/>オマカセロウムくん。</h3>
          <p className="services__intro-p">
            日々の労務をまるごと引き取る、CORE サービス。
            このページの一番上から見るより、まず動画を観ていただくのが早いです。
          </p>
        </div>
        <div className="services__intro-video">
          <iframe
            src="https://www.youtube-nocookie.com/embed/VyLI_EqKAdM?rel=0"
            title="オマカセロウムくん サービス紹介動画"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
          />
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20}}>
        {DIGEST.map(s => (
          <a key={s.num} href={s.href} style={{
            display:'block',
            background:'#fff',
            border:'1px solid var(--paper-line)',
            borderRadius:'var(--radius)',
            padding:'28px 24px 24px',
            textDecoration:'none',
            color:'inherit',
            transition:'transform .2s, box-shadow .2s, border-color .2s',
            position:'relative'
          }}
          onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 12px 28px -12px rgba(20,32,60,.15)';e.currentTarget.style.borderColor='var(--navy-400)';}}
          onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';e.currentTarget.style.borderColor='var(--paper-line)';}}
          >
            <div style={{fontFamily:'var(--font-mono)', fontSize:28, fontWeight:500, color:'var(--accent)', lineHeight:1, marginBottom:16}}>{s.num}</div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--navy-700)', marginBottom:12, fontWeight:600}}>{s.role}</div>
            <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:19, color:'var(--ink-900)', margin:'0 0 6px', lineHeight:1.5, letterSpacing:'.03em'}}>{s.name}</h3>
            <div style={{fontSize:12, color:'var(--accent)', fontWeight:600, letterSpacing:'.04em', marginBottom:14}}>— {s.sub}</div>
            <p style={{fontSize:13.5, lineHeight:1.9, color:'var(--ink-700)', margin:'0 0 18px'}}>{s.one}</p>
            <div style={{borderTop:'1px dashed var(--paper-line)', paddingTop:14, display:'flex', justifyContent:'space-between', alignItems:'center', gap:8}}>
              <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:14, color:'var(--navy-700)'}}>{s.price}</div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.08em', color:'var(--accent)', fontWeight:600, whiteSpace:'nowrap'}}>詳しく見る <Arrow/></div>
            </div>
          </a>
        ))}
      </div>

      <div style={{marginTop:48, padding:'28px 32px', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', background:'var(--paper-2)', display:'flex', alignItems:'center', gap:20, flexWrap:'wrap'}}>
        <div style={{flex:'1 1 280px'}}>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--navy-700)'}}>SERVICE MAP</div>
          <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:20, lineHeight:1.55, marginTop:6}}>どのサービスが自社に合うか、迷ったら。</div>
          <div style={{fontSize:14, color:'var(--ink-500)', marginTop:6}}>選び方フローチャートとfreee特化の強みを、サービスページで詳しく見られます。</div>
        </div>
        <a className="btn btn--navy" href="service.html">サービス一覧ページへ <Arrow/></a>
      </div>
    </div>
  </section>
);

window.Services = Services;