/* hermon-hero-v2.jsx — Cluely-style floating pill nav + centered layered hero
   globals: Icon, Avatar, avatarURI, CountUp, PipelineApp, MiniDash, INTEGRATIONS */

const LOGO_V2 = "assets/hermon-logo.png";
const DEMO_URL = "https://calendly.com/abel-hermon/demo?utm_source=website";
window.DEMO_URL = DEMO_URL;

/* ---------------- Floating pill nav ---------------- */
function NavV2() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(()=>{
    const onScroll = ()=> setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive:true }); onScroll();
    return ()=> window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(()=>{
    document.body.style.overflow = open ? 'hidden' : '';
    return ()=>{ document.body.style.overflow = ''; };
  }, [open]);
  const close = ()=> setOpen(false);
  return (
    <header className={"nav"+(scrolled?" scrolled":"")+(open?" nav--open":"")}>
      <div className="wrap" style={{padding:'0 16px'}}>
        <div className="nav__inner">
          <a className="nav__logo" href="#top" onClick={close}><img src={LOGO_V2} alt="herMon"/></a>
          <nav className="nav__links">
            <a className="nav__link" href="#solution">Product</a>
            <a className="nav__link" href="#integrations">Integrations</a>
            <a className="nav__link" href="#features">Features</a>
          </nav>
          <div className="nav__spacer"></div>
          <div className="nav__actions">
            <a className="nav__signin" href="https://app.hermon.io">Sign in</a>
            <a className="btn btn--primary btn--sm nav__cta" href={DEMO_URL} target="_blank" rel="noopener noreferrer">Book a demo</a>
            <button className="nav__burger" aria-label="Menu" aria-expanded={open} onClick={()=>setOpen(o=>!o)}>
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </div>
      <div className="nav__mobile" onClick={close}>
        <a className="nav__mlink" href="#solution">Product</a>
        <a className="nav__mlink" href="#integrations">Integrations</a>
        <a className="nav__mlink" href="#features">Features</a>
        <div className="nav__mdiv"></div>
        <a className="nav__mlink" href="https://app.hermon.io">Sign in</a>
        <a className="btn btn--primary btn--block" href={DEMO_URL} target="_blank" rel="noopener noreferrer" style={{marginTop:8}}>Book a demo</a>
      </div>
    </header>
  );
}

/* ---------------- glassy hero chips ---------------- */
function GChip({ ic, icbg, iccolor, l, v, style }) {
  const Ic = Icon[ic];
  return (
    <div className="gchip floaty" style={style}>
      <div className="ic" style={{background: icbg, color: iccolor}}><Ic width={19} height={19}/></div>
      <div>
        <div className="l">{l}</div>
        <div className="v">{v}</div>
      </div>
    </div>
  );
}

/* ---------------- Centered layered hero ---------------- */
const HEAD_V2 = <>From first opt-in to <span className="grad-ink">client success</span>, on one platform</>;
const SUB_V2 = "Hermon runs your entire client lifecycle, from the first opt-in to a delivered, successful client, in one connected system that syncs in real time with the tools your team already uses.";

function HeroV2({ motion = true, accentCta = false, visual = "dashboard" }) {
  return (
    <div className="heroV2">
      <a className="announce reveal" href="#solution">
        <span className="tagnew">New</span>
        <span>Introducing <b>Delivery</b> &mdash; onboarding, tasks &amp; milestones</span>
        <span className="arr"><Icon.arrow width={16} height={16}/></span>
      </a>

      <h1 className="display reveal balance" data-d="1" style={{marginTop:26}}>{HEAD_V2}</h1>
      <p className="lead reveal balance" data-d="1" style={{marginTop:24}}>{SUB_V2}</p>

      <div className="hero__cta reveal" data-d="2" style={{justifyContent:'center', marginTop:32}}>
        <a className={"btn btn--lg "+(accentCta?"btn--accent":"btn--primary")} href={DEMO_URL} target="_blank" rel="noopener noreferrer">Book a demo <Icon.arrow/></a>
      </div>

      <div className="hero__trust reveal" data-d="3" style={{justifyContent:'center'}}>
        <div className="avstack">
          {["paul-alex","kim-chiaretti","omar-hafes","laura-quartel","levi-van-waarden"].map((p,i)=>
            <img key={i} src={"assets/team/"+p+".jpg"} alt=""/>)}
        </div>
        <div className="txt"><span className="stars">★★★★★</span> &nbsp;Trusted by <b>50+</b> coaching &amp; agency teams</div>
      </div>

      {/* layered product stage */}
      {visual === "feed" ? <FeedStage/> : visual === "pipeline" ? <PipelineStage/> : null}

    </div>
  );
}

Object.assign(window, { NavV2, HeroV2 });