// Shared UI: Nav, Footer, Logo, Section primitives
// Exported to window so other JSX files can use.

const SERVICES = [
  // === JSR IMMIGRATION ===
  { id: "spousal", group: "immigration", title: "Spousal Sponsorship", desc: "Inland and outland spousal sponsorship, common-law, and conjugal partner applications.", icon: "FS" },
  { id: "express-entry", group: "immigration", title: "Express Entry (CEC, FSW, FST)", desc: "Federal Skilled Worker, Canadian Experience Class, Federal Skilled Trades — profile management and PR application.", icon: "EE" },
  { id: "pnp", group: "immigration", title: "Provincial Nominee Programs (PNPs)", desc: "OINP and other provincial streams — Employer Job Offer, Human Capital, Masters & PhD pathways.", icon: "PNP" },
  { id: "rural-pilots", group: "immigration", title: "AIP, RCIP, FCIP & Caregiver Programs", desc: "Atlantic Immigration, Rural & Northern Community, Francophone Community Immigration Pilot, and In-Home Caregiver pathways.", icon: "AIP" },
  { id: "work-permit", group: "immigration", title: "Work Permits & Extensions", desc: "LMIA-based work permits, PGWP, open work permits, intra-company transfers, and renewals.", icon: "WP" },
  { id: "visitor", group: "immigration", title: "Visitor Visas & Super Visas", desc: "Temporary Resident Visas, Super Visa for parents and grandparents, and visitor record extensions.", icon: "VV" },
  { id: "study", group: "immigration", title: "Study Permits", desc: "Initial study permits, extensions, change of program, and PGWP eligibility planning.", icon: "SP" },
  { id: "citizenship", group: "immigration", title: "Citizenship & PR Card", desc: "Citizenship applications, PR card renewals, residency obligation reviews, and urgent processing.", icon: "CIT" },

  // === JSR LEGALS (Paralegal Services - Ontario) ===
  { id: "refugee", group: "legals", title: "Refugee Claims & Appeals (RPD, RAD)", desc: "Refugee protection claims, Basis of Claim preparation, RPD hearings, and Refugee Appeal Division appeals.", icon: "RC" },
  { id: "imm-appeals", group: "legals", title: "Immigration Appeals (ID, IAD)", desc: "Immigration Division detention reviews and Immigration Appeal Division sponsorship, removal, and residency appeals.", icon: "APP" },
  { id: "ltb", group: "legals", title: "Landlord & Tenant Board", desc: "Representation for landlords and tenants — N-form notices, L and T applications, hearings, and enforcement.", icon: "LTB" },
  { id: "traffic", group: "legals", title: "Traffic Tickets & Provincial Offences", desc: "Highway Traffic Act charges, careless driving, stunt driving, speeding, and other provincial offences.", icon: "POA" },
  { id: "notary", group: "legals", title: "Notary Public Services", desc: "Notarization of documents, certified true copies, commissioning of oaths, and statutory declarations.", icon: "NP" },
  { id: "apostille", group: "legals", title: "Apostille & Authentication", desc: "Document authentication and apostille services under the Hague Convention for use abroad.", icon: "APO" },
  { id: "invitation", group: "legals", title: "Invitation Letters", desc: "Drafted and notarized invitation letters for visitor visa applications and family visits.", icon: "INV" },
  { id: "small-claims", group: "legals", title: "Small Claims Court", desc: "Civil claims up to $35,000 — pleadings, settlement conferences, trials, and enforcement of judgments.", icon: "SCC" },
  { id: "affidavits", group: "legals", title: "Affidavits & Statutory Declarations", desc: "Drafting and commissioning of sworn affidavits and statutory declarations for IRCC and court use.", icon: "AFF" },
];

function Logo() {
  return (
    <a href="#home" className="logo">
      <span className="logo-mark">JSR</span>
      <span>JSR Immigration<span style={{ color: "var(--text-muted)", fontWeight: 400 }}> & Legals</span></span>
    </a>
  );
}

