/* Search Hive — shared chrome (Nav, Footer, helpers, icons)
   Composes the bound design system (window.SearchHiveDesignSystem_3f2abd).
   Exports everything to window so each page script can use it. */

const DS = window.SearchHiveDesignSystem_3f2abd;
const { Button, Badge, Tag, Avatar, Rating, Card, Input } = DS;

/* ----------------------------------------------------------------- *
 * Lucide-style stroke icons (2px, round joins) — the DS icon set.
 * ----------------------------------------------------------------- */
const ICON_PATHS = {
  "arrow-right": '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
  "arrow-up-right": '<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>',
  search: '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
  sparkles: '<path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8z"/>',
  palette: '<circle cx="13.5" cy="6.5" r="1.5"/><circle cx="17.5" cy="10.5" r="1.5"/><circle cx="8.5" cy="7.5" r="1.5"/><circle cx="6.5" cy="12.5" r="1.5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c1.7 0 2.5-1.3 2.5-2.5 0-.6-.2-1.1-.6-1.5-.4-.4-.6-.9-.6-1.5 0-1.1.9-2 2-2H17a5 5 0 0 0 5-5c0-4.9-4.5-8.5-10-8.5z"/>',
  "trending-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
  "pen-tool": '<path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/>',
  megaphone: '<path d="M3 11l18-5v12L3 13v-2z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
  target: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4"/>',
  layers: '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>',
  compass: '<circle cx="12" cy="12" r="9"/><polygon points="16 8 10.5 10.5 8 16 13.5 13.5 16 8"/>',
  check: '<polyline points="20 6 9 17 4 12"/>',
  "check-circle": '<circle cx="12" cy="12" r="9"/><polyline points="8.5 12.5 11 15 16 9"/>',
  plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
  minus: '<line x1="5" y1="12" x2="19" y2="12"/>',
  quote: '<path d="M7 7H4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2v2a2 2 0 0 1-2 2"/><path d="M17 7h-3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h2v2a2 2 0 0 1-2 2"/>',
  menu: '<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>',
  x: '<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>',
  mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/>',
  "map-pin": '<path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
  rocket: '<path d="M5 16c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2 0-2.8a2 2 0 0 0-3 0z"/><path d="M9 13c0-3 1-7 6-10 3 0 6 3 6 6-3 5-7 6-10 6l-2-2z"/><circle cx="14.5" cy="8.5" r="1.5"/>',
  "bar-chart": '<line x1="6" y1="20" x2="6" y2="12"/><line x1="12" y1="20" x2="12" y2="6"/><line x1="18" y1="20" x2="18" y2="10"/>',
  clock: '<circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15.5 14"/>',
  "message-circle": '<path d="M21 11.5a8.5 8.5 0 0 1-12.4 7.5L3 21l2-5.6A8.5 8.5 0 1 1 21 11.5z"/>',
  zap: '<polygon points="13 2 4 14 11 14 10 22 19 10 12 10 13 2"/>',
  globe: '<circle cx="12" cy="12" r="9"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/>',
  users: '<circle cx="9" cy="8" r="3.2"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 5.2a3.2 3.2 0 0 1 0 6"/><path d="M18 14a6 6 0 0 1 3 6"/>',
};

function Icon({ name, size = 24, stroke = 2, color = "currentColor", style = {} }) {
  return React.createElement("svg", {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    style: { display: "block", flex: "none", ...style },
    dangerouslySetInnerHTML: { __html: ICON_PATHS[name] || "" },
  });
}

/* ----------------------------------------------------------------- *
 * Layout helpers
 * ----------------------------------------------------------------- */
function Container({ children, width = 1200, style = {} }) {
  return (
    <div style={{ width: "100%", maxWidth: width, marginLeft: "auto", marginRight: "auto",
      paddingLeft: "clamp(20px, 5vw, 40px)", paddingRight: "clamp(20px, 5vw, 40px)", ...style }}>
      {children}
    </div>
  );
}

