// Compliance Adda — shared site chrome: icons, nav (with services mega-menu),
// footer with newsletter, service card, FAQ accordion, WhatsApp float.
// Composes components from the bound design system bundle.
const CA_DS = window.ComplianceAddaDesignSystem_3d98ba;
const { Button, Card, Badge, Input, Select, NavBar, Footer } = CA_DS;

/* ───────────────────────── icons (lucide-style line art, stroke 2.25) ───────────────────────── */
const CA_ICON_PATHS = {
  "check": ["M20 6 9 17l-5-5"],
  "chevron-down": ["m6 9 6 6 6-6"],
  "chevron-right": ["m9 18 6-6-6-6"],
  "arrow-right": ["M5 12h14", "m12 5 7 7-7 7"],
  "menu": ["M4 6h16", "M4 12h16", "M4 18h16"],
  "x": ["M18 6 6 18", "M6 6l12 12"],
  "search": ["M21 21l-4.35-4.35", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"],
  "phone": ["M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"],
  "clock": ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z", "M12 6v6l4 2"],
  "calendar": ["M8 2v4", "M16 2v4", "M3 10h18", "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"],
  "bell": ["M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", "M10.3 21a1.94 1.94 0 0 0 3.4 0"],
  "building": ["M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z", "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2", "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2", "M10 6h4", "M10 10h4", "M10 14h4", "M10 18h4"],
  "landmark": ["M3 22h18", "M6 18v-7", "M10 18v-7", "M14 18v-7", "M18 18v-7", "M4 8l8-6 8 6H4Z"],
  "shield-check": ["M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z", "m9 12 2 2 4-4"],
  "book-open": ["M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z", "M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z"],
  "file-text": ["M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", "M14 2v4a2 2 0 0 0 2 2h4", "M16 13H8", "M16 17H8", "M10 9H8"],
  "award": ["M12 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z", "M15.48 12.89 17 22l-5-3-5 3 1.52-9.11"],
  "users": ["M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z", "M22 21v-2a4 4 0 0 0-3-3.87", "M16 3.13a4 4 0 0 1 0 7.75"],
  "user": ["M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"],
  "circle-check": ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z", "m9 12 2 2 4-4"],
  "lock": ["M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z", "M7 11V7a5 5 0 0 1 10 0v4"],
  "zap": ["M13 2 3 14h9l-1 8 10-12h-9l1-8z"],
  "globe": ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z", "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", "M2 12h20"],
  "map-pin": ["M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z", "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"],
  "mail": ["M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z", "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"],
  "indian-rupee": ["M6 3h12", "M6 8h12", "m6 13 8.5 8", "M6 13h3", "M9 3c6.667 0 6.667 10 0 10"],
  "send": ["M22 2 11 13", "M22 2 15 22l-4-9-9-4z"],
  "message-circle": ["M7.9 20A9 9 0 1 0 4 16.1L2 22z"],
  "play": ["M6 4l14 8-14 8z"],
  "star": ["M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"],
};

// Brand marks — rendered filled (pass fill).
const CA_BRAND_PATHS = {
  "instagram": ["M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5zM17.8 6a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"],
  "facebook": ["M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.51 1.5-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z"],
  "youtube": ["M23.5 6.5a3 3 0 0 0-2.11-2.13C19.5 3.85 12 3.85 12 3.85s-7.5 0-9.39.52A3 3 0 0 0 .5 6.5 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.5 3 3 0 0 0 2.11 2.13c1.89.52 9.39.52 9.39.52s7.5 0 9.39-.52A3 3 0 0 0 23.5 17.5 31 31 0 0 0 24 12a31 31 0 0 0-.5-5.5zM9.6 15.6V8.4l6.2 3.6z"],
  "twitter": ["M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z"],
  "threads": ["M17.54 11.17c-.1-.05-.2-.09-.3-.13-.18-3.28-1.97-5.16-4.98-5.18h-.04c-1.8 0-3.3.77-4.22 2.17l1.65 1.13c.69-1.04 1.77-1.26 2.57-1.26h.03c1 .01 1.75.3 2.24.88.35.4.6 1 .72 1.75a13.1 13.1 0 0 0-2.85-.14c-2.86.17-4.7 1.83-4.58 4.16.06 1.18.65 2.2 1.66 2.86.85.56 1.95.83 3.09.77 1.5-.08 2.68-.66 3.51-1.71.63-.8 1.03-1.83 1.21-3.09.72.43 1.25 1 1.54 1.68.5 1.16.53 3.05-1.03 4.6-1.36 1.36-3 1.94-5.48 1.96-2.75-.02-4.83-.9-6.18-2.6C4.09 17.06 3.44 14.79 3.42 12c.02-2.79.67-5.06 1.94-6.75C6.7 3.55 8.78 2.67 11.53 2.65c2.77.02 4.87.9 6.24 2.62.67.85 1.18 1.9 1.51 3.12l1.93-.52c-.4-1.5-1.03-2.79-1.9-3.86C17.63 1.83 14.96.68 11.54.66h-.02c-3.41.02-6.03 1.17-7.79 3.42C2.1 6.06 1.32 8.77 1.3 11.99v.02c.02 3.22.8 5.93 2.43 7.9 1.76 2.26 4.38 3.41 7.79 3.43h.02c3.03-.02 5.17-.81 6.93-2.57 2.3-2.3 2.23-5.18 1.47-6.95-.54-1.27-1.57-2.3-3-2.96l.6.31zm-4.6 4.87c-1.26.07-2.58-.5-2.64-1.73-.05-.91.65-1.92 2.76-2.04.24-.02.48-.02.71-.02.77 0 1.48.07 2.13.22-.24 3.02-1.66 3.5-2.96 3.57z"]
};

function Icon({ name, size = 22, stroke = 2.25, color = "currentColor", fill = false, style }) {
  if (CA_BRAND_PATHS[name]) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" fill={color} style={{ flex: "none", display: "block", ...style }}>
        {CA_BRAND_PATHS[name].map((d, i) => <path key={i} d={d}></path>)}
      </svg>
    );
  }
  const paths = CA_ICON_PATHS[name] || [];
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24" aria-hidden="true"
      fill={fill ? color : "none"} stroke={fill ? "none" : color}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ flex: "none", display: "block", ...style }}
    >
      {paths.map((d, i) => <path key={i} d={d}></path>)}
    </svg>
  );
}

