// What Tokaro does + Workgraph + Executives + Thesis + CTA + Footer
const Product = () =>
<section id="product" className="product">
    <div className="section-eyebrow">02 — The platform</div>
    <h2 className="section-h">See it. Shape it. Run it.

  </h2>
    <p className="section-sub">Your best teams are getting results. Your AI pilots are producing results in pockets. But nobody can see it all working together. The moment work crosses a team boundary or moves between a human and an AI agent, visibility disappears. What you can't see, you can't fix. And by the time it surfaces, it's already a problem downstream.</p>
    <p className="section-sub">Tokaro gives leaders a single view across their human and AI workforce, and the tools to design and manage it as one system.</p>

    <div className="product-stack">
      <article className="motion">
        <div className="motion-tag">See</div>
        <div className="motion-body">
          <h3 className="motion-h">See how work flows today.</h3>
          <p>Through guided conversations, Tokaro helps leaders see what is actually happening. It surfaces the tasks and handoffs where friction lives, the work that crosses team boundaries with no clear owner, and the informal workarounds that have quietly become permanent. It also makes visible the growing sprawl of AI tools and agents that are doing work in silos, with no one accountable for how they fit together. The output is a current‑state workgraph of how work moves across teams.

        </p>
          <ul className="motion-list">
            <li>Tasks with no clear owner</li>
            <li>Workarounds teams rely on to get work done</li>
            <li>Handoffs where work crosses team boundaries and degrades</li>
            <li>AI tools and agents doing work in silos, with no clear owner</li>
          </ul>
        </div>
      </article>

      <article className="motion">
        <div className="motion-tag">Shape</div>
        <div className="motion-body">
          <h3 className="motion-h">Shape the future workgraph.</h3>
          <p>Once you can see how work actually moves, your team can make clear decisions about what comes next. For each task: should it remain human, be automated, be delivered by an AI agent, augmented by one, or eliminated? Where does judgment need to stay close to the human, and where can it move? Test changes through simulation before anyone implements them.

        </p>
        </div>
      </article>

      <article className="motion">
        <div className="motion-tag">Operate</div>
        <div className="motion-body">
          <h3 className="motion-h">Operate the business toward outcomes.</h3>
          <p>Tokaro includes a live workspace for configuring your workforce of people and agents, setting simple budgets, and reviewing early runs as agents go live. Today it gives leaders a clear place to see which agents exist, how they are set up, and what is starting to happen in production. We are still early in the performance monitoring buildout, and we will continue to add capabilities.

        </p>
        </div>
      </article>
    </div>

    <div className="workgraph-wrap">
      <div className="workgraph-caption">
        <div className="wc-eyebrow">Illustrative</div>
        <div className="wc-h">A living record of how work actually flows across humans and AI agents.</div>
      </div>
      <Workgraph />
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
const ExecIcon = ({ kind }) => {
  const s = { width: 42, height: 42, fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'ceo') return (
    <svg viewBox="0 0 42 42" {...s}><circle cx="21" cy="21" r="14" /><circle cx="21" cy="21" r="3" fill="currentColor" stroke="none" /><path d="M21 7v4M21 31v4M7 21h4M31 21h4" /></svg>);

  if (kind === 'fn') return (
    <svg viewBox="0 0 42 42" {...s}><rect x="7" y="7" width="11" height="11" /><rect x="24" y="7" width="11" height="11" /><rect x="7" y="24" width="11" height="11" /><rect x="24" y="24" width="11" height="11" fill="currentColor" stroke="none" /></svg>);

  if (kind === 'cio') return (
    <svg viewBox="0 0 42 42" {...s}><path d="M21 6l13 4v9c0 8-6 14-13 17-7-3-13-9-13-17v-9l13-4z" /><path d="M15 21l4 4 8-8" /></svg>);

  if (kind === 'chro') return (
    <svg viewBox="0 0 42 42" {...s}><circle cx="13" cy="15" r="4" /><circle cx="29" cy="15" r="4" /><circle cx="21" cy="30" r="4" /><path d="M16 18l4 9M26 18l-4 9M17 15h8" /></svg>);

  return null;
};

const Executives = () => {
  const roles = [
  {
    title: 'CEO & business leader',
    copy: 'Transparency into how the business is actually running, and a single view into the work and the levers to adjust it for how they want to drive results going forward.',
    kind: 'ceo'
  },
  {
    title: 'Functional leader',
    copy: 'A clear view of how their department is actually running, and where to intervene to drive better results.',
    kind: 'fn'
  },
  {
    title: 'CIO & CISO',
    copy: 'Visibility into the business\u2019s needs and the needs of their key constituents, so security, governance, and stakeholder requirements are met.',
    kind: 'cio'
  },
  {
    title: 'CHRO',
    copy: 'Visibility into how work is changing across the workforce, which roles need to evolve or be created, and where to redeploy people as AI takes on more tasks. A clear way to reshape the workforce so people and AI can do their best work.',
    kind: 'chro'
  }];


  return (
    <section id="executives" className="executives">
      <div className="section-eyebrow">03 — Value across the leadership team</div>
      <h2 className="section-h">A shared view of how the business runs.</h2>
      <p className="section-sub">
        When these executives operate from the same view, they advance the business together rather than separately.
      </p>

      <div className="exec-grid">
        {roles.map((r, i) =>
        <article key={i} className="exec-card">
            <div className="exec-glyph"><ExecIcon kind={r.kind} /></div>
            <h3 className="exec-h">For the {r.title}</h3>
            <p>{r.copy}</p>
          </article>
        )}
      </div>
    </section>);

};

