/* PitchIQ — landing shared UI primitives (on window). */

const APP_URL = "/app";

function Icon({ name, size = 18, strokeWidth = 1.9, className = "", style }) {
  const node = (window.lucide && (window.lucide[name] || (window.lucide.icons && window.lucide.icons[name]))) || null;
  if (!node) return null;
  const children = Array.isArray(node) && Array.isArray(node[2]) ? node[2] : (node.children || []);
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className} style={style} aria-hidden="true">
      {children.map((c, i) => {
        const tag = c[0]; const raw = c[1] || {}; const attrs = { key: i };
        for (const k in raw) {
          if (k === "stroke-width") attrs.strokeWidth = raw[k];
          else if (k === "stroke-linecap") attrs.strokeLinecap = raw[k];
          else if (k === "stroke-linejoin") attrs.strokeLinejoin = raw[k];
          else attrs[k] = raw[k];
        }
        return React.createElement(tag, attrs);
      })}
    </svg>
  );
}

function Logo({ size = 22, light }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 9, userSelect: "none" }}>
      <img src="app/assets/logo-mark.svg" alt="" style={{ width: size * 1.3, height: size * 1.3 }} />
      <span style={{ fontFamily: "var(--font-primary)", fontWeight: 900, fontSize: size, letterSpacing: "-0.01em", color: light ? "#fff" : "var(--fg-1)", whiteSpace: "nowrap" }}>
        Evolve Edge<sup style={{ fontSize: "0.46em", fontWeight: 700, verticalAlign: "top", marginLeft: 1, lineHeight: 1 }}>™</sup>
      </span>
    </span>
  );
}

function LBtn({ children, variant = "primary", size = "md", icon, iconRight, href = APP_URL, ...rest }) {
  return (
    <a className={`ld-btn ld-btn--${variant} ld-btn--${size}`} href={href} {...rest}>
      {icon && <Icon name={icon} size={size === "lg" ? 19 : 17} strokeWidth={2.2} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === "lg" ? 19 : 17} strokeWidth={2.2} />}
    </a>
  );
}

// scroll reveal
function Reveal({ children, delay = 0, className = "", as = "div" }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }); }, { threshold: 0.14 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const El = as;
  return <El ref={ref} className={`ld-reveal${seen ? " is-in" : ""} ${className}`} style={{ transitionDelay: seen ? delay + "ms" : "0ms" }}>{children}</El>;
}

function SiteNav() {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <nav className="ld-nav">
      <div className="ld-nav__in">
        <a href={APP_URL} aria-label="Evolve Edge home" onClick={close}><Logo size={20} /></a>
        <div className="ld-nav__links">
          <a href="#how">How it works</a>
          <a href="#why">Why reps win</a>
          <a href="#pricing">Pricing</a>
          <a className="ld-btn ld-btn--ghost ld-btn--sm" href={APP_URL}>Sign in</a>
          <a className="ld-btn ld-btn--primary ld-btn--sm" href={APP_URL}>Start free</a>
        </div>
        <button
          type="button"
          className="ld-nav__toggle"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <Icon name={open ? "X" : "Menu"} size={22} strokeWidth={2.2} />
        </button>
      </div>
      <div className={`ld-nav__sheet${open ? " is-open" : ""}`}>
        <a href="#how" onClick={close}>How it works</a>
        <a href="#why" onClick={close}>Why reps win</a>
        <a href="#pricing" onClick={close}>Pricing</a>
        <a className="ld-btn ld-btn--ghost ld-btn--md" href={APP_URL} onClick={close}>Sign in</a>
        <a className="ld-btn ld-btn--primary ld-btn--md" href={APP_URL} onClick={close}>Start free</a>
      </div>
    </nav>
  );
}

function SiteFooter() {
  return (
    <footer className="ld-footer">
      <div className="ld-wrap ld-footer__in">
        <Logo size={18} />
        <span className="ld-footer__copy">© 2026 Evolve Edge · Your pre-call wingman</span>
        <div className="ld-footer__links">
          <a href={APP_URL}>Product</a>
          <a href="#pricing">Pricing</a>
          <a href="legal/privacy.html">Privacy</a>
          <a href="legal/terms.html">Terms</a>
          <a href="legal/cookies.html">Cookies</a>
          <a href="#" data-cookie-settings onClick={e => e.preventDefault()}>Manage cookies</a>
        </div>
      </div>
    </footer>
  );
}

