// Remaining sections: how it works, features, verify, social proof, pricing, footer

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;}

function HowItWorks({ audience }){
  const steps = audience === "company" ? [
    { n:"01", t:"Post your role", p:"Define commission structure, ICP, and territory. Listings go live in under 10 minutes." },
    { n:"02", t:"Meet verified closers", p:"We surface reps who match your vertical, deal size, and cycle length — pre-screened, proof-of-performance attached." },
    { n:"03", t:"Interview & sign", p:"Chat in-platform, schedule interviews, and send offers. Pay a one-time listing fee. No recruiter cut, ever." },
  ] : [
    { n:"01", t:"Build a proof-of-work profile", p:"Upload closed-won deals, OTE history, verticals. We verify with your former managers — badge goes live in 48h." },
    { n:"02", t:"Get matched, not spammed", p:"Opportunities land in your inbox filtered by commission size, product, and cycle — not job title keywords." },
    { n:"03", t:"Close deals, get paid", p:"Sign direct with the company. Clozer takes 0% of your commission. We're paid by them, not you." },
  ];
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">The flow</div>
        <h2 className="sectionTitle">
          {audience === "company" ? <>Three steps. <em style={{fontStyle:"italic"}}>Closers in days</em>, not quarters.</> : <>Three steps. <em style={{fontStyle:"italic"}}>Paid engagements</em>, not ghosted applications.</>}
        </h2>
        <div className="steps">
          {steps.map(s=>(
            <div key={s.n} className="step">
              <div className="num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features({ audience }){
  const isMobile = useIsMobile();
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">What makes us different</div>
        <h2 className="sectionTitle">
          {audience === "company"
            ? <>A hiring platform built for <em style={{fontStyle:"italic"}}>revenue, not résumés.</em></>
            : <>A marketplace that treats closers like <em style={{fontStyle:"italic"}}>operators, not applicants.</em></>}
        </h2>

        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"repeat(12,1fr)",gap:16}}>
          {/* Hero card */}
          <div className="card" style={{gridColumn:isMobile?"span 1":"span 8",background:"var(--fg)",color:"var(--bg)",display:"flex",flexDirection:"column",justifyContent:"space-between",minHeight:isMobile?"auto":460,gap:16,padding:28}}>
            <div>
              <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.1em",textTransform:"uppercase",opacity:0.6,marginBottom:16}}>VERIFIED PERFORMANCE</div>
              <h3 style={{fontSize:isMobile?28:44,color:"var(--bg)",fontFamily:"var(--serif)",lineHeight:1.02,margin:0}}>
                {audience === "company" ? "Every rep shows their receipts." : "Your last 3 quarters become your résumé."}
              </h3>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginTop:24}}>
              {[
                {l:"Closed ARR", v:"$4.2M", sub:"last 12 mo"},
                {l:"Quota attainment", v:"147%", sub:"trailing 4Q"},
                {l:"Avg. cycle", v:"28 days", sub:"enterprise"},
                {l:"Manager refs", v:"3 / 3", sub:"verified"},
              ].map((m,i)=>(
                <div key={i} style={{border:"1px solid #ffffff22",borderRadius:12,padding:14}}>
                  <div style={{fontFamily:"var(--mono)",fontSize:10,opacity:0.5,textTransform:"uppercase",letterSpacing:"0.08em"}}>{m.l}</div>
                  <div style={{fontFamily:"var(--serif)",fontSize:isMobile?24:32,fontWeight:400,marginTop:6}}>{m.v}</div>
                  <div style={{fontSize:11,opacity:0.6,marginTop:2}}>{m.sub}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Small cards row */}
          <div className="card" style={{gridColumn:isMobile?"span 1":"span 4",padding:28}}>
            <div style={{fontSize:11,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.1em",color:"var(--muted)"}}>01</div>
            <h3 style={{fontFamily:"var(--serif)",fontSize:24,margin:"12px 0 8px",fontWeight:400}}>Commission-only. Always.</h3>
            <p style={{margin:0,color:"var(--muted)",fontSize:15,lineHeight:1.5}}>{audience === "company" ? "No retainers. No salaries. Reps only win when you do — aligned incentives from day one." : "Own your upside. No base-salary ceilings. Top performers take home 3–5× traditional AE comp."}</p>
          </div>

          <div className="card" style={{gridColumn:isMobile?"span 1":"span 4",background:"var(--accent)",color:"#fff",padding:28}}>
            <div style={{fontSize:11,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.1em",opacity:0.8}}>02</div>
            <h3 style={{fontFamily:"var(--serif)",fontSize:24,margin:"12px 0 8px",fontWeight:400,color:"#fff"}}>Zero recruiter markup.</h3>
            <p style={{margin:0,color:"#ffffffcc",fontSize:15,lineHeight:1.5}}>We're not a recruiting agency. One flat listing fee, paid by the company. Reps keep 100% of commission.</p>
          </div>

          <div className="card" style={{gridColumn:isMobile?"span 1":"span 4",padding:28}}>
            <div style={{fontSize:11,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.1em",color:"var(--muted)"}}>03</div>
            <h3 style={{fontFamily:"var(--serif)",fontSize:24,margin:"12px 0 8px",fontWeight:400}}>Built-in verification.</h3>
            <p style={{margin:0,color:"var(--muted)",fontSize:15,lineHeight:1.5}}>Manager reference calls and closed-deal proof — every rep ships with a verified trust score.</p>
          </div>

          {/* Wide cards */}
          <div className="card" style={{gridColumn:isMobile?"span 1":"span 6",display:"flex",flexDirection:"column",gap:16,padding:28}}>
            <div>
              <div style={{fontSize:11,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.1em",color:"var(--muted)"}}>04 · Match quality</div>
              <h3 style={{fontFamily:"var(--serif)",fontSize:24,margin:"12px 0 8px",fontWeight:400}}>Matched by vertical, not job title.</h3>
              <p style={{margin:0,color:"var(--muted)",fontSize:15,lineHeight:1.5}}>Our matcher weights ICP overlap, deal-size fit, and sales-cycle pattern — not LinkedIn keywords.</p>
            </div>
            <div style={{marginTop:"auto",paddingTop:8}}>
              {["SaaS & Dev tools","Fintech","Healthtech","B2B marketplaces","Cybersecurity"].map((v,i)=>(
                <span key={i} style={{display:"inline-block",padding:"6px 12px",border:"1px solid var(--line)",borderRadius:999,margin:"0 6px 6px 0",fontSize:12,fontFamily:"var(--mono)"}}>{v}</span>
              ))}
            </div>
          </div>

          <div className="card" style={{gridColumn:isMobile?"span 1":"span 6",padding:28}}>
            <div style={{fontSize:11,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.1em",color:"var(--muted)"}}>05 · In-platform signal</div>
            <h3 style={{fontFamily:"var(--serif)",fontSize:24,margin:"12px 0 8px",fontWeight:400}}>Real-time hiring signal.</h3>
            <p style={{margin:0,color:"var(--muted)",fontSize:15,lineHeight:1.5}}>See which companies are actively interviewing, which reps are taking meetings this week, and where the market is moving.</p>
            <div style={{marginTop:16,display:"flex",gap:isMobile?8:20,alignItems:"end",height:80}}>
              {[42,64,38,78,55,82,71,95,68,88,74,91].map((h,i)=>(
                <div key={i} style={{flex:1,height:`${h}%`,background: i>=9?"var(--accent)":"var(--line)",borderRadius:2}}/>
              ))}
            </div>
            <div style={{display:"flex",justifyContent:"space-between",fontFamily:"var(--mono)",fontSize:10,color:"var(--muted)",marginTop:8,textTransform:"uppercase",letterSpacing:"0.08em"}}>
              <span>Jan</span><span>Apr</span><span>Jul</span><span>Oct</span><span>now</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Verification(){
  const isMobile = useIsMobile();
  return (
    <section style={{paddingTop:40}}>
      <div className="wrap">
        <div className="div-label" style={{flexDirection:isMobile?"column":undefined,alignItems:isMobile?"flex-start":undefined,gap:isMobile?4:undefined}}>
          <span>⎯ Verification layer</span>
          <span>Applies to every profile before listing</span>
        </div>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:isMobile?32:48,alignItems:"center",padding:isMobile?"32px 0":"56px 0"}}>
          <div>
            <h2 className="sectionTitle" style={{fontSize:"clamp(28px,5vw,68px)",marginBottom:24}}>
              We verify <em style={{fontStyle:"italic"}}>every rep</em> before a single interview.
            </h2>
            <p className="muted" style={{fontSize:isMobile?15:17,lineHeight:1.5,marginBottom:32}}>
              LinkedIn profiles lie. Résumés inflate. Clozer runs a three-step verification so companies hire on actual performance — and reps who earn it stand out.
            </p>
            <div style={{display:"grid",gap:10}}>
              {[
                "Employment history verified against LinkedIn and references",
                "Manager reference calls on last 3 companies",
                "Closed-won deal proof: contract value, cycle, close rate",
                "Ongoing quota attainment tracking",
              ].map((l,i)=>(
                <div key={i} className="vChip" style={{justifyContent:"flex-start"}}>
                  <span className="tick">✓</span>
                  <span>{l}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <VerificationCard isMobile={isMobile}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function VerificationCard({ isMobile }){
  return (
    <div className="profile" style={{padding:isMobile?20:32}}>
      <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:20,flexWrap:"wrap"}}>
        <div className="avatar">MR</div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontWeight:600,fontSize:16}}>Maya Reyes</div>
          <div className="muted" style={{fontSize:12}}>Enterprise AE · 8 yrs · SaaS</div>
        </div>
        <div style={{display:"flex",gap:6,alignItems:"center",background:"var(--accent)",color:"#fff",padding:"6px 10px",borderRadius:999,fontSize:11,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.08em",whiteSpace:"nowrap"}}>
          ✓ Verified
        </div>
      </div>
      <div style={{marginBottom:20}}>
        {[
          {l:"Quota attainment", v:"147%", w:"147%"},
          {l:"Closed ARR (12mo)", v:"$4.2M", w:"82%"},
          {l:"Avg. deal size", v:"$82k", w:"60%"},
          {l:"Manager references", v:"3/3", w:"100%"},
        ].map((s,i)=>(
          <div key={i} className="stat" style={{gridTemplateColumns:isMobile?"1fr auto":"auto 1fr auto",gap:isMobile?8:12}}>
            <span style={{fontSize:13,fontWeight:600,width:isMobile?"auto":160}}>{s.l}</span>
            {!isMobile && <div className="bar"><span style={{width:s.w,maxWidth:"100%"}}/></div>}
            <span className="mono" style={{fontSize:13}}>{s.v}</span>
          </div>
        ))}
      </div>
      <div style={{borderTop:"1px solid var(--line)",paddingTop:16,display:"flex",gap:8,flexWrap:"wrap"}}>
        {["Linear","Datadog","Amplitude"].map((c,i)=>(
          <span key={i} style={{fontSize:11,fontFamily:"var(--mono)",textTransform:"uppercase",letterSpacing:"0.08em",padding:"4px 10px",border:"1px solid var(--line)",borderRadius:999}}>Prev: {c}</span>
        ))}
      </div>
    </div>
  );
}

function SocialProof(){
  const isMobile = useIsMobile();
  const quotes = [
    { q: "We replaced a retained search with two listings on Clozer. Hired both roles in 11 days.", a: "Sarah Chen", r: "VP Sales, Unframe" },
    { q: "The verification is the thing. I stopped getting ghosted by candidates who inflated their numbers.", a: "Marcus Boyd", r: "Founder, Drift Labs" },
    { q: "Closed $340k in commission in my first 6 months. No base, no problem.", a: "Priya Desai", r: "AE, ex-Ramp" },
  ];
  const [i, setI] = React.useState(0);
  React.useEffect(()=>{
    const t = setInterval(()=>setI(x=>(x+1)%quotes.length), 6000);
    return ()=>clearInterval(t);
  },[]);
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">What they're saying</div>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr auto",gap:isMobile?24:40,alignItems:"end"}}>
          <blockquote className="quote" style={{margin:0}}>
            "{quotes[i].q}"
          </blockquote>
          <div style={{textAlign:isMobile?"left":"right",minWidth:isMobile?"auto":200}}>
            <div style={{fontWeight:600,fontSize:16}}>{quotes[i].a}</div>
            <div className="muted" style={{fontSize:13}}>{quotes[i].r}</div>
            <div style={{marginTop:16,display:"flex",gap:6,justifyContent:isMobile?"flex-start":"flex-end"}}>
              {quotes.map((_,j)=>(
                <button key={j} onClick={()=>setI(j)} style={{width:24,height:3,borderRadius:2,background: j===i?"var(--fg)":"var(--line)",border:0,padding:0,cursor:"pointer"}}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee(){
  const items = ["Linear","Vercel","Ramp","Notion","Datadog","Amplitude","Retool","Brex","Deel","Rippling"];
  const all = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="track">
        {all.map((it,i)=>(
          <React.Fragment key={i}>
            <span>{it}</span>
            <span className="star">✦</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Pricing({ audience }){
  const isMobile = useIsMobile();
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow">Pricing</div>
        <h2 className="sectionTitle">Free for reps. <em style={{fontStyle:"italic"}}>One flat fee</em> for companies.</h2>
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1.2fr 1fr",gap:16}}>
          <div className="priceCard featured">
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"start",flexWrap:isMobile?"wrap":"nowrap",gap:16}}>
              <div>
                <div style={{fontFamily:"var(--mono)",fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",opacity:0.7}}>For companies</div>
                <div style={{fontFamily:"var(--serif)",fontSize:28,marginTop:8,fontWeight:400}}>Growth listing</div>
              </div>
              <div style={{textAlign:isMobile?"left":"right"}}>
                <span className="strike">$2,400</span>
                <div className="priceNum" style={{display:"flex",alignItems:"baseline",gap:10,fontSize:isMobile?64:92}}>$29<span style={{fontSize:18,opacity:0.6,fontFamily:"var(--sans)",fontWeight:500,letterSpacing:0}}>per listing</span></div>
                <div style={{fontSize:12,opacity:0.7,marginTop:4}}>One flat fee per role · no success fee</div>
              </div>
            </div>
            <div style={{height:1,background:"#ffffff22",margin:"24px 0"}}/>
            <div style={{display:"grid",gap:10}}>
              {[
                "Unlimited verified rep matches",
                "In-platform interview scheduling",
                "90-day listing, renewable",
                "Hiring analytics & cohort benchmarks",
                "Direct-hire — we take 0% of commission",
              ].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,alignSelf:"flex-start"}}>Post your first 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)"}}>For sales 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. We take 0% of your commission.</div>
            <div style={{height:1,background:"var(--line)",margin:"24px 0"}}/>
            <div style={{display:"grid",gap:10}}>
              {[
                "Verified closer badge",
                "Matched opportunities, not spam",
                "Salary & commission benchmarks",
                "Private mode — search while employed",
              ].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 your profile <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ audience, setAudience }){
  const isMobile = useIsMobile();
  return (
    <section style={{paddingBottom:40}}>
      <div className="wrap">
        <div className="card" style={{
          padding:isMobile?"36px 24px":"72px 56px",
          background:"var(--accent)",
          color:"#fff",
          borderRadius:28,
          textAlign:"center",
          position:"relative",
          overflow:"hidden"
        }}>
          <div style={{position:"absolute",inset:0,background:"radial-gradient(circle at 20% 50%, #ffffff22, transparent 40%), radial-gradient(circle at 80% 50%, #00000033, transparent 40%)",pointerEvents:"none"}}/>
          <div style={{position:"relative"}}>
            <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:"0.12em",textTransform:"uppercase",opacity:0.85,marginBottom:16}}>⎯ Ready?</div>
            <h2 style={{fontFamily:"var(--serif)",fontSize:"clamp(32px,5.5vw,72px)",lineHeight:1.05,letterSpacing:"-0.03em",margin:"0 0 24px",color:"#fff",fontWeight:400}}>
              Stop renting sales. <em style={{fontStyle:"italic"}}>Own the outcome.</em>
            </h2>
            <div style={{display:"flex",gap:12,marginTop:24,flexWrap:"wrap",justifyContent:"center"}}>
              <a href="/companies" className="btn" style={{background:"#fff",color:"var(--accent)",padding:isMobile?"14px 20px":"16px 28px",borderRadius:999,fontWeight:600}}>I'm hiring <span className="arrow">→</span></a>
              <a href="/sales-reps" className="btn" style={{background:"#00000033",color:"#fff",padding:isMobile?"14px 20px":"16px 28px",borderRadius:999,fontWeight:600,border:"1px solid #ffffff44"}}>I'm selling <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BigFooter(){
  const isMobile = useIsMobile();
  return (
    <footer className="big">
      <div className="wrap">
        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr auto",gap:isMobile?32:48,alignItems:"start"}}>
          <div>
            <a href="/" className="logo"><img src="assets/clozer-logo.png" alt="clozer" style={{height:28}}/></a>
            <p style={{maxWidth:360,opacity:0.7,fontSize:14,lineHeight:1.5,marginTop:16}}>
              The marketplace for commission-only sales. Fort Lauderdale, FL. Remote first.
            </p>
          </div>
          <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr 1fr":"repeat(3,minmax(120px,auto))",gap:isMobile?24:48,fontSize:14}}>
            <div>
              <div style={{fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",opacity:0.5,marginBottom:12}}>Product</div>
              <div style={{display:"grid",gap:8}}><a>For companies</a><a>For reps</a><a>Pricing</a><a>Verification</a></div>
            </div>
            <div>
              <div style={{fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",opacity:0.5,marginBottom:12}}>Company</div>
              <div style={{display:"grid",gap:8}}><a>About</a><a>Press</a><a>Contact</a><a>Careers</a></div>
            </div>
            <div>
              <div style={{fontSize:11,textTransform:"uppercase",letterSpacing:"0.12em",opacity:0.5,marginBottom:12}}>Social</div>
              <div style={{display:"grid",gap:8}}><a>Twitter</a><a>LinkedIn</a><a>Instagram</a></div>
            </div>
          </div>
        </div>

        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",paddingTop:24,marginTop:48,borderTop:"1px solid #ffffff22",fontSize:12,opacity:0.6,flexWrap:"wrap",gap:12}}>
          <span>© 2026 Clozer Inc. All rights reserved.</span>
          <span>Fort Lauderdale · Remote</span>
          <span>Privacy · Terms · Cookies</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HowItWorks, Features, Verification, VerificationCard, SocialProof, Marquee, Pricing, FinalCTA, BigFooter });
