// Sections for Salon de Goyo

const { useState, useEffect, useRef } = React;

// ---------- Reveal hook ----------
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
        });
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ---------- Logo ----------
function Wordmark({ width = 200, color = "currentColor" }) {
  return (
    <svg viewBox="0 0 440 110" width={width} style={{ color, display: "block" }} fill="none">
      <text x="220" y="62" textAnchor="middle"
        style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 56, fontWeight: 400, letterSpacing: "0.02em", fill: "currentColor" }}>
        Salon <tspan style={{ fontStyle: "italic", fontWeight: 300 }}>de</tspan> Goyo
      </text>
      <line x1="150" y1="80" x2="200" y2="80" stroke="currentColor" strokeWidth="0.8" />
      <line x1="240" y1="80" x2="290" y2="80" stroke="currentColor" strokeWidth="0.8" />
      <text x="220" y="98" textAnchor="middle"
        style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: "0.55em", fontWeight: 500, fill: "currentColor" }}>
        SINPUNG · SEOUL
      </text>
    </svg>
  );
}

// ---------- Header ----------
function Header() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`site-header ${scrolled ? "solid" : "transparent"}`}>
      <div className="header-inner">
        <a href="#top" className="header-logo">
          <Wordmark width={170} />
        </a>
        <nav className="nav">
          {NAV_ITEMS.map((n) => (
            <a key={n.id} href={`#${n.id}`} className="nav-link">{n.label}</a>
          ))}
        </nav>
        <a className="header-cta" href="https://m.booking.naver.com/booking/13/bizes/1617237/items/7518889" target="_blank" rel="noopener noreferrer">
          예약 →
        </a>
      </div>
    </header>
  );
}

// ---------- Hero ----------
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <img src="assets/store-2.jpg" alt="살롱 드 고요 매장 내부" />
      </div>
      <div className="hero-content">
        <div>
          <div className="hero-tagline">— Owner-direct hair sanctuary, since 2026</div>
          <h1 className="hero-title">
            처음부터 끝까지,<br />
            <span className="hero-title-accent">원장이 직접.</span>
          </h1>
          <p className="hero-sub">
            서두르지 않고, 오직 당신에게만 집중하는<br />
            고요한 시간입니다. 원장 직접 시술 · 예약제로 운영됩니다.
          </p>
          <a className="btn btn-light" href="https://m.booking.naver.com/booking/13/bizes/1617237/items/7518889" target="_blank" rel="noopener noreferrer">
            예약하기 <span className="btn-arrow">→</span>
          </a>
        </div>
        <div className="hero-meta">
          <div>SINCE<br/>2026</div>
          <div className="hero-meta-rule"></div>
          <div>SEOUL<br/>SINPUNG</div>
          <div className="hero-meta-rule"></div>
          <div>OWNER<br/>JAY</div>
        </div>
      </div>
      <div className="scroll-cue">SCROLL</div>
    </section>
  );
}

