// sections-a.jsx — Pillars · Services · Process · Work · Team

/* ───────────── PILLARS ───────────── */
function Pillars() {
  const orbit = [
  { name: "Juicebox", src: "assets/logos-tech/juicebox.png", pos: "tl", cls: "ft-hub__img--juicebox", hubAnchor: "tl", nodeAnchor: "br", style: "solid" },
  { name: "Metaview", src: "assets/logos-tech/metaview.svg", pos: "tr", cls: "ft-hub__img--metaview", hubAnchor: "tr", nodeAnchor: "bl", style: "dotted" },
  { name: "Exa", src: "assets/logos-tech/exa.svg", pos: "ml", cls: "ft-hub__img--exa", hubAnchor: "l", nodeAnchor: "r", style: "dotted" },
  { name: "Ashby", src: "assets/logos-tech/ashby.svg", pos: "mr", cls: "ft-hub__img--ashby", hubAnchor: "r", nodeAnchor: "l", style: "solid" },
  { name: "Notion", src: "assets/logos-tech/notion.png", pos: "bl", contain: true, cls: "ft-hub__img--notion", hubAnchor: "bl", nodeAnchor: "tr", style: "solid" },
  { name: "Slack", src: "assets/logos-tech/slack.svg", pos: "br", contain: true, cls: "ft-hub__img--slack", hubAnchor: "br", nodeAnchor: "tl", style: "dotted" }];

  const hubRef = React.useRef(null);
  const claudeRef = React.useRef(null);
  const nodeRefs = React.useRef([]);
  const [lines, setLines] = React.useState([]);

  React.useLayoutEffect(() => {
    const compute = () => {
      const hub = hubRef.current;
      const claude = claudeRef.current;
      if (!hub || !claude) return;
      const hubR = hub.getBoundingClientRect();
      const cr = claude.getBoundingClientRect();
      const hubCenter = {
        x: cr.left - hubR.left + cr.width / 2,
        y: cr.top - hubR.top + cr.height / 2
      };
      const out = orbit.map((o, i) => {
        const el = nodeRefs.current[i];
        if (!el) return null;
        const nr = el.getBoundingClientRect();
        const nodeCenter = {
          x: nr.left - hubR.left + nr.width / 2,
          y: nr.top - hubR.top + nr.height / 2
        };
        // Draw straight line node center → hub center. Each box has higher
        // z-index than the SVG so the portion inside the box is visually masked,
        // leaving only the segment between the two edges visible. Diagonal pairs
        // with mirrored node positions form a single straight line through the
        // hub center — true X geometry.
        return {
          x1: nodeCenter.x, y1: nodeCenter.y,
          x2: hubCenter.x, y2: hubCenter.y,
          style: o.style
        };
      }).filter(Boolean);
      setLines(out);
    };
    compute();
    const ro = new ResizeObserver(compute);
    if (hubRef.current) ro.observe(hubRef.current);
    window.addEventListener("resize", compute);
    // recompute once after fonts/images load
    const t = setTimeout(compute, 200);
    return () => { ro.disconnect(); window.removeEventListener("resize", compute); clearTimeout(t); };
  }, []);

  return (
    <section className="ft-pill" id="about">
      <div className="ft-pill__inner">
      <div className="ft-pill__head">
        <span className="ft-eyebrow">How we operate</span>
        <h2 className="ft-pill__h">People-powered. <em>Technology-driven.</em></h2>
        <p className="ft-pill__sub">The best tools in recruiting, wired together by people who know what good looks like.</p>
      </div>

      <div className="ft-hub" ref={hubRef} aria-label="Operating stack with Claude at the center">
        <div className="ft-hub__bg" aria-hidden="true">
          <span className="ft-hub__ring ft-hub__ring--1"></span>
          <span className="ft-hub__ring ft-hub__ring--2"></span>
          <span className="ft-hub__ring ft-hub__ring--3"></span>
          <span className="ft-hub__glow"></span>
        </div>

        <svg className="ft-hub__lines" aria-hidden="true">
          {lines.map((l, i) =>
            <line key={i}
              x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2}
              stroke="rgba(247,243,233,.58)" strokeWidth="2"
              strokeLinecap="round"
            />
          )}
        </svg>

        <div className="ft-hub__center">
          <div className="ft-hub__halo" aria-hidden="true"></div>
          <div className="ft-hub__claude" ref={claudeRef} aria-label="Claude">
            <img src="assets/logos-tech/claude-mark.svg" alt="Claude" />
          </div>
          <span className="ft-hub__claudeLbl">Claude</span>
        </div>

        {orbit.map((o, i) =>
          <div key={i}
            ref={(el) => { nodeRefs.current[i] = el; }}
            className={"ft-hub__node ft-hub__node--" + o.pos + (o.contain ? " ft-hub__node--icon" : "")}>
            <img src={o.src} alt={o.name} className={o.cls} />
          </div>
        )}
      </div>
      </div>
    </section>);

}

