// Hero + audience toggle + product peek

const HEADLINES = {
  company: { default: "Hire closers who actually close.", italic: "close." },
  rep:     { default: "Stop chasing leads. Start closing deals.", italic: "closing" },
};

const SUB = {
  company: "Clozer connects you with a pre-verified network of commission-only sales reps. Pay once. No retainers. No recruiters. Hire people who only win when you do.",
  rep: "A curated marketplace of high-ticket, remote, commission-only roles. Reach 500+ vetted companies hiring closers like you. No applications that go nowhere."
};

const CTA = {
  company: { primary: "Post a role", secondary: "See sample reps" },
  rep:     { primary: "Create your profile", secondary: "Browse open roles" },
};

const TICKERS = {
  company: [
    { n: "250+", l: "verified closers" },
    { n: "$0",     l: "up-front to hire" },
    { n: "5.1 days", l: "avg. to first interview" },
    { n: "96%",    l: "company satisfaction" },
  ],
  rep: [
    { n: "500+",   l: "companies hiring now" },
    { n: "$82k",   l: "avg. commission earned" },
    { n: "90 days",l: "listing stays active" },
    { n: "$0",     l: "recurring fees, ever" },
  ],
};

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 Hero({ audience, setAudience, headline }){
  const isMobile = useIsMobile();
  const h = headline || HEADLINES[audience].default;
  const highlight = (text) => {
    const words = text.split(" ");
    return words.map((w, i) => {
      if (i === words.length - 1) return <em key={i}>{w}</em>;
      return <span key={i}>{w} </span>;
    });
  };

  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>Now hiring across 42 states</span>
          <span className="pill">No recuiter fees · Ever</span>
        </div>

        <h1>{highlight(h)}</h1>

        <div style={{display:"grid",gridTemplateColumns:isMobile?"1fr":"1fr 1fr",gap:isMobile?32:48,alignItems:"end"}}>
          <div>
            <p className="sub">{SUB[audience]}</p>
            <div style={{display:"flex",gap:12,flexWrap:"wrap",marginBottom:isMobile?32:56,flexDirection:isMobile?"column":"row"}}>
              <a href="https://app.clozer.com/signup" className="btn btn-primary" style={isMobile?{justifyContent:"center"}:{}}>
                 {CTA[audience].primary} <span className="arrow">→</span>
                </a>
              <a href="https://app.clozer.com/signup" className="btn btn-ghost" style={isMobile?{justifyContent:"center"}:{}}>
                {CTA[audience].secondary}
              </a>
            </div>
            <div style={{display:"flex",alignItems:"center",gap:12,fontSize:13,color:"var(--muted)"}}>
              <div style={{display:"flex"}}>
                {["A","B","C","D"].map((n,i)=>(
                  <div key={i} style={{
                    width:28,height:28,borderRadius:"50%",
                    background:`oklch(0.7 0.12 ${i*60})`,
                    border:"2px solid var(--bg)",marginLeft:i?-8:0,
                    display:"flex",alignItems:"center",justifyContent:"center",
                    color:"#fff",fontSize:11,fontWeight:700
                  }}>{n}</div>
                ))}
              </div>
              Join 250+ closers & 200+ companies
            </div>
          </div>

          {!isMobile && (
            <div>
              {audience === "company" ? <ProductPeekCompany /> : <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)"}}>
          {TICKERS[audience].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?32: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 ProductPeekCompany(){
  return (
    <div className="screenshot" style={{transform:"rotate(-0.5deg)"}}>
      <div className="bar"><i/><i/><i/><span style={{marginLeft:"auto",fontFamily:"var(--mono)",fontSize:11,color:"var(--muted)"}}>app.clozer.com/pipeline</span></div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10}}>
        {[
          {t:"Applied",n:142,c:"var(--muted)"},
          {t:"Shortlisted",n:34,c:"var(--fg)"},
          {t:"Hired",n:6,c:"var(--accent)"},
        ].map((col,i)=>(
          <div key={i} style={{background:"var(--bg)",borderRadius:10,padding:12,minHeight:230}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}>
              <span style={{fontSize:12,fontWeight:600,color:col.c}}>{col.t}</span>
              <span style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--muted)"}}>{col.n}</span>
            </div>
            {[0,1,2,3].map(j=>(
              <div key={j} style={{background:"var(--card)",border:"1px solid var(--line)",borderRadius:8,padding:8,marginBottom:6}}>
                <div style={{height:6,width:"70%",background:"var(--line)",borderRadius:4,marginBottom:6}}/>
                <div style={{height:4,width:"40%",background:"var(--line)",borderRadius:4}}/>
                {i===2 && j===0 && (
                  <div style={{marginTop:6,fontFamily:"var(--mono)",fontSize:10,color:"var(--accent)"}}>● signed · $112k OTE</div>
                )}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function ProductPeekRep(){
  return (
    <div className="screenshot" style={{transform:"rotate(0.5deg)"}}>
      <div className="bar"><i/><i/><i/><span style={{marginLeft:"auto",fontFamily:"var(--mono)",fontSize:11,color:"var(--muted)"}}>app.clozer.com/jobs</span></div>
      <div style={{display:"grid",gap:8}}>
        {[
          {c:"Linear",r:"SaaS AE",p:"$180k OTE",t:"Remote · US",hot:true},
          {c:"Vercel",r:"Enterprise AE",p:"$240k OTE",t:"Remote · Global"},
          {c:"Ramp",r:"SMB Closer",p:"$150k OTE",t:"Remote · US"},
          {c:"Notion",r:"Growth AE",p:"$195k OTE",t:"Hybrid · NYC"},
        ].map((job,i)=>(
          <div key={i} style={{background:"var(--bg)",borderRadius:10,padding:12,display:"grid",gridTemplateColumns:"36px 1fr auto",gap:12,alignItems:"center",border: job.hot ? "1px solid var(--accent)" : "1px solid transparent"}}>
            <div style={{width:36,height:36,borderRadius:8,background:"var(--fg)",color:"var(--bg)",display:"flex",alignItems:"center",justifyContent:"center",fontFamily:"var(--mono)",fontSize:12,fontWeight:700}}>{job.c[0]}</div>
            <div>
              <div style={{fontSize:13,fontWeight:600}}>{job.r} · {job.c}</div>
              <div style={{fontSize:11,color:"var(--muted)"}}>{job.t}</div>
            </div>
            <div style={{textAlign:"right"}}>
              <div style={{fontFamily:"var(--serif)",fontSize:18,fontWeight:400}}>{job.p}</div>
              {job.hot && <div style={{fontFamily:"var(--mono)",fontSize:9,color:"var(--accent)",textTransform:"uppercase",letterSpacing:"0.08em"}}>● Hot</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Hero, HEADLINES, ProductPeekCompany, ProductPeekRep });