/* ───────────────────────── shared bits ───────────────────────── */
function Eyebrow({ children, dark }) {
  return (
    <div style={{ font: "var(--type-body-sm-strong)", fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase", color: dark ? "var(--color-primary)" : "var(--color-body)", marginBottom: "var(--space-md)" }}>
      {children}
    </div>
  );
}

function SectionHead({ eyebrow, title, sub, dark, center, style }) {
  return (
    <div style={{ maxWidth: 720, margin: center ? "0 auto var(--space-2xl)" : "0 0 var(--space-2xl)", textAlign: center ? "center" : "left", ...style }}>
      {eyebrow ? <Eyebrow dark={dark}>{eyebrow}</Eyebrow> : null}
      <h2 style={{ font: "var(--type-display-md)", fontSize: "clamp(30px, 3.4vw, 40px)", lineHeight: 1.05, color: dark ? "var(--color-primary)" : "var(--color-ink)" }}>{title}</h2>
      {sub ? <p style={{ font: "var(--type-body-lg)", color: dark ? "var(--color-canvas-soft)" : "var(--color-body)", marginTop: "var(--space-lg)" }}>{sub}</p> : null}
    </div>
  );
}

function Stars({ n = 5, size = 15 }) {
  return (
    <div style={{ display: "flex", gap: 3 }} aria-label={n + " out of 5 stars"}>
      {[...Array(5)].map((_, i) => <Icon key={i} name="star" size={size} fill color={i < n ? "var(--color-warning)" : "#d4d6d2"} />)}
    </div>
  );
}

/* link that underlines on hover */
function TextLink({ href, children, style, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ font: "var(--type-body-md-strong)", color: "var(--color-ink)", textDecoration: h ? "underline" : "none", textUnderlineOffset: 4, display: "inline-flex", alignItems: "center", gap: 6, ...style }}>
      {children}
    </a>
  );
}

