src/App.tsx

import {useEffect,useState} from 'react'

const STEP_MS=7000
const stages=[
 {id:'blueprint',number:'01',label:'MODEL',title:'Draw the blueprint before building.',body:'The semantic model defines what exists, how it relates, and which rules the finished system must preserve.',metaphor:'Blueprint',teaql:'KSML domain model'},
 {id:'foundation',number:'02',label:'EVALUATE + GENERATE',title:'Approve the plan. Build a solid foundation.',body:'Deterministic evaluation stamps an accepted model. The generated typed library becomes the foundation shared by application code.',metaphor:'Approval + foundation',teaql:'Evaluation + generated library'},
 {id:'workspace',number:'03',label:'WORKSPACE',title:'Set up a safe place to build.',body:'The workspace provides the runtime wiring, tools, structure, and boundaries needed to turn the approved design into working software.',metaphor:'Scaffold + work platform',teaql:'Executable workspace'},
 {id:'assist',number:'04',label:'ASSIST LOOP',title:'Now the team can start building.',body:'Assist delivers the exact model-aware knowledge needed for the current task. Ask, apply, verify—and repeat until the design becomes real.',metaphor:'Move one brick at a time',teaql:'Model-aware Assist'},
 {id:'evidence',number:'05',label:'EVIDENCE',title:'Inspect the building before calling it complete.',body:'Compilation, tests, runtime checks, and retained evidence prove what was actually built against the approved model.',metaphor:'Inspection + completion',teaql:'Executable evidence'},
]

export function App(){
 const [index,setIndex]=useState(-1),[playing,setPlaying]=useState(false)
 useEffect(()=>{if(index!==-1)return;const timer=window.setTimeout(()=>{setIndex(0);setPlaying(true)},7000);return()=>clearTimeout(timer)},[index])
 useEffect(()=>{if(!playing||index<0)return;const timer=window.setInterval(()=>setIndex(current=>{if(current===stages.length-1){setPlaying(false);return current}return current+1}),STEP_MS);return()=>clearInterval(timer)},[playing,index])
 if(index<0)return <main className="opening"><h1>TeaQL <em>Harness</em></h1><p>TURN AI OUTPUT INTO EXECUTABLE EVIDENCE</p></main>
 const stage=stages[index]
 return <main className={`construction stage-${stage.id}`}>
  <header><div className="brand"><span>T</span><b>TEAQL HARNESS</b></div><nav>{stages.map((item,i)=><button key={item.id} className={i===index?'active':i<index?'done':''} onClick={()=>{setIndex(i);setPlaying(false)}}><i/>{item.label}</button>)}</nav><small>{stage.number} / 05</small></header>
  <section className="story">
   <div className="build-scene" aria-label={stage.metaphor}>
    <div className="sky"><i/><i/><i/></div>
    <div className="ground"/>
    <div className="blueprint"><span/><span/><span/><b>PAYMENT PLATFORM</b><em>APPROVED</em></div>
    <div className="foundation"><i/><i/><i/></div>
    <div className="scaffold"><i/><i/><i/><i/></div>
    <div className="house"><div className="roof"/><div className="wall"><i/><i/><span/></div></div>
    <div className="bricks">{Array.from({length:12},(_,i)=><i key={i}/>)}</div>
    <div className="inspection">✓</div>
    <div className="scene-caption"><small>{stage.metaphor}</small><b>{stage.teaql}</b></div>
   </div>
   <aside key={stage.id}><span>{stage.number} · {stage.label}</span><h1>{stage.title}</h1><p>{stage.body}</p>{stage.id==='assist'&&<div className="loop">ASK <i>→</i> APPLY <i>→</i> VERIFY <b>↻</b></div>}{stage.id==='evidence'&&<div className="checks"><span>✓ Model</span><span>✓ Library</span><span>✓ Runtime</span><span>✓ Evidence</span></div>}</aside>
  </section>
  <button className="pause" onClick={()=>setPlaying(v=>!v)}>{playing?'Ⅱ':'▶'}</button>
 </main>
}