/* global React */
const { useState, useEffect, useRef } = React;

// =========================================================
// Top Nav
// =========================================================
function Nav({ onBook, bookLabel = "Book a discovery call", showAffiliates = true }) {
  const [condensed, setCondensed] = useState(false);
  // Condense the sticky header into a slim bar once the user scrolls off
  // the very top — reclaims vertical space while reading.
  useEffect(() => {
    const onScroll = () => setCondensed(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (condensed ? " nav--condensed" : "")}>
      <div className="nav__inner" style={{ width: "1320px", textAlign: "center", letterSpacing: "0px" }}>
        <a className="nav__brand" href="#top">
          <span className="dot"></span>
          Jay Bansal
        </a>
        <div className="nav__links">
          <a href="#story">Story</a>
          <a href="#wins">Wins</a>
          <a href="#programs">Programs</a>
          <a href="#proof">Proof</a>
          <a href="#about">About</a>
          {showAffiliates &&
          <span className="nav__drop">
            <a href="#" className="nav__drop-trigger" onClick={(e) => e.preventDefault()}>
              Affiliates
              <svg className="nav__drop-caret" viewBox="0 0 10 6" fill="none" aria-hidden="true">
                <path d="M1 1.5l4 3 4-3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
            <div className="nav__drop-menu" role="menu">
              <a href="https://get.junglescout.com/jaysingh4709" target="_blank" rel="noopener noreferrer sponsored">JungleScout</a>
              <a href="https://jingsourcing.com/a/jaybansal" target="_blank" rel="noopener noreferrer sponsored">JingSourcing</a>
              <a href="http://shopify.pxf.io/jayb" target="_blank" rel="noopener noreferrer sponsored">Shopify</a>
              <a href="https://wise.com/invite/irhc/sumeets130" target="_blank" rel="noopener noreferrer sponsored">Wise</a>
              <a href="https://revolut.com/referral/?referral-code=sumeet7h3d!APR1-26-AR-AU-H3&geo-redirect" target="_blank" rel="noopener noreferrer sponsored">Revolut</a>
              <a href="https://hostinger.com/?REFERRALCODE=JLTBANSALATW" target="_blank" rel="noopener noreferrer sponsored">Hostinger</a>
              <a href="https://www.skool.com/signup?ref=2bd8abd81fb148eaa5a4b86b2cce3583" target="_blank" rel="noopener noreferrer sponsored">Skool</a>
              <a href="https://www.xolo.io/ref/SUMSIN1" target="_blank" rel="noopener noreferrer sponsored">Xolo</a>
            </div>
          </span>}
        </div>
        <button className="btn btn--primary" onClick={onBook}>
          {bookLabel}
          <ArrowGlyph />
        </button>
      </div>
    </nav>);

}

function ArrowGlyph() {
  return (
    <svg className="arrow" viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function StarGlyph() {
  return (
    <svg className="star" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
      <path d="M8 1.2l2.06 4.18 4.61.67-3.34 3.25.79 4.59L8 11.72l-4.12 2.17.79-4.59L1.33 6.05l4.61-.67L8 1.2z" />
    </svg>);

}

function WhatsAppGlyph() {
  return (
    <svg className="wa-glyph" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.2 4.79 1.2h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0012.04 2zm0 18.15h-.01c-1.52 0-3.01-.41-4.31-1.18l-.31-.18-3.2.84.85-3.12-.2-.32a8.21 8.21 0 01-1.26-4.36c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 012.41 5.83c0 4.54-3.7 8.24-8.25 8.24zm4.52-6.17c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.42-.14-.01-.31-.01-.48-.01-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z" />
    </svg>);

}

// =========================================================
// Sticky bottom CTA — appears after scrolling past hero
// =========================================================
function StickyCTA({ onBook, bookLabel = "Book a call" }) {
  const [on, setOn] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const h = window.innerHeight;
      const doc = document.documentElement.scrollHeight;
      // Wait until the actual hero is past, not just one viewport of scroll.
      // This matters on mobile, where the hero is taller than the viewport,
      // and the avail bar at the bottom of the hero would get covered by
      // the sticky CTA if we triggered on viewport-height alone.
      const hero = document.getElementById("top");
      const heroBottom = hero ? hero.getBoundingClientRect().bottom + y : h * 0.9;
      setOn(y > heroBottom - 40 && y < doc - h * 1.4);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"sticky-cta" + (on ? " is-on" : "")}>
      <div className="sticky-cta__avatar">
        <img src="assets/jay-avatar.png" alt="Jay" style={{ margin: "0px" }} />
      </div>
      <div className="sticky-cta__copy">
        <strong>Talk to Jay</strong>
        <span>30-min discovery · no pitch</span>
      </div>
      <button className="btn btn--primary sticky-cta__book" onClick={onBook}>
        {bookLabel} <ArrowGlyph />
      </button>
      <a
        className="btn btn--primary sticky-cta__wa"
        href="https://wa.me/64272255529?text=Hi%20Jay%20%E2%80%94%20just%20read%20through%20your%20site%20and%20it%20really%20landed.%20I%20want%20my%20time%20back%2C%20and%20I'd%20like%20an%20honest%20chat%20about%20whether%20this%20is%20my%20way%20out."
        target="_blank"
        rel="noopener"
        onClick={() => {
          /* Google Ads — WhatsApp Click conversion (mobile floating button) */
          if (typeof gtag === "function") {
            gtag('event', 'conversion', { 'send_to': 'AW-757764531/ijKzCMvGo70cELOjqukC' });
          }
        }}>
        <WhatsAppGlyph /> Message Jay on WhatsApp
      </a>
    </div>);

}

// =========================================================
// Reveal-on-scroll wrapper
// =========================================================
function Reveal({ children, as = "div", delay = 0, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => el.classList.add("is-in"), delay);
          io.disconnect();
        }
      },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + (rest.className || "")} {...rest}>
      {children}
    </Tag>);

}

Object.assign(window, { Nav, StickyCTA, Reveal, ArrowGlyph, StarGlyph, WhatsAppGlyph });