"use client";

import React from "react";
import clsx from "clsx";
import Image from "next/image";

interface StarterAboutProps {
  title?: string;
  content?: string;
  image?: string;
  imageAlt?: string;
  className?: string;
  layout?: "left" | "right";
  theme?: {
    primaryColor?: string;
    secondaryColor?: string;
    fontFamily?: string;
  };
}

export function StarterAbout({
  title = "회사 소개",
  content = "저희는 고객의 성공을 위해 최선을 다하는 전문적인 서비스를 제공합니다. 오랜 경험과 노하우를 바탕으로 최고의 솔루션을 제안드립니다.",
  image = "/images/about-placeholder.jpg",
  imageAlt = "About us",
  className,
  layout = "right",
  theme = {},
}: StarterAboutProps) {
  const {
    primaryColor = "#3b82f6",
    secondaryColor = "#64748b",
    fontFamily = "Inter, sans-serif",
  } = theme;

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

  return (
    <section
      className={clsx("py-16 px-4 sm:px-6 lg:px-8", "bg-white", className)}
      style={sectionStyles}
    >
      <div className="max-w-7xl mx-auto">
        <div
          className={clsx(
            "grid grid-cols-1 lg:grid-cols-2 gap-12 items-center",
            layout === "left" ? "lg:grid-flow-col-dense" : ""
          )}
        >
          {/* 텍스트 콘텐츠 */}
          <div
            className={clsx(
              "space-y-6",
              layout === "left" ? "lg:col-start-2" : "lg:col-start-1"
            )}
          >
            <h2
              className="text-3xl sm:text-4xl font-bold"
              style={{ color: primaryColor }}
            >
              {title}
            </h2>

            <div className="prose prose-lg max-w-none">
              {content.split("\n").map((paragraph, index) => (
                <p
                  key={index}
                  className="text-lg leading-relaxed"
                  style={{ color: secondaryColor }}
                >
                  {paragraph}
                </p>
              ))}
            </div>

            {/* 특징 목록 (Starter 티어 기본) */}
            <div className="mt-8">
              <ul className="space-y-3">
                {[
                  "전문적인 서비스 제공",
                  "고객 만족 최우선",
                  "신뢰할 수 있는 파트너",
                ].map((feature, index) => (
                  <li key={index} className="flex items-center space-x-3">
                    <div
                      className="w-2 h-2 rounded-full"
                      style={{ backgroundColor: primaryColor }}
                    />
                    <span
                      className="text-base"
                      style={{ color: secondaryColor }}
                    >
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* 이미지 */}
          <div
            className={clsx(
              "relative",
              layout === "left" ? "lg:col-start-1" : "lg:col-start-2"
            )}
          >
            <div className="relative h-96 w-full rounded-lg overflow-hidden shadow-lg">
              <Image
                src={image}
                alt={imageAlt}
                fill
                className="object-cover"
                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
              />
            </div>

            {/* 장식 요소 */}
            <div
              className="absolute -bottom-4 -right-4 w-full h-full rounded-lg opacity-20 -z-10"
              style={{ backgroundColor: primaryColor }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

export default StarterAbout;