/* ===== Landing (main.svg) — exhibition selector ===== */
const KIT = window.AMH_KIT || "";
const BASE = window.AMH_BASE || "";
const EXHIBITION_URL = "/exhibitions/2026-happy/";

const LandingHeader = () => (
  <header className="band">
    <div className="wrapm hh-hdr">
      <img className="hh-hdr__logo" src={BASE + "assets/logo.png"} alt="art&music house" />
    </div>
  </header>
);

const ExhibitionEntry = ({ eyebrow, sub, href }) => {
  const inner = (
    <>
      <div className="wrapm hh-hero__top">
        <span className="hh-ey hh-ey--ink">{eyebrow}</span>
        <span className="hh-hero__sub">{sub}</span>
      </div>
      {href ? (
        <a className="hh-home-arch" href={href} aria-label="Happy — enter exhibition">
          <img src={BASE + "assets/hero-flowers.jpg"} alt="Happy — the colors of happiness" />
          <div className="hh-home-arch__scrim" />
          <div className="hh-home-arch__title">
            <span className="hh-home-arch__h serif">HAPPY</span>
            <span className="hh-home-arch__rule" />
            <span className="hh-home-arch__sub serif">The Colors of Happiness</span>
          </div>
        </a>
      ) : (
        <div className="hh-home-arch hh-home-arch--empty" aria-hidden="true" />
      )}
    </>
  );
  return <section className="hh-exh band">{inner}</section>;
};

const LandingFooter = () => {
  const s = window.SOCIAL;
  return (
    <footer className="band" style={{ borderBottom: 0 }}>
      <div className="wrapm hh-ftr">
        <span className="hh-ftr__connect">Connect</span>
        <div className="hh-ftr__links">
          <a href={s.blog} target="_blank" rel="noopener">Blog</a>
          <a href={"mailto:" + s.email}>Email</a>
        </div>
        <div className="hh-ftr__info">
          <span className="num">{s.phone}</span>
          <span>{s.addr}</span>
          <span className="acad">음악과 미술이 한공간에 있는 학원</span>
          <span>Art and Music Academy</span>
        </div>
        <div className="hh-ftr__logo">
          <img src={BASE + "assets/logo.png"} alt="art&music house" />
          <div className="kr">아트&뮤직 하우스</div>
          <div className="en">Art and Music Academy</div>
        </div>
      </div>
    </footer>
  );
};

const Landing = () => (
  <div className="happy">
    <LandingHeader />
    <ExhibitionEntry eyebrow={window.SEASON.dates} sub={window.SEASON.tagline} href={EXHIBITION_URL} />
    <ExhibitionEntry eyebrow={window.SEASON.next} sub="Not yet..." href={null} />
    <LandingFooter />
  </div>
);

Object.assign(window, { Home: Landing });