/* Page 4 — How we work + Stack (white/cream) */

function Page4() {
  const principles = [
    ['01','We start with your task.','Not with our price list. First conversation — a walkthrough of a real business process: what hurts, where time disappears, who is out of sync.'],
    ['02','We reuse what already runs.','If your need maps to AvaPro CRM or ERP — no point building from scratch. Faster to launch, cheaper to maintain, proven in production.'],
    ['03','We build custom where nothing fits.','Import logistics, specific OMS, a non-standard workflow — we assemble it around you. SoloTrack is the living example.'],
    ['04','We embed AI where it returns time.','OCR on incoming documents, semantic search, AI assistants in ERP loops. OpenClaw powers our products and client loops.']
  ];
  const stack = ['Next.js','React','TypeScript','PostgreSQL','Drizzle','Tailwind','shadcn/ui','Railway','Sentry','pgvector','BullMQ','PWA · offline'];

  return (
    <section id="how" className="black-on-cream" style={{ padding:'120px 0' }}>
      <div className="wrap">
        <div className="page-chapter"><span>(04 / 05) — How we work</span><span>Method · Stack</span></div>

        <Reveal>
          <h2 className="display display-lg" style={{ marginTop:64, maxWidth:'12ch' }}>
            Four moves.<br/>
            <span style={{ display:'inline-block', background:'var(--black)', color:'var(--yellow)', padding:'0 16px 4px' }}>Every engagement.</span>
          </h2>
        </Reveal>

        <div style={{ marginTop:64 }}>
          {principles.map(([n,t,d],i)=>(
            <Reveal key={n} delay={i*60}>
              <div className="p4-row">
                <div className="display" style={{ fontSize:'clamp(34px,4vw,64px)', lineHeight:.9 }}>{n}</div>
                <div className="display display-sm">{t}</div>
                <div className="body text-wrap-pretty p4-desc" style={{ maxWidth:480, paddingTop:6, opacity:.75 }}>{d}</div>
              </div>
            </Reveal>
          ))}
        </div>

        <div className="p4-stack-grid">
          <Reveal>
            <div className="mono" style={{ opacity:.55, marginBottom:14 }}>§ Stack</div>
            <div className="display display-sm" style={{ maxWidth:'14ch' }}>Proven on ourselves first.</div>
          </Reveal>
          <Reveal delay={100}>
            <div style={{ display:'flex', flexWrap:'wrap', gap:'10px 12px' }}>
              {stack.map(s=>(
                <span key={s} style={{ fontFamily:'var(--f-display)', fontWeight:500, fontSize:'clamp(14px,1.6vw,24px)', letterSpacing:'-.02em', padding:'7px 14px', border:'1px solid var(--black)', borderRadius:999 }}>{s}</span>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Page4 = Page4;