---
import Layout from "../layouts/Layout.astro";
const base = import.meta.env.BASE_URL || "/";
---

<Layout title="IT事業部 - 202510新建ウェブプロジェクト株式会社">
  <!-- Hero1 -->
  <section
    class="relative bg-linear-to-br from-blue-600 to-blue-400 text-white py-24"
  >
    <div class="max-w-5xl mx-auto text-center px-6">
      <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">IT事業部</h1>
      <p class="text-lg text-blue-50">
        業務効率化から顧客体験の向上まで、<br />
        技術の力で企業成長を支援します。
      </p>
    </div>
  </section>

  <!-- サービス紹介 -->
  <section class="max-w-6xl mx-auto py-20 px-6">
    <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">
      ITソリューションサービス
    </h2>

    <div class="grid md:grid-cols-3 gap-10 justify-items-center">
      <div
        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
      >
        <img
          src={`${import.meta.env.BASE_URL}images/system-dev.jpg`}
          alt="システム開発"
          class="w-full h-40 object-cover rounded-lg mb-5"
        />
        <h3 class="text-xl font-semibold text-blue-700 mb-2">
          Webシステム・アプリ開発
        </h3>
        <p class="text-gray-700 text-sm leading-relaxed">
          業務アプリケーションやデータベース連携など、ビジネスに最適化されたシステムを開発します。
        </p>
      </div>
      <div
        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
      >
        <img
          src={`${import.meta.env.BASE_URL}images/cloud.jpg`}
          alt="AI分析・自動化ツール開発"
          class="w-full h-40 object-cover rounded-lg mb-5"
        />
        <h3 class="text-xl font-semibold text-blue-700 mb-2">
          AI分析・自動化ツール開発
        </h3>
        <p class="text-gray-700 text-sm leading-relaxed">
          AWSやAzureを活用したクラウド環境設計や、セキュアなインフラ構築を支援します。
        </p>
      </div>
      <div
        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
      >
        <img
          src={`${import.meta.env.BASE_URL}images/web-design.jpg`}
          alt="通訳業及び翻訳業"
          class="w-full h-40 object-cover rounded-lg mb-5"
        />
        <h3 class="text-xl font-semibold text-blue-700 mb-2">
          通訳業及び翻訳業
        </h3>
        <p class="text-gray-700 text-sm leading-relaxed">
          ブランドを高める企業サイトやECサイトの設計・開発を行い、ユーザー体験を最適化します。
        </p>
      </div>

      <div
        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
      >
        <img
          src={`${import.meta.env.BASE_URL}images/cloud1.png  `}
          alt="クラウド導入支援・DXコンサルティング"
          class="w-full h-40 object-cover rounded-lg mb-5"
        />
        <h3 class="text-xl font-semibold text-blue-700 mb-2">
          クラウド導入支援・DXコンサルティング
        </h3>
        <p class="text-gray-700 text-sm leading-relaxed">
          クラウド導入とデジタルトランスフォーメーションのコンサルティングを提供し、業務効率化を支援します。
        </p>
      </div>

      <div
        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
      >
        <img
          src={`${import.meta.env.BASE_URL}images/order.jpg`}
          alt="飲食店向け予約・注文システム"
          class="w-full h-40 object-cover rounded-lg mb-5"
        />
        <h3 class="text-xl font-semibold text-blue-700 mb-2">
          飲食店向け予約・注文システム
        </h3>
        <p class="text-gray-700 text-sm leading-relaxed">
          飲食店向けの予約・注文システムを開発し、顧客体験の向上と業務効率化を実現します。
        </p>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="bg-blue-50 py-16 text-center">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">
      ITに関するご相談はこちら
    </h2>
    <a
      href={`${base}contact/`}
      class="inline-block bg-blue-600 text-white font-semibold px-8 py-3 rounded-full hover:bg-blue-700 transition"
      >お問い合わせ →</a
    >
  </section>
</Layout>
