// PageChrome.jsx — shared chrome for every secondary page (About, Contact,
// Hoodies store, Compare, Privacy, Terms, Cookies).
//
// Previously each .html file carried its own copy of SOCIAL, the social-icon
// components and a near-identical TopBar. They are consolidated here so the
// combined single-page app declares them exactly once.
//
// NOTE: this file is loaded BEFORE Hero.jsx, which also uses `SOCIAL`.

const SOCIAL = {
  instagram: "https://www.instagram.com/motomelli/",
  tiktok:    "https://www.tiktok.com/@motomelli",
  facebook:  "https://www.facebook.com/profile.php?id=61566404001810",
};

const IGIcon = (p) => (
  <svg width={p.s||16} height={p.s||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="3" width="18" height="18" rx="5"/>
    <circle cx="12" cy="12" r="4"/>
    <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" stroke="none"/>
  </svg>
);
const FBIcon = (p) => (
  <svg width={p.s||16} height={p.s||16} viewBox="0 0 24 24" fill="currentColor">
    <path d="M13.5 21v-7.5h2.5l.4-3h-2.9V8.6c0-.87.27-1.46 1.5-1.46H16.5V4.4c-.3-.04-1.3-.13-2.46-.13-2.44 0-4.04 1.49-4.04 4.21v2.02H7.5v3H10V21h3.5z"/>
  </svg>
);
const TTIcon = (p) => (
  <svg width={p.s||16} height={p.s||16} viewBox="0 0 24 24" fill="currentColor">
    <path d="M16.5 3h-2.7v12.1c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7c.3 0 .58.05.85.13v-2.78a5.5 5.5 0 0 0-.85-.07A5.43 5.43 0 0 0 5.7 15.1 5.43 5.43 0 0 0 11.1 20.5a5.43 5.43 0 0 0 5.4-5.4V8.83a7.4 7.4 0 0 0 4.3 1.37V7.43c-2.36 0-4.3-1.94-4.3-4.43z"/>
  </svg>
);

// Shared top nav. `current` highlights the active link ("about" | "contact" |
// "hoodies"). `right` selects what shows on the desktop right edge:
//   "cta"    → the "Compare now" button (default — used by most pages)
//   "social" → the three social icons (used by the Compare page itself)
const TopBar = ({ current, right = "cta" }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isNarrow = window.useMobile(767);
  const showSocialRight = right === "social";

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const link = (route, key, label) => (
    <li>
      <a
        href={route}
        className={current === key ? "is-active" : ""}
        aria-current={current === key ? "page" : undefined}
      >{label}</a>
    </li>
  );

  return (
    <div className="mm-cmp-topbar">
      <nav className="mm-nav">
        <a href="/" className="mm-logo mm-logo--link" aria-label="Motomelli — home">
          <span className="mm-logo__word mm-logo__word--svg">
            <MotomelliWordmark height={22} />
          </span>
        </a>

        {!isNarrow && (
          <ul className="mm-nav__links">
            {link("/hoodies", "hoodies", "Hoodies")}
            {link("/about", "about", "About")}
            {link("/contact", "contact", "Contact")}
          </ul>
        )}

        {isNarrow && showSocialRight && (
          <div className="mm-nav__center-socials">
            <a href={SOCIAL.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="mm-nav__social"><IGIcon s={16} /></a>
            <a href={SOCIAL.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="mm-nav__social"><FBIcon s={16} /></a>
            <a href={SOCIAL.tiktok} target="_blank" rel="noopener noreferrer" aria-label="TikTok" className="mm-nav__social"><TTIcon s={16} /></a>
          </div>
        )}

        <div className="mm-nav__right">
          {!isNarrow && showSocialRight && (
            <>
              <a href={SOCIAL.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="mm-nav__social"><IGIcon s={16} /></a>
              <a href={SOCIAL.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="mm-nav__social"><FBIcon s={16} /></a>
              <a href={SOCIAL.tiktok} target="_blank" rel="noopener noreferrer" aria-label="TikTok" className="mm-nav__social"><TTIcon s={16} /></a>
            </>
          )}
          {!isNarrow && !showSocialRight && (
            <a href="/compare" className="mm-nav__cta">
              <span className="mm-nav__cta-label">Compare now</span>
              <span className="mm-nav__cta-caret" aria-hidden>▸</span>
            </a>
          )}
          <button
            className={`mm-nav__burger${menuOpen ? " is-open" : ""}`}
            onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
          >
            <span /><span /><span />
          </button>
        </div>
      </nav>

      <div className={`mm-nav__drawer${menuOpen ? " is-open" : ""}`} aria-hidden={!menuOpen}>
        <div className="mm-nav__drawer-overlay" onClick={() => setMenuOpen(false)} />
        <nav className="mm-nav__drawer-panel">
          <div className="mm-nav__drawer-head">
            <a href="/" className="mm-logo mm-logo--link" onClick={() => setMenuOpen(false)}>
              <span className="mm-logo__word mm-logo__word--svg"><MotomelliWordmark height={14} /></span>
            </a>
            <button className="mm-nav__drawer-close" onClick={() => setMenuOpen(false)} aria-label="Close menu">✕</button>
          </div>
          <a href="/hoodies" className="mm-nav__drawer-link" onClick={() => setMenuOpen(false)}>
            <span>Hoodies</span><span className="mm-nav__drawer-arrow">→</span>
          </a>
          <a href="/about" className="mm-nav__drawer-link" onClick={() => setMenuOpen(false)}>
            <span>About</span><span className="mm-nav__drawer-arrow">→</span>
          </a>
          <a href="/contact" className="mm-nav__drawer-link" onClick={() => setMenuOpen(false)}>
            <span>Contact</span><span className="mm-nav__drawer-arrow">→</span>
          </a>
          <a href="/compare" className="mm-nav__drawer-link" onClick={() => setMenuOpen(false)}>
            <span>Compare now</span><span className="mm-nav__drawer-arrow">→</span>
          </a>
          <div className="mm-nav__drawer-socials">
            <a href={SOCIAL.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="mm-nav__social"><IGIcon s={22} /></a>
            <a href={SOCIAL.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="mm-nav__social"><FBIcon s={22} /></a>
            <a href={SOCIAL.tiktok} target="_blank" rel="noopener noreferrer" aria-label="TikTok" className="mm-nav__social"><TTIcon s={22} /></a>
          </div>
        </nav>
      </div>
    </div>
  );
};

// PageShell wraps a secondary page in the shared TopBar + Footer chrome.
const PageShell = ({ current, right, children }) => (
  <>
    <TopBar current={current} right={right} />
    {children}
    <Footer />
  </>
);