/* eslint-disable */
// Shared components for The Ahmed Law Group v2
// Loaded by every page. Exposes Nav, Footer, useReveal, Icon set on window.

const { useState, useEffect, useRef } = React;

// ============================================================
// useReveal — scroll-triggered fade-in
// ============================================================
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.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ============================================================
// ICONS — minimal line icons in gold
// ============================================================
const Icon = {
  Estate: () => (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <path d="M8 36 L8 18 L22 8 L36 18 L36 36 Z" />
      <path d="M14 36 L14 24 L30 24 L30 36" />
      <path d="M22 24 L22 36" />
      <path d="M16 28 L20 28 M24 28 L28 28" />
    </svg>
  ),
  RealEstate: () => (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <rect x="6" y="14" width="32" height="22" />
      <path d="M6 14 L22 6 L38 14" />
      <rect x="14" y="22" width="6" height="8" />
      <rect x="24" y="22" width="6" height="6" />
      <path d="M24 30 L30 30" />
    </svg>
  ),
  Business: () => (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <path d="M6 36 L6 14 L38 14 L38 36 Z" />
      <path d="M16 14 L16 8 L28 8 L28 14" />
      <path d="M6 22 L38 22" />
      <path d="M20 22 L20 28 L24 28 L24 22" />
    </svg>
  ),
  Scale: () => (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <path d="M22 8 L22 36" />
      <path d="M14 36 L30 36" />
      <path d="M8 14 L36 14" />
      <path d="M22 14 L22 14" />
      <path d="M8 14 L4 26 A6 6 0 0 0 12 26 Z" />
      <path d="M36 14 L32 26 A6 6 0 0 0 40 26 Z" />
    </svg>
  ),
  Document: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1">
      <path d="M8 4 L22 4 L26 8 L26 28 L8 28 Z" />
      <path d="M22 4 L22 8 L26 8" />
      <path d="M12 14 L22 14 M12 18 L22 18 M12 22 L18 22" />
    </svg>
  ),
  Shield: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1">
      <path d="M16 4 L26 8 L26 18 C26 23 21 27 16 28 C11 27 6 23 6 18 L6 8 Z" />
      <path d="M12 16 L15 19 L21 13" />
    </svg>
  ),
  Handshake: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1">
      <path d="M4 16 L10 14 L14 18 L18 14 L24 18 L28 16" />
      <path d="M10 14 L14 10 L20 14" />
      <path d="M14 18 L18 22 L22 18" />
    </svg>
  ),
  Key: () => (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1">
      <circle cx="11" cy="16" r="6" />
      <path d="M17 16 L28 16 L28 20 L26 20 L26 18 L22 18 L22 20" />
    </svg>
  ),
  Gavel: () => (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      {/* gavel head — angled mallet */}
      <path d="M16 8 L32 8 L32 16 L16 16 Z" />
      <path d="M20 4 L28 4 L28 8 L20 8 Z" />
      <path d="M16 16 L8 24" />
      {/* gavel handle */}
      <path d="M12 20 L24 32" />
      {/* sound block */}
      <path d="M22 30 L36 30 L36 36 L22 36 Z" />
      <path d="M20 38 L38 38" />
    </svg>
  ),
};