function Nav() {
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState("home");

  React.useEffect(() => {
    const ids = ["home", "services", "about", "resources", "contact"];
    const handler = () => {
      const y = window.scrollY + 120;
      let cur = "home";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, []);

  const links = [
    { id: "home", label: "Home" },
    { id: "services", label: "Services" },
    { id: "about", label: "About" },
    { id: "resources", label: "Blog" },
    { id: "contact", label: "Contact" },
  ];

  return (
    <nav className="site-nav">
      <div className="nav-inner">
        <a href="#home" className="logo">
          <span className="logo-mark">JSR</span>
          <span>JSR Immigration<span style={{ color: "var(--text-muted)", fontWeight: 400 }}> & Legals</span></span>
        </a>
        <ul className="nav-links">
          {links.map(l => (
            <li key={l.id}><a href={`#${l.id}`} className={active === l.id ? "active" : ""}>{l.label}</a></li>
          ))}
        </ul>
        <div className="nav-cta">
          <a href="tel:6472864266" className="phone tabular nav-phone" style={{ fontSize: 14, color: "var(--text-soft)" }}>647-286-4266</a>
          <a href="#contact" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 14 }}>Get in Touch</a>
          <button className="menu-toggle" onClick={() => setOpen(!open)} aria-label="Menu">≡</button>
        </div>
      </div>
      {open && (
        <div style={{ borderTop: "1px solid var(--border)", padding: "12px var(--space-5)", background: "var(--bg)" }}>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
            {links.map(l => (
              <li key={l.id}><a href={`#${l.id}`} onClick={() => setOpen(false)}>{l.label}</a></li>
            ))}
          </ul>
        </div>
      )}
    </nav>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
              <span style={{ width: 36, height: 36, borderRadius: 6, background: "white", color: "var(--brand-900)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 13 }}>JSR</span>
              <span style={{ color: "white", fontWeight: 600 }}>JSR Immigration & Legals</span>
            </div>
            <p style={{ fontSize: 14, color: "#94a3b8", maxWidth: 320, lineHeight: 1.6 }}>
              Regulated Canadian Immigration Consulting & paralegal services serving Ontario and clients across Canada.
            </p>
            <div style={{ marginTop: 20, display: "flex", gap: 8, flexWrap: "wrap" }}>
              <span style={{ fontSize: 11, padding: "5px 10px", border: "1px solid #334155", borderRadius: 4, color: "#cbd5e1", letterSpacing: "0.04em" }}>RCIC R712841</span>
              <span style={{ fontSize: 11, padding: "5px 10px", border: "1px solid #334155", borderRadius: 4, color: "#cbd5e1", letterSpacing: "0.04em" }}>LSO P21236</span>
            </div>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a href="#services">Express Entry</a></li>
              <li><a href="#services">Work Permits</a></li>
              <li><a href="#services">Study Permits</a></li>
              <li><a href="#services">Spousal Sponsorship</a></li>
              <li><a href="#services">Citizenship</a></li>
              <li><a href="#services">All services →</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#about">About Jugraj</a></li>
              <li><a href="https://jsrlegalsandimmigration.blogspot.com/" target="_blank" rel="noopener noreferrer">Our Blog ↗</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li>9300 Goreway Dr, Suite 205</li>
              <li>Brampton, ON L6P 4N1</li>
              <li><a href="tel:6472864266">647-286-4266</a></li>
              <li><a href="mailto:info@jsrimmigration.com">info@jsrimmigration.com</a></li>
              <li><a href="mailto:info@jsrlegals.ca">info@jsrlegals.ca</a></li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 JSR Immigration & Legals. All rights reserved.</span>
          <span>Authorized by the Law Society of Ontario & College of Immigration and Citizenship Consultants.</span>
        </div>
      </div>
    </footer>
  );
}

// SERVICES BLOCK — grouped by JSR IMMIGRATION / JSR LEGALS
function ServicesBlock({ layout = "cards" }) {
  const [openId, setOpenId] = React.useState(null);
  const immigration = SERVICES.filter(s => s.group === "immigration");
  const legals = SERVICES.filter(s => s.group === "legals");

  const renderGroup = (title, tag, items) => {
    if (layout === "list") {
      return (
        <div style={{ marginBottom: "var(--space-7)" }}>
          <GroupHeader title={title} tag={tag} count={items.length} />
          <div style={{ borderTop: "1px solid var(--border)" }}>
            {items.map((s, i) => (
              <a key={s.id} href={`#${s.id}`} style={{
                display: "grid",
                gridTemplateColumns: "60px 1fr auto",
                alignItems: "center",
                gap: 24,
                padding: "20px 4px",
                borderBottom: "1px solid var(--border)",
                transition: "background 0.15s ease",
              }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-soft)"}
                 onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                <span style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600, letterSpacing: "0.08em" }}>{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>{s.title}</div>
                  <div style={{ fontSize: 14, color: "var(--text-soft)" }}>{s.desc}</div>
                </div>
                <span style={{ color: "var(--text-muted)" }}>→</span>
              </a>
            ))}
          </div>
        </div>
      );
    }

    if (layout === "accordion") {
      return (
        <div style={{ marginBottom: "var(--space-7)" }}>
          <GroupHeader title={title} tag={tag} count={items.length} />
          <div style={{ borderTop: "1px solid var(--border)" }}>
            {items.map(s => {
              const open = openId === s.id;
              return (
                <div key={s.id} style={{ borderBottom: "1px solid var(--border)" }}>
                  <button onClick={() => setOpenId(open ? null : s.id)} style={{
                    width: "100%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "20px 4px",
                    background: "none",
                    border: "none",
                    textAlign: "left",
                    fontSize: 18,
                    fontWeight: 600,
                    color: "var(--text)",
                  }}>
                    <span>{s.title}</span>
                    <span style={{ fontSize: 22, color: "var(--text-muted)", transform: open ? "rotate(45deg)" : "none", transition: "transform 0.2s" }}>+</span>
                  </button>
                  {open && (
                    <div style={{ padding: "0 4px 24px", color: "var(--text-soft)", fontSize: 15, maxWidth: 720 }}>
                      {s.desc}
                      <div style={{ marginTop: 16 }}>
                        <a href="#contact" className="btn btn-secondary" style={{ padding: "10px 18px", fontSize: 14 }}>Discuss this service</a>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      );
    }

    // cards
    return (
      <div style={{ marginBottom: "var(--space-7)" }}>
        <GroupHeader title={title} tag={tag} count={items.length} />
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
          gap: "var(--space-4)",
        }}>
          {items.map(s => (
            <a key={s.id} href={`#${s.id}`} className="card" style={{ display: "block", color: "inherit" }}>
              <div style={{
                width: 44, height: 44,
                borderRadius: 8,
                background: tag === "IMMIGRATION" ? "var(--accent-soft)" : "var(--bg-muted)",
                color: "var(--brand-800)",
                display: "grid", placeItems: "center",
                fontWeight: 700, fontSize: 11,
                marginBottom: 16,
                letterSpacing: "0.04em",
              }}>{s.icon}</div>
              <h3 style={{ fontSize: 17, marginBottom: 8, lineHeight: 1.25 }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: "var(--text-soft)", lineHeight: 1.55 }}>{s.desc}</p>
              <div style={{ marginTop: 16, fontSize: 13, color: "var(--accent)", fontWeight: 600 }}>Learn more →</div>
            </a>
          ))}
        </div>
      </div>
    );
  };

  return (
    <div>
      {renderGroup("JSR Immigration", "IMMIGRATION", immigration)}
      {renderGroup("JSR Legals", "LEGALS", legals)}
    </div>
  );
}

function GroupHeader({ title, tag, count }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, marginBottom: 24, paddingBottom: 16, borderBottom: "2px solid var(--brand-800)", flexWrap: "wrap" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
        <span style={{ fontSize: 11, padding: "5px 10px", background: tag === "IMMIGRATION" ? "var(--accent)" : "var(--brand-800)", color: tag === "IMMIGRATION" ? "var(--brand-900)" : "white", borderRadius: 4, fontWeight: 700, letterSpacing: "0.1em" }}>{tag}</span>
        <h3 style={{ fontSize: 26, margin: 0, letterSpacing: "-0.02em" }}>{title}</h3>
      </div>
      <span style={{ fontSize: 13, color: "var(--text-muted)", fontWeight: 500 }}>{count} services</span>
    </div>
  );
}

Object.assign(window, { Logo, Nav, Footer, ServicesBlock, SERVICES });