import { useState, useEffect } from "react";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { ContactModal } from "./ContactModal";
import { Footer } from "./Footer";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetDescription } from "./ui/sheet";
import { 
  Factory, 
  CheckSquare, 
  Package, 
  TrendingUp, 
  Shield, 
  BarChart3,
  Award,
  ArrowRight,
  Building2,
  Sparkles,
  Target,
  Star,
  Cpu,
  Activity,
  Users,
  Zap,
  Settings,
  FileText,
  Menu,
  Home
} from "lucide-react";

interface LandingPageProps {
  onNavigateToDemoRequest: () => void;
  onNavigateToSalesDashboard: () => void;
  onNavigateToDashboard: () => void;
  onNavigateToLogin: () => void;
  onNavigateToSignup: () => void;
  viewMode: "client" | "sales";
  onViewModeChange: (mode: "client" | "sales") => void;
}

export function LandingPage({ onNavigateToDemoRequest, onNavigateToSalesDashboard, onNavigateToDashboard, onNavigateToLogin, onNavigateToSignup, viewMode, onViewModeChange }: LandingPageProps) {
  const [isVisible, setIsVisible] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const handleDemoRequest = () => {
    setIsModalOpen(true);
    setIsMobileMenuOpen(false);
  };

  // 플로팅 기능 카드 데이터
  const floatingFeatures = [
    { icon: Factory, title: "생산 관리", subtitle: "실시간 현황", color: "bg-blue-500", position: "top-20 left-10" },
    { icon: CheckSquare, title: "품질 관리", subtitle: "불량 추적", color: "bg-green-500", position: "top-40 right-20" },
    { icon: Package, title: "자재 관리", subtitle: "재고 최적화", color: "bg-orange-500", position: "bottom-40 left-20" },
    { icon: Cpu, title: "설비 관리", subtitle: "가동률 모니터링", color: "bg-purple-500", position: "top-60 left-1/4" },
    { icon: BarChart3, title: "실시간 분석", subtitle: "데이터 기반 의사결정", color: "bg-indigo-500", position: "bottom-32 right-1/4" },
    { icon: Users, title: "인사 관리", subtitle: "근태 및 급여", color: "bg-pink-500", position: "top-32 right-1/3" },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 via-white to-gray-50">
      {/* Header */}
      <header className="backdrop-blur-md bg-white/95 border-b border-gray-200/50 sticky top-0 z-50 shadow-sm">
        <div className="container mx-auto px-4 sm:px-6 py-4">
          <div className="flex items-center justify-between">
            {/* 로고 - 좌측 */}
            <button className="flex items-center space-x-3 sm:space-x-4 hover:scale-105 transition-transform self-start">
              <div className="w-10 h-10 rounded-xl flex items-center justify-center shadow-md relative overflow-hidden bg-gradient-to-br from-blue-500 to-blue-600">
                <div className="text-white font-bold text-lg">S</div>
              </div>
              <div className="space-y-0">
                <h1 className="font-bold text-gray-900 text-left leading-tight">SAM</h1>
                <p className="text-xs text-gray-500 text-left leading-tight">Smart Automation Management</p>
              </div>
            </button>
            
            {/* 데스크톱 메뉴 (xl 이상) */}
            <div className="hidden xl:flex items-center gap-3">
              {/* View Mode Toggle */}
              <div className="flex items-center gap-2 bg-gray-100 rounded-full p-1">
                <button
                  onClick={() => onViewModeChange("client")}
                  className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
                    viewMode === "client"
                      ? "bg-white text-blue-600 shadow-md"
                      : "text-gray-600 hover:text-gray-900"
                  }`}
                >
                  클라이언트 화면
                </button>
                <button
                  onClick={() => onViewModeChange("sales")}
                  className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
                    viewMode === "sales"
                      ? "bg-white text-blue-600 shadow-md"
                      : "text-gray-600 hover:text-gray-900"
                  }`}
                >
                  영업사원 화면
                </button>
              </div>
              
              <Button 
                onClick={onNavigateToDashboard} 
                className="rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-lg px-6"
              >
                대시보드로 이동
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
              
              {viewMode === "client" ? (
                <Button 
                  onClick={handleDemoRequest} 
                  variant="outline"
                  className="rounded-full border-2 border-blue-600 text-blue-600 hover:bg-blue-50 px-6"
                >
                  데모 요청
                </Button>
              ) : (
                <Button 
                  onClick={onNavigateToSalesDashboard} 
                  className="rounded-full bg-purple-600 hover:bg-purple-700 text-white shadow-lg px-6"
                >
                  리드 관리
                </Button>
              )}
            </div>

            {/* 모바일/태블릿 메뉴 (xl 미만) - 우측에 아이콘 버튼들과 햄버거 */}
            <div className="flex xl:hidden items-center gap-2">
              {/* 아이콘 버튼들 */}
              <Button 
                onClick={onNavigateToDashboard} 
                size="sm"
                variant="ghost"
                className="rounded-xl px-3 hover:bg-gray-100"
                title="대시보드로 이동"
              >
                <Home className="h-4 w-4" />
              </Button>
              
              {viewMode === "sales" && (
                <Button 
                  onClick={onNavigateToSalesDashboard} 
                  size="sm"
                  variant="ghost"
                  className="rounded-xl px-3 hover:bg-gray-100"
                  title="리드 관리"
                >
                  <Users className="h-4 w-4" />
                </Button>
              )}

              {/* 햄버거 메뉴 - 맨 우측 */}
              <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
                <SheetTrigger asChild>
                  <Button 
                    variant="ghost" 
                    size="sm"
                    className="rounded-xl px-3 hover:bg-gray-100"
                  >
                    <Menu className="h-4 w-4" />
                  </Button>
                </SheetTrigger>
                <SheetContent side="right" className="w-[300px] sm:w-[350px]">
                  <SheetHeader>
                    <SheetTitle>메뉴</SheetTitle>
                    <SheetDescription>
                      SAM 서비스 이용을 위한 메뉴입니다.
                    </SheetDescription>
                  </SheetHeader>
                  <div className="flex flex-col gap-3 mt-2 px-2">
                    {/* Primary Actions */}
                    <div className="space-y-2">
                      <div className="text-xs uppercase tracking-wider text-gray-500 px-2 mb-2">
                        주요 메뉴
                      </div>
                      <button 
                        onClick={() => {
                          onNavigateToDashboard();
                          setIsMobileMenuOpen(false);
                        }}
                        className="w-full flex items-center gap-3 px-3 py-4 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/20 active:scale-[0.98] transition-transform touch-manipulation"
                      >
                        <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-white/20 backdrop-blur-sm flex-shrink-0">
                          <Home className="h-5 w-5" />
                        </div>
                        <div className="flex-1 text-left min-w-0">
                          <div className="font-semibold text-sm">대시보드</div>
                          <div className="text-xs text-blue-100 mt-0.5 truncate">메인 화면으로 이동</div>
                        </div>
                        <ArrowRight className="h-4 w-4 text-white/70 flex-shrink-0" />
                      </button>
                      
                      {viewMode === "client" ? (
                        <button 
                          onClick={handleDemoRequest}
                          className="w-full flex items-center gap-3 px-3 py-4 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/20 active:scale-[0.98] transition-transform touch-manipulation"
                        >
                          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-white/20 backdrop-blur-sm flex-shrink-0">
                            <Sparkles className="h-5 w-5" />
                          </div>
                          <div className="flex-1 text-left min-w-0">
                            <div className="font-semibold text-sm">데모 요청</div>
                            <div className="text-xs text-purple-100 mt-0.5 truncate">무료 체험 신청</div>
                          </div>
                          <ArrowRight className="h-4 w-4 text-white/70 flex-shrink-0" />
                        </button>
                      ) : (
                        <button 
                          onClick={() => {
                            onNavigateToSalesDashboard();
                            setIsMobileMenuOpen(false);
                          }}
                          className="w-full flex items-center gap-3 px-3 py-4 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg shadow-purple-500/20 active:scale-[0.98] transition-transform touch-manipulation"
                        >
                          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-white/20 backdrop-blur-sm flex-shrink-0">
                            <Users className="h-5 w-5" />
                          </div>
                          <div className="flex-1 text-left min-w-0">
                            <div className="font-semibold text-sm">리드 관리</div>
                            <div className="text-xs text-purple-100 mt-0.5 truncate">영업 대시보드</div>
                          </div>
                          <ArrowRight className="h-4 w-4 text-white/70 flex-shrink-0" />
                        </button>
                      )}
                    </div>

                    {/* Secondary Actions */}
                    <div className="space-y-2 pt-2 border-t border-gray-200">
                      <div className="text-xs uppercase tracking-wider text-gray-500 px-2 mb-2">
                        계정
                      </div>
                      <button 
                        onClick={() => {
                          onNavigateToLogin();
                          setIsMobileMenuOpen(false);
                        }}
                        className="w-full flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gray-100 active:bg-gray-200 transition-colors touch-manipulation"
                      >
                        <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gray-100 flex-shrink-0">
                          <Settings className="h-4 w-4 text-gray-600" />
                        </div>
                        <div className="flex-1 text-left min-w-0">
                          <div className="font-medium text-sm text-gray-900">로그인</div>
                        </div>
                      </button>
                      
                      <button 
                        onClick={() => {
                          onNavigateToSignup();
                          setIsMobileMenuOpen(false);
                        }}
                        className="w-full flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-gray-100 active:bg-gray-200 transition-colors touch-manipulation"
                      >
                        <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gray-100 flex-shrink-0">
                          <FileText className="h-4 w-4 text-gray-600" />
                        </div>
                        <div className="flex-1 text-left min-w-0">
                          <div className="font-medium text-sm text-gray-900">데모 신청</div>
                        </div>
                      </button>
                    </div>

                    {/* View Mode Toggle in Mobile Menu */}
                    <div className="space-y-2 pt-2 border-t border-gray-200">
                      <div className="text-xs uppercase tracking-wider text-gray-500 px-2 mb-2">
                        화면 모드
                      </div>
                      <div className="flex gap-2 px-2">
                        <button
                          onClick={() => {
                            onViewModeChange("client");
                            setIsMobileMenuOpen(false);
                          }}
                          className={`flex-1 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
                            viewMode === "client"
                              ? "bg-blue-600 text-white shadow-md"
                              : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                          }`}
                        >
                          클라이언트
                        </button>
                        <button
                          onClick={() => {
                            onViewModeChange("sales");
                            setIsMobileMenuOpen(false);
                          }}
                          className={`flex-1 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
                            viewMode === "sales"
                              ? "bg-blue-600 text-white shadow-md"
                              : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                          }`}
                        >
                          영업사원
                        </button>
                      </div>
                    </div>
                  </div>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section with Infographic Style */}
      <section className="relative py-20 md:py-32 overflow-hidden">
        {/* Decorative Background Elements */}
        <div className="absolute inset-0 pointer-events-none">
          {/* Wave patterns */}
          <svg className="absolute top-20 left-0 w-32 h-32 text-blue-200 opacity-50" viewBox="0 0 100 100">
            <path d="M0 50 Q 25 40, 50 50 T 100 50" stroke="currentColor" fill="none" strokeWidth="2"/>
            <path d="M0 60 Q 25 50, 50 60 T 100 60" stroke="currentColor" fill="none" strokeWidth="2"/>
            <path d="M0 70 Q 25 60, 50 70 T 100 70" stroke="currentColor" fill="none" strokeWidth="2"/>
          </svg>
          
          <svg className="absolute bottom-20 right-0 w-32 h-32 text-purple-200 opacity-50" viewBox="0 0 100 100">
            <path d="M0 50 Q 25 40, 50 50 T 100 50" stroke="currentColor" fill="none" strokeWidth="2"/>
            <path d="M0 60 Q 25 50, 50 60 T 100 60" stroke="currentColor" fill="none" strokeWidth="2"/>
            <path d="M0 70 Q 25 60, 50 70 T 100 70" stroke="currentColor" fill="none" strokeWidth="2"/>
          </svg>

          {/* Dot patterns */}
          <div className="absolute top-40 right-20 grid grid-cols-4 gap-2 opacity-20">
            {[...Array(16)].map((_, i) => (
              <div key={i} className="w-2 h-2 rounded-full bg-blue-400"></div>
            ))}
          </div>
          
          <div className="absolute bottom-60 left-32 grid grid-cols-4 gap-2 opacity-20">
            {[...Array(16)].map((_, i) => (
              <div key={i} className="w-2 h-2 rounded-full bg-purple-400"></div>
            ))}
          </div>
        </div>

        <div className="container mx-auto px-6 relative z-10">
          {/* Main Hero Content */}
          <div className="text-center max-w-4xl mx-auto mb-16">
            <Badge className="mb-6 bg-blue-100 text-blue-700 border-0 rounded-full px-4 py-1.5">
              <Sparkles className="w-3.5 h-3.5 inline mr-2" />
              SAM
            </Badge>
            
            <h1 className="mb-6 text-gray-900 leading-tight">
              <span className="block text-4xl md:text-6xl font-extrabold mb-3">
                The Ultimate Manufacturing
              </span>
              <span className="block text-4xl md:text-6xl font-extrabold">
                & Business Management Solution
              </span>
            </h1>
            
            <p className="mb-12 text-gray-600 text-lg md:text-xl max-w-3xl mx-auto leading-relaxed">
              생산부터 품질, 자재, 설비까지 모든 제조 프로세스를 자동화하고 관리하세요.<br />
              SAM으로 스마트 팩토리를 구축하고 생산성을 극대화하세요.
            </p>
          </div>

          {/* Infographic Section with Floating Cards */}
          <div className="relative max-w-6xl mx-auto h-[600px]">
            {/* Floating Feature Cards - Hidden on mobile, visible on desktop */}
            <div className="hidden lg:block">
              {/* Top Left - 생산 관리 */}
              <div 
                className={`absolute top-12 left-8 ${isVisible ? 'animate-float' : 'opacity-0'}`}
                style={{ animationDelay: '0s' }}
              >
                <div className="bg-white rounded-2xl shadow-lg p-4 flex items-center gap-3 hover:shadow-xl transition-shadow">
                  <div className="w-12 h-12 rounded-xl bg-blue-500 flex items-center justify-center flex-shrink-0">
                    <Factory className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-gray-900">생산 관리</div>
                    <div className="text-sm text-gray-500">실시간 현황</div>
                  </div>
                </div>
              </div>

              {/* Top Right - 품질 관리 */}
              <div 
                className={`absolute top-24 right-12 ${isVisible ? 'animate-float' : 'opacity-0'}`}
                style={{ animationDelay: '0.2s' }}
              >
                <div className="bg-white rounded-2xl shadow-lg p-4 flex items-center gap-3 hover:shadow-xl transition-shadow">
                  <div className="w-12 h-12 rounded-xl bg-green-500 flex items-center justify-center flex-shrink-0">
                    <CheckSquare className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-gray-900">품질 관리</div>
                    <div className="text-sm text-gray-500">불량 추적</div>
                  </div>
                </div>
              </div>

              {/* Left Middle - 설비 관리 */}
              <div 
                className={`absolute top-48 left-4 ${isVisible ? 'animate-float' : 'opacity-0'}`}
                style={{ animationDelay: '0.4s' }}
              >
                <div className="bg-white rounded-2xl shadow-lg p-4 flex items-center gap-3 hover:shadow-xl transition-shadow">
                  <div className="w-12 h-12 rounded-xl bg-purple-500 flex items-center justify-center flex-shrink-0">
                    <Cpu className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-gray-900">설비 관리</div>
                    <div className="text-sm text-gray-500">가동률 모니터링</div>
                  </div>
                </div>
              </div>

              {/* Right Middle - 인사 관리 */}
              <div 
                className={`absolute top-40 right-6 ${isVisible ? 'animate-float' : 'opacity-0'}`}
                style={{ animationDelay: '0.6s' }}
              >
                <div className="bg-white rounded-2xl shadow-lg p-4 flex items-center gap-3 hover:shadow-xl transition-shadow">
                  <div className="w-12 h-12 rounded-xl bg-pink-500 flex items-center justify-center flex-shrink-0">
                    <Users className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-gray-900">인사 관리</div>
                    <div className="text-sm text-gray-500">근태 및 급여</div>
                  </div>
                </div>
              </div>

              {/* Bottom Left - 자재 관리 */}
              <div 
                className={`absolute bottom-20 left-16 ${isVisible ? 'animate-float' : 'opacity-0'}`}
                style={{ animationDelay: '0.8s' }}
              >
                <div className="bg-white rounded-2xl shadow-lg p-4 flex items-center gap-3 hover:shadow-xl transition-shadow">
                  <div className="w-12 h-12 rounded-xl bg-orange-500 flex items-center justify-center flex-shrink-0">
                    <Package className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-gray-900">자재 관리</div>
                    <div className="text-sm text-gray-500">재고 최적화</div>
                  </div>
                </div>
              </div>

              {/* Bottom Right - 실시간 분석 */}
              <div 
                className={`absolute bottom-28 right-20 ${isVisible ? 'animate-float' : 'opacity-0'}`}
                style={{ animationDelay: '1s' }}
              >
                <div className="bg-white rounded-2xl shadow-lg p-4 flex items-center gap-3 hover:shadow-xl transition-shadow">
                  <div className="w-12 h-12 rounded-xl bg-indigo-500 flex items-center justify-center flex-shrink-0">
                    <BarChart3 className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-gray-900">실시간 분석</div>
                    <div className="text-sm text-gray-500">데이터 인사이트</div>
                  </div>
                </div>
              </div>

              {/* Avatar-like icons */}
              <div className={`absolute top-32 left-1/3 ${isVisible ? 'animate-float' : 'opacity-0'}`} style={{ animationDelay: '0.3s' }}>
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg flex items-center justify-center">
                  <Factory className="w-7 h-7 text-white" />
                </div>
              </div>

              <div className={`absolute bottom-40 right-1/3 ${isVisible ? 'animate-float' : 'opacity-0'}`} style={{ animationDelay: '0.7s' }}>
                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 shadow-lg flex items-center justify-center">
                  <Award className="w-7 h-7 text-white" />
                </div>
              </div>
            </div>

            {/* Center Dashboard Mockup */}
            <div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-3xl transition-all duration-1000 ${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}>
              <div className="relative">
                <div className="absolute -inset-2 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-3xl blur-2xl opacity-20"></div>
                <div className="relative bg-white rounded-2xl shadow-2xl overflow-hidden border-2 border-gray-100">
                  {/* Browser Chrome */}
                  <div className="bg-gray-100 px-4 py-3 flex items-center justify-between border-b border-gray-200">
                    <div className="flex items-center space-x-2">
                      <div className="w-3 h-3 rounded-full bg-red-400"></div>
                      <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                      <div className="w-3 h-3 rounded-full bg-green-400"></div>
                    </div>
                    <div className="flex-1 mx-4 bg-white rounded-lg px-3 py-1 text-xs text-gray-500 text-center">
                      https://sam-mes.com/dashboard
                    </div>
                    <div className="w-16"></div>
                  </div>
                  
                  {/* Dashboard Content */}
                  <div className="p-6 bg-gradient-to-br from-gray-50 to-white">
                    {/* Stats Cards */}
                    <div className="grid grid-cols-3 gap-3 mb-4">
                      <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-4 shadow-md">
                        <div className="text-white/80 text-xs mb-1">생산 현황</div>
                        <div className="text-white text-2xl font-bold">94.2%</div>
                        <div className="text-white/70 text-xs mt-1">↑ 12.5%</div>
                      </div>
                      <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-4 shadow-md">
                        <div className="text-white/80 text-xs mb-1">품질 지수</div>
                        <div className="text-white text-2xl font-bold">98.5</div>
                        <div className="text-white/70 text-xs mt-1">↑ 8.2%</div>
                      </div>
                      <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-4 shadow-md">
                        <div className="text-white/80 text-xs mb-1">가동률</div>
                        <div className="text-white text-2xl font-bold">87.3%</div>
                        <div className="text-white/70 text-xs mt-1">↑ 15.1%</div>
                      </div>
                    </div>
                    
                    {/* Chart */}
                    <div className="bg-white rounded-xl p-4 shadow-sm">
                      <div className="h-32 relative">
                        <div className="absolute inset-0 flex items-end justify-between space-x-0.5">
                          {[65, 75, 60, 85, 70, 90, 75, 80, 85, 78, 88, 92, 95, 90, 88, 85, 92, 88].map((height, i) => (
                            <div 
                              key={i}
                              className="flex-1 bg-gradient-to-t from-blue-500 to-purple-500 rounded-t hover:from-blue-600 hover:to-purple-600 transition-all"
                              style={{ height: `${height}%` }}
                            ></div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why SAM Section */}
      <section className="relative py-16 bg-white">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 max-w-3xl mx-auto">
            <h2 className="mb-4 text-gray-900 text-3xl md:text-4xl font-extrabold">
              Why <span className="text-blue-600">SAM</span>
            </h2>
            <p className="text-gray-600 text-lg">
              중소·중견기업의 제조 현장을 위해 설계된 통합 MES 솔루션으로<br />
              생산성을 극대화하고 디지털 전환을 가속화하세요
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {[
              { 
                icon: Zap, 
                title: "빠른 도입", 
                desc: "복잡한 설정 없이 3일 내 구축 가능",
                color: "bg-yellow-500"
              },
              { 
                icon: Target, 
                title: "맞춤형 솔루션", 
                desc: "8개 산업 분야별 최적화된 프리셋",
                color: "bg-blue-500"
              },
              { 
                icon: Award, 
                title: "검증된 성과", 
                desc: "200+ 기업의 생산성 47% 향상",
                color: "bg-green-500"
              },
            ].map((item, i) => {
              const Icon = item.icon;
              return (
                <div key={i} className="text-center">
                  <div className={`w-16 h-16 mx-auto mb-4 rounded-2xl ${item.color} flex items-center justify-center shadow-lg`}>
                    <Icon className="w-8 h-8 text-white" />
                  </div>
                  <h3 className="mb-2 font-bold text-gray-900 text-xl">{item.title}</h3>
                  <p className="text-gray-600">{item.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="relative py-16 bg-gray-50">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="mb-4 text-gray-900 text-3xl md:text-4xl font-extrabold">
              8개 모듈로 완성하는 스마트 팩토리
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {[
              { icon: Factory, title: "생산관리", color: "from-blue-500 to-blue-600" },
              { icon: CheckSquare, title: "품질관리", color: "from-green-500 to-green-600" },
              { icon: Package, title: "자재관리", color: "from-orange-500 to-orange-600" },
              { icon: Cpu, title: "설비관리", color: "from-purple-500 to-purple-600" },
              { icon: BarChart3, title: "대시보드", color: "from-indigo-500 to-indigo-600" },
              { icon: Shield, title: "시스템관리", color: "from-red-500 to-red-600" },
              { icon: FileText, title: "기준정보", color: "from-teal-500 to-teal-600" },
              { icon: TrendingUp, title: "보고서", color: "from-pink-500 to-pink-600" },
            ].map((feature, i) => {
              const Icon = feature.icon;
              return (
                <div key={i} className="bg-white rounded-xl p-6 text-center shadow-md hover:shadow-lg transition-shadow">
                  <div className={`w-14 h-14 mx-auto mb-4 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center shadow-md`}>
                    <Icon className="w-7 h-7 text-white" />
                  </div>
                  <h3 className="font-bold text-gray-900">{feature.title}</h3>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative py-20 bg-gradient-to-br from-blue-600 via-blue-500 to-purple-600">
        <div className="container mx-auto px-6 text-center">
          <h2 className="mb-6 text-white text-3xl md:text-5xl font-extrabold">
            지금 바로 시작하세요
          </h2>
          <p className="text-white/90 text-lg mb-8">
            전문 영업사원이 1영업일 내에 연락드립니다
          </p>
          <Button 
            size="lg"
            onClick={handleDemoRequest}
            className="rounded-full px-12 py-7 text-lg bg-white text-blue-600 hover:bg-gray-50 shadow-2xl hover:scale-105 transition-all font-bold"
          >
            <Sparkles className="mr-2 w-5 h-5" />
            무료 데모 신청
            <ArrowRight className="ml-2 w-5 h-5" />
          </Button>
        </div>
      </section>

      {/* Contact Modal */}
      <ContactModal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)}
      />

      {/* Footer */}
      <Footer />

      {/* Float Animation */}
      <style>{`
        @keyframes float {
          0%, 100% {
            transform: translateY(0px);
          }
          50% {
            transform: translateY(-20px);
          }
        }

        .animate-float {
          animation: float 3s ease-in-out infinite;
        }
      `}</style>
    </div>
  );
}