export function Features() {
  const features = [
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
      ),
      title: "自動評分",
      description: "使用 AI 精準評分選擇題、數值題，甚至開放式問題。",
      color: "var(--color-primary)",
    },
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
        </svg>
      ),
      title: "智能解釋",
      description: "為每個錯誤答案提供個人化解釋，幫助學生理解錯誤。",
      color: "var(--color-accent)",
    },
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      ),
      title: "同儕學習小組",
      description: "AI 建議的學生分組，將表現優秀的學生與需要特定主題幫助的學生配對。",
      color: "var(--color-success)",
    },
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
      ),
      title: "電子郵件報告",
      description: "直接在收件匣中接收精美的格式化報告，隨時可與學生或家長分享。",
      color: "var(--color-warning)",
    },
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
      ),
      title: "隱私優先",
      description: "學生資料安全處理。我們只存取您分享的內容，絕不儲存敏感資訊。",
      color: "var(--color-primary-light)",
    },
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      ),
      title: "即時分析",
      description: "幾秒內獲得全面洞察，而非數小時。更多時間教學，更少時間評分。",
      color: "var(--color-accent-light)",
    },
  ];

  return (
    <section id="features" className="py-20 px-6 bg-gradient-to-b from-transparent to-[var(--color-surface)]/50">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="font-display text-4xl font-bold text-[var(--color-text)] mb-4">
            了解您的學生所需的一切
            <span className="text-gradient"> 功能</span>
          </h2>
          <p className="text-lg text-[var(--color-text-muted)] max-w-2xl mx-auto">
            ClassLens 結合 AI 的力量與深思熟慮的教育實踐，為您提供可操作的洞察。
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, i) => (
            <div
              key={i}
              className="card p-6 hover:shadow-lg transition-all hover:-translate-y-1 group"
            >
              <div
                className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110"
                style={{ 
                  backgroundColor: `color-mix(in srgb, ${feature.color} 15%, transparent)`,
                  color: feature.color 
                }}
              >
                {feature.icon}
              </div>
              <h3 className="font-display text-xl font-semibold text-[var(--color-text)] mb-2">
                {feature.title}
              </h3>
              <p className="text-[var(--color-text-muted)]">
                {feature.description}
              </p>
            </div>
          ))}
        </div>

        {/* How it works */}
        <div className="mt-24">
          <h3 className="font-display text-3xl font-bold text-center text-[var(--color-text)] mb-12">
            How It Works
          </h3>
          
          <div className="relative">
            {/* Connection line */}
            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-accent)] to-[var(--color-success)] -translate-y-1/2" />
            
            <div className="grid lg:grid-cols-4 gap-8">
              {[
                { step: 1, title: "Connect Google", desc: "Link your Google account to access Form responses" },
                { step: 2, title: "Share URL", desc: "Paste your Google Form or Sheets response URL" },
                { step: 3, title: "AI Analyzes", desc: "ClassLens grades, explains, and groups students" },
                { step: 4, title: "Get Report", desc: "Receive a beautiful report via email and dashboard" },
              ].map((item) => (
                <div key={item.step} className="relative text-center">
                  <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] text-white font-bold text-xl flex items-center justify-center shadow-lg relative z-10">
                    {item.step}
                  </div>
                  <h4 className="font-display text-lg font-semibold text-[var(--color-text)] mb-2">
                    {item.title}
                  </h4>
                  <p className="text-sm text-[var(--color-text-muted)]">{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}