// ---------- Brand Bar ----------
function BrandBar() {
  const items = ["원장 직접 시술", "예약제 운영", "Kérastase · 아윤채", "박승철 여의도점 점장 출신"];
  return (
    <div className="brand-bar">
      <div className="brand-bar-inner">
        {items.map((it, i) => (
          <div className="brand-bar-item" key={i}>
            <span className="brand-bar-dot"></span>
            {it}
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- About ----------
function About() {
  const ref = useReveal();
  return (
    <section id="about" className="section-pad">
      <div className="wrap">
        <div className="about-grid reveal" ref={ref}>
          <div className="about-image-wrap">
            <img src="assets/profile.png" alt="제이 원장" />
            <div className="about-image-tag">
              <div className="role">Owner Stylist</div>
              <div className="name">Jay · 제이 원장</div>
            </div>
          </div>
          <div className="about-text">
            <div className="eyebrow">— About Jay</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              안녕하세요,<br/>원장 제이입니다.
            </h2>
            <div style={{ height: 28 }}></div>
            <p>
              두피와 모발 상태, 얼굴형과 분위기에 자연스럽게 어울리는 스타일을 찾아드립니다.
              오래 맡겨 주신 분들도, 처음 찾아주시는 분들도 이 공간에서는 잠시 쉬어 가는 마음이었으면 좋겠습니다.
            </p>
            <p>
              서두르지 않고 과하지 않게, 지금 고객님께 가장 어울리는 스타일과 필요한 휴식을 정성스럽게 제공하고 싶습니다.
            </p>
            <div className="about-credentials">
              <div>
                <div className="num">20<span style={{fontSize: 18}}>년+</span></div>
                <div className="lbl">Career</div>
              </div>
              <div>
                <div className="num">1:1</div>
                <div className="lbl">Booking only</div>
              </div>
              <div>
                <div className="num">5.0<span style={{fontSize: 16, color: 'var(--gold)'}}> ★</span></div>
                <div className="lbl">Naver review</div>
              </div>
            </div>
            <p style={{ fontSize: 14, color: "var(--muted)", marginBottom: 28 }}>
              전 박승철 헤어스튜디오 여의도점 점장 출신.<br/>
              상담부터 마무리까지 — 모든 시술을 제이 원장이 직접 진행합니다.
            </p>
            <a className="btn" href="#why">
              직접 시술의 가치 <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Services preview ----------
function Services() {
  const ref = useReveal();
  return (
    <section className="services section-pad">
      <div className="wrap">
        <div className="section-head center reveal" ref={ref}>
          <div className="label">Signature Services</div>
          <h2 className="h-section">대표 시술</h2>
          <p className="body-ko" style={{ maxWidth: 540, textAlign: "center" }}>
            모든 시술은 제이 원장이 직접 진행합니다.<br/>
            두피·모발 상태에 맞춰 매번 다르게 설계됩니다.
          </p>
        </div>
        <div className="service-grid">
          {SERVICES.map((s, i) => (
            <div className="service-card" key={i}>
              <div className="service-num">— {s.num}</div>
              <div>
                <div className="service-title-en">{s.en}</div>
                <h3 className="service-title">{s.ko}</h3>
              </div>
              <div className="service-image">
                <img src={s.image} alt={s.ko} />
              </div>
              <p className="service-desc">{s.desc}</p>
              <div className="service-price">
                <span className="from">From</span>
                <span className="amount">₩ {s.price}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <a className="btn" href="#menu">전체 메뉴 · 가격표 <span className="btn-arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ---------- Why owner-direct ----------
function WhyOwner() {
  const ref = useReveal();
  const pillars = [
    { num: "i.", title: "직접 시술", text: "보조 없이 상담·두피 분석·시술·트리트먼트·마무리까지 제이 원장이 처음부터 끝까지." },
    { num: "ii.", title: "섬세함", text: "두피 측정에서 타올 드라이까지, 사소한 단계도 놓치지 않는 꼼꼼한 케어." },
    { num: "iii.", title: "프리미엄", text: "케라스타즈 · 아윤채 · 엘루이 등 검증된 최상급 제품 라인만 사용합니다." },
  ];
  return (
    <section id="why" className="why">
      <div className="wrap">
        <div className="why-grid reveal" ref={ref}>
          <div>
            <div className="eyebrow">— Why owner-direct matters</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              왜 원장이<br/>직접 해야 할까요?
            </h2>
          </div>
          <div>
            <p>
              일반 헤어샵에서는 샴푸·드라이·마무리를 어시스턴트가 나눠 담당하는 경우가 많습니다.
              살롱 드 고요는 다릅니다.
            </p>
            <p>
              첫 상담부터 두피 분석, 시술, 트리트먼트, 마지막 스타일링까지 — 모두 제이 원장이 직접 진행합니다.
              덕분에 모발 상태와 히스토리가 매 방문마다 정확히 이어지고, 매번 더 나은 결과를 드릴 수 있습니다.
            </p>
          </div>
        </div>
        <div className="why-pillars">
          {pillars.map((p, i) => (
            <div className="why-pillar" key={i}>
              <div className="why-pillar-num">{p.num}</div>
              <div className="why-pillar-title">{p.title}</div>
              <div className="why-pillar-text">{p.text}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Menu / Pricing ----------
function Menu() {
  const [active, setActive] = useState(MENU_CATEGORIES[0].id);
  const cat = MENU_CATEGORIES.find((c) => c.id === active);
  const ref = useReveal();
  return (
    <section id="menu" className="section-pad">
      <div className="wrap-narrow">
        <div className="section-head center reveal" ref={ref}>
          <div className="label">Menu &amp; Price</div>
          <h2 className="h-section">시술 메뉴</h2>
          <p className="body-ko" style={{ maxWidth: 540, textAlign: "center" }}>
            시술 전 두피·모발 상태를 직접 확인하고 당신에게 맞는 제품과 방법을 선택합니다.
          </p>
        </div>
        <div className="menu-tabs">
          {MENU_CATEGORIES.map((c) => (
            <button
              key={c.id}
              className={`menu-tab ${active === c.id ? "active" : ""}`}
              onClick={() => setActive(c.id)}
            >
              {c.ko}
              <span className="tab-en">{c.en}</span>
            </button>
          ))}
        </div>
        <div className="menu-list">
          {cat.items.map((it, i) => (
            <div className="menu-row" key={i}>
              <div>
                <div className="menu-name">
                  {it.name}
                  {it.badge && <span className="badge">{it.badge}</span>}
                </div>
                <div className="menu-detail">{it.detail}</div>
              </div>
              <div className="menu-price-amount">₩ {it.price}</div>
            </div>
          ))}
          <div className="menu-note">
            * 어깨 아래 +20,000 / 가슴 아래 +40,000 &nbsp;·&nbsp; 모든 시술은 제이 원장이 직접 진행합니다.
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Portfolio ----------
function Portfolio() {
  const [filter, setFilter] = useState("all");
  const ref = useReveal();
  const items = filter === "all" ? PORTFOLIO : PORTFOLIO.filter((p) => p.cat === filter);
  return (
    <section id="portfolio" className="portfolio section-pad">
      <div className="wrap">
        <div className="section-head center reveal" ref={ref}>
          <div className="label">Portfolio</div>
          <h2 className="h-section">고요의 스타일</h2>
          <p className="body-ko" style={{ maxWidth: 540, textAlign: "center" }}>
            얼굴형과 모발 결에 맞춰 설계한 시술. 모두 제이 원장의 손에서 완성됩니다.
          </p>
        </div>
        <div className="portfolio-filter">
          {PORTFOLIO_FILTERS.map((f) => (
            <button
              key={f.id}
              className={filter === f.id ? "active" : ""}
              onClick={() => setFilter(f.id)}
            >{f.label}</button>
          ))}
        </div>
        <div className="portfolio-grid">
          {items.map((p, i) => (
            <div className={`portfolio-item pf-w-${p.w} pf-h-${p.h}`} key={`${filter}-${i}`}>
              <img src={p.src} alt={p.name} loading="lazy" />
              <div className="portfolio-overlay">
                <div className="pf-cat">{p.cat}</div>
                <div className="pf-name">{p.name}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 64 }}>
          <span className="label" style={{ display: "block", marginBottom: 18 }}>Instagram</span>
          <div className="serif" style={{ fontSize: 28, fontStyle: "italic", color: "var(--muted)", marginBottom: 8 }}>@ coming soon</div>
          <p className="body-ko" style={{ maxWidth: 480, margin: "0 auto" }}>
            인스타그램 채널을 준비 중입니다. 채널이 열리는 대로 가장 먼저 안내드릴게요.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- Reviews ----------
function Reviews() {
  const ref = useReveal();
  return (
    <section id="reviews" className="section-pad">
      <div className="wrap">
        <div className="section-head center reveal" ref={ref}>
          <div className="label">Customer voices</div>
          <h2 className="h-section">고객의 이야기</h2>
        </div>
        <div className="reviews-stats">
          <div className="stat">
            <div className="stars">★★★★★</div>
            <div className="v">5.0</div>
            <div className="l">Naver review</div>
          </div>
          <div className="stat">
            <div className="v">42</div>
            <div className="l">Reviews</div>
          </div>
          <div className="stat">
            <div className="v">10<span style={{fontSize: 22}}>년+</span></div>
            <div className="l">Loyal clients</div>
          </div>
        </div>
        <div className="keyword-cloud">
          {KEYWORDS.map(([k, n], i) => (
            <span className="keyword" key={i}>
              #{k}<span className="count">{n}</span>
            </span>
          ))}
        </div>
        <div className="review-grid">
          {REVIEWS.map((r, i) => (
            <div className="review-card" key={i}>
              <div className="stars">★★★★★</div>
              <div className="quote">“{r.quote}”</div>
              <div className="meta">
                <span>— {r.by}</span>
                <span className="tag">{r.tag}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Booking CTA ----------
function BookingCTA() {
  return (
    <section className="booking-cta">
      <div className="wrap-narrow">
        <div className="eyebrow" style={{ color: "var(--gold)" }}>— Reservation</div>
        <h2 className="h-section" style={{ marginTop: 16 }}>
          원장이 직접,<br/>정성껏 모십니다.
        </h2>
        <p>
          살롱 드 고요는 원장 직접 시술 · 예약제로 운영됩니다.<br/>
          시술 내내 원장의 온전한 집중을 받으실 수 있습니다.
        </p>
        <div className="cta-row">
          <a className="btn btn-light" href="https://m.booking.naver.com/booking/13/bizes/1617237/items/7518889" target="_blank" rel="noopener noreferrer">
            네이버 예약 <span className="btn-arrow">→</span>
          </a>
          <a className="btn btn-light" href="tel:02-833-4212">
            전화 02-833-4212
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- Location ----------
function Location() {
  return (
    <section id="location" className="section-pad-sm" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="loc-grid">
        <div className="loc-map">
          <iframe
            src="https://maps.google.com/maps?q=%EC%84%9C%EC%9A%B8+%EC%98%81%EB%93%B1%ED%8F%AC%EA%B5%AC+%EC%8B%A0%ED%92%8D%EB%A1%9C+77&z=17&ie=UTF8&iwloc=&output=embed"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="살롱 드 고요 위치"
          ></iframe>
        </div>
        <div className="loc-info">
          <div className="eyebrow">— Visit</div>
          <h3>Salon de Goyo</h3>
          <div className="addr">
            서울 영등포구 신풍로 77<br/>
            상가동 C108호<br/>
            <span style={{ fontSize: 13, color: "var(--muted)" }}>신풍역 1번 출구 → 329m 직진</span>
          </div>
          {HOURS.map((h, i) => (
            <div className="loc-row" key={i}>
              <div className="k">{h.day}</div>
              <div className="v">{h.time}</div>
            </div>
          ))}
          <div className="loc-row">
            <div className="k">전화</div>
            <div className="v">02-833-4212<br/>0507-1301-7517</div>
          </div>
          <div className="loc-row">
            <div className="k">주차</div>
            <div className="v">매장 앞 주차 가능 · 무선 인터넷 제공</div>
          </div>
          <div style={{ marginTop: 32 }}>
            <a className="btn" href="https://map.naver.com/p/search/%EC%82%B4%EB%A1%B1%EB%93%9C%EA%B3%A0%EC%9A%94" target="_blank" rel="noopener noreferrer">
              네이버 지도 <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div style={{ color: "#f6f3ee", marginBottom: 18 }}>
              <Wordmark width={200} />
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.8, maxWidth: 320, margin: 0 }}>
              서울 영등포구 신풍로 77 상가동 C108호<br/>
              원장 직접 시술 · 예약제
            </p>
          </div>
          <div>
            <h4>Menu</h4>
            <ul>
              {NAV_ITEMS.map((n) => (<li key={n.id}><a href={`#${n.id}`}>{n.label}</a></li>))}
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="tel:02-833-4212">02-833-4212</a></li>
              <li><a href="tel:0507-1301-7517">0507-1301-7517</a></li>
              <li><a href="https://m.booking.naver.com/booking/13/bizes/1617237/items/7518889" target="_blank" rel="noopener noreferrer">네이버 예약</a></li>
            </ul>
          </div>
          <div>
            <h4>Follow</h4>
            <ul>
              <li><span style={{ opacity: 0.6 }}>Instagram · 준비 중</span></li>
              <li><span style={{ opacity: 0.6 }}>YouTube · 준비 중</span></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Salon de Goyo · 살롱 드 고요</span>
          <span>Designed in stillness.</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Mobile floating CTA ----------
function MobileFloat({ visible }) {
  if (!visible) return null;
  return (
    <div className="mobile-float">
      <a className="outline" href="tel:02-833-4212">전화</a>
      <a href="https://m.booking.naver.com/booking/13/bizes/1617237/items/7518889" target="_blank" rel="noopener noreferrer">네이버 예약</a>
    </div>
  );
}

// Export
Object.assign(window, {
  Header, Hero, BrandBar, About, Services, WhyOwner, Menu, Portfolio, Reviews, BookingCTA, Location, Footer, MobileFloat, Wordmark,
});