// the recognizable product mock — a mini Game Day Brief
function BriefMock({ company = "Northwind Freight", fitLabel = "Strong ICP match", floatN = "30s", floatLbl = "to call-ready" }) {
  return (
    <div className="ld-mock">
      <div className="ld-mock__bar">
        <span className="ld-mock__dot" style={{ background: "#ff5f57" }}></span>
        <span className="ld-mock__dot" style={{ background: "#febc2e" }}></span>
        <span className="ld-mock__dot" style={{ background: "#28c840" }}></span>
      </div>
      <div className="ld-mock__head">
        <span className="ld-mock__av">{company.split(" ").map(w => w[0]).slice(0, 2).join("")}</span>
        <span>
          <div className="ld-mock__co">{company}</div>
          <div className="ld-mock__sub">Discovery call · prepped just now</div>
        </span>
        <span className="ld-mock__chip"><Icon name="Target" size={13} strokeWidth={2.4} /> {fitLabel}</span>
      </div>
      <div className="ld-mock__planlabel"><Icon name="Zap" size={14} strokeWidth={2.4} /> 30-second game plan</div>
      <div className="ld-mock__rows">
        <div className="ld-mock__row">
          <div className="ld-mock__k"><Icon name="MessageSquare" size={12} /> Open with</div>
          <div className="ld-mock__v">Reference their new VP of Ops hire, then name the manual-handoff pain before they do.</div>
        </div>
        <div className="ld-mock__row">
          <div className="ld-mock__k"><Icon name="HelpCircle" size={12} /> First question</div>
          <div className="ld-mock__v">“What pushed fixing those handoffs to the top of your list right now?”</div>
        </div>
        <div className="ld-mock__row">
          <div className="ld-mock__k"><Icon name="ShieldAlert" size={12} /> Watch for</div>
          <div className="ld-mock__v">Pricing will come up — lead with payback, not the number.</div>
        </div>
      </div>
      <div className="ld-mock__float" style={{ bottom: -22, left: -26 }}>
        <span className="num">{floatN}</span>
        <span className="ld-mock__floatlbl">{floatLbl}</span>
      </div>
    </div>
  );
}

function StatStrip({ stats }) {
  return (
    <div className="ld-stats">
      {stats.map((s, i) => (
        <div className="ld-stat" key={i}>
          <div className="ld-stat__n">{s.n}</div>
          <div className="ld-stat__l">{s.l}</div>
        </div>
      ))}
    </div>
  );
}

function Quote({ text, name, role, color = "var(--accent)" }) {
  const initials = name.split(" ").map(w => w[0]).slice(0, 2).join("");
  return (
    <div className="ld-quote">
      <p className="ld-quote__q">“{text}”</p>
      <div className="ld-quote__by">
        <span className="ld-quote__av" style={{ background: color }}>{initials}</span>
        <span style={{ textAlign: "left" }}>
          <div className="ld-quote__name">{name}</div>
          <div className="ld-quote__role">{role}</div>
        </span>
      </div>
    </div>
  );
}

function CTABand({ headline, sub, primaryLabel = "Generate your first brief free", fine = "Free to start · no credit card · set up in under a minute" }) {
  return (
    <Reveal className="ld-cta">
      <div style={{ position: "relative", zIndex: 1 }}>
        <h2 className="ld-h2">{headline}</h2>
        <p className="ld-lead" style={{ maxWidth: "52ch", margin: "16px auto 0" }}>{sub}</p>
        <div className="ld-cta__row">
          <a className="ld-btn ld-btn--white ld-btn--lg" href={APP_URL}><Icon name="Sparkles" size={19} strokeWidth={2.2} /> {primaryLabel}</a>
        </div>
        <div className="ld-cta__fine">{fine}</div>
      </div>
    </Reveal>
  );
}

function TrustRow({ label = "Plugs into the tools you already use", items = ["Salesforce", "HubSpot", "Gmail", "Outlook", "Zoom"] }) {
  return (
    <div className="ld-trust">
      <span className="ld-trust__lbl">{label}</span>
      {items.map(it => <span className="ld-trust__item" key={it}><Icon name="Plug" size={15} /> {it}</span>)}
    </div>
  );
}

Object.assign(window, { APP_URL, Icon, Logo, LBtn, Reveal, SiteNav, SiteFooter, BriefMock, StatStrip, Quote, CTABand, TrustRow });