// Services.jsx — Delvecore Website UI Kit (responsive)
const SERVICES = [
  {
    num: '01',
    name: 'Web制作',
    desc: '目的整理から情報設計、デザイン、実装、公開までを一気通貫で任せられます。更新しやすい構成で、公開後の運用負荷も抑えます。',
    icon: 'monitor.svg',
    deliverables: '任せられること: コーポレートサイト / LP / CMS設計 / 公開運用設計',
  },
  {
    num: '02',
    name: 'AI業務効率化',
    desc: '繰り返し業務の切り分けから、AI活用の設計・導入まで任せられます。現場で使える運用ルールまで整え、定着を支援します。',
    icon: 'trending-up.svg',
    deliverables: '任せられること: 問い合わせ一次返信補助 / FAQ下書き / 更新作業の自動化補助',
  },
  {
    num: '03',
    name: '月額保守サポート',
    desc: '公開後の更新、軽微修正、監視、改善提案まで継続して任せられます。運用状況を見ながら優先順位を整理し、改善を積み上げます。',
    icon: 'check-circle.svg',
    deliverables: '任せられること: 月次更新 / 障害一次対応 / セキュリティ更新 / 改善提案 / 月1回30分のWeb会議（Zoom等）',
  },
];

function ServiceCard({ num, name, desc, icon, deliverables }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{ background: '#F8F7F5', padding: '48px 40px', position: 'relative', overflow: 'hidden', cursor: 'default' }}>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: hovered ? '100%' : 0, background: '#0C0C0A', transition: 'height 0.45s cubic-bezier(0.4,0,0.2,1)', zIndex: 0 }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ marginBottom: 20 }}>
          <img
            src={`assets/icons/${icon}`}
            alt=""
            width="22"
            height="22"
            style={{
              display: 'block',
              filter: hovered ? 'brightness(0) invert(1)' : 'brightness(0)',
              opacity: hovered ? 0.7 : 0.35,
              transition: 'filter 0.3s, opacity 0.3s',
            }}
          />
        </div>
        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 48, fontWeight: 300, color: hovered ? 'rgba(248,247,245,0.2)' : '#C8C8C4', lineHeight: 1, marginBottom: 28, transition: 'color 0.3s' }}>{num}</div>
        <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 28, fontWeight: 400, marginBottom: 16, letterSpacing: '0.02em', color: hovered ? 'rgba(248,247,245,0.9)' : '#0C0C0A', transition: 'color 0.3s' }}>{name}</h3>
        <p style={{ fontSize: 13, lineHeight: 1.85, color: hovered ? 'rgba(248,247,245,0.6)' : '#888884', transition: 'color 0.3s' }}>{desc}</p>
        <p style={{ marginTop: 12, fontSize: 12, lineHeight: 1.7, color: hovered ? 'rgba(248,247,245,0.72)' : '#5f5f5b', transition: 'color 0.3s' }}>
          {deliverables}
        </p>
      </div>
    </div>
  );
}

window.Services = function Services() {
  const mobile = useIsMobile();
  return (
    <section id="services" style={{ padding: mobile ? '80px 24px' : '120px 48px' }}>
      <SectionHeader num="01" title="Services" ja="サービス" />
      <p style={{ marginTop: 26, maxWidth: 820, color: '#666662', lineHeight: 1.8 }}>
        Delvecore では、Web制作・AI業務効率化・月額保守の3つを提供しています。目的に応じて必要な範囲を整理し、実装から運用まで一貫して対応します。
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: 1, background: '#E0DFD8', border: '1px solid #E0DFD8', marginTop: 80 }}>
        {SERVICES.map(s => <ServiceCard key={s.num} {...s} />)}
      </div>
    </section>
  );
};