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

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

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

        <div className="container relative">
          <div className="mx-auto max-w-4xl text-center">
            {/* Badge */}
            <div className="mb-8 inline-flex items-center rounded-full bg-blue-50 px-6 py-2 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
              🎉 AI 기반 Excel 편집 도구 출시!
            </div>

            {/* Main heading */}
            <h1 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
              All in One{" "}
              <span className="bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
                Excel AI
              </span>
            </h1>

            {/* Subtitle */}
            <p className="mx-auto mb-10 max-w-2xl text-lg leading-8 text-gray-600">
              자연어로 Excel을 편집하세요. AI가 수식, 차트, 분석을 자동으로
              생성합니다.
              <br />
              <strong className="text-gray-900">
                모든 처리는 브라우저에서 안전하게!
              </strong>
            </p>

            {/* CTA buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
              <Button
                size="lg"
                onClick={onGetStarted}
                className="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white px-8 py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
                aria-label="sheetEasy AI 시작하기"
              >
                시작하기 →
              </Button>

              <Button
                variant="outline"
                size="lg"
                className="px-8 py-3 text-lg font-semibold"
                aria-label="기능 둘러보기"
              >
                기능 둘러보기
              </Button>
            </div>

            {/* Features preview */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
              <Card className="border-0 shadow-md bg-white/50 backdrop-blur-sm hover:shadow-lg transition-shadow duration-300">
                <CardContent className="p-6 text-center">
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-green-100">
                    <span className="text-2xl">🔒</span>
                  </div>
                  <h3 className="mb-2 text-lg font-semibold text-gray-900">
                    완전한 프라이버시
                  </h3>
                  <p className="text-sm text-gray-600">
                    파일이 서버로 전송되지 않습니다.
                    <br />
                    모든 처리는 브라우저에서 안전하게!
                  </p>
                </CardContent>
              </Card>

              <Card className="border-0 shadow-md bg-white/50 backdrop-blur-sm hover:shadow-lg transition-shadow duration-300">
                <CardContent className="p-6 text-center">
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100">
                    <span className="text-2xl">🤖</span>
                  </div>
                  <h3 className="mb-2 text-lg font-semibold text-gray-900">
                    AI 자동 처리
                  </h3>
                  <p className="text-sm text-gray-600">
                    자연어로 명령하면 AI가
                    <br />
                    수식과 차트를 자동 생성합니다.
                  </p>
                </CardContent>
              </Card>

              <Card className="border-0 shadow-md bg-white/50 backdrop-blur-sm hover:shadow-lg transition-shadow duration-300">
                <CardContent className="p-6 text-center">
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100">
                    <span className="text-2xl">⚡</span>
                  </div>
                  <h3 className="mb-2 text-lg font-semibold text-gray-900">
                    3-스텝 간편함
                  </h3>
                  <p className="text-sm text-gray-600">
                    업로드 → 프롬프트 → 다운로드
                    <br />
                    복잡한 설정 없이 바로 사용!
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>
    );
  },
);

HeroSection.displayName = "HeroSection";

export { HeroSection };