// sections-b.jsx — Testimonials · Blog · Jobs · FAQ · Lead · Footer

/* ───────────── TESTIMONIALS ───────────── */
function Testimonials() {
  const tests = [
    { q:"As a hiring manager, I never had to question why she would send someone through.", who:"Chris Connelly", role:"Dir. of Frontend, Pendo" },
    { q:"You balance speed, urgency, and quality. That\u2019s what really sets you apart.", who:"Marlene Guardado", role:"Technical Recruiter, Middesk" },
    { q:"Veronica came up to speed on our very specific requirements quickly. Sourced and recruited some great candidates.", who:"Gary Miguel", role:"Eng Lead, Astera" },
    { q:"They transformed the process we were using and head-hunted the candidate who took the role.", who:"Robert Floyd", role:"Designer, Census" },
    { q:"You jumped in right away and found great talent. No ego, no hesitation, just awesome work.", who:"Farron McDonald", role:"Founding Recruiter, Juicebox" },
    { q:"Their creativity allowed us to consider candidates with the right fundamentals who weren\u2019t an obvious fit, and they were exceptional.", who:"Jay Novak", role:"Head of Threat Detection, TikTok" },
    { q:"She really took the time to understand what was important to me when screening, and what wasn\u2019t. I knew the candidates on my calendar were worth talking to.", who:"Doug Valenta", role:"Eng Manager, Census" },
    { q:"Veronica is incredibly people-centered, technically-minded, and domain-aware. She creates winning situations by understanding both sides.", who:"Lucy He", role:"ML Software Engineer" },
  ];
  return (
    <section className="ft-test" id="testimonials">
      <div className="ft-test__head">
        <span className="ft-eyebrow">Testimonials</span>
        <h2 className="ft-test__h">In their words.</h2>
      </div>
      <div className="ft-test__grid">
        {tests.map((t,i)=>(
          <figure key={i} className="ft-test__card">
            <span className="ft-test__mark" aria-hidden>{"\u201C"}</span>
            <blockquote className="ft-test__q">{t.q}</blockquote>
            <hr className="ft-test__rule" aria-hidden />
            <figcaption className="ft-test__cap">
              <span className="ft-test__avatar" aria-hidden>
                {t.who.split(" ").map(p=>p[0]).join("").slice(0,2)}
              </span>
              <span className="ft-test__who">
                <span>{t.who}</span>
                <em>{t.role}</em>
              </span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

/* ───────────── BLOG ───────────── */
function Blog() {
  const posts = [
    { tag:"Field notes", date:"May 02 · 2026", title:"What we learned closing 12 senior engineers in Q1.", read:"6 min", tone:"a" },
    { tag:"Playbook",    date:"Apr 18 · 2026", title:"The 14-question intake that saves you a month of bad interviews.", read:"9 min", tone:"b" },
    { tag:"Market",      date:"Apr 03 · 2026", title:"Comp bands are moving again. Here's what we see across Series B.", read:"4 min", tone:"c" },
  ];
  return (
    <section className="ft-blog" id="blog">
      <div className="ft-blog__head">
        <span className="ft-eyebrow">Insights</span>
        <h2 className="ft-blog__h">Notes from the field.</h2>
        <a href="#" className="ft-blog__all">All articles <span>→</span></a>
      </div>
      <div className="ft-blog__grid">
        {posts.map((p,i)=>(
          <a key={i} href="#" className={`ft-blog__card ft-blog__card--${p.tone}`}>
            <div className="ft-blog__cover">
              <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none">
                <defs>
                  <pattern id={`b-${i}`} width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                    <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" strokeWidth="1" opacity=".22"/>
                  </pattern>
                </defs>
                <rect width="200" height="100" fill={`url(#b-${i})`}/>
              </svg>
              <div className="ft-blog__coverTxt">{p.tag.toLowerCase().replace(" ","-")}</div>
            </div>
            <div className="ft-blog__meta"><span>{p.tag}</span><span>{p.date}</span></div>
            <h3 className="ft-blog__title">{p.title}</h3>
            <div className="ft-blog__read">{p.read} read</div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ───────────── JOBS ───────────── */
function Jobs() {
  const roles = [
    { co:"Vector Labs",   loc:"Remote · US",    role:"Staff Software Engineer, Platform", comp:"$240–290k + equity", tags:["Go","K8s","Series B"] },
    { co:"Hearth",        loc:"NYC, hybrid",    role:"Founding Designer",                   comp:"$180–220k + equity", tags:["0→1","Design","Seed"] },
    { co:"Census",        loc:"SF, hybrid",     role:"Sr. ML Engineer, Activation",         comp:"$260–310k + equity", tags:["ML","Python","Series B"] },
    { co:"Pendo",         loc:"Remote · NA",    role:"Engineering Manager, Web",            comp:"$235–275k + equity", tags:["Mgmt","React","Series E"] },
    { co:"Quiver",        loc:"Austin",         role:"Head of Product",                     comp:"$220–260k + equity", tags:["Product","Series A"] },
  ];
  return (
    <section className="ft-jobs" id="jobs">
      <div className="ft-jobs__head">
        <span className="ft-eyebrow">Open roles</span>
        <h2 className="ft-jobs__h">Hiring with us<br/><em>right now.</em></h2>
        <div className="ft-jobs__filters">
          <button className="ft-jobs__filter is-on">All</button>
          <button className="ft-jobs__filter">Engineering</button>
          <button className="ft-jobs__filter">Design</button>
          <button className="ft-jobs__filter">Product</button>
          <button className="ft-jobs__filter">Leadership</button>
        </div>
      </div>
      <div className="ft-jobs__list">
        {roles.map((r,i)=>(
          <a key={i} href="#" className="ft-jobs__row">
            <div className="ft-jobs__co">
              <span className="ft-jobs__coBadge">{r.co.split(" ").map(p=>p[0]).join("").slice(0,2)}</span>
              <div>
                <div className="ft-jobs__coName">{r.co}</div>
                <div className="ft-jobs__loc">{r.loc}</div>
              </div>
            </div>
            <div className="ft-jobs__role">{r.role}</div>
            <div className="ft-jobs__tags">
              {r.tags.map((t,j)=>(<span key={j}>{t}</span>))}
            </div>
            <div className="ft-jobs__comp">{r.comp}</div>
            <div className="ft-jobs__cta">Apply <span>→</span></div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ───────────── FAQ ───────────── */
function FAQ() {
  const qs = [
    { q:"What makes Fuse Talent different from other recruiting agencies?", a:"We work embedded or contingent, but we keep our roster small on purpose. Fewer clients means deeper context, real partnership, and a founder personally invested in every search. No black-box recruiting, no account-manager handoffs." },
    { q:"What roles does Fuse Talent specialize in filling?", a:"Engineering, Product, Design, and Go-to-Market are our core practice, from individual contributor through Head of. We also take on early operators and select niche searches when the fit is right." },
    { q:"Who can benefit most from working with Fuse Talent?", a:"Teams building from Seed through Growth, whether you're making your first key hires or scaling at speed. That's our sweet spot, and we know the comp bands, the talent landscape, and what it takes to win at each stage." },
    { q:"How much does it cost?", a:(
      <div className="ft-faq__cost">
        <div className="ft-faq__costGroup">
          <h4 className="ft-faq__costH">Embedded</h4>
          <ul className="ft-faq__costList">
            <li><strong>Part-Time</strong> — $10,000/mo · 20 hrs/week · 1–3 open roles</li>
            <li><strong>Full-Time</strong> — $18,500/mo · 40 hrs/week · 3–6 open roles</li>
            <li>Month-to-month. Average engagement lasts 11 months.</li>
          </ul>
        </div>
        <div className="ft-faq__costGroup">
          <h4 className="ft-faq__costH">Contingent</h4>
          <ul className="ft-faq__costList">
            <li><strong>25% of first-year base salary</strong>, billed on placement</li>
            <li>No retainer, no monthly commitment</li>
          </ul>
        </div>
      </div>
    ) },
    { q:"How long does it take to fill a role?", a:"Median time-to-offer across our last 50 placements was 23 days, with a 90th percentile of 41 days. Real answer: it depends on the role and your process, but we'll commit to a realistic timeline at intake and work hard to hit it." },
    { q:"Do you offer guarantees?", a:"Yes. Standard 90-day replacement guarantee on every placement. We've used it less than 1% of the time." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <div className="ft-faq__wrap">
    <section className="ft-faq" id="faq">
      <div className="ft-faq__head">
        <span className="ft-eyebrow">Questions</span>
        <h2 className="ft-faq__h">Frequently asked.</h2>
      </div>
      <div className="ft-faq__list">
        {qs.map((it,i)=>(
          <div key={i} className={"ft-faq__row" + (i===open ? " is-open":"")}>
            <button className="ft-faq__q" onClick={()=>setOpen(i===open?-1:i)}>
              <span className="ft-faq__n">{String(i+1).padStart(2,"0")}</span>
              <span className="ft-faq__qt">{it.q}</span>
              <span className="ft-faq__plus" aria-hidden>{i===open ? "—" : "—"}</span>
            </button>
            {i===open && <div className="ft-faq__a">{it.a}</div>}
          </div>
        ))}
      </div>
    </section>
    </div>
  );
}

/* ───────────── LEAD CAPTURE ───────────── */
function Lead() {
  const [tab, setTab] = React.useState("hire");
  const [submitted, setSubmitted] = React.useState(false);
  React.useEffect(()=>{ setSubmitted(false); }, [tab]);
  return (
    <section className="ft-lead" id="contact">
      <div className="ft-lead__head">
        <span className="ft-eyebrow ft-eyebrow--light">Let's talk</span>
        <h2 className="ft-lead__h">
          {tab==="hire" && <>Hire with Fuse.</>}
          {tab==="get"  && <>Get hired by the right team.</>}
          {tab==="news" && <>Sharper signals,<br/>once a month.</>}
        </h2>
        <p className="ft-lead__sub">
          {tab==="hire" && "Tell us what you're building and what you're hiring for. We'll get back to you within 24–48 hours."}
          {tab==="get"  && "Drop your details and we'll keep you in mind for roles that match. We won't spam, we know how it feels."}
          {tab==="news" && "Comp bands, market shifts, and one hiring playbook we wish we'd used sooner. Drops on the first Tuesday."}
        </p>
      </div>

      <div className="ft-lead__tabs">
        {[
          {k:"hire",l:"I'm hiring"},
          {k:"get", l:"I want to get hired"},
        ].map(o=>(
          <button key={o.k} className={"ft-lead__tab" + (tab===o.k ? " is-on" : "")} onClick={()=>setTab(o.k)}>{o.l}</button>
        ))}
      </div>

      <form className="ft-lead__form" onSubmit={(e)=>{ e.preventDefault(); setSubmitted(true); }}>
        {submitted ? (
          <div className="ft-lead__ok">
            <div className="ft-lead__okBadge">✓</div>
            <div>
              <div className="ft-lead__okH">Got it.</div>
              <div className="ft-lead__okB">A human at Fuse will be in touch shortly.</div>
            </div>
          </div>
        ) : (
          <>
            {tab==="hire" && (
              <>
                <Field label="Your name" name="name" placeholder="First & last" />
                <Field label="Company" name="company" placeholder="What you're building" />
                <Field label="Work email" name="email" placeholder="you@company.com" />
                <FieldSelect label="What can we help with?" options={["Embedded Recruiting, Part-Time", "Embedded Recruiting, Full-Time", "Contingent Recruiting, pay on placement", "Ashby implementation & support", "Market intelligence & talent maps", "Not sure yet, let's talk"]}/>
                <FieldArea label="Brief on what you're hiring for" placeholder="Roles, headcount, timeline, and any context that would help us scope the search…" />
              </>
            )}
            {tab==="get" && (
              <>
                <Field label="Your name" name="name" placeholder="First & last" />
                <Field label="Email" name="email" placeholder="you@gmail.com" />
                <Field label="Current title" name="title" placeholder="Sr. Software Engineer, …" />
                <Field label="LinkedIn or portfolio" name="link" placeholder="linkedin.com/in/you" />
                <FieldSelect label="Where are you in your search?" options={["Just looking around","Actively interviewing","Open to the right thing","Not searching, just saying hi"]}/>
              </>
            )}
            {tab==="news" && (
              <>
                <Field label="Email" name="email" placeholder="you@company.com" wide />
                <FieldSelect label="What sounds most useful?" options={["Market intel & comp bands","Hiring playbooks","Open roles","All of it"]}/>
              </>
            )}
            <div className="ft-lead__submit">
              <button type="submit" className="ft-btn ft-btn--primary ft-btn--big">
                {tab==="hire" && "Send brief"}
                {tab==="get"  && "Submit profile"}
                {tab==="news" && "Subscribe"}
                <span>→</span>
              </button>
              <span className="ft-lead__fine">We reply within one business day. No newsletter bots, no sales sequences.</span>
            </div>
          </>
        )}
      </form>
    </section>
  );
}

function Field({label, name, placeholder, wide}) {
  return (
    <label className={"ft-fld" + (wide ? " ft-fld--wide":"")}>
      <span className="ft-fld__l">{label}</span>
      <input className="ft-fld__i" name={name} placeholder={placeholder}/>
    </label>
  );
}
function FieldSelect({label, options}) {
  return (
    <label className="ft-fld ft-fld--wide">
      <span className="ft-fld__l">{label}</span>
      <select className="ft-fld__i ft-fld__i--sel">
        {options.map((o,i)=>(<option key={i}>{o}</option>))}
      </select>
    </label>
  );
}
function FieldArea({label, placeholder}) {
  return (
    <label className="ft-fld ft-fld--wide">
      <span className="ft-fld__l">{label}</span>
      <textarea className="ft-fld__i ft-fld__i--area" rows={4} placeholder={placeholder}/>
    </label>
  );
}

/* ───────────── FOOTER ───────────── */
function Foot({ logo }) {
  return (
    <footer className="ft-foot">
      <div className="ft-foot__top">
        <div className="ft-foot__brand">
          <Logo variant={logo} size={18}/>
          <p className="ft-foot__tag">Connect talent. Ignite growth.</p>
        </div>
        <div className="ft-foot__cols">
          <div>
            <h4>Company</h4>
            <a href="#team">Team</a>
            <a href="#model">Our model</a>
            <a href="blog.html">Blog</a>
          </div>
          <div>
            <h4>Services</h4>
            <a href="#services">Embedded recruiting</a>
            <a href="#services">Contingent recruiting</a>
            <a href="#services">Market intelligence</a>
          </div>
          <div>
            <h4>Reach us</h4>
            <a href="mailto:founders@fusetalent.io">founders@fusetalent.io</a>
            <a href="https://www.linkedin.com/company/fusetalent/" target="_blank" rel="noopener noreferrer" referrerPolicy="no-referrer">LinkedIn ↗</a>
          </div>
        </div>
      </div>
      <div className="ft-foot__bot">
        <span>© 2026 Fuse Talent. All rights reserved.</span>
        <span className="ft-foot__fine">Services provided under formal agreement following consultation. No direct purchases through this site.</span>
      </div>
      <div className="ft-foot__giant" aria-hidden>FUSE&nbsp;TALENT</div>
    </footer>
  );
}

Object.assign(window, { Testimonials, Blog, Jobs, FAQ, Lead, Foot });