/* ───────────── SERVICES (tabbed) ───────────── */
function Services() {
  const [tab, setTab] = React.useState(0);
  const tabs = [
  {
    label: "Embedded Recruiting",
    eyebrow: "Embedded · Recruiting"
  },
  {
    label: "Contingent Recruiting",
    eyebrow: "Contingent · Recruiting"
  }];


  const tabHeads = [
  {
    crumb: "Embedded · Recruiting",
    lede: "",
    body: "Senior recruiting leadership, full-funnel ownership, and weekly receipts. No black-box recruiting."
  },
  {
    crumb: "Contingent · Recruiting",
    lede: "25% of first year base salary.",
    body: "We take on a limited number of contingent searches each quarter. You get access to the Fuse talent network and active sourcing and screening — no retainer, no monthly commitment. You pay on the hire."
  }];
  const head = tabHeads[tab];

  return (
    <section className="ft-svc" id="model">
      <div className="ft-svc__masthead">
        <h2 className="ft-svc__h">Our model.</h2>
      </div>

      <div className="ft-svc__tabs" role="tablist">
        {tabs.map((t, i) =>
        <button key={i} className={"ft-svc__tab" + (i === tab ? " is-on" : "")} onClick={() => setTab(i)}>
            <span className="ft-svc__tabL">{t.label}</span>
          </button>
        )}
      </div>

      <div className="ft-svc__intro" key={tab}>
        <div className="ft-svc__introL">
          <span className="ft-svc__crumb">{head.crumb}</span>
          {head.lede && <h3 className="ft-svc__introLede">{head.lede}</h3>}
          <p className={"ft-svc__introBody" + (head.lede ? "" : " ft-svc__introBody--lead")}>{head.body}</p>
          {tab === 1 &&
          <a href="#contact" className="ft-btn ft-btn--primary ft-svc__introCta">Start a contingent search <span>→</span></a>
          }
        </div>
        {tab === 0 &&
        <figure className="ft-svc__quote ft-svc__introR">
          <span className="ft-svc__quoteMark" aria-hidden>{"\u201C"}</span>
          <p className="ft-svc__quoteQ">It felt, from the very beginning, like an extension of our team — you guys just got it and moved really quickly. There was very little room for even giving feedback; you were so on point from the beginning.</p>
          <hr className="ft-svc__quoteRule" aria-hidden />
          <figcaption className="ft-svc__quoteCap">
            <img className="ft-svc__quoteAvatar" src="assets/marlene.jpeg" alt="Marlene Guardado" />
            <div className="ft-svc__quoteWho">
              <span className="ft-svc__quoteName">Marlene Guardado</span>
              <span className="ft-svc__quoteRole">Recruiting Lead, Middesk · YC + Sequoia</span>
            </div>
          </figcaption>
        </figure>
        }
        {tab === 1 &&
        <ul className="ft-svc__list ft-svc__introR">
          <li><span className="ft-svc__bullet">✦</span>No retainer, no risk</li>
          <li><span className="ft-svc__bullet">✦</span>Access to the Fuse talent network</li>
          <li><span className="ft-svc__bullet">✦</span>Active sourcing and screening included</li>
          <li><span className="ft-svc__bullet">✦</span>Roles across EPD, GTM, Operations and leadership</li>
          <li><span className="ft-svc__bullet">✦</span>Delivered where your hiring lives — Slack, Email, Greenhouse, Ashby</li>
        </ul>
        }
      </div>

      {tab === 0 &&
      <div className="ft-svc__embed">
          <div className="ft-tier">
            <div className="ft-tier__row">
              <article className="ft-tier__card">
                <div className="ft-tier__top">
                  <span className="ft-tier__tag">Part-Time</span>
                  <span className="ft-tier__lim">Limited to 2 engagements</span>
                </div>
                <div className="ft-tier__body">
                  <div className="ft-tier__specs">
                    <div className="ft-tier__spec"><span className="ft-tier__specV">20<span className="ft-tier__specU">hours of human work / wk</span></span></div>
                    <div className="ft-tier__spec"><span className="ft-tier__specV">1–3<span className="ft-tier__specU">roles</span></span></div>
                  </div>
                  <div className="ft-tier__price">
                    <span className="ft-tier__priceN">$10,000</span>
                    <span className="ft-tier__priceU">/ mo</span>
                  </div>
                </div>
                <a href="#contact" className="ft-btn ft-btn--primary ft-tier__cta">Start with Part-Time <span>→</span></a>
              </article>

              <article className="ft-tier__card ft-tier__card--feat">
                <div className="ft-tier__top">
                  <span className="ft-tier__tag">Full-Time</span>
                  <span className="ft-tier__lim">Limited to 1 engagement</span>
                </div>
                <div className="ft-tier__body">
                  <div className="ft-tier__specs">
                    <div className="ft-tier__spec"><span className="ft-tier__specV">40<span className="ft-tier__specU">hours of human work / wk</span></span></div>
                    <div className="ft-tier__spec"><span className="ft-tier__specV">3–6<span className="ft-tier__specU">roles</span></span></div>
                  </div>
                  <div className="ft-tier__price">
                    <span className="ft-tier__priceN">$18,500</span>
                    <span className="ft-tier__priceU">/ mo</span>
                  </div>
                </div>
                <a href="#contact" className="ft-btn ft-btn--primary ft-tier__cta">Start with Full-Time <span>→</span></a>
              </article>
            </div>
          </div>

          <div className="ft-emb__incl">
            <div className="ft-emb__inclHead">
              <span className="ft-emb__eyebrow">What's included in every engagement</span>
            </div>
            <ul className="ft-emb__grid">
              <li className="ft-emb__item">
                <h4 className="ft-emb__h">Founder-led on every engagement</h4>
                <p className="ft-emb__b">Strategy, intake, and stakeholder management led by a founder, not a junior account manager.</p>
              </li>
              <li className="ft-emb__item">
                <h4 className="ft-emb__h">Full-funnel ownership</h4>
                <p className="ft-emb__b">Intake, sourcing, outreach, screening, and ATS hygiene, run end-to-end as if we were in-house.</p>
              </li>
              <li className="ft-emb__item">
                <h4 className="ft-emb__h">Weekly pipeline reports</h4>
                <p className="ft-emb__b">A live read on every role: pipeline health, response rates, stage conversion, and what's stuck.</p>
              </li>
              <li className="ft-emb__item">
                <h4 className="ft-emb__h">Monthly + quarterly deep dives</h4>
                <p className="ft-emb__b">Funnel benchmarks, comp signals, and process tweaks reviewed with your hiring leaders.</p>
              </li>
              <li className="ft-emb__item">
                <h4 className="ft-emb__h">In your Slack, on your standups</h4>
                <p className="ft-emb__b">We work the way your best internal recruiter would. Async-friendly, always reachable.</p>
              </li>
              <li className="ft-emb__item">
                <h4 className="ft-emb__h">Month-to-month, two weeks notice</h4>
                <p className="ft-emb__b">Flex up, flex down, or pause. No long-term contracts, no clawback games.</p>
              </li>
            </ul>
          </div>
        </div>
      }

      {tab === 1 && null}

      <div className="ft-svc__add">
        <div className="ft-svc__addHead">
          <span className="ft-eyebrow">Additional Services</span>
        </div>
        <article className="ft-svc__addCard">
          <div className="ft-svc__addLeft">
            <span className="ft-svc__crumb">Ashby Support · Certified</span>
            <h3 className="ft-svc__addH">Certified Ashby experts.<br />Set up to scale.</h3>
            <p className="ft-svc__body">We're certified Ashby partners. Whether you're standing it up for the first time or unblocking a stalled rollout, we build the workflows and own the implementation.</p>
            <a href="#contact" className="ft-btn ft-btn--ghost">Talk to us about Ashby <span>→</span></a>
          </div>
          <div className="ft-svc__addRight">
            <img src="assets/ashby-expert.png" alt="Certified Ashby Expert" className="ft-svc__addBadge" />
          </div>
        </article>
      </div>
    </section>);

}

