<template>
  <div class="bg-base-200 min-h-screen">
    <main class="hero min-h-screen bg-base-200">
      <div
        class="hero-content flex-col xl:flex-row-reverse gap-8 xl:gap-12 py-10 px-4"
      >
        <!-- 例程轮播容器 -->
        <div class="w-full flex justify-center" style="min-width: 650px">
          <TutorialCarousel :autoRotationInterval="3000" />
        </div>
        <!-- 内容容器 -->
        <div
          class="content-container max-w-md lg:max-w-2xl transform transition-all duration-500 ease-in-out"
        >
          <h1 class="text-4xl md:text-5xl font-bold mb-3 relative group">
            <span
              class="relative z-10 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
            >
              Welcome to
            </span>
            <span class="text-base-content">FPGA Web Lab!</span>
            <span
              class="absolute bottom-0 left-0 w-0 h-1 bg-primary transition-all duration-500 ease-in-out group-hover:w-3/4"
            ></span>
          </h1>

          <p class="py-6 text-lg opacity-80 leading-relaxed">
            Prototype and simulate electronic circuits in your browser with our
            modern, intuitive interface. Create, test, and share your FPGA
            designs seamlessly.
          </p>
          <div class="flex flex-wrap gap-4 actions-container">
            <router-link
              to="/project"
              class="btn btn-primary text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1"
            >
              <BookOpen class="h-5 w-5 mr-2" />
              进入工程界面
            </router-link>
          </div>
          <div
            class="mt-8 p-4 bg-base-300 rounded-lg shadow-inner opacity-80 transition-all duration-300 hover:opacity-100 hover:shadow-md"
          >
            <p class="text-sm">
              <span class="font-semibold text-primary">提示：</span>
              您可以在工程界面中创建、编辑和测试您的FPGA项目，使用我们简洁直观的界面轻松进行硬件设计。
            </p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import "@/router";
import TutorialCarousel from "@/components/TutorialCarousel.vue";
import { BookOpen } from "lucide-vue-next";
</script>

<style scoped lang="postcss">
@import "../assets/main.css";
</style>