// ─────────────────────────────────────────────────────────
const Thesis = () =>
<section id="thesis" className="thesis">
    <div className="section-eyebrow">04 — WHY IT MATTERS</div>
    <div className="thesis-body">
      <p className="thesis-quote">
        You've already adopted AI. The question now is whether you can see it working.
      </p>
      <p>
        Most leaders know their organization needs to look and operate differently. They know AI is not a one-time transformation. Once your business has shifted to a human and AI workforce, it never stops evolving. The line between human and agent keeps moving. The work keeps shifting. And the leaders who win are the ones who can see across all of it and shape it deliberately.
      </p>
      <p className="thesis-foot">That's what Tokaro is built for. This is a real transformation, and it takes more than a project plan or a dashboard. You need a system for running a business where humans and AI agents work together as one team, toward outcomes neither could deliver alone.

    </p>

      <div className="values">
        <div className="values-h">Our values</div>
        <ul className="values-list">
          <li>Disciplined Simplicity</li>
          <li>Human Excellence</li>
          <li>Agency Over Workforce</li>
          <li>Impact First</li>
        </ul>
      </div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
const Different = () =>
<section className="different">
    <div className="section-eyebrow">05 — Why Tokaro is different</div>
    <div className="diff-grid">
      <div className="diff-item">
        <div className="diff-num">i.</div>
        <h3>Tokaro sees what point tools can't.</h3>
        <p>Individual tools see the work within their domain. Tokaro sees across all of them — the formal work organizations document and the informal work they don't, the coordination between departments, the handoffs where ownership breaks down.</p>
      </div>
      <div className="diff-item">
        <div className="diff-num">ii.</div>
        <h3>It learns your organization the way a tenured employee does.</h3>
        <p>Every cycle deepens the platform's understanding of how your specific business works: the critical workflows, where constraints form, which interventions moved outcomes and which didn't. Features can be copied. That kind of accumulated context cannot.</p>
      </div>
      <div className="diff-item">
        <div className="diff-num">iii.</div>
        <h3>It connects how work flows to how the organization is designed.</h3>
        <p>A bottleneck between teams might mean the process needs reshaping — or it might mean the organization is missing a capability entirely. The fix for each is completely different. Getting to it requires seeing the workflow and the organization together.</p>
      </div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
const CTA = () => {
  return (
    <section id="cta" className="cta">
      <div className="cta-inner">
        <div className="cta-eyebrow">— Begin —</div>
        <h2 className="cta-h">Curious to see your workgraph?</h2>
        <p className="cta-sub">Schedule a working session with our team to map how work flows in your organization today, see where the human and AI workforce is producing results, and where the work is getting stuck.

        </p>

        <div className="cta-action">
          <a href="request-access.html" className="btn btn-primary cta-submit">
            Request early access →
          </a>
        </div>
      </div>
    </section>);

};


const Footer = () =>
<footer className="footer">
    <div className="footer-top">
      <div className="footer-brand">
        <a href="index.html" className="wordmark" aria-label="Tokaro">
          <img src="tokaro-logo.svg" alt="Tokaro" style={{ display: 'block', height: 52, width: 'auto' }} />
        </a>
        <p className="footer-tag">Performance management for your human and AI workforce.</p>
      </div>
      <div className="footer-cols">
        <div>
          <div className="footer-col-h">Platform</div>
          <a href="#product">See</a>
          <a href="#product">Shape</a>
          <a href="#product">Operate</a>
        </div>
        <div>
          <div className="footer-col-h">Company</div>
          <a href="#thesis">Why it matters</a>
          <a href="#executives">For leaders</a>
          <a href="privacy.html">Privacy</a>
          <a href="terms.html">Terms</a>
        </div>
        <div>
          <div className="footer-col-h">Connect</div>
          <a href="request-access.html">Request early access</a>
          <a href="mailto:hello@tokaro.ai?subject=Tokaro%20%E2%80%94%20website%20question">Contact</a>
        </div>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 Metis Labs LLC</span>
      <span>SEE / SHAPE / OPERATE</span>
    </div>
  </footer>;

window.Product = Product;
window.Executives = Executives;
window.Thesis = Thesis;
window.Different = Different;
window.CTA = CTA;
window.Footer = Footer;