/* ───────────── PROCESS ───────────── */
function Process() {
  const steps = [
  { n: "01", h: "Smart talent sourcing", s: "Beyond LinkedIn.", b: "We target the companies and teams that match your bar and product. Warm intros, alumni networks, and signal layers tailored to your role. You get a pipeline of people who'd actually take your call." },
  { n: "02", h: "Personalized outreach at scale", s: "Messaging that respects time.", b: "Role-specific outreach tested against real response data. The right candidates open and reply because we write like recruiters who've done the job." },
  { n: "03", h: "Built to scale", s: "Systems, not heroics.", b: "Documented intake, structured reviews, captured feedback, weekly reporting. Recruiting that runs on a system — so the work doesn't depend on someone remembering to follow up." },
  { n: "04", h: "Advanced screening", s: "Calibrated to your bar.", b: "Pre-screens built around your actual hiring criteria. Mismatches caught early so your calendar stays focused on the right shortlist." },
  { n: "05", h: "Confident closures", s: "Comp intel and candidate truth.", b: "Live comp data and candidate motivations mapped early. We stay close to candidates and help you close." }];

  return (
    <section className="ft-proc">
      <div className="ft-proc__head">
        <span className="ft-eyebrow">How we deliver</span>
        <h2 className="ft-proc__h">Intelligent hiring,<br /><em>start to finish.</em></h2>
      </div>
      <ol className="ft-proc__list">
        {steps.map((s, i) =>
        <li key={i} className="ft-proc__row">
            <div className="ft-proc__n">{s.n}</div>
            <div className="ft-proc__title">
              <div className="ft-proc__h2">{s.h}</div>
              <div className="ft-proc__sub">{s.s}</div>
            </div>
            <div className="ft-proc__b">{s.b}</div>
          </li>
        )}
      </ol>
    </section>);

}

