"use client";

import React from "react";
import clsx from "clsx";

interface StarterHeroProps {
  title?: string;
  subtitle?: string;
  ctaText?: string;
  ctaLink?: string;
  backgroundImage?: string;
  className?: string;
  theme?: {
    primaryColor?: string;
    secondaryColor?: string;
    fontFamily?: string;
  };
}

export function StarterHero({
  title = "환영합니다",
  subtitle = "귀하의 비즈니스를 위한 완벽한 솔루션을 제공합니다",
  ctaText = "시작하기",
  ctaLink = "#contact",
  backgroundImage,
  className,
  theme = {},
}: StarterHeroProps) {
  const {
    primaryColor = "#3b82f6",
    secondaryColor = "#64748b",
    fontFamily = "Inter, sans-serif",
  } = theme;

  const heroStyles = {
    fontFamily,
    "--primary-color": primaryColor,
    "--secondary-color": secondaryColor,
  } as React.CSSProperties;

  return (
    <section
      className={clsx(
        "relative min-h-[500px] flex items-center justify-center",
        "bg-gradient-to-br from-blue-50 to-indigo-100",
        "px-4 py-16 sm:px-6 lg:px-8",
        className
      )}
      style={heroStyles}
    >
      {/* 배경 이미지 */}
      {backgroundImage && (
        <div
          className="absolute inset-0 bg-cover bg-center opacity-20"
          style={{ backgroundImage: `url(${backgroundImage})` }}
        />
      )}

      {/* 오버레이 */}
      <div className="absolute inset-0 bg-black/10" />

      {/* 콘텐츠 */}
      <div className="relative z-10 max-w-4xl mx-auto text-center">
        <h1
          className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6"
          style={{ color: primaryColor }}
        >
          {title}
        </h1>

        <p
          className="text-lg sm:text-xl lg:text-2xl mb-8 max-w-2xl mx-auto"
          style={{ color: secondaryColor }}
        >
          {subtitle}
        </p>

        <a
          href={ctaLink}
          className={clsx(
            "inline-flex items-center justify-center",
            "px-8 py-3 text-base font-medium rounded-lg",
            "transition-all duration-200",
            "hover:scale-105 hover:shadow-lg",
            "focus:outline-none focus:ring-2 focus:ring-offset-2"
          )}
          style={{
            backgroundColor: primaryColor,
            color: "white",
          }}
        >
          {ctaText}
        </a>
      </div>

      {/* 장식 요소 */}
      <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-purple-600" />
    </section>
  );
}

export default StarterHero;