// v5 — Principles. The "how the work works" row on /about: four rules,
// a headline and one line each. No boxes; the surface and the hairlines carry it.
const V5_PRINCIPLES = [
  { k: "Go farther, faster", d: "Test the assumptions before the money goes in." },
  { k: "Stay human-centered", d: "Talk to the people before drawing the identity." },
  { k: "Eliminate dead ends", d: "Prototype fast and connect every touchpoint." },
  { k: "Experience nirvana", d: "Product and communication that perform, so joy goes up." },
];

const V5Principles = () => {
  return (
    <section id="principles" className="v5-principles" data-screen-label="How the work works">
      <div className="v4-container">
        <div className="v5-section-open v5-section-open-sub">
          <div className="v5-section-open-row v5-section-open-row-disciplines">
            <h3 className="v5-section-open-headline v5-principles-headline" data-cursor="Four rules">
              <WordReveal text="How the work works." stagger={60} />
            </h3>
          </div>
        </div>
        <div className="v5-principles-row">
          {V5_PRINCIPLES.map((p, i) => (
            <FadeIn key={p.k} delay={120 + i * 90}>
              <div className="v5-principle">
                <h4 className="v5-principle-name">{p.k}</h4>
                <p className="v5-principle-line">{p.d}</p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { V5Principles, V5_PRINCIPLES });