import React from 'react';
import { MapPin, Clock, Phone, Car, Gift, Percent, Heart, Info, CheckCircle2, User } from 'lucide-react';

const App = () => {
  return (
    <>
      {/* 프리텐다드 웹 폰트 로드 */}
      <style>
        {`
          @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
          
          .font-pretendard {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
          }
        `}
      </style>

      <div className="min-h-screen bg-stone-50 font-pretendard text-zinc-800">
        {/* Navigation */}
        <nav className="bg-white border-b border-stone-100 sticky top-0 z-50">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between h-16 items-center">
              <div className="flex-shrink-0 flex items-center">
                <span className="text-2xl font-extrabold text-zinc-900 tracking-tighter">남대문 비젼안경</span>
              </div>
              <div className="hidden md:flex space-x-8">
                <a href="#benefits" className="text-zinc-500 hover:text-zinc-900 font-medium transition-colors">특별혜택</a>
                <a href="#about" className="text-zinc-500 hover:text-zinc-900 font-medium transition-colors">매장소개</a>
                <a href="#location" className="text-zinc-500 hover:text-zinc-900 font-medium transition-colors">오시는길</a>
              </div>
              <div className="md:hidden">
                <a href="tel:02-771-1199" className="text-zinc-900 font-bold flex items-center">
                  <Phone className="w-5 h-5 mr-1" /> 통화
                </a>
              </div>
            </div>
          </div>
        </nav>

        {/* Hero Section */}
        <section className="relative bg-stone-50 overflow-hidden">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20 lg:pt-24 lg:pb-28">
            <div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
              <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
                <div className="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium text-stone-600 bg-white border border-stone-200 mb-6 shadow-sm">
                  최고급 ZEISS 검안 장비 보유 매장
                </div>
                <h1 className="text-4xl tracking-tighter font-extrabold text-zinc-900 sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
                  <span className="block xl:inline">좋은 안경을</span>{' '}
                  <span className="block text-amber-700 xl:inline">가장 합리적인 가격에</span>
                </h1>
                <p className="mt-4 text-base text-zinc-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0 font-light leading-relaxed">
                  해외보다 5~10배 저렴하고 빠른 제작! 누진다초점부터 특수 렌즈까지, 남대문 비젼안경에서 거품 없는 가격으로 만나보세요.
                </p>
                <div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0 flex flex-col sm:flex-row gap-4">
                  <a href="#benefits" className="inline-flex items-center justify-center px-8 py-3.5 border border-transparent text-base font-medium text-white bg-zinc-900 hover:bg-zinc-800 transition-all shadow-md">
                    할인 혜택 보기
                  </a>
                  <a href="#location" className="inline-flex items-center justify-center px-8 py-3.5 border border-zinc-200 text-base font-medium text-zinc-900 bg-white hover:bg-stone-50 transition-all shadow-sm">
                    매장 위치 확인
                  </a>
                </div>
              </div>
              <div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
                <div className="relative mx-auto w-full shadow-[0_20px_50px_rgba(8,_112,_184,_0.07)] rounded-3xl overflow-hidden bg-white border border-stone-100">
                  <div className="bg-stone-100 relative flex items-center justify-center h-80 overflow-hidden">
                    <img 
                      src="https://i.postimg.cc/TwhyCPz8/Kakao-Talk-20260408-110640382-02.jpg" 
                      alt="남대문 비젼안경 매장 입구" 
                      className="w-full h-full object-cover"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Main Promotions (Missionary & Discounts) */}
        <section id="benefits" className="py-20 bg-white">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <h2 className="text-3xl font-extrabold text-zinc-900 sm:text-4xl tracking-tight">
                특별한 고객을 위한 파격 할인
              </h2>
              <p className="mt-4 text-lg text-zinc-500 font-light">
                선교사, 목회자, 성도님들을 위해 정성껏 준비했습니다
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {/* Card 1 */}
              <div className="bg-white border border-stone-100 p-8 relative overflow-hidden group hover:border-stone-200 transition-all shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] rounded-2xl">
                <div className="absolute top-0 right-0 w-24 h-24 bg-stone-50 rounded-bl-full opacity-50 -z-10 group-hover:scale-110 transition-transform"></div>
                <Percent className="w-10 h-10 text-amber-700 mb-6 stroke-[1.5]" />
                <h3 className="text-xl font-bold text-zinc-900 mb-4 tracking-tight">최대 60~70% 할인</h3>
                <p className="text-zinc-500 font-light leading-relaxed">
                  수많은 선교사님, 목회자님들께서 매우 저렴하게 맞추셨다며 감사 인사를 보내주고 계십니다. 특별한 할인 혜택을 누려보세요.
                </p>
              </div>

              {/* Card 2 */}
              <div className="bg-white border border-stone-100 p-8 relative overflow-hidden group hover:border-stone-200 transition-all shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] rounded-2xl">
                <div className="absolute top-0 right-0 w-24 h-24 bg-stone-50 rounded-bl-full opacity-50 -z-10 group-hover:scale-110 transition-transform"></div>
                <Heart className="w-10 h-10 text-amber-700 mb-6 stroke-[1.5]" />
                <h3 className="text-xl font-bold text-zinc-900 mb-4 tracking-tight">누진다초점 파격가</h3>
                <p className="text-zinc-500 font-light leading-relaxed mb-4">
                  기존 30~40만 원대 고가 누진다초점 안경을 <strong className="text-zinc-900 font-medium">10~20만 원대</strong>에 맞추실 수 있습니다.
                </p>
                <p className="text-sm text-amber-800 bg-amber-50/50 p-3 border border-amber-100/50 rounded-lg">
                  <span className="font-medium">VIP TIP</span> — 1개 가격으로 2~3개를 맞추시는 분들도 계십니다.
                </p>
              </div>

              {/* Card 3 */}
              <div className="bg-white border border-stone-100 p-8 relative overflow-hidden group hover:border-stone-200 transition-all shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] rounded-2xl">
                <div className="absolute top-0 right-0 w-24 h-24 bg-stone-50 rounded-bl-full opacity-50 -z-10 group-hover:scale-110 transition-transform"></div>
                <Gift className="w-10 h-10 text-amber-700 mb-6 stroke-[1.5]" />
                <h3 className="text-xl font-bold text-zinc-900 mb-4 tracking-tight">고객 사은 혜택</h3>
                <ul className="space-y-4 text-zinc-500 font-light">
                  <li className="flex items-start">
                    <CheckCircle2 className="w-5 h-5 text-amber-700 mr-3 flex-shrink-0 mt-0.5 stroke-[1.5]" />
                    <span><strong className="text-zinc-900 font-medium">10% 추가 할인:</strong> 수신하신 문자 제시 결제 시 (팩렌즈 제외)</span>
                  </li>
                  <li className="flex items-start">
                    <CheckCircle2 className="w-5 h-5 text-amber-700 mr-3 flex-shrink-0 mt-0.5 stroke-[1.5]" />
                    <span><strong className="text-zinc-900 font-medium">자이스 클리너 증정:</strong> 5만 원 이상 구매 시 체험 세트 증정 (1인 1세트)</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* Store Gallery & Equipment */}
        <section id="about" className="py-20 bg-stone-50">
           <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="lg:flex lg:items-center lg:justify-between mb-12">
              <div>
                <h2 className="text-3xl font-extrabold text-zinc-900 tracking-tight">쾌적한 매장과 첨단 장비</h2>
                <p className="mt-3 text-lg text-zinc-500 font-light">정확한 시력 검사와 다양한 안경테를 직접 확인하세요.</p>
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-white shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] rounded-3xl overflow-hidden h-80 relative border border-stone-100">
                 <img 
                   src="https://i.postimg.cc/tgq25L9y/Kakao-Talk-20260408-110640382.jpg" 
                   alt="최첨단 자이스 검안 장비" 
                   className="w-full h-full object-cover"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-zinc-900/80 via-zinc-900/10 to-transparent flex items-end">
                   <div className="p-8 text-white">
                     <p className="font-bold text-2xl mb-2 tracking-tight">최첨단 자이스 검안 장비</p>
                     <p className="text-sm text-zinc-200 font-light drop-shadow-md">보다 정밀하고 정확한 시력 측정이 가능합니다.</p>
                   </div>
                 </div>
              </div>
              <div className="bg-white shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] rounded-3xl overflow-hidden h-80 relative border border-stone-100">
                 <img 
                   src="https://i.postimg.cc/J7vYL65B/Kakao-Talk-20260408-110640382-01.jpg" 
                   alt="넓고 쾌적한 매장 내부" 
                   className="w-full h-full object-cover"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-zinc-900/80 via-zinc-900/10 to-transparent flex items-end">
                   <div className="p-8 text-white">
                     <p className="font-bold text-2xl mb-2 tracking-tight">넓고 쾌적한 매장 내부</p>
                     <p className="text-sm text-zinc-200 font-light drop-shadow-md">다양한 브랜드와 디자인의 안경테가 준비되어 있습니다.</p>
                   </div>
                 </div>
              </div>
            </div>
           </div>
        </section>

        {/* Info & Location Section */}
        <section id="location" className="py-20 bg-white">
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden rounded-3xl border border-stone-100">
              <div className="grid grid-cols-1 lg:grid-cols-2">
                
                {/* Info Column */}
                <div className="p-10 lg:p-14">
                  <h2 className="text-3xl font-extrabold mb-10 tracking-tight text-zinc-900">매장 이용 안내</h2>
                  
                  <div className="space-y-8">
                    <div className="flex items-start">
                      <MapPin className="w-6 h-6 text-amber-600 mr-5 flex-shrink-0 stroke-[1.5]" />
                      <div>
                        <h4 className="font-semibold text-lg text-zinc-900 tracking-tight">오시는 길</h4>
                        <div className="mt-2 space-y-1 font-light text-base text-zinc-600">
                          <p>서울 중구 소월로 10, 단암빌딩 지하 1층</p>
                          <p>지하철 4호선 회현역 5번 출구</p>
                          <p>남대문 비젼안경원 아래층으로 내려오시면 됩니다</p>
                        </div>
                      </div>
                    </div>

                    <div className="flex items-start">
                      <Clock className="w-6 h-6 text-amber-600 mr-5 flex-shrink-0 stroke-[1.5]" />
                      <div>
                        <h4 className="font-semibold text-lg text-zinc-900 tracking-tight">영업시간</h4>
                        <div className="mt-2 space-y-1 font-light text-base text-zinc-600">
                          <p>월요일 ~ 토요일 | 10:00 - 19:00</p>
                          <p>매주 일요일 정기 휴무</p>
                        </div>
                      </div>
                    </div>

                    <div className="flex items-start">
                      <Car className="w-6 h-6 text-amber-600 mr-5 flex-shrink-0 stroke-[1.5]" />
                      <div>
                        <h4 className="font-semibold text-lg text-zinc-900 tracking-tight">주차 안내</h4>
                        <div className="mt-2 space-y-1 font-light text-base text-zinc-600">
                          <p>단암빌딩 방문객 전용 외부 주차 타워 이용 가능</p>
                        </div>
                      </div>
                    </div>
                    
                    <div className="flex items-start">
                      <Phone className="w-6 h-6 text-amber-600 mr-5 flex-shrink-0 stroke-[1.5]" />
                      <div>
                        <h4 className="font-semibold text-lg text-zinc-900 tracking-tight">문의 및 예약</h4>
                        <div className="mt-2 space-y-1 font-light text-base text-zinc-600">
                          <p>
                            매장: <a href="tel:02-771-1199" className="hover:text-amber-700 transition-colors">02-771-1199</a> / <a href="tel:02-779-7774" className="hover:text-amber-700 transition-colors">02-779-7774</a>
                          </p>
                          <p>
                            담당 (한미선 권사): <a href="tel:010-2763-9919" className="text-amber-700 hover:text-amber-600 transition-colors">010-2763-9919</a>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Profile Image Column (Formerly Map Column) */}
                <div className="bg-stone-50 p-10 lg:p-14 flex items-center justify-center border-t lg:border-t-0 lg:border-l border-stone-100">
                  <div className="w-full h-full min-h-[300px] flex flex-col items-center justify-center relative overflow-hidden rounded-2xl border border-stone-200 shadow-inner bg-stone-100 group">
                     <img 
                       src="https://i.postimg.cc/Vv2DYvyV/Kakao-Talk-20260408-121654727.jpg" 
                       alt="한미선 권사님" 
                       className="absolute inset-0 w-full h-full object-cover object-top z-0" 
                     />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="bg-stone-200 py-10 text-center text-zinc-700 text-sm font-medium border-t border-stone-300">
          <div className="max-w-6xl mx-auto px-4">
            <p>
              © 남대문 비젼안경. All rights reserved. Powered by <a href="tel:010-4843-5415" className="font-bold hover:text-amber-700 transition-colors">에이플러스오늘</a>
            </p>
          </div>
        </footer>
      </div>
    </>
  );
};

export default App;