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

<Layout title="株式会社火和 HIYORI">
  <!-- Heroセクション -->
  <section
    id="hero"
    class="relative flex flex-col justify-center items-center text-center text-white h-[90vh] bg-cover bg-center"
    style={`background-image: url('${import.meta.env.BASE_URL}images/hero-bg.png');`}
  >
    <!-- 半透明遮罩层（让文字清晰） -->
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

    <!-- 文字和按钮 -->
    <div class="relative z-10 max-w-4xl px-6">
      <h1
        class="text-5xl sm:text-6xl font-extrabold mb-8 leading-tight drop-shadow-[0_3px_10px_rgba(0,0,0,0.25)]"
      >
        テクノロジーと創造力で、<br />未来をデザインする。
      </h1>

      <p class="text-yellow-300! text-3xl font-bold">
        IT × FOOD の力で、人と社会をつなぐ。
      </p>

      <a
        href="/about"
        class="inline-block mt-10 bg-linear-to-r from-sky-400 to-blue-500 text-white font-semibold px-12 py-4 rounded-full shadow-[0_8px_24px_rgba(56,189,248,0.4)] hover:shadow-[0_10px_28px_rgba(56,189,248,0.5)] hover:scale-[1.06] transition-all duration-300"
      >
        会社概要を見る →
      </a>
    </div>
  </section>

  <!-- 事業紹介 -->
  <section class="max-w-6xl mx-auto px-6 py-24">
    <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">事業内容</h2>

    <div class="grid md:grid-cols-2 gap-10">
      <!-- IT事業部 -->
      <div
        class="group bg-white/80 backdrop-blur-lg border border-gray-200 rounded-2xl p-8 shadow-md hover:shadow-2xl transition-all duration-500"
      >
        <img
          src="/my-company-site/images/system-dev.jpg"
          alt="IT事業部"
          class="rounded-xl w-full h-56 object-cover mb-6 group-hover:scale-105 transition-transform duration-700"
        />
        <h3 class="text-2xl font-semibold text-blue-700 mb-4">IT事業部</h3>
        <p class="text-gray-600 leading-relaxed mb-6">
          情報システム開発・Web制作・クラウド導入支援など、DX推進をサポートします。
        </p>
        <a href={`${base}it/`} class="text-blue-600 font-medium hover:underline"
          >詳しく見る →</a
        >
      </div>

      <!-- 飲食事業部 -->
      <div
        class="group bg-white/80 backdrop-blur-lg border border-gray-200 rounded-2xl p-8 shadow-md hover:shadow-2xl transition-all duration-500"
      >
        <img
          src={`${import.meta.env.BASE_URL}images/food-business.jpg`}
          alt="飲食事業部"
          class="rounded-xl w-full h-56 object-cover mb-6 group-hover:scale-105 transition-transform duration-700"
        />
        <h3 class="text-2xl font-semibold text-blue-700 mb-4">飲食事業部</h3>
        <p class="text-gray-600 leading-relaxed mb-6">
          地元食材を活かしたカフェ・レストラン経営で地域に笑顔を届けます。
        </p>
        <a
          href={`${base}food/`}
          class="text-blue-600 font-medium hover:underline">詳しく見る →</a
        >
      </div>
    </div>
  </section>

  <!-- お問い合わせ -->
  <section
    class="bg-linear-to-br from-blue-700 via-blue-500 to-blue-400 text-white text-center py-24"
  >
    <h2 class="text-3xl font-bold mb-6">お問い合わせ</h2>
    <p class="text-cyan-300 text-lg mb-10">
      サービス・採用・提携に関するご質問など、<br class="hidden sm:block" />
      お気軽にお問い合わせください。
    </p>
    <a
      href="/my-company-site/contact/"
      class="inline-block mt-10 bg-white text-blue-700 font-semibold px-8 py-3 rounded-full shadow-lg hover:shadow-xl hover:bg-blue-50 transition-all duration-300 transform hover:-translate-y-1"
    >
      お問い合わせフォーム →
    </a>
  </section>
</Layout>