/* Shared shell for service pages: Nav, CTA, Footer */

function SPNav({ activeService }) {
  const [open, setOpen] = React.useState(false);
  const [pinned, setPinned] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const closeTimer = React.useRef(null);
  const menuRef = React.useRef(null);

  React.useEffect(() => {
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setPinned(false);
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const onEnter = () => { clearTimeout(closeTimer.current); setOpen(true); };
  const onLeave = () => { if (!pinned) closeTimer.current = setTimeout(() => setOpen(false), 200); };
  const onClick = () => { const next = !pinned; setPinned(next); setOpen(next); };

  const triggerStyle = { backgroundColor: "var(--accent)", color: "#fff" };

  return (
    <header className="nav">
      <a className="brand" href="index.html" aria-label="Quantum Design home">
        <img src="assets/qd-logo.png" alt="Quantum Design" />
      </a>
      <nav className="nav-links">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <div ref={menuRef} className={"has-menu" + (open ? " open" : "")} onMouseEnter={onEnter} onMouseLeave={onLeave}>
          <button className={"menu-trigger" + (activeService ? " active" : "")} onClick={onClick}>
            Services
            <svg width="10" height="10" viewBox="0 0 10 10"><path d="M1 3.5L5 7.5L9 3.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" /></svg>
          </button>
          <div className="menu">
            <a href="web-design.html" className={activeService === "web" ? "active" : ""}>
              <div className="menu-icon" style={{ background: "var(--accent)" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 10h18" /></svg>
              </div>
              <div>
                <div className="menu-title">Web Design</div>
                <div className="menu-sub">Custom builds that convert</div>
              </div>
            </a>
            <a href="marketing.html" className={activeService === "mkt" ? "active" : ""}>
              <div className="menu-icon" style={{ backgroundColor: "rgb(184, 225, 246)" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 8-8" /><path d="M21 7v5h-5" /></svg>
              </div>
              <div>
                <div className="menu-title">Marketing &amp; SEO</div>
                <div className="menu-sub">Google + Meta ads, SEO</div>
              </div>
            </a>
            <div className="menu-foot">
              <a href="index.html#pricing" className="menu-foot-link">See packages &amp; pricing →</a>
            </div>
          </div>
        </div>
        <a href="portfolio.html">Portfolio</a>
        <a href="contact.html">Contact</a>
      </nav>
      <a href="contact.html" className="nav-icon-btn" aria-label="Contact us">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 7l9 6 9-6" />
        </svg>
      </a>
      <MobileNavToggle onClick={() => setMobileOpen(true)} />
      <MobileNavMenu open={mobileOpen} onClose={() => setMobileOpen(false)} active={activeService} />
    </header>);
}

function SPCTA() {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    const rotY = (px - 0.5) * 8;
    const rotX = (0.5 - py) * 6;
    el.style.transition = "transform 80ms linear";
    el.style.transform = `perspective(1200px) rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg) translateY(-4px)`;
  };
  const onLeave = () => {
    const el = ref.current;
    if (!el) return;
    el.style.transition = "transform 500ms cubic-bezier(.22,1.4,.36,1)";
    el.style.transform = "perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0)";
  };
  return (
    <section id="contact" className="cta">
      <div className="cta-card" ref={ref} onMouseMove={onMove} onMouseLeave={onLeave} style={{ transformStyle: "preserve-3d", willChange: "transform" }}>
        <div className="cta-grid">
          <div>
            <div className="eyebrow eyebrow-light"><span className="eyebrow-dot"></span> Let's talk</div>
            <h2 className="cta-h2" style={{ fontSize: "64px" }}>
              Got a project in mind?<br />No calls needed.<br />
              <span className="cta-accent">Just say hello.</span>
            </h2>
            <div className="cta-actions">
              <a href="contact.html" className="btn-primary btn-primary-light">Contact Us</a>
            </div>
          </div>
          <div className="cta-right">
            <div className="cta-stat"><div className="cta-stat-v">48h</div><div className="cta-stat-l">Reply window</div></div>
            <div className="cta-stat"><div className="cta-stat-v">Flexible</div><div className="cta-stat-l">Retainer options</div></div>
            <div className="cta-stat"><div className="cta-stat-v">Flat</div><div className="cta-stat-l">Transparent fees</div></div>
            <div className="cta-stat"><div className="cta-stat-v">2026</div><div className="cta-stat-l">Booking now</div></div>
          </div>
        </div>
      </div>
    </section>);
}

function SPFooter() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="brand">
            <img src="assets/qd-logo.png" alt="Quantum Design" style={{ width: "40px", height: "40px" }} />
            <span>Quantum Design</span>
          </div>
          <p className="footer-tag">Design and Marketing for businesses that want to grow.</p>
        </div>
        <div className="footer-cols">
          <div>
            <div className="footer-h" style={{ color: "rgb(31, 169, 240)" }}>Services</div>
            <a href="web-design.html">Web Design</a>
            <a href="marketing.html">Marketing &amp; SEO</a>
          </div>
          <div>
            <div className="footer-h" style={{ color: "rgb(31, 169, 240)" }}>The Studio</div>
            <a href="about.html">About</a>
            <a href="index.html#services">Services</a>
            <a href="portfolio.html">Portfolio</a>
            <a href="contact.html">Contact</a>
          </div>
          <div>
            <div className="footer-h" style={{ color: "rgb(31, 169, 240)" }}>SAY HELLO</div>
            <a href="mailto:quantumdesignnz@gmail.com">QuantumDesignNZ@gmail.com</a>
            <a href="https://www.facebook.com/quantumdesignnz" target="_blank" rel="noopener noreferrer">Facebook</a>
            <a href="https://www.instagram.com/quantumdesign.co.nz" target="_blank" rel="noopener noreferrer">Instagram</a>
          </div>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2025-2026 Quantum Design</span>
        <span></span>
      </div>
    </footer>);
}

/* Reusable price card with tilt */
function SPPriceCard({ tier }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    const rotY = (px - 0.5) * 6;
    const rotX = (0.5 - py) * 4;
    el.style.transition = "transform 80ms linear";
    el.style.transform = `perspective(1100px) rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg) translateY(-4px)`;
  };
  const onLeave = () => {
    const el = ref.current;
    if (!el) return;
    el.style.transition = "transform 500ms cubic-bezier(.22,1.4,.36,1)";
    el.style.transform = "perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0)";
  };
  return (
    <div ref={ref} className={"sp-price-card" + (tier.featured ? " featured" : "")} onMouseMove={onMove} onMouseLeave={onLeave} style={{ transformStyle: "preserve-3d", willChange: "transform" }}>
      {tier.featured && <div className="sp-price-flag">Most picked</div>}
      <div className="sp-price-name">{tier.name}</div>
      <div className="sp-price-row">
        <span className="sp-price-amt">{tier.price}</span>
        <span className="sp-price-note">{tier.note}</span>
      </div>
      {tier.then && <div className="sp-price-then">{tier.then}</div>}
      <p className="sp-price-blurb">{tier.blurb}</p>
      {tier.disclaimer && <div className="sp-price-disclaimer">{tier.disclaimer}</div>}
      <div className="sp-price-rule"></div>
      <ul className="sp-price-features">
        {tier.features.map((f, j) =>
          f.startsWith("sub:") ?
          <li key={j} className="sp-feature-sub">{f.slice(4)}</li> :
          <li key={j}>
            <span className="sp-tick">
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 12 10 17 19 7" /></svg>
            </span>
            {f}
          </li>
        )}
      </ul>
      <a href="contact.html" className={"sp-price-btn" + (tier.featured ? " primary" : "")}>{tier.cta}</a>
    </div>);
}

/* Reusable offer card */
function SPOfferCard({ item }) {
  return (
    <div className="sp-offer-card">
      <div className="sp-offer-num">{item.num}</div>
      <div className="sp-offer-icon">{item.icon}</div>
      <h3 className="sp-offer-h">{item.title}</h3>
      <p className="sp-offer-body">{item.body}</p>
    </div>);
}

/* Reusable process step */
function SPProcessStep({ step }) {
  return (
    <div className="sp-process-step">
      <div className="sp-process-num">{step.num}</div>
      <h4 className="sp-process-h">{step.title}</h4>
      <p className="sp-process-body">{step.body}</p>
    </div>);
}

/* Expose to window for cross-file access */
Object.assign(window, { SPNav, SPCTA, SPFooter, SPPriceCard, SPOfferCard, SPProcessStep });