// ============================================================
// NAV
// ============================================================
function Nav({ current }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  const is = (p) => current === p ? "nav-link active" : "nav-link";

  return (
    <React.Fragment>
      <div className="utility">
        <div className="utility-inner">
          <div className="utility-left">
            <span><span className="dot"></span>Accepting new clients · 2026</span>
            <span>Pennsylvania · New Jersey</span>
          </div>
          <div className="utility-right">
            <a href="tel:6104003147">610.400.3147</a>
            <span style={{opacity:.4}}>·</span>
            <a href="mailto:a.ahmed@theahmedlaw.com">a.ahmed@theahmedlaw.com</a>
          </div>
        </div>
      </div>

      <nav className={"nav " + (scrolled ? "scrolled" : "")}>
        <div className="nav-inner">
          <a href="Home.html" className="nav-logo">
            <img src="assets/logo-transparent.png" alt="The Ahmed Law Group" />
          </a>

          <div className="nav-links">
            <a href="Home.html" className={is("home")}>Home</a>
            {(() => {
              const inPractice = ["practice","estate","real-estate","business","civil"].includes(current);
              return (
                <div className={"nav-dropdown " + (inPractice ? "active" : "")}>
                  <a href="Practice Areas.html" className={"nav-link nav-dropdown-trigger " + (inPractice ? "active" : "")}>
                    Practice Areas
                    <span className="chev"></span>
                  </a>
                  <div className="nav-dropdown-menu">
                    <a href="Practice Areas.html">
                      All Practice Areas
                      <span className="micro">Overview of our services</span>
                    </a>
                    <a href="Estate Planning.html">
                      Estate Planning
                      <span className="micro">Wills, trusts, asset protection</span>
                    </a>
                    <a href="Real Estate Law.html">
                      Real Estate Law
                      <span className="micro">Closings, contracts, title review</span>
                    </a>
                    <a href="Business Law.html">
                      Business Law
                      <span className="micro">Formation, contracts, counsel</span>
                    </a>
                    <a href="Civil Litigation.html">
                      Civil Litigation
                      <span className="micro">Disputes, mediation, trial</span>
                    </a>
                  </div>
                </div>
              );
            })()}
            <a href="About.html" className={is("about")}>About</a>
            <a href="Articles.html" className={is("articles")}>Articles</a>
            <a href="Contact.html" className={is("contact")}>Contact</a>
          </div>

          <a href="Contact.html" className="nav-cta">Free Consultation</a>

          <button className={"nav-burger " + (open ? "open" : "")} onClick={() => setOpen(!open)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>

      <div className={"nav-mobile " + (open ? "open" : "")}>
        <a href="Home.html" onClick={() => setOpen(false)}>Home</a>
        <a href="Practice Areas.html" onClick={() => setOpen(false)}>Practice Areas</a>
        <a href="Estate Planning.html" className="sub" onClick={() => setOpen(false)}>Estate Planning</a>
        <a href="Real Estate Law.html" className="sub" onClick={() => setOpen(false)}>Real Estate Law</a>
        <a href="Business Law.html" className="sub" onClick={() => setOpen(false)}>Business Law</a>
        <a href="Civil Litigation.html" className="sub" onClick={() => setOpen(false)}>Civil Litigation</a>
        <a href="About.html" onClick={() => setOpen(false)}>About</a>
        <a href="Articles.html" onClick={() => setOpen(false)}>Articles</a>
        <a href="Contact.html" onClick={() => setOpen(false)}>Contact</a>
        <a href="Contact.html" className="m-cta" onClick={() => setOpen(false)}>Free Consultation →</a>
      </div>
    </React.Fragment>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo-transparent.png" alt="The Ahmed Law Group" />
            <p>A boutique law firm in estate planning, real estate, business law, and civil litigation. Serving Pennsylvania and New Jersey with discretion, rigor, and personal attention.</p>
          </div>
          <div className="footer-col">
            <h4>Practice</h4>
            <a href="Estate Planning.html">Estate Planning</a>
            <a href="Real Estate Law.html">Real Estate Law</a>
            <a href="Business Law.html">Business Law</a>
            <a href="Civil Litigation.html">Civil Litigation</a>
            <a href="Practice Areas.html">All Services</a>
          </div>
          <div className="footer-col">
            <h4>Firm</h4>
            <a href="About.html">About the Attorney</a>
            <a href="Home.html#recognition">Recognition</a>
            <a href="Home.html#testimonials">Client Voices</a>
            <a href="Contact.html">Contact</a>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <p>
              6081 Hamilton Blvd<br/>
              Suite 600<br/>
              Allentown, PA 18106
            </p>
            <a href="tel:6104003147" style={{marginTop:14}}>610.400.3147</a>
            <a href="mailto:a.ahmed@theahmedlaw.com">a.ahmed@theahmedlaw.com</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 The Ahmed Law Group, PLLC · All rights reserved</div>
          <div className="disc">
            Attorney advertising. Prior results do not guarantee a similar outcome. The information on this site is for general purposes only and is not legal advice. Submitting an inquiry does not create an attorney-client relationship.
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// SERVICE PAGE — reusable template used by Estate, Real Estate, Business
// ============================================================
function ServicePage({ data }) {
  useReveal();
  const services = [
    { slug: "Estate Planning.html", title: "Estate Planning", id: "estate" },
    { slug: "Real Estate Law.html", title: "Real Estate Law", id: "real-estate" },
    { slug: "Business Law.html", title: "Business Law", id: "business" },
    { slug: "Civil Litigation.html", title: "Civil Litigation", id: "civil" },
  ];

  return (
    <React.Fragment>
      <Nav current={data.id} />

      <section className="page-hero">
        <div className="inner">
          <div className="crumb reveal">
            <a href="Home.html">Home</a>
            <span className="sep">/</span>
            <a href="Practice Areas.html">Practice</a>
            <span className="sep">/</span>
            <span>{data.title}</span>
          </div>
          <h1 className="reveal d1" dangerouslySetInnerHTML={{__html: data.heroTitle}}></h1>
          <p className="ld reveal d2">{data.heroLede}</p>
        </div>
      </section>

      <section className="svc-body">
        <aside className="svc-side reveal">
          <div className="eyebrow" style={{display:"inline-flex",alignItems:"center",gap:14}}>
            <span style={{width:28,height:1,background:"var(--gold)",display:"inline-block"}}></span>
            Practice
          </div>
          <h3>{data.sideTitle}</h3>
          <div className="nav-list">
            <h4>Practice Areas</h4>
            {services.map((s) => (
              <a key={s.id} href={s.slug} className={s.id === data.id ? "current" : ""}>
                {s.title}
                <span style={{opacity:.4}}>›</span>
              </a>
            ))}
          </div>
          <div style={{marginTop: 32, padding: 24, border: "1px solid var(--line)", background: "var(--navy-2)"}}>
            <div className="eyebrow" style={{marginBottom: 10}}>Speak with counsel</div>
            <div style={{fontFamily:"var(--serif)",fontSize:22,marginBottom:8,letterSpacing:"-0.01em"}}>
              <a href="tel:6104003147">610.400.3147</a>
            </div>
            <p style={{fontSize:13,color:"var(--cream-soft)",lineHeight:1.65}}>
              Initial consultations are confidential and complimentary, by appointment.
            </p>
          </div>
        </aside>

        <div className="svc-main">
          <h2 className="reveal" dangerouslySetInnerHTML={{__html: data.mainTitle}}></h2>
          {data.intro.map((p, i) => <p key={i} className={"reveal " + (i ? "d1" : "")}>{p}</p>)}

          <h2 className="reveal">Services we provide</h2>
          <div className="svc-services">
            {data.services.map((s, i) => (
              <div key={i} className="item reveal" style={{transitionDelay: (0.05 * i) + "s"}}>
                <div className="ico">{s.icon}</div>
                <h4>{s.title}</h4>
                <p>{s.desc}</p>
              </div>
            ))}
          </div>

          {data.process && (
            <React.Fragment>
              <h2 className="reveal">Our Process</h2>
              <div className="svc-process">
                {data.process.map((step, i) => (
                  <div key={i} className="step reveal" style={{transitionDelay: (0.05 * i) + "s"}}>
                    <div className="n"><em>{step.n}</em></div>
                    <div>
                      <h4>{step.title}</h4>
                      <p>{step.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </React.Fragment>
          )}

          {data.note && (
            <blockquote className="pull reveal" style={{borderLeft:"1px solid var(--gold)",padding:"8px 0 8px 24px",margin:"32px 0",fontFamily:"var(--serif)",fontStyle:"italic",fontSize:22,lineHeight:1.5,color:"var(--cream)"}}>
              {data.note}
            </blockquote>
          )}

          <div style={{marginTop: 36}} className="reveal">
            <a href="Contact.html" className="btn btn-primary">Discuss your matter <span className="arr">→</span></a>
          </div>
        </div>
      </section>

      <section className="cta-band">
        <div className="inner">
          <h2 className="reveal">Begin the <em>conversation.</em></h2>
          <p className="reveal d1">Every consultation is private and complimentary.</p>
          <div className="actions reveal d2">
            <a href="Contact.html" className="btn btn-primary">Schedule Consultation <span className="arr">→</span></a>
            <a href="tel:6104003147" className="btn btn-ghost">Call 610.400.3147</a>
          </div>
        </div>
      </section>

      <Footer />
    </React.Fragment>
  );
}

// ============================================================
// WHATSAPP FLOATING BUTTON
// ============================================================
function WhatsAppButton() {
  return (
    <a
      href="https://wa.me/16104003147"
      className="wa-btn"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat on WhatsApp"
    >
      <svg width="28" height="28" viewBox="0 0 32 32" fill="currentColor">
        <path d="M16 2C8.268 2 2 8.268 2 16c0 2.478.648 4.804 1.781 6.82L2 30l7.38-1.742A13.934 13.934 0 0 0 16 30c7.732 0 14-6.268 14-14S23.732 2 16 2zm0 2c6.628 0 12 5.372 12 12S22.628 28 16 28a11.93 11.93 0 0 1-6.094-1.664l-.436-.265-4.383 1.034.993-4.262-.29-.458A11.934 11.934 0 0 1 4 16C4 9.372 9.372 4 16 4zm-3.64 5.887c-.213 0-.553.08-.844.397-.29.317-1.108 1.083-1.108 2.641s1.134 3.065 1.292 3.278c.158.213 2.217 3.384 5.376 4.622 2.663 1.05 3.202.842 3.78.79.579-.053 1.866-.763 2.13-1.5.264-.737.264-1.37.185-1.503-.08-.132-.292-.212-.61-.371-.317-.159-1.866-.92-2.156-1.026-.29-.106-.502-.159-.713.159-.21.317-.818 1.026-1.003 1.238-.185.213-.37.24-.688.08-.317-.159-1.338-.493-2.549-1.573-.942-.84-1.578-1.876-1.762-2.193-.185-.318-.02-.49.139-.647.142-.143.317-.371.476-.557.158-.185.21-.317.316-.529.106-.213.053-.397-.026-.556-.08-.159-.705-1.722-.975-2.358-.254-.607-.516-.53-.713-.54a13.3 13.3 0 0 0-.608-.013z"/>
      </svg>
    </a>
  );
}

// Wrap Footer to always include the WhatsApp button
const _Footer = Footer;
Footer = function FooterWithWA() {
  return (
    <React.Fragment>
      <_Footer />
      <WhatsAppButton />
    </React.Fragment>
  );
};

// Make available to page scripts
Object.assign(window, { Nav, Footer, useReveal, Icon, ServicePage });
