/* global React */
// Varick Health — Marketing kit: shared chrome & helpers
const { useEffect, useState } = React;

// Lucide icon: renders <i data-lucide> and (re)hydrates after mount.
function Icon({ name, size = 20, color, strokeWidth = 1.75, style }) {
  const ref = React.useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, "stroke-width": strokeWidth },
        nameAttr: "data-lucide",
      });
      const svg = ref.current.querySelector("svg");
      if (svg && color) svg.style.color = color;
    }
  }, [name, size, strokeWidth, color]);
  return <span ref={ref} className="vh-ic" style={{ display: "inline-flex", color, ...style }} />;
}

// Brand lockup
function Wordmark({ light = false, size = 21 }) {
  return (
    <span className="vh-wm" style={{ fontSize: size, color: light ? "#fff" : "var(--vh-navy)" }}>
      <b>Varick</b><span>Health</span>
    </span>
  );
}
function Logo({ light = false, size = 21, markPx = 32 }) {
  const mark = light ? "../../assets/varick-mark-white.svg" : "../../assets/varick-mark-indigo.svg";
  return (
    <span className="vh-logo">
      <img src={mark} width={markPx} height={markPx} alt="Varick Health" />
      <Wordmark light={light} size={size} />
    </span>
  );
}

// Image placeholder — supply real clinical/office photography to replace.
function Photo({ label = "Clinical photo", ratio = "4 / 3", radius = 12, dark = false, style }) {
  return (
    <div className="vh-photo" style={{ aspectRatio: ratio, borderRadius: radius,
      background: dark ? "var(--vh-navy-800)" : "var(--vh-mist)",
      color: dark ? "rgba(255,255,255,.5)" : "var(--vh-text-faint)", ...style }}>
      <Icon name="image" size={22} />
      <span>{label}</span>
    </div>
  );
}

function Eyebrow({ children, light = false }) {
  return <div className="vh-eyebrow" style={light ? { color: "var(--vh-indigo-300)" } : null}>{children}</div>;
}

const NAV = ["How It Works", "Solutions", "Why Varick", "Resources"];

function Header({ route, go }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const sc = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", sc); return () => window.removeEventListener("scroll", sc);
  }, []);
  return (
    <header className={"mk-header" + (scrolled ? " is-scrolled" : "")}>
      <div className="mk-header-in">
        <button className="mk-logo-btn" onClick={() => go("home")}><Logo /></button>
        <nav className="mk-nav">
          {NAV.map((n) => {
            const r = n === "How It Works" ? "how" : n === "Solutions" ? "solutions" : null;
            return (
              <button key={n} className={"mk-navlink" + (route === r ? " is-active" : "")}
                onClick={() => r && go(r)}>{n}</button>
            );
          })}
        </nav>
        <div className="mk-header-cta">
          <a className="mk-login" href="../portal/index.html"><Icon name="lock" size={15} />Client Login</a>
          <a className="vh-btn vh-btn--primary mk-book">Book a Discovery Call</a>
        </div>
      </div>
    </header>
  );
}

function Footer({ go }) {
  const cols = [
    { h: "Solutions", items: ["Outpatient Therapy Groups", "Psychiatry & Psych-NP", "OMH Article 31/32 Clinics", "ABA & Pediatric BH"] },
    { h: "Platform", items: ["Credentialing", "Payer Enrollment", "Roster Management", "Continuous Monitoring"] },
    { h: "Company", items: ["Our Approach", "Senior Advisors", "Careers", "Contact"] },
    { h: "Resources", items: ["NY Regulatory Guide", "NCQA 2025 Changes", "Time-to-Bill Calculator", "Discovery Call"] },
  ];
  return (
    <footer className="mk-footer">
      <div className="mk-footer-in">
        <div className="mk-footer-brand">
          <Logo light markPx={34} size={22} />
          <p className="mk-footer-tag">Provider credentialing &amp; enrollment, built for behavioral health. Specialized in the systems New York runs on.</p>
          <div className="mk-footer-badges">
            <span><Icon name="shield-check" size={15} />HIPAA-compliant</span>
            <span><Icon name="map-pin" size={15} />New York, NY</span>
          </div>
        </div>
        <div className="mk-footer-cols">
          {cols.map((c) => (
            <div key={c.h} className="mk-footer-col">
              <h4>{c.h}</h4>
              {c.items.map((i) => <a key={i}>{i}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div className="mk-footer-base">
        <span>© 2026 Varick Health, Inc.</span>
        <span className="mk-footer-legal">Privacy · Terms · BAA · Notice of Privacy Practices</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Wordmark, Logo, Photo, Eyebrow, Header, Footer });