/* ───────────── WORK / CASE STUDIES ───────────── */
function Work() {
  const cases = [
  {
    client: "Paraform",
    role: "Seed → Series B",
    headline: "Placed 40% of the founding engineering team. Staff-level and product engineers.",
    meta: ["40% of founding eng", "Seed → Series B", "Staff / Product Eng"],
    tone: "a"
  },
  {
    client: "Juicebox",
    role: "Series A → B",
    headline: "Placed 20% of the founding team across design, engineering, and GTM.",
    meta: ["20% of founding team", "Series A → B", "Design · Eng · GTM"],
    tone: "b"
  },
  {
    client: "Middesk",
    role: "Series B",
    headline: "10+ placements including an engineering manager and mid-to-staff engineers.",
    meta: ["10+ hires", "Series B", "Eng leadership + ICs"],
    tone: "c"
  },
  {
    client: "Mintlify",
    role: "Series A → B",
    headline: "AE, software engineer, marketing manager and solutions engineer. Across the company.",
    meta: ["Cross-functional", "Series A → B", "Eng · GTM · Marketing"],
    tone: "d"
  },
  {
    client: "Linear",
    role: "Series B → C",
    headline: "iOS engineer and product engineer for one of the most-watched product teams in tech.",
    meta: ["2 senior hires", "Series B → C", "iOS · Product Eng"],
    tone: "a"
  }];

  return (
    <section className="ft-work" id="work">
      <div className="ft-work__head">
        <span className="ft-eyebrow">Selected work</span>
        <h2 className="ft-work__h">Receipts.</h2>
        <p className="ft-work__sub">A few of the engagements we're proud of. Most of our work is under NDA. We'll walk you through the rest on a call.</p>
      </div>
      <div className="ft-work__grid">
        {cases.map((c, i) =>
        <a key={i} className={`ft-work__card ft-work__card--${c.tone}`} href="#">
            <div className="ft-work__cardTop">
              <span className="ft-work__client">{c.client}</span>
              <span className="ft-work__role">{c.role}</span>
            </div>
            <div className="ft-work__visual">
              <svg viewBox="0 0 200 120" preserveAspectRatio="none" width="100%" height="100%">
                <defs>
                  <pattern id={`stripe-${i}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                    <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="1.5" opacity=".25" />
                  </pattern>
                </defs>
                <rect width="200" height="120" fill={`url(#stripe-${i})`} />
              </svg>
              <span className="ft-work__visualTxt">{c.client.toLowerCase()}.case</span>
            </div>
            <div className="ft-work__headline">{c.headline}</div>
            <div className="ft-work__meta">
              {c.meta.map((m, j) => <span key={j}>{m}</span>)}
            </div>
            <div className="ft-work__more">Read case <span>→</span></div>
          </a>
        )}
      </div>
    </section>);

}

/* ───────────── TEAM ───────────── */
function Team() {
  const team = [
  { name: "Drew Venerable", role: "Co-founder", bio: "Drew leads commercial relationships and senior EPD recruiting at Fuse. He specializes in hard-to-fill searches, combining recruiter instinct, modern sourcing strategy, and AI-native workflows to surface exceptional talent quickly.", tag: "DV", hue: 18, photo: "assets/drew.jpg", photoPos: "50% 25%", linkedin: "https://www.linkedin.com/in/drew-venerable-656390143/", cal: "https://cal.com/drew-venerable/30min" },
  { name: "Veronica Venerable", role: "Co-founder", bio: "Veronica leads commercial relationships and EPD recruiting with the instincts of a first startup recruiter. She's known for building rare trust with founders and candidates alike — the kind of relationship depth that lasts well beyond the placement.", tag: "VV", hue: 32, photo: "assets/veronica.jpg", photoPos: "45% 28%", linkedin: "https://www.linkedin.com/in/veronicavenerable/", cal: "https://cal.com/veronicavnrbl/phone-call" },
  { name: "Tommy Lee", role: "Senior Recruiter", bio: "Tommy recruits across EPD and GTM with a relationship-first style and a referral engine that compounds. Persistent, warm, and deeply trusted by candidates, one great conversation often becomes the next three.", tag: "TL", hue: 200, photo: "assets/tommy.png", photoPos: "50% 28%", linkedin: "https://www.linkedin.com/in/thomas-lee-637641148/", cal: "https://cal.com/tommy-lee-23/fuse-intro-chat" },
  { name: "Austin Lee", role: "Senior Recruiter", bio: "Austin recruits across EPD and GTM with pace, discipline, and a consistently high bar. He drives serious interview volume, moves searches quickly, and keeps quality high through every stage of the process.", tag: "AL", hue: 140, photo: "assets/austin.png", photoPos: "50% 22%", linkedin: "https://www.linkedin.com/in/austin-lee-09b696166/", cal: "https://cal.com/austin-lee-wxjiao/quick-intro-call" }];

  return (
    <section className="ft-team" id="team">
      <div className="ft-team__head">
        <span className="ft-eyebrow">Who you'll work with</span>
        <h2 className="ft-team__h">Your team, extended.</h2>
        <p className="ft-team__sub">Just a small senior team working alongside you from kickoff to close.</p>
      </div>
      <div className="ft-team__grid">
        {team.map((m, i) =>
        <article key={i} className="ft-team__card">
            <div className={`ft-team__portrait${m.photo ? ' ft-team__portrait--photo' : ''}`} style={m.photo ? undefined : { background: `linear-gradient(135deg, oklch(.78 .08 ${m.hue}), oklch(.62 .12 ${m.hue + 20}))` }}>
              {m.photo && <img src={m.photo} alt={m.name} className="ft-team__photo" style={{ objectPosition: m.photoPos || '50% 30%', transform: m.photoZoom ? `scale(${m.photoZoom})` : 'none', transformOrigin: m.photoPos || '50% 30%' }} />}
              {!m.photo && <span className="ft-team__initials">{m.tag}</span>}
              {!m.photo && <span className="ft-team__placeholder">portrait</span>}
            </div>
            <div className="ft-team__body">
              <div className="ft-team__name">{m.name}</div>
              <div className="ft-team__role">{m.role}</div>
              <p className="ft-team__bio">{m.bio}</p>
              <div className="ft-team__links">
                <a href={m.linkedin || "#"} target="_blank" rel="noopener noreferrer" referrerPolicy="no-referrer">LinkedIn ↗</a>
                <a href={m.cal || "#"} target="_blank" rel="noopener noreferrer" referrerPolicy="no-referrer">Book an intro ↗</a>
              </div>
            </div>
          </article>
        )}
      </div>
    </section>);

}

Object.assign(window, { Pillars, Services, Process, Work, Team });