/* 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>
  );
}

/* ---------------- Hermon AI in Slack ---------------- */
const AI_CHAT = [
  { who:"user", name:"Daniela Cruz", init:"DC", bg:"hsl(324 52% 44%)", t:"9:41 AM",
    txt:"how much cash did we collect this week?" },
  { who:"bot", t:"9:41 AM",
    txt:(<><b>€86,400</b> collected this week across <b>12 payments</b>. That is <b>61%</b> of the €142,000 booked, and <b>+18%</b> on last week. Biggest single payment: <b>€14,000</b> on the Scale program, closed by Marcus.</>) },
  { who:"user", name:"Daniela Cruz", init:"DC", bg:"hsl(324 52% 44%)", t:"9:42 AM",
    txt:"and the pipeline for the rest of the month?" },
  { who:"bot", t:"9:42 AM",
    txt:(<><b>23 sales calls</b> booked through the 31st and <b>€196,500</b> in open contract value. <b>6 contracts</b> worth <b>€87,500</b> are out for signature. Show rate this week is holding at <b>74%</b>.</>) },
  { who:"user", name:"Sam Ellis", init:"SE", bg:"hsl(214 60% 46%)", t:"4:15 PM",
    txt:"any payments I should worry about before the weekend?" },
  { who:"bot", t:"4:15 PM",
    txt:(<><b>3 need attention:</b></>),
    list:[
      (<>A <b>€5,400</b> Stripe charge failed yesterday. Card declined, retry is scheduled for tomorrow.</>),
      (<><b>2 installments</b> totalling <b>€7,900</b> are more than 5 days overdue.</>),
    ],
    tail:(<>Client details are in the thread.</>) },
];

function SlackDemo() {
  const ref = React.useRef(null);
  const [n, setN] = React.useState(0);
  const [typingIdx, setTypingIdx] = React.useState(-1);
  React.useEffect(()=>{
    const el = ref.current; if(!el) return;
    const finish = ()=>{ setN(AI_CHAT.length); setTypingIdx(-1); };
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { finish(); return; }
    let done = false;
    const timers = [];
    const start = ()=>{
      if (done) return; done = true;
      const EV = [
        [300,  ()=> setN(1)],
        [800,  ()=> setTypingIdx(1)],
        [1700, ()=>{ setN(2); setTypingIdx(-1); }],
        [2500, ()=> setN(3)],
        [3000, ()=> setTypingIdx(3)],
        [3900, ()=>{ setN(4); setTypingIdx(-1); }],
        [4700, ()=> setN(5)],
        [5200, ()=> setTypingIdx(5)],
        [6100, ()=>{ setN(6); setTypingIdx(-1); }],
      ];
      EV.forEach(([t,fn])=> timers.push(setTimeout(fn, t)));
    };
    const check = ()=>{
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const r = el.getBoundingClientRect();
      if (r.top < vh * 0.82 && 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 });
    const safety = setTimeout(finish, 9000);
    return ()=>{ io && io.disconnect(); window.removeEventListener('scroll', check); timers.forEach(clearTimeout); clearTimeout(safety); };
  }, []);
  return (
    <div className="aisec__win" ref={ref}>
      <div className="slk__head">
        <span className="slk__hash">#</span>
        <span className="slk__ch">leadership</span>
        <span className="slk__live"><span className="d"></span>Hermon connected</span>
      </div>
      <div className="slk__msgs">
        {AI_CHAT.map((m,i)=>{
          const on = i < n || i === typingIdx;
          const typing = m.who === "bot" && i === typingIdx && i >= n;
          return (
            <div className={"slk__msg" + (on ? " on" : "")} key={i}>
              {m.who === "bot"
                ? <span className="slk__bot">h</span>
                : <span className="slk__usr" style={{background:m.bg}}>{m.init}</span>}
              <div style={{minWidth:0}}>
                <div className="slk__by">
                  {m.who === "bot" ? <>Hermon <span className="slk__app">APP</span></> : m.name}
                  <span className="slk__t">{m.t}</span>
                </div>
                {typing
                  ? <div className="slk__dots"><i></i><i></i><i></i></div>
                  : <div className="slk__txt">
                      {m.txt}
                      {m.list && <ul className="slk__list">{m.list.map((li,j)=><li key={j}>{li}</li>)}</ul>}
                      {m.tail && <div style={{marginTop:6}}>{m.tail}</div>}
                    </div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function AskHermon() {
  const feats = [
    { ic:"sparkle", t:"Answers, not exports", d:"No dashboard digging, no CSV pulls. Ask in plain language and get the exact figure with the context behind it." },
    { ic:"sync", t:"Grounded in live data", d:"Every answer is computed from the same records your team works in. If Hermon says €86,400, that is what hit the bank." },
    { ic:"users", t:"One brain for the whole team", d:"Owners check cash collected, sales leads check the floor, delivery checks who is at risk. Same bot, same source of truth, for coaching and agency teams alike." },
  ];
  return (
    <section className="section" id="ai">
      <div className="wrap aisec">
        <div className="aisec__copy">
          <div className="eyebrow reveal"><span className="dot"></span>Hermon AI</div>
          <h2 className="h2 reveal pretty" data-d="1" style={{marginTop:16, maxWidth:'16ch'}}>Ask your business anything, right in Slack.</h2>
          <p className="lead reveal pretty" data-d="1" style={{marginTop:16, maxWidth:'46ch'}}>Hermon's AI operator is wired into every lead, appointment, contract and payment in your business. Ask a question in Slack and get the real number back in seconds, computed from live data, not last week's export.</p>
          <div className="aisec__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> Connected to your live pipeline · answers in seconds
          </div>
        </div>
        <div className="aisec__vis reveal" data-d="2">
          <SlackDemo/>
        </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, AskHermon, Results, ClosingCTA, Footer });