/* pill-shaped link button (anchor styled like DS Button) */
function PillLink({ href, variant = "primary", children, small, style }) {
  const [h, setH] = React.useState(false);
  const skins = {
    primary: { background: h ? "var(--color-primary-active)" : "var(--color-primary)", color: "var(--color-on-primary)", border: "1px solid transparent" },
    secondary: { background: h ? "#e1e5df" : "var(--color-canvas-soft)", color: "var(--color-ink)", border: "1px solid transparent" },
    tertiary: { background: h ? "#f4f5f3" : "var(--color-canvas)", color: "var(--color-ink)", border: "1px solid var(--color-ink)" },
    dark: { background: h ? "#2a2b28" : "var(--color-ink)", color: "var(--color-canvas)", border: "1px solid transparent" },
  };
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ font: "var(--type-button-md)", fontSize: small ? 14 : 16, padding: small ? "8px 18px" : "var(--space-md) var(--space-xl)", borderRadius: "var(--rounded-xl)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "var(--space-sm)", transition: "background 150ms ease", boxSizing: "border-box", ...skins[variant], ...style }}>
      {children}
    </a>
  );
}

/* ───────────────────────── navigation ───────────────────────── */
function BrandBlock() {
  return (
    <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none", color: "var(--color-ink)" }}>
      <img src={(window.__resources && window.__resources.logo) || "assets/logo.jpg"} alt="" width="38" height="38" style={{ mixBlendMode: "multiply", borderRadius: 8 }} />
      <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
        <span style={{ font: "var(--type-body-md-strong)" }}>Compliance Adda</span>
        <span style={{ font: "var(--type-caption)", color: "var(--color-mute)" }}>Tax · GST · Incorporation</span>
      </span>
    </a>
  );
}

