import { Mail, Phone, MapPin, Book, Globe, Brain, Save, Database, Bot, Code2, Workflow, Sparkles } from 'lucide-react';
import { ToastContainer } from 'react-toastify';
import { Provider } from './Provider';
import Logo from './assets/logo-1.png';
import { useState } from 'react';
import { toastWeChat } from './modules/RedirectSuccess.tsx';
import { WeChat } from './components/Icon.tsx';
import { getOrigin } from './modules/get-origin.ts';

export const openEditor = () => {
  window.open('./editor');
};
export const Main = () => {
  const [url] = useState<string>('https://kevisual.cn');
  return (
    <div className='min-h-screen bg-gray-50'>
      {/* Hero Section */}
      <div className=''>
        <nav className='px-4 mx-auto h-16 flex justify-between items-center bg-white border-b border-b-gray-200 w-full mr-20'>
          <div
            className='flex items-center space-x-4 cursor-pointer'
            onClick={() => {
              window.open(url, '_blank');
            }}>
            <img src={Logo.src} alt='可视化助手 Logo' className='h-10 w-30 ' />
          </div>
          <div className='hidden md:flex space-x-6'>
            <a
              className='hover:text-gray-400 cursor-pointer'
              onClick={(e) => {
                e.preventDefault();
                const url = new URL('/root/home/', getOrigin());
                window.open(url.toString(), '_blank');
              }}>
              管理中心
            </a>
          </div>
        </nav>
      </div>

      <article className='container mx-auto px-6 py-16 bg-gray-50'>
        {/* 主标题区域 */}
        <div className='text-center mb-16'>
          <h1 className='text-5xl font-bold text-gray-900 mb-6'>可视化助手</h1>
          <p className='text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed'>
            人在网络上生活的方面的所有内容，都能更好地被管理和使用。学习、工作、娱乐、社交等各个方面的内容，都能被整合在自己的可视化的空间中。这空间具备自执行的能力，能主动帮助人完成各项任务，操作系统，浏览器，应用程序。
          </p>
        </div>

        {/* 功能方向卡片 */}
        <div className='mb-12'>
          <h2 className='text-3xl font-bold text-gray-900 text-center mb-12'>核心功能方向</h2>
          <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto'>
            {/* 知识库 */}
            <div className='bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 border border-gray-100'>
              <div className='bg-linear-to-br from-blue-500 to-blue-600 w-14 h-14 rounded-lg flex items-center justify-center mb-6'>
                <Database className='w-7 h-7 text-white' />
              </div>
              <h3 className='text-2xl font-bold text-gray-900 mb-4'>知识库</h3>
              <p className='text-gray-600 leading-relaxed'>
                构建一个个人知识库，能存储和管理各种类型的信息，包括文本、图片、音频、视频等。知识库支持标签、分类、搜索等功能，方便用户快速找到所需信息。非文本，则需要转换为文本进行存储和管理。
              </p>
            </div>

            {/* 代码编辑器 */}
            <div className='bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 border border-gray-100'>
              <div className='bg-linear-to-br from-purple-500 to-purple-600 w-14 h-14 rounded-lg flex items-center justify-center mb-6'>
                <Code2 className='w-7 h-7 text-white' />
              </div>
              <h3 className='text-2xl font-bold text-gray-900 mb-4'>代码编辑器</h3>
              <p className='text-gray-600 leading-relaxed'>
                一切底层运行必开发，如果没有开发环境，那么就需要一个云端代码编辑器，能让用户在浏览器中编写代码，并且能运行和调试代码。
              </p>
            </div>

            {/* 可视化编程 */}
            <div className='bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 border border-gray-100'>
              <div className='bg-linear-to-br from-green-500 to-green-600 w-14 h-14 rounded-lg flex items-center justify-center mb-6'>
                <Workflow className='w-7 h-7 text-white' />
              </div>
              <h3 className='text-2xl font-bold text-gray-900 mb-4'>可视化编程</h3>
              <p className='text-gray-600 leading-relaxed'>
                对话式编程，图形化编程，模块化编程，积木式编程等方式，让用户能更方便地创建程序。
              </p>
            </div>

            {/* 数据存储 */}
            <div className='bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 border border-gray-100'>
              <div className='bg-linear-to-br from-orange-500 to-orange-600 w-14 h-14 rounded-lg flex items-center justify-center mb-6'>
                <Save className='w-7 h-7 text-white' />
              </div>
              <h3 className='text-2xl font-bold text-gray-900 mb-4'>数据存储</h3>
              <p className='text-gray-600 leading-relaxed'>
                云端如何对个人用户来说，如何存储数据，想实现的功能，网页如何更简便获取数据。
              </p>
            </div>

            {/* 自动化任务 */}
            <div className='bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 border border-gray-100'>
              <div className='bg-linear-to-br from-pink-500 to-pink-600 w-14 h-14 rounded-lg flex items-center justify-center mb-6'>
                <Sparkles className='w-7 h-7 text-white' />
              </div>
              <h3 className='text-2xl font-bold text-gray-900 mb-4'>自动化任务</h3>
              <p className='text-gray-600 leading-relaxed'>
                描述一个简单的需求，自动根据需求生成功能。
              </p>
            </div>

            {/* AI 交互 */}
            <div className='bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300 border border-gray-100'>
              <div className='bg-linear-to-br from-cyan-500 to-cyan-600 w-14 h-14 rounded-lg flex items-center justify-center mb-6'>
                <Bot className='w-7 h-7 text-white' />
              </div>
              <h3 className='text-2xl font-bold text-gray-900 mb-4'>AI 交互</h3>
              <p className='text-gray-600 leading-relaxed'>
                通过自然语言与 AI 进行交互，完成各种任务，如信息查询、内容生成、数据分析等。AI 能理解用户的意图，并提供相应的帮助和建议。
              </p>
            </div>
          </div>
        </div>

        {/* 愿景声明 */}
        <div className='mt-20 bg-linear-to-r from-indigo-600 to-purple-600 rounded-2xl p-12 text-center text-white shadow-2xl'>
          <h2 className='text-3xl font-bold mb-4'>打造你的数字生活空间</h2>
          <p className='text-lg opacity-90 max-w-3xl mx-auto'>
            让技术更好地服务于人，让每个人都能轻松管理和掌控自己的数字世界
          </p>
        </div>
      </article>

      {/* Footer */}
      <footer className='bg-gray-900 text-white py-12'>
        <div className='container mx-auto px-6'>
          <div className='grid md:grid-cols-4 gap-8'>
            <div>
              <h3 className='text-lg font-semibold mb-4'>Kevisual 助手</h3>
              <p className='text-gray-400'>加速你的生活，学习，设计，工作。</p>
            </div>
            <div>
              <h3 className='text-lg font-semibold mb-4'>快速链接</h3>
              <ul className='space-y-2 text-gray-400'>
                <li>
                  <a href='#features' className='hover:text-white'>
                    功能
                  </a>
                </li>
                <li>
                  <a href='#contact' className='hover:text-white'>
                    联系方式
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className='text-lg font-semibold mb-4'>法律信息</h3>
              <ul className='space-y-2 text-gray-400'>
                <li>
                  <a href='./privacy' className='hover:text-white'>
                    隐私政策
                  </a>
                </li>
                <li>
                  <a href='./terms' className='hover:text-white'>
                    用户协议
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className='text-lg font-semibold mb-4'>联系我们</h3>
              <div className='flex space-x-4'>
                <a href='mailto:feedback@kevisual.cn' className='text-gray-400 hover:text-white cursor-pointer'>
                  <Mail className='w-6 h-6' />
                </a>
                <a href='tel:18324451015' className='text-gray-400 hover:text-white cursor-pointer'>
                  <Phone className='w-6 h-6' />
                </a>
                <a
                  className='text-gray-400 hover:text-white cursor-pointer'
                  onClick={(e) => {
                    e.preventDefault();
                    toastWeChat();
                  }}>
                  <WeChat className='w-6 h-6' />
                </a>
              </div>
            </div>
          </div>
          <div
            className='mt-12 pt-8 border-t border-gray-800 text-center text-gray-400'
            onClick={() => {
              window.open('https://beian.miit.gov.cn/', '_blank');
            }}>
            <p>浙ICP备2025158778号</p>
            <p>© 2025 杭州余杭逸文设计工作室. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export const App = () => {
  return (
    <>
      <Provider>
        <ToastContainer autoClose={2000}></ToastContainer>
        <Main />
      </Provider>
    </>
  );
};
