/* global React */
const { useState, useEffect } = React;

/* ---------------- Header ---------------- */
function SiteHeader() {
  const [stuck, setStuck] = useState(false);
  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={'site-header' + (stuck ? ' is-stuck' : '')}>
      <div className="container site-header__inner">
        <img className="brand-lockup" src="assets/lockup-horizontal.svg" alt="The Chief Data Scientist" />
        <nav className="site-nav">
          <span className="nav-links" style={{ display: 'flex', gap: 'var(--space-6)' }}>
            <a href="#services">Services</a>
            <a href="#approach">Approach</a>
            <a href="#proof">Proof</a>
            <a href="#about">About</a>
            <a href="/blog.html">Blog</a>
          </span>
          <a className="cds-btn cds-btn--primary cds-btn--sm" href="#contact">Book a session</a>
        </nav>
      </div>
    </header>
  );
}

/* ---------------- Hero ---------------- */
function SiteHero() {
  return (
    <section className="hero">
      <div className="hero__grid" />
      <img className="hero__nodes" src="assets/motif-nodes.svg" alt="" />
      <div className="container hero__inner">
        <span className="eyebrow eyebrow--dark"><span className="cds-tick" /> Fractional C-Level Executive · Private Equity Focused</span>
        <h1 style={{ marginTop: 'var(--space-5)' }}>
          De-risk the deal.<br /><span className="accent">Unlock the data.</span><br />Maximize the exit.
        </h1>
        <p className="hero__lede">
          We embed with PE firms and their portfolio companies — from diligence through
          exit — so data, analytics, and AI become a value-creation lever, not a line item.
        </p>
        <div className="hero__cta">
          <a className="cds-btn cds-btn--ghost cds-btn--lg" style={{ color: 'var(--teal-400)' }} href="#services">See how we work&nbsp;→</a>
        </div>
        <div className="hero__meta">
          <div className="cds-stat"><div className="cds-stat__value">30<em>%</em></div><div className="cds-stat__label">Higher multiples at exit</div></div>
          <div className="cds-stat"><div className="cds-stat__value">50<em>%</em></div><div className="cds-stat__label">Lower infrastructure cost</div></div>
          <div className="cds-stat"><div className="cds-stat__value">5<em>+ yr</em></div><div className="cds-stat__label">Avg. client engagement</div></div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Lifecycle stepper ---------------- */
const PHASES = [
  { idx: '01', name: 'Due Diligence', detail: 'Technical and data diligence in deal timelines. We surface platform debt, AI readiness, and the cost-to-fix — so you price risk before you sign.' },
  { idx: '02', name: 'Value Creation', detail: 'Embedded as fractional Chief Data Scientist: rebuild the data platform, ship ROI-driven analytics & AI, and build the team and culture to sustain it.' },
  { idx: '03', name: 'Exit', detail: 'Package the data and AI story for the next buyer. We turn capability into a defensible, diligence-ready narrative that lifts the multiple.' },
];
function SiteLifecycle() {
  const [active, setActive] = useState(1);
  return (
    <section className="section" id="approach">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow"><span className="cds-tick" /> The Engagement Arc</span>
          <h2>One advisor across the whole investment lifecycle.</h2>
          <p>From the first data room to the exit memo — continuity that compounds.</p>
        </div>
        <div className="lifecycle">
          {PHASES.map((p, i) => (
            <div key={p.idx} className={'phase' + (i === active ? ' is-active' : '')}
              onMouseEnter={() => setActive(i)} onClick={() => setActive(i)}>
              <div className="phase__idx">{p.idx} {i < 2 ? '→' : ''}</div>
              <div className="phase__name">{p.name}</div>
              <div className="phase__detail">{p.detail}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Services ---------------- */
const SERVICES = [
  { icon: 'database', name: 'Data Platforms', body: 'Architecture, governance, and migration that turn fragmented data into a value-creation asset.' },
  { icon: 'server', name: 'Technology Infrastructure', body: 'Scalable, cost-effective infrastructure — enterprise-grade and built to survive the constantly changing future.' },
  { icon: 'box', name: 'Product Development', body: 'Turn data into shippable, monetizable product. Roadmaps tied to long-term strategic plan and value-creation.' },
  { icon: 'brain-circuit', name: 'Analytics & AI', body: 'Real-world, ROI-driven models — not science projects. Measured against enterprise value.' },
  { icon: 'users', name: 'Culture & Coaching', body: 'Executive coaching and capability-building so the organization sustains the gains after exit.' },
  { icon: 'shield-check', name: 'Risk & Readiness', body: 'AI governance, security, and data-risk posture — de-risked before it reaches the data room.' },
];
function SiteServices() {
  return (
    <section className="section section--sunk" id="services">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow"><span className="cds-tick" /> What we do</span>
          <h2>Senior capability across the data, technology, and AI stack.</h2>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s) => (
            <div className="svc cds-card" key={s.name} style={{ padding: 'var(--space-6)' }}>
              <span className="svc__icon"><i data-lucide={s.icon} /></span>
              <h3>{s.name}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Engagement models ---------------- */
const MODELS = [
  { tag: 'Embedded', name: 'Fractional C-Level', items: ['Chief Data / Chief Technology / Chief Product / AI Officer, part-time', 'Owns the agenda', 'Works with Existing Teams or Builds a New Team'] },
  { tag: 'Project', name: 'Consultant', items: ['Diligence & value-creation sprints', 'Strategic plan development', 'Data Platform and AI build-outs', 'Compliance & regulatory oversight', 'Defined scope, fast outcomes'] },
  { tag: 'Governance', name: 'Board Advisor', items: ['Independent data, technology, product, and AI oversight', 'Risk and readiness reviews', 'Exit-narrative guidance'] },
];
function SiteModels() {
  return (
    <section className="section">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow"><span className="cds-tick" /> How we engage</span>
          <h2>Three ways to bring a Chief Data Scientist to the table.</h2>
        </div>
        <div className="models">
          {MODELS.map((m) => (
            <div className="model" key={m.name}>
              <div className="model__tag">{m.tag}</div>
              <h3>{m.name}</h3>
              <ul>{m.items.map((it) => <li key={it}>{it}</li>)}</ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteParts1 = { SiteHeader, SiteHero, SiteLifecycle, SiteServices, SiteModels };