/* hermon-sections.jsx — page sections
   globals: Icon, Avatar, CountUp, MiniDash, Leaderboard, Reminders, Commissions, BRANDS, INTEGRATIONS */

const LOGO = "assets/hermon-logo.png";

/* ---------------- Nav ---------------- */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const onScroll = ()=> setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive:true }); onScroll();
    return ()=> window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"nav"+(scrolled?" scrolled":"")}>
      <div className="wrap nav__inner">
        <a className="nav__logo" href="#top"><img src={LOGO} 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>
          <a className="nav__link" href="#results">Customers</a>
        </nav>
        <div className="nav__spacer"></div>
        <div className="nav__actions">
          <a className="nav__signin" href="#demo">Sign in</a>
          <a className="btn btn--primary btn--sm" href="#demo">Book a demo</a>
        </div>
      </div>
    </header>
  );
}

/* ---------------- Social proof + stats ---------------- */
function SocialProof() {
  const marks = [
    { nm:"CashSwipe",            st:{fontWeight:800, letterSpacing:'-.02em'} },
    { nm:"Wealth Kings",         st:{fontFamily:'Georgia, serif', fontWeight:700, fontStyle:'italic'} },
    { nm:"Millionaire Commerce", st:{fontWeight:700, letterSpacing:'.06em', textTransform:'uppercase', fontSize:'.9em'} },
    { nm:"Rocket Leads",         st:{fontWeight:800, letterSpacing:'-.03em'} },
    { nm:"ZTH Capital",          st:{fontFamily:'Georgia, serif', fontWeight:700, letterSpacing:'.02em'} },
    { nm:"Founder Download",     st:{fontWeight:700, letterSpacing:'-.01em'} },
    { nm:"Faceless Education",   st:{fontWeight:800, textTransform:'lowercase', letterSpacing:'-.02em'} },
    { nm:"The Bitcoin Family",   st:{fontFamily:'Georgia, serif', fontWeight:700, fontStyle:'italic'} },
  ];
  const row = marks.map((b,i)=>(<span className="lmq__item" key={i} style={b.st}>{b.nm}</span>));
  return (
    <section className="proof section--tight">
      <div className="wrap">
        <div className="proof__head reveal balance">The operating system behind today's highest-performing coaching &amp; agency teams.</div>
      </div>
      <div className="lmq reveal" data-d="1" aria-label="Customer logos">
        <div className="lmq__track">
          <div className="lmq__set">{row}</div>
          <div className="lmq__set" aria-hidden="true">{row}</div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Problem ---------------- */
function Problem() {
  const pains = [
    { ic:"ghost",  t:"Deals fall through the cracks", d:"Leads scattered across DMs, inboxes and three spreadsheets. Follow-ups get forgotten and warm money goes cold." },
    { ic:"alert",  t:"No real-time visibility", d:"Managers fly blind until month-end. By the time the numbers land, the calls that mattered are already lost." },
    { ic:"unplug", t:"Handoffs lose the context", d:"Setter to closer to delivery: notes, recordings and next steps vanish at every handoff in the chain." },
    { ic:"split",  t:"Commission becomes a fight", d:"Reconciling Stripe, Mollie and Whop by hand turns every payout into a spreadsheet argument." },
  ];
  return (
    <section className="section problem">
      <div className="wrap prob-grid">
        <div>
          <div className="eyebrow reveal"><span className="dot"></span>The reality today</div>
          <h2 className="h2 reveal pretty" data-d="1" style={{marginTop:16, maxWidth:'17ch'}}>High-ticket teams are scaling on duct tape.</h2>
          <p className="lead reveal pretty" data-d="1" style={{marginTop:16, maxWidth:'46ch'}}>You're doing 7 and 8 figures with a stack that was never built to work together. The cost isn't just chaos — it's revenue you'll never see and clients you'll never keep.</p>
          <div style={{marginTop:30}}>
            {pains.map((p,i)=>{ const Ic = Icon[p.ic];
              return (
                <div className="pain reveal" data-d={i+1} key={i}>
                  <div className="pain__ic"><Ic/></div>
                  <div><div className="pain__t">{p.t}</div><div className="pain__d">{p.d}</div></div>
                </div>
              );})}
          </div>
        </div>
        <div className="mess reveal" data-d="2">
          <div className="mess__note" style={{top:'4%', left:'2%', width:'74%', transform:'rotate(-2.5deg)', zIndex:3}}>
            <div className="ttl"><Icon.bars width={13} height={13}/> closers_pipeline_FINAL_v4.xlsx</div>
            <table className="mess__sheet">
              <tbody>
                <tr><td>Lead</td><td>Stage</td><td>$</td><td>Paid?</td></tr>
                <tr><td>C. Dunbar</td><td>Call?</td><td className="err">#REF!</td><td>??</td></tr>
                <tr><td>B. Rossi</td><td>Sent</td><td>$24k</td><td className="err">—</td></tr>
                <tr><td>O. Pierce</td><td>?</td><td className="err">#N/A</td><td>no</td></tr>
              </tbody>
            </table>
          </div>
          <div className="mess__note" style={{top:'40%', right:'0%', width:'52%', transform:'rotate(3deg)', background:'var(--amber-soft)', borderColor:'#EAD9B4', zIndex:5}}>
            <div style={{fontWeight:800, fontSize:'.92rem', color:'var(--amber)'}}>where's the signed contract for Bianca?? 😵</div>
            <div style={{fontSize:'.74rem', color:'var(--ink-2)', marginTop:6}}>Slack · 11:47pm</div>
          </div>
          <div className="mess__note" style={{bottom:'6%', left:'8%', width:'58%', transform:'rotate(-1.5deg)', zIndex:4}}>
            <div className="ttl"><Icon.card width={13} height={13}/> Stripe · Mollie · Whop</div>
            <div style={{display:'flex', gap:8, alignItems:'center'}}>
              <span className="deal__tag tag--won">$28k Stripe</span>
              <span className="deal__tag tag--warm">€9k Mollie</span>
              <span className="deal__tag tag--hot">?? Whop</span>
            </div>
            <div style={{fontSize:'.74rem', color:'var(--rose)', fontWeight:700, marginTop:8}}>3 payouts don't reconcile</div>
          </div>
          <div className="mess__note" style={{top:'-2%', right:'4%', width:'30%', transform:'rotate(4deg)', background:'var(--rose-soft)', borderColor:'#F0C9D8', zIndex:6, padding:'10px 12px'}}>
            <div style={{fontWeight:800, fontSize:'.8rem', color:'var(--rose)'}}>14 missed follow-ups</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Solution: lifecycle flow ---------------- */
const STEPS = [
  { ic:"users",       t:"Lead",          d:"Captured, deduped and routed instantly.", tool:"Meta Ads", c:"#0A77F2", phase:"acquire" },
  { ic:"calendar",    t:"Appointment",   d:"Auto-booked, confirmed and reminded.",       tool:"Calendly", c:"#0A6CFF", phase:"acquire" },
  { ic:"contract",    t:"Contract",      d:"Sent, e-signed and tracked.",            tool:"eSignatures", c:"#1F9D6B", phase:"acquire" },
  { ic:"card",        t:"Payment",       d:"Charged and reconciled everywhere.",      tool:"Stripe · Mollie", c:"#635BFF", phase:"acquire" },
  { ic:"checkCircle", t:"Closed",        d:"Won and handed to delivery.",        tool:"Automatic", c:"#6D4AE6", phase:"acquire" },
  { ic:"layers",      t:"Delivery",      d:"Onboarding, tasks and milestones on track.", tool:"Tasks · Milestones", c:"#2A8BF2", phase:"deliver" },
];
function Solution() {
  const ref = React.useRef(null);
  const [lit, setLit] = React.useState(-1);
  const [fill, setFill] = React.useState(false);
  React.useEffect(()=>{
    const el = ref.current; if(!el) return;
    let done = false;
    const start = ()=>{
      if (done) return; done = true;
      setFill(true);
      STEPS.forEach((_,i)=> setTimeout(()=> setLit(i), 400 + i*560));
    };
    const check = ()=>{
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const r = el.getBoundingClientRect();
      if (r.top < vh * 0.78 && r.bottom > 0) start();
    };
    let io;
    try {
      io = new IntersectionObserver((es)=>{ es.forEach(e=>{ if(e.isIntersecting) start(); }); }, { threshold: 0.4 });
      io.observe(el);
    } catch(e){}
    check();
    window.addEventListener('scroll', check, { passive:true });
    return ()=>{ io && io.disconnect(); window.removeEventListener('scroll', check); };
  }, []);
  const n = STEPS.length, edge = 50 / n;
  return (
    <section className="section" id="solution" ref={ref}>
      <div className="wrap">
        <div className="shead center reveal">
          <div className="eyebrow" style={{justifyContent:'center'}}><span className="dot"></span>One connected lifecycle</div>
          <h2 className="h2 balance">From first touch to client success, on a single rail.</h2>
          <p className="lead balance">Every stage flows into the next automatically. No re-keying, no dropped balls — a clean line from the first opt-in to a delivered, successful client that everyone can see.</p>
        </div>
        <div className="flow flow--6 reveal" data-d="1" style={{marginTop:56}}>
          <div className="flow__line" style={{left: edge+'%', right: edge+'%'}}><i className={fill?"anim-x":""} style={{width: fill?'100%':'0%'}}></i></div>
          {fill && <div className="flow__pulse" style={{left: `calc(${edge}% + ${(Math.max(lit,0)/(n-1))*(100-2*edge)}%)`, transition:'left .56s var(--ease)'}}></div>}
          {STEPS.map((s,i)=>{ const Ic = Icon[s.ic];
            return (
              <div className={"fstep"+(lit>=i?" lit":"")+(s.phase==="deliver"?" fstep--deliver":"")} key={i}>
                <div className="fstep__num">{i+1}</div>
                <div className="fstep__node"><Ic/></div>
                <div className="fstep__t">{s.t}</div>
                <div className="fstep__d">{s.d}</div>
                <div className="fstep__tool"><span className="d" style={{background:s.c}}></span>{s.tool}</div>
              </div>
            );})}
        </div>
        <p className="flow__note reveal" data-d="2">The tools shown are examples — Hermon connects to whatever your team already runs on, and works the same if you swap any of them out.</p>
      </div>
    </section>
  );
}

/* ---------------- Integrations ---------------- */
function Integrations() {
  const feats = [
    { ic:"sync", t:"Two-way real-time sync", d:"No nightly batch, no stale data — changes reflect both ways instantly." },
    { ic:"message", t:"Instant Slack alerts", d:"Every booking, signature and payment, pinged to your team as it happens." },
    { ic:"zap", t:"Full API & webhooks", d:"Build on top of Hermon with a REST API and signed event webhooks." },
  ];
  return (
    <section className="section" id="integrations" style={{background:'var(--surface-2)'}}>
      <div className="wrap intg2">
        <div className="intg2__l">
          <div className="eyebrow reveal"><span className="dot"></span>Integrations</div>
          <h2 className="h2 reveal pretty" data-d="1" style={{marginTop:16, maxWidth:'15ch'}}>Every tool you run on, in one real-time hub.</h2>
          <p className="lead reveal pretty" data-d="1" style={{marginTop:16, maxWidth:'46ch'}}>Hermon connects the systems your team already uses and keeps them in lockstep. A payment, a booking, a signature — pulled in and reflected across your pipeline the instant it happens.</p>
          <div className="intg2__feats reveal" data-d="2">
            {feats.map((f,i)=>{ const Ic = Icon[f.ic];
              return (
                <div className="ifeat" key={i}>
                  <span className="ifeat__ic"><Ic width={20} height={20}/></span>
                  <div>
                    <div className="ifeat__t">{f.t}</div>
                    <div className="ifeat__d">{f.d}</div>
                  </div>
                </div>
              );})}
          </div>
          <div className="chip reveal" data-d="2" style={{marginTop:28}}>
            <span className="ping"><i></i></span> All systems synced · updated 2s ago
          </div>
        </div>

        <div className="intg2__r reveal" data-d="2">
          <IntegrationFunnel/>
        </div>
      </div>

      <div className="wrap" style={{marginTop:'clamp(40px,5vw,68px)'}}>
        <ApiWebhooks/>
      </div>
    </section>
  );
}

/* ---------------- API & Webhooks panel ---------------- */
function ApiWebhooks() {
  const tokens = [
    { k:'"event"', v:'"deal.closed"', c:'#34D399' },
    { k:'"contact"', v:'"Amara Khan"', c:'#34D399' },
    { k:'"amount"', v:'28000', c:'#F0A868' },
    { k:'"currency"', v:'"EUR"', c:'#34D399' },
    { k:'"closer"', v:'"Marcus"', c:'#34D399' },
    { k:'"stage"', v:'"Closed"', c:'#34D399' },
  ];
  return (
    <div className="apiw reveal">
      <div className="apiw__l">
        <div className="eyebrow"><span className="dot"></span>Developer platform</div>
        <h3 className="h3" style={{fontSize:'clamp(1.5rem,2.4vw,2rem)', marginTop:14, letterSpacing:'-.03em'}}>A REST API and webhooks for everything Hermon does.</h3>
        <p className="body" style={{marginTop:14, fontSize:'1rem', maxWidth:'44ch'}}>Subscribe to real-time events and push Hermon data anywhere, your data warehouse, a custom dashboard, an internal Slack bot. Every lifecycle moment fires a signed webhook the instant it happens.</p>
        <div className="apiw__events">
          {WEBHOOK_EVENTS.map((e,i)=>(
            <span className="apiw__evt" key={i}><span className="apiw__evtdot"></span>{e}</span>
          ))}
        </div>
        <div className="apiw__meta">
          <span><Icon.webhook width={16} height={16}/> Signed payloads</span>
          <span><Icon.sync width={16} height={16}/> Auto-retry with backoff</span>
          <span><Icon.shield width={16} height={16}/> Scoped API keys</span>
        </div>
      </div>
      <div className="apiw__r">
        <div className="codewin">
          <div className="codewin__bar">
            <span className="codewin__dots"><i></i><i></i><i></i></span>
            <span className="codewin__title"><Icon.webhook width={13} height={13}/> POST /webhooks/hermon</span>
            <span className="codewin__status"><span className="d"></span>200 OK</span>
          </div>
          <pre className="codewin__body">
<span className="cl"><span className="cm">{"// deal.closed → your endpoint"}</span></span>
<span className="cl"><span className="cp">{"{"}</span></span>
{tokens.map((t,i)=>(
  <span className="cl" key={i}>{"  "}<span className="ck">{t.k}</span><span className="cpun">: </span><span style={{color:t.c}}>{t.v}</span>{i<tokens.length-1?<span className="cpun">,</span>:null}</span>
))}
<span className="cl"><span className="cp">{"}"}</span></span>
<span className="cl"></span>
<span className="cl"><span className="cok">✓ delivered</span><span className="cmut"> in 142ms · attempt 1/1</span></span>
          </pre>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Features ---------------- */
function Features() {
  return (
    <section className="section" id="features">
      <div className="wrap">
        <div className="shead center reveal" style={{marginBottom:56}}>
          <div className="eyebrow" style={{justifyContent:'center'}}><span className="dot"></span>Built for the whole journey</div>
          <h2 className="h2 balance">Everything your team needs, from first call to client success.</h2>
        </div>
        <div className="feat">
          <article className="fcard span7 reveal">
            <div className="fcard__body">
              <div className="fcard__eye">Dashboards &amp; metrics</div>
              <h3 className="fcard__t">Numbers that update themselves</h3>
              <p className="fcard__d">New leads, booking rate, cash collected, close and show rates, all live, accurate, and pulled straight from your connected tools. No more Monday-morning spreadsheet exports.</p>
            </div>
            <div className="fcard__viz"><FeatureDash/></div>
          </article>

          <article className="fcard span5 reveal" data-d="1">
            <div className="fcard__body">
              <div className="fcard__eye">AI notes &amp; outcomes</div>
              <h3 className="fcard__t">Calls that log themselves</h3>
              <p className="fcard__d">Hermon writes the call summary and suggests the right status and outcome. Closers just confirm and move on, so nothing slips and every record stays clean.</p>
            </div>
            <div className="fcard__viz"><AINotesReal/></div>
          </article>

          <article className="fcard span5 reveal" data-d="1">
            <div className="fcard__body">
              <div className="fcard__eye">Custom views</div>
              <h3 className="fcard__t">Your CRM, your way</h3>
              <p className="fcard__d">Save personal or shared views with the filters your team works by, from new leads to call-back requests to financially qualified, one click away for everyone.</p>
            </div>
            <div className="fcard__viz"><ViewsReal/></div>
          </article>

          <article className="fcard span7 reveal">
            <div className="fcard__body">
              <div className="fcard__eye">Leaderboard</div>
              <h3 className="fcard__t">A leaderboard closers refresh all day</h3>
              <p className="fcard__d">Real-time ranking by role: setters, triagers and closers, so the floor stays competitive and managers see exactly who's carrying the number.</p>
            </div>
            <div className="fcard__viz"><LeaderboardReal rows={5} compact={true}/></div>
          </article>

          <article className="fcard span12 reveal">
            <div className="fcard__body">
              <div className="fcard__eye">Work queue</div>
              <h3 className="fcard__t">The work that protects every deal, in one queue</h3>
              <p className="fcard__d">Today's appointments, follow-ups, payments at risk, contracts awaiting signature and missing outcomes — surfaced and counted the moment they need attention, so nothing falls through and your data stays accurate.</p>
            </div>
            <div className="fcard__viz"><WorkQueueReal/></div>
          </article>

          <article className="fcard span12 purple reveal">
            <div className="fcard__body">
              <div className="fcard__eye">Follow-ups &amp; reminders</div>
              <h3 className="fcard__t">Never let a warm lead go cold</h3>
              <p className="fcard__d">Hermon watches every deal and nudges the right closer at the right moment: missing outcomes, contracts awaiting signature, payments at risk, all surfaced.</p>
            </div>
            <div className="fcard__viz"><Reminders/></div>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Testimonial / results ---------------- */
function Results() {
  return (
    <section className="section" id="results" style={{background:'var(--surface-2)'}}>
      <div className="wrap">
        <div className="testi reveal">
          <div className="testi__main">
            <div className="eyebrow"><span className="dot"></span>The results</div>
            <p className="testi__quote pretty" style={{marginTop:22}}>“We went from <span className="hl">guessing on Mondays</span> to knowing in real time. Hermon paid for itself in the first month. Our closers finally trust the numbers, and so do I.”</p>
            <div className="testi__by">
              <Avatar name="Daniela Cruz" hue={324}/>
              <div>
                <div className="nm">Daniela Cruz</div>
                <div className="rl">Head of Sales · Apex Coaching</div>
              </div>
            </div>
          </div>
          <div className="testi__side">
            <div className="tres"><div className="tres__v">+<CountUp to={41} dur={1500}/>%</div><div className="tres__l">close rate in 90 days</div></div>
            <div className="tres"><div className="tres__v"><CountUp to={3.2} dur={1500} decimals={1}/>x</div><div className="tres__l">faster pipeline visibility</div></div>
            <div className="tres"><div className="tres__v"><CountUp to={11} dur={1500}/> hrs</div><div className="tres__l">saved per closer, every week</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Closing CTA ---------------- */
function ClosingCTA() {
  return (
    <section className="section" id="demo">
      <div className="wrap">
        <div className="fcta reveal">
          <div className="glow fcta__glow"></div>
          <div className="fcta__grid"></div>
          <div className="eyebrow eyebrow--ondark" style={{justifyContent:'center', position:'relative', zIndex:2}}><span className="dot"></span>Get started</div>
          <h2 className="display balance" style={{marginTop:18, fontSize:'clamp(2.3rem,5vw,3.8rem)'}}>Run your entire client lifecycle on one source of truth.</h2>
          <p className="lead fcta__sub balance" style={{margin:'20px auto 0', maxWidth:'52ch'}}>See your real pipeline inside Hermon. Book a 20-minute demo and we'll map your stack from first opt-in to client success live on the call.</p>
          <div className="fcta__btns" style={{marginTop:34}}>
            <a className="btn btn--primary btn--lg" href={window.DEMO_URL} target="_blank" rel="noopener noreferrer">Book a demo <Icon.arrow/></a>
            <a className="btn btn--onlight-ghost btn--lg" href={window.DEMO_URL} target="_blank" rel="noopener noreferrer">Talk to sales</a>
          </div>
          <div style={{position:'relative', zIndex:2, marginTop:22, display:'flex', gap:20, justifyContent:'center', flexWrap:'wrap', color:'rgba(255,255,255,.6)', fontSize:'.88rem', fontWeight:600}}>
            <span style={{display:'inline-flex', gap:7, alignItems:'center'}}><Icon.check width={15} height={15}/> Live in under a week</span>
            <span style={{display:'inline-flex', gap:7, alignItems:'center'}}><Icon.check width={15} height={15}/> No engineering lift</span>
            <span style={{display:'inline-flex', gap:7, alignItems:'center'}}><Icon.check width={15} height={15}/> White-glove onboarding</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const cols = [
    { h:"Product", links:["Pipeline","Dashboards","Delivery","Leaderboard","Commissions","Integrations"] },
    { h:"Company", links:["About","Customers","Careers","Contact"] },
    { h:"Resources", links:["Help center","API docs","Security","Status"] },
  ];
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot__grid">
          <div>
            <img className="foot__logo" src={LOGO} alt="herMon"/>
            <p className="body" style={{maxWidth:'30ch'}}>The client lifecycle platform built for 7- and 8-figure coaching and agency teams.</p>
            <div className="foot__social" style={{marginTop:18}}>
              <a href="#"><Icon.twitter width={17} height={17}/></a>
              <a href="#"><Icon.linkedin width={17} height={17}/></a>
              <a href="#"><Icon.youtube width={17} height={17}/></a>
            </div>
          </div>
          {cols.map((c,i)=>(
            <div className="foot__col" key={i}>
              <h5>{c.h}</h5>
              {c.links.map((l,j)=><a href="#" key={j}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="foot__bot">
          <span>© 2026 Hermon. All rights reserved.</span>
          <span style={{display:'flex', gap:20}}><a href="#">Privacy</a><a href="#">Terms</a><a href="#">DPA</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, SocialProof, Problem, Solution, Integrations, Features, Results, ClosingCTA, Footer });