function MegaMenu({ onClose }) {
  const S = window.CA_SERVICES, cats = window.CA_CATS;
  return (
    <div style={{ position: "absolute", left: 0, right: 0, top: "100%", background: "var(--color-canvas)", borderBottom: "1px solid var(--color-ink)", borderRadius: "0 0 var(--rounded-xl) var(--rounded-xl)", zIndex: 40 }}>
      <div className="ca-wrap" style={{ padding: "var(--space-2xl) 24px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", gap: "var(--space-xl)" }}>
          {cats.map((cat) => (
            <div key={cat} style={{ display: "flex", flexDirection: "column", gap: "var(--space-sm)" }}>
              <div style={{ font: "var(--type-caption)", fontWeight: 600, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--color-mute)", marginBottom: 4 }}>{cat}</div>
              {Object.keys(S).filter((s) => S[s].cat === cat).map((s) => (
                <a key={s} href={"service.html?s=" + s} onClick={onClose}
                  style={{ font: "var(--type-body-sm)", color: "var(--color-body)", textDecoration: "none", padding: "2px 0" }}
                  onMouseEnter={(e) => { e.currentTarget.style.textDecoration = "underline"; e.currentTarget.style.color = "var(--color-ink)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.textDecoration = "none"; e.currentTarget.style.color = "var(--color-body)"; }}>
                  {S[s].title.replace(" Registration", "").replace(" Filing", "").replace(" (LLP)", "").replace(" (OPC)", "")}
                </a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ marginTop: "var(--space-xl)", paddingTop: "var(--space-lg)", borderTop: "1px solid var(--color-canvas-soft)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <span style={{ font: "var(--type-body-sm)", color: "var(--color-mute)" }}>Fixed professional fees. Government charges billed at cost.</span>
          <TextLink href="services.html" style={{ font: "var(--type-body-sm-strong)" }}>Browse all services <Icon name="arrow-right" size={15} /></TextLink>
        </div>
      </div>
    </div>
  );
}

function SiteNav({ active }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const rootRef = React.useRef(null);

  React.useEffect(() => {
    const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setMenuOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") { setMenuOpen(false); setMobileOpen(false); } };
    document.addEventListener("click", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("click", onDoc); document.removeEventListener("keydown", onKey); };
  }, []);

  const servicesLabel = (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
      Services <Icon name="chevron-down" size={14} style={{ transform: menuOpen ? "rotate(180deg)" : "none", transition: "transform 150ms ease" }} />
    </span>
  );

  return (
    <div ref={rootRef} style={{ position: "sticky", top: 0, zIndex: 50 }}>
      {/* desktop */}
      <div className="ca-nav-desktop" style={{ position: "relative" }}>
        <NavBar
          style={{ position: "static", padding: "var(--space-md) 24px" }}
          brand={<BrandBlock />}
          links={[
            { label: servicesLabel, active: active === "services", onClick: (e) => { e.preventDefault(); e.stopPropagation(); setMenuOpen(!menuOpen); }, href: "services.html" },
            { label: "How it works", href: "index.html#process", active: false },
            { label: "About", href: "index.html#about", active: active === "about" },
            { label: "Resources", href: "index.html#resources", active: false },
            { label: "Contact", href: "#contact", active: false },
          ]}
          actions={
            <React.Fragment>
              <a href={window.CA_PHONE_HREF} className="ca-hide-sm" style={{ font: "var(--type-body-sm-strong)", color: "var(--color-ink)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 7 }}>
                <Icon name="phone" size={15} /> {window.CA_PHONE}
              </a>
              <PillLink href={window.CA_WA()} small>Talk to an expert</PillLink>
            </React.Fragment>
          }
        />
        {menuOpen ? <MegaMenu onClose={() => setMenuOpen(false)} /> : null}
      </div>

      {/* mobile */}
      <div className="ca-nav-mobile" style={{ background: "var(--color-canvas)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 16px" }}>
          <BrandBlock />
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <PillLink href={window.CA_WA()} small>Expert help</PillLink>
            <Button variant="tertiary" aria-label={mobileOpen ? "Close menu" : "Open menu"} style={{ padding: 10, borderRadius: "var(--rounded-pill)" }} onClick={() => setMobileOpen(!mobileOpen)}>
              <Icon name={mobileOpen ? "x" : "menu"} size={20} />
            </Button>
          </div>
        </div>
        {mobileOpen ? (
          <div style={{ padding: "0 16px var(--space-xl)", display: "flex", flexDirection: "column", gap: 2, borderBottom: "1px solid var(--color-ink)" }}>
            {[["All services", "services.html"], ["How it works", "index.html#process"], ["About", "index.html#about"], ["Resources", "index.html#resources"], ["Contact", "#contact"]].map(([label, href]) => (
              <a key={label} href={href} onClick={() => setMobileOpen(false)} style={{ font: "var(--type-body-md-strong)", color: "var(--color-ink)", textDecoration: "none", padding: "12px 4px", borderBottom: "1px solid var(--color-canvas-soft)" }}>{label}</a>
            ))}
            <a href={window.CA_PHONE_HREF} style={{ font: "var(--type-body-md-strong)", color: "var(--color-ink)", textDecoration: "none", padding: "12px 4px", display: "flex", alignItems: "center", gap: 8 }}>
              <Icon name="phone" size={16} /> {window.CA_PHONE}
            </a>
          </div>
        ) : null}
      </div>
    </div>
  );
}

/* ───────────────────────── service card (marketplace + home preview) ───────────────────────── */
function ServiceCard({ slug }) {
  const d = window.CA_SERVICES[slug];
  const popular = window.CA_POPULAR.includes(slug);
  if (!d) return null;
  return (
    <Card style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)", height: "100%" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
        <span style={{ font: "var(--type-caption)", fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--color-mute)" }}>{d.cat}</span>
        {popular ? <Badge tone="warning">Popular</Badge> : <Badge tone="neutral">Expert assisted</Badge>}
      </div>
      <a href={"service.html?s=" + slug} style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)", fontSize: 21, lineHeight: 1.25, color: "var(--color-ink)", textDecoration: "none" }}
        onMouseEnter={(e) => e.currentTarget.style.textDecoration = "underline"}
        onMouseLeave={(e) => e.currentTarget.style.textDecoration = "none"}>{d.title}</a>
      <p style={{ font: "var(--type-body-sm)", color: "var(--color-body)", flex: 1, display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{d.tag}</p>
      <div style={{ display: "flex", gap: "var(--space-xl)", alignItems: "baseline" }}>
        <div>
          <div style={{ font: "var(--type-caption)", color: "var(--color-mute)" }}>from</div>
          <div style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)", fontSize: 22 }}>{d.price}</div>
        </div>
        <div>
          <div style={{ font: "var(--type-caption)", color: "var(--color-mute)" }}>timeline</div>
          <div style={{ font: "var(--type-body-md-strong)" }}>{d.time}</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: "var(--space-sm)", marginTop: "var(--space-xs)", flexWrap: "wrap" }}>
        <PillLink href={window.CA_WA(d.title)} small>Apply now</PillLink>
        <PillLink href={"service.html?s=" + slug} variant="tertiary" small>Details</PillLink>
      </div>
    </Card>
  );
}

/* ───────────────────────── FAQ accordion ───────────────────────── */
function FaqItem({ q, a, open, onToggle }) {
  return (
    <div style={{ background: "var(--color-canvas)", borderRadius: "var(--rounded-lg)", overflow: "hidden" }}>
      <button type="button" onClick={onToggle} aria-expanded={open}
        style={{ width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: "var(--space-lg) var(--space-xl)", font: "var(--type-body-md-strong)", color: "var(--color-ink)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
        {q}
        <Icon name="chevron-down" size={18} style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 200ms ease" }} />
      </button>
      <div style={{ maxHeight: open ? 400 : 0, overflow: "hidden", transition: "max-height 250ms ease" }}>
        <p style={{ padding: "0 var(--space-xl) var(--space-xl)", font: "var(--type-body-md)", color: "var(--color-body)" }}>{a}</p>
      </div>
    </div>
  );
}

function FaqList({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)" }}>
      {items.map((f, i) => <FaqItem key={i} q={f[0]} a={f[1]} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
    </div>
  );
}

/* row of circular social icon links */
function SocialRow({ dark }) {
  const s = window.CA_SOCIALS || {};
  const items = [["instagram", s.instagram], ["facebook", s.facebook], ["twitter", s.twitter], ["youtube", s.youtube], ["threads", s.threads]].filter((x) => x[1]);
  const labels = { instagram: "Instagram", facebook: "Facebook", twitter: "X (Twitter)", youtube: "YouTube", threads: "Threads" };
  return (
    <div style={{ display: "flex", gap: "var(--space-sm)", flexWrap: "wrap" }}>
      {items.map(([name, href]) => (
        <a key={name} href={href} target="_blank" rel="noopener noreferrer" aria-label={labels[name]}
          style={{ width: 38, height: 38, borderRadius: "var(--rounded-pill)", display: "grid", placeItems: "center", background: dark ? "#2a2b28" : "var(--color-canvas-soft)", color: dark ? "var(--color-canvas)" : "var(--color-ink)", transition: "background 150ms ease" }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--color-primary)"; e.currentTarget.style.color = "var(--color-on-primary)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = dark ? "#2a2b28" : "var(--color-canvas-soft)"; e.currentTarget.style.color = dark ? "var(--color-canvas)" : "var(--color-ink)"; }}>
          <Icon name={name} size={18} />
        </a>
      ))}
    </div>
  );
}

/* ───────────────────────── footer (newsletter + DS footer) ───────────────────────── */
function SiteFooter() {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  return (
    <div id="contact">
      <div style={{ background: "var(--color-ink)", padding: "var(--space-3xl) 24px 0" }}>
        <div className="ca-wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "var(--space-2xl)", flexWrap: "wrap", paddingBottom: "var(--space-3xl)", borderBottom: "1px solid #2a2b28" }}>
          <div style={{ maxWidth: 440 }}>
            <h2 style={{ font: "var(--type-display-md)", fontSize: "clamp(28px, 3vw, 36px)", lineHeight: 1.05, color: "var(--color-primary)" }}>Never miss a due date again</h2>
            <p style={{ font: "var(--type-body-md)", color: "var(--color-canvas-soft)", marginTop: "var(--space-md)" }}>One email a month with every GST, TDS and ROC deadline that applies to you. No spam, unsubscribe anytime.</p>
          </div>
          {done ? (
            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--color-canvas)", font: "var(--type-body-md-strong)" }}>
              <Icon name="circle-check" size={22} color="var(--color-positive)" /> You're on the list — first reminder lands next month.
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); if (email.trim()) setDone(true); }} style={{ display: "flex", gap: "var(--space-md)", alignItems: "flex-end", flexWrap: "wrap" }}>
              <Input type="email" required placeholder="you@company.in" value={email} onChange={(e) => setEmail(e.target.value)} aria-label="Email address" style={{ minWidth: 240 }} />
              <Button variant="primary" type="submit">Get reminders</Button>
            </form>
          )}
        </div>
      </div>
      <Footer
        brand={
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-lg)", alignItems: "flex-start" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ background: "var(--color-canvas)", borderRadius: 10, padding: 4, display: "grid", placeItems: "center" }}>
                <img src={(window.__resources && window.__resources.logo) || "assets/logo.jpg"} alt="" width="34" height="34" style={{ display: "block", borderRadius: 6 }} />
              </span>
              <span>Compliance Adda</span>
            </div>
            <div style={{ font: "var(--type-body-sm)", color: "var(--color-canvas-soft)", display: "flex", flexDirection: "column", gap: "var(--space-sm)" }}>
              <span style={{ display: "flex", gap: 8, alignItems: "flex-start" }}><Icon name="map-pin" size={15} style={{ marginTop: 2 }} /> {window.CA_ADDRESS}</span>
              <a href={window.CA_PHONE_HREF} style={{ display: "flex", gap: 8, alignItems: "center", color: "inherit", textDecoration: "none" }}><Icon name="phone" size={15} /> {window.CA_PHONE}</a>
              <a href={"mailto:" + window.CA_EMAIL} style={{ display: "flex", gap: 8, alignItems: "center", color: "inherit", textDecoration: "none" }}><Icon name="mail" size={15} /> {window.CA_EMAIL}</a>
            </div>
            <SocialRow dark />
          </div>
        }
        columns={[
          { title: "Startup", links: [
            { label: "Private limited company", href: "service.html?s=private-limited-company" },
            { label: "LLP registration", href: "service.html?s=limited-liability-llp" },
            { label: "One person company", href: "service.html?s=one-person-company-opc" },
            { label: "Partnership firm", href: "service.html?s=partnership-firm" },
            { label: "Startup India (DPIIT)", href: "service.html?s=startup-registration" },
          ]},
          { title: "Tax & GST", links: [
            { label: "GST registration", href: "service.html?s=gst-registration" },
            { label: "GST return filing", href: "service.html?s=gst-return" },
            { label: "GST annual return", href: "service.html?s=gst-annual-return" },
            { label: "Income tax return", href: "service.html?s=income-tax-return" },
            { label: "GST LUT filing", href: "service.html?s=gst-lut" },
          ]},
          { title: "Legal & IPR", links: [
            { label: "Trademark registration", href: "service.html?s=trademark-registration" },
            { label: "Objection reply", href: "service.html?s=trademark-objection" },
            { label: "Opposition", href: "service.html?s=trademark-opposition" },
            { label: "FSSAI licence", href: "service.html?s=fssai-registration" },
            { label: "MSME / Udyam", href: "service.html?s=msme-registration" },
          ]},
          { title: "Company", links: [
            { label: "About", href: "index.html#about" },
            { label: "How it works", href: "index.html#process" },
            { label: "Resources", href: "index.html#resources" },
            { label: "All services", href: "services.html" },
          ]},
        ]}
        fineprint={<span>© 2026 Compliance Adda. Professional fees shown are exclusive of GST; government fees are billed at cost. Compliance Adda is a consultancy and not a government agency.</span>}
      />
    </div>
  );
}

/* ───────────────────────── WhatsApp float + reveal ───────────────────────── */
function WaFloat() {
  const [h, setH] = React.useState(false);
  return (
    <a href={window.CA_WA()} aria-label="Chat on WhatsApp" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "fixed", bottom: 22, right: 22, zIndex: 60, width: 56, height: 56, borderRadius: "var(--rounded-pill)", background: h ? "var(--color-primary-active)" : "var(--color-primary)", color: "var(--color-on-primary)", display: "grid", placeItems: "center", boxShadow: "var(--shadow-modal)", transition: "background 150ms ease" }}>
      <Icon name="message-circle" size={26} stroke={2.25} />
    </a>
  );
}

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".ca-reveal");
    if (!("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("in")); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); obs.unobserve(en.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  });
}

Object.assign(window, {
  Icon, Eyebrow, SectionHead, Stars, TextLink, PillLink,
  SiteNav, SiteFooter, ServiceCard, FaqList, WaFloat, useReveal, SocialRow,
});
