// Use Cases — 6 verticals, before/after Model OS

const UseCase = ({ icon, vertical, before, after, outcome }) => (
  <div className="usecase-card">
    <div className="uc-icon">{icon}</div>
    <div className="uc-vertical">{vertical}</div>
    <div className="uc-compare">
      <div className="uc-before">
        <div className="uc-label">Before</div>
        <p>{before}</p>
      </div>
      <div className="uc-after">
        <div className="uc-label">With Model OS</div>
        <p>{after}</p>
      </div>
    </div>
    <div className="uc-outcome">{outcome}</div>
  </div>
);

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

const UseCases = () => (
  <section className="section" id="usecases" data-screen-label="07 Use Cases">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 06 — Use cases</span>
        <h2>Every vertical AI app has a hidden <span className="gradient">model moat</span>.</h2>
        <p className="lede">
          Inside its usage data. Model OS extracts it.
        </p>
      </div>

      <div className="usecase-grid">
        <UseCase
          icon={<UseCaseIcon path="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />}
          vertical="Legal AI"
          before="Owns contract workflows, lawyer edits, rejected clauses — but not the model behavior. Every clause runs through a rented LLM."
          after="Lawyer edits → SFT examples. Rejected clauses → hard negatives. Contract workflows → eval sets. Domain data → owned legal model."
          outcome="Lower inference cost · stronger domain behavior · safer deployment · compounding legal model moat"
        />
        <UseCase
          icon={<UseCaseIcon path="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />}
          vertical="Customer Support AI"
          before="Collects conversations, escalations, failed answers, CSAT signals — but none of it becomes model behavior. The wrapper stays frozen."
          after="Routine tickets → low-cost owned models. Failed answers → eval cases. Escalations → training signals. CSAT → routing logic."
          outcome="Lower cost · better accuracy · faster resolution · continuously improving support intelligence"
        />
        <UseCase
          icon={<UseCaseIcon path="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />}
          vertical="Coding Agent"
          before="Relies on frontier models but can't capture accepted patches, failed tests, reverted diffs, and long-running execution state."
          after="Accepted patches → positive examples. Failed tests → hard negatives. Tool traces → workflow memory. Runtime sessions → eval data."
          outcome="Better code behavior · safer execution · stronger workflow control · routing grounded in real code outcomes"
        />
        <UseCase
          icon={<UseCaseIcon path="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />}
          vertical="Healthcare Intake"
          before="Needs safety, auditability, human review, escalation handling, domain-specific behavior — but runs on a generic frontier model."
          after="Nurse edits, triage corrections, escalation decisions, patient workflow outcomes → training data, eval data, and deployment gates."
          outcome="Safer deployment · human-in-loop control · stronger eval discipline · traceable healthcare intelligence"
        />
        <UseCase
          icon={<UseCaseIcon path="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />}
          vertical="Sales / GTM AI"
          before="Collects outbound sequences, reply patterns, objections, call notes, conversion outcomes — but the model behavior remains rented."
          after="Successful sequences → preference data. Failed replies → hard negatives. Conversion signals → routing logic. CRM workflows → eval cases."
          outcome="Higher conversion · stronger domain messaging · lower inference cost · customer-owned GTM intelligence"
        />
        <UseCase
          icon={<UseCaseIcon path="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />}
          vertical="Creator / Marketing AI"
          before="Collects accepted content, rejected outputs, campaign conversions, brand edits, tone preferences — but the intelligence remains rented."
          after="Accepted outputs → preference data. Rejected drafts → hard negatives. Conversion signals → routing logic. Brand edits → owned behavior."
          outcome="Brand-specific models · lower generation cost · better creative consistency · compounding customer intelligence"
        />
      </div>
    </div>
  </section>
);

window.UseCases = UseCases;