// FOOTER. oxblood, three-column

const FOOTER_NAV = [
  { id: 'top',      label: 'Home' },
  { id: 'about',    label: 'About' },
  { id: 'services', label: 'Healing Services' },
  { id: 'books',    label: "Children's Books" },
  { id: 'soulpath', label: 'SoulPath Collective' },
  { id: 'yidaki',   label: 'Didgeridoo / Yidaki' },
  { id: 'shop',     label: 'Shop' },
];

function SocialIcon({ kind }) {
  if (kind === 'ig') return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4.5"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
    </svg>
  );
  return null;
}

function Footer() {
  return (
    <footer className="footer">
      <div className="dot-strip" style={{ marginBottom: 60 }}/>

      <img className="footer__bg" src="assets/wing-emblem.svg" alt=""/>

      <div className="container">
        <div className="footer__grid">
          <div>
            <p className="footer__brand">The Cosmic Healer</p>
            <p className="footer__name">Jacob Tapp</p>
            <p className="footer__loc">Sydney, Australia · Healing Worldwide</p>
          </div>

          <div className="footer__col">
            <h4>Navigate</h4>
            <ul className="footer__nav">
              {FOOTER_NAV.map(n => (
                <li key={n.id}>
                  <a href={`#${n.id}`} onClick={(e)=>{e.preventDefault(); smoothScrollTo(n.id);}}>{n.label}</a>
                </li>
              ))}
            </ul>
          </div>

          <div className="footer__col footer__contact">
            <a className="footer__ig-cta" href="https://www.instagram.com/the_cosmic_healer_" target="_blank" rel="noopener noreferrer">
              <SocialIcon kind="ig"/>
              <span>
                <span className="footer__ig-label">Follow on Instagram</span>
                <span className="footer__ig-handle">@the_cosmic_healer_</span>
              </span>
            </a>
            <a className="footer__email" href="mailto:333thecosmichealer@gmail.com">333thecosmichealer@gmail.com</a>
          </div>
        </div>

        <div className="footer__divider"/>
        <p className="footer__legal">
          © {new Date().getFullYear()} The Cosmic Healer · Jacob Tapp · All Rights Reserved
        </p>
      </div>
    </footer>
  );
}

window.Footer = Footer;