import { Mail, Phone, MapPin, Book, Globe, Brain, Save } 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'>
          <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/center/', getOrigin());
                window.open(url.toString(), '_blank');
              }}>
              管理中心
            </a>
            <a href='#features' className='hover:text-gray-400 cursor-pointer'>
              功能
            </a>
            <a href='#contact' className='hover:text-gray-400 cursor-pointer'>
              联系方式
            </a>
          </div>
        </nav>
      </div>

      <article className='container mx-auto px-6 py-10 bg-gray-50'>
        <div className='mx-auto bg-white p-8 py-10 rounded-lg shadow-lg'>
          <h2 className='text-3xl font-bold mb-8 text-center'>网页部署平台</h2>
          <p className='text-gray-700 mb-6'>
            Kevisual设计助手提供强大的网页部署平台，让您轻松管理自己的博客和自定义网页。无论是个人博客、AI生成的网页，还是专业项目，都能通过我们的平台进行高效管理。
          </p>
          <div className='grid md:grid-cols-2 gap-8 mt-10'>
            <div>
              <h3 className='text-xl font-semibold mb-4'>功能亮点</h3>
              <ul className='list-disc pl-5 space-y-2 text-gray-600'>
                <li>类似图床的文件管理系统，高效整理各类资源</li>
                <li>一键创建、删除和管理多个站点</li>
                <li>支持自定义域名，打造专属网络形象</li>
                <li>权限控制系统，可设置为仅自己可访问或公开共享</li>
              </ul>
            </div>
            <div>
              <h3 className='text-xl font-semibold mb-4'>使用场景</h3>
              <ul className='list-disc pl-5 space-y-2 text-gray-600'>
                <li>个人博客与作品集展示</li>
                <li className='text-blue-600 hover:underline cursor-pointer' onClick={openEditor}>
                  临时网页快速部署
                </li>
                <li>AI生成内容的发布与管理</li>
                <li>小型项目的在线展示</li>
              </ul>
            </div>
          </div>
          <div className='mt-8 text-center'>
            <a href='./docs/features' className='inline-flex items-center text-blue-600 hover:underline font-medium  cursor-not-allowed'>
              了解更多功能
              <svg className='w-4 h-4 ml-1' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M9 5l7 7-7 7'></path>
              </svg>
            </a>
          </div>
        </div>
      </article>
      {/* Features Section */}
      <section id='features' className='container mx-auto px-6 py-10 bg-gray-50'>
        <div className='mx-auto bg-white p-8 py-10 rounded-lg shadow-lg'>
          <h2 className='text-3xl font-bold text-center mb-16'>核心功能</h2>

          <div className='grid md:grid-cols-3 gap-12'>
            <div className='p-6 rounded-lg shadow-lg bg-white'>
              <Globe className='w-12 h-12 text-blue-600 mb-4' />
              <h3 className='text-xl font-semibold mb-4'>网页部署平台</h3>
              <p className='text-gray-600'>轻松管理您的博客和自定义网页，支持文件管理、站点创建和域名自定义</p>
            </div>

            <div className='p-6 rounded-lg shadow-lg bg-white'>
              <Brain className='w-12 h-12 text-blue-600 mb-4' />
              <h3 className='text-xl font-semibold mb-4'>应用共享</h3>
              <p className='text-gray-600'>根据用户需求，某一些应用只能自己访问或者共享</p>
            </div>

            <div className='p-6 rounded-lg shadow-lg bg-white'>
              <Book className='w-12 h-12 text-blue-600 mb-4' />
              <h3 className='text-xl font-semibold mb-4'>临时网页</h3>
              <p className='text-gray-600'>当个网页助手，帮助您快速生成临时网页</p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id='contact' className='container mx-auto px-6 py-10 bg-gray-50'>
        <div className='mx-auto bg-white p-8 py-10 rounded-lg shadow-lg'>
          <h2 className='text-3xl font-bold text-center mb-16'>联系我们</h2>
          <div className='max-w-2xl mx-auto w-[300px]'>
            <div className='space-y-6'>
              <div className='flex items-center space-x-4'>
                <Mail className='w-6 h-6 text-blue-600' />
                <span>kevisual@kevisual.cn</span>
              </div>
              <div className='flex items-center space-x-4'>
                <Phone className='w-6 h-6 text-blue-600' />
                <span>18324451015</span>
              </div>
              <div className='flex items-center space-x-4'>
                <MapPin className='w-6 h-6 text-blue-600' />
                <span>浙江省杭州市拱墅区杭州北部软件园</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 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>
    </>
  );
};
