// Page-specific content for Companies, Sales Reps, Verification, Pricing, Contact

function useIsMobile(bp){ bp=bp||768; const [m,setM]=React.useState(window.innerWidth<=bp); React.useEffect(()=>{const h=()=>setM(window.innerWidth<=bp);window.addEventListener("resize",h);return()=>window.removeEventListener("resize",h)},[bp]);return m;}

// ============ COMPANIES ============
function CompaniesHero(){
  const isMobile = useIsMobile();
  return (
    <section className="hero">
      <div className="wrap">
        <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:isMobile?24:40,flexWrap:"wrap"}}>
          <span className="pill"><span className="dot live"></span>For hiring teams</span>
          <span className="pill">Avg. 5.1 days to first interview</span>
        </div>
        <h1>Hire closers <em>who show their receipts.</em></h1>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:isMobile?32:48,alignItems:"end"}}>
          <div>
            <p className="sub">Replace retained searches, five-figure recruiter fees, and six-month pipelines. Post a commission-only role and meet pre-verified reps in days.</p>
            <div style={{display:"flex",gap:12,flexWrap:"wrap",marginBottom:32,flexDirection:isMobile?"column":"row"}}>
              <a href="https://app.clozer.com/signup" className="btn btn-primary" style={isMobile?{justifyContent:"center"}:{}}>Post your first role <span className="arrow">→</span></a>
              <a href="https://www.clozer.com/verification" className="btn btn-ghost" style={isMobile?{justifyContent:"center"}:{}}>See how verification works</a>
            </div>
          </div>
          {!isMobile && <div><ProductPeekCompany/></div>}
        </div>
      </div>
      <div className="wrap" style={{marginTop:isMobile?40:64}}>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}}>
          {[
            {n:"4,200+",l:"verified closers"},
            {n:"$29",l:"one-time listing"},
            {n:"5.1 days",l:"avg. to first interview"},
            {n:"96%",l:"company satisfaction"},
          ].map((t,i)=>(
            <div key={i} style={{padding:isMobile?"16px":"20px 24px",borderRight:i%2===0?"1px solid var(--line)":"none",borderBottom:i<2?"1px solid var(--line)":"none"}}>
              <div style={{fontFamily:"var(--serif)",fontSize:isMobile?28:44,lineHeight:1,letterSpacing:"-0.02em"}}>{t.n}</div>
              <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--muted)",marginTop:8}}>{t.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ForCompaniesDeep(){
  const isMobile = useIsMobile();
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">Why companies switch</div>
        <h2 className="sectionTitle">Traditional hiring is broken. <em style={{fontStyle:"italic"}}>Commission-only fixes it.</em></h2>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:16}}>
          <div className="card" style={{padding:isMobile?24:36}}>
            <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",color:"var(--muted)",marginBottom:16}}>The old way</div>
            <div style={{display:"grid",gap:16}}>
              {[
                {t:"Retained search", d:"Five-figure retainer. 6-month exclusivity. Still no hire at month 4."},
                {t:"Job boards", d:"200 applications, 95% unqualified. You become the recruiter."},
                {t:"Base + variable AEs", d:"$180k OTE whether they close $0 or $5M. You eat the risk."},
                {t:"LinkedIn spray", d:"Cold DMs, ghosted candidates, zero performance proof."},
              ].map((r,i)=>(
                <div key={i} style={{display:"flex",gap:12,alignItems:"start"}}>
                  <div style={{color:"var(--muted)",fontSize:18,lineHeight:1,flexShrink:0}}>✕</div>
                  <div>
                    <div style={{fontWeight:600,fontSize:15}}>{r.t}</div>
                    <div className="muted" style={{fontSize:14,marginTop:2}}>{r.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{padding:isMobile?24:36,background:"var(--fg)",color:"var(--bg)"}}>
            <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",opacity:0.6,marginBottom:16}}>The Clozer way</div>
            <div style={{display:"grid",gap:16}}>
              {[
                {t:"$29 flat listing", d:"One fee. 90-day listing."},
                {t:"Pre-verified reps only", d:"Employment verified via LinkedIn + references. Manager refs called. Deals confirmed."},
                {t:"Pay only on results", d:"Commission-only means reps only win when you do. Aligned from day one."},
                {t:"Real signal, not spam", d:"Matched by vertical, deal size, and cycle — not keywords."},
              ].map((r,i)=>(
                <div key={i} style={{display:"flex",gap:12,alignItems:"start"}}>
                  <div style={{color:"var(--accent)",fontSize:16,lineHeight:1,fontWeight:700,flexShrink:0}}>✓</div>
                  <div>
                    <div style={{fontWeight:600,fontSize:15}}>{r.t}</div>
                    <div style={{opacity:0.7,fontSize:14,marginTop:2}}>{r.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ROICalculator(){
  const isMobile = useIsMobile();
  const [reps,setReps] = React.useState(3);
  const [retainerK,setRetainerK] = React.useState(30);
  const retained = retainerK * 1000 * reps;
  const clozer = 29 * reps;
  const saved = retained - clozer;
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">ROI calculator</div>
        <h2 className="sectionTitle">See what a <em style={{fontStyle:"italic"}}>retained search</em> really costs you.</h2>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:24,alignItems:"stretch"}}>
          <div className="card" style={{padding:isMobile?24:36}}>
            <div style={{display:"grid",gap:28}}>
              <div>
                <div style={{display:"flex",justifyContent:"space-between",marginBottom:10}}>
                  <label style={{fontSize:13,fontWeight:600}}>Reps to hire</label>
                  <span className="mono" style={{fontSize:13}}>{reps}</span>
                </div>
                <input type="range" min="1" max="10" value={reps} onChange={e=>setReps(+e.target.value)} style={{width:"100%",accentColor:"var(--accent)"}}/>
              </div>
              <div>
                <div style={{display:"flex",justifyContent:"space-between",marginBottom:10,gap:8}}>
                  <label style={{fontSize:13,fontWeight:600}}>Retained search cost <span style={{opacity:0.55,fontWeight:400}}>(per rep)</span></label>
                  <span className="mono" style={{fontSize:13,flexShrink:0}}>${retainerK}k</span>
                </div>
                <input type="range" min="10" max="100" step="5" value={retainerK} onChange={e=>setRetainerK(+e.target.value)} style={{width:"100%",accentColor:"var(--accent)"}}/>
                <div style={{fontSize:11,color:"var(--muted)",marginTop:6}}>Industry average: 25–33% of first-year OTE.</div>
              </div>
              <div style={{paddingTop:20,borderTop:"1px solid var(--line)",display:"grid",gap:10}}>
                <div style={{display:"flex",justifyContent:"space-between",fontSize:14}}>
                  <span className="muted">Retained search</span>
                  <span className="mono" style={{textDecoration:"line-through",color:"var(--muted)"}}>${retained.toLocaleString()}</span>
                </div>
                <div style={{display:"flex",justifyContent:"space-between",fontSize:14}}>
                  <span className="muted">Clozer listing</span>
                  <span className="mono">${clozer.toLocaleString()}</span>
                </div>
              </div>
            </div>
          </div>
          <div className="card" style={{padding:isMobile?24:36,background:"var(--accent)",color:"#fff",display:"flex",flexDirection:"column",justifyContent:"space-between"}}>
            <div>
              <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",opacity:0.85}}>You save</div>
              <div style={{fontFamily:"var(--serif)",fontSize:isMobile?"clamp(48px,12vw,80px)":"clamp(48px,5vw,80px)",lineHeight:1,letterSpacing:"-0.03em",marginTop:12,fontWeight:400,wordBreak:"break-word"}}>
                ${saved.toLocaleString()}
              </div>
              <div style={{fontSize:15,opacity:0.9,marginTop:12}}>
                on hiring fees alone. Before factoring in the salary-vs-commission difference.
              </div>
            </div>
            <a href="https://app.clozer.com/signup" className="btn" style={{background:"#fff",color:"var(--accent)",alignSelf:"flex-start",marginTop:32}}>Post your first role <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CompaniesPage(){
  useTweaks();
  return (
    <>
      <Nav current="companies"/>
      <CompaniesHero/>
      <Marquee/>
      <ForCompaniesDeep/>
      <HowItWorks audience="company"/>
      <ROICalculator/>
      <Features audience="company"/>
      <SocialProof/>
      <FinalCTA audience="company" setAudience={()=>{}}/>
      <BigFooter/>
    </>
  );
}

// ============ SALES REPS ============
function RepsHero(){
  const isMobile = useIsMobile();
  return (
    <section className="hero">
      <div className="wrap">
        <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:isMobile?24:40,flexWrap:"wrap"}}>
          <span className="pill"><span className="dot live"></span>For closers</span>
          <span className="pill">200+ companies hiring now</span>
        </div>
        <h1>Stop chasing leads. <em>Start closing deals.</em></h1>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:isMobile?32:48,alignItems:"end"}}>
          <div>
            <p className="sub">A curated marketplace of high-ticket, remote, commission-only roles. Direct access to 200+ companies that actually need closers. Zero recruiter middlemen.</p>
            <div style={{display:"flex",gap:12,flexWrap:"wrap",marginBottom:24,flexDirection:isMobile?"column":"row"}}>
              <a href="https://app.clozer.com/signup" className="btn btn-primary" style={isMobile?{justifyContent:"center"}:{}}>Create your profile <span className="arrow">→</span></a>
              <a href="https://app.clozer.com/signup" className="btn btn-ghost" style={isMobile?{justifyContent:"center"}:{}}>Browse open roles</a>
            </div>
            <div className="muted" style={{fontSize:13}}>Free forever. We take 0% of your commission.</div>
          </div>
          {!isMobile && <div><ProductPeekRep/></div>}
        </div>
      </div>
      <div className="wrap" style={{marginTop:isMobile?40:64}}>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}}>
          {[
            {n:"200+",l:"companies hiring now"},
            {n:"$82k",l:"avg. commission earned"},
            {n:"$0",l:"fees, ever"},
            {n:"90 days",l:"listing stays active"},
          ].map((t,i)=>(
            <div key={i} style={{padding:isMobile?"16px":"20px 24px",borderRight:i%2===0?"1px solid var(--line)":"none",borderBottom:i<2?"1px solid var(--line)":"none"}}>
              <div style={{fontFamily:"var(--serif)",fontSize:isMobile?28:44,lineHeight:1,letterSpacing:"-0.02em"}}>{t.n}</div>
              <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.08em",textTransform:"uppercase",color:"var(--muted)",marginTop:8}}>{t.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RepsEarnings(){
  const isMobile = useIsMobile();
  const data = [
    {role:"Enterprise AE",vertical:"SaaS",deal:"$120k",ote:"$240k",cycle:"60 days"},
    {role:"Mid-market AE",vertical:"Fintech",deal:"$48k",ote:"$180k",cycle:"30 days"},
    {role:"Growth AE",vertical:"Dev tools",deal:"$24k",ote:"$195k",cycle:"21 days"},
    {role:"SMB Closer",vertical:"B2B mkt",deal:"$12k",ote:"$150k",cycle:"14 days"},
    {role:"Field Sales",vertical:"Healthtech",deal:"$85k",ote:"$220k",cycle:"90 days"},
  ];
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">Real numbers</div>
        <h2 className="sectionTitle">What closers are <em style={{fontStyle:"italic"}}>actually earning.</em></h2>
        {isMobile ? (
          <div style={{display:"grid",gap:12}}>
            {data.map((r,i)=>(
              <div key={i} className="card" style={{padding:"20px 24px"}}>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"start",marginBottom:8}}>
                  <div style={{fontWeight:600,fontSize:16}}>{r.role}</div>
                  <div style={{fontFamily:"var(--serif)",fontSize:24,color:"var(--accent)"}}>{r.ote}</div>
                </div>
                <div style={{display:"flex",gap:16,fontSize:13,color:"var(--muted)"}}>
                  <span>{r.vertical}</span>
                  <span>Avg. deal: {r.deal}</span>
                  <span>{r.cycle}</span>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="card" style={{padding:0,overflow:"hidden"}}>
            <div style={{display:"grid",gridTemplateColumns:"2fr 1.2fr 1fr 1fr 1fr",padding:"16px 28px",borderBottom:"1px solid var(--line)",fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--muted)"}}>
              <span>Role</span><span>Vertical</span><span>Avg. deal</span><span>OTE</span><span>Cycle</span>
            </div>
            {data.map((r,i)=>(
              <div key={i} style={{display:"grid",gridTemplateColumns:"2fr 1.2fr 1fr 1fr 1fr",padding:"20px 28px",borderBottom:i<data.length-1?"1px solid var(--line)":"0",alignItems:"center"}}>
                <span style={{fontWeight:600}}>{r.role}</span>
                <span className="muted" style={{fontSize:14}}>{r.vertical}</span>
                <span className="mono" style={{fontSize:14}}>{r.deal}</span>
                <span style={{fontFamily:"var(--serif)",fontSize:22,color:"var(--accent)"}}>{r.ote}</span>
                <span className="mono" style={{fontSize:14}}>{r.cycle}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function RepsProfileBuilder(){
  const isMobile = useIsMobile();
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">Your profile</div>
        <h2 className="sectionTitle">Your <em style={{fontStyle:"italic"}}>closed-won deals</em> are your résumé.</h2>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:isMobile?32:48,alignItems:"center"}}>
          <div>
            <p className="muted" style={{fontSize:isMobile?15:17,lineHeight:1.5,marginBottom:24}}>Forget the 2-page Word doc. Clozer profiles are built around verified performance. We pull your deal history, confirm it with former managers, and render it into a profile hiring teams actually want to read.</p>
            <div style={{display:"grid",gap:12}}>
              {[
                "Connect your CRM — we auto-extract closed-won deals",
                "Verify 3 manager references (48 hr turnaround)",
                "Select verticals, deal sizes, and cycle preferences",
                "Go live — in private mode if you're still employed",
              ].map((l,i)=>(
                <div key={i} style={{display:"flex",alignItems:"center",gap:12}}>
                  <span style={{width:26,height:26,minWidth:26,borderRadius:"50%",background:"var(--accent)",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:12,fontFamily:"var(--mono)",fontWeight:700}}>{i+1}</span>
                  <span style={{fontSize:15}}>{l}</span>
                </div>
              ))}
            </div>
          </div>
          <div><VerificationCard isMobile={isMobile}/></div>
        </div>
      </div>
    </section>
  );
}

function RepsPage(){
  useTweaks();
  return (
    <>
      <Nav current="reps"/>
      <RepsHero/>
      <Marquee/>
      <RepsEarnings/>
      <RepsProfileBuilder/>
      <HowItWorks audience="rep"/>
      <Features audience="rep"/>
      <SocialProof/>
      <FinalCTA audience="rep" setAudience={()=>{}}/>
      <BigFooter/>
    </>
  );
}

// ============ VERIFICATION ============
function VerifyHero(){
  const isMobile = useIsMobile();
  return (
    <section className="hero">
      <div className="wrap">
        <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:isMobile?24:40,flexWrap:"wrap"}}>
          <span className="pill"><span className="dot"/> Our moat</span>
          <span className="pill">3-step verification · 48 hr turnaround</span>
        </div>
        <h1 style={{maxWidth:"14ch"}}>The receipt layer for <em>commission sales.</em></h1>
        <p className="sub" style={{maxWidth:680}}>LinkedIn profiles lie. Résumés inflate. Clozer runs every rep through a three-step verification so companies hire on performance — and reps who earn their numbers actually stand out.</p>
        <div style={{display:"flex",gap:12,flexWrap:"wrap",flexDirection:isMobile?"column":"row"}}>
          <a href="https://app.clozer.com/signup" className="btn btn-primary" style={isMobile?{justifyContent:"center"}:{}}>Get verified <span className="arrow">→</span></a>
          <a href="https://app.clozer.com/signup" className="btn btn-ghost" style={isMobile?{justifyContent:"center"}:{}}>See a sample report</a>
        </div>
      </div>
    </section>
  );
}

function VerifySteps(){
  const isMobile = useIsMobile();
  const steps = [
    {n:"01", t:"Employment check", d:"We pull verified employment history directly from payroll systems (Gusto, Rippling, Deel, ADP). Dates, titles, and compensation confirmed — not self-reported.", items:["Start & end dates","Title progression","Base + variable compensation","Separation reason"]},
    {n:"02", t:"Manager reference calls", d:"Our verification team calls the last 3 direct managers. Structured interview covering ramp time, quota attainment, cultural fit, and whether they'd rehire.", items:["Quota attainment (trailing 4Q)","Avg. deal size & cycle","Team collaboration score","Would-rehire rating"]},
    {n:"03", t:"Closed-won deal proof", d:"Reps upload redacted contracts or CRM exports. We confirm contract value, close date, and cycle length against references. Every number on your profile has a receipt.", items:["Contract value (verified)","Close date","Sales cycle length","Product / deal type"]},
  ];
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">How it works</div>
        <h2 className="sectionTitle">Three checks. <em style={{fontStyle:"italic"}}>No shortcuts.</em></h2>
        <div style={{display:"grid",gap:16}}>
          {steps.map(s=>(
            <div key={s.n} className="card" style={{padding:isMobile?24:36,display:"grid",gridTemplateColumns:isMobile?"1fr":"auto 1fr 1fr",gap:isMobile?16:32,alignItems:"start"}}>
              <div style={{fontFamily:"var(--serif)",fontSize:isMobile?48:80,lineHeight:1,color:"var(--accent)",fontWeight:400}}>{s.n}</div>
              <div>
                <h3 style={{fontFamily:"var(--serif)",fontSize:isMobile?24:32,margin:0,marginBottom:12,fontWeight:400,letterSpacing:"-0.01em"}}>{s.t}</h3>
                <p style={{margin:0,color:"var(--muted)",fontSize:15,lineHeight:1.5}}>{s.d}</p>
              </div>
              <div style={{display:"grid",gap:10,marginTop:isMobile?8:0}}>
                {s.items.map((it,i)=>(
                  <div key={i} className="vChip" style={{justifyContent:"flex-start"}}>
                    <span className="tick">✓</span>
                    <span style={{fontSize:13}}>{it}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VerifyBadges(){
  const isMobile = useIsMobile();
  const badges = [
    {t:"Verified",d:"Passed all 3 checks within last 12 months",c:"var(--accent)"},
    {t:"Top 10%",d:"147%+ trailing quota attainment, verified",c:"var(--fg)"},
    {t:"Enterprise",d:"$250k+ avg. deal size, 3+ deals",c:"var(--fg)"},
    {t:"Velocity",d:"Sub-30-day avg. cycle, verified",c:"var(--fg)"},
    {t:"Multi-vertical",d:"Crossed 3+ verticals with wins",c:"var(--fg)"},
    {t:"Founder-friendly",d:"Closed first 10 reps at ≥2 startups",c:"var(--fg)"},
  ];
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">Trust badges</div>
        <h2 className="sectionTitle">Earn specialty badges <em style={{fontStyle:"italic"}}>as you close.</em></h2>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr 1fr":"repeat(3,1fr)",gap:16}}>
          {badges.map((b,i)=>(
            <div key={i} className="card" style={{padding:isMobile?20:28,display:"flex",flexDirection:"column",gap:12,minHeight:isMobile?"auto":180}}>
              <div style={{width:40,height:40,borderRadius:10,background:b.c,color:b.c==="var(--accent)"?"#fff":"var(--bg)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,fontWeight:700,flexShrink:0}}>✓</div>
              <div>
                <div style={{fontFamily:"var(--serif)",fontSize:isMobile?20:28,fontWeight:400,letterSpacing:"-0.01em",marginBottom:4}}>{b.t}</div>
                <div className="muted" style={{fontSize:13,lineHeight:1.4}}>{b.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VerifyFAQ(){
  const faqs = [
    {q:"How long does verification take?",a:"48 hours from profile submission to verified badge, assuming references pick up promptly. We'll ping you if we're stuck."},
    {q:"Does my current employer find out?",a:"No. We only contact former managers (2+ companies ago by default). You can also keep your profile in private mode until you're actively looking."},
    {q:"What if a deal is under NDA?",a:"Redact the company name and contract. We verify the dollar amount, cycle, and vertical against your reference — details stay confidential."},
    {q:"Can I re-verify after a new quarter?",a:"Yes — and you should. Verified stats expire after 12 months. Re-verification is one-click if your CRM is connected."},
    {q:"What if a reference doesn't respond?",a:"We try 3 times across 10 days. If unreachable, you can substitute with a peer or skip-level reference, flagged on your profile."},
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">FAQ</div>
        <h2 className="sectionTitle">Common questions.</h2>
        <div style={{borderTop:"1px solid var(--line)"}}>
          {faqs.map((f,i)=>(
            <div key={i} style={{borderBottom:"1px solid var(--line)"}}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{width:"100%",textAlign:"left",padding:"20px 0",display:"flex",justifyContent:"space-between",alignItems:"center",gap:16,cursor:"pointer"}}>
                <span style={{fontSize:18,fontWeight:600,letterSpacing:"-0.01em"}}>{f.q}</span>
                <span style={{fontSize:24,color:"var(--accent)",transform: open===i?"rotate(45deg)":"none",transition:"transform .2s",flexShrink:0}}>+</span>
              </button>
              {open===i && <div style={{paddingBottom:20,color:"var(--muted)",fontSize:15,lineHeight:1.6}}>{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VerifyPage(){
  useTweaks();
  return (
    <>
      <Nav current="verify"/>
      <VerifyHero/>
      <VerifySteps/>
      <VerifyBadges/>
      <Verification/>
      <VerifyFAQ/>
      <FinalCTA audience="rep" setAudience={()=>{}}/>
      <BigFooter/>
    </>
  );
}

// ============ PRICING PAGE ============
function PricingHero(){
  return (
    <section className="hero" style={{paddingBottom:16}}>
      <div className="wrap" style={{textAlign:"center"}}>
        <div style={{display:"flex",alignItems:"center",gap:16,marginBottom:32,justifyContent:"center"}}>
          <span className="pill"><span className="dot"/> Pricing</span>
        </div>
        <h1 style={{maxWidth:"18ch",margin:"0 auto 24px"}}>Free for closers. <em>One flat fee</em> for companies.</h1>
        <p className="sub" style={{margin:"0 auto 40px",textAlign:"center"}}>No subscriptions. No hidden recruiter cuts. No per-hire fees.</p>
      </div>
    </section>
  );
}

function PricingTable(){
  const isMobile = useIsMobile();
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr 1fr",gap:isMobile?16:12}}>
          <div className="priceCard">
            <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",color:"var(--muted)"}}>For reps</div>
            <div style={{fontFamily:"var(--serif)",fontSize:28,marginTop:8,fontWeight:400}}>Closer profile</div>
            <div className="priceNum" style={{marginTop:16,fontSize:isMobile?64:92}}>$0</div>
            <div className="muted" style={{fontSize:13,marginTop:4}}>Forever. 0% of commission.</div>
            <div style={{height:1,background:"var(--line)",margin:"24px 0"}}/>
            <div style={{display:"grid",gap:10}}>
              {["Verified closer badge","Matched opportunities","Salary benchmarks","Private mode","Direct-sign with companies"].map((l,i)=>(
                <div key={i} style={{display:"flex",gap:10,fontSize:14}}><span style={{color:"var(--accent)",fontWeight:700}}>✓</span>{l}</div>
              ))}
            </div>
            <a href="https://app.clozer.com/signup" className="btn btn-ghost" style={{marginTop:28}}>Create profile <span className="arrow">→</span></a>
          </div>

          <div className="priceCard featured">
            <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",opacity:0.7}}>Most popular</div>
            <div style={{fontFamily:"var(--serif)",fontSize:28,marginTop:8,fontWeight:400}}>Growth listing</div>
            <div className="priceNum" style={{marginTop:16,fontSize:isMobile?64:92,display:"flex",alignItems:"baseline",gap:8}}>$29<span style={{fontSize:18,opacity:0.6,fontFamily:"var(--sans)",fontWeight:500}}>per role</span></div>
            <div style={{fontSize:13,opacity:0.7,marginTop:4}}><span style={{textDecoration:"line-through",opacity:0.6}}>$2,400</span> · no other fees</div>
            <div style={{height:1,background:"#ffffff22",margin:"24px 0"}}/>
            <div style={{display:"grid",gap:10}}>
              {["Unlimited verified matches","90-day listing, renewable","Interview scheduling","Candidate analytics","0% of commission, ever","Email + chat support"].map((l,i)=>(
                <div key={i} style={{display:"flex",gap:10,fontSize:14}}><span style={{color:"var(--accent)",fontWeight:700}}>✓</span>{l}</div>
              ))}
            </div>
            <a href="https://app.clozer.com/signup" className="btn btn-accent" style={{marginTop:28}}>Post a role <span className="arrow">→</span></a>
          </div>

          <div className="priceCard">
            <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",color:"var(--muted)"}}>Enterprise</div>
            <div style={{fontFamily:"var(--serif)",fontSize:28,marginTop:8,fontWeight:400}}>Scale</div>
            <div className="priceNum" style={{marginTop:16,fontSize:isMobile?48:92}}>Custom</div>
            <div className="muted" style={{fontSize:13,marginTop:4}}>5+ roles, dedicated sourcing</div>
            <div style={{height:1,background:"var(--line)",margin:"24px 0"}}/>
            <div style={{display:"grid",gap:10}}>
              {["Everything in Growth","Dedicated hiring lead","Custom verification workflows","SSO + SCIM","Priority candidate review","Quarterly market report"].map((l,i)=>(
                <div key={i} style={{display:"flex",gap:10,fontSize:14}}><span style={{color:"var(--accent)",fontWeight:700}}>✓</span>{l}</div>
              ))}
            </div>
            <a href="mailto:support@clozer.com" className="btn btn-ghost" style={{marginTop:28}}>Talk to sales <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CompareTable(){
  const isMobile = useIsMobile();
  const rows = [
    {f:"Listing fee", a:"$0", b:"$29", c:"Custom", d:"5-fig retainer"},
    {f:"Recruiter markup", a:"—", b:"$0", c:"$0", d:"20–30% base"},
    {f:"Pre-verified performance", a:true, b:true, c:true, d:false},
    {f:"Commission-only", a:true, b:true, c:true, d:false},
    {f:"Time to first interview", a:"—", b:"5 days", c:"3 days", d:"4–6 wks"},
    {f:"Candidate analytics", a:"—", b:true, c:true, d:false},
    {f:"Replace guarantee", a:"—", b:"60 days", c:"90 days", d:"Varies"},
  ];
  if(isMobile){
    return (
      <section>
        <div className="wrap">
          <div className="eyebrow">Compare</div>
          <h2 className="sectionTitle">Next to a traditional search.</h2>
          <div style={{display:"grid",gap:12}}>
            {rows.map((r,i)=>(
              <div key={i} className="card" style={{padding:"16px 20px"}}>
                <div style={{fontWeight:600,fontSize:14,marginBottom:12}}>{r.f}</div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr 1fr",gap:8,fontSize:13}}>
                  {["Profile","Growth","Scale","Traditional"].map((h,j)=>(
                    <div key={j}>
                      <div style={{fontFamily:"var(--mono)",fontSize:10,textTransform:"uppercase",letterSpacing:"0.06em",color:"var(--muted)",marginBottom:4,color:j===1?"var(--accent)":"var(--muted)"}}>{h}</div>
                      <div style={{fontFamily:"var(--mono)"}}>
                        {typeof [r.a,r.b,r.c,r.d][j] === "boolean"
                          ? ([r.a,r.b,r.c,r.d][j] ? <span style={{color:"var(--accent)",fontWeight:700}}>✓</span> : <span style={{color:"var(--muted)"}}>—</span>)
                          : [r.a,r.b,r.c,r.d][j]}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">Compare</div>
        <h2 className="sectionTitle">Next to a traditional search.</h2>
        <div className="card" style={{padding:0,overflow:"hidden"}}>
          <div style={{display:"grid",gridTemplateColumns:"2fr 1fr 1fr 1fr 1fr",padding:"18px 28px",borderBottom:"1px solid var(--line)",fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--muted)"}}>
            <span></span>
            <span>Profile</span>
            <span style={{color:"var(--accent)"}}>Growth</span>
            <span>Scale</span>
            <span>Retained</span>
          </div>
          {rows.map((r,i)=>(
            <div key={i} style={{display:"grid",gridTemplateColumns:"2fr 1fr 1fr 1fr 1fr",padding:"18px 28px",borderBottom:i<rows.length-1?"1px solid var(--line)":"0",alignItems:"center"}}>
              <span style={{fontSize:14,fontWeight:500}}>{r.f}</span>
              {[r.a,r.b,r.c,r.d].map((v,j)=>(
                <span key={j} style={{fontSize:14,fontFamily:typeof v==="string"?"var(--mono)":"inherit"}}>
                  {typeof v==="boolean"?(v?<span style={{color:"var(--accent)",fontWeight:700}}>✓</span>:<span style={{color:"var(--muted)"}}>—</span>):v}
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingFAQ(){
  const faqs = [
    {q:"Why is it free for reps?", a:"Companies pay for access to verified performance. Taking a cut of commission would misalign incentives — we'd push you toward higher-paying roles rather than the best-fit ones."},
    {q:"What's the replace guarantee?", a:"If a hire leaves within 60 days for performance reasons, we relist the role at no charge."},
    {q:"Can I re-list a role for free?", a:"Yes — listings stay live for 90 days. Renew once at no cost if the role is still open."},
    {q:"Is there a trial for companies?", a:"First role is free. No credit card required until you post the second."},
  ];
  const [open,setOpen] = React.useState(-1);
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">Billing FAQ</div>
        <div style={{borderTop:"1px solid var(--line)"}}>
          {faqs.map((f,i)=>(
            <div key={i} style={{borderBottom:"1px solid var(--line)"}}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{width:"100%",textAlign:"left",padding:"20px 0",display:"flex",justifyContent:"space-between",alignItems:"center",gap:16,cursor:"pointer"}}>
                <span style={{fontSize:18,fontWeight:600,letterSpacing:"-0.01em"}}>{f.q}</span>
                <span style={{fontSize:24,color:"var(--accent)",transform:open===i?"rotate(45deg)":"none",transition:"transform .2s",flexShrink:0}}>+</span>
              </button>
              {open===i && <div style={{paddingBottom:20,color:"var(--muted)",fontSize:15,lineHeight:1.6}}>{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingPage(){
  useTweaks();
  return (
    <>
      <Nav current="pricing"/>
      <PricingHero/>
      <PricingTable/>
      <CompareTable/>
      <PricingFAQ/>
      <FinalCTA audience="company" setAudience={()=>{}}/>
      <BigFooter/>
    </>
  );
}

// ============ CONTACT PAGE ============
function ContactHero(){
  return (
    <section className="hero" style={{paddingBottom:40}}>
      <div className="wrap">
        <div style={{display:"flex",alignItems:"center",gap:16,marginBottom:40}}>
          <span className="pill"><span className="dot"/> Contact</span>
        </div>
        <h1 style={{maxWidth:"14ch"}}>Let's talk <em>numbers.</em></h1>
        <p className="sub" style={{maxWidth:620}}>Questions about hiring, verification, or your profile? We respond to every message within one business day — usually the same afternoon.</p>
      </div>
    </section>
  );
}

function ContactForm(){
  const isMobile = useIsMobile();
  const [type,setType] = React.useState("company");
  const [sent,setSent] = React.useState(false);
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1.3fr",gap:isMobile?32:48,alignItems:"start"}}>
          {/* Contact info — on mobile show above form */}
          <div style={{display:"grid",gap:24,order:isMobile?1:0}}>
            {[
              {label:"Sales",email:"support@clozer.com",desc:"For companies hiring 3+ roles or enterprise needs."},
              {label:"Support",email:"support@clozer.com",desc:"Account, billing, verification issues."},
              {label:"Press & partnerships",email:"support@clozer.com",desc:null},
            ].map((c,i)=>(
              <div key={i}>
                <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",color:"var(--muted)",marginBottom:8}}>{c.label}</div>
                <div style={{fontSize:17,fontWeight:600}}>{c.email}</div>
                {c.desc && <div className="muted" style={{fontSize:14,marginTop:4}}>{c.desc}</div>}
              </div>
            ))}
            <div style={{borderTop:"1px solid var(--line)",paddingTop:24,display:"grid",gap:16}}>
              <div>
                <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",color:"var(--muted)",marginBottom:8}}>HQ</div>
                <div style={{fontSize:17,fontWeight:600}}>Fort Lauderdale, FL</div>
                <div className="muted" style={{fontSize:14,marginTop:4}}>Remote-first.</div>
              </div>
              <div>
                <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",color:"var(--muted)",marginBottom:8}}>Hours</div>
                <div style={{fontSize:17,fontWeight:600}}>Mon–Fri · 9am–5pm ET</div>
                <div className="muted" style={{fontSize:14,marginTop:4}}>Avg. response: 3 hours.</div>
              </div>
            </div>
          </div>

          <div className="card" style={{padding:isMobile?24:36,order:isMobile?0:1}}>
            {sent ? (
              <div style={{padding:"40px 0",textAlign:"center"}}>
                <div style={{width:56,height:56,borderRadius:"50%",background:"var(--accent)",color:"#fff",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:24,fontWeight:700,marginBottom:16}}>✓</div>
                <div style={{fontFamily:"var(--serif)",fontSize:32,fontWeight:400,marginBottom:8}}>Message sent.</div>
                <div className="muted" style={{fontSize:15}}>We'll be back to you within one business day.</div>
              </div>
            ) : (
              <div>
                <div style={{fontFamily:"var(--serif)",fontSize:isMobile?24:28,fontWeight:400,marginBottom:20,letterSpacing:"-0.01em"}}>Send us a message</div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6,marginBottom:20,padding:4,border:"1px solid var(--line)",borderRadius:999,background:"var(--bg)"}}>
                  {["company","rep"].map(t=>(
                    <button key={t} type="button" onClick={()=>setType(t)} style={{padding:"10px 16px",borderRadius:999,fontSize:13,fontWeight:600,background:type===t?"var(--fg)":"transparent",color:type===t?"var(--bg)":"var(--muted)"}}>{t==="company"?"I'm hiring":"I'm a closer"}</button>
                  ))}
                </div>
                <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:12,marginBottom:12}}>
                  <Field label="Name" placeholder="Maya Reyes"/>
                  <Field label="Email" placeholder="maya@company.com"/>
                </div>
                <div style={{marginBottom:12}}><Field label={type==="company"?"Company":"LinkedIn or current role"} placeholder={type==="company"?"Acme Inc.":"Enterprise AE at Linear"}/></div>
                <div style={{marginBottom:12}}>
                  <label style={{fontSize:12,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--muted)"}}>What can we help with?</label>
                  <select style={{width:"100%",marginTop:6,padding:"14px 16px",borderRadius:12,border:"1px solid var(--line)",background:"var(--bg)",color:"var(--fg)",fontSize:15,fontFamily:"inherit"}}>
                    {(type==="company"?["Posting my first role","Enterprise pricing","Verification process","Something else"]:["Creating a profile","Verification questions","Account issue","Something else"]).map(o=><option key={o}>{o}</option>)}
                  </select>
                </div>
                <div style={{marginBottom:20}}>
                  <label style={{fontSize:12,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--muted)"}}>Message</label>
                  <textarea rows="5" placeholder="Tell us what you're trying to solve..." style={{width:"100%",marginTop:6,padding:"14px 16px",borderRadius:12,border:"1px solid var(--line)",background:"var(--bg)",color:"var(--fg)",fontSize:15,fontFamily:"inherit",resize:"vertical"}}/>
                </div>
                <button className="btn btn-primary" onClick={()=>setSent(true)} style={{width:"100%",justifyContent:"center"}}>Send message <span className="arrow">→</span></button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({label,placeholder}){
  return (
    <div>
      <label style={{fontSize:12,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--muted)"}}>{label}</label>
      <input placeholder={placeholder} style={{width:"100%",marginTop:6,padding:"14px 16px",borderRadius:12,border:"1px solid var(--line)",background:"var(--bg)",color:"var(--fg)",fontSize:15,fontFamily:"inherit",boxSizing:"border-box"}}/>
    </div>
  );
}

function ContactPage(){
  useTweaks();
  return (
    <>
      <Nav current="contact"/>
      <ContactHero/>
      <ContactForm/>
      <BigFooter/>
    </>
  );
}

Object.assign(window, { CompaniesPage, RepsPage, VerifyPage, PricingPage, ContactPage });
