/* Page 3 — Ecosystem + SoloTrack (yellow) */

function Page3() {
  const contours = [
    { num:'01', label:'Guest & Front-of-house', core:'AvaPro CRM' },
    { num:'02', label:'Operations & Back-office', core:'AvaPro ERP · CheckMaster · Koshiko' },
    { num:'03', label:'People & Training', core:'TeamHub · Training Portal' },
    { num:'04', label:'Knowledge & Management', core:'AvaBase · Mission Control' },
    { num:'05', label:'Studio / Custom delivery', core:'SoloTrack · AvaTrack · OpenClaw' }
  ];

  return (
    <section id="ecosystem" style={{ padding:'120px 0', background:'var(--yellow)' }}>
      <div className="wrap">
        <div className="page-chapter"><span>(03 / 05) — What we do &amp; what we ship</span><span>Ecosystem · Flagship case</span></div>

        <Reveal>
          <h2 className="display display-xl" style={{ marginTop:64, maxWidth:'13ch' }}>
            Five<br/>connected<br/>
            <span style={{ display:'inline-block', background:'var(--black)', color:'var(--yellow)', padding:'0 18px 6px' }}>loops.</span>
          </h2>
        </Reveal>

        <div style={{ marginTop:64 }}>
          {contours.map((c,i)=>(
            <Reveal key={c.num} delay={i*50}>
              <div className="p3-row">
                <div className="display display-sm">{c.num}</div>
                <div className="display display-sm">{c.label}</div>
                <div className="mono p3-core">{c.core}</div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* SoloTrack as proof */}
        <div style={{ marginTop:96 }}>
          <div className="mono" style={{ opacity:.55, marginBottom:20 }}>Flagship case · SoloTrack · Dubai</div>
          <Reveal>
            <h3 className="display display-lg" style={{ maxWidth:'14ch' }}>
              From ten <span className="strike">spreadsheets</span><br/>
              to one{' '}<span style={{ display:'inline-block', background:'var(--black)', color:'var(--yellow)', padding:'0 14px 4px' }}>loop.</span>
            </h3>
          </Reveal>

          <div className="p3-ba">
            <Reveal>
              <div className="p3-card">
                <div className="mono" style={{ opacity:.55 }}>Before</div>
                <div className="display display-sm" style={{ marginTop:8, maxWidth:'12ch' }}>Chaos of files.</div>
                <div style={{ position:'absolute', inset:'110px 24px 24px', display:'flex', flexWrap:'wrap', gap:10, alignContent:'flex-start' }}>
                  {['Sales.xlsx','Orders_v4.xlsx','Import_FINAL.xlsx','Containers.xlsx','Invoices_2024.xlsx','Supplier_list.xlsx','Delivery_Q2.xlsx','Payments-new.xlsx','Stock-check.xlsx'].map((f,i)=>(
                    <span key={f} style={{ fontFamily:'var(--f-mono)', fontSize:11, border:'1px solid var(--black)', padding:'6px 10px', borderRadius:6, transform:`rotate(${(i*37)%7 - 3}deg)`, opacity:.8 }}>{f}</span>
                  ))}
                </div>
              </div>
            </Reveal>
            <Reveal delay={120} className="p3-arrow">→</Reveal>
            <Reveal delay={160}>
              <div className="p3-card p3-card--after">
                <div className="mono" style={{ opacity:.7 }}>After · SoloTrack</div>
                <div className="display display-sm" style={{ marginTop:8, maxWidth:'12ch', color:'var(--yellow)' }}>One loop. Every role.</div>
                <div style={{ position:'absolute', left:36, bottom:36, display:'flex', flexDirection:'column', gap:6, fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'.1em' }}>
                  <div>ORDER → SUPPLIER</div>
                  <div>SUPPLIER → CONTAINER</div>
                  <div>CONTAINER → PAYMENT</div>
                  <div>PAYMENT → DELIVERY</div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Page3 = Page3;