/* Page 4 — Section 04: How we work + Stack (#how, cream). Bilingual. */

const STACK = ['Next.js','React','TypeScript','PostgreSQL','Drizzle','Tailwind','shadcn/ui','Railway','Sentry','pgvector','BullMQ','LLM APIs','PWA · offline'];

function Page4() {
  const { L } = useLang();
  const t = L.how;
  return (
    <section id="how" className="black-on-cream">
      <div className="wrap">
        <div className="page-chapter"><span>{t.chapter.left}</span><span>{t.chapter.right}</span></div>

        <Reveal>
          <h2 className="display display-lg" style={{ marginTop:64, maxWidth:'13ch' }}>
            {t.title.line1}<br/>
            <span style={{ display:'inline-block', background:'var(--black)', color:'var(--yellow)', padding:'0 16px 4px' }}>{t.title.accent}</span>
          </h2>
        </Reveal>

        <Reveal delay={80} className="body-lg text-wrap-pretty" style={{ marginTop:36, maxWidth:760, opacity:.8 }}>
          {t.body}
        </Reveal>

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

        <div className="p4-stack-grid">
          <Reveal>
            <div className="mono" style={{ opacity:.55, marginBottom:14 }}>{t.stackEyebrow}</div>
            <div className="display display-sm" style={{ maxWidth:'16ch' }}>{t.stackLine}</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;