function Principles() {
  const items = [
    {
      n: "01",
      title: "We scope before we quote.",
      body: "A paid week of discovery before any fixed-price estimate. If we can't scope it, we tell you — and refund the week."
    },
    {
      n: "02",
      title: "We ship every two weeks.",
      body: "Demo every other Friday, in your hands, no slideware. If a sprint slips, you hear about it the morning we know — not on demo day."
    },
    {
      n: "03",
      title: "We tell you when we're wrong.",
      body: "If the framework we picked is the wrong call, we say so. If you're asking for the wrong feature, we say that too."
    },
    {
      n: "04",
      title: "You own the code at every commit.",
      body: "Your GitHub org, your infrastructure, your accounts. We have access while we're working — not after."
    },
    {
      n: "05",
      title: "We hand off so cleanly you could fire us.",
      body: "Docs, runbooks, a recorded walkthrough. The next engineer should be productive on day one, even if that engineer is your in-house team."
    }
  ];

  const timeline = [
    { tag: "week 0",     label: "discovery",     note: "paid · 1 week" },
    { tag: "week 1",     label: "kickoff",       note: "scope locked" },
    { tag: "week 2–N",   label: "build · demo",  note: "biweekly Fridays" },
    { tag: "week N+1",   label: "handoff",       note: "docs + walkthrough" },
    { tag: "ongoing",    label: "retainer",      note: "optional · monthly" }
  ];

  return (
    <section id="how-we-work" className="section section-alt">
      <div className="container">
        <p className="eyebrow">how we work</p>
        <h2 className="section-title">Five things we don't compromise on.</h2>
        <p className="section-sub">
          We're shipping two projects this quarter that we can't talk about yet — case studies in autumn 2026. In the meantime, this is how the work goes regardless of who it's for.
        </p>

        <div className="principles">
          {items.map(it => (
            <div className="principle" key={it.n}>
              <div className="principle-n">{it.n}</div>
              <div className="principle-body">
                <h3 className="principle-title">{it.title}</h3>
                <p className="principle-text">{it.body}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="timeline">
          <div className="timeline-label">// a typical engagement</div>
          <div className="timeline-track">
            {timeline.map((t, i) => (
              <div className="t-step" key={t.tag}>
                <div className="t-dot"></div>
                <div className="t-tag">{t.tag}</div>
                <div className="t-label">{t.label}</div>
                <div className="t-note">{t.note}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Principles = Principles;