// shared.jsx — Purna Web shared components
const { useState, useEffect } = React;

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

function Brand() {
  return (
    <a href="index.html" className="brand" aria-label="Purna Web Agency — home">
      <img src="images/PW-Logo-2.png" alt="Purna Web — Design. Market. Succeed." className="brand-img"/>
    </a>
  );
}

function Nav({ active = "home" }) {
  const [open, setOpen] = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobileSection, setMobileSection] = React.useState(null);
  const closeTimer = React.useRef(null);
  const enter = (id) => { clearTimeout(closeTimer.current); setOpen(id); };
  const leave = () => { closeTimer.current = setTimeout(() => setOpen(null), 120); };

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

  const menus = {
    solutions: {
      label: "Solutions",
      eyebrow: "What we ship",
      title: "Production AI for your business.",
      blurb: "From AI chat and voice agents that capture every lead to custom AI products and workflow automation — designed, governed, and shipped on your stack. Plus a dedicated growth platform for therapists.",
      cta: { label: "Book a discovery call", href: "contact.html" },
      cols: [
        { h: "AI Digital Marketing", items: [
          { l: "AI chat agent", h: "marketing.html#chat" },
          { l: "AI voice agent", h: "marketing.html#voice" },
          { l: "AI email nurturing campaigns", h: "marketing.html#email" },
          { l: "AI PPC ad campaigns", h: "marketing.html#ppc" },
        ]},
        { h: "Build with AI", items: [
          { l: "AI Product Development", h: "ai-software.html" },
          { l: "AI Workflow Implementation", h: "ai-workflows.html" },
          { l: "Online Course Platform", h: "therapist-growth-partner.html" },
        ]},
      ],
    },
    industries: {
      label: "Industries",
      eyebrow: "Who we build for",
      title: "Built around your workflow.",
      blurb: "Home services and healthcare clients ship first. Custom systems for any operator with a high-value inbound funnel.",
      cta: { label: "See client results", href: "results.html" },
      cols: [
        { h: "Home services", items: [
          { l: "HVAC", h: "industry-hvac.html" },
          { l: "Plumbing", h: "industry-plumbing.html" },
          { l: "Cleaning & restoration", h: "industry-cleaning.html" },
          { l: "Roofing & exteriors", h: "industry-roofing.html" },
        ]},
        { h: "Other verticals", items: [
          { l: "Healthcare practices", h: "industry-healthcare.html" },
          { l: "Professional services", h: "industry-professional.html" },
          { l: "Local retail & studios", h: "industry-retail.html" },
          { l: "Custom (talk to us)", h: "contact.html" },
        ]},
      ],
    },
    resources: {
      label: "FREE Resources",
      eyebrow: "Tools & guides",
      title: "Free tools to plan your AI growth.",
      blurb: "Calculators, frameworks, and field-notes from the Purna Web team — built to help you map AI marketing investment to revenue before you commit to anything.",
      cta: { label: "Read the blog", href: "blog.html" },
      cols: [
        { h: "Blog & field-notes", items: [
          { l: "All posts", h: "blog.html" },
          { l: "Why your website isn't getting clients", h: "post.html?slug=why-your-website-isnt-getting-you-clients-and-what-actually-works-for-therapists-coaches" },
          { l: "Stop chasing clients (content for coaches)", h: "post.html?slug=stop-chasing-clients-content-marketing-for-coaches-that-does-the-heavy-lifting-for-your-business" },
          { l: "Why landing pages fail silently", h: "post.html?slug=why-your-landing-page-isnt-converting-a-practical-guide-to-higher-conversion-rates" },
          { l: "Brand voice, tone & messaging", h: "post.html?slug=voice-tone-messaging-how-to-sound-consistent-and-trustworthy-online-and-offline" },
        ]},
        { h: "Calculators", items: [
          { l: "AI Marketing ROI Calculator", h: "roi-calculator.html" },
        ]},
        { h: "Frameworks", items: [
          { l: "Custom AI Engineering", h: "custom-ai.html#framework" },
          { l: "FREEDOM (for therapists)", h: "therapist-growth-partner.html" },
          { l: "Client results", h: "results.html" },
        ]},
      ],
    },
    products: {
      label: "Products & Platforms",
      eyebrow: "What we ship",
      title: "Flagship product, owned platforms.",
      blurb: "TheraNote AI — our flagship product for clinicians. Plus two platforms that businesses across home services, healthcare, and mental-health practices run on every day.",
      cta: { label: "Explore TheraNote AI", href: "theranote.html" },
      cols: [
        { h: "Products", items: [
          { l: "TheraNote AI", h: "theranote.html" },
        ]},
        { h: "Platform", items: [
          { l: "AutoGrowthBase", h: "growth-engine.html" },
          { l: "Therapist Growth Partner", h: "therapist-growth-partner.html" },
        ]},
      ],
    },
    company: {
      label: "Company",
      eyebrow: "Who we are",
      title: "AI-driven growth & automation, from Orillia.",
      blurb: "Purna Web Agency helps small businesses, service providers, and mental-health professionals grow online with AI workflows and automation.",
      cta: { label: "Book a discovery call", href: "contact.html" },
      cols: [
        { h: "About", items: [
          { l: "About Us", h: "company.html" },
          { l: "Contact Us", h: "contact.html" },
          { l: "Careers", h: "careers.html" },
          { l: "Client results", h: "results.html" },
        ]},
        { h: "Reach us", items: [
          { l: "info@purnaweb.ca", h: "mailto:info@purnaweb.ca" },
          { l: "(705) 242-0221", h: "tel:+17052420221" },
          { l: "Orillia, Ontario, Canada", h: "company.html" },
        ]},
      ],
    },
  };

  const order = ["solutions", "industries", "products", "resources", "company"];
  const tail = [
    { id: "results", label: "Results", href: "results.html" },
  ];

  const activeMap = {
    "growth-engine": "products", "theranote": "products",
    "industries": "industries",
    "marketing": "solutions", "tgp": "solutions",
    "custom-ai": "solutions", "ai-workflows": "solutions", "multi-agent": "solutions",
    "rag-memory": "solutions", "ai-software": "solutions",
    "ai-implementation": "solutions", "ai-integrations": "solutions",
    "roi": "resources", "blog": "resources",
    "company": "company", "contact": "company", "careers": "company",
  };
  const activeMenu = activeMap[active];

  return (
    <>
    <header className="nav" onMouseLeave={leave}>
      <div className="container">
        <div className="nav-row">
          <Brand/>
          <nav className="nav-links">
            {order.map(id => (
              <div key={id} className="nav-item" onMouseEnter={() => enter(id)}>
                <button
                  className={`nav-trigger ${open === id ? "is-open" : ""} ${activeMenu === 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>
              </div>
            ))}
            {tail.map(l => <a key={l.id} href={l.href} className={active === l.id ? "active" : ""}>{l.label}</a>)}
          </nav>
          <div className="nav-cta">
            <a href="https://scalesmartercommunity.purnaweb.ca/" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">Client Login</a>
            <a href="contact.html" className="btn btn-primary">Book a Demo</a>
          </div>
          <button
            className={`nav-burger ${mobileOpen ? "is-open" : ""}`}
            onClick={() => setMobileOpen(v => !v)}
            aria-label={mobileOpen ? "Close menu" : "Open menu"}
            aria-expanded={mobileOpen}
          >
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {open && (
        <div className="mega" onMouseEnter={() => enter(open)} onMouseLeave={leave}>
          <div className="container">
            <div className="mega-grid" style={{"--mega-cols": menus[open].cols.length}}>
              <div className="mega-intro">
                <span className="eyebrow">{menus[open].eyebrow}</span>
                <h4>{menus[open].title}</h4>
                <p>{menus[open].blurb}</p>
                <a href={menus[open].cta.href} className="mega-cta">
                  {menus[open].cta.label}
                  <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
              </div>
              {menus[open].cols.map((col, i) => (
                <div key={i} className="mega-col">
                  <div className="mega-h">{col.h}</div>
                  <ul>
                    {col.items.map((it, j) => (
                      <li key={j}><a href={it.h}>{it.l}<span className="mega-arr">→</span></a></li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

    </header>

    {mobileOpen && (
      <div className="mobile-drawer" role="dialog" aria-modal="true" aria-label="Site navigation">
        <div className="mobile-drawer-head">
          <Brand/>
          <button className="mobile-drawer-close" onClick={() => setMobileOpen(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 ${mobileSection === id ? "is-open" : ""}`}>
              <button
                className="mobile-section-trigger"
                onClick={() => setMobileSection(mobileSection === id ? null : id)}
                aria-expanded={mobileSection === 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>
              {mobileSection === 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={() => setMobileOpen(false)}>{it.l}</a></li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
          {tail.map(l => (
            <a key={l.id} href={l.href} className="mobile-link" onClick={() => setMobileOpen(false)}>{l.label}</a>
          ))}
          <div className="mobile-cta">
            <a href="https://scalesmartercommunity.purnaweb.ca/" target="_blank" rel="noopener noreferrer" className="btn btn-ghost" onClick={() => setMobileOpen(false)}>Client Login</a>
            <a href="contact.html" className="btn btn-primary" onClick={() => setMobileOpen(false)}>Book a Demo</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 CTABanner() {
  return (
    <section className="sec">
      <div className="container">
        <div className="cta-banner reveal">
          <span className="eyebrow">Free 30-min consult</span>
          <h2 className="h2">See exactly what your business is leaving on the <span className="accent">table.</span></h2>
          <p className="lead">We'll show you how many leads you're losing today — and project the revenue we'd recover in the first 30 days. No pitch deck. Just numbers.</p>
          <div className="cta-banner-actions">
            <a href="contact.html" className="btn btn-primary btn-arr">
              Book a free demo
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="mailto:info@purnaweb.ca" className="btn btn-ghost">info@purnaweb.ca</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <Brand/>
            <p>AI growth systems that turn every lead into revenue. Built in-house. Owned by you.</p>
            <span className="foot-tag">Systems online · 24/7</span>
            <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 — view Purna Web Agency profile">
              <img src="logo/bbb-logo.png" alt="BBB Accredited Business"/>
            </a>
          </div>
          <div className="foot-col">
            <h5>Systems</h5>
            <ul>
              <li><a href="growth-engine.html">AutoGrowthBase</a></li>
              <li><a href="marketing.html">AI Marketing</a></li>
              <li><a href="theranote.html">TheraNote AI</a></li>
              <li><a href="growth-engine.html">Custom Software</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Company</h5>
            <ul>
              <li><a href="company.html">About Us</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="careers.html">Careers</a></li>
              <li><a href="results.html">Client Results</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Industries</h5>
            <ul>
              <li><a href="industry-hvac.html">HVAC</a></li>
              <li><a href="industry-plumbing.html">Plumbing</a></li>
              <li><a href="industry-cleaning.html">Cleaning</a></li>
              <li><a href="industry-healthcare.html">Healthcare</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="contact.html">Book a demo</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>
              <a href="https://www.youtube.com/@PurnaWebAgency" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23 9.71a8.5 8.5 0 00-.91-4.13 2.92 2.92 0 00-1.72-1A78.36 78.36 0 0012 4.27a78.45 78.45 0 00-8.34.3 2.87 2.87 0 00-1.46.74c-.9.83-1 2.25-1.1 3.45a48.29 48.29 0 000 5.5 9.55 9.55 0 00.3 2 3.14 3.14 0 00.71 1.36 2.86 2.86 0 001.49.78A45.18 45.18 0 0012 19.73c2.65.05 5 0 7.76-.21a2.87 2.87 0 001.53-.78 2.49 2.49 0 00.63-1 10.58 10.58 0 00.62-3.4c.04-.55.04-3.92.06-4.63zM9.74 14.85V8.66l5.92 3.11c-1.66.92-3.85 1.97-5.92 3.08z"/></svg>
              </a>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Purna Web Agency Inc. · Orillia, Ontario, Canada</span>
          <span><a href="privacy.html">Privacy Policy</a> · <a href="terms.html">Terms of Use</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useReveal, Brand, Nav, CTABanner, Footer });