// Section 11 — Footer.
// Three rows: brand + back-link · anchor nav + socials · legal + built-by credit.
// Social icons inlined as SVG (avoids Lucide CDN drift; cleaner editorial look).

const SocialIcon = ({ name }) => {
  if (name === "instagram") {
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect x="3" y="3" width="18" height="18" rx="5" ry="5"></rect>
        <circle cx="12" cy="12" r="4"></circle>
        <line x1="17.5" y1="6.5" x2="17.5" y2="6.5"></line>
      </svg>
    );
  }
  if (name === "tiktok") {
    return (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.83a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.26Z"/>
      </svg>
    );
  }
  if (name === "youtube") {
    return (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M21.58 7.19a2.49 2.49 0 0 0-1.75-1.76C18.25 5 12 5 12 5s-6.25 0-7.83.43A2.49 2.49 0 0 0 2.42 7.19 26 26 0 0 0 2 12a26 26 0 0 0 .42 4.81 2.49 2.49 0 0 0 1.75 1.76C5.75 19 12 19 12 19s6.25 0 7.83-.43a2.49 2.49 0 0 0 1.75-1.76A26 26 0 0 0 22 12a26 26 0 0 0-.42-4.81ZM10 15V9l5.2 3Z"/>
      </svg>
    );
  }
  return null;
};

const IntensivesFooter = () => (
  <footer className="intensives-footer">
    <div className="wide">
      <div className="footer-row footer-row-1">
        <div className="footer-brand">
          <img src="iborbit-logo-transparent.png" alt="iBOrbit" className="footer-logo" />
          <span className="footer-sub">Intensives</span>
        </div>
        <a className="footer-back" href="https://iborbit.com">
          <Icon name="arrow-left" /> Back to iBOrbit
        </a>
      </div>

      <div className="footer-row footer-row-2">
        <nav className="footer-nav" aria-label="Footer navigation">
          <a href="#essay-intensive">Essay Intensive</a>
          <span className="sep">·</span>
          <a href="#component-intensive">Component Intensive</a>
          <span className="sep">·</span>
          <a href="#coaching">Office Hours</a>
          <span className="sep">·</span>
          <a href="#guarantee">The Guarantee</a>
          <span className="sep">·</span>
          <a href="#intake">Next Intake</a>
          <span className="sep">·</span>
          <a href="#parents">For Parents</a>
        </nav>
        <div className="footer-socials">
          <a href="https://instagram.com/iborbit" aria-label="Instagram" target="_blank" rel="noopener">
            <SocialIcon name="instagram" />
          </a>
          <a href="https://tiktok.com/@iborbit" aria-label="TikTok" target="_blank" rel="noopener">
            <SocialIcon name="tiktok" />
          </a>
          <a href="https://youtube.com/@iborbit" aria-label="YouTube" target="_blank" rel="noopener">
            <SocialIcon name="youtube" />
          </a>
        </div>
      </div>

      <div className="footer-row footer-row-3">
        <div className="footer-legal">
          © 2026 iBOrbit <span className="sep">·</span>{" "}
          <a href="#terms">Terms</a> <span className="sep">·</span>{" "}
          <a href="#privacy">Privacy</a>
        </div>
        <div className="footer-credit">
          Built by Steven Park, Elijah Ingram, and Sebastian Pabst. May 2026 graduates.
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { IntensivesFooter, SocialIcon });