// Veloen Jewelry — Header + Mobile Drawer

const NAV_LINKS = [
  { id: "hero",      label: "벨로엔" },
  { id: "portfolio", label: "포트폴리오" },
  { id: "reviews",   label: "고객 후기" },
];

function SiteHeader({ onOpenDrawer, onJump }) {
  return (
    <header className="site-header">
      <div className="container inner">
        <div className="brand veloen-brand" onClick={() => onJump("hero")}>
          <img src="photos/veloen-logo.png" alt="Veloen Jewelry"/>
        </div>
        <nav>
          {NAV_LINKS.map(link => (
            <a key={link.id} onClick={() => onJump(link.id)}>{link.label}</a>
          ))}
        </nav>
        <button className="cta-btn" onClick={() => window.dispatchEvent(new CustomEvent("open-inquiry"))}>제작 문의</button>
        <button className="hamburger" onClick={onOpenDrawer} aria-label="menu">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M3 6h18M3 12h18M3 18h18"/>
          </svg>
        </button>
      </div>
    </header>
  );
}

function MobileDrawer({ open, onClose, onJump }) {
  return (
    <div className={"drawer-overlay " + (open ? "open" : "")}>
      <div className="top">
        <div className="brand veloen-brand">
          <img src="photos/veloen-logo.png" alt="Veloen Jewelry"/>
        </div>
        <button className="hamburger" onClick={onClose}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M6 6l12 12M6 18L18 6"/>
          </svg>
        </button>
      </div>
      <div className="links">
        {NAV_LINKS.map(link => (
          <a key={link.id} onClick={() => { onJump(link.id); onClose(); }}>{link.label}</a>
        ))}
        <a onClick={() => { window.dispatchEvent(new CustomEvent("open-inquiry")); onClose(); }} style={{ color: "var(--gold)" }}>제작 문의 →</a>
        <div style={{ marginTop: 24, padding: "20px 0", borderTop: "var(--border)" }}>
          <span className="sub">CONTACT</span>
          <p style={{ fontFamily: "var(--font-mono)", color: "var(--fg-2)", fontSize: 13, letterSpacing: "0.08em", margin: "8px 0 0" }}>VELOEN JEWELRY</p>
        </div>
      </div>
    </div>
  );
}

window.SiteHeader = SiteHeader;
window.MobileDrawer = MobileDrawer;
window.NAV_LINKS = NAV_LINKS;