// Page sections for the Stratalytics home page.

const SectionMarker = ({ num, label }) =>
<div className="section-marker">
    <span className="num">{num}</span>
    <span className="dot" />
    <span className="label">{label}</span>
  </div>;


const Nav = ({ accent }) =>
<header className="nav">
    <div className="nav-inner">
      <a href="#" className="brand">
        <span className="brand-mark" style={{ background: accent }} />
        <span className="brand-name">Stratalytics</span>
      </a>
      <nav className="nav-links">
        <a href="#approach">Approach</a>
        <a href="#services">Services</a>
        <a href="#results">Results</a>
        <a href="#team">Team</a>
        <a href="#insights">Insights</a>
      </nav>
      <a href="#contact" className="nav-cta">
        Book a discovery call
        <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </a>
    </div>
  </header>;


const Hero = ({ accent }) => {
  const [now, setNow] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const stamp = now.toISOString().replace('T', ' ').slice(0, 19) + ' UTC';

  return (
    <section className="hero">
      <div className="hero-meta">
        <span>STRATALYTICS / STRATEGY · FINANCE · SUPPLY CHAIN</span>
        <span className="hero-stamp">{stamp}</span>
      </div>

      <div className="hero-body">
        <h1 className="hero-h1">
          Supply Chain and FP&A problem solvers<br />
          <span className="hero-h1-muted" style={{ textAlign: "left", lineHeight: "0.96" }}>for middle market firms.</span>
        </h1>

        <div className="hero-side">
          <p className="hero-lede">
            We work alongside management and sponsors on strategy, FP&amp;A, due diligence,
            and supply chain. Senior operators who use analytics to make better decisions
            faster — at roughly half the cost of a tier-one firm.
          </p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary">
              Book a discovery call
              <svg width="14" height="14" viewBox="0 0 12 12"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
            <a href="#approach" className="btn btn-ghost">How we work</a>
          </div>
        </div>
      </div>

      <div className="hero-chart">
        <div className="chart-frame">
          <div className="chart-header">
            <div>
              <div className="chart-eyebrow">HOW WE WORK — BY DESIGN, NOT BY ACCIDENT</div>
              <div className="chart-title">A small firm, on purpose.</div>
            </div>
          </div>
          <div className="firm-stats">
            <div className="firm-stat">
              <div className="firm-stat-v">3<span>–</span>5</div>
              <div className="firm-stat-l">Active clients in any given year</div>
              <div className="firm-stat-d">We take on only what we can personally lead and deliver upon.</div>
            </div>
            <div className="firm-stat">
              <div className="firm-stat-v">3<span>+</span></div>
              <div className="firm-stat-l">Years, average client tenure</div>
              <div className="firm-stat-d">Most relationships are recurring. Quality of work earns the next engagement.</div>
            </div>
            <div className="firm-stat">
              <div className="firm-stat-v">&lt; 5</div>
              <div className="firm-stat-l">Vetted senior leaders and analytic profesisonals</div>
              <div className="firm-stat-d">We staff each engagement with the right person — or we say no.</div>
            </div>
          </div>
          <div className="firm-foot">
            <span className="firm-foot-label">PROJECTS DECLINED IN 2025</span>
            <span className="firm-foot-v">&gt; 50%</span>
            <span className="firm-foot-d">— when it's outside our wheelhouse, we say so.</span>
          </div>
        </div>
      </div>
    </section>);

};

const Logos = () => {
  const tools = [
  { code: 'BI', name: 'Power BI', cat: 'Reporting & dashboards', href: 'https://powerbi.microsoft.com' },
  { code: 'TBL', name: 'Tableau', cat: 'Visual analytics', href: 'https://www.tableau.com' },
  { code: 'ALT', name: 'Alteryx', cat: 'Data prep & workflows', href: 'https://www.alteryx.com' },
  { code: 'SQL', name: 'SQL', cat: 'Across major dialects', href: 'https://en.wikipedia.org/wiki/SQL' },
  { code: 'SAP', name: 'SAP', cat: 'ERP & extracts', href: 'https://www.sap.com' },
  { code: 'INF', name: 'INFOR', cat: 'ERP & planning', href: 'https://www.infor.com' },
  { code: 'AI', name: 'Claude Code', cat: 'AI-assisted analysis', href: 'https://www.anthropic.com/claude-code' },
  { code: 'XLS', name: 'Excel / VBA', cat: 'Modeling & legacy', href: 'https://www.microsoft.com/microsoft-365/excel' }];

  return (
    <section className="logos">
      <div className="logos-label">TECHNOLOGY PLATFORMS THAT WE CONSIDER OURSELVES EXPERTS IN</div>
      <div className="tools-row">
        {tools.map((t) =>
        <a key={t.name} className="tool-slot" href={t.href} target="_blank" rel="noopener noreferrer">
            <span className="tool-code">{t.code}</span>
            <div className="tool-meta">
              <span className="tool-name">{t.name}</span>
              <span className="tool-cat">{t.cat}</span>
            </div>
            <svg className="tool-arrow" width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
              <path d="M3 9 9 3M4 3h5v5" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        )}
      </div>
    </section>);

};

