// Screen 4: Authorization detail — 4 variations
function AuthScreen() {
  return (
    <>
      <div className="screen-intro">
        <h2>④ Authorization detail</h2>
        <p>Single auth record — covers one service code for one participant in a plan year. Pace, projected burn, claim trail.</p>
      </div>
      <div className="var-grid">

        {/* V1 — Burndown chart */}
        <Variation num="1" title="Burndown projection" desc="agile-style burn chart">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="auth" compact/>
            <div style={{flex:1}}>
              <SketchTopBar title="Authorization · T2021 · Aguilar P." right={<><span className="sk-pill">edit</span><span className="sk-btn">renew</span></>}/>
              <div className="sk-box" style={{padding:12,marginBottom:10}}>
                <SkH kicker="burndown" right={<span className="sk-pill st-crit">⚠ projected exhaustion May 14</span>}>Units remaining over time</SkH>
                <svg viewBox="0 0 400 140" width="100%" height="170">
                  {/* axes */}
                  <line x1="30" y1="10" x2="30" y2="120" stroke="var(--ink)" strokeWidth="1.5"/>
                  <line x1="30" y1="120" x2="390" y2="120" stroke="var(--ink)" strokeWidth="1.5"/>
                  {/* ideal line */}
                  <line x1="30" y1="10" x2="390" y2="120" stroke="var(--sage-deep)" strokeWidth="1.5" strokeDasharray="4 3"/>
                  {/* actual line */}
                  <polyline points="30,10 80,32 130,55 180,72 230,92 260,108" fill="none" stroke="var(--r-orange)" strokeWidth="2.5" strokeLinejoin="round"/>
                  {/* projection */}
                  <polyline points="260,108 320,128 360,138" fill="none" stroke="var(--r-red)" strokeWidth="2" strokeDasharray="3 3"/>
                  <circle cx="260" cy="108" r="3.5" fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.5"/>
                  <text x="265" y="103" fontFamily="JetBrains Mono" fontSize="9">today · 168u left</text>
                  <text x="34" y="20" fontFamily="JetBrains Mono" fontSize="8">2880</text>
                  <text x="34" y="118" fontFamily="JetBrains Mono" fontSize="8">0</text>
                  <text x="32" y="135" fontFamily="JetBrains Mono" fontSize="8">FEB</text>
                  <text x="190" y="135" fontFamily="JetBrains Mono" fontSize="8">JUN</text>
                  <text x="350" y="135" fontFamily="JetBrains Mono" fontSize="8">FEB</text>
                </svg>
                <div className="sk-row" style={{gap:18,fontSize:14}}>
                  <span className="sk-sub"><span style={{display:'inline-block',width:12,height:2,background:'var(--sage-deep)',marginRight:5,verticalAlign:'middle'}}/>ideal pace</span>
                  <span className="sk-sub"><span style={{display:'inline-block',width:12,height:2,background:'var(--r-orange)',marginRight:5,verticalAlign:'middle'}}/>actual</span>
                  <span className="sk-sub"><span style={{display:'inline-block',width:12,height:2,background:'var(--r-red)',marginRight:5,verticalAlign:'middle'}}/>projected</span>
                </div>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
                {[['Service','T2021'],['Plan year','2/26 → 2/27'],['Authorized','2,880u'],['Pace','+22%']].map(([k,v])=>(
                  <div key={k} className="sk-box" style={{padding:8}}><div className="sk-cap">{k}</div><div className="hand-2" style={{fontSize:16}}>{v}</div></div>
                ))}
              </div>
            </div>
          </div>
        </Variation>

        {/* V2 — Calendar grid showing daily/weekly use */}
        <Variation num="2" title="Calendar usage" desc="daily heat-cells across the plan year">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="auth" compact/>
            <div style={{flex:1}}>
              <SketchTopBar title="T2021 · daily use heatmap"/>
              <div className="sk-box" style={{padding:12}}>
                <SkH kicker="apr 2026">Daily units delivered</SkH>
                <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:3,marginTop:6}}>
                  {['SUN','MON','TUE','WED','THU','FRI','SAT'].map(d=><div key={d} className="sk-cap" style={{textAlign:'center'}}>{d}</div>)}
                  {Array.from({length:35}).map((_,i)=>{
                    const v = i<2||i>32 ? null : [0,28,30,32,28,30,0][i%7] + (i*3 % 7);
                    const tone = v==null?'paper-2': v>30?'#f0c0b3': v>20?'var(--sage)':'var(--sage-tint)';
                    return (
                      <div key={i} style={{
                        border:'1.2px solid var(--ink)',borderRadius:4,padding:4,minHeight:42,
                        background: v==null?'var(--paper-2)':tone, opacity:v==null?.4:1
                      }}>
                        <div className="mono" style={{fontSize:8,color:'var(--ink-mute)'}}>{i-1>0&&i<33?i-1:''}</div>
                        <div className="hand-2" style={{fontSize:13,textAlign:'center'}}>{v??''}</div>
                      </div>
                    );
                  })}
                </div>
                <div className="sk-row" style={{marginTop:10,gap:14}}>
                  <span className="sk-sub">total: <b>240u</b></span>
                  <span className="sk-sub">cap: 228u</span>
                  <span className="sk-sub st-crit">over by 12u</span>
                  <span className="sk-pill" style={{marginLeft:'auto'}}>‹ Mar  ·  May ›</span>
                </div>
              </div>
              <Note style={{marginTop:10}}>spot patterns · which weeks ran hot</Note>
            </div>
          </div>
        </Variation>

        {/* V3 — Stacked summary + claim trail */}
        <Variation num="3" title="Summary + claim trail" desc="audit-friendly, every claim listed">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="auth" compact/>
            <div style={{flex:1}}>
              <SketchTopBar title="Auth T2021 · audit view"/>
              <div className="sk-box sage" style={{padding:12,marginBottom:10}}>
                <div className="sk-row" style={{gap:14}}>
                  <div><div className="sk-cap">participant</div><div className="hand-2" style={{fontSize:16}}>Aguilar, P.</div></div>
                  <div><div className="sk-cap">code</div><div className="hand-2" style={{fontSize:16}}>T2021 · CLS 1:1</div></div>
                  <div><div className="sk-cap">period</div><div className="hand-2" style={{fontSize:16}}>2/26 → 2/27</div></div>
                  <div style={{marginLeft:'auto'}}><div className="sk-cap">remain</div><div className="hand-2 st-crit" style={{fontSize:22}}>168u</div></div>
                </div>
                <div style={{height:8}}/>
                <UsageBar used={94} remain={6} warn height={12}/>
              </div>
              <SkH kicker="claim trail · 12 of 14">Submitted claims</SkH>
              <table className="sk">
                <thead><tr><th>Claim ID</th><th>Date</th><th>Units</th><th>Billed</th><th>Paid</th><th>Status</th></tr></thead>
                <tbody>
                  {[['…46082','4/15',28,'$363.40','—','submitted','info'],
                    ['…46082','4/8',30,'$385.48','$385.48','paid','ok'],
                    ['…46082','4/4',32,'$408.96','$408.96','paid','ok'],
                    ['…46082','4/1',30,'$357.84','$357.84','paid','ok'],
                    ['…46060','3/25',28,'$357.84','$357.84','paid','ok'],
                    ['…46088','3/14',26,'$332.28','—','denied','crit']
                  ].map((r,i)=>(
                    <tr key={i}>
                      <td className="mono" style={{fontSize:11}}>{r[0]}</td>
                      <td className="mono" style={{fontSize:11}}>{r[1]}</td>
                      <td>{r[2]}</td>
                      <td className="mono" style={{fontSize:11}}>{r[3]}</td>
                      <td className="mono" style={{fontSize:11}}>{r[4]}</td>
                      <td><span className={`dot-st bg-${r[6]}`}/> {r[5]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Variation>

        {/* V4 — At-a-glance card stack */}
        <Variation num="4" title="Glance card stack" desc="all key facts in 6 stacked cards">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="auth" compact/>
            <div style={{flex:1}}>
              <SketchTopBar title="Auth detail · T2021"/>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
                <div className="sk-box" style={{padding:12,gridColumn:'span 2'}}>
                  <SkH kicker="participant">Phillip Aguilar</SkH>
                  <div className="sk-sub">M · 47 · Honolulu · ID 47298473</div>
                  <div style={{height:8}}/>
                  <UsageBar used={94} remain={6} warn height={12}/>
                </div>
                <div className="sk-box" style={{padding:12,textAlign:'center'}}>
                  <Gauge pct={94} status="crit" label="94%"/>
                  <div className="sk-cap">UTILIZATION</div>
                </div>
                {[
                  ['service code','T2021 · CLS 1:1'],
                  ['plan year','Feb 26 → Feb 27, 2026'],
                  ['authorized','2,880 units'],
                  ['used to date','2,712 units'],
                  ['monthly cap','228u'],
                  ['this month','240u (+12 over)'],
                ].map(([k,v])=>(
                  <div key={k} className="sk-box" style={{padding:10}}>
                    <div className="sk-cap">{k}</div>
                    <div className="hand-2" style={{fontSize:16}}>{v}</div>
                  </div>
                ))}
              </div>
              <Note style={{marginTop:10}}>simplest · fewest decisions to make</Note>
            </div>
          </div>
        </Variation>

      </div>
    </>
  );
}
window.AuthScreen = AuthScreen;