/* SetOne Labs — site sections: Hero, Offerings, Approach, Capabilities */
const NSS = window.SetOneLabsDesignSystem_88261c;

function scrollTo(id) {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
}

function Hex({ name }) {
  return (
    <span className="svc__hex">
      <svg className="frame" width="56" height="56" viewBox="0 0 100 100" aria-hidden="true">
        <polygon points="50,4 92,27 92,73 50,96 8,73 8,27" fill="none" stroke="var(--border-default)" strokeWidth="2" />
      </svg>
      <NSS.Icon name={name} size={24} />
    </span>
  );
}

function Hero() {
  const { Kicker, Button, MetricStat } = NSS;
  const creds = ['Hedge-fund GP', 'Ex-startup CFO', 'Series 65', 'Quant + ML', 'Big-Four security'];
  const metrics = [
    ['6', 'Workstreams covered'],
    ['2', 'Senior operators, no juniors'],
    ['1', 'Team, fully accountable'],
  ];
  return (
    <section className="hero" id="top">
      <div className="hero__grid" />
      <img className="hero__mark" src={(window.SETONE_LOGOS||{}).icon} alt="" />
      <div className="container hero__in">
        <div data-reveal><Kicker>Analyst support for funds &amp; investors</Kicker></div>
        <h1 data-reveal>Analyst-level execution, <em>principal-level</em> judgment.</h1>
        <p className="hero__lead" data-reveal>A complementary two-person team that works as an extension of your staff — financial modeling, valuation, fundraising, investor materials, market research, and transaction execution. Decision-grade work from day one.</p>
        <div className="hero__cta" data-reveal>
          <Button variant="accent" size="lg" iconRight="arrow-right" onClick={() => scrollTo('contact')}>Request a proposal</Button>
          <Button variant="secondary" size="lg" iconLeft="layers" onClick={() => scrollTo('offering')}>See the offering</Button>
        </div>
        <div className="hero__metrics" data-reveal>
          {metrics.map(([v, l]) => <MetricStat key={l} value={v} label={l} />)}
        </div>
        <div className="hero__creds" data-reveal>
          {creds.map((c) => <span key={c} className="hero__cred">{c}</span>)}
        </div>
      </div>
    </section>
  );
}

const OFFERINGS = [
  ['line-chart', 'Financial & quantitative modeling', 'Three-statement and operating models, fund economics and GP/LP waterfalls, return and scenario models — Excel and Python, built the way an investor reads them.'],
  ['scale', 'Valuation support', 'Comparable company and precedent-transaction analysis, DCF, multiples, and scenario-weighted ranges — assumptions pressure-tested before anyone relies on them.'],
  ['hand-coins', 'Fundraising support', 'Investor decks, fund overviews, PPM support, LP-facing materials, and diligence-response trackers that answer questions before they are asked.'],
  ['presentation', 'Investor materials & PowerPoint', 'IC presentations, market and opportunity decks, target and portfolio profiles, one-page summaries — clear, analytically supported, committee-ready.'],
  ['search', 'Market research', 'Industry sizing, competitive landscapes, growth drivers and risks — thesis-driven sector research with an OSINT-grounded diligence edge.'],
  ['file-check', 'Transaction execution support', 'Target profiles, diligence trackers, data-room review, memo support, and security-grounded technology / cyber due diligence.'],
];

function Offerings() {
  const { Kicker } = NSS;
  return (
    <section className="section section--sunken" id="offering">
      <div className="container">
        <div className="section__head" data-reveal>
          <Kicker number={1}>What we do</Kicker>
          <h2>Six workstreams, one team.</h2>
          <p>SetOne flexes across your highest-priority needs — recurring support and project-based deliverables — and produces work a committee or an investor can act on.</p>
        </div>
        <div className="svc-grid">
          {OFFERINGS.map(([icon, title, desc], i) => (
            <div data-reveal style={{ '--reveal-delay': `${i * 60}ms` }} key={title}>
              <NSS.Card hoverable padding="lg" className="svc">
                <Hex name={icon} />
                <h3>{title}</h3>
                <p>{desc}</p>
              </NSS.Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  ['01', 'Onboarding & prioritization', 'Align on needs, templates, communication norms, active transactions, and key deadlines. Confirm the priority workstreams and near-term deliverables.'],
  ['02', 'Quantitative & materials support', 'Execute on models, valuation, market research, investor materials, and transaction support — applying ML and analytical tooling where they accelerate the work.'],
  ['03', 'Ongoing execution & refinement', 'Iterate and re-validate, revise investor materials, and sustain momentum across investment, fundraising, and transaction workstreams.'],
];

function Approach() {
  const { Kicker } = NSS;
  return (
    <section className="section" id="approach">
      <div className="container">
        <div className="section__head" data-reveal>
          <Kicker number={2}>How we work</Kicker>
          <h2>A phased, practical engagement.</h2>
          <p>Efficient support that lets priorities evolve over time — structured the way we run our own fund and diligence work.</p>
        </div>
        <div className="steps steps--3">
          {STEPS.map(([n, title, desc], i) => (
            <div className="step" data-reveal style={{ '--reveal-delay': `${i * 80}ms` }} key={n}>
              <span className="step__n">{n} —</span>
              <div className="step__bar" />
              <h4>{title}</h4>
              <p>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Capabilities() {
  const { Kicker } = NSS;
  const caps = [
    ['calculator', 'Excel & Python financial models'],
    ['git-branch', 'Fund economics & GP/LP waterfalls'],
    ['scale', 'Comps, precedent & DCF valuation'],
    ['line-chart', 'ML, statistical & systematic modeling'],
    ['presentation', 'Investor decks, PPM & LP materials'],
    ['file-search', 'Diligence, data rooms & memos'],
    ['shield-check', 'Technology & cyber due diligence'],
    ['database', 'Dashboards & data pipelines (Python/SQL)'],
  ];
  return (
    <section className="section cstudy" id="capabilities">
      <div className="cstudy__grid" />
      <div className="container cstudy__in">
        <div data-reveal>
          <Kicker color="var(--teal-400)">Capabilities</Kicker>
          <h2>Decision-grade work, end to end.</h2>
          <p className="cstudy__quote">From the first model to the committee memo — we build the analysis so it holds up under scrutiny and produce materials an investor can act on.</p>
        </div>
        <div className="cap-grid">
          {caps.map(([icon, label], i) => (
            <div className="cap-item" data-reveal style={{ '--reveal-delay': `${i * 40}ms` }} key={label}>
              <NSS.Icon name={icon} size={20} color="var(--teal-400)" />
              <span>{label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SO_SITE = window.SO_SITE || {};
Object.assign(window.SO_SITE, { Hero, Offerings, Approach, Capabilities });