// 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 = () => {
  const dlg = React.useRef(null);
  return (
  <footer className="intensives-footer">
    <style>{`
      .footer-contact{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
      .footer-contact:hover{color:var(--ink)}
      .contact-dialog{border:none;border-radius:14px;padding:0;max-width:360px;width:calc(100% - 40px);background:#fffdf8;color:var(--ink);box-shadow:0 30px 70px -20px rgba(7,21,68,.5)}
      .contact-dialog::backdrop{background:rgba(7,21,68,.45)}
      .contact-card{padding:26px}
      .contact-card h3{font-family:var(--font-display),Georgia,serif;font-size:22px;font-weight:600;margin:0 0 16px;color:var(--ink)}
      .contact-row{display:flex;gap:9px;align-items:center;font-size:15px;margin:11px 0;color:var(--ink-2,#28335a)}
      .contact-row a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:rgba(184,138,69,.5);text-underline-offset:2px}
      .contact-close{margin-top:18px;width:100%;padding:11px;border:1px solid rgba(7,21,68,.18);border-radius:9px;background:none;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
      .contact-close:hover{background:rgba(7,21,68,.04)}
    `}</style>
    <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="#cohort-intensive">Cohort Intensive</a>
          <span className="sep">·</span>
          <a href="#one-to-one-intensive">1-to-1 Intensive</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="https://iborbit.com/terms" target="_blank" rel="noreferrer">Terms</a> <span className="sep">·</span>{" "}
          <a href="https://iborbit.com/privacy" target="_blank" rel="noreferrer">Privacy</a> <span className="sep">·</span>{" "}
          <button type="button" className="footer-contact" onClick={() => dlg.current && dlg.current.showModal()}>Contact us</button>
        </div>
      </div>
    </div>

    <dialog ref={dlg} className="contact-dialog">
      <div className="contact-card">
        <h3>Contact us</h3>
        <div className="contact-row">📧 Email <a href="mailto:hello@iborbit.com">hello@iborbit.com</a></div>
        <div className="contact-row">📸 DM <a href="https://instagram.com/iborbit" target="_blank" rel="noreferrer">@iborbit</a> on Instagram</div>
        <button type="button" className="contact-close" onClick={() => dlg.current && dlg.current.close()}>Close</button>
      </div>
    </dialog>
  </footer>
  );
};

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

