/* ===== shared components ===== */
const { useState, useEffect, useRef, useCallback } = React;

/* ---- icons (minimal 1.5px stroke UI icons) ---- */
const Icon = ({ name, size = 18 }) => {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    mail: <><rect x="2.5" y="4.5" width="19" height="15" rx="1.5" /><path d="m3 6 9 6 9-6" /></>,
    blog: <><path d="M4 5h16M4 12h16M4 19h10" /></>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" /></>,
    share: <><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7" /><path d="M12 15V3" /><path d="m8 7 4-4 4 4" /></>,
    link: <><path d="M9 15 15 9" /><path d="M11 6l1-1a4 4 0 0 1 6 6l-1 1" /><path d="M13 18l-1 1a4 4 0 0 1-6-6l1-1" /></>,
    download: <><path d="M12 3v13" /><path d="m7 11 5 5 5-5" /><path d="M4 21h16" /></>,
    play: <><path d="M8 5v14l11-7z" fill="currentColor" stroke="none" /></>,
    arrow: <><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>,
    arrowLeft: <><path d="M19 12H5" /><path d="m11 18-6-6 6-6" /></>,
    pin: <><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.2-3.2" /></>,
    check: <><path d="m5 12 5 5 9-11" /></>,
    close: <><path d="M6 6l12 12M18 6 6 18" /></>,
  };
  return <svg {...p}>{paths[name]}</svg>;
};

/* ---- wordmark (real logo mark) ---- */
const Wordmark = ({ onClick }) => (
  <button className="wm" onClick={onClick} aria-label="art&music house home">
    <img className="wm__logo" src={(window.AMH_BASE || "") + "assets/logo.png"} alt="art&music house" />
  </button>
);

/* ---- header ---- */
const Header = ({ onHome, view }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const el = document.querySelector(".scroller") || window;
    const onScroll = () => setScrolled((el.scrollTop || window.scrollY) > 12);
    el.addEventListener("scroll", onScroll);
    return () => el.removeEventListener("scroll", onScroll);
  }, [view]);
  return (
    <header className={"hdr" + (scrolled ? " hdr--solid" : "")}>
      <div className="wrap hdr__row">
        <Wordmark onClick={onHome} />
        <nav className="hdr__nav">
          <span className="eyebrow">{window.SEASON.label}</span>
          <span className="hdr__dot" />
          <span className="eyebrow">{window.SEASON.dates}</span>
        </nav>
      </div>
    </header>
  );
};

/* ---- footer ---- */
const Footer = () => {
  const s = window.SOCIAL;
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr__top">
          <div className="ftr__mark">
            <div className="display ftr__big">Happy</div>
            <p className="eyebrow">art&amp;music house · {window.SEASON.no}</p>
          </div>
          <div className="ftr__contact">
            <a className="ftr__email serif" href={"mailto:" + s.email}>{s.email}</a>
            <div className="ftr__socials">
              <a href={"mailto:" + s.email} className="soc" aria-label="Email"><Icon name="mail" size={19} /><span>Email</span></a>
              <a href={s.blog} target="_blank" rel="noopener" className="soc" aria-label="Blog"><Icon name="blog" size={19} /><span>Blog</span></a>
              <a href={s.instagram} target="_blank" rel="noopener" className="soc" aria-label="Instagram"><Icon name="instagram" size={19} /><span>Instagram</span></a>
            </div>
          </div>
        </div>
        <hr className="rule" />
        <div className="ftr__bot">
          <span className="eyebrow">© 2026 art&amp;music house</span>
          <span className="eyebrow">Seoul, KR</span>
        </div>
      </div>
    </footer>
  );
};

/* ---- toast host (imperative) ---- */
let _showToast = () => {};
const ToastHost = () => {
  const [msg, setMsg] = useState(null);
  useEffect(() => { _showToast = (m) => { setMsg(m); setTimeout(() => setMsg(null), 2200); }; }, []);
  return (
    <div className={"toast" + (msg ? " show" : "")}>
      <Icon name="check" size={15} />{msg}
    </div>
  );
};
const toast = (m) => _showToast(m);

Object.assign(window, { Icon, Wordmark, Header, Footer, ToastHost, toast });