// pw-shared.jsx — nav, footer and shared atoms for the rebuilt Purna Web site.
const PWM = window.PW_MENU;

function pwReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

const Arr = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
const Tick = ({ c = "var(--teal)" }) => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12l4 4L19 6" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
);

// Renders an icon from assets/04-Icons via pw-icons.js. Inlined (not <img>) so
// the artwork inherits `currentColor` from its parent, per the brand tokens.
function PwIcon({ name, size = 24, className = "" }) {
  // ChatGPT Ads has no icon in the asset set yet; fall back to an AI-sparkle
  // glyph so grids stay uniform instead of showing an empty tile.
  const FALLBACK = '<path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4"/>';
  const inner = (window.PW_ICONS || {})[name] || (name === null ? FALLBACK : null);
  if (!inner) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
         className={className} dangerouslySetInnerHTML={{ __html: inner }}/>
  );
}

function PwBrand() {
  return (
    <a href="/" className="brand" aria-label="Purna Web, home">
      <img src="images/PW-Logo-2.png" alt="Purna Web, Design. Market. Succeed." className="brand-img brand-img-dark"/>
      <img src="images/PW-white-logo.png" alt="" aria-hidden="true" className="brand-img brand-img-light"/>
    </a>
  );
}

function PwNav({ active = "" }) {
  const [open, setOpen] = React.useState(null);
  const [mob, setMob] = React.useState(false);
  const [mobSec, setMobSec] = React.useState(null);
  const timer = React.useRef(null);
  const enter = (id) => { clearTimeout(timer.current); setOpen(id); };
  const leave = () => { timer.current = setTimeout(() => setOpen(null), 120); };
  const close = () => { clearTimeout(timer.current); setOpen(null); };

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

  const half = Math.ceil(PWM.services.length / 2);
  const menus = {
    services: { label: "Services", cols: [
      { h: "Search & Content", items: PWM.services.slice(0, half) },
      { h: "Ads, Web & Brand", items: PWM.services.slice(half) },
    ]},
    industries: { label: "Industries", cols: [
      { h: "Industries we serve", items: PWM.industries.slice(0, 6) },
      { h: "More industries", items: PWM.industries.slice(6) },
    ]},
  };
  const order = ["services", "industries"];

  return (
    <>
      <header className="nav" onMouseLeave={leave}>
        <div className="container">
          <div className="nav-row">
            <PwBrand/>
            <nav className="nav-links">
              {order.map(id => (
                <div key={id} className="nav-item" onMouseEnter={() => enter(id)}>
                  <button className={`nav-trigger ${open === id ? "is-open" : ""} ${active === id ? "active" : ""}`}
                          onClick={() => setOpen(open === id ? null : id)} aria-expanded={open === id}>
                    {menus[id].label}
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{transition:"transform .2s", transform: open === id ? "rotate(180deg)" : "none"}}><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                  {open === id && (
                    <div className="mega" onMouseEnter={() => enter(id)}>
                      <PwMega menu={menus[id]}/>
                    </div>
                  )}
                </div>
              ))}
              <a href="blog.html" onMouseEnter={close} className={active === "blog" ? "active" : ""}>Blog</a>
              <a href="booking.html" onMouseEnter={close} className={active === "contact" ? "active" : ""}>Contact</a>
            </nav>
            <div className="nav-cta" onMouseEnter={close}>
              <a href="tel:+17052420221" className="nav-tel">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.4 1.8.7 2.7a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.4-1.2a2 2 0 012.1-.5c.9.3 1.8.6 2.7.7a2 2 0 011.7 2z"/></svg>
                (705) 242-0221
              </a>
              <a href="booking.html" className="btn btn-primary">Get Free Strategy Session</a>
            </div>
            <button className={`nav-burger ${mob ? "is-open" : ""}`} onClick={() => setMob(v => !v)}
                    aria-label={mob ? "Close menu" : "Open menu"} aria-expanded={mob}>
              <span/><span/><span/>
            </button>
          </div>
        </div>
      </header>

      {mob && (
        <div className="mobile-drawer" role="dialog" aria-modal="true" aria-label="Site navigation">
          <div className="mobile-drawer-head">
            <PwBrand/>
            <button className="mobile-drawer-close" onClick={() => setMob(false)} aria-label="Close menu">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6l-12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
            </button>
          </div>
          <div className="mobile-drawer-inner">
            {order.map(id => (
              <div key={id} className={`mobile-section ${mobSec === id ? "is-open" : ""}`}>
                <button className="mobile-section-trigger" onClick={() => setMobSec(mobSec === id ? null : id)} aria-expanded={mobSec === id}>
                  <span>{menus[id].label}</span>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
                {mobSec === id && (
                  <div className="mobile-section-body">
                    {menus[id].cols.map((col, i) => (
                      <div key={i} className="mobile-col">
                        <div className="mobile-col-h">{col.h}</div>
                        <ul>{col.items.map((it, j) => (
                          <li key={j}><a href={it.h} onClick={() => setMob(false)}>{it.l}</a></li>
                        ))}</ul>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <a href="blog.html" className="mobile-link" onClick={() => setMob(false)}>Blog</a>
            <a href="booking.html" className="mobile-link" onClick={() => setMob(false)}>Contact</a>
            <div className="mobile-cta">
              <a href="booking.html" className="btn btn-primary" onClick={() => setMob(false)}>Get Free Strategy Session</a>
            </div>
            <div className="mobile-drawer-foot">
              <a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a><span>·</span><a href="tel:+17052420221">(705) 242-0221</a>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function PwMega({ menu }) {
  const [act, setAct] = React.useState(0);
  const sub = menu.cols[act] || menu.cols[0];
  return (
    <div className="mega-panel">
      <ul className="mega-options">
        {menu.cols.map((c, i) => (
          <li key={i} className={`mega-option ${act === i ? "is-active" : ""}`} onMouseEnter={() => setAct(i)}>
            {c.h}<span className="mega-option-arr">›</span>
          </li>
        ))}
      </ul>
      <ul className="mega-sub">
        {sub.items.map((it, j) => (
          <li key={j}><a href={it.h}>{it.l}<span className="mega-arr">→</span></a></li>
        ))}
      </ul>
    </div>
  );
}

function PwFooter() {
  const S = PWM.services, I = PWM.industries;
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <PwBrand/>
            <p>Full-service digital marketing that turns visibility into revenue. Strategy, content, ads, design and development under one roof.</p>
            <a href="https://www.bbb.org/ca/on/orillia/profile/digital-marketing/purna-web-agency-inc-0107-1418208#sealclick" target="_blank" rel="noopener noreferrer" className="foot-bbb" aria-label="BBB Accredited Business">
              <img src="logo/bbb-logo.png" alt="BBB Accredited Business"/>
            </a>
          </div>
          <div className="foot-col">
            <h5>Services</h5>
            <ul>{S.slice(0, 6).map(s => <li key={s.h}><a href={s.h}>{s.l}</a></li>)}</ul>
          </div>
          <div className="foot-col">
            <h5>More services</h5>
            <ul>{S.slice(6).map(s => <li key={s.h}><a href={s.h}>{s.l}</a></li>)}</ul>
          </div>
          <div className="foot-col">
            <h5>Industries</h5>
            <ul>{I.slice(0, 6).map(s => <li key={s.h}><a href={s.h}>{s.l}</a></li>)}</ul>
          </div>
          <div className="foot-col">
            <h5>Reach us</h5>
            <ul>
              <li><a href="mailto:info@purnaweb.ca">info@purnaweb.ca</a></li>
              <li><a href="tel:+17052420221">(705) 242-0221</a></li>
              <li><a href="booking.html">Contact us</a></li>
              <li>23 Mississaga St W, Orillia</li>
            </ul>
            <div className="foot-social">
              <a href="https://www.facebook.com/purnawebagency" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.7-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12z"/></svg></a>
              <a href="https://www.instagram.com/purnawebagency/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M16 11.4a4 4 0 11-3.4-3.4 4 4 0 013.4 3.4z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></a>
              <a href="https://www.linkedin.com/company/purna-web-agency/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg></a>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Purna Web Agency Inc. · Orillia, Ontario, Canada</span>
          <span><a href="pw-privacy-policy.html">Privacy Policy</a> · <a href="terms.html">Terms of Use</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { pwReveal, PwNav, PwFooter, PwBrand, PwIcon, Arr, Tick });
