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

interface CTASectionProps {
  className?: string;
  onGetStarted?: () => void;
}

const CTASection = React.forwardRef<HTMLElement, CTASectionProps>(
  ({ className, onGetStarted, ...props }, ref) => {
    return (
      <section
        ref={ref}
        className={cn(
          "relative py-20 sm:py-32 bg-gradient-to-br from-blue-600 to-purple-700 overflow-hidden",
          className,
        )}
        {...props}
      >
        {/* Background decoration */}
        <div className="absolute inset-0 bg-grid-white/[0.05] [mask-image:linear-gradient(0deg,transparent,black)]" />

        <div className="container relative">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="mb-6 text-3xl font-bold tracking-tight text-white sm:text-4xl">
              지금 바로 시작하세요
            </h2>
            <p className="mx-auto mb-10 max-w-2xl text-lg leading-8 text-blue-100">
              복잡한 Excel 작업을 AI로 간단하게. <br />
              무료로 체험해보고 생산성을 혁신하세요.
            </p>

            {/* Pricing preview */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
              <Card className="border-0 bg-white/10 backdrop-blur-sm text-white">
                <CardContent className="p-6 text-center">
                  <h3 className="mb-2 text-xl font-semibold">Free</h3>
                  <div className="mb-4">
                    <span className="text-3xl font-bold">₩0</span>
                    <span className="text-blue-200">/월</span>
                  </div>
                  <ul className="space-y-2 text-sm text-blue-100">
                    <li>• AI 쿼리 30회</li>
                    <li>• 셀 카운트 300개</li>
                    <li>• 10MB 파일 업로드</li>
                    <li>• 뷰어 모드만</li>
                  </ul>
                </CardContent>
              </Card>

              <Card className="border-2 border-yellow-400 bg-white/15 backdrop-blur-sm text-white scale-105 shadow-2xl">
                <CardContent className="p-6 text-center relative">
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-semibold">
                    추천
                  </div>
                  <h3 className="mb-2 text-xl font-semibold">Lite</h3>
                  <div className="mb-4">
                    <span className="text-3xl font-bold">₩5,900</span>
                    <span className="text-blue-200">/월</span>
                  </div>
                  <ul className="space-y-2 text-sm text-blue-100">
                    <li>• AI 쿼리 100회</li>
                    <li>• 셀 카운트 1,000개</li>
                    <li>• 10MB 파일 업로드</li>
                    <li>• 다운로드/복사 가능</li>
                  </ul>
                </CardContent>
              </Card>

              <Card className="border-0 bg-white/10 backdrop-blur-sm text-white">
                <CardContent className="p-6 text-center">
                  <h3 className="mb-2 text-xl font-semibold">Pro</h3>
                  <div className="mb-4">
                    <span className="text-3xl font-bold">₩14,900</span>
                    <span className="text-blue-200">/월</span>
                  </div>
                  <ul className="space-y-2 text-sm text-blue-100">
                    <li>• AI 쿼리 500회</li>
                    <li>• 셀 카운트 5,000개</li>
                    <li>• 50MB 파일 업로드</li>
                    <li>• 모든 기능 포함</li>
                  </ul>
                </CardContent>
              </Card>
            </div>

            {/* CTA buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Button
                size="lg"
                onClick={onGetStarted}
                className="bg-white text-blue-600 hover:bg-gray-50 px-8 py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
                aria-label="무료로 시작하기"
              >
                무료로 시작하기 →
              </Button>

              <Button
                variant="outline"
                size="lg"
                className="border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold"
                aria-label="데모 보기"
              >
                데모 보기
              </Button>
            </div>

            {/* Trust indicators */}
            <div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-8 text-blue-200">
              <div className="flex items-center gap-2">
                <svg
                  className="w-5 h-5 text-yellow-400"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                <span>완전 무료 시작</span>
              </div>
              <div className="flex items-center gap-2">
                <svg
                  className="w-5 h-5 text-green-400"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                    clipRule="evenodd"
                  />
                </svg>
                <span>설치 불필요</span>
              </div>
              <div className="flex items-center gap-2">
                <svg
                  className="w-5 h-5 text-blue-400"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                    clipRule="evenodd"
                  />
                </svg>
                <span>완전 프라이버시</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  },
);

CTASection.displayName = "CTASection";

export { CTASection };