const Approach = ({ accent }) =>
<section id="approach" className="approach">
    <SectionMarker num="01" label="APPROACH" />
    <div className="approach-grid">
      <h2 className="section-h2">
        What you can expect.<br />
        <span className="muted">Problem solvers who build relationships with your teams. Technical solutions rapidly built by business users.  People who know how to use AI to accelerate project timelines.</span>
      </h2>
      <div className="approach-pillars">
        {[
      { k: '01', t: 'Business judgment, first', d: 'Every engagement is led by a senior strategy, finance, or supply chain operator. We frame the question and the answer in business terms — analytics is how we get there, not what we sell.' },
      { k: '02', t: 'Analytics across your systems', d: 'Automated analytics that pull from disparate ERPs and databases — SAP, INFOR, SQL, finance and ops systems — into one decision-grade view. We build the dashboards your teams actually need without endless requirements-gathering and testing cycles.' },
      { k: '03', t: 'Senior partners on the work', d: 'No pyramids. The person scoping the engagement is the person doing it. We know what teams need to succeed, so we move in weeks where larger firms move in quarters.' },
      { k: '04', t: 'Built for management to own', d: 'Findings, models, and tools are handed back in a form your team can use long after we leave. Clarity over complexity. Always.' }].
      map((p) =>
      <div key={p.k} className="pillar">
            <div className="pillar-k">{p.k}</div>
            <div className="pillar-t">{p.t}</div>
            <div className="pillar-d">{p.d}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


const Services = ({ accent }) => {
  const services = [
  { code: 'STR', title: 'M&A Value Creation', items: ['Value creation plans', 'Growth & margin diagnostics', 'Portfolio & ops reviews', 'Board-ready theses'] },
  { code: 'DIL', title: 'Due Diligence', items: ['Commercial due diligence', 'Operational due diligence', 'Lender financial model creation, 13-week cash flows, and diligence response support', 'Synergy & 100-day action plans'] },
  { code: 'FPA', title: 'FP&A & Finance Automation', items: ['Driver-based forecasting', 'Budgeting & reforecasts', 'Close & reporting cadence', 'Management reporting'] },
  { code: 'SCM', title: 'Supply chain', items: ['Demand & Inventory planning', 'S&OP / ERP Planning & Scheduling', 'Network Optimization', 'Procurement Analytics and Value Creation'] },
  { code: 'ANL', title: 'Analytics Enablement', items: ['Operating KPI architecture', 'Decision-grade dashboards', 'Forecast & scenario models', 'AI-enabled, rapid analytics deliverables'] },
  { code: 'OPS', title: 'Operations performance', items: ['Working capital release', 'Throughput & cycle time', 'Cost-out programs', 'Coaching and development of your teams'] }];

  return (
    <section id="services" className="services">
      <SectionMarker num="02" label="SERVICES" />
      <h2 className="section-h2">
        Six practices.<br />
        <span className="muted">Wired together for value-creation plans.</span>
      </h2>
      <div className="services-grid">
        {services.map((s) =>
        <div key={s.code} className="service-card">
            <div className="service-head">
              <span className="service-code">{s.code}</span>
              <h3>{s.title}</h3>
            </div>
            <ul>
              {s.items.map((i) => <li key={i}><span className="bullet" style={{ background: accent }} />{i}</li>)}
            </ul>
          </div>
        )}
      </div>
    </section>);

};

const Results = ({ accent }) => {
  const cases = [
  {
    sector: 'Industrial / $680M rev', engagement: 'Plant productivity + procurement',
    stats: [{ v: '+38', s: '%', l: 'EBITDA' }, { v: '$14.2', s: 'M', l: 'annualized' }, { v: '14', s: 'wks', l: 'duration' }],
    quote: 'Strata identified $9M of margin we had genuinely written off. The pricing work paid for them in six weeks.',
    attrib: 'Operating Partner, mid-market PE'
  },
  {
    sector: 'Healthcare services / $95M rev', engagement: 'Working capital + S&OP',
    stats: [{ v: '−42', s: '%', l: 'DIO' }, { v: '$11', s: 'M', l: 'cash freed' }, { v: '9', s: 'wks', l: 'to liquidity' }],
    quote: 'They put two senior partners on-site and rebuilt our forecast cadence. We stopped burning $300k a week.',
    attrib: 'CFO, PE-backed services platform'
  },
  {
    sector: 'Specialty distribution / $310M rev', engagement: 'Carve-out + integration',
    stats: [{ v: '100', s: '%', l: 'Day-1 ready' }, { v: '$22', s: 'M', l: 'synergy capture' }, { v: '3.4', s: '×', l: 'fee multiple' }],
    quote: 'We had eight weeks to a Day-1 cutover. Strata was the only firm that didn\'t flinch at the timeline.',
    attrib: 'CEO, NewCo post-carve-out'
  }];


  return (
    <section id="results" className="results">
      <SectionMarker num="03" label="RESULTS" />
      <div className="results-head">
        <h2 className="section-h2">
          Recent work.<br />
          <span className="muted">A selection of engagements.</span>
        </h2>
        <div className="results-summary">
          <div><div className="big-num">3<span className="unit">wks</span></div><div className="lbl">typical time to a decision-grade answer</div></div>
          <div><div className="big-num">100<span className="unit">%</span></div><div className="lbl">senior-led engagements with no associate pyramid</div></div>
        </div>
      </div>

      <div className="case-list">
        {cases.map((c, i) =>
        <article key={i} className="case-row">
            <div className="case-meta">
              <div className="case-num"><span>CASE 0{i + 1}</span></div>
              <div className="case-sector">{c.sector}</div>
              <div className="case-eng">{c.engagement}</div>
            </div>
            <div className="case-stats">
              {c.stats.map((s, j) =>
            <div key={j} className="case-stat">
                  <div className="case-stat-v">{s.v}<span>{s.s}</span></div>
                  <div className="case-stat-l">{s.l}</div>
                </div>
            )}
            </div>
            <div className="case-quote">
              <p>“{c.quote}”</p>
              <div className="case-attrib">— {c.attrib}</div>
            </div>
          </article>
        )}
      </div>
    </section>);

};

const Compare = ({ accent }) => {
  const rows = [
  ['Who leads the work', 'Senior operator with deep experience', 'Analyst learning your business'],
  ['Engagement shape', 'Small team, deep in the work', 'Tiered pyramid, weekly readouts'],
  ['Time to a useful answer', '~3 weeks', '2–4 months'],
  ['Analytics philosophy', 'Built to change a decision', 'Built to fill a deck'],
  ['Handover', 'Models and findings your team owns', 'Vendor lock-in or retainer'],
  ['Typical engagement cost', '$50K – $200K', '$750K – $3M+']];

  return (
    <section className="compare">
      <SectionMarker num="04" label="ECONOMICS" />
      <h2 className="section-h2">
        Sharper. Faster. Senior.<br />
        <span className="muted">vs. a tier-one firm or analytics-first vendor.</span>
      </h2>
      <div className="compare-table">
        <div className="compare-row compare-head">
          <div></div>
          <div className="compare-us">
            <span className="brand-mark sm" style={{ background: accent }} /> Stratalytics
          </div>
          <div className="compare-them">Tier-one strategy firm</div>
        </div>
        {rows.map((r, i) =>
        <div key={i} className="compare-row">
            <div className="compare-label">{r[0]}</div>
            <div className="compare-us-v">{r[1]}</div>
            <div className="compare-them-v">{r[2]}</div>
          </div>
        )}
      </div>
    </section>);

};

const Team = () =>
<section id="team" className="team">
    <SectionMarker num="05" label="TEAM" />
    <h2 className="section-h2">
      Operators who've sat in the seat.<br />
      <span className="muted">A partnership of former CEOs, COOs, and CPOs.</span>
    </h2>
    <div className="team-grid">
      {[
    { n: 'Partner — Strategy & Value Creation', bg: 'Former operating partner. 20+ yrs across PE-backed value creation plans.' },
    { n: 'Partner — FP&A & Finance', bg: 'Former Head of FP&A, public industrial. Driver-based forecasting and management reporting.' },
    { n: 'Partner — Supply Chain', bg: 'Former VP Planning, Fortune 500 distributor. S&OP and inventory analytics.' },
    { n: 'Partner — Due Diligence', bg: 'Former CFO. Commercial and operational diligence across 60+ transactions.' },
    { n: 'Partner — Operations', bg: 'Former COO, mid-market manufacturer. Working capital and throughput.' },
    { n: 'Partner — Analytics Enablement', bg: 'Finance leader turned analytics builder. Models that change decisions.' }].
    map((p, i) =>
    <div key={i} className="team-card">
          <div className="team-photo">
            <span className="photo-tag">PHOTO</span>
          </div>
          <div className="team-name">{p.n}</div>
          <div className="team-bg">{p.bg}</div>
        </div>
    )}
    </div>
  </section>;


const Insights = ({ accent }) =>
<section id="insights" className="insights">
    <SectionMarker num="06" label="INSIGHTS" />
    <div className="insights-head">
      <h2 className="section-h2">From the field.</h2>
      <a href="#" className="link-arrow">All insights →</a>
    </div>
    <div className="insights-grid">
      {[
    { t: 'The diligence question most QofE reports miss', d: 'How a working-capital lens changes what an LOI should be worth.', tag: 'ESSAY', read: '7 min' },
    { t: 'Forecasts that change behavior, not dashboards that decorate it', d: 'A practical bar for whether your FP&A function is actually adding value.', tag: 'PLAYBOOK', read: '6 min' },
    { t: 'S&OP for the middle market — without the platform fight', d: 'How to run a real planning cadence with the data and tools you already have.', tag: 'PLAYBOOK', read: '9 min' }].
    map((p, i) =>
    <a key={i} href="#" className="insight-card">
          <div className="insight-meta">
            <span className="insight-tag">{p.tag}</span>
            <span className="insight-read">{p.read} read</span>
          </div>
          <div className="insight-title">{p.t}</div>
          <div className="insight-desc">{p.d}</div>
          <div className="insight-arrow">Read →</div>
        </a>
    )}
    </div>
  </section>;


const CTA = ({ accent }) =>
<section id="contact" className="cta">
    <div className="cta-inner">
      <div className="cta-eyebrow">DISCOVERY CALL — 30 MINUTES, NO DECK</div>
      <h2 className="cta-h2">
        Let's talk about opportunities in your business.<br />
        If we are confident that we can help, we'll come back with an efficient solution to address it.
      </h2>
      <div className="cta-form">
        <div className="cta-field"><label>Name</label><input placeholder="Jane Doe" /></div>
        <div className="cta-field"><label>Firm</label><input placeholder="Capital partners" /></div>
        <div className="cta-field"><label>Email</label><input placeholder="jane@firm.com" /></div>
        <div className="cta-field"><label>Situation</label><input placeholder="Pre-LOI diligence on a $120M industrial..." /></div>
        <button className="btn btn-primary cta-submit">
          Request a call
          <svg width="14" height="14" viewBox="0 0 12 12"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </button>
      </div>
      <div className="cta-foot">
        Or email <span className="mono-link">problemsolvers@stratalytics.io</span> directly.
      </div>
    </div>
  </section>;


const Footer = ({ accent }) =>
<footer className="footer">
    <div className="footer-grid">
      <div className="footer-brand">
        <div className="brand">
          <span className="brand-mark" style={{ background: accent }} />
          <span className="brand-name">Stratalytics</span>
        </div>
        <div className="footer-tag">Strategy and finance, sharpened by analytics.</div>
      </div>
      <div className="footer-col">
        <div className="footer-h">Practices</div>
        <a href="#">Strategy & value creation</a>
        <a href="#">Due diligence</a>
        <a href="#">FP&A & finance</a>
        <a href="#">Supply chain</a>
        <a href="#">Analytics enablement</a>
      </div>
      <div className="footer-col">
        <div className="footer-h">Firm</div>
        <a href="#">About</a>
        <a href="#">Team</a>
        <a href="#">Insights</a>
        <a href="#">Careers</a>
      </div>
      <div className="footer-col">
        <div className="footer-h">Contact</div>
        <a href="mailto:problemsolvers@stratalytics.io">problemsolvers@stratalytics.io</a>
        <a href="#">Phoenix · Atlanta · New York</a>
      </div>
    </div>
    <div className="footer-base">
      <span>© 2026 Stratalytics LLC</span>
      <span className="mono">v.2026.05 / build {Math.floor(Math.random() * 9000 + 1000)}</span>
    </div>
  </footer>;


Object.assign(window, { Nav, Hero, Logos, Approach, Services, Results, Compare, Team, Insights, CTA, Footer });