function Eyebrow({ children, icon, style = {} }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8,
      fontSize: 13, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase",
      color: "var(--sh-honey-deep)", ...style }}>
      {icon && <Icon name={icon} size={15} stroke={2.2} />}
      {children}
    </span>
  );
}

/* faint honeycomb texture wash */
function Honeycomb({ opacity = 0.5, style = {} }) {
  return (
    <div aria-hidden="true" style={{
      position: "absolute", inset: 0, pointerEvents: "none",
      backgroundImage: "url(assets/honeycomb-tile.svg)",
      backgroundSize: "48px auto", opacity, ...style }} />
  );
}

/* hexagon save-glyph chip used as a decorative motif */
function HexMark({ size = 40, fill = "var(--sh-honey)", glyph = true }) {
  return (
    <span style={{ position: "relative", display: "inline-flex", width: size, height: size,
      alignItems: "center", justifyContent: "center", flex: "none" }}>
      <svg width={size} height={size} viewBox="0 0 48 48" style={{ position: "absolute", inset: 0 }}>
        <polygon points="24,2 43.05,13 43.05,35 24,46 4.95,35 4.95,13" fill={fill} />
      </svg>
      {glyph && <Icon name="search" size={size * 0.42} stroke={2.6} color="var(--sh-ink)" style={{ position: "relative" }} />}
    </span>
  );
}

/* ----------------------------------------------------------------- *
 * Top navigation
 * ----------------------------------------------------------------- */
const NAV_LINKS = [
  { label: "Services", href: "services.html" },
  { label: "Work", href: "case-study.html" },
  { label: "About", href: "index.html#approach" },
  { label: "Journal", href: "index.html#faq" },
];

