import React from 'react';
import Layout from './components/Layout';
import SectionCard from './components/SectionCard';
import { SECTIONS, MEETING_OVERVIEW } from './constants';
import { Calendar, User, Target, Lightbulb, ChefHat, Package } from 'lucide-react';

const App: React.FC = () => {
  return (
    <Layout>
      <div className="max-w-4xl mx-auto space-y-12">
        {/* Hero / Overview */}
        <div id="overview" className="relative overflow-hidden rounded-2xl bg-slate-900 p-8 sm:p-10 shadow-xl shadow-slate-200 scroll-mt-24">
          <div className="absolute top-0 right-0 p-8 opacity-10">
            <Package className="w-48 h-48 text-white rotate-12" />
          </div>
          
          <div className="relative z-10 space-y-6">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-indigo-500/20 text-indigo-300 rounded-full text-xs font-semibold border border-indigo-500/30">
              <Calendar className="w-3 h-3" />
              12월 23일(화) 예정 미팅
            </div>
            
            <div className="space-y-2">
              <h1 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
                KoDATA EW 리포트 <br className="sm:hidden" />
                <span className="text-indigo-400">인터뷰 계획안</span>
              </h1>
              <p className="text-slate-400 max-w-xl text-lg leading-relaxed">
                비용 효율성과 데이터 활용의 법적 안정성을 최우선으로 고려한 SAM 프로젝트의 핵심 질의 가이드라인입니다.
              </p>
            </div>

            <div className="grid sm:grid-cols-2 gap-4 pt-4">
              <div className="bg-white/5 border border-white/10 rounded-xl p-4 flex items-start gap-3">
                <User className="w-5 h-5 text-indigo-400 mt-1" />
                <div>
                  <p className="text-xs font-bold text-slate-500 uppercase tracking-widest">미팅 대상</p>
                  <p className="text-slate-200 font-medium">{MEETING_OVERVIEW.target}</p>
                </div>
              </div>
              <div className="bg-white/5 border border-white/10 rounded-xl p-4 flex items-start gap-3">
                <Target className="w-5 h-5 text-indigo-400 mt-1" />
                <div>
                  <p className="text-xs font-bold text-slate-500 uppercase tracking-widest">주요 목적</p>
                  <ul className="text-slate-200 font-medium text-sm list-disc list-inside">
                    {MEETING_OVERVIEW.purpose.map((p, i) => (
                      <li key={i}>{p}</li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Stats Summary */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { label: '총 질문수', value: '13건', color: 'text-slate-900' },
            { label: '필수 항목', value: '6건', color: 'text-rose-600' },
            { label: '미팅 시간', value: '오전 예정', color: 'text-slate-900' },
            { label: '전략 우선순위', value: '비용/법무', color: 'text-indigo-600' },
          ].map((stat, i) => (
            <div key={i} className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{stat.label}</p>
              <p className={`text-xl font-bold ${stat.color}`}>{stat.value}</p>
            </div>
          ))}
        </div>

        {/* Sections */}
        <div className="space-y-12">
          {SECTIONS.map((section) => (
            <SectionCard key={section.id} section={section} />
          ))}
        </div>

        {/* Tips Section */}
        <div id="tips" className="scroll-mt-24 space-y-6">
          <div className="flex items-center gap-2 mb-4">
            <Lightbulb className="w-6 h-6 text-amber-500" />
            <h3 className="text-2xl font-bold text-slate-800">인터뷰 협상 전략 및 팁</h3>
          </div>

          <div className="bg-amber-50 border border-amber-100 rounded-2xl p-6 sm:p-8 space-y-6 shadow-sm">
            <p className="text-amber-900 font-medium leading-relaxed italic border-l-4 border-amber-300 pl-4">
              "데이터의 소유권은 KoDATA에 있지만, 활용권은 SAM 프로젝트에 있다"는 점을 명확히 하고, 가공된 데이터가 KoDATA의 원본 데이터를 대체하는 경쟁 상품이 되지 않음을 강조하십시오.
            </p>

            <div className="grid sm:grid-cols-2 gap-6 pt-4">
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="p-2 bg-amber-200 rounded-lg text-amber-800">
                    <ChefHat className="w-5 h-5" />
                  </div>
                  <h4 className="font-bold text-amber-900">식재료와 레시피의 비유</h4>
                </div>
                <p className="text-sm text-amber-800/80 leading-relaxed">
                  이 과정은 마치 <strong>고급 식재료(KoDATA 데이터)</strong>를 구매하여 우리만의 <strong>레시피(SAM 프로젝트)</strong>로 요리해 손님에게 대접할 때의 과정과 같습니다.
                </p>
              </div>

              <div className="space-y-3 bg-white/50 p-4 rounded-xl border border-amber-200/50">
                <h5 className="text-xs font-bold text-amber-900 uppercase tracking-wider flex items-center gap-2">
                  <span className="w-1 h-1 bg-amber-500 rounded-full"></span>
                  협상 포인트
                </h5>
                <ul className="space-y-2">
                  {[
                    "이 요리를 우리 메뉴로 팔아도 되는가? (활용권)",
                    "재료비는 얼마나 깎아줄 수 있는가? (대량 할인)",
                    "재료 공급이 중단될 경우 대안은? (연속성)"
                  ].map((item, idx) => (
                    <li key={idx} className="text-sm text-amber-900 flex gap-2">
                      <span className="text-amber-500 shrink-0">✔</span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default App;