import * as React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./card";
import { cn } from "../../lib/utils";

interface FeaturesSectionProps {
  className?: string;
}

const FeaturesSection = React.forwardRef<HTMLElement, FeaturesSectionProps>(
  ({ className, ...props }, ref) => {
    const features = [
      {
        icon: "📊",
        title: "클라이언트-사이드 파일 처리",
        description:
          "XLS, XLSX 파일을 브라우저에서 직접 처리. 서버 전송 없이 완전한 프라이버시 보장.",
        highlights: [
          "50MB 대용량 파일 지원",
          "한글 파일명/시트명 완벽 지원",
          "변환 실패시 대안 경로 제공",
        ],
      },
      {
        icon: "🤖",
        title: "자연어 스프레드시트 조작",
        description: "복잡한 Excel 기능을 자연어로 간단하게 조작하세요.",
        highlights: ["빈 셀 자동 채우기", "조건부 서식 적용", "수식 자동 생성"],
      },
      {
        icon: "📈",
        title: "AI 기반 데이터 분석",
        description:
          "패턴 분석, 이상치 탐지, 통계 요약을 AI가 자동으로 수행합니다.",
        highlights: [
          "매출 상위 5% 자동 강조",
          "패턴 및 이상치 탐지",
          "통계 요약 리포트",
        ],
      },
      {
        icon: "📊",
        title: "자동 시각화",
        description:
          "데이터에 가장 적합한 차트를 AI가 추천하고 자동으로 생성합니다.",
        highlights: [
          "적합 차트 자동 추천",
          "실시간 차트 렌더링",
          "다양한 차트 타입 지원",
        ],
      },
      {
        icon: "⚡",
        title: "사용자 친화 인터페이스",
        description:
          "직관적이고 반응성이 뛰어난 인터페이스로 누구나 쉽게 사용할 수 있습니다.",
        highlights: [
          "실시간 입력 유효성 검사",
          "작업 히스토리 되돌리기",
          "한국어/영어 다국어 지원",
        ],
      },
      {
        icon: "🛡️",
        title: "보안 & 성능",
        description: "최고 수준의 보안과 최적화된 성능을 제공합니다.",
        highlights: [
          "브라우저 메모리 로드",
          "Web Worker 청크 처리",
          "60FPS 가상 렌더링",
        ],
      },
    ];

    return (
      <section
        ref={ref}
        className={cn("py-20 sm:py-32 bg-white", className)}
        {...props}
      >
        <div className="container">
          <div className="mx-auto max-w-2xl text-center mb-16">
            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-4">
              강력한 기능들
            </h2>
            <p className="text-lg leading-8 text-gray-600">
              AI 기술과 최신 웹 기술을 결합하여 Excel 작업을 혁신적으로
              바꿔보세요
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <Card
                key={index}
                className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-gradient-to-br from-white to-gray-50"
              >
                <CardHeader className="pb-4">
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-blue-500 to-purple-600">
                    <span className="text-2xl">{feature.icon}</span>
                  </div>
                  <CardTitle className="text-xl font-semibold text-gray-900">
                    {feature.title}
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-0">
                  <p className="text-gray-600 mb-4 leading-relaxed">
                    {feature.description}
                  </p>
                  <ul className="space-y-2">
                    {feature.highlights.map((highlight, highlightIndex) => (
                      <li
                        key={highlightIndex}
                        className="flex items-start text-sm text-gray-700"
                      >
                        <svg
                          className="mr-2 mt-0.5 h-4 w-4 text-green-500 flex-shrink-0"
                          fill="currentColor"
                          viewBox="0 0 20 20"
                        >
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                        {highlight}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  },
);

FeaturesSection.displayName = "FeaturesSection";

export { FeaturesSection };
