import { PROBLEM_CARDS, PROBLEM_CARD_STAGGER } from "@/features/home/content/problem";
import { useInView } from "@/hooks/useInView";

export function ProblemSection() {
  const { ref, inView } = useInView<HTMLElement>();

  return (
    <section id="problem" ref={ref} className="py-24 bg-neutral-10 px-6 relative overflow-hidden">
      <div className="max-w-6xl mx-auto">

        <div className={`text-center mb-16 ${inView ? "animate-fade-in-up" : "opacity-0"}`}>
          <h2 className="headline-30 md:display-48 text-navy-900 mb-4 break-keep">
            Premium Medical Marketing is Hard
          </h2>
          <p className="body-18 text-neutral-70 max-w-2xl mx-auto break-keep">
            병원 마케팅이 직면한 3가지 핵심 과제
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6">
          {PROBLEM_CARDS.map((problem, idx) => (
            <div
              key={problem.title}
              className={`bg-white rounded-2xl p-8 md:p-10 border border-neutral-20 shadow-sm hover:shadow-md transition-shadow flex flex-col justify-center ${
                inView ? `animate-fade-in-up ${PROBLEM_CARD_STAGGER[idx]}` : "opacity-0"
              }`}
            >
              <h3
                className={`font-sans headline-24 mb-4 break-keep ${
                  problem.highlight
                    ? "text-transparent bg-clip-text bg-gradient-to-r from-violet-700 to-violet-500"
                    : "text-navy-900"
                }`}
              >
                {problem.title}
              </h3>
              <p className="body-16 text-neutral-70 leading-relaxed break-keep">{problem.desc}</p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}