function Nav({ active = "" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.86)" : "rgba(255,255,255,0)",
      backdropFilter: scrolled ? "saturate(180%) blur(14px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(180%) blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid var(--sh-hairline-soft)" : "1px solid transparent",
      transition: "background 240ms ease, border-color 240ms ease" }}>
      <Container width={1280} style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 76 }}>
        <a href="index.html" style={{ display: "inline-flex", alignItems: "center" }}>
          <img src="assets/logo-wordmark.svg" alt="Search Hive" style={{ height: 30 }} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 4 }} className="sh-nav-links">
          {NAV_LINKS.map((l) => (
            <a key={l.label} href={l.href} style={{
              padding: "8px 14px", borderRadius: 999, color: active === l.label ? "var(--sh-ink)" : "var(--sh-body)",
              fontSize: 15, fontWeight: 600, textDecoration: "none",
              background: active === l.label ? "var(--surface-soft)" : "transparent",
              transition: "color 140ms ease, background 140ms ease" }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--sh-ink)"; }}
              onMouseLeave={(e) => { if (active !== l.label) e.currentTarget.style.color = "var(--sh-body)"; }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="contact.html" className="sh-nav-login" style={{ fontSize: 15, fontWeight: 600, color: "var(--sh-ink)" }}>Sign in</a>
          <a href="contact.html" style={{ textDecoration: "none" }}>
            <Button pill size="sm" trailingIcon={<Icon name="arrow-right" size={16} stroke={2.4} />}>Start a project</Button>
          </a>
          <button aria-label="Menu" className="sh-nav-burger" onClick={() => setOpen((v) => !v)} style={{
            display: "none", border: "1px solid var(--sh-hairline)", background: "var(--canvas)",
            width: 44, height: 44, borderRadius: 12, alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
            <Icon name={open ? "x" : "menu"} size={22} color="var(--sh-ink)" />
          </button>
        </div>
      </Container>
      {open && (
        <div className="sh-mobile-menu" style={{ borderTop: "1px solid var(--sh-hairline-soft)", background: "var(--canvas)" }}>
          <Container width={1280} style={{ display: "flex", flexDirection: "column", gap: 4, padding: "14px 0 20px" }}>
            {NAV_LINKS.map((l) => (
              <a key={l.label} href={l.href} style={{ padding: "12px 16px", borderRadius: 12, color: "var(--sh-ink)", fontSize: 17, fontWeight: 600 }}>{l.label}</a>
            ))}
            <a href="contact.html" style={{ padding: "12px 16px", borderRadius: 12, color: "var(--sh-ink)", fontSize: 17, fontWeight: 600 }}>Sign in</a>
          </Container>
        </div>
      )}
    </header>
  );
}

/* ----------------------------------------------------------------- *
 * Logo marquee  (warm-white trust band)
 * ----------------------------------------------------------------- */
function WordmarkLogo({ children }) {
  return (
    <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--sh-muted)",
      whiteSpace: "nowrap", fontFamily: "var(--font-sans)" }}>{children}</span>
  );
}

function Marquee({ items, label }) {
  const row = [...items, ...items];
  return (
    <section style={{ padding: "44px 0", borderTop: "1px solid var(--sh-hairline-soft)", borderBottom: "1px solid var(--sh-hairline-soft)", background: "var(--canvas)" }}>
      {label && (
        <Container width={1280} style={{ marginBottom: 26 }}>
          <p style={{ margin: 0, textAlign: "center", fontSize: 13, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--sh-muted)" }}>{label}</p>
        </Container>
      )}
      <div className="sh-marquee" style={{ position: "relative", overflow: "hidden",
        WebkitMaskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
        maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)" }}>
        <div className="sh-marquee-track" style={{ display: "flex", alignItems: "center", gap: 64, width: "max-content" }}>
          {row.map((it, i) => <WordmarkLogo key={i}>{it}</WordmarkLogo>)}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------- *
 * CTA band (reused across pages)
 * ----------------------------------------------------------------- */
function CTABand({ kicker = "Ready when you are", title = "Let’s build your hive.", body = "Tell us what you want to grow. We’ll send back a sharp, honest plan within two working days — no pitch theatre.", primary = "Start a project", href = "contact.html" }) {
  return (
    <section style={{ padding: "calc(clamp(36px,6vw,72px) * var(--sh-dens,1)) 0" }}>
      <Container width={1280}>
        <div style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-xl)", background: "var(--sh-ink)", color: "var(--sh-on-dark)",
          padding: "clamp(36px,6vw,72px)" }}>
          <Honeycomb opacity={0.16} style={{ backgroundSize: "44px auto" }} />
          <div style={{ position: "absolute", top: -80, right: -60, width: 280, height: 280, borderRadius: "50%",
            background: "radial-gradient(circle, rgba(242,161,4,0.32), transparent 65%)", pointerEvents: "none" }} />
          <div style={{ position: "relative", maxWidth: 680 }}>
            <Eyebrow icon="sparkles" style={{ color: "var(--sh-honey)" }}>{kicker}</Eyebrow>
            <h2 style={{ margin: "18px 0 0", fontSize: "clamp(34px,5vw,56px)", fontWeight: 700, lineHeight: 1.04, letterSpacing: "-0.02em" }}>{title}</h2>
            <p style={{ margin: "20px 0 0", fontSize: "clamp(16px,1.6vw,19px)", lineHeight: 1.6, color: "rgba(255,255,255,0.74)" }}>{body}</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 32, alignItems: "center" }}>
              <a href={href} style={{ textDecoration: "none" }}>
                <Button pill size="md" trailingIcon={<Icon name="arrow-right" size={18} stroke={2.4} />}>{primary}</Button>
              </a>
              <a href="services.html" style={{ textDecoration: "none" }}>
                <Button pill size="md" variant="secondary" style={{ borderColor: "rgba(255,255,255,0.34)", color: "#fff", background: "transparent" }}>See our services</Button>
              </a>
              <span style={{ fontSize: 14, color: "rgba(255,255,255,0.6)" }}>You won’t be charged yet.</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ----------------------------------------------------------------- *
 * Footer
 * ----------------------------------------------------------------- */
const FOOTER_COLS = [
  { head: "Studio", links: ["Services", "Our work", "About the hive", "Journal", "Careers"] },
  { head: "Capabilities", links: ["Brand & identity", "Performance marketing", "Web & product", "Content & SEO", "Social & creative"] },
  { head: "Company", links: ["Contact", "Partnerships", "Press kit", "Privacy", "Terms"] },
];

function Footer() {
  return (
    <footer style={{ position: "relative", background: "var(--sh-ink)", color: "var(--sh-on-dark)", overflow: "hidden" }}>
      <Honeycomb opacity={0.08} style={{ backgroundSize: "52px auto" }} />
      <Container width={1280} style={{ position: "relative", paddingTop: 72, paddingBottom: 40 }}>
        <div className="sh-footer-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 40 }}>
          <div style={{ maxWidth: 320 }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <HexMark size={34} />
              <span style={{ fontSize: 21, fontWeight: 800, letterSpacing: "-0.02em" }}>Search Hive</span>
            </div>
            <p style={{ margin: "18px 0 0", fontSize: 15, lineHeight: 1.6, color: "rgba(255,255,255,0.62)" }}>
              A growth studio for brands that want to be found — and remembered. Strategy, design, and performance under one warm roof.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
              {["globe", "message-circle", "mail"].map((n) => (
                <span key={n} style={{ width: 42, height: 42, borderRadius: 999, border: "1px solid rgba(255,255,255,0.16)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={n} size={18} color="rgba(255,255,255,0.8)" />
                </span>
              ))}
            </div>
          </div>
          {FOOTER_COLS.map((col) => (
            <div key={col.head}>
              <p style={{ margin: "0 0 16px", fontSize: 13, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)" }}>{col.head}</p>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                {col.links.map((l) => (
                  <li key={l}><a href={l === "Contact" ? "contact.html" : l === "Services" || l === "Capabilities" ? "services.html" : "#"} style={{ color: "rgba(255,255,255,0.7)", fontSize: 15, textDecoration: "none" }}
                    onMouseEnter={(e) => e.currentTarget.style.color = "#fff"}
                    onMouseLeave={(e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)"}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "space-between", alignItems: "center" }}>
          <p style={{ margin: 0, fontSize: 13.5, color: "rgba(255,255,255,0.5)" }}>© 2026 Search Hive Studio. Find your place in the hive.</p>
          <p style={{ margin: 0, fontSize: 13.5, color: "rgba(255,255,255,0.5)" }}>Made with warm light, in three time zones.</p>
        </div>
      </Container>
    </footer>
  );
}

/* shared responsive + animation CSS injected once */
function injectSharedCSS() {
  if (document.getElementById("sh-shared-css")) return;
  const s = document.createElement("style");
  s.id = "sh-shared-css";
  s.textContent = `
    @keyframes sh-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .sh-marquee-track { animation: sh-marquee-scroll 32s linear infinite; }
    .sh-marquee:hover .sh-marquee-track { animation-play-state: paused; }
    @keyframes sh-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    .sh-reveal { opacity: 0; }
    .sh-reveal.sh-in { animation: sh-rise 640ms cubic-bezier(.16,.84,.44,1) forwards; }
    @media (prefers-reduced-motion: reduce) {
      .sh-marquee-track { animation: none; }
      .sh-reveal, .sh-reveal.sh-in { opacity: 1 !important; animation: none !important; }
    }
    @media (max-width: 900px) {
      .sh-nav-links { display: none !important; }
      .sh-nav-login { display: none !important; }
      .sh-nav-burger { display: inline-flex !important; }
      .sh-footer-grid { grid-template-columns: 1fr 1fr !important; }
    }
    @media (max-width: 560px) {
      .sh-footer-grid { grid-template-columns: 1fr !important; }
    }
  `;
  document.head.appendChild(s);
}

/* scroll-reveal: add .sh-in when .sh-reveal enters viewport */
function useScrollReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".sh-reveal");
    if (!("IntersectionObserver" in window)) { els.forEach((e) => e.classList.add("sh-in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("sh-in"); io.unobserve(en.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  });
}

Object.assign(window, {
  DS, Icon, Container, Eyebrow, Honeycomb, HexMark,
  Nav, Marquee, WordmarkLogo, CTABand, Footer,
  injectSharedCSS, useScrollReveal,
});
