// Page 2: Welcome Page - 欢迎页
import { ChevronRightIcon, SparklesIcon } from 'lucide-react';

const features = [
  { icon: '🧠', title: '主动回忆', desc: '不是背，是想起来' },
  { icon: '🤖', title: 'AI 学习分析', desc: '发现你真正的薄弱点' },
  { icon: '📚', title: '系统知识库', desc: '知识有序组织，随时调用' },
  { icon: '🔄', title: '间隔复习', desc: '科学遗忘曲线驱动' },
];

const WelcomePage = () => {
  return (
    <div
      data-cmp="WelcomePage"
      className="absolute inset-0 flex flex-col"
      style={{
        background: 'linear-gradient(180deg, #0D0D22 0%, #0F0F1A 100%)',
        paddingTop: '44px',
      }}
    >
      {/* Top glow */}
      <div
        className="absolute pointer-events-none"
        style={{
          top: 0,
          left: 0,
          right: 0,
          height: '360px',
          background: 'radial-gradient(ellipse at 50% 0%, rgba(124,110,250,0.3) 0%, transparent 70%)',
        }}
      />

      {/* Content */}
      <div className="flex-1 flex flex-col px-7 pt-10 relative z-10">
        {/* Badge */}
        <div
          className="self-start flex items-center gap-2 px-3 py-1.5 mb-6"
          style={{
            background: 'rgba(124,110,250,0.15)',
            border: '1px solid rgba(124,110,250,0.3)',
            borderRadius: '20px',
          }}
        >
          <SparklesIcon size={12} style={{ color: '#A78BFA' }} />
          <span style={{ fontSize: '11px', fontWeight: '600', color: '#A78BFA', letterSpacing: '0.5px' }}>
            AI-FIRST 学习体验
          </span>
        </div>

        {/* Hero title */}
        <div className="mb-4">
          <h1
            style={{
              fontSize: '32px',
              fontWeight: '800',
              color: '#F0F0FF',
              letterSpacing: '-0.8px',
              lineHeight: '1.15',
            }}
          >
            从「看过」到
            <br />
            <span
              style={{
                background: 'linear-gradient(135deg, #A78BFA 0%, #F97316 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
              }}
            >
              真正学会
            </span>
          </h1>
          <p
            style={{
              marginTop: '12px',
              fontSize: '15px',
              color: 'rgba(240,240,255,0.55)',
              lineHeight: '1.6',
            }}
          >
            知习通过 AI 驱动的主动回忆、费曼解释和间隔复习，帮你建立真正掌握的知识体系。
          </p>
        </div>

        {/* Feature cards */}
        <div className="flex flex-col gap-3 mt-4">
          {features.map((f, i) => (
            <div
              key={i}
              className="flex items-center gap-4 px-4 py-3.5"
              style={{
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.07)',
                borderRadius: '16px',
              }}
            >
              <div
                style={{
                  width: '40px',
                  height: '40px',
                  borderRadius: '12px',
                  background: 'rgba(124,110,250,0.15)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '20px',
                  flexShrink: 0,
                }}
              >
                {f.icon}
              </div>
              <div className="flex-1">
                <p style={{ fontSize: '14px', fontWeight: '600', color: '#F0F0FF' }}>{f.title}</p>
                <p style={{ fontSize: '12px', color: 'rgba(240,240,255,0.45)', marginTop: '1px' }}>{f.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom actions */}
      <div className="px-7 pb-12 pt-6 relative z-10">
        {/* Primary CTA */}
        <button
          className="w-full flex items-center justify-center gap-2"
          style={{
            height: '56px',
            borderRadius: '18px',
            background: 'linear-gradient(135deg, #7C6EFA 0%, #9B8BFF 100%)',
            boxShadow: '0 8px 32px rgba(124,110,250,0.4)',
            border: 'none',
            fontSize: '16px',
            fontWeight: '700',
            color: 'white',
            letterSpacing: '-0.2px',
          }}
        >
          开始使用
          <ChevronRightIcon size={20} style={{ color: 'white' }} />
        </button>

        {/* Secondary */}
        <button
          className="w-full mt-3"
          style={{
            height: '48px',
            borderRadius: '14px',
            background: 'transparent',
            border: 'none',
            fontSize: '14px',
            fontWeight: '500',
            color: 'rgba(240,240,255,0.45)',
          }}
        >
          已有账号？登录
        </button>
      </div>
    </div>
  );
};

export default WelcomePage;