// Tokaro logo — actual mark from uploads
const TokaroMark = ({ size = 24 }) =>
<img src="tokaro-icon.svg" alt="" width={size} height={Math.round(size * 60 / 69)} style={{ display: 'block' }} />;


const Wordmark = () =>
<a href="#" className="wordmark">
    <TokaroMark size={26} />
    <span>tokaro</span>
  </a>;


const Nav = ({ onTweaksOpen }) =>
<nav className="nav">
    <Wordmark />
    <div className="nav-links">
      <a href="#problem">Problem</a>
      <a href="#product">Platform</a>
      <a href="#executives">For leaders</a>
      <a href="#thesis">Why it matters</a>
    </div>
    <a href="request-access.html" className="nav-cta">Request early access →</a>
  </nav>;


// ─────────────────────────────────────────────────────────
const Hero = () =>
<section className="hero">
    <h1 className="hero-headline">
      Performance management<br />
      for your <em>human</em> and <em>AI</em> workforce.
    </h1>
    <p className="hero-sub">
      Tokaro gives leaders the ability to see how work flows today, shape how humans and AI agents work together, and operate the business toward the outcomes that matter.
    </p>
    <div className="hero-actions">
      <a href="request-access.html" className="btn btn-primary">Request early access</a>
      <a href="#product" className="btn btn-ghost">See how it works <span className="arrow">→</span></a>
    </div>

    <div className="hero-meta">
      <div><span className="meta-label">Built for</span><span className="meta-val">Mid-market & enterprise</span></div>
      <div><span className="meta-label">Manages</span><span className="meta-val">Humans + AI agents</span></div>
      <div><span className="meta-label">Lives across</span><span className="meta-val">Every system work happens in</span></div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
const Problem = () =>
<section id="problem" className="problem">
    <div className="section-eyebrow">01 — The problem</div>
    <h2 className="section-h">Finally see how your business runs

  </h2>

    <div className="problem-grid">
      <div className="problem-copy">
        <p className="lede">Your workforce already runs on humans and AI agents together, and the line between them keeps moving. Most organizations cannot see that clearly. The work is buried in tools, scattered across departments, and often undocumented, duplicated, or unnecessary.

      </p>
        <p>That was always a gap. AI adoption widens it. Every new agent or automated workflow adds more invisible motion: more handoffs no one is watching, more places where work quietly stalls. You don't see the bottleneck until it's already a problem.

      </p>
      </div>

      <aside className="vs-card">
        <div className="vs-row">
          <div className="vs-label">Yesterday</div>
          <div className="vs-art">
            {/* org chart */}
            <svg viewBox="0 0 200 120" className="vs-svg">
              <rect x="85" y="8" width="30" height="18" fill="none" stroke="currentColor" strokeWidth="1" />
              <line x1="100" y1="26" x2="100" y2="46" stroke="currentColor" strokeWidth="1" />
              <line x1="40" y1="46" x2="160" y2="46" stroke="currentColor" strokeWidth="1" />
              <line x1="40" y1="46" x2="40" y2="56" stroke="currentColor" strokeWidth="1" />
              <line x1="100" y1="46" x2="100" y2="56" stroke="currentColor" strokeWidth="1" />
              <line x1="160" y1="46" x2="160" y2="56" stroke="currentColor" strokeWidth="1" />
              <rect x="25" y="56" width="30" height="18" fill="none" stroke="currentColor" strokeWidth="1" />
              <rect x="85" y="56" width="30" height="18" fill="none" stroke="currentColor" strokeWidth="1" />
              <rect x="145" y="56" width="30" height="18" fill="none" stroke="currentColor" strokeWidth="1" />
              <line x1="40" y1="74" x2="40" y2="84" stroke="currentColor" strokeWidth="1" opacity="0.4" />
              <line x1="100" y1="74" x2="100" y2="84" stroke="currentColor" strokeWidth="1" opacity="0.4" />
              <line x1="160" y1="74" x2="160" y2="84" stroke="currentColor" strokeWidth="1" opacity="0.4" />
              <rect x="25" y="92" width="30" height="14" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.5" />
              <rect x="85" y="92" width="30" height="14" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.5" />
              <rect x="145" y="92" width="30" height="14" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.5" />
            </svg>
            <div className="vs-cap">Org chart · who reports to whom</div>
          </div>
        </div>
        <div className="vs-divider" />
        <div className="vs-row">
          <div className="vs-label vs-label-now">Today</div>
          <div className="vs-art">
            <svg viewBox="0 0 200 120" className="vs-svg vs-svg-graph">
              {/* nodes */}
              {[
            [30, 30, 'c'], [70, 55, 'r'], [115, 30, 'c'], [165, 50, 'r'],
            [40, 90, 'r'], [90, 95, 'c'], [140, 85, 'r'], [175, 100, 'c']].
            map(([x, y, t], i) =>
            t === 'c' ?
            <circle key={i} cx={x} cy={y} r="6" fill="none" stroke="currentColor" strokeWidth="1" /> :
            <rect key={i} x={x - 6} y={y - 6} width="12" height="12" fill="currentColor" />
            )}
              {/* edges */}
              <path d="M 30 30 Q 50 20 70 55" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
              <path d="M 70 55 Q 95 35 115 30" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
              <path d="M 115 30 Q 145 30 165 50" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
              <path d="M 70 55 Q 60 75 40 90" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
              <path d="M 40 90 Q 65 90 90 95" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
              <path d="M 90 95 Q 115 90 140 85" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
              <path d="M 140 85 Q 160 95 175 100" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
              <path d="M 165 50 Q 155 70 140 85" stroke="currentColor" fill="none" strokeWidth="1" strokeDasharray="2 2" />
            </svg>
            <div className="vs-cap">Workgraph · how work actually flows</div>
          </div>
        </div>
      </aside>
    </div>

    <div className="problem-foot">
      <a href="#product" className="link-jump">Platform <span className="lj-arrow">→</span></a>
    </div>

  </section>;


window.Nav = Nav;
window.Hero = Hero;
window.Problem = Problem;
window.TokaroMark = TokaroMark;