// Section 18 — Revenue Engine

const RevenueCard = ({ icon, title, subtitle, body }) => (
  <div className="rev-card">
    <div className="rev-icon">{icon}</div>
    <div className="rev-title">{title}</div>
    <div className="rev-subtitle">{subtitle}</div>
    <p className="rev-body">{body}</p>
  </div>
);

const RevIcon = ({ path }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="22" height="22">
    <path d={path} />
  </svg>
);

const revenueCards = [
  {
    icon: <RevIcon path="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />,
    title: 'Workspace Subscription',
    subtitle: 'Teams & Organizations',
    body: 'AI app teams managing datasets, models, evals, workflows, and deployments. Subscription access to the full Model OS operating stack.',
  },
  {
    icon: <RevIcon path="M13 10V3L4 14h7v7l9-11h-7z" />,
    title: 'Usage-Based Execution',
    subtitle: 'Per Run · Per Call · Per Job',
    body: 'Per run, per model call, per workflow, per eval, per fine-tuning job. Revenue expands with platform depth and model ownership.',
  },
  {
    icon: <RevIcon path="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />,
    title: 'Enterprise Runtime',
    subtitle: 'Private Deployment · Governance',
    body: 'Private deployment, governance, observability, human-in-loop, SLA, compliance. Enterprise-grade infrastructure for owned-model systems.',
  },
  {
    icon: <RevIcon path="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />,
    title: 'Model Economy Layer',
    subtitle: 'Attribution · Lineage · Distribution',
    body: 'Attribution, lineage, benchmark APIs, model distribution, revenue share. The infrastructure layer for the model supply economy.',
  },
];

const revenueExpanded = [
  {
    layer: 'Usage Layer',
    buyers: 'Developers · AI-native teams · Workflow builders',
    revenue: 'Routed usage · Per-request execution · Multi-model workflow runs',
  },
  {
    layer: 'Data + Benchmark Layer',
    buyers: 'Enterprises · Providers · Ecosystem participants',
    revenue: 'Benchmark APIs · Runtime analytics · Recommendation infra · Attribution services',
  },
  {
    layer: 'Ops Layer',
    buyers: 'Enterprise AI teams · Platforms · Providers',
    revenue: 'Subscriptions · Ops tooling · Monitoring · Governance · Deployment',
  },
  {
    layer: 'Match Layer',
    buyers: 'Providers · Data / compute suppliers · Hardware ecosystem',
    revenue: 'Matchmaking fees · Distribution infra · Supplier coordination · Hardware / device partnerships',
  },
];

const Revenue = () => (
  <section className="section" id="revenue" data-screen-label="10 Revenue">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 09 — Revenue engine</span>
        <h2>Revenue expands as wrappers become <span className="gradient">owned-model systems</span>.</h2>
        <p className="lede">
          We monetize the migration from rented intelligence to owned intelligence.
        </p>
      </div>

      <div className="rev-grid">
        {revenueCards.map((card, i) => (
          <RevenueCard key={i} {...card} />
        ))}
      </div>

      <div className="rev-expanded">
        <div className="rev-exp-label">/ Revenue by layer</div>
        <div className="rev-exp-grid">
          {revenueExpanded.map((row, i) => (
            <div key={i} className="rev-exp-row">
              <div className="rev-exp-layer">{row.layer}</div>
              <div className="rev-exp-buyers">
                <span className="rev-exp-k">Buyers</span>
                <span className="rev-exp-v">{row.buyers}</span>
              </div>
              <div className="rev-exp-revenue">
                <span className="rev-exp-k">Revenue</span>
                <span className="rev-exp-v">{row.revenue}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="rev-punch">
        Different layers of Model OS bring in different buyers and revenue types.
      </div>
    </div>
  </section>
);

window.Revenue = Revenue;