const { useState, useEffect } = React;

// --- Lucide icon helpers (inline SVG) ---
const Icon = ({ path, className = "w-5 h-5", fill = "none", strokeWidth = 2 }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className}>
    {path}
  </svg>
);

const MapPin = (p) => <Icon {...p} path={<><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></>} />;
const Clock = (p) => <Icon {...p} path={<><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></>} />;
const Phone = (p) => <Icon {...p} path={<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>} />;
const Navigation = (p) => <Icon {...p} path={<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>} />;
const ChevronDown = (p) => <Icon {...p} path={<polyline points="6 9 12 15 18 9"></polyline>} />;
const Instagram = (p) => <Icon {...p} path={<><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></>} />;
const MessageCircle = (p) => <Icon {...p} path={<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>} />;
const X = (p) => <Icon {...p} path={<><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></>} />;
const Heart = (p) => <Icon {...p} path={<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>} />;
const CalendarIcon = (p) => <Icon {...p} path={<><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></>} />;

function App() {
  const [lang, setLang] = useState('ko');
  const [activeTab, setActiveTab] = useState('HOME');
  const [activeMenu, setActiveMenu] = useState('Hair Care');
  const [expandedItem, setExpandedItem] = useState(null);
  const [selectedDesigner, setSelectedDesigner] = useState(null);

  // 예약 모달 state
  const [bookingOpen, setBookingOpen] = useState(false);
  const [bookingInitialDesigner, setBookingInitialDesigner] = useState(null);

  const tabs = ['HOME', 'MENU', 'GALLERY', 'LOCATION'];
  const t = (koStr, enStr) => lang === 'ko' ? koStr : enStr;

  useEffect(() => {
    const browserLang = navigator.language || navigator.userLanguage;
    if (browserLang && !browserLang.startsWith('ko')) {
      setLang('en');
    }
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const sections = tabs.map(tab => document.getElementById(tab.toLowerCase()));
      const scrollPosition = window.scrollY + 100;
      for (let i = sections.length - 1; i >= 0; i--) {
        const section = sections[i];
        if (section && section.offsetTop <= scrollPosition) {
          setActiveTab(tabs[i]);
          break;
        }
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToSection = (id) => {
    setActiveTab(id.toUpperCase());
    const element = document.getElementById(id);
    if (element) {
      window.scrollTo({ top: element.offsetTop - 20, behavior: 'smooth' });
    }
    setSelectedDesigner(null);
  };

  const toggleLanguage = () => setLang(prev => prev === 'ko' ? 'en' : 'ko');

  const openBooking = (designer = null) => {
    setBookingInitialDesigner(designer);
    setBookingOpen(true);
    setSelectedDesigner(null);
  };

  const closeBooking = () => {
    setBookingOpen(false);
    setBookingInitialDesigner(null);
  };

  const BookingModal = window.BookingModal;

  return (
    <div className="font-sans text-stone-900 bg-white min-h-screen relative pb-20 md:pb-0 overflow-x-hidden">
      
      {/* Language Toggle */}
      <button 
        onClick={toggleLanguage}
        className="fixed bottom-24 left-6 w-12 h-12 bg-white/95 backdrop-blur-sm border border-stone-200 text-stone-600 rounded-full flex items-center justify-center font-bold shadow-lg z-40 hover:bg-stone-50 transition-colors"
        title={t("Switch to English", "한국어로 전환")}
      >
        {lang === 'ko' ? 'E' : 'K'}
      </button>

      {/* Floating Booking CTA (bottom-right) */}
      <button
        onClick={() => openBooking()}
        className="fixed bottom-6 right-6 z-40 bg-stone-900 hover:bg-stone-800 text-white pl-4 pr-5 py-3.5 rounded-full shadow-2xl flex items-center gap-2 font-bold text-sm transition-all hover:scale-105"
      >
        <CalendarIcon className="w-4 h-4" />
        {t('예약 문의', 'Book Now')}
      </button>

      {/* Top Navigation */}
      <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-40 w-[95%] max-w-[500px]">
        <div className="bg-[#f5f5f5]/95 backdrop-blur-md p-1.5 rounded-full flex justify-between items-center shadow-sm border border-stone-200/50">
          {tabs.map((tab) => (
            <button
              key={tab}
              onClick={() => scrollToSection(tab.toLowerCase())}
              className={`flex-1 py-2.5 text-[10px] md:text-xs font-bold tracking-wider rounded-full transition-all duration-300 ${
                activeTab === tab 
                  ? 'bg-white text-stone-900 shadow-sm' 
                  : 'text-stone-400 hover:text-stone-600'
              }`}
            >
              {tab}
            </button>
          ))}
        </div>
      </div>

      {/* Designer Modal */}
      {selectedDesigner && (
        <div className="fixed inset-0 z-[60] flex items-end md:items-center justify-center bg-black/60 backdrop-blur-sm fade-in sm:p-4">
          <div className="bg-white w-full max-w-[420px] md:rounded-3xl rounded-t-3xl shadow-2xl flex flex-col overflow-hidden relative max-h-[92vh] animate-slide-up">
            <button 
              onClick={() => setSelectedDesigner(null)} 
              className="absolute top-4 right-4 z-10 w-9 h-9 bg-black/30 hover:bg-black/50 rounded-full flex items-center justify-center text-white backdrop-blur-md transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
            <div className="overflow-y-auto w-full">
              <div className="w-full aspect-[4/5] bg-stone-100 relative">
                <img src={selectedDesigner.img} alt={selectedDesigner.name} className="w-full h-full object-cover" />
                <div className="absolute bottom-0 w-full h-32 bg-gradient-to-t from-white to-transparent pointer-events-none"></div>
              </div>
              <div className="px-6 md:px-8 pb-8 pt-2 text-center flex flex-col items-center bg-white relative z-10">
                <p className="text-[11px] font-bold tracking-[0.2em] text-stone-400 mb-2">
                  {t(selectedDesigner.title, selectedDesigner.titleEn)}
                </p>
                <h2 className="text-3xl font-bold text-stone-900 mb-1">
                  {t(selectedDesigner.name, selectedDesigner.nameEn)}
                </h2>
                <p className="text-xs text-stone-400 mb-8 uppercase tracking-widest">
                  {selectedDesigner.nameEn || 'DESIGNER'}
                </p>
                <div className="w-full border-l-[3px] border-stone-900 pl-4 py-1 mb-6 text-left">
                  <p className="font-serif font-medium text-stone-800 text-lg leading-snug break-keep">
                    {t(selectedDesigner.quote, selectedDesigner.quoteEn)}
                  </p>
                </div>
                <p className="text-sm text-stone-500 leading-relaxed mb-8 break-keep text-left w-full">
                  {t(selectedDesigner.desc, selectedDesigner.descEn)}
                </p>
                <div className="flex flex-wrap justify-center gap-2 mb-8">
                  {(lang === 'ko' ? selectedDesigner.keywords : selectedDesigner.keywordsEn).map((kw, idx) => (
                    <span key={idx} className="bg-white border border-stone-200 text-stone-600 text-xs px-4 py-2 rounded-full shadow-sm font-medium tracking-wide">
                      {kw}
                    </span>
                  ))}
                </div>
                <div className="flex w-full gap-3">
                  <button 
                    onClick={() => openBooking(selectedDesigner)} 
                    className="flex-1 bg-stone-900 text-white py-3.5 rounded-xl text-sm font-bold hover:bg-stone-800 transition-colors flex items-center justify-center gap-1.5 shadow-sm"
                  >
                    <CalendarIcon className="w-4 h-4" />
                    {t("예약 문의", "Book Now")}
                  </button>
                  {selectedDesigner.ig ? (
                    <a href={selectedDesigner.ig} target="_blank" rel="noreferrer" className="flex-1 bg-gradient-to-r from-[#833ab4] via-[#fd1d1d] to-[#fcb045] text-white py-3.5 rounded-xl text-sm font-bold hover:opacity-90 transition-opacity flex items-center justify-center gap-1.5 shadow-sm">
                      <Instagram className="w-4 h-4" /> Instagram
                    </a>
                  ) : (
                    <div className="flex-1 bg-stone-100 text-stone-400 py-3.5 rounded-xl text-sm font-bold flex items-center justify-center gap-1.5 cursor-not-allowed">
                      <Instagram className="w-4 h-4" /> Instagram
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Booking Modal */}
      {BookingModal && (
        <BookingModal
          isOpen={bookingOpen}
          onClose={closeBooking}
          lang={lang}
          t={t}
          initialDesigner={bookingInitialDesigner}
        />
      )}

      {/* 1. HOME SECTION */}
      <section id="home" data-screen-label="01 Home" className="relative h-[100dvh] flex flex-col items-center justify-center overflow-hidden" style={{background: 'linear-gradient(180deg, #ffffff 0%, #f5f5f4 60%, #e7e5e4 100%)'}}>
        {/* Subtle decorative accents */}
        <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
          <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full opacity-40" style={{background: 'radial-gradient(circle, rgba(231,229,228,0.8) 0%, transparent 70%)'}}></div>
          <div className="absolute bottom-[-15%] right-[-10%] w-[50%] h-[50%] rounded-full opacity-30" style={{background: 'radial-gradient(circle, rgba(214,211,209,0.8) 0%, transparent 70%)'}}></div>
        </div>
        
        <div className="relative z-20 text-center flex flex-col items-center pointer-events-none">
          <p className="text-stone-500 font-bold tracking-[0.25em] text-[10px] md:text-xs mb-10 uppercase">
            Premium Hair Salon
          </p>

          {/* Wordmark logo - bold sans-serif with wide tracking */}
          <h1
            className="text-stone-900 mb-2"
            style={{
              fontFamily: "'Pretendard Variable', Pretendard, -apple-system, sans-serif",
              fontWeight: 800,
              fontSize: 'clamp(2.5rem, 9vw, 5rem)',
              letterSpacing: '0.18em',
              lineHeight: 1,
            }}
          >
            JUNO&nbsp;HAIR
          </h1>

          {/* Decorative rule */}
          <div className="flex items-center gap-3 mt-8 mb-10">
            <div className="w-10 h-[1px] bg-stone-400"></div>
            <span className="text-[10px] font-bold tracking-[0.3em] text-stone-500 uppercase">
              Myeongdong · 01
            </span>
            <div className="w-10 h-[1px] bg-stone-400"></div>
          </div>

          {/* Branch label */}
          <h2 className="text-xl md:text-2xl font-bold text-stone-900 mb-3 drop-shadow-sm tracking-wide">
            {t("준오헤어 명동1호점", "JUNO HAIR Myeongdong Branch 1")}
          </h2>
          <p className="text-stone-600 font-medium text-sm md:text-base mb-10">
            {t("당신만의 아름다움을 디자인합니다", "Designing your unique beauty")}
          </p>
        </div>

        <button
          onClick={() => openBooking()}
          className="relative z-20 bg-stone-900 hover:bg-stone-800 text-white px-8 py-4 rounded-full shadow-xl flex items-center gap-2.5 font-bold text-sm transition-all hover:scale-105"
        >
          <CalendarIcon className="w-4 h-4" />
          {t('예약 문의하기', 'Book an Appointment')}
        </button>
      </section>

      {/* 2. MENU SECTION */}
      <section id="menu" data-screen-label="02 Menu" className="py-24 bg-[#fcfcfc]">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-12">
            <p className="text-xs font-bold tracking-[0.2em] text-stone-400 mb-3 uppercase">Signature Program</p>
            <h3 className="text-3xl font-bold text-stone-900">{t("시술 프로그램", "Signature Programs")}</h3>
          </div>

          <div className="flex justify-center gap-2 mb-10 flex-wrap">
            {window.menuCategories.map((category) => {
              const displayCategory = category === 'Price List' ? t('가격표', 'Price List') : category;
              return (
                <button
                  key={category}
                  onClick={() => { setActiveMenu(category); setExpandedItem(null); }}
                  className={`px-6 py-3 rounded-full text-sm font-bold transition-all ${
                    activeMenu === category 
                      ? 'bg-stone-900 text-white' 
                      : 'bg-stone-100 text-stone-400 hover:bg-stone-200'
                  }`}
                >
                  {displayCategory}
                </button>
              );
            })}
          </div>

          <div className="space-y-4">
            {(activeMenu === 'Hair Care' || activeMenu === 'Scalp Care') && 
              (activeMenu === 'Hair Care' ? window.hairCareMenu : window.scalpCareMenu).map((item, index) => (
              <div 
                key={index} 
                className="bg-white rounded-2xl p-6 border border-stone-100 shadow-[0_2px_10px_rgba(0,0,0,0.02)] cursor-pointer transition-all"
                onClick={() => setExpandedItem(expandedItem === item.name ? null : item.name)}
              >
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <span className="text-[11px] font-bold text-[#7A9BE0] tracking-wider block mb-1">
                      {item.level}
                    </span>
                    <h4 className="text-lg font-bold text-stone-900">{item.name}</h4>
                  </div>
                  <div className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <span className="text-sm font-medium text-stone-400">₩</span>
                      <span className="text-xl font-bold text-stone-900">{item.price}</span>
                      <ChevronDown className={`w-4 h-4 text-stone-400 ml-1 transition-transform duration-300 hidden md:block ${expandedItem === item.name ? 'rotate-180' : ''}`} />
                    </div>
                    <span className="text-xs text-stone-400">{item.steps}</span>
                  </div>
                </div>
                <p className="text-sm text-stone-600 mt-3 mb-4">
                  {t(item.desc, item.descEn)}
                </p>
                <div className="flex flex-wrap gap-2">
                  {(lang === 'ko' ? item.tags : item.tagsEn).map((tag, i) => (
                    <span key={i} className="bg-[#f5f5f5] text-stone-500 text-[11px] px-3 py-1.5 rounded-full">
                      {tag}
                    </span>
                  ))}
                </div>
                {expandedItem === item.name && item.process && (
                  <div className="mt-6 pt-6 border-t border-stone-100">
                    <p className="text-[11px] font-bold tracking-[0.2em] text-stone-400 mb-4 uppercase">Process</p>
                    <ul className="space-y-3 relative before:absolute before:inset-y-0 before:left-[11px] before:w-[1px] before:bg-blue-50">
                      {(lang === 'ko' ? item.process : item.processEn).map((step, idx) => (
                        <li key={idx} className="flex items-start gap-3 relative z-10">
                          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-50 text-[#7A9BE0] flex items-center justify-center text-[10px] font-bold border-[3px] border-white shadow-sm">
                            {idx + 1}
                          </span>
                          <span className="text-sm text-stone-600 pt-0.5">{step}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            ))}

            {activeMenu === 'Price List' && (
              <div className="space-y-6">
                {window.priceList.map((category, idx) => (
                  <div key={idx} className="bg-white rounded-2xl border border-stone-100 shadow-[0_2px_10px_rgba(0,0,0,0.02)] overflow-hidden">
                    <div className="bg-stone-50/50 px-6 py-4 border-b border-stone-100">
                      <h4 className="font-bold text-stone-900 text-base">
                        {t(category.category, category.en)} 
                        {lang === 'ko' && <span className="text-stone-400 text-xs font-normal tracking-wider ml-1">{category.en}</span>}
                      </h4>
                    </div>
                    <ul className="divide-y divide-stone-100">
                      {category.items.map((item, i) => (
                        <li key={i} className="flex justify-between items-center px-6 py-4">
                          <span className="text-sm font-medium text-stone-600">
                            {t(item.name, item.nameEn || item.name)}
                          </span>
                          <span className="text-sm font-bold text-stone-900 tracking-wide">{item.price}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
                <div className="text-center pt-4">
                  <p className="text-[11px] text-stone-400">
                    {t("*커트/케어/드라이/부분시술은 멤버쉽 할인이 불가능합니다", "*Membership discounts do not apply to cut/care/dry/partial treatments.")}
                  </p>
                </div>
              </div>
            )}
          </div>
          
          <div className="text-center mt-8 text-[11px] text-stone-400 space-x-3 md:space-x-4">
            <span>{t("VAT 포함", "VAT Included")}</span>
            <span>|</span>
            <span>{t("소요시간 30~90분", "Takes 30~90 mins")}</span>
            <span>|</span>
            <span>{t("예약 필수", "Reservation Required")}</span>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="w-full bg-stone-900 text-white overflow-hidden py-4 border-y border-stone-800">
        <div className="animate-marquee">
          <span className="text-xs md:text-sm font-bold tracking-[0.3em] mx-4">
            STYLE · BEAUTY · CONFIDENCE · JUNO HAIR · MYEONGDONG · STYLE · BEAUTY · CONFIDENCE · JUNO HAIR · MYEONGDONG · STYLE · BEAUTY · CONFIDENCE · JUNO HAIR · MYEONGDONG ·
          </span>
        </div>
      </div>

      {/* 3. GALLERY SECTION - Designers */}
      <section id="gallery" data-screen-label="03 Gallery" className="py-24 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-14">
            <p className="text-xs font-bold tracking-[0.2em] text-stone-400 mb-3 uppercase">Our Team</p>
            <h3 className="text-3xl font-bold text-stone-900">Designers</h3>
            <p className="text-sm text-stone-500 mt-3 break-keep">
              {t('디자이너를 선택하여 소개와 포트폴리오를 확인하세요', 'Tap a designer to view their introduction and portfolio')}
            </p>
          </div>

          {/* 대표원장 - 상단 강조 */}
          <div className="flex justify-center mb-14">
            <div
              onClick={() => setSelectedDesigner(window.chiefDesigner)}
              className="flex flex-col items-center text-center group cursor-pointer"
            >
              <div className="relative">
                <div className="absolute -inset-1 rounded-full bg-gradient-to-br from-stone-200 to-stone-100 blur-[2px]"></div>
                <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden bg-stone-100 border-[4px] border-white shadow-[0_8px_25px_rgba(0,0,0,0.12)]">
                  <img
                    src={window.chiefDesigner.img}
                    alt={window.chiefDesigner.name}
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                </div>
              </div>
              <p className="text-[10px] font-bold tracking-[0.2em] text-stone-400 uppercase mt-5 mb-1">
                {t(window.chiefDesigner.title, window.chiefDesigner.titleEn)}
              </p>
              <h4 className="text-xl md:text-2xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
                {t(window.chiefDesigner.name, window.chiefDesigner.nameEn)}
              </h4>
              <p className="text-xs text-stone-400 tracking-widest uppercase mt-1">
                {window.chiefDesigner.nameEn}
              </p>
            </div>
          </div>

          {/* 구분선 */}
          <div className="flex items-center gap-4 max-w-sm mx-auto mb-12">
            <div className="flex-1 h-[1px] bg-stone-200"></div>
            <span className="text-[10px] font-bold tracking-[0.3em] text-stone-400 uppercase">Stylists</span>
            <div className="flex-1 h-[1px] bg-stone-200"></div>
          </div>

          {/* 10명 디자이너 카드 그리드 */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-5">
            {window.designers.map((designer, idx) => (
              <div
                key={idx}
                onClick={() => setSelectedDesigner(designer)}
                className="group cursor-pointer bg-white rounded-2xl overflow-hidden border border-stone-100 hover:border-stone-200 hover:shadow-[0_8px_30px_rgba(0,0,0,0.08)] transition-all duration-300"
              >
                <div className="aspect-[4/5] bg-stone-100 overflow-hidden relative">
                  <img
                    src={designer.img}
                    alt={t(designer.name, designer.nameEn)}
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  {/* Gradient overlay on hover */}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                </div>
                <div className="p-3 md:p-4 text-center">
                  <p className="text-[9px] md:text-[10px] font-bold tracking-[0.15em] text-stone-400 uppercase mb-1">
                    {t(designer.title, designer.titleEn)}
                  </p>
                  <h4 className="text-sm md:text-base font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
                    {t(designer.name, designer.nameEn)}
                  </h4>
                  <p className="text-[10px] text-stone-400 tracking-wider uppercase mt-0.5 truncate">
                    {designer.nameEn}
                  </p>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-10">
            <p className="text-[11px] text-stone-400">
              {t('* 카드를 탭하시면 상세 프로필과 예약 문의로 이동할 수 있습니다', '* Tap a card to view details and make an inquiry')}
            </p>
          </div>
        </div>
      </section>

      {/* 4. LOCATION */}
      <section id="location" data-screen-label="04 Location" className="py-24 bg-[#fcfcfc]">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <div className="text-center mb-12">
            <p className="text-xs font-bold tracking-[0.2em] text-stone-400 mb-3 uppercase">Find Us</p>
            <h3 className="text-3xl font-bold text-stone-900">Location</h3>
          </div>

          <div className="bg-stone-200 rounded-2xl h-[250px] md:h-[300px] mb-6 overflow-hidden relative border border-stone-100 shadow-sm flex items-center justify-center">
             <img 
                src="https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&q=80&w=800&h=400" 
                alt="Map" 
                className="absolute inset-0 w-full h-full object-cover opacity-30"
              />
              <div className="relative flex flex-col sm:flex-row gap-3">
                <a href="https://naver.me/xVBxDPcR" target="_blank" rel="noreferrer" className="bg-white/95 px-6 py-3 rounded-full text-sm font-bold text-[#03c75a] shadow-md flex items-center justify-center gap-2 hover:bg-white hover:scale-105 transition-all">
                  {t("네이버 지도", "Naver Map")} <Navigation className="w-4 h-4" />
                </a>
                <a href="https://maps.app.goo.gl/cXFPWMaesHqaREoA8" target="_blank" rel="noreferrer" className="bg-white/95 px-6 py-3 rounded-full text-sm font-bold text-[#4285F4] shadow-md flex items-center justify-center gap-2 hover:bg-white hover:scale-105 transition-all">
                  {t("구글 지도", "Google Maps")} <MapPin className="w-4 h-4" />
                </a>
              </div>
          </div>

          <div className="space-y-3">
            <div className="bg-white p-5 rounded-2xl border border-stone-100 flex items-center gap-5 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
              <div className="w-10 h-10 rounded-full bg-[#f5f5f5] flex items-center justify-center flex-shrink-0">
                <MapPin className="w-5 h-5 text-stone-600" />
              </div>
              <div>
                <p className="text-[11px] font-bold text-stone-400 mb-0.5">{t("주소", "Address")}</p>
                <p className="text-base text-stone-900 font-medium">
                  {t("서울 중구 명동6길 29 은좌빌딩 3층", "3F Eunjeong Bldg, 29 Myeongdong 6-gil, Jung-gu, Seoul")}
                </p>
              </div>
            </div>
            <div className="bg-white p-5 rounded-2xl border border-stone-100 flex items-center gap-5 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
              <div className="w-10 h-10 rounded-full bg-[#f5f5f5] flex items-center justify-center flex-shrink-0">
                <Clock className="w-5 h-5 text-stone-600" />
              </div>
              <div>
                <p className="text-[11px] font-bold text-stone-400 mb-0.5">{t("영업시간", "Hours")}</p>
                <p className="text-base text-stone-900 font-medium">
                  {t("~21:00 영업", "Open until 21:00")}
                </p>
              </div>
            </div>
            <div className="bg-white p-5 rounded-2xl border border-stone-100 flex items-center gap-5 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
              <div className="w-10 h-10 rounded-full bg-[#f5f5f5] flex items-center justify-center flex-shrink-0">
                <Phone className="w-5 h-5 text-stone-600" />
              </div>
              <div>
                <p className="text-[11px] font-bold text-stone-400 mb-0.5">{t("전화", "Phone")}</p>
                <a href="tel:0507-1488-3141" className="text-base text-stone-900 font-medium block">0507-1488-3141</a>
              </div>
            </div>
            <div className="bg-white p-5 rounded-2xl border border-stone-100 flex items-center gap-5 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
              <div className="w-10 h-10 rounded-full bg-[#f5f5f5] flex items-center justify-center flex-shrink-0 text-stone-600 font-bold text-xs">
                {t("지하철", "Subway")}
              </div>
              <div>
                <p className="text-[11px] font-bold text-stone-400 mb-0.5">{t("교통", "Transport")}</p>
                <p className="text-base text-stone-900 font-medium">
                  {t("명동역 6번 출구에서 138m", "138m from Myeongdong Stn Exit 6")}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-stone-900 pt-16 pb-8 border-t border-stone-800">
        <div className="max-w-4xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center md:items-start gap-10">
          <div className="text-center md:text-left">
            <h2
              className="text-white mb-2"
              style={{
                fontFamily: "'Pretendard Variable', Pretendard, -apple-system, sans-serif",
                fontWeight: 800,
                fontSize: '1.5rem',
                letterSpacing: '0.18em',
                lineHeight: 1,
              }}
            >
              JUNO&nbsp;HAIR
            </h2>
            <p className="text-[10px] font-bold tracking-[0.25em] text-stone-500 uppercase mb-5">
              {t("명동 1호점 · Myeongdong 01", "Myeongdong Branch 01")}
            </p>
            <div className="space-y-2 text-sm text-stone-400">
              <p>{t("서울 중구 명동6길 29 은좌빌딩 3층", "3F Eunjeong Bldg, 29 Myeongdong 6-gil, Jung-gu, Seoul")}</p>
              <p>{t("~21:00 영업", "Open until 21:00")}</p>
              <p>0507-1488-3141</p>
            </div>
          </div>
          <div className="flex gap-4">
            <a href="https://instagram.com/juno_myeongdong1" target="_blank" rel="noreferrer" className="w-12 h-12 rounded-full bg-stone-800 flex items-center justify-center hover:bg-stone-700 transition-colors text-white">
              <Instagram className="w-5 h-5" />
            </a>
            <a href="https://pf.kakao.com/junohair" target="_blank" rel="noreferrer" className="w-12 h-12 rounded-full bg-stone-800 flex items-center justify-center hover:bg-stone-700 transition-colors text-white">
              <MessageCircle className="w-5 h-5" />
            </a>
            <a href="https://map.naver.com/" target="_blank" rel="noreferrer" className="w-12 h-12 rounded-full bg-stone-800 flex items-center justify-center hover:bg-stone-700 transition-colors text-white font-bold text-lg">
              N
            </a>
          </div>
        </div>
        <div className="mt-16 text-center text-xs font-medium tracking-wider text-stone-600">
          © 2026 JUNO HAIR MYEONGDONG
        </div>
      </footer>
    </div>
  );
}

window.App = App;