import React from 'react'
import { useNavigate } from 'react-router-dom';
import useStore from '../store/useStore';

function Home() {
  const navigator = useNavigate();

  return (
    <div className="flex bg-base-200 min-h-screen flex-col items-center text-white p-8">
      <h1 className="text-4xl mt-2 md:text-5xl font-bold mb-6 text-center flex flex-col gap-2 md:block">
        欢迎来到 <span className='bg-slate-800 px-4 rounded-md relative'>LivePoll</span>
      </h1>
      <p className="text-lg text-center max-w-2xl mb-8">
        LivePoll 是您进行实时互动投票的平台。创建投票，参与活跃讨论，并通过实时更新和可视化获得即时反馈。探索人们对您关心话题的看法，让您的声音被听到！
      </p>
      <div className="flex flex-col lg:flex-row gap-6 mb-8">
        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
          <h2 className="text-3xl font-semibold mb-4">创建投票</h2>
          <p className="text-gray-400">
            创建关于任何主题的自定义投票并与他人分享。添加选项，设置权限，并实时查看响应结果。
          </p>
        </div>
        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
          <h2 className="text-3xl font-semibold mb-4">投票与参与</h2>
          <p className="text-gray-400">
            浏览各种公开投票或加入与您分享的私人投票。投出您的一票，并在他人参与时查看实时结果。
          </p>
        </div>
        <div className="bg-base-300 p-6 rounded-lg shadow-md w-full lg:w-96 text-center">
          <h2 className="text-3xl font-semibold mb-4">收藏与追踪</h2>
          <p className="text-gray-400">
            收藏投票以便稍后查看，查看您过去的参与记录，并随时了解您关心的话题动态。
          </p>
        </div>
      </div>
      <button
        className="btn btn-primary px-6 py-3 font-semibold text-lg"
        onClick={() => navigator("/dashboard")}
      >
        创建投票
      </button>
    </div>
  )
}

export default Home