/* Mega-Sweets website — header, hero, footer chrome */

function SiteHeader({ onOrder, onNav }) {
  return (
    <header className="sh">
      <a className="sh-brand" onClick={() => onNav('home')}>
        <img src="assets/logo-wordmark.png" alt="Mega-Sweets" />
      </a>
      <button className="ms-btn ms-btn--primary sh-cta" onClick={onOrder}>Build a Box</button>
    </header>
  );
}

function Hero({ onOrder, onFlavors, content }) {
  const pd = content.perDozen;
  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="hero-copy">
          <span className="eyebrow">Handcrafted • Small Batch</span>
          <h1 className="hero-title">Cake Pops <span className="amp">&amp;</span> Cakesicles</h1>
          <p className="hero-sub">Beach-pretty treats, made to order for your celebration. Custom colors,
            flavors, and themed packaging — always.</p>
          <div className="hero-actions">
            <button className="ms-btn ms-btn--primary" onClick={onOrder}>Build a Box</button>
            <button className="ms-btn ms-btn--outline" onClick={onFlavors}>See Flavors</button>
          </div>
          <div className="hero-prices">
            <div><span className="hp-label">Cake Pops</span><span className="price price--green">${pd.cakePops}<small>/dozen</small></span></div>
            <span className="ms-pipe" style={{ height: 38 }}></span>
            <div><span className="hp-label">Cakesicles</span><span className="price price--green">${pd.cakesicles}<small>/dozen</small></span></div>
          </div>
        </div>
        <div className="hero-art">
          <img src={content.images.hero} alt="Cakesicles platter" />
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  return (
    <footer className="sf">
      <img className="sf-logo" src="assets/logo-wordmark.png" alt="Mega-Sweets" />
      <p className="sf-tag eyebrow">Handcrafted • Small Batch</p>
      <div className="sf-links">
        <a>Cake Pops</a><a>Cakesicles</a><a>Flavors</a><a>Packages</a><a>Custom Orders</a>
      </div>
      <p className="small sf-fine">Individually wrapped &amp; boxed · Custom colors included · Themed packaging on request</p>
    </footer>
  );
}

Object.assign(window, { SiteHeader, Hero, SiteFooter });