brand.html

import React, { useState } from 'react';
import { Shield, Zap, Code, Smartphone, Monitor, ChevronRight, Copy, Check, Star, UserCircle, Download } from 'lucide-react';

const LightningBI = () => {
  const [activeTab, setActiveTab] = useState('applications'); // Default to applications to show the new request
  const [copiedColor, setCopiedColor] = useState(null);

  const colors = {
    primary: '#0F172A', // Deep Navy (Slate 900) - 신뢰, 보안, 공공, 엔터프라이즈
    secondary: '#2563EB', // Royal Blue (Blue 600) - 기술, 전자정부, 전문성
    accent: '#FACC15', // Electric Yellow (Yellow 400) - 속도, 해결, AI, 에너지
    white: '#FFFFFF',
    gray: '#F1F5F9'
  };

  const copyToClipboard = (hex) => {
    navigator.clipboard.writeText(hex);
    setCopiedColor(hex);
    setTimeout(() => setCopiedColor(null), 2000);
  };

  // Option A: English Version
  const LogoTypeA = ({ className, theme = 'light' }) => {
    const textColor = theme === 'dark' ? 'text-white' : 'text-slate-900';
    const subTextColor = theme === 'dark' ? 'text-slate-400' : 'text-blue-600';
    const bgClass = theme === 'dark' ? 'bg-white/10' : 'bg-slate-900';

    return (
      <div className={`flex items-center gap-3 ${className}`}>
        <div className={`relative w-12 h-12 flex items-center justify-center ${bgClass} rounded-xl shadow-sm shrink-0`}>
          <Zap className="w-7 h-7 text-yellow-400 fill-current" strokeWidth={1.5} />
          <div className="absolute -right-1 -top-1 w-3 h-3 bg-blue-600 rounded-full border-2 border-white"></div>
        </div>
        <div className="flex flex-col">
          <span className={`text-3xl font-bold tracking-tighter ${textColor} leading-none`}>LIGHTNING</span>
          <span className={`text-[10px] font-bold tracking-[0.2em] ${subTextColor} uppercase mt-1`}>Gov-Tech AI Agency</span>
        </div>
      </div>
    );
  };

  // Option A: Korean Version (New)
  const LogoTypeAKorean = ({ className, theme = 'light' }) => {
    const textColor = theme === 'dark' ? 'text-white' : 'text-slate-900';
    const subTextColor = theme === 'dark' ? 'text-slate-400' : 'text-blue-600';
    const bgClass = theme === 'dark' ? 'bg-white/10' : 'bg-slate-900';

    return (
      <div className={`flex items-center gap-3 ${className}`}>
        <div className={`relative w-12 h-12 flex items-center justify-center ${bgClass} rounded-xl shadow-sm shrink-0`}>
          <Zap className="w-7 h-7 text-yellow-400 fill-current" strokeWidth={1.5} />
          <div className="absolute -right-1 -top-1 w-3 h-3 bg-blue-600 rounded-full border-2 border-white"></div>
        </div>
        <div className="flex flex-col">
          <span className={`text-3xl font-bold tracking-tight ${textColor} leading-none`}>라이트닝</span>
          <span className={`text-[10px] font-bold tracking-[0.1em] ${subTextColor} uppercase mt-1`}>Gov-Tech AI Agency</span>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-yellow-200">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-slate-900 rounded flex items-center justify-center">
              <Zap className="w-5 h-5 text-yellow-400 fill-current" />
            </div>
            <span className="font-bold text-lg">Lightning Brand Identity</span>
          </div>
          <nav className="hidden sm:flex space-x-8">
            {['brand mark', 'colors', 'applications'].map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`text-sm font-medium capitalize transition-colors pb-5 mt-5 border-b-2 ${
                  activeTab === tab
                    ? 'border-blue-600 text-blue-600'
                    : 'border-transparent text-slate-500 hover:text-slate-900'
                }`}
              >
                {tab}
              </button>
            ))}
          </nav>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        
        {/* Logos Tab */}
        {activeTab === 'brand mark' && (
          <div className="space-y-12 animate-in fade-in duration-500">
            <div className="text-center max-w-2xl mx-auto mb-12">
              <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold mb-4">
                <Check className="w-3 h-3" /> OFFICIAL
              </div>
              <h2 className="text-3xl font-bold text-slate-900 mb-4">Primary & Korean Logotypes</h2>
              <p className="text-slate-600">
                글로벌/영문 환경을 위한 <strong>Primary Type</strong>과<br/>
                국내 공공/행정 환경에 최적화된 <strong>Korean Type</strong>을 제공합니다.
              </p>
            </div>

            {/* Hero Section for Selected Logo */}
            <div className="bg-white rounded-3xl p-12 shadow-xl border border-blue-100 relative overflow-hidden text-center">
               <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-slate-900 via-blue-600 to-yellow-400"></div>
               
               <div className="grid md:grid-cols-2 gap-12 items-center justify-center py-8">
                  {/* English Version */}
                  <div className="flex flex-col items-center gap-4">
                    <div className="transform transition-transform hover:scale-105 duration-300">
                      <LogoTypeA />
                    </div>
                    <span className="text-xs font-mono text-slate-400 uppercase tracking-widest mt-4">English / Global</span>
                  </div>

                  {/* Korean Version */}
                  <div className="flex flex-col items-center gap-4 relative">
                    <div className="hidden md:block absolute left-0 top-1/2 -translate-y-1/2 w-px h-24 bg-slate-100"></div>
                    <div className="transform transition-transform hover:scale-105 duration-300">
                      <LogoTypeAKorean />
                    </div>
                    <span className="text-xs font-mono text-slate-400 uppercase tracking-widest mt-4">Korean / Domestic</span>
                  </div>
               </div>

               <div className="grid md:grid-cols-3 gap-8 mt-12 pt-12 border-t border-slate-100 text-left">
                  <div>
                    <h4 className="font-bold text-slate-900 mb-2">Symbol</h4>
                    <p className="text-sm text-slate-500">
                      둥근 사각형은 '플랫폼'과 '앱'을 상징하며, 그 위를 관통하는 번개는 '즉각적인 해결'을 의미합니다.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold text-slate-900 mb-2">Typography</h4>
                    <p className="text-sm text-slate-500">
                      영문은 <strong>Inter</strong>, 국문은 <strong>Pretendard</strong>를 사용하여 신뢰감 있는 두께(Bold)를 유지합니다.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold text-slate-900 mb-2">Consistency</h4>
                    <p className="text-sm text-slate-500">
                      언어가 바뀌어도 심볼과 컬러 시스템, 폰트 웨이트를 통일하여 브랜드 일관성을 유지합니다.
                    </p>
                  </div>
               </div>
            </div>

            {/* Dark Mode & Negative Space */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="bg-slate-900 rounded-2xl p-10 flex items-center justify-center relative overflow-hidden group">
                <div className="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900"></div>
                <div className="relative z-10 flex flex-col gap-8">
                  <LogoTypeA theme="dark" />
                  <div className="w-full h-px bg-slate-700/50"></div>
                  <LogoTypeAKorean theme="dark" />
                </div>
                <div className="absolute bottom-4 left-0 w-full text-center text-slate-500 text-xs font-mono">ON DARK BACKGROUND</div>
              </div>

              <div className="bg-blue-600 rounded-2xl p-10 flex items-center justify-center relative overflow-hidden group">
                 <div className="absolute inset-0 bg-blue-600"></div>
                 <div className="absolute -right-10 -bottom-10 w-40 h-40 bg-blue-500 rounded-full blur-3xl opacity-50"></div>
                 <div className="relative z-10 flex flex-col gap-8">
                    {/* White Monochrome Version English */}
                    <div className="flex items-center gap-3">
                      <div className="relative w-12 h-12 flex items-center justify-center bg-white rounded-xl shadow-lg shrink-0">
                        <Zap className="w-7 h-7 text-blue-600 fill-current" strokeWidth={1.5} />
                      </div>
                      <div className="flex flex-col text-white">
                        <span className="text-3xl font-bold tracking-tighter leading-none">LIGHTNING</span>
                      </div>
                    </div>
                    
                    {/* White Monochrome Version Korean */}
                    <div className="flex items-center gap-3 opacity-90">
                      <div className="relative w-12 h-12 flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-xl shrink-0">
                         <Zap className="w-7 h-7 text-white fill-current" strokeWidth={1.5} />
                      </div>
                       <div className="flex flex-col text-white">
                        <span className="text-3xl font-bold tracking-tight leading-none">라이트닝</span>
                      </div>
                    </div>
                 </div>
                 <div className="absolute bottom-4 left-0 w-full text-center text-blue-200 text-xs font-mono">ON BRAND COLOR</div>
              </div>
            </div>
          </div>
        )}

        {/* Colors Tab */}
        {activeTab === 'colors' && (
          <div className="space-y-12 animate-in fade-in duration-500">
            <div className="text-center max-w-2xl mx-auto">
              <h2 className="text-3xl font-bold text-slate-900 mb-4">Color System</h2>
              <p className="text-slate-600">
                깊이감 있는 네이비는 '공공의 무게감'을, 선명한 옐로우는 '즉각적인 해결'을 상징합니다.
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-6">
              {[
                { name: 'Trust Navy', hex: colors.primary, desc: '주조색: 신뢰, 보안, 엔터프라이즈' },
                { name: 'Tech Blue', hex: colors.secondary, desc: '보조색: 기술, 전자정부, 전문성' },
                { name: 'Speed Yellow', hex: colors.accent, desc: '강조색: 속도, 해결, AI, 에너지' }
              ].map((color) => (
                <div key={color.hex} className="group relative bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
                  <div className="h-40 w-full transition-transform group-hover:scale-105 duration-500" style={{ backgroundColor: color.hex }}></div>
                  <div className="p-6">
                    <h3 className="font-bold text-lg mb-1">{color.name}</h3>
                    <p className="text-sm text-slate-500 mb-4">{color.desc}</p>
                    <button
                      onClick={() => copyToClipboard(color.hex)}
                      className="w-full flex items-center justify-between bg-slate-50 hover:bg-slate-100 px-4 py-3 rounded-lg text-sm font-mono transition-colors"
                    >
                      <span className="text-slate-600">{color.hex}</span>
                      {copiedColor === color.hex ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-slate-400" />}
                    </button>
                  </div>
                </div>
              ))}
            </div>

            <div className="bg-white rounded-2xl p-8 border border-slate-200">
              <h3 className="font-bold text-lg mb-6">Color Ratio Guide</h3>
              <div className="flex h-16 w-full rounded-xl overflow-hidden shadow-inner">
                <div className="h-full bg-[#0F172A] w-[60%] flex items-center justify-center text-white/50 text-xs font-bold">60% Primary</div>
                <div className="h-full bg-[#FFFFFF] w-[30%] flex items-center justify-center text-slate-300 text-xs font-bold border-l border-r border-slate-100">30% White/Gray</div>
                <div className="h-full bg-[#FACC15] w-[10%] flex items-center justify-center text-yellow-900/50 text-xs font-bold">10%</div>
              </div>
              <p className="text-sm text-slate-500 mt-4 text-center">
                배경과 텍스트는 차분하게, 중요한 버튼(Action)과 로고 포인트에만 옐로우를 사용합니다.
              </p>
            </div>
          </div>
        )}

        {/* Applications Tab */}
        {activeTab === 'applications' && (
          <div className="space-y-16 animate-in fade-in duration-500">
             <div className="text-center max-w-2xl mx-auto">
              <h2 className="text-3xl font-bold text-slate-900 mb-4">Brand Applications</h2>
              <p className="text-slate-600">실제 비즈니스 환경에서의 적용 예시입니다.</p>
            </div>

            {/* NEW: Social Profile Section */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
              <h3 className="text-lg font-bold mb-6 flex items-center gap-2">
                <UserCircle className="w-5 h-5 text-slate-400" /> Social Profile & Avatar
              </h3>
              <div className="flex flex-col md:flex-row items-center justify-center gap-12 bg-slate-50 rounded-xl p-8">
                
                {/* Profile Image Render */}
                <div className="relative group">
                   <div className="w-64 h-64 bg-slate-900 flex flex-col items-center justify-center text-white relative overflow-hidden shadow-2xl transition-transform transform group-hover:scale-105 duration-500">
                      {/* Decorative background glow */}
                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-blue-600 blur-[60px] opacity-20 rounded-full"></div>
                      
                      {/* Main Logo Symbol */}
                      <div className="relative w-20 h-20 flex items-center justify-center bg-white/10 backdrop-blur-md rounded-2xl mb-6 border border-white/5 shadow-inner">
                         <Zap className="w-10 h-10 text-yellow-400 fill-current" strokeWidth={1.5} />
                         <div className="absolute -right-1.5 -top-1.5 w-4 h-4 bg-blue-600 rounded-full border-[3px] border-slate-900"></div>
                      </div>
                      
                      {/* Text Stack */}
                      <div className="text-center z-10">
                         <h1 className="text-2xl font-bold tracking-tighter leading-none mb-2">LIGHTNING</h1>
                         <p className="text-[9px] font-bold tracking-[0.2em] text-blue-500 uppercase">Gov-Tech AI Agency</p>
                      </div>
                   </div>
                   <div className="absolute -bottom-8 left-0 w-full text-center text-xs text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
                      1:1 Ratio (Square)
                   </div>
                </div>

                {/* Context / Usage */}
                <div className="max-w-sm space-y-4">
                   <h4 className="font-bold text-slate-900">Official Profile Image</h4>
                   <p className="text-sm text-slate-600 leading-relaxed">
                      SNS, 메신저, 회사 소개 자료에 사용할 수 있는 정사각형 프로필 이미지입니다.
                      어두운 배경(Dark Theme)을 사용하여 작은 썸네일에서도 <strong>로고와 텍스트가 명확하게</strong> 보입니다.
                   </p>
                   <ul className="text-xs text-slate-500 space-y-2 mb-4">
                      <li className="flex items-center gap-2"><Check className="w-3 h-3 text-blue-500"/> 1:1 Square Ratio</li>
                      <li className="flex items-center gap-2"><Check className="w-3 h-3 text-blue-500"/> Optimized for Dark Mode</li>
                      <li className="flex items-center gap-2"><Check className="w-3 h-3 text-blue-500"/> High Contrast Visibility</li>
                   </ul>
      
                </div>
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-12">
              {/* Business Card */}
              <div className="space-y-4">
                <h3 className="text-lg font-bold flex items-center gap-2">
                  <Shield className="w-5 h-5 text-slate-400" /> Business Card
                </h3>
                <div className="aspect-[1.58/1] bg-white rounded-xl shadow-lg relative overflow-hidden group perspective">
                  {/* Front */}
                  <div className="absolute inset-0 bg-slate-900 p-8 flex flex-col justify-between text-white">
                    <div className="flex justify-between items-start">
                      {/* APPLIED LOGO: Use English for global feel on card, or Korean based on need. Showing English here. */}
                      <LogoTypeA theme="dark" className="scale-90 origin-top-left" />
                      
                      <div className="text-right">
                        <p className="text-[10px] text-slate-400 font-bold tracking-widest uppercase mb-1">Founder / CEO</p>
                        <p className="font-bold text-lg">Gil-Dong Hong</p>
                      </div>
                    </div>
                    
                    <div className="space-y-3">
                      <div className="h-px w-12 bg-blue-600"></div>
                      <div className="text-sm text-slate-300 font-light space-y-1">
                        <p>+82 10-1234-5678</p>
                        <p>ceo@lightning.gov.kr</p>
                        <p>Seoul, Korea</p>
                      </div>
                    </div>
                    
                    <div className="absolute bottom-0 right-0 w-48 h-48 bg-blue-600 rounded-full blur-[80px] opacity-20 translate-x-1/3 translate-y-1/3"></div>
                  </div>
                </div>
              </div>

              {/* App Icon / Mobile */}
              <div className="space-y-4">
                <h3 className="text-lg font-bold flex items-center gap-2">
                  <Smartphone className="w-5 h-5 text-slate-400" /> Mobile Application
                </h3>
                <div className="bg-slate-100 rounded-3xl p-6 flex justify-center items-center min-h-[300px]">
                  <div className="w-64 bg-white rounded-[2rem] shadow-xl border-4 border-slate-200 overflow-hidden relative">
                    {/* Status Bar */}
                    <div className="h-6 bg-slate-900 flex justify-end px-4 items-center gap-1">
                      <div className="w-1 h-1 rounded-full bg-white"></div>
                      <div className="w-1 h-1 rounded-full bg-white"></div>
                      <div className="w-3 h-1.5 rounded-full border border-white"></div>
                    </div>
                    {/* App Header */}
                    <div className="bg-slate-900 p-4 pb-6 relative overflow-hidden">
                       <div className="absolute top-0 right-0 w-32 h-32 bg-blue-600 blur-[50px] opacity-30 rounded-full"></div>
                      <div className="flex justify-between items-center mb-6 relative z-10">
                         {/* APPLIED LOGO A (Icon Only for App Bar) */}
                         <div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center backdrop-blur-sm">
                            <Zap className="w-5 h-5 text-yellow-400 fill-current" />
                         </div>
                         <span className="text-[10px] font-bold bg-blue-600 text-white px-2 py-0.5 rounded-full">GOV-PASS</span>
                      </div>
                      <h3 className="font-bold text-lg leading-tight text-white relative z-10">
                        <span className="text-slate-400 text-sm font-normal block mb-1">안녕하세요, 홍길동님</span>
                        긴급 재난 지원금<br/>신청하세요
                      </h3>
                    </div>
                    {/* App Body */}
                    <div className="p-4 space-y-3">
                       <div className="bg-white rounded-xl border border-slate-100 shadow-sm p-4 flex items-center gap-4">
                          <div className="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-blue-600 font-bold">1</div>
                          <div className="flex-1">
                            <p className="text-xs text-slate-400 font-bold uppercase">Step 01</p>
                            <p className="text-sm font-bold text-slate-900">본인 인증하기</p>
                          </div>
                          <div className="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center">
                            <Check className="w-3 h-3 text-slate-300" />
                          </div>
                       </div>
                       <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl shadow-lg shadow-blue-200/50 text-sm transition-colors mt-2">
                         3초만에 신청하기
                       </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            {/* Extension UI */}
            <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
              <h3 className="text-lg font-bold mb-6 flex items-center gap-2">
                <Monitor className="w-5 h-5 text-slate-400" /> Web Extension Overlay
              </h3>
              <div className="bg-slate-50 rounded-lg border border-slate-200 p-6 relative h-64 overflow-hidden">
                <div className="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
                  <div className="text-6xl font-serif text-slate-900">Government Site</div>
                </div>
                {/* Floating Widget */}
                <div className="absolute right-6 top-6 w-80 bg-white rounded-xl shadow-2xl border-l-4 border-yellow-400 p-5 transform transition-transform hover:-translate-y-1">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-slate-900 rounded-lg flex items-center justify-center flex-shrink-0 shadow-md">
                      <Zap className="w-6 h-6 text-yellow-400 fill-current" />
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between items-start">
                        {/* Korean Version Used Here for Domestic Context */}
                        <div className="flex flex-col">
                           <h4 className="font-bold text-slate-900 text-sm">라이트닝 어시스턴트</h4>
                           <span className="text-[10px] text-slate-400 font-medium">Lightning Assistant</span>
                        </div>
                        <span className="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded">AI ON</span>
                      </div>
                      <p className="text-xs text-slate-500 mt-2 leading-relaxed">
                        현재 페이지에서 <strong>3개의 신청 서류</strong>를 찾았습니다. AI가 자동으로 작성할까요?
                      </p>
                      <div className="mt-4 flex gap-2">
                         <button className="flex-1 bg-slate-900 hover:bg-slate-800 text-white text-xs py-2 rounded font-bold transition-colors">
                           자동 작성 시작
                         </button>
                         <button className="px-3 text-slate-400 hover:text-slate-600 text-xs font-medium">
                           닫기
                         </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        )}

      </main>

      <footer className="bg-slate-900 text-slate-400 py-12 mt-12 border-t border-slate-800">
        <div className="max-w-6xl mx-auto px-4 text-center">
          <p className="mb-4 text-xs font-bold uppercase tracking-[0.2em] text-blue-600">Brand Identity System v1.1</p>
          <div className="flex justify-center gap-6 text-2xl opacity-50 hover:opacity-100 transition-opacity">
            <Zap className="w-6 h-6" />
          </div>
          <p className="mt-8 text-xs text-slate-600">© Lightning. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default LightningBI;