/* global React */

function Footer({ onNav }) {
  const go = (id) => (e) => { e.preventDefault(); onNav && onNav(id); };
  return (
    <footer className="kit-footer">
      <div className="kit-footer__inner">
        <div>
          <div className="kit-footer__mark">
            <img src={asset("assets/ahp-logo/Primary-rose.png")} alt="" />
          </div>
          <p style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 20, lineHeight: 1.3, marginTop: 16,
            color: 'var(--rose)', maxWidth: 320
          }}>
            Capturing your moments, the ordinary and extraordinary,
            in Athens &amp; beyond.
          </p>
          {/* Single social link, so it belongs with the brand rather than in a
              column of its own with a heading above it. */}
          <a className="kit-footer__ig" href="#" aria-label="Instagram">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="3" y="3" width="18" height="18" rx="5" />
              <circle cx="12" cy="12" r="4.2" />
              <circle cx="17.3" cy="6.7" r="1.15" className="is-filled" />
            </svg>
            <span>@abbyharperphoto</span>
          </a>
        </div>
        <div>
          <h6>Explore</h6>
          <ul>
            <li><a href="#gallery/weddings" onClick={go('gallery/weddings')}>Weddings</a></li>
            <li><a href="#gallery/engagements" onClick={go('gallery/engagements')}>Engagements</a></li>
            <li><a href="#gallery/families" onClick={go('gallery/families')}>Families</a></li>
            <li><a href="#gallery/travel" onClick={go('gallery/travel')}>Travel</a></li>
          </ul>
        </div>
        <div>
          <h6>Studio</h6>
          <ul>
            <li><a href="#" onClick={go('about')}>About Abby</a></li>
            <li><a href="#" onClick={go('investment')}>Investment</a></li>
            <li><a href="#" onClick={go('journal')}>The Journal</a></li>
            <li><a href="#" onClick={go('contact')}>Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="kit-footer__bottom">
        <span>© 2026 Abby Harper Photo</span>
        <span>Athens · Georgia</span>
      </div>
    </footer>
  );
}

window.Footer = Footer;